文字样式标记
设置字体样式的基本标签是<font></font>，主要是设置文字的字体、字号、颜色等属性。HTML5已经不支持<font>标记，可以用CSS来代替。
<font>标记语法格式如下。
<font face="" size=""color=""></font>
下面的代码定义了楷体、4号、红色字体。
<font face="楷体" size="4"color="#ff0000">代码</font>
特殊文字样式标记
HTML的一些元素可以定义字体信息，如粗体、斜体等。这些元素实现的效果都是可以叠加的。
l 斜体标记<i>...</i>，浏览器将包含其中的文本以斜体字或者倾斜字体显示。
l 强调斜体标记<em>...</em>，浏览器把其中的文本表示为强调的内容。
l 加粗标记<b>...</b>，浏览器将包含其中的文本加粗显示。
l 强调加粗<strong>...</strong>，浏览器把其中的文本用于强调文本，但它强调的程度更强一些。
l 下划线标记<u>...</u>，浏览器将包含其中的文本添加下划线。
l 删除线标记<del>...</del>，浏览器将定义文档中已被删除的文本。
l 水平分隔线标记<hr/>，标签在 HTML 页面中创建一条水平线。
l 下标标记<sub>...</sub>,标记对中的内容将会以当前文本流中字符高度的一半来显示，但是与当前文本流中文字的字体和字号都是一样的
l 引用标记<cite></cite>，表示它所包含的文本对某个
参考文献的引用。
段落标记
不论是普通文档，还是在网页文字中，合理地使用段落会使文字显示更加美观，表达的内容也更为清晰。
l 段落标记标记<p>...</p>，在标记对中的内容会显示在一个段落里。利用此标记可以对网页中的文字进行段落的结构定义，但不能进行段落格式的定义。
l 换行标记<br/>，文档中插入一个简单的换行符，标记后的内容会换至下一行编辑。
示例 1-3 运用HTML标记及属性修饰页面，实现一个文字为主的网页。
示例 1-1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>中国的介绍</title>
</head>
<body>
<h3>中国的介绍</h3>
<hr/>
<font color="#0000ff"><b>1、中国的起源是什么时候?</b></font><br/>
中国是世界四大文明古国之一，有着悠久的历史，距今约5000年前，以中原
地区为中心开始出现聚落组织进而成国家和朝代，后历经多次演变和朝代更迭。20世纪初辛亥革命后，
君主政体退出历史舞台，共和政体建立。1949年中华人民共和国成立后，在中国大陆建立了人民代表大
会制度的政体。<br/>
<hr/>
<font color="#0000ff"><b>2、中国的文化是怎样的？</b></font><br/>
中国文化博大精深，绚烂多彩，是东亚文化圈的主体，在世界文化体系内占
有重要地位，而且还有有多彩的民俗文化，传统艺术形式有诗词、戏曲、书法和国画等，而春节、元宵、
清明、端午、中秋、重阳等是中国重要的传统节日。<br/>
<hr/>
<fontsize="2"><p><u>版权所有©大连市旅游局</u></p></font>
</body>
</html>
示例 1-3 在浏览器中的显示效果如图 1-4 所示。
图 1-4 文字在IE浏览器中的效果
列表标签
在HTML文件中，除了使用标记对文字进行修饰以外，HTML还可以提供列表，可以对网页文字进行更好的布局和定义。列表项目以项目符号开始，这样有利于将不同的内容分类呈现，将项目有序或无序地罗列显示，并体现出重点。
HTML有三种列表形式：排序列表(Ordered List)；不排序列表(Unordered List)；定义列表(Definition List)。
1.2.1 有序列表
所谓有序列表，就是有顺序的列表，即列表前面带个123或abc什么的。英文单词为“OrderedList”，标签为<ol>...</ol>，作用是在网页中显示一个有顺序的列表。定义有序列表的语法格式如下。
<ol type=""start="">
<li>列表内容</li>
<li>列表内容</li>
<li>列表内容</li>
...
</ol>
默认情况下，有序列表的列表项目目前显示1、2、3等符号，从数字1开始计算。可以使用type属性修改有序列表序号样式，也可以定义strat属性设置序号起始值。type属性的具体取值及说明如表2-1 所示。
|
属性值
|
说 明
|
|
1
|
数字1、2 ...
|
|
a
|
小写字母a、b...
|
|
A
|
大写字母A、B...
|
|
i
|
小写罗马数字i、ii、iii...
|
|
I
|
大写罗马数字I、II、III...
|
表 2-1 有序列表type属性及说明
实例2-2 中定义了2组有序列表，第一组有序列表定了3个列表项，采用默认的列表样式；第二组有序列表定义了3个列表项，type属性值设为3个列表项，type属性值设置为“a”，start属性值设置为“3”，在浏览器中显示的效果如图2-3 所示。
示例 2-2
<!DOCTYPE html>
<html>
<head>
<title>列表标签</title>
<metacharset="utf-8">
</head>
<body>
<!--有序列表默认样式-->
<ol>
<li>这里写列表内容</li>
<li>这里写列表内容</li>
<li>这里写列表内容</li>
<li>这里写列表内容</li>
</ol>
<!--修改有序列表样式-->
<oltype="a" start="2">
<li>这里写列表内容</li>
<li>这里写列表内容</li>
<li>这里写列表内容</li>
<li>这里写列表内容</li>
</ol>
</body>
</html>
图 2-3 有序列表浏览器中的效果
1.2.2 无序列表
所创建定义无序列表需使用无序列表标记符<ul></ul>和列表项标记符<li></li>。与ol标记符类似，ul标记符也包含一个常用的type属性，用于控制列表项前特殊符号的显示。同时，无序列表中的li标记符也具有相同的type属性。定义有序列表的语法格式如下。
<ul type=""start="">
<li>列表内容</li>
<li>列表内容</li>
<li>列表内容</li>
...
</ul>
默认情况下，无序列表的列表项目目前显示黑心实心圆点。可以使用type属性修改无序列表序号样式，也可以定义strat属性设置序号起始值。type属性的具体取值及说明如表2-4 所示。
|
属性值
|
说 明
|
disc
|
实心圆点（默认）
|
|
circle
|
空心圆圈
|
|
Square
|
方形
|
表 2-4 无序列表type属性及说明
示例2-5 中定义了2组无序列表，第一组有序列表定了3个列表项，采用默认的列表样式；第二组有序列表定义了3个列表项，type属性值设为3个列表项，type属性值设置为“circle”，在浏览器中显示的效果如图2-6 所示。
示例 2-5
<!DOCTYPE html>
<html>
<head>
<title>列表标签</title>
<metacharset="utf-8">
</head>
<body>
<!--有序列表默认样式-->
<ul>
<li>这里写列表内容</li>
<li>这里写列表内容</li>
<li>这里写列表内容</li>
<li>这里写列表内容</li>
</ul>
<!--修改有序列表样式-->
<ultype="circle">
<li>这里写列表内容</li>
<li>这里写列表内容</li>
<li>这里写列表内容</li>
<li>这里写列表内容</li>
</ul>
</body>
</html>
图 2-6 无序列表浏览器中的效果
1.2.3 自定义列表
自定义列表不是一个项目的序列，它是一系列项目和它们的解释。自定义列表以<dl>标记开始，自定义列表项目以<dt>开始，自定义列表的解释以<dd>开始。自定义列表的语法格式如下。
<dl>
<dd>我是自定义列表的dd，我有什么效果呢？</dd>
<dt>我是自定义列表的dt，我有什么效果呢？</dt>
<dt>我是自定义列表的dt，我有什么效果呢？</dt>
<dt>我是自定义列表的dt，我有什么效果呢？</dt>
</dl>
<dt>标记定义了组成列表项的名称部分，此标记只能在<dl>标记中使用。<dd>用于解释说明<dt>标记所定义的项目，此标记只能用在<dl>标记中使用。示例2-7
定义了自定义列表，效果如图2-8 所示。
示例 2-7
<!DOCTYPE html>
<html>
<head>
<title>列表标签</title>
<metacharset="utf-8">
</head>
<body>
<!--自定义列表项样式-->
<dl>
<dt>用户名<dd>8-15个字符，需以字母开头
<dt>密码<dd>6-11个字符，区分大小写
</dl>
</body>
图 2-8 自定义浏览器中的效果
1.3 HTML 超链接
所谓的超链接是指从一个网页指向一个目标的 连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。而在一个网页中用来超链接的对象，可以是一段文本或者是一个图片。
1.3.1 超链接标记
在HTML文件中，超链接通常使用标记<a>来定义，具体链接对象通过标记中herf属性来设置。通常，可以将当前文件称为链接源，herf的属性值是目标文件。定义超链接的语法格式如下。
<a href="url" target="target-windows">链接标题</a>
链接标题可以是文字、图像或其他网页元素。
l href属性定义了链接标题所指向的目标文件的URL的地址。
l target属性指定用于打开链接的目标窗口，默认方式是原窗口，其属性值如表3-1所示。
|
属性值
|
说 明
|
|
parent
|
当前窗口的上级窗口（一般在框架中使用）
|
blank
|
在新窗口中打开
|
self
|
在同一窗口中打开，和默认值一样
|
top
|
在浏览器的整个窗口中打开
|
表 3-1 超链接属性target的值及说明
下面的代码为文字“打开百度”定义了超链接。网页在浏览器中加载后，用鼠标单击文字标题“打开百度”，就可以在当前窗口打开百度网站的页面。
<a href="http://www.baidu.com">打开百度</a>
在HTML文件中，超链接通常使用标记<a>来定义，具体链接对象通过标记中herf属性来设置。通常，可以将当前文件称为链接源，herf的属性值是目标文件。定义超链接的语法格式如下。
1.3.2 超链接类型
按照链接路径的不同,网页中超链接一般分为3种类型: 内部链接,外部链接和书签链接。内部链接指的是一个网站内部文件之间的链接；外部链接是指网站内的文件链接到站点外的文件；书签链接是在一个文档内部的链接，适用于文档比较长的情况。
1、内部链接
将超链接标记<a>中的href属性的URL值设置为相对路径，就可以在HTML文件中定义内部超链接。
2、外部链接
外部链接指网页中的链接标题可以链接到网站外部的文件，需要定义外部链接时，在超链接标记<a>中，将它的href属性设置为绝对路径即可。
3、书签链接
如果有的网页内容特别多，需要不断翻页才能看到想要的内容，这时，可以在页面中定义一些书签链接。这里的书签相当于方便浏览者查看的目录，单机书签即可跳转到相应的内容。
在使用书签链接之前，首先要建立称为“锚记”的链接目标地址，格式如下。
<a name="anchorname"></a>
在超级链接部分，指明用户定义的锚点名称，即可链接到指定的位置。
示例3-2中包含了内部链接和外部链接，分别添加了外部链接，单击链接标题或链接源图像时，浏览器会跳转到目标站点的网页上。而关于我们是内部链接，链接地址是站点内所在文件夹下面的文件。显示结果如图3-3所示。
示例 3-2
<!DOCTYPE html>
<html>
<head>
<title>链接示例</title>
<metacharset="utf-8">
</head>
<body>
合作伙伴：
<ahref="http://www.baidu.com">百度</a>
<a href="http://www.jd.com">新浪</a>
<a href="http://www.baidu.com"><imgsrc="./jdlogo.png"/></a></br>
<ahref="../web/about.html">关于我们</a>
</body>
</html>
图 3-3 链接示例
1.3.3 超链接路径
HTML文件中提供了3种路径——绝对路径、相对路径、根路径。
1. 绝对路径
2. 相对路径
相对路径是指相对于当前文件的路径，它包含了从当前文件指向目的文件的路径，适用于网站的内部链接。只要是在站点文件夹内，即使不属于同一个文件目录下，相对路径建立的链接也适用。
表3-4所示为相对路径的使用方法。
|
相对位置
|
输入方式
|
举 例
|
|
同一目录
|
直接输入要链接的文档名
|
index.html
|
|
链接上一目录
|
先输入“../”,再输入目录名
|
../images/pic1.jpg
|
|
链接下一目录
|
先输入目录名，后加入“/”
|
videos/v1.mov
|
表 3-4 相对路径的使用方法
3. 根路径
根路径的设置以“/”开头，后面紧跟文件路径，例如：/download/index.html。根路径的设置也适用于内部链接的建立，一般情况下不使用根路径。
HTML规范化
不规范的写法
<h1>这是一个标题
<p>这是一个段落 abcd
<A href="index.html">index.html</A>
标准写法
1.html元素必须小写
<A href=""></A> 执行成功但是代码书写不规范 正确写法 <a href=""></a>
2.html元素必须正确嵌套
<h1><p></h1></p> 执行成功但是代码书写不规范 正确写法 <h1><p></p></h1>
3.html元素始终关闭
<p> <br> 执行成功但是代码书写不规范 正确写法 <p></p><br/>
4.html文档必须有一个根元素
例如 body head html都要有 执行成功但是代码书写不规范
属性元素语法规则
html属性必须使用小写
html属性值必须用引号包裹
html属性省略也是禁止的
多媒体文件标记
网页中的多媒体文件除了图像和声音以外，还包括音频和视频文件以及FLASH文件等。音频文件常用格式有MP3、MID和WAV等，视频文件常用格式有MOV、AVI、ASP以及MPEG等。要在网页中插入这些文件就要使用<embel>标记，利用<embel>标记可直接调用多媒体文件。<embel>标记在HTML在HTML支持全局属性和事件属性，语法格式如下。
<embed src="" width="" height=""autostart="" loop=""></embed>
src属性用来指定插入的多媒体文件的地址或多媒体文件名，文件名一定要加上扩展名;width属性用于设置多媒体文件的宽度，height属性用于设置多媒体文件的高度，均用数字表示，单位为像素;autostart属性用于设置多媒体文件是否自动播放，有true和false两个取值，true表示在打开网页时自动播放多媒体文件，false是默认值，表示打开网页时不自动播放;loop属性用于设置多媒体文件是否循环播放，有true和false两个取值，true表示无限循环播放多媒体文件，false为默认值，表示只播放一次。
下面分别展示在网页中插入Flash动画、音频文件和视频文件，来说明标记<embed>的用法。
1. 插入Flash动画
示例4-9在网页中插入了FLASH动画“flash.swf”，并设置该动画显示宽度为200像素。
示例 4-7
<!DOCTYPE html>
<html>
<head>
<title>添加图片、替代文字示例</title>
<metacharset="utf-8">
</head>
<body>
<imgsrc="" width="" height="" alt="风景图片" />
</body>
</html>
2. 插入音频
示例4-9在网页中插入了FLASH动画“flash.swf”，并设置该动画显示宽度为200像素。
示例 4-7
<!DOCTYPE html>
<html>
<head>
<title>添加图片、替代文字示例</title>
<metacharset="utf-8">
</head>
<body>
<imgsrc="" width="" height="" alt="风景图片" />
</body>
</html>
3. 插入视频
示例4-9在网页中插入了FLASH动画“flash.swf”，并设置该动画显示宽度为200像素。
示例 4-7
<!DOCTYPE html>
<html>
<head>
<title>添加图片、替代文字示例</title>
<metacharset="utf-8">
</head>
<body>
<imgsrc="" width="" height="" alt="风景图片" />
</body>
</html>
表格是一种常用的HTML页面元素。使用表格组织数据，可以清晰地显示数据间的关系。表格用于网页布局，能将网页分成多个任意的矩形区域，合理地在网页上组织图形和文本。
1.6.1 表格标记
使用成对的<table></table>标记就可以定义一个表格，定义表格常常会用到如表6-1所示的标记。
|
标签
|
说 明
|
|
<table>
|
表格标记
|
|
<tr>
|
行标记
|
|
<td>
|
单元格标记
|
|
<th>
|
表头标记
|
表 6-1 表格常用标记及其说明
表单由<table>标记定义，并包含一个或者多个<tr>、<th>、<td>标记。<tr>标记用于定义表格行，<th>标记用于定义表格头，<td>标记用于定义具体的表格单元格。复杂的表格也可能包含<caption>、<thead>、<tbody>等标记。定义表格的基本语法格式如下。
<table>
<tr>
<td>
</td>
</tr>
</table>
（1）<table></table>用于定义表格，整个表格需包含在<table></table>标记对中。<tr></tr>用来定义表格中的一行，可以通过在<tr>标记中设置属性来修改该行的显示效果。
（2）<th>和<td>用来定义表格，整个表格需包含若干单元格，其中可能会包含两种类型的单元格，对应着两种信息，一种是数据，另一种是头信息。<td>标记和<th>标记就是分别用来创建这两种单元格的。
1.6.2 表格属性
制作网页的过程中为了修饰表格效果，常常需要对表格属性做一些设置。下面对HTML属性的分类介绍。
|
属性名
|
说 明
|
|
width
|
设置表格宽度
|
|
height
|
设置表格宽度
|
|
bordercolor
|
设置表格边框颜色
|
|
bgcolor
|
设置表格的背景颜色
|
|
background
|
设置表格背景图像
|
|
align/valign
|
设置表格对齐方式
|
|
cellspacing
|
设置单元格间距
|
|
cellpadding
|
设置单元格行距
|
|
colspan
|
表示该单元格向右跨越的列数
|
|
rowspan
|
表示该单元格向下跨越的列数
|
表 6-2 表格属性
示例6-3在网页中定义了宽度为400像素的表格，边框粗细为1像素，颜色为蓝色，第一行第一个单元格的宽度为200像素，示例6-3在浏览器中显示的效果如图6-4所示。
示例 6-3
<!DOCTYPE html>
<html>
<head>
<title>table表格标签</title>
<metacharset="utf-8">
</head>
<body bgcolor="yellow">
<tableborder="1" width="400" cellspacing="0" cellpadding="0"align="center">
<caption>
<h4>学生信息</h4>
</caption>
<trbgcolor="red">
<th>曹老师</th>
<th>公开课</th>
<th>VIP</th>
</tr>
<tr>
<tdalign="center">曹老师</td>
<tdalign="left">公开课</td>
<tdalign="right">VIP</td>
</tr>
<tr>
<tdcolspan="2" valign="">2</td>
<tdrowspan="2"></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
图 6-4 表格示例
1.4.3 表格的标签使用
<table>...</table>- 定义表格
<tr> - 定义表行
<th> - 定义表头
<td> - 定义表元(表格的具体数据)
带边框的表格：
<table border>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>
</table>
不带边框的表格：
<table>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>
</table>Food DrinkSweet
表元的背景色彩和背景图象
<th bgcolor=#>
<thbackground="URL">
#=rrggbb 16 进制 RGB 数码, 或者是下列预定义色彩名称：
Black, Olive, Teal, Red,Blue, Maroon, Navy, Gray, Lime,
Fuchsia, White, Green,Purple, Silver, Yellow, Aqua
<table border>
<tr><thbgcolor=ffaa00>Food</th>
<th bgcolor=Red>Drink</th>
<th rowspan=2background="image.gif">Sweet</th>
<tr bgcolor=white><td>A</td><td>B</td>
</table>
表格边框的色彩
<tablebordercolor=#>
<table cellspacing=5border=5 bodercolor=#ffaa00>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>
</table>
表格边框色彩的亮度控制
<table bordercolorlight=#>
<tablebordercolordark=#>
<table cellspacing=5border=5
bordercolorlight=Whitebordercolordark=Maroon>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>
</table>
表格内对齐
<tr align=#>
<th align=#>#=left, center, right
<td align=#>
<table borderwidth=160>
<tr>
<th>Food</th><th>Drink</th><th>Sweet</th>
<tr>
<tdalign=left>A</td>
<tdalign=center>B</td>
<tdalign=right>C</td>
</table>
<tr valign=#>
<th valign=#>#=top, middle, bottom, baseline
<td valign=#>
<table borderheight=100>
<tr>
<th>Food</th><th>Drink</th>
<th>Sweet</th><th>Other</th>
<tr>
<tdvalign=top>A</td>
<tdvalign=middle>B</td>
<tdvalign=bottom>C</td>
<tdvalign=baseline>D</td>
</table>
