html5,css3指导

177 阅读4分钟

内容将从html5,css3模块安排,内容涉及html5常用标签,常用样式等

人靠衣裳马靠鞍,一看长相二看穿。 网页展现两主体,一是标签二样式。

解释:一匹🐎包含马头(耳朵,眼睛,鼻子等)、马身(主体,四肢)、马尾,配什么样的鞍其骑着的效果很不相同,而一个人各个部位画什么样的妆容,穿什么样的衣服也会体现出一个人的品位及内涵。

网页如是。

html(Hyper Text Markup Language 超文本标记语言)标签用来标记一个元素快,样式作用的最小单元。语意化标签用来标记网页的各个组织。

css(Cascading Style Sheets 层叠样式表)样式用来美化元素快,综合表现于网页,样式既可以控制大小,位置,距离,文本内容展现,多维变换,运动动画过程,也可以控制一些交互行为。

1. Html5部分

  • 1.1 常见的标签
empty:  area,base,basefont,br,col,frame,hr,img,input,link,meta,param,embed,command,keygen,source,track,wbr

block: a,address,code,article,applet,aside,audio,blockquote,button,canvas,center,dd,del,dir,div,dl,dt,fieldset,figcaption,figure,footer,form,frameset,h1,h2,h3,h4,h5,h6,header,hgroup,hr,iframe,ins,isindex,li,map,menu,noframes,noscript,object,ol,output,p,pre,section,script,table,tbody,td,tfoot,th,thead,tr,ul,video

inline: abbr,acronym,applet,b,basefont,bdo,big,br,button,cite,del,dfn,em,font,i,iframe,img,input,ins,kbd,label,map,object,q,s,samp,script,select,small,span,strike,strong,sub,sup,textarea,tt,u,var

closeSelf: colgroup,dd,dt,li,options,p,td,tfoot,th,thead,tr

fillAttrs: checked,compact,declare,defer,disabled,ismap,multiple,nohref,noresize,noshade,nowrap,readonly,selected

special:wxxxcode-style,script,style,view,scroll-view,block
  • 1.2 webComponent(shadowDom)
{

<user-card
    image="https://semantic-ui.com/images/avatar2/large/kristy.png"
    name="User Name"
    email="yourmail@some-email.com"
  ></user-card>
  <template id="userCardTemplate">
    <style>
     :host {
       display: flex;
       align-items: center;
       width: 450px;
       height: 180px;
       background-color: #d4d4d4;
       border: 1px solid #d5d5d5;
       box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
       border-radius: 3px;
       overflow: hidden;
       padding: 10px;
       box-sizing: border-box;
       font-family: 'Poppins', sans-serif;
     }
     .image {
       flex: 0 0 auto;
       width: 160px;
       height: 160px;
       vertical-align: middle;
       border-radius: 5px;
     }
     .container {
       box-sizing: border-box;
       padding: 20px;
       height: 160px;
     }
     .container > .name {
       font-size: 20px;
       font-weight: 600;
       line-height: 1;
       margin: 0;
       margin-bottom: 5px;
     }
     .container > .email {
       font-size: 12px;
       opacity: 0.75;
       line-height: 1;
       margin: 0;
       margin-bottom: 15px;
     }
     .container > .button {
       padding: 10px 25px;
       font-size: 12px;
       border-radius: 5px;
       text-transform: uppercase;
     }
    </style>
    
    <img class="image">
    <div class="container">
      <p class="name"></p>
      <p class="email"></p>
      <button class="button">Follow John</button>
    </div>
  </template>
  
  class UserCard extends HTMLElement {
    constructor() {
      super();
      var shadow = this.attachShadow({ mode: 'closed' });
      var templateElem = document.getElementById('userCardTemplate');
      var content = templateElem.content.cloneNode(true);
      content.querySelector('img').setAttribute('src', this.getAttribute('image'));
      content.querySelector('.container>.name').innerText = this.getAttribute('name');
      content.querySelector('.container>.email').innerText = this.getAttribute('email');
      shadow.appendChild(content);
    }
  }
  window.customElements.define('user-card', UserCard);
  • 1.3 DocumentFragment
DocumentFragment 表示一个没有父级文件的最小文档对象。它被当做一个轻量版的 Document 使用,用于存储已排好版的或尚未打理好格式的XML片段。最大的区别是因为DocumentFragment不是真实DOM树的一部分,它的变化不会引起DOM树的重新渲染的操作(reflow) ,且不会导致性能等问题

DocumentFragment 接口表示文档的一部分(或一段)。更确切地说,它表示一个或多个邻接的 Document 节点和它们的所有子孙节点。 DocumentFragment 节点不属于文档树,继承的 parentNode 属性总是 null。 不过它有一种特殊的行为,该行为使得它非常有用,即当请求把一个 DocumentFragment 节点插入文档树时,插入的不是 DocumentFragment 自身,而是它的所有子孙节点。这使得 DocumentFragment 成了有用的占位符,暂时存放那些一次插入文档的节点。它还有利于实现文档的剪切、复制和粘贴操作,尤其是与 Range 接口一起使用时更是如此。 可以用 Document.createDocumentFragment() 方法创建新的空 DocumentFragment 节点。

2. css3部分

  • 2.1 css单位
长度单位包括包括:相对单位和绝对单位。

相对长度单位包括有: em, ex, ch, rem, vw, vh, vmax, vmin, %

绝对长度单位包括有: cm, mm, q, in, pt, pc, px


1.px:绝对单位,页面按精确像素展示

2.em:相对单位,基准点为父节点字体的大小,如果自身定义了font - size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值。

3.rem:相对单位,可理解为”root em”, 相对根节点html的字体大小来计算,CSS3新加属性,chrome / firefox / IE9 + 支持。

4.vw:viewpoint width,视窗宽度,1vw等于视窗宽度的1 %。

5.vh:viewpoint height,视窗高度,1vh等于视窗高度的1 %。

6.vmin:vw和vh中较小的那个。

7.vmax:vw和vh中较大的那个。

8.%:百分比

9.in:寸

10.cm:厘米

11.mm:毫米

12.pt:point,大约1 / 7213.pc:pica,大约6pt1 / 614.ex:取当前作用效果的字体的x的高度,在无法确定x高度的情况下以0.5em计算(IE11及以下均不支持,firefox / chrome / safari / opera / ios safari / android browser4.4 + 等均需属性加么有前缀)

15.ch:以节点所使用字体中的“0”字符为基准,找不到时为0.5em(ie10 +, chrome31 +, safair7.1 +, opera26 +, ios safari 7.1 +, android browser4.4 + 支持) 1ch = 1个英文 = 1个数字

16.q1/4毫米(quarter-millimeters)。绝对长度单位。 1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px
  • 2.2 var()、calc() 用法
body{
  --width : 200px;
  --height : 200px;
  --color : red;
  --fontSize : 18px;
  --bgColor : #3c3c3c;
}
body{
  display: flex;
  justify - content: space - around
}
div{
  width: var(--width);
  height: var(--height);
  line - height: var(--height);
  background - color: var(--bgColor);
  text - align: center;

}
.div - 1{
  color: var(--color);
  font - size: var(--fontSize);
}
.div - 2{
  color: yellow;
  font - size: calc(var(--fontSize) + 4px);
}
.div - 3{
  color: green;
  font - size: calc(var(--fontSize) + 8px);
}
style="--sev: #0080ff;"
style="background-color: var(--sev);"