HTML语言编写指南

作者: 阮一峰

日期: 2009年5月17日

珠峰培训

制作网页的第一步,就是学会编写HTML语言。

HTML是一种标签语言,通过在内容上附加各种标签,达到在浏览器中正确展示的目的。正确地编写HTML,不仅是制作网页的必要条件,也是对网页进一步处理、添加CSS和Javascript效果的前提。

编写HTML语言的关键,就是把标签用对,使它能够正确传达语义信息,不要使用无含义或错误含义的标签。下面就是一份我整理的HTML语言的编写指南。

一、块级元素

div

含义:页面内容的一个独立组成部分。

常见的用途有三种:1)划分页首、页尾、页边栏或导航栏等等;2)表示页面的分栏;3)将文章进一步分成几个部分,比如正文、评论、文章的元数据等等。

示例:

<div id="header">页面的头部</div>

h1, h2, h3, h4, h5, h6

含义:内容的标题。

h1是最高一级的标题,下一层标题使用h2,依次类推。除了h1以外,其他5个级别标题在一个页面中都可以出现多次,h1只能出现一次。

示例:

<h1>一级标题</h1>

<h2>二级标题</h2>

p

含义:表示段落。

它是文章内容的基本组成部分,也可以用来表示诗歌中的一节。p与div的主要区别是,前者表示文本段落,后者表示更广义的段落。

在P标签中,不应该再包含其他块级元素。此外,也不应该使用空的p标签。

示例:

<p>这是一个段落。</p>

blockquote

含义:表示一段引用自其他来源的独立文本。

它引用的文本通常有一定的长度,以块级元素的形式出现。

blockquote应该总是与cite标签配合使用,cite用来指明引用材料的来源。

示例:

<blockquote>
不是在沉默中爆发,就是在沉默中灭亡。
<cite>鲁迅《为了忘却的纪念》</cite>
</blockquote>

在浏览器的默认样式中,blockquote有文本缩进的效果,但是不要单单因为这个原因,而使用它。

blockquote有两个属性,第一个是cite属性,用来指明引用材料的URI地址;第二个是title属性,用于提供引用材料的相关信息。

示例:

<blockquote cite="http://w3c.org/" title="文章的标题,作者,发表日期">"我正在此处引用W3C的标准。"</blockquote>

二、行内元素

a

含义:与href属性搭配使用时,链接至外部链接,或者同一页的某个锚点。

示例:

<a href="chapter2.html">第二章</a>

abbr

含义:表示内容是某个术语或短语的缩写形式,它有一个title属性,用来指明缩写所代表的原始词组。

示例:

<abbr title="Europe">Eur</abbr>

acronym

含义:表示内容是一个词组的首字母简称,比如BBC、WTO。

它有一个title属性,用来指明属性所代表的原始词组。

acronym与abbr的主要区别是,前者往往是一个可以独立使用的词,而后者不是。这意味着acronym肯定是abbr,但是abbr不一定是acronym。

示例:

<acronym title="World Wide Web">WWW</acronym>

em

含义:表示强调。

em所指明的内容,应该比其周围的内容更重要。

注意,如果你只是想表示斜体或者引用书名,那就不要使用em标签,而是用CSS命令(font-style:italic)。

示例:

<em>我正在强调这句话。</em>

strong

含义:表示比em更强的强调。

示例:

<strong>我正在以更大的强度,强调这句话。</strong>

address

含义:表示某个特定文档或文档的某个部分的联系信息或联络方式。

注意:1)所有的联络方式都可以用这个标签表示,而不仅仅是地址。2)它是一个块级元素,不要用它来单独标识某个Email地址或电话号码。

示例:

<address>
<a href="../People/张三/">张三</a>,
<a href="../People/李四/">李四</a>,
$ 日期:1999/12/24 23:37:50 $
</address>

cite

含义:表示引述的来源。

它用来指明书目信息、个人引语、或者参考文献中的外部资源。

示例:

<cite>《哈利波特系列小说》</cite>的作者是J.K.罗琳。

dfn

含义:用来表示一个定义。

示例:

<dfn>Internet Explorer</dfn>是最常见的浏览器。

del

含义:表示该信息已被删除。

通常用于日期和时间,表示文档已经发生了变化。

ins

含义:与del的作用正好相反,表示修订后插入的内容。

code

含义:表示程序代码。

samp

含义:表示程序代码的输出结果。

kbd

含义:表示由用户键入的文本。

它很少使用,但是在某些场合,你想演示如何使用一个程序,它就会有用。它通常与code和samp结合使用。

var

含义:表示程序中的变量或参数,与code, samp, kbd结合使用。

q

含义:表示一个较短的引语。

注意:浏览器对这个标签的支持很不好,因此不推荐使用。

sub/sup

含义:表示下标/上标。

span

含义:用来标识其他标签不适合表示的内容,是一个通用型的行内标签。

三、列表元素

ul, ol, li

含义:表示一组相同格式的信息。

当你有一张清单的时候,就应该使用列表元素。ul是无序列表,通常前面有一个强调符号;ol是有序列表,前面通常采用数字编号。

dl, dd, dt

含义:表示一个术语列表。

dt表示术语,dd表示该术语的定义,可以为单个术语提供多个定义。

示例:

<dl>
<dt>虚怀</dt>
<dd>胸襟宽大,虚心谦退</dd>
<dt>虚荣</dt>
<dd>表面上的荣耀;虚假的荣名</dd>
<dt>虚构</dt>
<dd>凭想像编造出来</dd>
</dl>

四、表格元素

参见我整理的《精通HTML表格的使用》一文。

五、分割元素

br

含义:表示换行。

注意,除了少数场合(比如诗歌中的分行),应该尽量避免使用这个标签,因为它并没有特别的语义含义,而且分行的视觉效果完全可以通过p标签、列表标签和CSS命令达到。

hr

含义:表示两个部分之间用一根水平直线分割。

事实上,不用这个标签,也有办法显示水平直线。这个标签的唯一优势,也许就是在没有CSS的场合,它可以产生视觉分割的效果。

六、不建议使用的元素

以下的标签都没有明确的语义,只涉及到视觉效果,很可能在以后版本的HTML语言中被废除。建议不要使用。

* big
* small
* b
* i
* tt
* pre

七、已经被废除的标签

下面的标签已经被废除,不应该继续使用了。

* applet
* center
* font
* dir
* isindex
* menu
* s
* strike
* u

[参考文献]

* Semantics, HTML, XHTML, and Structure
* Guide to Semantic Use of HTML Elements
* mozilla.org Markup Reference

(完)

一灯学堂

留言(17条)

非常感谢呀 正打算有时间学学呢

https://docs.google.com/Doc?id=d3pv9xk_49f8jkhjg2

http://www.flickr.com/photos/please-me/
我们不曾遇见温总理,请救救白血病儿童!!
我叫赵功亮,安徽省宿松县龙潭村人士,是一名普通的农民.
今年4月,两岁的小子赵天宇被查处患有白血病All L2 型白血病,整个家庭如晴天霹雳,
为此我夫妻二人不得不只身离开老家来上海求医,小儿现就诊于上海儿童医学中心。经过医院的准确诊断和初期的化疗,儿子的病情已初步缓解。
让人庆幸的是儿童中心的陈静医生介绍说小儿患的是急性淋巴性白血病,属于低微型,完全有机会治愈。听到这样的消息我们真是喜忧参半,高兴的是儿子病经过近 10个疗程的化疗被治愈的肯能你性非常大,而不需要进行什么骨髓的更换,然而更让我们忧郁的是面对高昂的治疗费用,我不知道我们是不是能否坚持到最后。上 月从亲戚处东凑西借来的近三万眼看就要分文不剩,化疗的第一个疗程和住院费已交了两万多,而在上海这给消费高的城市,我们夫妻的生活已是举步维艰,但仍要 给可爱的儿子足够的营养让他有体力能够化疗。尽管这样,面对日益恢复的儿子我总对他又很多的愧疚感,因为到了第三个疗程我们已是无法的支付医药费而不得不 离开医院。每想到此我总是会在深夜流泪。
为了小儿的病,家里的一切都仍下,面对念初中的大儿子我们也是无力的照料,家里的地也是扔给了亲戚朋友,现在已是没有来源。家乡以种棉为生,不料去年的棉 花价格大跌,辛苦了一年的劳动只能勉强保住农药种子的成本费用,要不是靠平时打打零工积攒来的几千块钱和亲戚们处借来的,我想我们第一个疗程都不能做,只 有眼睁着看儿子的病情恶化。我们不曾有天津的那位病友的父母的好运气能够遇到总理,我们只有寄希望与社会,希望社会的好心人能够给予我们帮助,帮助我挽回 一个可爱的生命!!感激涕零
赵功亮:13671832595 上海儿童医学中心上海市东方路1678号血液科 021-38626161 。
代联信箱 ppleaseme@gmail.com

请教一个问题,既然现在有可视化的网页设计工具了,为什么还需要html? 为什么网页设计不能像用word那样排版?

dl用来表达对话,是html4规范中的一处horse’s mouth

Typical uses (and hence values) for definition lists include:

* glossaries, such as the example shown above (term: definition)
* event listing (title of event: description of event)
* web site directory (web site name with link: description of web site)

Some people use definition lists for the purposes of marking up dialogues (using dt to denote the speakers, and dd for the words they say). This approach has come straight from the horse’s mouth—the W3C HTML recommendation states that "Another application of dl is for marking up dialogs"—but many people argue that it represents bad practice and is somewhat misguided. You may see definitions lists used in this way, but arguably you shouldn’t use them for this purpose, despite what the W3C says, because they’re designed to mark up lists of definitions.

可能有代码冗余吧
可视化工具毕竟不是人脑

我觉得自己最常用的就是div,p,ul,li,br,hr

一张好的HTML网页,除了要在IE各种版本下正常运行(浏览与功能)之外,还要确保在其它浏览器(Firefox, Opera)和操作系统(apple)下正常运行,做到这几点是很不容易的。

pre 标签被 deprecate 掉了?
我觉得用起来很方便啊……

那有可用以替换的标签嘛?

pre我也一直在使用呢

继续关注!看到现在的网页越来越漂亮了,尤其是人性化越做越好,很羡慕,很羡慕。但那似乎太难了,HTML、css、javascript、ajax、php、MySQL……尤其是艺术细胞奇缺,这简直就是艺术家的工作。

基础的东西,几乎被忽视了··

引用chao的发言:

既然现在有可视化的网页设计工具了,为什么还需要html?

为了对网页精确控制呀,否则就没办法添加CSS和javascript。

引用lifesinger的发言:

dl用来表达对话,是html4规范中的一处horse’s mouth

多谢指出,我其实也觉得dl用来标识对话不太合理,但是有的外文资料上这样写了,我也就跟着写了,我这就删去。

引用nil的发言:

pre 标签被 deprecate 掉了?
我觉得用起来很方便啊……

那有可用以替换的标签嘛?

我觉得,pre没有语义上的含义,根据语义网原则确实应该废除。

至于替换标签,在语义网中,确实找不到。

引用Ruan YiFeng的发言:

我觉得,pre没有语义上的含义,根据语义网原则确实应该废除。

至于替换标签,在语义网中,确实找不到。

有趣的是,你的博客就在用的…… <pre>引用Ruan YiFeng的发言:</pre>

pre 是唯一一个让换行符原文显示的标签了吧?去掉了贴代码能烦死……

一个是 <pre class="code" /> 一个是 <blockquote> 嵌套一堆 p,你觉得哪个更语义化一点呢?

To nil:

pre唯一的好处就是能够保持缩进和换行,但是容易被滥用。也许W3C未来应该再发明一个特定的用于显示代码的标签。

至于我的blog模板,那是以前不懂的时候写的,很不规划,将来会改掉的。

写的真详细,也很简单 很适合学习 谢谢!

“不是在沉默中爆发,就是在沉默中灭亡。”这句,高中的时候学过,应该是《纪念刘和珍君》-鲁迅 里的,鲁迅《为了忘却的纪念》我没读过,百度说是鲁迅先生为了纪念“左联”五烈士写的,不知是不是有子集什么的关系...

我要发表看法

«-必填

«-必填,不公开

«-我信任你,不会填写广告链接