代码改变世界

深更半夜话(html)语义

2009-07-26 01:09 by 一醉而过, ... 阅读, ... 评论, 收藏, 编辑

引子:

近日杭州高温,不过受日食影响下了大雨(具体是不是,我也不知道),气温下降,难得一个周末还加了一天班,晚上和一同学探讨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>  等等 ……

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

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

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

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

类别

标签名

用法与含义

例子

备注

标题类

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必须合理嵌套

 

 

 

 

标签,属性,值小写

 

 

 

 

转义字符

< ,>,&, ’ , ”

&lt ,&gt , &amp,&apos,&quot

 


 

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

请看两段代码:

<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.       Divspan是兄弟

Divspanhtml中都是用在辅助布局的,都是没有语义的,不同点是,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)语义》吧.