HTML语义化

最新推荐文章于 2024-05-25 10:19:26 发布

石倩蓉

最新推荐文章于 2024-05-25 10:19:26 发布

阅读量534

点赞数

分类专栏： html

html 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

转载： http://www.cnblogs.com/yizuierguo/archive/2009/07/26/1531112.html

引子：

近日杭州高温，不过受日食影响下了大雨(具体是不是，我也不知道)，气温下降，难得一个周末还加了一天班，晚上和一同学探讨html+css，他刚学，从他编写的html上就可以看出来，过分使用diV标签，html的语义化很不好，一直都在讨论关于html的语义化的东西，什么是html的语义化？html有什么好处？每个人都有自己的理解，我的博客上没有类似的文章，一直想写，也没有时间，正好，借这个机会完善一下，也算是给这个同学的一点帮助

正文开始：

让我们看一则招聘前端开发工程师的AD:

任职要求：

1.精通各种Web前端技术，包括XHTML/XML/CSS/Javascript/ActionScript等（JS和AS之一即可）；

2.深刻理解Web标准，对可用性、可访问性等相关知识有实际的了解和实践经验；

3.有基于Ajax或Flash的RIA应用开发经验；

4.至少精通一门非Web前端脚本的语言（如Java/PHP/C++），并有项目经验；

5.个性乐观开朗，逻辑性强，善于和各种背景的人合作；

6.计算机、数学、自动化等相关专业本科以上学历优先。

其中有一条“深刻理解WEB标准…..”其实这里的主要要求转化成技能点就是对html的语义化有深刻理解。

我参加了多次各大小公司的前端面试,包括阿里巴巴旗下的淘宝，阿里妈妈和阿里软件，阿里的前端在中国行业中处于领跑地位，三家公司在面试的时候都会有类似于”谈谈你对html语义化(WEB标准)的理解”的问题，可见对于html语义化的重要性。相比于阿里的面面俱到，小公司就让我们感到很失望了，他们一般不会问相关问题，更有甚者，他们自己连什么是html的语义化都不知道。

PS:行业的发展还要靠我们从业者的一起努力，更需要像淘宝这样的老大引领行业的发展。

为什么要用语义呢？

我们所呈现的web产品的表现形式是网页，网页通过计算机连接互联网传达到别人，而负责中转的计算机没法像人一样，它可能不理解我们要表达的内容，它没办法通过视觉判断内容的真实性，可能会把我们要表达的内容传达给不相关的人，因此，我们需要语义化把网页表达成计算机理解的语言。

有人会问遵循语义化有什么好处，如果你是个勤劳而且好奇的人那么用百度搜索一下，所有被提及的内容基本上都是语义化的好处。

遵循语义化的好处不仅仅在你搜索到的好处之内，语义化的代码具有更好的亲和力，更主要的是逐渐使网页标准化，这也是招聘中要求”深刻理解WEB标准”的原因了。

既然如此，我们为什么不使用计算机已经提供给我们的带有语义化的标签呢？除了<h1>和还有哪些标签是带有语义的呢？答案是很多！

例如，表示强调的和，表示插入的<ins>和删除的<del> 等等……

对于浏览器而言，网页不是由内容和图片拼出来的，而是由代码拼出来的，这些代码又是由标签，标签的属性，和标签的属性的值构成的。

每个标签都可能有不止一个属性，在这里我不想过多的研究标签的属性及标签属性的取值，我想强调的是一些常用的标签的用法与含义。

作者建议：如果你想了解那些标签有那些属性，都可以取哪些值的的话，你可以到网上查找相关资料或者买一本叫做《HTML于XHTML权威指南(第六版)》的书，放在手边，以备不时之需。

那么常用的标签的用法与含义是什么呢？

类别	标签名	用法与含义	例子	备注
标题类	title	网页标题	<title>欢迎光临一醉的博客</title>
	H系列	大纲级别标题(有更好的解释吗？)	<h1>一级标题</h1>
	caption	表格标题，指定表格的简要描述	<caption>成绩单表格</caption>
	legend	表单元素<fieldset>标题，表单描述	<legend>用户登录</legend>
内容类	p	表示段落，也可以用于区分段落	<p>从前有座山</p><p>我爱姚明</p>
	br	段落换行标签	<p>窗前明月光<br/>	属于表现层标签
	a	超链接，用于网页或者锚点	<ahref=”http://www.cnblogs.com/yizuierguo”>一醉的博客</a>
	Strong & em b&i	强调加粗/斜体（只是添加样式，不起强调作用）	<p>从前有座<strong>山</strong></p>
	Ins & del	插入 / 删除	<p>有个<del>借</del><ins>错</ins>别字,哇哈哈！</p>
	Abbr & acronym	缩略语	<abbr title=”WORLD WIDE WEB”>WWW</abbr>	Abbr & acronym使用有区别
	dtn	术语定义	<p><dtn title=”Mozilla推出的浏览器”>Firefox</dtn>不错</p>
	kdd	用户由键盘输入的文字	<p>按<kdd>TAB</kdd>键测试一下</p>
	Code & var	对编码进行标识	<code><var>wordcount</var>=4000;</code>	<code>是不换行的
	pre	代码原型化呈现		<pre>与<code>配合使用
	samp	定义一个”输出”的内容	<p>你点删除，网页就会显示<samp>该会话已删除</samp></p>
	blockquote	定义长篇引用	< blockquote cite=”http://www.yizui.com”><p>人的一生</p></ blockquote>	Cite定义引用地址
列表类	ul	无序列表	< ul><li>项目一</li><li>项目二</li></ ul>
	ol	有序列表	< ol><li>表白(萧亚轩)</li><li>慈悲(郑钧)</li></ ol>
	dl	自定义列表	<dl><dt>事件<dt></dd>汶川大地震</dd></dl>
表格类	Table	表格主体
	caption	表格标题，指定表格的简要描述	<caption>成绩单表格</caption>
	Tr th td	行标题单元格	<tr><td>一醉</td></tr>
	Thead tbody tfoot	表格头部主体尾部
	Colgroup col	列群组列
表单类	form	定义表单区域
	Fieldset & legend	对表单元素进行分组
	Label
	input
	Select & option
注释类	<!-- -->
Xhtml类	DOCTYPE	文档声明
	Xhtml必须合理嵌套
	标签，属性，值小写
	转义字符	< ,>,&, ’ , ”	&lt ,&gt , &amp,&apos,&quot

上表是我花了一个多小时整理出来的，累！

请看两段代码：

一醉致力于web标准推广的人

一醉致力于web标准推广的人

以上两段代码在没用添加CSS的情况下，他们都会以加粗显示”一醉”这个名字，但是他们的实际意义却不一样，只是以加粗的形式显示内容，而是表示重点强调的，如果你的本意是想强调，那么毫无疑问，选择才是符合语义化的。如果你只是想显示视觉的效果时，还可以这样一醉致力于web标准推广的人,然后通过css控制显示样式。

这里是一个无语义的标签,而且默认是没有展现的。

要掌握html的语义化，除了在合适的地方使用语义化标签之外，你还需要特别注意以下几个地方

1. 块元素与内连元素

几乎所有的html元素都属于内联元素或者块元素之中的一种(哪些是块元素，哪些是内联元素自己去找相关资料)，在没有添加CSS的前提下内联元素和块元素是不可以任意转化的，合理嵌套需要记住两点：1.1内联元素不能嵌套块元素1.2块元素可以嵌套内联元素也可以嵌套块元素

2. DIV不是神

我同学的页面标签和我当初刚学的时候一个样,一样看过去全是div,其实div是一个没有语义的标签，但是没有语义不代表没有意义，我的建议div只用来构建布局，除此之外尽量不用(你有什么好的建议呢，请告诉我！)。

3. 网站重构不是放弃表格

很多人对于xhtml+css布局模式的理解是把所有的表格都放弃掉，全部用div+css布局(根本不纯在div+css布局这回事)，这种理解是完全错误的，表格的本意就是用来呈现数据的，如果遇到类似于成绩单，报表这样的数据最佳选择肯定是表格。

4. Div与span是兄弟

Div与span在html中都是用在辅助布局的，都是没有语义的，不同点是，div是块元素，span是内联元素，从逻辑结构上讲，div用来划分块元素，span用来划分内联元素。把<a>里边套一个我们常用的技巧，例如css的滑动门技术。
5.h系列，请合理使用
h系列一共有六个标签，h1~h6，算是六个等级吧，如果你看一本书，它的目录如果是这样的：
1.1理解WEB标准
2 浏览器上的新大陆
3.4.4属性选择符
你是不是感觉很奇怪呢？
不错，正常情况应该是一级一级向下的形成一个树形，这样是很利于浏览器对于DOM树进行解析的。虽然通过设置CSS可以让h1和h6显示一样，但这绝对不是一个好方法。而且有人写的明显应该有级别的页面，却连一个h标签都找不到，我地神啊！