概述
HTML复习之图像标签,超链接标签,列表标签
图像标签
基础介绍
(1)作用：定义图像，呈现图片
(2)组成：img，单标签
(3)语法：
<img src='xxx' />
(4)属性：
src：必需属性，指定图像文件的路径和文件名 ***
alt：当图像不能显示时，呈现alt中的内容
title：当鼠标放到图像上时显示文字
width：宽度
height：高度 宽高不要同时设置，避免图片变形
border：边框
(5)注意事项：
当需设置属性：
A.属性要写在标签名称之后
B.属性和属性之间不分顺序
C.标签名和属性名称、属性和属性之间以空格隔开
D.属性采取键值对格式，即key=val形式
案例
<!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)相对路径：
举例：图片相对于HTML页面的位置
A.图片和HTML文件在同级目录：直接写图片名字即可
B.图片在HTML文件的下级目录：图片的上级/....../图片名字，出现一个子目录，就写一个/
C.图片在HTML文件的上级目录：../....../图片名字，出现一个上级目录，就写一个../
(2)根路径：
只考虑目标文件(图片)位置
方便
以/开头
(3)绝对路径：
访问外部资源文件
完整写法，从协议开始：https://www.baidu.com/img/flexible/logo/pc/result.png
案例
<!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)组成：a，成对标签，行内元素
(3)语法：
<a href='跳转目标位置'>xxx</a>
标签体内容：xxx，需要手动设置内容，辅助用户操作，便于用户点击元素
(4)属性：
href：跳转目标位置
target：
指定打开目标窗口的方式
_self：当前窗口打开目标资源文件->默认值
_blank：新窗口打开目标资源文件
(5)链接分类：
内部链接 ***
外部链接
下载链接
空链接
网页元素链接
锚点链接 ***
案例
<!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)分类：
无序列表 ***：
ul，只能包含li，li中包含任意标签
使用场景：各个列表项之间没有顺序之分，并列关系
有序列表：
ol，只能包含li，li中包含任意标签
使用场景：各个列表项之间有顺序之分
自定义列表：
dl，包含dt和dd
使用场景：对名词进行解释说明
dt：某一项内容的名字
dd：描述每一个内容的名字
一个dt对应多个dd
案例
<!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复习之图像标签,超链接标签,列表标签HTML复习之图像标签,超链接标签,列表标签所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复