HTML常用标签_1.2 HTML常用标签

1.2 HTML常用标签

下面就介绍一下HTML中的常用标签。

1.2.1 ＜html＞…＜/html＞

掌握HTML必须了解＜html＞元素，这个元素标示网页内容的起始，＜/html＞元素则表明网页内容的终结，这两个元素必须配套使用，一个都不能少。

最外层包含所有文本和标签的是＜html＞和＜/html＞，这表明文档是用超文本标识语言编写的。实际上，当前主流浏览器能够自动识别HTML文档，无需＜html＞标签，也不会对其进行任何处理。为了应对浏览器持续的变化，编写HTML文档时，应当坚持使用完整的这对标签，不能省略。

1.2.2 ＜head＞…＜/head＞

头部＜head＞…＜/head＞属于HTML文件的起始部分，里面放置文档的标题＜title＞…＜/title＞等内容，同时容纳脚本代码＜＞…＜/＞，具体情况如图1-14所示。

图1-14 ＜head＞…＜/head＞标签

1.2.3 ＜body＞…＜/body＞

HTML文档的核心构成部分＜body＞…＜/body＞里面，囊括了多种元素，例如＜table＞…＜/table＞表格，＜a href＞…＜/a＞超链接，＜br＞换行，以及＜hr＞水平线等，如图1-15所示。这个部分所编写的文字和图片，最终会由浏览器呈现出来。

图1-15 ＜body＞…＜/body＞标签

1.2.4 ＜title＞…＜/title＞

＜title＞…＜/title＞用来标示网页的标题，这个标题会出现在浏览器顶部的标题栏里，参照图1-16，需要展示的文字应该写在＜title＞和＜/title＞这两个标签之间。

图1-16 网页标题

温馨提示

＜title＞…＜/title＞必须处在＜head＞…＜/head＞标记范围之内，否则无法生效。

1.2.5 ＜hn＞…＜/hn＞

常规文本通常包含主标题、辅助标题、章节划分等组织形式，网页标记语言同样具备对应的标题元素＜hn＞，其中n代表标题的层级级别。网页标记语言一共设定了六个层级规格的标题，n值越小，标题文字的尺寸就越是醒目，接下来将逐一展示各个层级的标题编写规范。

HTML代码如下。

把这段文字存为HTML文档，然后用浏览器打开，如图1-17那样，能看出每个标题的字都变粗了，＜hn＞…＜/hn＞这些标签会另起一行，文字内容两边都加上了空行。

图1-17 标题

1.2.6 ＜br＞

根据HTML语言规范，每当屏幕尺寸减小时，浏览器会自动把右侧的文字移到下一行显示。因此，在需要换行的位置，应该加入＜br＞换行标记。＜br＞是一种独立标签，无论放置在任何地方，都能实现强制换行，例如接下来的HTML代码。

把这段文字存为网页文件，再用浏览器打开，就能看到图1-18的那个样子。

图1-18 未换行

以上代码如使用换行标签则如下。

把前面那段程序代码再次存为网页文档，接着用网页浏览器来查看，呈现的界面如图1-19那样。

图1-19 强制换行

1.2.7 ＜p＞…＜/p＞

为了让文件在浏览器呈现时布局规整，文字部分常借助＜p＞…＜/p＞进行界定。段落起始需用＜p＞标示，段落终止则通过＜/p＞完成。＜/p＞标签有时可以省略，因为新段落的开启即代表旧段落的终结。

＜p＞标签包含一个属性用于设定文本排列方向，该属性名为align，其取值包括三种情况，分别是居中、左对齐和右对齐，居中指内容居中展示，左对齐指内容向左排列，右对齐指内容向右排列。

下面举例说明＜p＞标签的用法。

这段代码应当被存储为HTML文档，接着在浏览器中启动它，如图1-20所展示的那样。

图1-20 对齐方式

1.2.8 ＜hr＞

这个标记能在界面上生成一条横线，用来区分页面的不同区域。＜hr＞属于自闭合标签，带有四个参数，分别是大小、宽度、对齐方式和，其具体作用如下。

size：水平线的粗细。

水平线的尺寸，以屏幕宽度的百分比或像素值体现。

水平方向的对齐模式，包含左对齐，右对齐，居中对齐这三种形式。

：线段无阴影属性，为实心线段。

下面用几个例子来说明＜hr＞标签的用法。

1． 标签＜hr＞线段粗细的设定

HTML代码如下。

将上述代码储存为HTML文档，接着用网络浏览器查看，参照图1-21。

图1-21 设置线段粗细

2． 标签＜hr＞线段长度的设定

HTML代码如下。

将这段代码储存为HTML文档，接着用网络浏览器查看，参照图1-22的展示效果。

图1-22 设置线段长度

3． 标签＜hr＞线段对齐方式的设定

HTML代码如下。

将这段代码存为HTML文档，随后在浏览器中查看，参照图1-23。

1.2.9 ＜font＞…＜/font＞

这个＜font＞…＜/font＞标记主要用来调整文本的表现形式，例如可以设定字的大小、字体的类型以及字体的色彩等。

图1-23 设置线段对齐方式

1． 设置文字字号

＜font＞标签具备一个属性用以调整字体尺寸，该属性名为size。若要设定文字大小，需在size属性中赋予相应的数值。此属性的可取数值介于1到7之间。通常情况下，默认的字号大小为3。此外，还可以在size属性的数值前附加正负号，以此实现相对于基础字号的放大或缩小效果。

示例代码如下。

将这段代码储存为HTML文档，接着用网络浏览器查看，呈现的界面如图1-24所示。

2． 设置文字的字体与样式

＜font＞标记包含一个叫作face的参数，这个参数用来指定文本的字体样式，参数值能够代表各种不同的字体种类，不过前提是接收方的电脑上必须安装了该字体，否则无法确保浏览器能准确呈现原本设定的字体外观。

face属性的语法标签如下。

＜font face="字体"＞

示例代码如下。

图1-24 设置文字字号

将这段代码存为HTML文档，接着用浏览器查看，参照图1-25。

图1-25 设置文字的字体与样式

为了使文本呈现多样性，或者突出特定内容，HTML设定了若干元素达成此目标，现将常见元素介绍如下。

＜B＞…＜/B＞：将字体显示为黑体。

＜I＞…＜/I＞：将字体显示为斜体。

＜U＞…＜/U＞：将字体显示为加下划线。

＜TT＞…＜/TT＞：将字体显示为打字机字体。

＜BIG＞…＜/BIG＞：将字体显示为大型字体。

＜SMALL＞…＜/SMALL＞：将字体显示为小型字体。

＜BLINK＞…＜/BLINK＞：将字体显示为闪烁效果。

＜EM＞…＜/EM＞：强调，一般为斜体。

＜＞…＜/＞：特别强调，一般为粗体。

＜CITE＞…＜/CITE＞：用于引证、举例，一般为斜体。

示例代码如下。

将这段文字存为网页文件，再用浏览器查看，参照图1-26的样子。

图1-26 各种字体效果

3． 设置字体的颜色

＜font＞标记具备一个名为color的参数，借助该参数能够变更文本的色调，此参数的具体用法规定如下。

＜font color=value＞…＜/font＞

这个数值可以是一个以#开头的六进制数字，或者是十六种色彩中的任意一种叫法。