Html5 标签变化

新增标签

结构标签

块状元素，有意义的div 
<article> 标记定义一篇文章
<header>  标记定义一个页面或一个区域的头部
<nav>     标记定义导航链接
<section> 标记定义一个区域
<aside>   标记定义页面内容部分的侧边栏
<hgroup>  标记定义文件中一个区块的相关信息

<hgroup>
   <h1>1</h1>
   <h2>2</h2>
</hgroup>

<figure>  标记定义一组多媒体内容以及它们的标题
<figcaption>  标签定义 figure 元素的标题
<footer>  标记定义一个页面或一个 区域的底部
<dialog>  标记定义一个对话框(会话框)类似微信

第一点补充：此5个标签不要嵌套到内部

header/section/aside/article/footer

第二点补充：标签优先级排列如下且互不嵌套

优先级在前的在外侧
header/section/footer   >   aside/article/figure/hgroup/nav    >   div/figcaption

多媒体标签

<video> 标记定义一个视频

<video src = "video.mp4" autoplay="autoplay" controls="controls"></video>
<video  autoplay="autoplay" width="1024" height="600">
        <source  src = "video.mp4" type="video/mp4">
</video>

<audio> 标记定义音频内容

<audio src = "music.mp4" autoplay="autoplay" loop="-1"  controls="controls">
        您的浏览器不支持音频播放
</audio>

<source> 标记定义媒体资源

<audio  autoplay="autoplay">
        <source  src = "music.mp4" type="audio/mpeg">
</audio>

<canvas> 标记定义画布
<embed> 标记定义外部的可交互的内容或插件(比如flash)

<embed  src="video.swf" width="1024" height="768"></embed>

多媒体标签的意义
提升用户体验

Web应用标签

<meter> 状态标签(实时状态显示：气压、气温)

安全用电
最好值 optimum = 220

<meter value="220" min="20" max="380" low="200" high=240" optimum="220"></meter>
<meter value="0.75">75%</meter>

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

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

浏览器兼容
<meter> Firefox, Chrome, Opera以及 Safari 6 支持
<progress> Ie 10+, Firefox, Opera, Chrome 以及 Safari 6 支持

列表标签

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

<input placeholder="请选择手机品牌" list="phoneList" />
<datalist id="phoneList">
      <option value="1">小米</option>
      <option value="2">iphone</option>
      <option value="3">华为</option>
</datalist>

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

<datails open="open">
      <summary>php是世界上最好的语言</summary>
      <p>...................................................................</p>
</datails>

浏览器兼容
<datalist> Firefox, Chrome, Ie10及更改版本支持
<details> Firefox, Chrome 以及 Safari 6 支持

其它标签

注释标签

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

<rp>不要放在<rt>标签内
<p>我们来
      <ruby>夼
            <rp>(</rp>
              </rt>Kuang 3</rt>
            <rp>)</rp>
      </ruby>
      一个话题
</p>

标记定义有标记的文本(黄色选中状态)

<p>记住：下班记得<mark>打卡</mark></p>

<output> 标记定义一些输出类型，计算表单结果配合oninput事件
<keygen> 标记定义表单里一个生成的键值（加密信息传送）
<time> 标记定义一个日期/事件，目前所有主流浏览器都不支持

删除的标签

纯表现的元素

basefont、big、center、font、s、strike、tt、u

对可用性产生负面影响的元素

frame、frameset、noframes

产生混淆的元素

acronym、applet、isindex、dir

重定义标签
显示不变，只是表达的含义进行了重新定义的标签

<dd> 描述，可以同 details 与 figure 一同使用，定义包含文本， dialog 也可用
<dt> 标题，可以同 detailds 与 figure 一同使用，汇总细节， dialog 也可用
'<'hr>
<menu> 重新定义用户界面的菜单，配合 commond 或者 menuitem 使用

最后编辑于：2019.07.31 16:03:25