文字和图像是网页中最主要、最常用的元素。
在互联网高速发展的今天，网站已经成为一个展示与宣传自我的通信工具（公司或个人可以通过网站介绍公司的服务与产品或介绍自己）。这些都离不开网站中的网页，而网页的内容主要是通过文字和图像来体现的。
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> 元素的作用是什么？
无序列表元素主要用于条理化和结构化文本信息。
在实际开发中，无序列表在制作导航菜单时使用广泛。（导航菜单的结构一般都使用无序列表来实现）
扫一扫
643
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
