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

2.2 HTML文档常用标签

HTML标记标签通常称为HTML标签(HTML tag),是由尖括号包围的关键词,比如<html>。HTML标签通常是成对出现的,比如<b>和</b>。标签对中的第一个标签是开始标签,第二个标签是结束标签。开始和结束标签也称为开放标签和闭合标签。

2.2.1 <head>标签

2-2 HTML5 文档头部head标签

<head>标签用来封装其他位于文档头部的标签,放在文档的开始处,紧跟在<html>标签后面,并处于<body>标签之前。不论是<head>标签还是相应的结束标签</head>,都可以清楚地被浏览器推断出来。<head>标签中包含文档的标题、样式定义和文档名等信息,大多数浏览器都希望在<head>标签中找到关于文档的附加信息。此外,<head>标签还可以包含搜索工具和索引所要的其他信息的标签。head区是指首页html代码的<head>和</head>之间的内容,所以<head>标签是必须加入的标签。

2.2.2 <body>标签

HTML的<body>标签界定了文档的主体。<body>标签和其结束标签</body>之间的所有部分都称为主体内容,包括文字、图片、链接、表格、表单等。<body>标签有很多自身的属性,如定义页面文字的颜色、背景的颜色、背景图片等,见表2-1。

表2-1 <body>标签的属性

2.2.3 文字与段落相关标签

2-3 标题与段落标签

常用的文字与段落标签有以下几种。

1.标题标签<hn>

通常文章都包括标题、副标题、章和节等结构,关于标题,HTML中也提供了相应的标题标签<H n >,其中 n 为标题的等级,HTML共提供了6个等级的标题, n 值越小,标题字号就越大,如下示例定义一级、二级、三级和四级标题:

2.换行标签<br>

在编写HTML文件时,不必考虑太细致的设置,也不必理会段落过长的部分是否会被浏览器切掉。因为,在HTML语言规范里,每当浏览器窗口被缩小时,浏览器会自动将右边的文字转折至下一行。开发者要想自己换行,应在需要换行的地方加上<br>标签。

3.段落标签<p>

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

<p>标签还有一个属性align,用来指明段落文字的对齐方式,属性值有left、center、right三种,即左对齐、居中对齐和右对齐。<p>标签的属性见表2-2。

表2-2 <p>标签的属性及说明

(续)

4.水平分隔线标签<hr>

<hr>标签是单独使用的标签,是水平分隔线标签,定义显示有阴影效果的水平线(这是默认的)用于段落与段落之间的分隔,使文档结构清晰明了,使文字的编排更整齐。通过设置<hr>标签的属性值,可以控制水平分隔线的样式。如<hr color="red">,通过设置color属性设置了水平分隔线的颜色。

5.特殊字符

2-4 特殊字符标签

在HTML文档中,有些字符无法直接显示出来,例如版权标志©。使用特殊字符可以将键盘上没有的字符表达出来,而有些HTML文档的特殊字符(如<等)在键盘上虽然可以得到,但浏览器在解析HTML文档时会报错,为防止代码混淆,必须用一些代码来表示它们,这时可以用字符代码来表示,也可以用数字代码来表示。HTML常见特殊字符及相应字符代码见表2-3。

表2-3 HTML常见特殊字符及其代码

2.2.4 图像标签

2-5 图像标签

网页中插入图片用单标签<img>,当浏览器读取到<img>标签时,就会显示此标签的src属性所设定的图像。如果要对插入的图片进行修饰,仅用这一个属性是不够的,还要配合其他属性来完成。<img>标签属性见表2-4。

表2-4 <img>标签属性

(续)

示例如下。

2.2.5 列表相关标签

2-6 列表标签

1.无序列表<ul>

无序列表指没有进行编号的列表,使用<ul>和</ul>标签对标记,每一个列表项前使用<li>标记。<li>的属性type有3个选项:disc表示实心圆;circle表示空心圆;square表示小方块。

标签<ul>及<li>如果不使用type属性,默认情况下的<ul>会加“实心圆”。

基本格式:

2.有序列表<ol>

有序列表和无序列表的使用格式基本相同,它使用标签对<ol>和</ol>标记,每一个列表项前使用<li>标记。有序列表带有标记前后顺序之分的编号,如果插入或删除一个列表项,编号会自动调整。

顺序编号的设置是由<ol>标记的type和start两个属性来完成的。start=编号开始的数字,如start=2表示编号从2开始,如果从1开始可以省略。在<li>标签中设定value="n"可以改变列表行项目的特定编号,例如<li value="7">。type=用于设置编号的数字、字母的类型,如type=a,则编号用英文字母。有序列表的type属性见表2-5。

表2-5 有序列表的type属性

基本语法:

3.嵌套列表

将一个列表嵌入另一个列表中,作为另一个列表的一部分,称为嵌套列表。无论是有序列表的嵌套还是无序列表的嵌套,浏览器都可以自动分层排列。

【例2-2】 嵌套列表代码如下。

页面效果如图2-5所示。

图2-5 嵌套列表

2.2.6 表格相关标签

在网页中,表格是一种很常见的对象,通过表格可以使要表达的内容更加简洁明了,下面介绍如何使用HTML实现表格的制作。

1.表格的基本结构

2-7 表格的使用

用HTML制作表格的基本结构:

表格的<table>标签属性见表2-6。

表2-6 <table>标签属性

构建一个简单的表格示例代码如下,显示效果如图2-6所示。

图2-6 表格的浏览效果

<tr></tr>标签对用来创建表格中的行,只放在<table></table>标签对之间使用。<td></td>标签对用来创建表格每行中的单元格,只有放在<tr></tr>标签对之间才有效,输入的文本只有在<td></td>标签对中才能够显示出来。<table></table>、<tr></tr>、<td></td>标签对的关系见表2-7。

表2-7 <table></table>、<tr></tr>、<td></td>标签对的关系

2.表格的尺寸设置

一般情况下,表格的长度和宽度是根据各行长度和各列宽度的总和自动调整的,如果要直接设置固定大小,HTML代码为:

width和height属性分别指定表格的固定宽度和高度,n1和n2可以用像素来表示,也可以用百分比来表示。

例如创建一个宽为200像素、高为100像素的表格,代码表示为<table width="200" height="100">。

例如创建一个宽为20%、高为10%的表格,代码表示为<table width="20%" height="10%">。

3.表格中文字的排列与合并

表格中文字的排列方式有两种,分别是左右排列和上下排列。左右排列用align属性来设置,而上下排列则由valign属性来设置。左右排列的位置可分为居左(left)、居中(center)、居右(right)3种;上下排列基本上比较常用的有上齐(top)、居中(center)、下齐(bottom)和基线(baseline)4种。

设置<td>标签的colspan属性用来设置表格的单元格跨占的列数(默认值为1)。

设置<td>标签的rowspan属性用来设置表格的单元格跨占的行数(默认值为1)。

单元格合并的示例代码如下,显示效果如图2-7所示。

图2-7 表格合并的显示效果

2.2.7 超链接相关标签

2-8 超级链接标签

超链接是网页互相联系的桥梁,可以看作是一个“热点”,通过它可以从当前网页定义的位置跳转到其他位置,包括当前页的某个位置及Internet、本地硬盘或局域网上其他文件,甚至可以跳转到声音、图像等多媒体文件。

根据目标文件的不同,超链接可分为页面超链接、锚点超链接、电子邮件超链接等;根据单击对象的不同,超链接可分为文字超链接、图像超链接、图像映射等。

根据目录文件与当前文件的目录关系,创建内部超链接有4种写法。注意,应该尽量采用相对路径。

(1)链接到同一目录中的网页文件

目标文件名是链接所指向的文件,链接到同一目录内的网页文件的语句格式:

(2)链接到下一级目录中的网页文件

链接到下一级目录中网页文件的语句格式:

(3)链接到上一级目录中的网页文件

链接到上一级目录中网页文件的语句格式:

(4)链接到同级目录中的网页文件

链接到同级目录中网页文件,要先退到上一级目录中,然后再进入目标文件所在的目录,语句格式:

2.2.8 DIV标签

在设计网页时,控制好各个模块在页面中的位置是非常关键的,在CSS排版的页面中,<div>标签起到至关重要的作用。

<div>(division)标签简单而言就是一个区块标签,即<div></div>标签对之间相当于一个容器,可以容纳段落、标题、图片、表格,甚至章节、摘要、标注等各类HTML标签。 sS4fs6Hr26rL0gzNLHhA6R8Fd/pv15xkdbHVyftL1BRBsdsBNKj6HxVfCJPG2MQu

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