Web课程入门 简单易学 “图像标记”

一、文本排版3.24

《无序列表》

• ****

每个

都独占一行

《有序列表》

1. ***
2. ***

1.每个

都独占一行

2.默认

标签列表前面有顺序标记

有序无序列表：

定义列表

多样式排序

把有序列表换成有括号的样子

##### 把无序列表的修饰符改成任意的样子

<style >
			ul,li{
				list-style-image: url(img/男背心.png)
			}
		</style>

# 二、图像标记 3.26

1.图像标签<img>像页面加载图片内容

<img src ="图像路径" alt="图像的代替文字" title="鼠标指针悬停提示文字" witch="图片宽度" hight="图片高度"/>

#### 2.常见的图片格式：jpeg、gif、png

最新的两种：svg、webp

<u>GIF</u>:支持动画显示

<u>PNG</u>：支持透明背景

<u>JPEG</u>或<u>JPG</u>：颜色丰富

###### 插入图片格式：

```html
<img src="">

属性1：alt--当图片不能显示时，替换的文字，方便爬虫去捕获页面信息

属性2：title--鼠标悬停到图片上显示文字

3.相对路径和绝对路径

相对路径：

（1）.图像文件和html文件位于同一文件夹：只需输入图像文件的名称即可，如＜img src="logo.gif" />.

（2）.图像文件位于html文件的下一级文件夹：输入文件夹名和文件名，之间用"/"隔开，如＜img src="img/img01/logo.gif*/>.

（3）.图像文件位于html文件的上一级文件夹：在文件名之前加入"/"，如果是上两级，则需要使用"/…/",以此类推，如＜img src="./logo.gif* />。

绝对路径：