标签语义化-书之解释[转]
作者：我就是个世界
发表于：2011-11-08
一篇很基础，很有用的HTML5前端重构入门教程！
来源：[url=http://www.laozhuhome.com/html/semantic-by-book]LaoZhuHome Beta 前端笔记[/url]
每一个从事前端开发的童鞋估计都知道结构（Structure）、表现（Presentation）和行为（Behavior）这三个词语意味着什么，这里我先只针对结构这一块拿出来说说。
结构（Structure），顾名思义就是网页的框架，一个良好的框架可以很方便的创造出一个优美的网页，那么何为良好的框架，这就是下面要提到的语义化（Semantic），我会以一本书的例子来比喻，这样或许会更加容易理解一些。
[separator]
我们假设一个网页就是一本书，抱着最终用户优先的原则我们来着手制作网页这本书。
首先需要确定的是这本书的大小，只有确定了书的大小才能在保证不同的印刷厂（浏览器）也能准确的印刷出我们想要的效果，这一步就是DTD的确定。
所谓DTD，可能很多人都不了解，有很大一部分人都是直接用DW默认的DTD，也就是下面要介绍的过渡型（DW4为例），你大可不必背出来DTD每个DTD的声明，但是你需要知道的是每一个DTD所代表的含义，对于那种把所有DTD背下来的人我一直保持膜拜的态度。
（这里只介绍XHTML有关的DTD，HTML4的不建议使用所以这里不予介绍，手机版的DTD和框架版的DTD由于很少用到，所以这里也不介绍，避免内容多了容易混淆）
下面这个是过渡型，意思就是可以容许一定的不标准的差异存在，建议新手用这种DTD。
[code] <!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN” ”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>[/code]
下面就是我所推荐的严格型的DTD，建议有一定经验的前端开发人员统一换成这种DTD。特殊情况特殊对待，比如公用度很高的头尾页面我还是先处理成transitional，以免对子集页面造成不良影响，当然针对不同的项目和具体情况可以自由定义DTD，建议使用严格型的。
[code] <!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Strict//EN” ”http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>[/code]
下面这个就是所谓的HTML5 DTD声明，很简短，无需复制，完全可以牢记，但是如果你对标准理解不是很深入的话不推荐使用，而且现在的网络环境也不允许大规模使用。
[code] <!DOCTYPE html>[/code]
现在这本书的大小已经确定，可以告诉印刷厂我将有这种类型的一本书要出版，印刷厂也做好了相应准备来正确的印刷这本书。
然后就是写一个书名，正常的一本书是不会没有书名的，所以我在语义化-书之网页说 ，好，也许你会说这样封面就已经做好了，抛去那些视觉的修饰这样真的算是完成了吗？我觉得不是，你需要在封面添加的是这本书的简单说明，作者，简介，出版社，或者关键词，你不加当然也可以，但是如果一本书上连一个简单的介绍都没有你会去买吗？
这就是
[code]
1、<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /> //书的语言
2、<meta name=”author” content=”屁熊猫” /> //书的作者
3、<meta name=”copyright” content=”© http://www.laozhuhome.com” /> //出版社
4、<meta name=”description” content=”这里填写对这本书的简短介绍” /> //书的简单描述
5、<meta name=”keywords” content=”这本书的关键词，比如科幻小说，文艺小说，或者爱情小说“ /> //关键词
[/code]
现在这本书的封面已经确定好了，接下来就开始内容的制作。
然后就是一个大的标题，再次告诉读者你没有买错，这本书不是换个封面但是内容不一样的一本盗版书。
[code] <h1>语义化-书之网页说</h1>[/code]
这样就给读者一个反馈再次这本书的大概内容，而且这个标题是唯一的，接下来就是目录的制作
我们会在书的开头就放上一段目录，同样我们会在网站的顶部放上整个网站的导航，让读者可以清楚的明白整本书的结构，让读者再次确认这本书是不是想要找的那本书，
导航列表我建议用来表示，因为这样才像一个目录列表的样子。
当读者看完了目录自然就跳到内容部分，每个章节都会用一个标题说明下面的内容
[code]
<h2>目录章节一</h2>
<h2>目录章节二</h2>
<h2>目录章节三</h2>
[/code]
关于每个章节的内容我们可以用
[code] <p>章节一内容</p>[/code]
来实现。
书里经常会用到一些术语解释，我们可以使用
[code]
<dl>
<dt>需要解释的词语</dt>
<dd>这个词语的解释内容</dd>
</dl>
[/code]
来实现。
书中有时候我们会引用别人的一段话来证明自己的观点，那么可以使用
[code] <blockquote>引用的话</blockquote>[/code]
甚至其他一些情况我们都能找到对应的XHTML解决方案：
[code]
<strong></strong> <em></em> //强调某个词语
<address></address> //列出某人地址
<abbr title=”"></abbr> /<acronym title=”"></acronym> //解释某个缩写短语
<code></code> //一段代码
[/code]
这里列出的是一些一本书可能会出现的表现方式，在XHTML里我们都可以找到语义化的解决方案。
这个时候也许你会惊奇的发现为什么没有提到div呢，那么我想问一下，你所说的div是什么形式的div呢？
div在我看来本身没有任何语义，只是用作布局以及样式化或脚本的钩子（hook），所以在有了更好的标签代替(如HTML5里新增的article，section，nav，header…)就会自然减少div的数量，但是现在我们还必须使用div来包裹住不同的块，比如图书的目录导航是一个完整的块，需要div包裹，每个目录对应的内容区域也是一个完整的块，也可以用div包裹，div可以合理使用，但不能滥用，因为在没有更好的标签代替的时候使用div确实是最好的解决方案。如果每个文章段落你不使用p标签而使用了div那是不被看好的。
现在跳出书这个比喻物来具体说说语义化在网页中的真实作用。
语义化说起来简单，但是做起来也不是那么容易，网页上的每块元素在现实中我们都可以给予其定义，浏览器的开发者们把这种人为给予的定义赋予了浏览器，然后浏览器就根据不同的标签来分辨这一块应该是什么内容，作为人类的我们可以用生活来分辨出这一块是什么内容，但是作为浏览器只能根据开发者使用的标签来解释这一块的含义，所以一个好的开发者制作出来的网页应该是不但终端用户可以很好的理解每块的含义，甚至浏览器也能很好的解释出每块的现实含义并良好的展示出来。
开发者们，书写一个语义化的网页不是什么高深的内容，而是作为一个前端开发者应有的基本功吧，你需要挑战的不仅是人类，还有机器，人类的吹毛求疵你很难满足，但是你能用语义化的代码搞定死板的浏览器也是一件让人兴奋的事。你或许会说不管怎么做我可以准确的还原设计稿就行，这么想我没有意见，但是作为一个前端开发工作人员这是你的工作，我们会看你的XTHML代码，是否专业，是否对标准化有深入的了解一看便知，为了作为一个专业的前端开发人员，我还是建议有些童鞋可以试着改变一下，或许你的一点点改变会影响到你的新员工，甚至老同事，这样或许能间接推动国内的前端开发行业变得越来越和国际接轨，再小的力量，也是一种支持啊亲。
如果你真正的做到了标签语义化，拿到一个网页效果图学会站在浏览器和浏览者的角度思考，那么现在你就是一个不折不扣的页面重构师了，作为一个伪高科技人才，你就偷着乐吧。
最后来张图总结一下。
[img][attach]412[/attach][/img]
/*忘食忘忧，不知岁月*/
来源：[url=http://www.laozhuhome.com/html/semantic-by-book]LaoZhuHome Beta 前端笔记[/url]
每一个从事前端开发的童鞋估计都知道结构（Structure）、表现（Presentation）和行为（Behavior）这三个词语意味着什么，这里我先只针对结构这一块拿出来说说。
结构（Structure），顾名思义就是网页的框架，一个良好的框架可以很方便的创造出一个优美的网页，那么何为良好的框架，这就是下面要提到的语义化（Semantic），我会以一本书的例子来比喻，这样或许会更加容易理解一些。
[separator]
我们假设一个网页就是一本书，抱着最终用户优先的原则我们来着手制作网页这本书。
首先需要确定的是这本书的大小，只有确定了书的大小才能在保证不同的印刷厂（浏览器）也能准确的印刷出我们想要的效果，这一步就是DTD的确定。
所谓DTD，可能很多人都不了解，有很大一部分人都是直接用DW默认的DTD，也就是下面要介绍的过渡型（DW4为例），你大可不必背出来DTD每个DTD的声明，但是你需要知道的是每一个DTD所代表的含义，对于那种把所有DTD背下来的人我一直保持膜拜的态度。
（这里只介绍XHTML有关的DTD，HTML4的不建议使用所以这里不予介绍，手机版的DTD和框架版的DTD由于很少用到，所以这里也不介绍，避免内容多了容易混淆）
下面这个是过渡型，意思就是可以容许一定的不标准的差异存在，建议新手用这种DTD。
[code] <!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN” ”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>[/code]
下面就是我所推荐的严格型的DTD，建议有一定经验的前端开发人员统一换成这种DTD。特殊情况特殊对待，比如公用度很高的头尾页面我还是先处理成transitional，以免对子集页面造成不良影响，当然针对不同的项目和具体情况可以自由定义DTD，建议使用严格型的。
[code] <!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Strict//EN” ”http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>[/code]
下面这个就是所谓的HTML5 DTD声明，很简短，无需复制，完全可以牢记，但是如果你对标准理解不是很深入的话不推荐使用，而且现在的网络环境也不允许大规模使用。
[code] <!DOCTYPE html>[/code]
现在这本书的大小已经确定，可以告诉印刷厂我将有这种类型的一本书要出版，印刷厂也做好了相应准备来正确的印刷这本书。
然后就是写一个书名，正常的一本书是不会没有书名的，所以我在
这就是
[code]
1、<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /> //书的语言
2、<meta name=”author” content=”屁熊猫” /> //书的作者
3、<meta name=”copyright” content=”© http://www.laozhuhome.com” /> //出版社
4、<meta name=”description” content=”这里填写对这本书的简短介绍” /> //书的简单描述
5、<meta name=”keywords” content=”这本书的关键词，比如科幻小说，文艺小说，或者爱情小说“ /> //关键词
[/code]
现在这本书的封面已经确定好了，接下来就开始内容的制作。
然后就是一个大的标题，再次告诉读者你没有买错，这本书不是换个封面但是内容不一样的一本盗版书。
[code] <h1>语义化-书之网页说</h1>[/code]
这样就给读者一个反馈再次这本书的大概内容，而且这个标题是唯一的，接下来就是目录的制作
我们会在书的开头就放上一段目录，同样我们会在网站的顶部放上整个网站的导航，让读者可以清楚的明白整本书的结构，让读者再次确认这本书是不是想要找的那本书，
导航列表我建议用来表示，因为这样才像一个目录列表的样子。
当读者看完了目录自然就跳到内容部分，每个章节都会用一个标题说明下面的内容
[code]
<h2>目录章节一</h2>
<h2>目录章节二</h2>
<h2>目录章节三</h2>
[/code]
关于每个章节的内容我们可以用
[code] <p>章节一内容</p>[/code]
来实现。
书里经常会用到一些术语解释，我们可以使用
[code]
<dl>
<dt>需要解释的词语</dt>
<dd>这个词语的解释内容</dd>
</dl>
[/code]
来实现。
书中有时候我们会引用别人的一段话来证明自己的观点，那么可以使用
[code] <blockquote>引用的话</blockquote>[/code]
甚至其他一些情况我们都能找到对应的XHTML解决方案：
[code]
<strong></strong> <em></em> //强调某个词语
<address></address> //列出某人地址
<abbr title=”"></abbr> /<acronym title=”"></acronym> //解释某个缩写短语
<code></code> //一段代码
[/code]
这里列出的是一些一本书可能会出现的表现方式，在XHTML里我们都可以找到语义化的解决方案。
这个时候也许你会惊奇的发现为什么没有提到div呢，那么我想问一下，你所说的div是什么形式的div呢？
div在我看来本身没有任何语义，只是用作布局以及样式化或脚本的钩子（hook），所以在有了更好的标签代替(如HTML5里新增的article，section，nav，header…)就会自然减少div的数量，但是现在我们还必须使用div来包裹住不同的块，比如图书的目录导航是一个完整的块，需要div包裹，每个目录对应的内容区域也是一个完整的块，也可以用div包裹，div可以合理使用，但不能滥用，因为在没有更好的标签代替的时候使用div确实是最好的解决方案。如果每个文章段落你不使用p标签而使用了div那是不被看好的。
现在跳出书这个比喻物来具体说说语义化在网页中的真实作用。
语义化说起来简单，但是做起来也不是那么容易，网页上的每块元素在现实中我们都可以给予其定义，浏览器的开发者们把这种人为给予的定义赋予了浏览器，然后浏览器就根据不同的标签来分辨这一块应该是什么内容，作为人类的我们可以用生活来分辨出这一块是什么内容，但是作为浏览器只能根据开发者使用的标签来解释这一块的含义，所以一个好的开发者制作出来的网页应该是不但终端用户可以很好的理解每块的含义，甚至浏览器也能很好的解释出每块的现实含义并良好的展示出来。
开发者们，书写一个语义化的网页不是什么高深的内容，而是作为一个前端开发者应有的基本功吧，你需要挑战的不仅是人类，还有机器，人类的吹毛求疵你很难满足，但是你能用语义化的代码搞定死板的浏览器也是一件让人兴奋的事。你或许会说不管怎么做我可以准确的还原设计稿就行，这么想我没有意见，但是作为一个前端开发工作人员这是你的工作，我们会看你的XTHML代码，是否专业，是否对标准化有深入的了解一看便知，为了作为一个专业的前端开发人员，我还是建议有些童鞋可以试着改变一下，或许你的一点点改变会影响到你的新员工，甚至老同事，这样或许能间接推动国内的前端开发行业变得越来越和国际接轨，再小的力量，也是一种支持啊亲。
如果你真正的做到了标签语义化，拿到一个网页效果图学会站在浏览器和浏览者的角度思考，那么现在你就是一个不折不扣的页面重构师了，作为一个伪高科技人才，你就偷着乐吧。
最后来张图总结一下。
[img][attach]412[/attach][/img]
/*忘食忘忧，不知岁月*/
请发表您的评论