标签a、img、list
一 概念
# 标签a、img、list
## 一、a标签
#### 1、常用用法
```html
<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操作
```css
a {
color: #333;
text-decoration: none;
outline: 0;
}
```
#### 6、锚点
```html
① <a href="#tag">前往锚点</a> <a name="tag" des="锚点"></a>
② <a href="#tag">前往锚点</a> <i id="tag" des="锚点"></i>
```
#### 7、鼠标样式
```css
{
cursor: pointer | wait | move;
}
```
## 二、img标签
#### 1、常用用法
```html
<img src="https://image/icon.gif" />
<img src="./icon.gif" />
```
#### 2、常用属性
```
alt -- 异常解释
title -- 图片解释
```
## 三、list列表
#### 1、有序列表
```html
<ol>
<li></li>
<li></li>
</ol>
```
#### 2、无序列表
```html
<ul>
<li></li>
<li></li>
</ul>
```
#### 3、list的reset操作
```css
ol, ul {
margin: 0;
padding: 0;
list-style:none;
}
```
二 代码示范
<!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="./05_边界圆角.html">前往边界圆角页面</a>
<!-- ./或省略代表当前文件所在路径,可以访问与该文件同路径下的所有文件及文件夹 -->
<a href="./temp/temp.html">前往temp页面</a>
<!-- 二.属性 -->
<!-- title:鼠标悬浮的文本提示 -->
<!-- target:_blank,新开空白标签位来打开目标页面 -->
<a href="http://sina.com.cn" title="新浪网" target="_blank">前往新浪</a>
<!-- 三.其他应用场景 -->
<!-- mailto | sms | tel -->
<a href="mailto:zero@163.com">信息给zero</a>
<!-- 四.锚点 -->
<!-- a与a href="#锚点名" -- name="锚点名" -->
<!-- a与标签 href="#锚点名" -- id="锚点名" -->
<a href="#tag">前往底部</a>
<!-- 测试锚点请tab -->
br * 100
<!-- 设置一个锚点 -->
<!-- .bottom做底部布局的区域 -->
<div class="bottom">
<a name="tag"></a>
<!-- <i id="tag"></i> -->
<!-- <div id="tag"></div> -->
...
</div>
<!-- 五.img使用 -->
<!-- src可以连接本地及网络图片 -->
<!-- alt:资源加载失败时的文本提示 -->
<!-- title:图片的文本信息(鼠标悬浮时展示) -->
<!-- <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537511739499&di=f5f2763fe54c8ea4d89b2fafe0569c84&imgtype=0&src=http%3A%2F%2Fimg.alicdn.com%2Fimgextra%2Fi1%2FTB2IZbxogmTBuNjy1XbXXaMrVXa_%2521%25212754890204.jpg_400x400.jpg" 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>
