HTML复习之图像标签,超链接标签,列表标签
图像标签
基础介绍
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18(1)作用：定义图像，呈现图片 (2)组成：img，单标签 (3)语法： <img src='xxx' /> (4)属性： src：必需属性，指定图像文件的路径和文件名 *** alt：当图像不能显示时，呈现alt中的内容 title：当鼠标放到图像上时显示文字 width：宽度 height：高度 宽高不要同时设置，避免图片变形 border：边框 (5)注意事项： 当需设置属性： A.属性要写在标签名称之后 B.属性和属性之间不分顺序 C.标签名和属性名称、属性和属性之间以空格隔开 D.属性采取键值对格式，即key=val形式
案例
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <!-- 图像标签： 作用：定义图像，呈现图片 组成：img，单标签 语法： <img src='xxx' /> 属性： src：必需属性，指定图像文件的路径和文件名 *** alt：当图像不能显示时，呈现alt中的内容 title：当鼠标放到图像上时显示文字 width：宽度 height：高度 宽高不要同时设置，避免图片变形 border：边框 注意事项： 当需设置属性： 属性要写在标签名称之后 属性和属性之间不分顺序 标签名和属性名称、属性和属性之间以空格隔开 属性采取键值对格式，即key=val形式 --> <img src="img/赵丽颖.jpg" title="演员" alt="漂亮图片" width="300px"> </body> </html>
路径
基础介绍
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13(1)相对路径： 举例：图片相对于HTML页面的位置 A.图片和HTML文件在同级目录：直接写图片名字即可 B.图片在HTML文件的下级目录：图片的上级/....../图片名字，出现一个子目录，就写一个/ C.图片在HTML文件的上级目录：../....../图片名字，出现一个上级目录，就写一个../ (2)根路径： 只考虑目标文件(图片)位置 方便 以/开头 (3)绝对路径： 访问外部资源文件 完整写法，从协议开始：https://www.baidu.com/img/flexible/logo/pc/result.png
案例
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <!-- 1.相对路径： 考虑HTML文件和图片的位置 复杂、移动文件位置路径需修改 --> <!-- 1.1图片和HTML文件在同级目录：直接写图片名字即可 --> <!-- <img src="01.png"/> --> <!-- 1.2图片在HTML文件的下级目录：图片的上级/....../图片名字，出现一个子目录，就写一个/--> <!-- <img src="img/img1/赵丽颖.jpg" width="200px" /> --> <!-- ./：当前目录，省略不写 --> <!-- img：行内块元素 --> <!-- <img src="./img/img1/赵丽颖.jpg" width="200px"/> --> <!-- 1.3图片在HTML文件的上级目录：../....../图片名字，出现一个上级目录，就写一个../ --> <!-- ../：上级目录 --> <!-- <img src="../../01.png"/> --> <!-- 2.根路径： 考虑目标文件(图片)位置 方便 以/开头 协议://IP地址:端口号/xxx 本机：127.0.0.1 | localhost | 具体IP地址 http://127.0.0.1:8848/section1-html/path/path1/4%20%E8%B7%AF%E5%BE%84.html --> <img src="/section1-html/01.png" height="200px"/> <img src="/section1-html/img/img1/赵丽颖.jpg" height="200px" > <!-- 3.绝对路径： 访问外部资源文件： 以协议开始 --> <img src='https://www.baidu.com/img/flexible/logo/pc/result.png'/> </body> </html>
超链接标签
基础介绍
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19(1)作用：从一个页面链接到另外一个页面 (2)组成：a，成对标签，行内元素 (3)语法： <a href='跳转目标位置'>xxx</a> 标签体内容：xxx，需要手动设置内容，辅助用户操作，便于用户点击元素 (4)属性： href：跳转目标位置 target： 指定打开目标窗口的方式 _self：当前窗口打开目标资源文件->默认值 _blank：新窗口打开目标资源文件 (5)链接分类： 内部链接 *** 外部链接 下载链接 空链接 网页元素链接 锚点链接 ***
案例
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <!-- 超链接： 作用：从一个页面链接到另外一个页面 组成：a，成对标签，行内元素 语法： <a href='跳转目标位置'>xxx</a> 标签体内容：xxx，需要手动设置内容，辅助用户操作，便于用户点击元素 属性： href：跳转目标位置 标签体内容：需要手动设置内容，辅助用户操作，便于用户点击元素 target： 指定打开目标窗口的方式 _self：当前窗口打开目标资源文件->默认值 _blank：新窗口打开目标资源文件 链接分类： 内部链接 *** 外部链接 下载链接 空链接 网页元素链接 锚点链接 *** --> <!-- 内部链接--> <a href="3 图像标签.html" target="_blank">图像标签</a> <!-- 外部链接--> <a href="http://www.baidu.com">百度</a> <!-- 下载链接 --> <a href="2 常用基础标签.zip">下载链接</a> <!-- 空链接 --> <a href="#">空链接</a> <!-- 网页元素链接 --> <a href="1 基础语法.html"> <img src="01.png" width="100px"> </a> <!-- 锚点链接 --> <a href="#message">锚点链接</a> <p style="height: 1000px;"></p> <p id="message">锚点链接具体介绍</p> </body> </html>
列表标签
基础介绍
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16(1)作用： 布局页面 (2)分类： 无序列表 ***： ul，只能包含li，li中包含任意标签 使用场景：各个列表项之间没有顺序之分，并列关系 有序列表： ol，只能包含li，li中包含任意标签 使用场景：各个列表项之间有顺序之分 自定义列表： dl，包含dt和dd 使用场景：对名词进行解释说明 dt：某一项内容的名字 dd：描述每一个内容的名字 一个dt对应多个dd
案例
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <!-- 列表标签： 作用： 布局页面 分类： 无序列表 ***： ul，只能包含li，li中包含任意标签 使用场景：各个列表项之间没有顺序之分，并列关系 有序列表： ol，只能包含li，li中包含任意标签 使用场景：各个列表项之间有顺序之分 自定义列表： dl，包含dt和dd 使用场景：对名词进行解释说明 dt：某一项内容的名字 dd：描述每一个内容的名字 一个dt对应多个dd --> <!-- 无序列表 --> <ul type="square"> <li>河南省</li> <li>山东省</li> <li>湖北省</li> </ul> <!-- 有序列表 --> <ol type="A"> <li>郑州市</li> <li>济南市</li> <li>武汉市</li> </ol> <!-- 自定义列表 --> <dl> <dt>自我介绍</dt> <dd>姓名</dd> <dd>年龄</dd> <dd>兴趣</dd> <dt>项目介绍</dt> <dd>开发背景</dd> <dd>开发工具</dd> <dd>涉及技术</dd> <dd>负责模块</dd> </dl> </body> </html>
最后
以上就是专注未来最近收集整理的关于HTML复习之图像标签,超链接标签,列表标签HTML复习之图像标签,超链接标签,列表标签的全部内容，更多相关HTML复习之图像标签内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复