a _ img _list 標籤

時間 2019-11-09

標籤 img list 標籤欄目 HTML 简体版

原文原文鏈接

標籤a、img、list

1、a標籤

一、經常使用用法

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

二、相對路徑

以當前文件做爲參考，.表明當前路徑，..表明上一級目錄

三、經常使用屬性

title -- 連接說明
target -- _self | _blank -- 目標位置

四、其餘用法

mailto：郵件給...
tel：電話給...
sms：信息給...

五、a標籤reset操做

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

六、錨點

① <a href="#tag">前往錨點</a> <a name="tag" des="錨點"></a>
② <a href="#tag">前往錨點</a> <i id="tag" des="錨點"></i>

七、鼠標樣式

{
    cursor: pointer | wait | move;
}

2、img標籤

一、經常使用用法

<img src="https://image/icon.gif" />
<img src="./icon.gif" />

二、經常使用屬性

alt -- 異常解釋
title -- 圖片解釋

3、list列表

一、有序列表

<ol>
    <li></li>
    <li></li>
</ol>

二、無序列表

<ul>
    <li></li>
    <li></li>
</ul>

三、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>
    <!-- 1、基本使用 -->
    <!-- 超連接標籤:a -->
    <!-- 雙/行/單一類型標籤 -->
    <a href="https://www.baidu.com">前往百度</a>
    <a href="5 邊界圓角.html">前往邊界圓角</a>
    <!--  ./或省略表明當前文件所在路徑，能夠訪問與該文件通路徑下的全部文件及文件夾 -->
    <!-- ../ 表明本層路徑的上層目錄 -->
    <a href="./temp/1.html">hey</a>
    <!-- 2、屬性 -->
    <!-- title：鼠標炫富的文本提示 -->
    <!-- target：_blank，新開啓空白標籤位來打開目標頁面 -->
    <a href="https://sina.com.cn" title="新浪網" target="_blank">前往新浪</a>
    <!-- 3、其餘應用場景 -->
    <!-- mailto | sms |tel  -->
    <a href="mailto:zreo@163.com">發信息給zero</a>

    <!-- 4、錨點 -->
    <!-- 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>