HTML5新增语义化标签
<p><span style="font-size: 18pt">1.HTML5新增的标签</span></p><p><span style="font-size: 16px">article、aside、audio、bdi、canvas、command、datalist、details、embed、figcaption、figure、footer、header、hgroup、keygen、mark、meter、nav、output、progress、rp、rt、ruby、section、source、summary、time、track、video</span></p>
<p><span style="font-size: 18pt">2.新增标签释义</span></p>
<p><span style="font-size: 18px">article:</span></p>
<p><span style="font-size: 16px">即定义article(文章)</span></p>
<p><span style="font-size: 18px">aside:</span></p>
<p><span style="font-size: 16px">定义页面之外的内容（常用于侧边栏，需要注意的是：移除侧边栏（aside标签及其内容）时不能影响网页的主体结构和布局）</span></p>
<p><span style="font-size: 18px">audio:</span></p>
<p><span style="font-size: 16px">定义声音内容(音频)</span></p>
<table style="border: 2px solid rgba(11, 239, 243, 1); height: 316px; width: 672px" frame="border" align="left"><caption><strong><span style="font-size: 18px">各浏览器支持的音频格式</span></strong></caption>
<tbody>
<tr>
<td style="text-align: center"><strong><span style="font-size: 18px">音频格式</span></strong></td>
<td style="text-align: center"><strong><span style="font-size: 18px">chrome</span></strong></td>
<td style="text-align: center"><strong><span style="font-size: 18px">fireFox</span></strong></td>
<td style="text-align: center"><strong><span style="font-size: 18px">opear</span></strong></td>
<td style="text-align: center"><strong><span style="font-size: 18px">safari</span></strong></td>
<td style="text-align: center"><strong><span style="font-size: 18px">ie9</span></strong></td>
</tr>
<tr>
<td style="text-align: center"><span style="font-size: 18px">OGG</span></td>
<td style="text-align: center"><span style="font-size: 18px">支持</span></td>
<td style="text-align: center"><span style="font-size: 18px">支持</span></td>
<td style="text-align: center"><span style="font-size: 18px">支持</span></td>
<td style="text-align: center"><span style="font-size: 18px">不支持</span></td>
<td style="text-align: center"><span style="font-size: 18px">不支持</span></td>
</tr>
<tr>
<td style="text-align: center"><span style="font-size: 18px">MP3</span></td>
<td style="text-align: center"><span style="font-size: 18px">支持</span></td>
<td style="text-align: center"><span style="font-size: 18px">不支持</span></td>
<td style="text-align: center"><span style="font-size: 18px">支持</span></td>
<td style="text-align: center"><span style="font-size: 18px">不支持</span></td>
<td style="text-align: center"><span style="font-size: 18px">支持</span></td>
</tr>
<tr>
<td style="text-align: center"><span style="font-size: 18px">WAV</span></td>
<td style="text-align: center"><span style="font-size: 18px">不支持</span></td>
<td style="text-align: center"><span style="font-size: 18px">支持</span></td>
<td style="text-align: center"><span style="font-size: 18px">不支持</span></td>
<td style="text-align: center"><span style="font-size: 18px">支持</span></td>
<td style="text-align: center"><span style="font-size: 18px">不支持</span></td>
</tr>
</tbody>
</table>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p><span style="font-size: 18px">bdi:</span></p>
<p><span style="font-size: 18px"><span style="font-size: 16px">定义文本的文本方向，使其脱离其周围文本的方向设置。</span></span></p>
<p><span style="font-size: 18px">canvas:</span></p>
<p><span style="font-size: 18px"><span style="font-size: 16px">定义图形</span></span></p>
<p><span style="font-size: 18px">command：</span></p>
<p><span style="font-size: 16px">定义命令按钮</span></p>
<p><span style="font-size: 18px">datalist：</span></p>
<p><span style="font-size: 16px">定义datalist,标签被用来在为 <input> 元素提供"自动完成"的特性。用户能看到一个下拉列表，里边的选项是预先定义好的，将作为用户的输入数据。请使用 <input> 元素的 list 属性来绑定 <datalist> 元素</span></p>
<p><span style="font-size: 18px">details:</span></p>
<p><span style="font-size: 16px">规定 details 是否可见</span></p>
<p><span style="font-size: 18px">embed:</span></p>
<p><span style="font-size: 16px">定义外部交互内容或插件</span></p>
<p><span style="font-size: 18px">figcaption:</span></p>
<p><span style="font-size: 16px">定义 figure 元素的标题</span></p>
<p><span style="font-size: 18px">figure：</span></p>
<p><span style="font-size: 16px">定义媒介内容的分组，以及它们的标题（常用于和figure配套实现图文效果）</span></p>
<p><span style="font-size: 18px">footer：</span></p>
<p><span style="font-size: 16px">定义页脚</span></p>
<p><span style="font-size: 18px">header：</span></p>
<p><span style="font-size: 16px">定义头部</span></p>
<p><span style="font-size: 18px">hgroup：</span></p>
<p><span style="font-size: 16px">用来对标题元素进行分组。当标题有多个层级（副标题）时，<hgroup> 元素被用来对一系列 <h1>-<h6>元素进行分组</span></p>
<p><span style="font-size: 18px">keygen:</span></p>
<p><span style="font-size: 16px">规定用于表单的密钥对生成器字段。当提交表单时，私钥存储在本地，公钥发送到服务器</span></p>
<p><span style="font-size: 18px">mark：</span></p>
<p><span style="font-size: 16px">定义有记号的文本</span></p>
<p><span style="font-size: 18px">meter：</span></p>
<p><span style="font-size: 16px">定义预定义范围内的度量</span></p>
<p><span style="font-size: 18px">nav:</span></p>
<p><span style="font-size: 16px">标签定义导航链接的部分。并不是所有的 HTML 文档都要使用到 <nav> 元素。<nav> 元素只是作为标注一个导航链接的区域。在不同设备上（手机或者PC）可以制定导航链接是否显示，以适应不同屏幕的需求</span></p>
<p><span style="font-size: 18px">output:</span></p>
<p><span style="font-size: 16px">标签作为计算结果输出显示(比如执行脚本的输出)</span></p>
<p><span style="font-size: 18px">progress:</span></p>
<p><span style="font-size: 16px">标签定义运行中的任务进度（进程）</span></p>
<p><span style="font-size: 18px">rp：</span></p>
<p><span style="font-size: 16px">定义若浏览器不支持 ruby 元素显示的内容</span></p>
<p><span style="font-size: 18px">rt：</span></p>
<p><span style="font-size: 16px">定义 ruby 注释的解释</span></p>
<p><span style="font-size: 18px">ruby：</span></p>
<p><span style="font-size: 16px">定义 ruby 注释</span></p>
<p><span style="font-size: 18px">section：</span></p>
<p><span style="font-size: 16px">定义文档的某个区域。比如章节、头部、底部或者文档的其他区域</span></p>
<p><span style="font-size: 18px">source:</span></p>
<p><span style="font-size: 16px">定义媒介源</span></p>
<p><span style="font-size: 18px">summary:</span></p>
<p><span style="font-size: 16px">定义 details 元素的标题</span></p>
<p><span style="font-size: 18px">time:</span></p>
<p><span style="font-size: 16px">定义日期/时间</span></p>
<p><span style="font-size: 18px">track:</span></p>
<p><span style="font-size: 16px">定义用在媒体播放器中的文本轨道</span></p>
<p><span style="font-size: 18px">video:</span></p>
<p><span style="font-size: 16px">定义视频，支持三种格式Ogg、MPEG4、WebM</span></p>
<p><span style="font-size: 18px"><span style="font-size: 18pt">3.新增标签的优点</span><br></span></p>
<p><span style="font-size: 16px">总的来说HTML5新增标签是为我们开发者提供了便利，现如今我们在搭建页面总结构的时候，往往会使用header来定义头部位置，div来定义页面内容，再用footer来定义页脚，可在html5之前，开发者们往往只能用一层又一层的div来搭建页面结构，如果页面结构复杂，在没有注释的情况下我们很难在后期对其进行维护和更新，但如今有了HTML5新增的语义化标签，这些问题也就随之解决了。</span></p><br><br>
来源：https://www.cnblogs.com/xxqd/p/12179738.html
頁:
[1]