HTML语言编写指南

制作网页的第一步,就是学会编写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

(完)

时间: 2024-09-12 14:29:29

HTML语言编写指南的相关文章

Bookmarklet编写指南

前一段日子,我写了两个Bookmarklet----"短网址生成"和"短网址还原". 它们用起来很方便,除了我本人之外,其他朋友也在用.第一次发布Bookmarklet,就能有用户,我挺满意的. 下面就是我整理的<Bookmarklet编写指南>,供自己和需要的朋友参考. ==================================================== Bookmarklet编写指南 阮一峰 编写 一.什么是Bookmarklet

一份语言选择指南带你玩数据科学,选出你心中支持的语言

更多深度文章,请关注:https://yq.aliyun.com/cloud 随着大数据时代的到来,网络每天会产生大量的数据,一些行业会对这些数据进行分析并协助企业不断地发展新业务.创建运营模式等,比如电子商务.推荐系统等.那么谁对这些大数据进行分析呢?对应的工作领域是数据科学(Data Science),该领域需要结合先进的统计知识.定量分析能力和编程能力.涉及到编程,大家都会面临一个问题,有太多的编程语言可供选择,那么哪些编程语言适合数据科学领域呢?虽然没有正确答案,但想成为一名成功的数据科

基于Asterisk的VoIP开发指南——(2)Asterisk AGI程序编写指南

原文:基于Asterisk的VoIP开发指南--(2)Asterisk AGI程序编写指南 5. Asterisk AGI程序编写指南    5.1概述 很多时候,我们需要在拨号方案中做某些业务逻辑的判断或者外部数据库的查询,根据具体地需要,有几种做法: 1.使用Asterisk的通道变量.Goto函数.Gotoif函数等实现某些简单跳转,通过几个这样的函数的组合,实现简单的业务. 2.对终端接入用户的呼叫请求中的某些属性,进行简单的数据库增删改查,在Asterisk官方发布的asterisk-

《R语言初学指南》一导读

前 言 R语言初学指南 R是一个用于科学绘图和计算的计算机软件.它由统计学家和科学家编写并维护,以便科学家们在工作中使用.它易于使用,且有强大的功能.R正在科学和技术领域迅速传播,并为展示科学出版物中的图形数据建立标准. R是免费的开源软件,可在大多数计算机(俗称电脑)上安装.它支持Windows.Mac和Unix/Linux操作系统.人们可从R语言网站(http://www.r-project.org/)方便地下载并安装R软件. 本书是为高中生.大学生,以及其他想要学习怎样使用R的人编写的.借

《R语言初学指南》一2.6 本章小结

2.6 本章小结 R语言初学指南在上例中,由于向量t.principal.paid.month.t.interest.paid.month.t及principal.remaining都包含360(或m)个元素,它们在控制台显示时会出现大片的数字.若能将它们组织成某种表格,使之能更好地呈现出来就好了.同样,还需要几种能将大型数据表格输入到R中的方法.在第5章中将会讨论数据的输入及输出. 在之前给出的脚本中,函数sum()可能会令人好奇,它可对任一向量中的所有元素求和.R中有很多这样的函数,在第3章

《R语言初学指南》一第1章 介绍:开始使用R1.1 R教程

第1章 介绍:开始使用R R语言初学指南R是一种用来进行科学绘图和计算的计算机程序. R由科学家编写,供他们在工作中使用. R具有非常强大的功能,且十分易于使用. R是免费的. 记得之前提到过R是免费的吗? R有不同的版本,适用于各种操作系统,比如,Windows,Mac,甚至包括Unix/Linux系统.如果读者在家有台能联网的电脑,便可以从这个网站http://www.r-project.org/下载并安装R. R的安装比电脑游戏还要简单(若需安装帮助,可以参考附录A). 安装R之后,会在电

《R语言初学指南》一2.2 运行R脚本

2.2 运行R脚本 R语言初学指南现在可以开始运行脚本了!在R编辑器窗口成为当前活动窗口的情况下,点击任务栏中的"Edit",在下拉菜单中可看到常用的文本编辑选项,如"Undo"."Cut"及"Copy"等.找到并点击"Run all". 若在Unix或Linux系统中使用R,有两种方法可用来运行脚本:(1)将文本编辑器中的脚本全部复制,再粘贴到控制台的提示符处,即可运行该脚本.这种方法与在控制台中一行行输

《R语言初学指南》一2.3 找到R脚本中的错误

2.3 找到R脚本中的错误 R语言初学指南复杂项目中的R脚本会非常长.即使是R专家,也很少能一次性将其编写正确.脚本中的所有错误都是通过调试来修改的. 在脚本中称追踪错误或"bug"为"调试".调试包括一些适用性检测工作. 下面在脚本中故意制造一个bug,由此来练习如何调试.首先来做一些清理工作.使控制台成为活动窗口,并输入下列命令: >objects() 按照惯例,这里在展示控制台中的命令时,依然在其前面显示R提示符(">"),但要

《R语言初学指南》一2.4 利用注释使脚本明了

2.4 利用注释使脚本明了 R语言初学指南可在脚本中加入注释.在脚本中,任何以"#"(sharp/number symbol)开头的命令行都会被R忽略.同样,若"#"出现在某行的中间,则该行中"#"后面的语句都会被忽略.可利用这一特性对脚本添加注释,以便用户或他人日后查阅.例如,作者每次查看前一天编写的脚本时,都要重新梳理并回忆每条脚本语句的作用. 下面是添加注释之后,狼-驼鹿脚本可能呈现的样子: #=======================