1.1.HTML常用标签

HTML标签虽然有很多，但并不是都经常用到。下面我们开始先学习一些常用的HTML标签。1.1.1.标题

在前面的学习中，我们看到过在

元素内，有一组标签，这里的就是页面文档文件的标题，我们编写每个页面时，都应该设定具体的标题内容(默认是无标题文档)，它的作用非常重要，具体体现在以下几个方面。

l 通常都是是位于浏览器的左上角。

l 作为浏览器中书签的默认名称。

l 搜索引擎通过抓取其内容帮助索引页面。

因此，使用描述站点内容的标题是至关重要的。千万不要将“欢迎访问我的小站”或者“主页”这类的废话用作标题。而是应该采用能够准确描述站点内容的语句。

下面通过一个小例子看下其表现效果，例如：

芜湖新闻网|中国芜湖|安徽省芜湖市唯一重点新闻门户网站

表现如图2-3：

图片3.png (25.38 KB, 下载次数: 0)

2017-8-11 15:49 上传

图2-31.1.2.标题heading系列h1~h6

人们在写文章时，通常是分若干个章节，根据实际情况在把章节分成多个层次，每个层次添加一个相应的题目，这就是heading。在HTML中heading共有六个元素，从h1至h6。

代表最顶级标题,也叫一级标题，二级标题用

表示，以此类推。

在这六级标题中，h1是最重要的，h6是最不重要的。他们的表现样式是h1最大h6最小。如图2-4所示：

图片4.png (24.83 KB, 下载次数: 1)

2017-8-11 15:50 上传

图2-4

严格说，h1标签在一个页面只能用一次。相当于一篇文章的标题，你可以有一个副标题，但不会使用两个并列的标题一样。通常h1标签用来放页面中最重要的信息，如首页上网站的标题、列表页中列表的标题、内容页里文章的标题。

不仅是最大最突出的标题，搜索引擎也会将其视为仅次于标签的另一个搜索关键词的来源。在后面的章节中我们会通过案例来说明其用法。

h2到h6可以任意使用多次，但它们应依设计意图，该按顺序使用。比如，h3应该是h2的子标题，h4应该是h3的子标题，以此类推。1.1.3.段落p

HTML里利用一对p标签表示一个段落，每一个段落都应该包含在起始标记

和结束标记

之间，例如：

这是铁路线上的一个小站。只有慢车才停靠两三分钟，快车疾驰而过。

你在车上甚至连站名也来不及看清楚，一间红瓦灰墙的小屋，一排白漆的木栅栏，或许还有三五个人影，眨眼就消失了。火车两旁依然是逼人而来的山崖和巨石，这样的小站在北方山区是常见的。

在浏览器显示中，段落通常在下一个段落之前插入一个新行，并添加一小段垂直空间，如下图2-5所示：

图片5.png (26.84 KB, 下载次数: 1)

2017-8-11 15:50 上传

图2-51.1.4.换行符br

通常情况下，浏览器会将文本之间的空白字符都转化为一个空格显示，将多余的空白字符过滤掉。例如，我们在代码视图输入包含换行的段落文本：

常记溪亭日暮，

沈醉不知归路。

兴尽晚回舟，

误入藉花深处。

争渡，争渡，

惊起一滩鸥鹭。

我们在浏览器中查看到的效果如下图2-6所示：

图片6.png (27.87 KB, 下载次数: 0)

2017-8-11 15:50 上传

图2-6

我们发现，在代码视图中的换行部分，在浏览器中以一个空格显示，如图2-6。

当我们需要在某个地方换行显示时，我们可以使用换行符
，当我们使用
时，在它后面的内容会另起一行显示。
元素是空元素，它不需要起始和结束标签。

当我们的内容并不希望像段落一样，而是像诗歌一样，可以这样：

常记溪亭日暮，

沈醉不知归路。

兴尽晚回舟，

误入藉花深处。

争渡，争渡，

惊起一滩鸥鹭。

表现效果如图2-7所示

图片7.png (15.98 KB, 下载次数: 1)

2017-8-11 15:50 上传

图2-71.1.5.预格式化pre

有时我们需要将预先排好的文本原封不动的显示出来。这时我们就需要用到pre元素。pre可以告诉浏览器它所封装的文本是被预格式化的。先看下的小例子：

*☆∵ ▁▂▄▂▁．★∵∴☆．★∵∴

∴★◢█████◣*☆．∴★∵★*☆

☆◢████☆██◣．∴天氣冷了,☆

◢■◤█████◥█◣．送你一件毛衣,*★

◥◤∴█████．◥◤∵小心別著涼了！━┛

*☆∵ ▁▂▄▂▁．★∵∴☆．★∵∴

∴★◢█████◣*☆．∴★∵★*☆

☆◢████☆██◣．∴天氣冷了,☆

◢■◤█████◥█◣．送你一件毛衣,*★

◥◤∴█████．◥◤∵小心別著涼了！┛

上例中的表现效果如下图2-8所示：

图片8.png (32.78 KB, 下载次数: 0)

2017-8-11 15:50 上传

图2-8

从图2-8中便可以看出用p和用pre所包含元素的展示效果的区别。通常有pre元素包含代表预格式化的文本，可以让用户的浏览器的空白不动，用一种固定样式展示文本，停用自动的单词换行。以此来保证按照原样来展示预格式化文本。1.1.6.图像img

img元素用于在网页中插入图像。

格式：

其中src(图像文件名及路径)属性和alt(替换文本)属性是必须的。

l src属性

src属性指加载图像的路径，路径可以是绝对路径，也可以是相对路径。通常我们会为站点中的图片创建独立的目录，如新建文件夹名为images或img，将图片存放在相应的文件夹中，方便管理与调用。

l alt属性

alt属性用于指定图像的替换文本，以防止用户因图像加载失败等原因无法看到图像时可以看到替换的文字。因此alt属性的值必须能够准确地描述图像。例如：

效果如图2-9所示：

图片9.png (121.8 KB, 下载次数: 0)

2017-8-11 15:50 上传

图2-9

当图片不存在，或加载失败时，图片区域会显示alt属性里的内容。为了避免因为图片加载失败而导致用户无法得知图片展示内容，以及便于搜索引擎抓取信息，alt属性应尽可能填写。当图片加载失败时，效果如下图2-10：

图片10.png (705 Bytes, 下载次数: 0)

2017-8-11 15:50 上传

图2-10