前端之路--html（三） 图像和列表的使用

chapter4&5 图像和列表的使用

图像格式简介：

网页中的图像格式一般有三种：gif（Graphic Interchange Format，图像交换格式），jpeg（Joint Photographic Experts Group），png（Portable Network Graphics）。

三种格式各有优劣：

gif：最适合显示色调不连续或具有大面积单一颜色的图像，比如导航条、按钮、图标等等。gif的最大优点就是可以将几张静态图片连接起来，转换成一个动画文件，其另一个优点是可以用交错的方式在网页中呈现，也就是说当图片下载未完成时，浏览器会先以马赛克的形式将图像慢慢显示。
jpeg：是一种压缩格式，图像品质较高，大小也随图像品质膨胀，需要在图片大小和图像品质之间做平衡。它适合显示需要全彩模式才能表示的效果，在相当的图像质量下，jpeg为gif的1/4。
png：图像格式是一种采用了最小的方式压缩却又不造成图像失真的技术，但是IE只能部分支持PNG格式图像的，所以此种类型不推荐使用。

---

标签:

<img>必须属性：src 可选属性[alt | width | height | usemap | ismap]
作用:
插入图像标记img
语法：
<img src='图像文件地址' alt='提示文字' width='宽度' height='高度'>
属性说明：
在 HTML 4.01 中，不赞成使用以下布局属性：align, border, hspace、vspace。在 HTML5 中不支持这些属性。
特别属性说明：
ismap
作用：
ismap 属性将图像定义为服务器端图像映射。图像映射指的是带有可点击区域的图像。当点击一个服务器端图像映射时，点击坐标会以 URL 查询字符串的形式发送到服务器。
实例：
<a href='链接地址'><img src='' ismap="ismap" alt='提示文字' /></a>
usemap
作用：
称作图像的映射地图，将图像分成多个热区，分别链接不同的地址
语法:
<img usemap='映射图像名称'>
<map name='映射图像名称'>
<area shape='热区形状' coords='热区坐标' href='链接地址'>--注意，这里没有闭合符号
</map>
</img>

---

使用列表：

html列表一共有三种列表：无序列表，有序列表和定义列表。

标签：

<ol> 可选属性[start | type]
作用：
有序列表，一般采用数字或字母进行标号。
语法：
<ol start='指定起始数值' type='类型[1(数字) | A（大写字母） | a（小写字母） | i（小写罗马数字） | I（大写罗马数字）]'>
<li></li>
</ol>
属性说明：
在 HTML 4.01 中，不赞成使用 "start" 属性，在 HTML 5 中是允许的。
在 HTML 4.01 中，不赞成使用 "compact" 和 "type" 属性，在 HTML 5 中，不再支持这两个属性。

---

<ul> 可选属性[type]
作用：
有序列表，一般采用数字或字母进行标号。
语法：
<ul type='类型[disc | circle | square]'>
<li></li>
</ul>
属性说明：
在 HTML 4.01 中，ul 元素的 "compact" 和 "type" 属性是不被赞成使用的。在 HTML 5 中，不再支持这两个属性。

---

<li> 可选属性[type | value]
作用：

定义列表项，有序列表和无序列表中都使用 <li> 标签。

语法：

<li value='序号'>内容</li>

属性说明：

在 HTML 4.01 中， 不赞成使用 "type" 和 "value" 属性。

在 HTML 5 中，不再支持 "type" 属性。

在 HTML 5 中， 并没有不赞成使用 "value" 属性，但是仅能够与 <ol> 元素一起使用。

---

<dir> -- HTML5 中不支持 <dir> 标签。请用 CSS 代替。.

---

<dl>
作用：
定义一个定义列表（definition list）。
语法：
<dl>
<dt>定义一个定义列表中的一个项目，也可以说是要解释的名词。</dt>
<dd>定义一个定义列表中对项目的描述，也可以说是对名词的具体解释。</dd>
</dl>

至此，介绍完了图像和列表的使用。