01-HTML5标签变化

<header>标记定义一个页面或一个区域的头部</header>
<nav>标记定义导航链接</nav>

<section>标记定义一个区域</section>
<article>标记定义一篇文章</article>

<aside>标记定义页面内容部分的侧边栏</aside>
<hgroup>标记定义文件中一个区块的相关信息</hgroup>

<figure>标记定义一组媒体内容以及它们的标题</figure>
<figcaption>标记定义figure元素的标题</figcaption>

<dialog>标记定义一个对话框（类似微信会话框）</dialog>
<footer>标记定义一个页面或一个区域的底部</footer>

//header/section/aside/article/footer 标签不要嵌套使用

//header/section/footer 大于 aside/article/figure/hgroup/nav 大于 div/figcaption

<video>标记定义一个视频</video>
<audio>标记定义音频内容</audio>
<canvas>标记定义图片</canvas>

<source src="" type="">标记定义媒体资源
<embed>标记定义外部的可交互的内容或插件，比如flash</embed>

<audio>不支持audio标签才会显示这段文字</audio>

<audio>
<source src="xxx.mp3″ type="audio/mpeg">　　//音频文件转码用：type="audio/mpeg"（audio里面的mp3文件）
<source src="aaa.mp3″ type="audio/mpeg">
</audio>

<video width="1024px" height="800px">不支持video标签才会显示这段文字</video>

<video>
<source src="xxx.mp4″ type="video/mp4″>//视频文件转码用：type="video/mp4″（video里面的mp4文件）
<source src="aaa.mp4″ type="video/mp4">
</video>

<embed src="xxx.swf" width="" height=""></embed>　　//embed一般用来引用flash文件

<meter>状态标签（实时状态显示：气压、气温）</meter>

<progress value="" max="">状态标签（任务过程：安装、加载）

<meter value="220″      min="20″   max="380″       low="200″           high="240″         optimum="220″></meter>
value：自定义的值
min：最小
max：最大
low：安全最低
high：安全最高
optimum：最佳

<meter value="0.75″></meter> //直接到75%的位置

<progress value="30″ max="100″>　　//进度条会在30%的位置

<progress max="100″>　　//进度条会来回转动

<datalist>为input标记定义一个下拉列表，配合option</datalist>

<details>标记定义一个元素的详细内容，配合summary</details>

<input placeholder="请选择xxx" list="qml" />
<datalist id="qml">
<option value="aa">aa</option>
<option value="bb">bb</option>
<option value="cc">cc</option>
<option value="dd">dd</option>
<option value="ee">ee</option>
</datalist>

<details open="open">　　//open表示默认是打开
<summary>自定义的详细信息</summary>
<p>详细信息详细信息详细信息详细信息详细信息详细信息</p>
</details>

<ruby>标记定义注释或音标</ruby>
<rt>标记定义对ruby的注释内容文本</rt>
<rp>告诉那些不支持ruby元素的浏览器，如何显示</rp>

<mark>标记定义有标记的文本（黄色选中状态）</mark>
<output>标记定义一些输出类型，计算表单结果，配合oninput</output>

<p>这个"<ruby>    丘 <rt>qiu</rt>    </ruby>"字怎么念</p>

//对于不支持的浏览器可以加rp：
<p>这个"<ruby>    丘<rp>(</rp>    <rt>qiu</rt>    <rp>）</rp>    </ruby>"字怎么念</p>

<p> 有两个字会变   <mark>黄色</mark>   </p>

<form oninput="totalPrice.value = parseInt(price.value) * parseInt(number.value)">
<input type="number" id="price" placeholder="输入一个数">
*<input type="number" id="number" placeholder="输入另外一个数">
=<output name="totalPrice" for="price number"></output>
</form>

<b></b>代表内联文本,通常是粗体,没有传递表示重要的意思
<i></i>代表内联文本,通常是斜体,没有传递表示重要的意思

<dd></dd>可以同 details 与 figure 一同使用,定义包含文本,dialog也可用
<dt></dt>可以同 details 与 figure 一同使用,汇总细节, dialog也可用

<hr>不仅表示水平线,还表示主题结束,显示效果相同
<menu></menu>重新定义用户界面的菜单,配合 command或者 menuitem使用

<smal></smal>表示小字体,例如打印注释或者法律条款
<strong></strong>表示重要性而不是强调符号