第 3 章 HTML5 网页中的文本和图像

　　　　文字和图像是网页中最主要、最常用的元素。

　　　　在互联网高速发展的今天，网站已经成为一个展示与宣传自我的通信工具（公司或个人可以通过网站介绍公司的服务与产品或介绍自己）。这些都离不开网站中的网页，而网页的内容主要是通过文字和图像来体现的。

3.1 在网页中添加文本

　　　　在网页中添加文本的方法有很多，按照文字的类型，可以分为普通文本的添加和特殊字符文本的添加两种。

　　3.1.1 普通文本的添加

　　　　普通文本是指汉字或者在键盘上可以直接输入的字符。

　　　　如果有现成的文本，可以使用复制、粘贴的方法，把需要的文本从其他窗口中复制过来。

　　3.1.2 特殊字符文本的添加

　　　　……

3.2 文本排版

　　3.2.1 换行标记 <br>

　　3.2.2 段落标记 <p>

　　3.2.3 标题标记 <h1> ~ <h6>

3.3 文字列表

　　　　文字列表可以有序地编排一些信息资源，使其结构化和条理化，并以列表的样式显示出来，以便浏览者能更加快捷地获得相应的信息。

　　3.3.1 建立无序列表 <ul>

　　　　　无序列表的项目排列没有顺序，只以符号作为分项标识。

　　　　　无序列表使用一对 <ul></ul> 标记，其中每一个列表项使用 <li></li>

　　　　　在无序列表中，使用 <ul></ul> 标记标识这一个无序列表的开始和结束，<li> 则表示一个列表项的开始，在一个无序列表中可以包含多个列表项，并且 <li> 可以省略结束标记。

　　3.3.2 建立不同类型的无序列表

　　　　　<ul type="disc">……</ul>

　　　　　<ul type="circle">……</ul>

　　　　　<ul type="square">……</ul>

　　3.3.3 建立有序列表 <ol>

　　3.3.4 建立不同类型的有序列表

　　3.3.5 建立嵌套列表

　　　　　嵌套列表是网页中常用的元素，使用 <ul> 标签可以制作网页中的嵌套列表。—— 在 <li> 的部分使用 <ul>

　　3.3.6 自定义列表

　　　　　在 HTML5 中还可以自定义列表。自定义列表的标签是 <dl> 。—— 在 <dl> 里可以定义 <dt></dt>，<dd></dd> 等标签

3.4 网页中的图像 <img>

　　　　图片是网页中不可缺少的元素，巧妙地在网页中使用图片，可以为网页增色不少。

　　　　网页支持多种图片格式，并且可以对插入的图片设置宽度和高度。（网页中使用的图像可以是 GIF、JPEG、BMP、TIFF、PNG 等格式的图像文件，其中使用最广泛的主要是 GIF 和 JPEG 两种格式）

　　3.4.1 在网页中插入图像

　　　　　图像可以美化网页，插入图像使用单标记 <img>

　　　　　img 标记的属性及描述如下：

　　　　　　　　alt　　　　定义有关图形的短描述

　　　　　　　　src　　　　要显示的图像的 url

　　　　　　　　height　　 定义图像的高度

　　　　　　　　width　　   设置图像的宽度

　　　　　在插入图片是，用户可以将其他文件夹或服务器的图片显示到网页中。（不知道相对路径相对的是不是当前的页面）

　　3.4.2 设置图像的宽度和高度

　　　　　在 HTML 文档中，还可以设置插入图片的显示大小，一般是按原始尺寸显示，但也可以任意显示尺寸。

　　　　　设置图像尺寸分别用属性 width（宽度）和 height（高度）—— 当只为图片设置一个尺寸属性时，另外一个尺寸就以图片原始的长宽比例来显示。

　　　　　图片的尺寸单位可以选择百分比或数值。（百分比为相对尺寸，数值是绝对尺寸）

　　3.4.3 设置图像的提示文字 —— 通过设置 alt 属性

　　　　　为图像添加提示文字可以方便搜索引擎的检索，除此之外，如果图像没有成功下载，在图像的位置上也会显示提示文字。

　　3.4.4 将图片设置为网页背景

　　　　　在插入图片时，用户可以根据需要，将某些图片设置为网页的背景。（GIF 和 JPEG 文件均可用作 HTML 背景）（如果图像小于页面，图像会进行重复）

　　3.4.5 排列图像

　　　　　在网页的文字中，如果插入了图片，这时就可以对图片进行排序。常用的排序方式为居中、底部对齐、顶部对齐几种。（通过 aligh 属性实现）

3.7 疑难解惑

　　疑问1：换行标记和段落标记有什么区别？

　　　　　换行标记是单标记，不能写结束标记。（段落标记是双标记，可以省略结束标记，也可以不省略）

　　　　　默认情况下，段落之间的距离和段落内部的行间距是不同的，段落间距比较大，行间距比较小。

　　　　　HTML 无法调整段落间距和行间距，如果希望调整它们，就必须使用 CSS。

　　疑问2：无序列表 <ul> 元素的作用是什么？

　　　　　无序列表元素主要用于条理化和结构化文本信息。

　　　　　在实际开发中，无序列表在制作导航菜单时使用广泛。（导航菜单的结构一般都使用无序列表来实现）