购买
下载掌阅APP,畅读海量书库
立即打开
畅读海量书库
扫码下载掌阅APP

1.2 HTML常用标签

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

1.2.1 <html>…</html>

学习HTML当然不能少了<html>标签,<html>标签用来标识HTML文档的开始,</html>则用来标识HTML文档的结束,两者成对出现,缺一不可。

<html>、</html>在文档的最外层,文档中的所有文本和HTML标签都包含在其中,它表示该文档是以超文本标识语言编写的。事实上,现在常用的浏览器都可以自动识别HTML文档,并不要求有<html>标签,也不对该标签进行任何操作。但是为了使HTML文档能够适应不断变化的浏览器,还是应该养成不省略这对标签的良好习惯。

1.2.2 <head>…</head>

<head>…</head>是HTML文档的头部部分,包含文档的标题如<title>…</title>、脚本代码<script>…</script>,如图1-14所示。

图1-14 <head>…</head>标签

1.2.3 <body>…</body>

<body>…</body>是HTML文档的主体部分,包含表格<table>…</table>、超链接<a href>…</a>、换行<br>、水平线<hr>等许多标签,如图1-15所示。<body>…</body>中所定义的文本和图像将通过浏览器显示出来。

图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>

一般文章都有标题、副标题、章和节等结构,HTML中也提供了相应的标题标签<hn>,其中n为标题的等级。HTML总共提供6个等级的标题,n越小,标题字号就越大,下面列出所有等级的标题格式。

HTML代码如下。

将以上代码保存为HTML文件,然后使用浏览器打开,结果如图1-17所示。可以看出,每一个标题的字体都为加粗体,<hn>…</hn>标签具有换行的效果,内容文字前后都插入了空行。

图1-17 标题

1.2.6 <br>

在HTML语言规范里,每当浏览器窗口被缩小时,浏览器会自动将右边的文字转至下一行。所以,在需要换行的地方,应加上<br>换行标签。<br>为单标签,不管放在什么位置,都能够强制换行,比如下面的HTML代码。

将以上代码保存为HTML文件,然后使用浏览器打开,效果如图1-18所示。

图1-18 未换行

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

再次把以上代码保存为HTML文件,然后使用浏览器打开,效果如图1-19所示。

图1-19 强制换行

1.2.7 <p>…</p>

为了使文档在浏览器中显示时排列得整齐、清晰,在文字段落之间通常用<p>…</p>来做标记。文字段落的开始由<p>来标记,段落的结束由</p>来标记。标签</p>是可以省略的,因为下一个<p>的开始就意味着上一个<p>的结束。

<p>标签还有一个属性align,它用来指明字符显示时的对齐方式,一般有center、left、right 3种。center表示居中显示文档内容,left表示靠左对齐显示文档内容,right则表示靠右对齐显示文档内容。

下面举例说明<p>标签的用法。

将这段代码保存为HTML文件,然后用浏览器打开,如图1-20所示。

图1-20 对齐方式

1.2.8 <hr>

这个标签可以在屏幕上显示一条水平线,用以分割页面中的不同部分。<hr>也是单标签,有4个属性,分别是size、width、align和noshade,具体含义如下。

● size:水平线的粗细。

● width:水平线的长,用占屏幕宽度的百分比或像素值来表示。

● align:水平线的对齐方式,有left、right、center 3种。

● noshade:线段无阴影属性,为实心线段。

下面用几个例子来说明<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属性就能设置字号大小。size属性的有效值范围为1~7,其中默认值为3。还可以在size属性值之前加上+、-字符,来指定相对于字号初始值的增量或减量。

示例代码如下。

把以上代码保存为HTML文件,然后使用浏览器打开,效果如图1-24所示。

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

<font>标签有一个属性face,用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>:强调,一般为斜体。

● <STRONG>…</STRONG>:特别强调,一般为粗体。

● <CITE>…</CITE>:用于引证、举例,一般为斜体。

示例代码如下。

把以上代码保存为HTML文件,然后使用浏览器打开,如图1-26所示。

图1-26 各种字体效果

3. 设置字体的颜色

<font>标签有一个属性color,通过color属性可以调整文字的颜色,color属性的语法如下。

<font color=value>…</font>

这里的颜色值可以是一个十六进制数(用#作为前缀)的色标值,也可以是16种颜色的名称。 z3lvCMvd/R6YPu8QsjhJ/KUra1kRWLrKhyoA5c0l9QoaXaiS6wnIIahVMtVDIL3H

点击中间区域
呼出菜单
上一章
目录
下一章
×