标签a、img、list
一、a标签
1、常用用法
<a href="https://www.baidu.com">前往百度</a>
<a href="./index.html">前往主页</a>
2、相对路径
以当前文件作为参考，.代表当前路径，..代表上一级目录
3、常用属性
title -- 链接说明
target -- _self | _blank -- 目标位置
4、其他用法
- mailto：邮件给...
- tel：电话给...
- sms：信息给...
5、a标签reset操作
a {
color: #333;
text-decoration: none;
outline: 0;
}
6、锚点
① <a href="#tag">前往锚点</a> <a name="tag" des="锚点"></a>
② <a href="#tag">前往锚点</a> <i id="tag" des="锚点"></i>
7、鼠标样式
{
cursor: pointer | wait | move;
}
二、img标签
1、常用用法
<img src="https://image/icon.gif" />
<img src="./icon.gif" />
2、常用属性
alt -- 异常解释
title -- 图片解释
三、list列表
1、有序列表
<ol>
<li></li>
<li></li>
</ol>
2、无序列表
<ul>
<li></li>
<li></li>
</ul>
3、list的reset操作
ol, ul {
margin: 0;
padding: 0;
list-style:none;
}
a_img_list 标签 代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>a_img_list</title>
<style type="text/css">
/* reset: a标签一些默认属性的清楚 */
a{
color:#333;
text-decoration:none;
outline:0;
}
</style>
</head>
<body>
<!-- 一、基本使用 -->
<!-- 超链接标签:a -->
<!-- 双/行/单一类型标签 -->
<a href="https://www.baidu.com">前往百度</a>
<a href="5 边界圆角.html">前往边界圆角</a>
<!-- ./或省略代表当前文件所在路径，可以访问与该文件通路径下的所有文件及文件夹 -->
<!-- ../ 代表本层路径的上层目录 -->
<a href="./temp/1.html">hey</a>
<!-- 二、属性 -->
<!-- title：鼠标炫富的文本提示 -->
<!-- target：_blank，新开启空白标签位来打开目标页面 -->
<a href="https://sina.com.cn" title="新浪网" target="_blank">前往新浪</a>
<!-- 三、其他应用场景 -->
<!-- mailto | sms |tel -->
<a href="mailto:zreo@163.com">发信息给zero</a>
<!-- 四、锚点 -->
<!-- a 与a #锚点名 href=“#锚点名” 对应 name=“锚点名” -->
<!-- a与标签 href=“#锚点名” 对应 id=“锚点名” -->
<a href="#tag">前往底部</a>
<!-- 测试锚点用 -->
br * 100
<!-- 设置一个锚点 -->
<!-- bottom 做底部布局的区域 -->
<div class="bottom">
<a name="tag" href="">设置一个锚点</a>
<!-- <i id="tag"></i> -->
<!-- <div id="tag"></div> -->
</div>
<!-- 五.img使用 -->
<!-- src可以连接本地及网络图片 -->
<!-- alt:资源加载失败时的文本提示 -->
<!-- title:图片的文本信息(鼠标悬浮时展示) -->
<img src="http://5b0988e595225.cdn.sohucs.com/images/20180921/f1505f486ba8492b8faaa62ac7cc3e66.png" alt="保罗" title="保罗">
<!-- 六.list列表 -->
<!-- reset操作 -->
<style type="text/css">
ol, ul {
margin: 0;
padding: 0;
list-style: none;
}
</style>
<!-- 有序列表 -->
<ol>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ol>
<!-- 无需列表:常用 -->
<ul>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ul>
</body>
</html>