网页的主体标记body包括要在浏览器显示处理的所有信息。在网页的主体标记中有很多的属性设置，包括网页的背景设置、文字属性设置和链接设置等。在<body>和</body>标签之间的内容是网页的主要内容，如<h1>、<p>、<a>、<img>等网页内容标签。本文主要介绍body中包含的网页内容标签<img>、<ol>、<ul>等。
使用图像
GIF格式：Graphic Interchange Format的缩写，即图像交换格式。最大优点是可制作动态图像，可以将数张静态文件作为动画帧串联起来，转换成一个动画文件。另一个优点是可以将图像以交错的方式在网页中呈现。
JEPG格式：Joint PhotoGraphic Experts Group的缩写，它是一种图像压缩格式。
PNG格式：Portable Network Graphics的缩写，是一种非破坏性的网页图像文件格式，它提供了将图像文件以最小的方式压缩却又不造成图像失真的技术。
插入图像标签img和属性src
语法为：<img src="图像文件的地址">
用于插入图像，src用于指定图像源文件所在的路径，它是图像必不可少的属性。src参数用来设置文件所在的路径，这一路径可以是相对路径，也可以是绝对路径。
图像的地址可以使用文件和http://关键字作为图像的地址，并且能够用于在网页上载入图像。
图像的提示文字
图像的提示文字有两个作用：当浏览该网页时，如果图像下载完成，将鼠标指针放在该图像上，鼠标指针旁边会出现提示文字；如果图像没有被下载，在图像的位置上就会显示提示文字。
第一个作用语法为：<img src="图像文件的地址" title="提示文字的内容">
第二个作用语法为：<img src=”图像文件的地址“ alt="提示文字的内容">
在该语法中，提示文字的内容可以是中文，也可以是英文。
图像的宽度和高度width、height
语法为：<img src="图像文件的地址" width="图像的宽度" height="图像的高度">
width和heith属性用来定义图片的高度和宽度。如果<img>元素不定义高度和宽度，图片就会按照它的原始尺寸显示。
在该语法中，图像的宽度和高度的单位是像素。宽度和高度值的大小不影响图像的下载速度。
图像的边框border
语法为：<img src="图像文件的地址" border="图像边框的宽度">
默认情况下，图像是没有边框的，通过border属性可以为图像添加边框线。边框线的宽度可以设置，但是边框线的颜色不可以设置，当图像上没有添加链接的时候，边框的颜色为黑色；当图像上添加了链接时，边框的颜色和链接文字颜色一致，默认为深蓝色。
在该语法中，border的单位是像素，值越大边框越大。
图像的垂直边距vspace
语法为：<img src="图像文件的地址" vspace="垂直边距">
垂直边距vspace用来调整图像与文字的垂直边距。单位为像素。
图像的水平间距hspace
语法为：<img src="图像文件的地址" hspace="水平间距">
水平间距hspace用来调整图像与文字的水平间距。单位为像素。
使用vspace和hspace属性会在图像周围对称加入空格。hspace属性在图像两侧加入空格，而vspace属性在图像顶部和底部加入相同的空格。
图像的排列align
语法为：<img src="图像文件的地址" align="文字的对齐方式">
align属性用来设置图像和文字之间的对齐方式，对齐方式有绝对对齐和相对对齐两种。
绝对对齐只有3种：居中(middle)、居左(left)、居右(right)
align的取值有：
| 属性 | 描述 |
| bottom | 图片的底部和当前行的文字底部对齐 |
| top | 图片的顶端和当前行的文字顶端对齐 |
| middle | 图片水平中线和当前行的文字中线对齐 |
| left | 图片左对齐 |
| center | 图片水平中线和当前行的文字中线对齐 |
| right | 图片右对齐 |
图像的超链接
图像的超链接
语法为：<a href="链接地址"><img src="图像文件的地址"></a>
在该语法中href用来设置图像链接的地址。
当鼠标指针放置在链接的图像上时，鼠标指针会发生相应的变化。
图像热区链接
语法为：
首先要在图像文件中设置映射图像名，在图像的属性中使用<usemap>标记添加图像要引用的映射图像的名称
<img src="图像文件的地址" usemap="映射图像名称">
然后需要定义热区图像以及热区的链接属性如下：
<map name="映射图像名称">
<area shape="热区形状" coords="热区坐标" href="链接地址">
<area ....>
</map>
映射图像名称中属性值，可以通过网页绘制图像工具设置。
使用列表
HTML列表一共有三种类型，一种是无序列表，项目符号由几个符号构成；一种是有序列表，项目符合由字母或数字进行排序；一种是定义列表，它用作产生条件和描述的双重列表，可以对列表进行更灵活的定义。
有序列表ol
语法为：
<ol>
<li>有序列表项</li>
<li>有序列表项</li>
<li>有序列表项</li>
<li>有序列表项</li>
...
</ol>
在该语法中，<ol>和</ol>标识标志着有序列表的开始和结束，而<li>和</li>标记表示这是一个列表项。
有序列表的序号类型type
语法为：
<ol type="序号类型">
<li>有序列表项</li>
<li>有序列表项</li>
<li>有序列表项</li>
<li>有序列表项</li>
...
</ol>
type用于改变序号的类型，包括大小写字母、阿拉伯数字和大小写罗马数字。
| type | 列表项目的序号类型 |
| 1 | 数字1、2、3、4... |
| a | 小写英文字母a、b、c、d... |
| A | 大写英文字母A、B、C、D... |
| i | 小写罗马字母ⅰ、ⅱ、ⅲ、ⅳ... |
| Ⅰ | 大写罗马字母Ⅰ、Ⅱ、Ⅲ、Ⅳ... |
<ol>
<li>第一个</li>
<li>第二个</li>
<li>第三个</li>
</ol>
有序列表的起始数值start
语法为：
<ol start="起始数值">
<li>有序列表项</li>
<li>有序列表项</li>
<li>有序列表项</li>
<li>有序列表项</li>
...
</ol>
默认情况下，有序列表的编号是从1开始的，通过start属性可以调整编号的起始值。
在该语法中，起始数值只能是数字，但是同样可以对字母和罗马数字起作用。
<ol type="a">
<li>第一个</li>
<li>第二个</li>
<li>第三个</li>
</ol>
<ol type="a" start=3>
<li>第一个</li>
<li>第二个</li>
<li>第三个</li>
</ol>
无序列表
无序列表标识ul
语法为：
<ul>
<li>有序列表项</li>
<li>有序列表项</li>
<li>有序列表项</li>
<li>有序列表项</li>
...
</ul>
在该语法中，使用<ul>和</ul>标记表示这一个无序列表的开始和结束，<li>则表示一个列表项的开始。在无序列表中可以包含多个列表项。
无序列表的类型type
语法为：
<ul type="序号类型">
<li>有序列表项</li>
<li>有序列表项</li>
<li>有序列表项</li>
<li>有序列表项</li>
...
</ul>
默认情况下，无序列表的符号为●，而通过type参数可以调整无序列表的项目符号，避免列表符号的单调。
| type | 列表项目的符号 |
| DIsc | 默认值，黑色实心圆点项目符号“●” |
| circle | 空心圆环项目符号“○” |
| square | 正方形的项目符号“□” |
<ul type="Disc">
<li>第一个</li>
<li>第二个</li>
<li>第三个</li>
</ul>
<ul type="square">
<li>第一个</li>
<li>第二个</li>
<li>第三个</li>
</ul>
<ul type="circle">
<li>第一个</li>
<li>第二个</li>
<li>第三个</li>
</ul></span>
目录列表标记dir
语法为：
<dir>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
...
</dir>
目录列表一般用来创建多列的目录列表，它在浏览器中的显示效果与无序列表相同，因为它的功能也可以通过无序列表来实现。
在该语法中，<dir>和</dir>标志着目录列表的开始和结束。
<p>列表
<dir>
<li>第一个</li>
<li>第二个</li>
<li>第三个</li>
</dir>
</p>
定义列表标记<dl>
语法为：
<dl>
<dt>定义条件</dt>
<dd>定义描述</dd>
...
</dl>
定义列表由两部分组成：定义条件和定义描述。定义列表的全称是definition list。
<dl>和</dl>标识分别定义了定义列表的开始和结束。
<dt>用来指定需要解释的名词，英文全称为definition term；
<dd>是具体的解释，英文全称为definition description；
<dl>
<dt>css</dt>
<dd>css就是Cascading Style Sheets。中文翻译为“层叠样式表”，简称样式表，它是一种制作网页的新技术。</dd>
<dt>指针的概念</dt>
<dd>指针是一个特殊的变量，它里面存储的数值被解释成为内存里的一个地址</dd>
</dl>
菜单列表标记<menu>
语法为：
<menu>
<li>有序列表项</li>
<li>有序列表项</li>
<li>有序列表项</li>
<li>有序列表项</li>
...
</menu>
菜单列表主要用于设计单列的菜单列表。菜单列表在浏览器中的显示效果和无序列表是相同的，因为它的功能可以通过无序列表来实现。
列表
<menu>
<li>第一个</li>
<li>第二个</li>
<li>第三个</li>
</menu>
扫一扫
4230
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
