CSS/HTML - 标签a、img、list的常用方式

目录

 

一、a标签

1、常用用法

2、相对路径

3、常用属性

4、其他用法

5、a标签reset操作：默认属性的清除

6、锚点（点击返回顶部）

7、鼠标样式

8、图片跳转页面

二、img标签

1、常用用法

2、常用属性

三、list列表

1、有序列表

2、无序列表

3、list的reset操作：默认属性的清除

---

一、a标签

1、常用用法

<a href="https://www.baidu.com">前往百度</a>
<a href="./index.html">前往主页</a>

2、相对路径

以当前文件作为参考，“.”代表当前路径，“..”代表上一级目录

3、常用属性

title -- 链接说明，鼠标悬浮的文本提示
target -- _self | _blank -- 目标位置，当前页面打开、新页面打开

<a href="http://sina.com.cn" title="新浪网" target="_blank">前往新浪</a>

4、其他用法

• mailto：邮件给...
   

  <a href="mailto:[email protected]">信息给zero</a>

• tel：电话给...

• sms：信息给...

5、a标签reset操作：默认属性的清除

a {
    color: #333;
    text-decoration: none;
    outline: 0;
}

6、锚点（点击返回顶部）

① <a href="#tag">前往锚点</a> 
  <a name="tag" des="锚点"></a> 或者 <div id="tag"></div>
​
② <a href="#tag">前往锚点</a> 
  <i id="tag" des="锚点"></i>

7、鼠标样式

{cursor: pointer | wait | move;}

8、图片跳转页面

<a href="baidu.com">
    <img src="img/icon.jpg" alt="">
</a>

二、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;
}