HTML5语义化标签的理解与意义
很多面试官会问：对于 HTML5语义化标签的理解。那么本篇专门解答一下这个问题。
除了让开发人员
更加理解你的html结构及
代码易读之外，当然有更有深度有趣的原因。
。
操作方法
- 01
首先对W3C的HTML5其进行大概的分类，随意看看(可以这样回答面试官，说你归纳过)： 1：定义上的： <!--...--> 定义注释。 <!DOCTYPE> 定义文档类型。 <html>定义 HTML 文档。 <body> 定义文档的主体。 <script>定义客户端脚本。 <frame>定义框架集的窗口或框架。 <frameset>定义框架集。 <head>定义关于文档的信息。 <iframe>定义内联框架。 <meta>定义关于 HTML 文档的元信息。 <link>定义文档与外部资源的关系。 <noframes>定义针对不支持框架的用户的替代内容。 <noscript>定义针对不支持客户端脚本的用户的替代内容。 2：功能上的（ js或者css上的作用比较有特色的语义化标签）： <a> 定义锚。 <abbr> 定义缩写。 <address> 定义文档作者或拥有者的联系信息。 <area> 定义图像映射内部的区域。 <audio> 定义声音内容。 <base> 定义页面中所有链接的默认地址或默认目标。 <br> 定义简单的折行。 <button> 定义按钮 (push button)。 <col>定义表格中一个或多个列的属性值。 <colgroup>定义表格中供格式化的列组。 <dfn> 定义一个定义项目。 <code> 定义计算机代码文本。 <samp> 定义样本文本。 <kbd> 定义键盘文本。它表示文本是从键盘上键入的。它经常用在与计算机相关的文档或手册中。 <var> 定义变量。您可以将此标签与 <pre> 及 <code> 标签配合使用。 <cite> 定义引用。可使用该标签对参考文献的引用进行定义，比如书籍或杂志的标题。 <datalist>定义下拉列表。 <wbr> 定义长单词在哪里换号；元素来添加 Word Break Opportunity（单词换行时机） <video>定义视频。 <track> 标签为诸如 video 元素之类的媒介规定外部文本轨道。 <title>定义文档的标题。 <time>定义日期/时间。 <textarea>定义多行的文本输入控件。 <strong>定义强调文本。 <style>定义文档的样式信息。 <sub>定义下标文本。 <summary>为 <details> 元素定义可见的标题。 <sup>定义上标文本。 <source>定义媒介源。 <samp>定义计算机代码样本。 <section>定义 section。 <select>定义选择列表（下拉列表）。 <rt>定义 ruby 注释的解释。 <ruby>定义 ruby 注释。 <q>定义短的引用。 <progress>定义任何类型的任务的进度。 <param>定义对象的参数。 <pre>定义预格式文本。 <optgroup>定义选择列表中相关选项的组合。 <option>定义选择列表中的选项。 <output>定义输出的一些类型。 <details>定义元素的细节。 <dir>不赞成使用。定义目录列表。 <div>定义文档中的节。 <dfn>定义定义项目。 <dialog>定义对话框或窗口。 <dl>定义定义列表。 <dt>定义定义列表中的项目。 <embed>定义外部交互内容或插件。 <fieldset>定义围绕表单中元素的边框。 <figcaption>定义 figure 元素的标题。 <figure>定义媒介内容的分组，以及它们的标题。 <form>定义供用户输入的 HTML 表单。 <hr>定义水平线。 <img>定义图像。 <input>定义输入控件。 <ins>定义被插入文本。 <kbd>定义键盘文本。 <keygen>定义生成密钥。 <label>定义 input 元素的标注。 <legend>定义 fieldset 元素的标题。 <map>定义图像映射。 <mark>定义有记号的文本。 <menu>定义命令的列表或菜单。 <menuitem>定义用户可以从弹出菜单调用的命令/菜单项目。 <meter>定义预定义范围内的度量。 <nav>定义导航链接。 <object>定义内嵌对象。 3：结构上的（方便分块查看，这个很重要）：结构上的 可以被其他div+css代替但是好的前端 会用这些标签来使代码可读性增强。 <header>定义 section 或 page 的页眉。 <dd>定义定义列表中项目的描述。 <article> 定义文章。 <aside> 定义页面内容之外的内容。 尤其上面的四位主要用于划分页面块，一般不做样式处理 <p>定义段落。 <em> 把文本定义为强调的内容。 <strong> 把文本定义为语气更强的强调的内容。 <bdo> 定义文字方向。 <bdi> 定义文本的文本方向，使其脱离其周围文本的方向设置，与bdo配合使用试试。 <big> 定义大号文本。 <b> 定义粗体字。 <del>定义被删除文本。 <ul>定义无序列表。 <ol>定义有序列表。 <table>定义表格。 <tbody>定义表格中的主体内容。 <td>定义表格中的单元。 <tfoot>定义表格中的表注内容（脚注）。 <th>定义表格中的表头单元格。 <thead>定义表格中的表头内容。 <tr>定义表格中的行。 <footer>定义 section 或 page 的页脚。 <h1> to <h6>定义 HTML 标题。 <i>定义斜体字。 <li>定义列表的项目。
- 02
语义化标签的好处要从 HTML 全局属性说起，即 有的标签有默认的HTML全局属性，所以最好用语义化标签。 1：以下元素 支持 tabindex 属性：<a>, <area>, <button>, <input>, <object>, <select> 以及 <textarea>。 用法： <element tabindex="number"> number规定元素的 tab 键控制次序（1 是第一个）。 作用： 增强用户键盘的可操作性，所以不要用div代替 2：以下元素 支持 accesskey 属性：<a>, <area>, <button>, <input>, <label>, <legend> 以及 <textarea>。 用法： <element accesskey="character"> character规定激活（使元素获得焦点）元素的便捷按键。 作用： 增强用户键盘的可操作性，所以不要用div代替 3：contextmenu 属性的值是要打开的 <menu> 元素的 id。目前只有火狐支持 4： spellcheck 属性规定是否对元素进行拼写和语法检查。 可以对以下内容进行拼写检查： input 元素中的文本值（非密码） <textarea> 元素中的文本 可编辑元素中的文本 5： lang 属性在以下标签中无效：<base>, <br>, <frame>, <frameset>, <hr>, <iframe>, <param> 以及 <script>。
- 03
对外的意义： 有利于SEO的！！有利于解析代码！！可读性可维护性增强！！