---恢复内容开始---
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无序列表</title>
</head>
<body>
这是一个无序列表；
<p>
<ul>
<li>绘制切片并导出
<li>编辑首页
<li>插入图像内容
<li>设置自由延申表格
<li>编辑二级页面并把它另存为模板
</ul>
</p>
</body>
</html>
显示：
建立有序列表（<ol>)
有序列表和项目列表的使用方法基本相同，它使用标记<ol></ol>,每一个列表项前使用<li>。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>有序列表</title>
</head>
<body>这是一个有序列表：
<p>
<ol>
<li>绘制切片并导出</li>
<li>编辑首页</li>
<li>插入图像内容</li>
<li>设置自由延申表格</li>
<li>编辑二级页面并把它另存为模板</li>
</ol>
</p>
</body>
</html>如图所示
3.3HTML标记与HTML属性
通过使用HTML的align属性，如下代码所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本排版</title>
</head>
<body>
<h1 align="center">互联网发展的起源</h1>
<h2 align="right">第1阶段</h2>
<p>1969年……的新纪元。</p>
<h2 align="right">第2阶段</h2>
<p>20世纪……的诞生。</p>
</body>
</html>
注：从上述例子中可以清楚地看出属性的作用。在标记内加入了属性的控制，如"align=center"、"align=left"、"align=right"。"align"就是一个属性，它的作用是控制该标记所包含的文字的显示位置；而“center”、“left”、“right”就是该属性的属性值，用于指明该属性应以什么样的方式来进行控制。align属性不仅可以用于标题标记，也可以用<p>标记。
---恢复内容结束---
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无序列表</title>
</head>
<body>
这是一个无序列表；
<p>
<ul>
<li>绘制切片并导出
<li>编辑首页
<li>插入图像内容
<li>设置自由延申表格
<li>编辑二级页面并把它另存为模板
</ul>
</p>
</body>
</html>
显示：
建立有序列表（<ol>)
有序列表和项目列表的使用方法基本相同，它使用标记<ol></ol>,每一个列表项前使用<li>。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>有序列表</title>
</head>
<body>这是一个有序列表：
<p>
<ol>
<li>绘制切片并导出</li>
<li>编辑首页</li>
<li>插入图像内容</li>
<li>设置自由延申表格</li>
<li>编辑二级页面并把它另存为模板</li>
</ol>
</p>
</body>
</html>如图所示
3.3HTML标记与HTML属性
通过使用HTML的align属性，如下代码所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本排版</title>
</head>
<body>
<h1 align="center">互联网发展的起源</h1>
<h2 align="right">第1阶段</h2>
<p>1969年……的新纪元。</p>
<h2 align="right">第2阶段</h2>
<p>20世纪……的诞生。</p>
</body>
</html>
align属性不仅可以用于标题标记，也可以用<p>标记。
3.3.2 用bgcolor属性设置背景颜色
HTML中，不同的标记会有各自不同的属性，例如在前面曾介绍过的<body>标记，使用它的属性，就可以控制网页的背景以及文字字体的颜色。
例如将<body>一行改为：<body text="blue" bgcolor="#CCCCFF">页面效果如图3.10所示，整个网页的背景和文字颜色发生了变化。
注：其中文字的颜色通过<body>标记的text属性设置，在HTML中已经定义了若干种颜色的名称，比如红色“red”，绿色“green”等，都可直接作为颜色属性的属性值。
3.3.3 设置文字的特殊样式
使用HTML标记和属性，还可以设置文字的样式。
标记 | 显示效果 |
<b></b> | 文字以粗体方式显示 |
<i></i> | 文字以斜体方式显示 |
<u></u> | 文字以加下划线方式显示 |
<s></s> | 文字以加下删除线方式显示 |
<big></big> | 文字以放大方式显示 |
<small></small> | 文字以缩小方式显示 |
<strong></strong> | 文字以加强强调方式显示 |
<em></em> | 文字以强调方式显示 |
<address></address> | 用来显示电子邮件地址或网址 |
<code></code> | 用来说明代码与指令 |
例如将上面的代码修改之后：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本排版</title>
</head>
<body>
<h1 align="center">互联网发展的<i>起源</i></h1>
<h2 align="right">第1阶段</h2>
<p>1969年，为了<b>保障通信</b>联络，美国国防……的新纪元。</p>
<h2 align="right">第2阶段</h2>
<p>20世纪……的诞生</p>
</body>
</html>
3.3.4 设置文字的大小和颜色（<font>)
1.除了可以设置文字的样式，还可以使用<font>标记设置字体相关的属性，<font>标记有3个主要属性，分别用于设置文字的字体，大小和颜色。
2.face属性用于设置文字的字体，例如宋体、楷体等；size属性控制文字的大小，可以取1到7之间的整数值，color属性设置文字的颜色。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本排版</title>
</head>
<body>
<h1 align="center">
<font color="green" face="宋体" size="7">互联网发展的</font><i>起源</i></h1>
<h2 align="right">第1阶段</h2>
<p>1969年，为了<b>保障通信</b>联络，美国国防……的新纪元。</p>
<h2 align="right">第2阶段</h2>
<p>20世纪……的诞生</p>
</body>
</html>
注：如果显示这个页面的浏览器所在的计算机中没有安装相应的字体，浏览器就仍然按照默认的字体显示。
3.4 特殊文字符号
- 如果要显示“x>y"这样一个数学公式，需要用”<“代表符号"<",特殊字符">”代表符号">"；
- 如果超过一个空格，那么从第二个空格开始，都会被忽略掉。如果需要在某处使用空格，就需要使用特殊符号来代替，空格的符号是“ ”；
- 一些符号是无法直接用键盘输入的，也需要这种方式来显示。例如版权符号“©”，需要使用“©”来输入。
例如
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>专业符号</title>
</head>
<body>
<p>x > y</p>m < n ©</body>
</html>
在一些公式中，有时需要以上标或者下标的方式显示了一些文字，这时可以使用如下标记。
- <sup></sup>标记，为上标标记，用于将数字缩小后显示于上方；
- <sub></sub>标记，为下标标记，用于将数字缩小后显示于下方。
注：此外，还有几个特殊字符，字符“÷；”，代表符号“÷”；字符“±”，代表“±”；字符“&permil”，代表“‰”字符；字符“&harr，”代表双向箭头（↔）；字符“&hArr”，代表双向箭头（⇔）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>运算式</title>
</head>
<body>[(6<sup>3</sup>+3<sup>6</sup>) ÷2] ± 1=?
<br>结果以 ‰表示。
<p>H <sub>2</sub>+O<sub>2</sub> ⇔ H<sub>2</sub> O</body>
</html>
3.5在网页中使用图像（<img>)
3.5.1 网页中的图片格式
如果是和照片类似的图像，通常适合保存为JPG格式；而主要由线条构成的、颜色种类比较少的图像，通常适合保存为GIF格式。
3.5.2 一个简单的图片网页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片</title>
</head>
<body>
<img src="cat.jpg">
</body>
</html>
注：插入的图片与HTML文件是出于同一目录下的，如果不处于同一目录下，就必须采用路径的方式来指定图片文件的位置。
3.5.3 使用路径
网站中的路径通常可以分为两种情况。
（1）如果图像文件就在本网站内部，通常以要显示该图像的网页文件为起点，通过层级关系描述图像的位置；
（2）如果图像不在本网站内部，那么通常以“http：//”开头的URL作为图像文件的路径。
注：
- 如果在f-01文件夹中的a.htm需要显示同一个文件夹中的cup.gif文件，直接写文件名即可；
- 如果在f-04文件夹中的02文件夹中的b.htm需要显示同一个文件夹中的cap.gif文件，直接写文件名即可；
- 如果在f-04文件夹中c.htm需要显示02文件夹中的cap.gif文件，应该写作“02/cap.gif”。这里的斜线就表示了层级的关系，即下一级的意思；
- 如果在f-04文件夹中的02文件夹中的b.htm需要显示01文件夹中的hat.gif文件，应该写作”··/01/hat.gif"，这里的两个点号表示的是上一级文件夹的意思；
- 如果在f-04文件夹中的02文件夹中的b.htm需要显示f-01文件夹中的cup.gif文件应该写作“··/··/f-01/cup.gif”；
- 如果在f-01文件夹中的a.htm需要显示f-01文件夹中的a.html需要显示f-04文件夹中的02文件夹中的cap.gif文件，应该写作“··/f-04/02/cap.gif”。
3.6 用width和height属性设置图片的尺寸
“尺寸：128*128”就表示该图像的宽度和高度都是128像素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片</title>
</head>
<body>
<img src="cat.jpg">
<img src="cat.jpg" width="400">
<img src="cat.jpg" width="400" height="220" </body>
</html>
注：（1）当图片只设置了其中一个属性（如只设置了 width 属性）的时候，图片的高度以图片原始的长度比例来显示。比如有张图片原始大小为80*60，当只设置了该图片的显示宽度为160时，高度将自 动以120来显示；
（2）属性值可以使用整数或者百分比。如果使用整数，就表示绝对的像素数；如果使用百分比设置宽度或者高度，图片就以相对于当前窗口大小的百分比来显示；
（3）即使图像按照原来的尺寸显示，也应在HTML中指明图像的高度和宽度，这样会使网页的显示速度更快。
3.7 用alt属性为图像设置文本
由于一些原因，图像无法正常显示，因此应该为图像设置一个替换文本，用于图像无法显示的时候告诉浏览者该图片的内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片</title>
</head>
<body>
<img src="no-image.jpg"width="128" height="128" alt="猫图像"
</body>
</html>
注：Google和百度等搜索引擎在收录页面的时候，会通过alt属性的内容来分析网页的内容。因此，如果在制作网页的时候，能够为图像都配有清晰明确的替换文本，就可以帮助搜索引擎更好地理解网页内容，从而更有利于搜索引擎的优化，可能会使更多人通过搜索引擎找到这个网页。
