html5---语义化

语义化的优点：

• 易于用户阅读，样式丢失的时候能让页面呈现清晰的结构。
• 有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重。
• 方便其他设备解析，如盲人阅读器根据语义渲染网页
• 有利于开发和维护，语义化更具可读性，代码更好维护，与CSS3关系更和谐。

 1、<header>

    <header>定义文档或者文档的部分区域的页眉，应作为介绍内容或者导航链接栏的容器。

    在一个文档中，您可以定义多个<header>元素，但需要注意的是<header>元素不能作为<address>、<footer> 或 <header> 元素的子元素。

    2、<nav>

    <nav>描述一个含有多个超链接的区域，该区域包含跳转到其他页面或页面内部其他部分的链接列表。

    在一个文档中，可定义多个<nav>元素。

    3、<main>

    <main> 定义文档的主要内容，该内容在文档中应当是独一无二的，不包含任何在文档中重复的内容，比如侧边栏，导航栏链接，版权信息，网站logo，搜索框（除非搜索框作为文档的主要功能）。

    需要注意的是在一个文档中不能出现多个<main>标签。

    4、<article>

    <article>元素表示文档、页面、应用或网站中的独立结构，是可独立分配的、可复用的结构，如在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目。

    当<article>元素嵌套使用时，则该元素代表与外层元素有关的文章。例如，代表博客评论的<article>元素可嵌套在代表博客文章的<article>元素中。

    5、<aside>

    <aside> 元素表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分且可以被单独的拆分出来而不会影响整体。通常表现为侧边栏或嵌入内容。

    6、<footer>

    <footer>定义最近一个章节内容或者根节点元素的页脚。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息。

    使用footer插入联系信息时，应在 footer 元素内使用 <address> 元素。

    注意不能包含<footer>或者<header>

    7、<section>

    <section>表示文档中的一个区域（或节），比如，内容中的一个专题组。

    如果元素内容可以分为几个部分的话，应该使用 <article> 而不是 <section>。
不要把 <section> 元素作为一个普通的容器来使用，特别是当<section>仅仅是为了美化样式或方便脚本使用的时候，应使用<div>。

    这几个标签，比较容易混淆的是<section>、<article>，所以这里特别说明：

    “Authors are encouraged to use the article element instead of the section element when it would make sense to syndicate the contents of the elemen.”

    通俗来说就是<article>比<section>更具有独立性、完整性。可通过该段内容脱离了所在的语境，是否完整、独立来判断。

8.<time>

定义时间或日期，time标签中的datetime属性定义的时间不会被显示，但可能被其他应用使用

<time datetime="2018-01-17">今天是我生日</time>

9.<ruby>

加注释，ruby标签有两个子元素，rt注释的内容，rp是该标签不显示时显示的文字

<ruby>
  人<rt>ren</rt>
  <rp>该标签无法显示</rp>
</ruby

10.<details>

用于描述文档或者文档某一部分细节，summary是details元素的标题

<details>
  <summary>点击查看更多</summary>
  <p>这是点击后的内容</p>
</details>

11.<mark>

定义带有几号的文本，它会给你想要突出显示的文本加个 背景色

<p>我最喜欢<mark>数学</mark></p>

 

12.<progress>

progress显示数据的进度，属性value指定当前值，max最大值，最小值0不用设置

<progress value="30" max="100"></progress>

13.<video>

定义视频，属性src引入资源，controls视频的控制控件

<video src="" controls="controls">你的浏览器不支持video标签</video>
以防用户浏览的视频不支持某些格式的视频，可以为用户多准备些格式的视频
,目前支持的视频格式video/ogg，video/mp4，video/webm其他格式需要转换

<video controls="controls">
  <source src="" type="video/ogg">
  <source src="" type="video/mp4">
  <source src="" type="video/webm">
  你的浏览器不支持video标签
</video>

14.<audio>

该标签可定义声音，及其他的音频文件，不加controls不显示音频的控制界面

<audio src="" controls="controls">你的浏览器不支持audio标签</audio>

<video controls="controls">
  <source src="xx.ogg" type="audio/ogg">
  <source src="xx.mp3" type="audio/mpeg">
  你的浏览器不支持audio标签
</video>

目前音频可用类型audio/ogg，audio/mpeg
15.<datalist>

提示可能的值，datalist及其选项不会被显示出来，它仅仅是合法输入值的列表使用input元素的list属性来邦定datalist，下面选项使用option定义

<input type="text" list="cars">
  <datalist id="cars">
      <option value="宝马"></option>
      <option value="奔驰"></option>
      <option value="奥迪"></option>
  </datalist>

16.<embed>

定义插入的内容，如插件，flash，标签中间不要加内容会显现出来

<embed src="swf/flash5924.swf" tyep="application/x-shockwave-flash">
</embed>

17.<canvas>

canvas画布只是个容器，你可以通过控制坐标在canvas上绘制图形，一般配合js可以实现非常复杂的动画效果