HTML5语义化标签的理解与意义

Answer 1

很多面试官会问：对于 HTML5语义化标签的理解。那么本篇专门解答一下这个问题。
除了让开发人员
更加理解你的html结构及
代码易读之外，当然有更有深度有趣的原因。
。
首先对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定义列表的项目。
语义化标签的好处要从 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。
对外的意义： 有利于SEO的！！有利于解析代码！！可读性可维护性增强！！