目錄

 

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