下载掌阅APP，畅读海量书库
立即打开
2.2 HTML文档常用标签 |
|
HTML标记标签通常称为HTML标签（HTML tag），是由尖括号包围的关键词，比如<html>。HTML标签通常是成对出现的，比如<b>和</b>。标签对中的第一个标签是开始标签，第二个标签是结束标签。开始和结束标签也称为开放标签和闭合标签。
2-2 HTML5 文档头部head标签
<head>标签用来封装其他位于文档头部的标签，放在文档的开始处，紧跟在<html>标签后面，并处于<body>标签之前。不论是<head>标签还是相应的结束标签</head>，都可以清楚地被浏览器推断出来。<head>标签中包含文档的标题、样式定义和文档名等信息，大多数浏览器都希望在<head>标签中找到关于文档的附加信息。此外，<head>标签还可以包含搜索工具和索引所要的其他信息的标签。head区是指首页html代码的<head>和</head>之间的内容，所以<head>标签是必须加入的标签。
HTML的<body>标签界定了文档的主体。<body>标签和其结束标签</body>之间的所有部分都称为主体内容，包括文字、图片、链接、表格、表单等。<body>标签有很多自身的属性，如定义页面文字的颜色、背景的颜色、背景图片等，见表2-1。
表2-1 <body>标签的属性
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-5 图像标签
网页中插入图片用单标签<img>，当浏览器读取到<img>标签时，就会显示此标签的src属性所设定的图像。如果要对插入的图片进行修饰，仅用这一个属性是不够的，还要配合其他属性来完成。<img>标签属性见表2-4。
表2-4 <img>标签属性
（续）
示例如下。
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 嵌套列表
在网页中，表格是一种很常见的对象，通过表格可以使要表达的内容更加简洁明了，下面介绍如何使用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-8 超级链接标签
超链接是网页互相联系的桥梁，可以看作是一个“热点”，通过它可以从当前网页定义的位置跳转到其他位置，包括当前页的某个位置及Internet、本地硬盘或局域网上其他文件，甚至可以跳转到声音、图像等多媒体文件。
根据目标文件的不同，超链接可分为页面超链接、锚点超链接、电子邮件超链接等；根据单击对象的不同，超链接可分为文字超链接、图像超链接、图像映射等。
根据目录文件与当前文件的目录关系，创建内部超链接有4种写法。注意，应该尽量采用相对路径。
（1）链接到同一目录中的网页文件
目标文件名是链接所指向的文件，链接到同一目录内的网页文件的语句格式：
（2）链接到下一级目录中的网页文件
链接到下一级目录中网页文件的语句格式：
（3）链接到上一级目录中的网页文件
链接到上一级目录中网页文件的语句格式：
（4）链接到同级目录中的网页文件
链接到同级目录中网页文件，要先退到上一级目录中，然后再进入目标文件所在的目录，语句格式：
在设计网页时，控制好各个模块在页面中的位置是非常关键的，在CSS排版的页面中，<div>标签起到至关重要的作用。
<div>（division）标签简单而言就是一个区块标签，即<div></div>标签对之间相当于一个容器，可以容纳段落、标题、图片、表格，甚至章节、摘要、标注等各类HTML标签。