HTML5

HTML5

认识HTML5:语义标签，多媒体，离线存储，三维、图形与特效，设备通用，性能与集成，CSS3其他

1. HTML5中新增的语义标记

   • 区块标记：artical(文章)，section(部分)，nav(导航栏)，aside(旁边)，header(头部)，footer(页脚)
   • 内容分组标签：figure()，figcaption()，main()
   • 文本级别标签：time()

2. HTML5中的header标记

   header标记一般放置在页面的顶部，或者页面中某个区块元素的顶部，包含整个页面或区块的标题、简介等信息。

   • 一篇文档中可以包含多个header标记
   • 可以为body、artical、section、aside标记增加header标记
   • header标记未必位于页面的顶部

3. HTML5中的footer标记

   footer标记一般放置在页面的底部，或者页面中某个区块元素的底部

4. nav标记

   nav标记表示页面的导航，可以通过导航连接到网站的其他页面，或当前页面的其他部分。

5. aside标记

   aside包含的内容不是页面的主要内容，具有独立性，是对页面内容的补充。

   例如：页面的侧边栏、文章引语（内容摘要）、广告、友情链接

6. artical标记

   artical标记表示包含于一个文档、页面、或网站中的一段独立的内容。它能够独立的被发布或重新使用。

   例如：一篇博客、一个论坛帖子、一篇新闻报道、一个用户论坛

7. section标记

   section表示一个主题性的内容分组，通常包含一个头部（header），可能还会有一个尾部（footer）

8. figure标记

   figure表示页面中的插图，通常结合figcaption一起使用

9. time标记

   time表示一个日期、时间、或日期和时间值。可以被搜索引擎、屏幕阅读器等识别

10. HTML5为了方便排版，可以使用Form中的表单元素脱离Form的嵌套

    ```
    <form action="" method="post" id="register" >
    </form>
    <input  type="text" name="user" form="register" />
    <select name="year" form="register" >
        <option value="1999"></option>
    </select>
    <textarea name="ext" form="register" ></textarea>
    <button type="submit" form="register" >提交</button>
    ```
    

11. 新增input表单元素类型

    Input表单的type新属性值
    Type=”email”	限制用户输入必须为Email类型
    Type=”url”	限制用户输入必须为URL类型
    Type=”date”	限制用户输入必须为日期类型
    Type=”time”	限制用户输入必须为时间类型
    Type=”month”	限制用户输入必须为月类型
    Type=”week”	限制用户输入必须为周类型
    Type=”number”	限制用户输入必须为数字类型
    Type=”range”	产生一个滑动条的表单
    Type=”search”	产生一个搜索意义的表单
    Type=”color”	生成一个颜色选择表单

12. 新增表单元素属性

    属性	值	说明
    Required	required	表单拥有该属性表示其内容不能为空，必填
    placeholder	提示文本	表单的提示信息，存在默认值将不显示
    Autofocus	autofocus	自动聚焦属性，页面加载完成自动聚焦到指定表单
    Pattem	正则表达式	输入的内容必须匹配到正则表达式

13. 智能表单元素search

    • 配合datalist标签，能实现自动补全的效果
      
<input type="search" name="move" list="search1" >
<datalist id="search1" >
<option>黑老师的由来</option>
<option>男人缘何肾虚</option>
<option>佳佳婕婕不得不说的故事</option>
</datalist>


14. HTML5的选择器

    • 属性选择器

      • 属性选择器和标签选择器、id选择器、类选择器一样，都用于确定使用样式的元素
      • 主要通过属性名称和属性值匹配确定元素
      • ［属性名］
        ｛
        样式设置内容。。。
        ｝

      • 条件	说明	CSS版本
        [ attr ]	选择具有attr属性名的元素	css2
        [ attr = “val“]	同第一项，且值等于val的元素	css2
        [ attr ^= “val“]	同第一项，且值以val开始的元素	css3
        [ attr $= “val“]	同第一项，且值以val结束的元素	css3
        [ attr *= “val“]	同第一项，且值包含val的元素	css3
        [ attr ～= “val“]	同第一项，属性有多值，其中一个等于val的元素	css2

      • 兄弟选择器用于通过一个元素获取与之同一层级的元素。

      • 分为普通兄弟选择器和相邻兄弟选择器
        
        • 
          /*相邻兄弟选择器*/
选择器1 ＋ 选择器2｛
样式设置内容。。。
｝

/*普通兄弟选择器*/
选择器1 ~ 选择器2｛
样式设置内容。。。
}


    • 层级选择器

    • 伪选择器

      • 伪选择器并不直接对应HTML文档定义的元素，提供了更为复杂的功能
      • 伪选择器分为两类，伪元素选择器和伪类选择器
      • 通常情况下配合其他选择器一起使用

      • 常用的伪元素选择器

        选择器类型	说明	CSS版本
        : : first-line	选择文档块中的第一行	css1
        : : first-letter	选择文档块中的首字母	css1
        : before	在选中元素的内容之前插入内容	css2
        : after	在选中元素的内容之后插入内容	css2

      • 伪类选择器常见类型

        • 结构性伪类选择器
        • UI伪类选择器
        • 动态伪类选择器

        • 选择器类型	说明	CSS版本
          : root	根元素选择器，匹配文档根元素	css3
          : first-child	子元素选择器，匹配父元素的第一个子元素	css2
          : last-child	子元素选择器，匹配父元素的最后一个子元素	css3
          : only-child	子元素选择器，匹配父元素包含的唯一子元素	css3
          : only-of-type	子元素选择器，匹配父元素包含的唯一类型的子元素	css3
          : nth-child(n)	匹配父元素中第n个子元素	css3
          : nth-last-child(n)	子元素选择器，匹配父元素中倒数第n个子元素	css3
          : nth-of-type(n)	匹配父元素中定义类型第n个子元素	css3

        • UI伪类选择器根据元素的状态进行选择

          选择器类型	说明	css版本
          : enabled	匹配处于启用状态的元素	css3
          : disabled	匹配处于禁用状态的元素	css3
          : checked	匹配处于选中状态的元素	css3
          : default	匹配默认状态的元素	css3

        • 动态伪类选择器根据条件的改变进行选择，是相对文档的固定状态来说的

          选择器类型	说明	css版本
          : link	匹配链接的元素	css2
          : visited	匹配已访问的链接元素	css2
          : hover	匹配处于鼠标悬停状态的元素	css2
          : active	匹配用户激活的元素	css2
          : focus	匹配当前获得焦点的元素	css2

15. CSS选择器优先级计算

    ！important>内联>ID>类>标签|伪类|属性选择>伪对象>继承>通配符>继承