深更半夜话(html)语义
2009-07-26 01:09 一醉而过 阅读(3689) 评论(5) 编辑 收藏 举报引子：
近日杭州高温，不过受日食影响下了大雨(具体是不是，我也不知道)，气温下降，难得一个周末还加了一天班，晚上和一同学探讨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>和<p>还有哪些标签是带有语义的呢？答案是很多！
例如，表示强调的<em>和<strong>，表示插入的<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 |
强调 |
<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必须合理嵌套 |
|
|
|
|
|
标签，属性，值小写 |
|
|
|
|
|
转义字符 |
< ,>,&, ’ , ” |
< ,> , &,&apos," |
|
上表是我花了一个多小时整理出来的，累！
请看两段代码：
<p><b>一醉</b>致力于web标准推广的人</p>
<p><strong>一醉</strong>致力于web标准推广的人</p>
以上两段代码在没用添加CSS的情况下，他们都会以加粗显示”一醉”这个名字，但是他们的实际意义却不一样，<b>只是以加粗的形式显示内容，而<strong>是表示重点强调的，如果你的本意是想强调，那么毫无疑问，选择<strong>才是符合语义化的。如果你只是想显示视觉的效果时，还可以这样<p><span class=”p_style”>一醉</span>致力于web标准推广的人</p>,然后通过css控制显示样式。
这里<span>是一个无语义的标签,而且默认是没有展现的。
要掌握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>里边套一个<span>我们常用的技巧，例如css的滑动门技术。
5.h系列，请合理使用
h系列一共有六个标签，h1~h6，算是六个等级吧，如果你看一本书，它的目录如果是这样的：
1.1理解WEB标准
2 浏览器上的新大陆
3.4.4属性选择符
你是不是感觉很奇怪呢？
不错，正常情况应该是一级一级向下的形成一个树形，这样是很利于浏览器对于DOM树进行解析的。虽然通过设置CSS可以让h1和h6显示一样，但这绝对不是一个好方法。而且有人写的明显应该有级别的页面，却连一个h标签都找不到，我地神啊！
谈及语义化，我到目前为止的理解，就是把合适的标签用到合适的地方去，方便机器阅读，更方便人阅读。当然语义化这东西不是一天就能掌握的，它所包含的内容很多，需要一个过程慢慢理解，追求最佳的语义化是我们每一个做开发的人的基本素质。
文章写完，已经深夜一点，索性文章名就叫《深更半夜话(html)语义》吧.
