（3）HTML經常使用標籤 + 快捷字符

時間 2019-11-30

標籤 html 經常使用標籤快捷字符欄目 HTML 简体版

原文原文鏈接

一、<meta charset="UTF-8"> #定義字符編碼html

二、<!doctype + 類型> #規定文檔類型網絡

三、 #註釋的格式編輯器

四、&； #轉義字符字體

五、> 建立父子結構標籤的網站

六、+ 建立兄弟標籤的編碼

七、. + 名字能夠在標籤下快速建立標籤而且給到屬性值spa

八、$ 叫計數器從1開始（若是是$$$，就是001開始）\ ul>li{$}*5經過table鍵直接能夠生成1~5的帶內容的標籤 \ ul>li.li${$$$}*5這樣的格式能夠直接生成帶內容和帶順序類名的標籤插件

經常使用標籤excel

單雙標籤

爲何有單雙標籤之分：標籤都有結束標誌 ' / '，均可以省略不寫，可是若是是雙標籤不寫結束標籤，則系統會自動添加，可是有可能添加的位置是不規範的，單標籤則不寫沒有問題

單標籤：都是功能性的（input、img、meta）,不須要內容，單純的完成一個功能

雙標籤：主要用來顯示內容的，以及子標籤及子標籤的內容

標籤的種類（這些標籤都是在body標籤下的）

一、標題標籤（最多6個標題標籤）

<!--瞭解標籤的語義（重點），標籤的功能（重點）-->
<!--h1就表明了一級標籤，h2~h6以次類推-->
<h1>一級標題</h1>
<h2>二級標題</h2>
<h3>三級標題</h3>
<h4>四級標題</h4>
<h5>五級標題</h5>
<h6>六級標題</h6>

二、段落標籤

<p>這是段落1</p>
<p>這是斷落2</p>

三、文本類標籤

<span>我是文本標籤</span>
<i>斜體標籤，能讓字體斜體</i>
<b>加粗標籤</b>
<em>是強調標籤，顯示效果和i標籤一抹一眼</em>
<strong>是強調標籤，以加粗方式強調</strong>

四、功能性標籤

<br>換行標籤
<hr>分割線標籤

<!--超連接標籤-->
<!--href裏面填寫的是跳轉的地址，target就是轉條的方式有四種選擇-->
<a href="http://www.w3school.com.cn/">前往w3school網站</a>
<a href="test.html">去標籤頁面，至關於前往本身的頁面</a>
<a href="http://www.w3school.com.cn/" target="_blank">前往w3school網站,新開一個頁面，targer=_blank就是新開一個標籤頁打開頁面</a>
<a href="http://www.w3school.com.cn/" target="_self">前往w3school網站,新開一個頁面，targer=_self就是當前頁面打開頁面，這是默認值，不寫也能夠</a>
<a href="http://www.w3school.com.cn/" target="_parent">前往w3school網站,新開一個頁面，targer=_parent</a>
<a href="http://www.w3school.com.cn/" target="_top">前往w3school網站,新開一個頁面，targer=_top</a>

<!--圖片標籤-->
<!--src填寫的是數據源（能夠是網絡，能夠是本地），alt資源錯誤的文本提示就是文本加載失敗會有一個名字提示-->
<!--title標籤任意標籤均可擁有，就是鼠標懸停後的提示文本-->
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1548586126459&di=5a825dd41ab71cb657ac586ea4a1a483&imgtype=0&src=http%3A%2F%2Fpcs4.clubstatic.lenovo.com.cn%2Fdata%2Fattachment%2Fforum%2F201607%2F26%2F160423a04glh0k2feaek3z.jpg"
     alt="狗狗"
    title="這是狗狗圖片">
<!--這個就是相對路徑-->
<img src="./111111.jpg" alt="狗狗">

五、組合類標籤

<!--列表標籤-->
<!--列表標籤的用處，就是父標籤下有不少同類的子標籤，放在一塊兒管理，就要使用列表標籤-->
<!--建立標籤的快速寫法就是ul>li,table補全-->
<!--pycharm自帶的一個插件emmet，配合快速寫法(ul>li)*3，用table能夠直接打上3列，*後面的數字是多少就是打上多少列，其餘的編輯器須要安裝這樣的插件-->
<!--ul>li 中間的大於號就是表示ul是li的父級-->

<!--第一種快讀寫法：ul>li,ul下套一個li-->
<ul>
    <li></li>
</ul>

<!--第二種快速寫法:ul>li*3，快速建立一個ul下套三個li-->
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

<!--第三種快速寫法:(ul>li)*3，三個ul下分別各套一個li-->
<!--小竅門：在寫列表標籤的時候使用*數字的格式（ul>li）*3，使用table自動補全，會自動生成3個嵌套的列表標籤,*後面的數字是幾就會生成幾個-->
<ul>
    <li></li>
</ul>
<ul>
    <li></li>
</ul>
<ul>
    <li></li>
</ul>

<!--第四種寫法：ul>li{列表項}*3，快速建立一個ul下有三個帶內容的li-->
<ul>
    <li>列表項</li>
    <li>列表項</li>
    <li>列表項</li>
</ul>

六、表格標籤

<!--表格標籤：table（基本不會使用）-->
<!--border就是邊框，=1就是加粗的等級-->
<!--thead 就是表頭標籤-->
<!--tr是行標籤-->
<!--tfoot 表尾標籤-->
<!--th 就是標題標籤-->
<!--td 就是單元格標籤-->
<!--caption 就是表格標題-->
<!--rules 控制表格內分割線，groups以組爲分割、rows以每行爲分割、cols以列爲分割、all以全部的行和列分割-->
<!--width表示行寬，height表示行高-->
<!--rowspan 表示一個表格佔幾行  \ PS:若是要合併表格一列下的多行，一個表格設置佔了幾行，下面的表格要去除，用來作行合併的-->
<!--colspan 表示一個列下的單格佔幾列，用來作列合併的-->
<table border="1" rules="all" width="500" height="200">
    <caption>表格標題</caption>
    <thead>
        <tr>
            <th>單元格標題</th>
            <th>單元格標題</th>
            <th>單元格標題</th>
            <th>單元格標題</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td rowspan="2">單元格</td>
            <td>單元格</td>
            <td>單元格</td>
            <td>單元格</td>
        </tr>
        <tr>
            <!--<td>單元格1</td>-->
            <td>單元格2</td>
            <!--<td>單元格3</td>-->
            <td colspan="2">單元格4</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>表尾單元格</td>
            <td>表尾單元格</td>
            <td>表尾單元格</td>
            <td>表尾單元格</td>
        </tr>
    </tfoot>

</table>

七、表單標籤

<!--表單標籤（先後臺交互標籤）：from (做用將用戶錄入的信息提交給後臺)-->
<form action="">
    <!--輸入標籤-->
    <!--type就是輸入的類型，type就是文本明文的，password就是密碼類型是密文的，file就是選擇文件的,radio就是圓點選擇框（圓點框必須創建起練習才能選擇其一，不然變成多選框並且沒法取消），checkbox就是方形點選框（能夠多選可取消）-->
    <input type="text" name="user">
    <input type="password" name="user">

    <!--文本域標籤-->
    <!--textarea 就是文本域，文本域是能夠鼠標拖動縮放的-->
    <textarea name="" id="" cols="30" rows="10"></textarea>

    <!--文件選擇標籤-->
    <input type="file">

    <!--下拉選擇列表標籤-->
    <!--select 就是列表標籤，這個不是普通的excel樣式的列表，是網頁一個被收納鼠標點擊後會展開的列表-->
    <!--option 就是列表標籤內選擇項的功能標籤-->
    <select name="" id="">
        <option value="">語文</option>
        <option value="">數學</option>
        <option value="">外語</option>
    </select>

    <hr>
    <!--展現標籤-->
    <!--label 就是展現標籤，用來作文本選擇提示的-->
    <label for="">性別</label>
    
    <!--圓點選擇框標籤-->
    <!--name是惟一標示，這個屬性就是將選擇框創建起聯繫，radio內加就是隻能選一個，checked 就是默認屬性（radio和checkbox兩個屬性均可以加這個默認屬性），checked是一個特殊的屬性叫作布爾值屬性，無論賦值任何值，都等於自身，不賦值checked的值默認就是本身)-->
    男<input type="radio" name="sex" checked>
    女<input type="radio" name="sex">
    <hr>
    <label for="">喜歡吃的東西</label>
    
    <!--方形複選框標籤-->
    西瓜<input type="checkbox" name="like">
    香蕉<input type="checkbox" name="like">
    蘋果<input type="checkbox" name="like">
    <hr>
    
    <!--按鈕標籤-->
    <!--按鈕標籤就是提交標籤,會將表單標籤內帶有name屬性的標籤得到的值提交到後臺-->
    <!--按鈕標籤也有類型選擇，默認是submit提交按鈕,button就是普通按鈕點擊不會提交，reset就是重置按鈕(將用戶輸入的內容清除)-->
    <button type="submit">提交按鈕</button>
    <button type="button">普通標籤</button>
    <button type="reset">重置標籤</button>
    <hr>
    
    <!--input標籤作提交按鈕-->
    <!--input提交按鈕的文本提示要寫在values的值-->
    <input type="submit" values="input也能夠作提交按鈕">
    
</form>