1、为什么要语义化?
- 为了在没有CSS的情况下,页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看;
- 用户体验:例如title、alt用于解释名词或解释图片信息、label标签的活用;
- 有利于SEO:和搜索引擎建立良好沟通,有助于爬虫抓取更多的有效信息:爬虫依赖于标签来确定上下文和各个关键字的权重;
- 方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以意义的方式来渲染网页;
- 便于团队开发和维护,语义化更具可读性,是下一步吧网页的重要动向,遵循W3C标准的团队都遵循这个标准,可以减少差异化。
2.写HTML代码时应注意什么?
- 尽可能少的使用无语义的标签div和span;
- 在语义不明显时,既可以使用div或者p时,尽量用p, 因为p在默认情况下有上下间距,对兼容特殊终端有利;
- 不要使用纯样式标签,如:b、font、u等,改用css设置。
- 需要强调的文本,可以包含在strong或者em标签中(浏览器预设样式,能用CSS指定就不用他们),strong默认样式是加粗(不要用b),em是斜体(不用i);
- 使用表格时,标题要用caption,表头用thead,主体部分用tbody包围,尾部用tfoot包围。表头和一般单元格要区分开,表头用th,单元格用td;
- 表单域要用fieldset标签包起来,并用legend标签说明表单的用途;
- 每个input标签对应的说明文本都需要使用label标签,并且通过为input设置id属性,在lable标签中设置for=someld来让说明文本和相对应的input关联起来。
3、HTML5新增的语义标签:
常用布局语义标签:
<!–…–> | 定义注释。 |
<!DOCTYPE> | 定义文档类型。 |
<a> | 定义超链接。 |
<abbr> | 定义缩写。 |
<acronym> | HTML 5 中不支持。定义首字母缩写。 |
<address> | 定义地址元素。 |
<applet> | HTML 5 中不支持。定义 applet。 |
<area> | 定义图像映射中的区域。 |
<article> | 定义 article。 |
<aside> | 定义页面内容之外的内容。 |
<audio> | 定义声音内容。 |
<b> | 定义粗体文本。 |
<base> | 定义页面中所有链接的基准 URL。 |
<basefont> | HTML 5 中不支持。请使用 CSS 代替。 |
<bdi> | 定义文本的文本方向,使其脱离其周围文本的方向设置。 |
<bdo> | 定义文本显示的方向。 |
<big> | HTML 5 中不支持。定义大号文本。 |
<blockquote> | 定义长的引用。 |
<body> | 定义 body 元素。 |
<br> | 插入换行符。 |
<button> | 定义按钮。 |
<canvas> | 定义图形。 |
<caption> | 定义表格标题。 |
<center> | HTML 5 中不支持。定义居中的文本。 |
<cite> | 定义引用。 |
<code> | 定义计算机代码文本。 |
<col> | 定义表格列的属性。 |
<colgroup> | 定义表格列的分组。 |
<command> | 定义命令按钮。 |
<datalist> | 定义下拉列表。 |
<dd> | 定义定义的描述。 |
<del> | 定义删除文本。 |
<details> | 定义元素的细节。 |
<dfn> | 定义定义项目。 |
<dir> | HTML 5 中不支持。定义目录列表。 |
<div> | 定义文档中的一个部分。 |
<dl> | 定义定义列表。 |
<dt> | 定义定义的项目。 |
<em> | 定义强调文本。 |
<embed> | 定义外部交互内容或插件。 |
<fieldset> | 定义 fieldset。 |
<figcaption> | 定义 figure 元素的标题。 |
<figure> | 定义媒介内容的分组,以及它们的标题。 |
<font> | HTML 5 中不支持。 |
<footer> | 定义 section 或 page 的页脚。 |
<form> | 定义表单。 |
<frame> | HTML 5 中不支持。定义子窗口(框架)。 |
<frameset> | HTML 5 中不支持。定义框架的集。 |
<h1> to <h6> | 定义标题 1 到标题 6。 |
<head> | 定义关于文档的信息。 |
<header> | 定义 section 或 page 的页眉。 |
<hgroup> | 定义有关文档中的 section 的信息。 |
<hr> | 定义水平线。 |
<html> | 定义 html 文档。 |
<i> | 定义斜体文本。 |
<iframe> | 定义行内的子窗口(框架)。 |
<img> | 定义图像。 |
<input> | 定义输入域。 |
<ins> | 定义插入文本。 |
<keygen> | 定义生成密钥。 |
<isindex> | HTML 5 中不支持。定义单行的输入域。 |
<kbd> | 定义键盘文本。 |
<label> | 定义表单控件的标注。 |
<legend> | 定义 fieldset 中的标题。 |
<li> | 定义列表的项目。 |
<link> | 定义资源引用。 |
<map> | 定义图像映射。 |
<mark> | 定义有记号的文本。 |
<menu> | 定义菜单列表。 |
<meta> | 定义元信息。 |
<meter> | 定义预定义范围内的度量。 |
<nav> | 定义导航链接。 |
<noframes> | HTML 5 中不支持。定义 noframe 部分。 |
<noscript> | 定义 noscript 部分。 |
<object> | 定义嵌入对象。 |
<ol> | 定义有序列表。 |
<optgroup> | 定义选项组。 |
<option> | 定义下拉列表中的选项。 |
<output> | 定义输出的一些类型。 |
<p> | 定义段落。 |
<param> | 为对象定义参数。 |
<pre> | 定义预格式化文本。 |
<progress> | 定义任何类型的任务的进度。 |
<q> | 定义短的引用。 |
<rp> | 定义若浏览器不支持 ruby 元素显示的内容。 |
<rt> | 定义 ruby 注释的解释。 |
<ruby> | 定义 ruby 注释。 |
<s> | HTML 5 中不支持。定义加删除线的文本。 |
<samp> | 定义样本计算机代码。 |
<script> | 定义脚本。 |
<section> | 定义 section。 |
<select> | 定义可选列表。 |
<small> | 将旁注 (side comments) 呈现为小型文本。 |
<source> | 定义媒介源。 |
<span> | 定义文档中的 section。 |
<strike> | HTML 5 中不支持。定义加删除线的文本。 |
<strong> | 定义强调文本。 |
<style> | 定义样式定义。 |
<sub> | 定义下标文本。 |
<summary> | 定义 details 元素的标题。 |
<sup> | 定义上标文本。 |
<table> | 定义表格。 |
<tbody> | 定义表格的主体。 |
<td> | 定义表格单元。 |
<textarea> | 定义 textarea。 |
<tfoot> | 定义表格的脚注。 |
<th> | 定义表头。 |
<thead> | 定义表头。 |
<time> | 定义日期/时间。 |
<title> | 定义文档的标题。 |
<tr> | 定义表格行。 |
<track> | 定义用在媒体播放器中的文本轨道。 |
<tt> | HTML 5 中不支持。定义打字机文本。 |
<u> | HTML 5 中不支持。定义下划线文本。 |
<ul> | 定义无序列表。 |
<var> | 定义变量。 |
<video> | 定义视频。 |
<xmp> | HTML 5 中不支持。定义预格式文本。 |