介紹

說(shuō)起HTML標(biāo)簽，很多人都覺(jué)得很簡(jiǎn)單，比如我剛開始學(xué)的時(shí)候就是寫網(wǎng)頁(yè)不會(huì)的就去W3C school里去查標(biāo)簽，屬性。每次都是查完就忘了，而且那個(gè)網(wǎng)頁(yè)還特丑，訪問(wèn)還特慢，不如這次就好好的總結(jié)一下常用的HTML標(biāo)簽吧。

語(yǔ)義化

以前總是喜歡<div/>和<span/>，用這兩個(gè)東西寫遍天下的網(wǎng)頁(yè)。后來(lái)在知乎逛多了才知道語(yǔ)義的重要性，簡(jiǎn)單來(lái)說(shuō)就是能用有字面意思的標(biāo)簽就用字面意思的標(biāo)簽，如<main/>表示主要內(nèi)容，<section/>表示每個(gè)區(qū)塊，這樣別人看自己的HTML代碼的時(shí)候就會(huì)一目了然。

下面給出常用的語(yǔ)義化標(biāo)簽

<header>
    <nav>
        <ul>
            <li>主頁(yè)</li>
            <li>產(chǎn)品</li>
            <li>關(guān)于我們</li>
        </ul>
    </nav>
</header>

<aside>
    我的廣告
</aside>

<main>主要內(nèi)容</main>
<section>區(qū)塊1</section>
<section>區(qū)塊2</section>

<article>
    <h1>主要標(biāo)題</h1>

    <hr>

    <h2>次要標(biāo)題</h2>
    <p>第一自然段</p>
    <p>第二自然段</p>

    <h2>次要標(biāo)題</h2>
    <p>第一自然段</p>
    <p>第二自然段</p>
</article>

<footer>
    <small>版權(quán)所有</small>
</footer>

可替換標(biāo)簽

CSS 里，可替換元素（replaced element）的展現(xiàn)不是由CSS來(lái)控制的。這些元素是一類外觀渲染獨(dú)立于CSS的 外部對(duì)象。

比如常用的<img/>，瀏覽器會(huì)先下載圖片，然后用圖片將這個(gè)標(biāo)簽替換掉。

<iframe/>

用法

<iframe src="https://www.baidu.com" name="xxx"></iframe>

和<a/> 一起用

在iframe里指定name，在a里指定target，這個(gè)target指向iframe里的name，這樣就可以將a里面鏈接的內(nèi)容投射到iframe里了。

<iframe src="#" name="xxx" frameborder="0"></iframe>
<a href="www.baidu.com" target="xxx">Baidu</a>
<a href="www.qq.com" target="xxx">QQ</a>

注意：

• 用iframe很卡，相當(dāng)于新打開一個(gè)網(wǎng)頁(yè)
• frameborder就是iframe的邊框?qū)挾龋罅?，一般設(shè)置為0

<a/>

這個(gè)標(biāo)簽可能我們都很熟悉，就是跳轉(zhuǎn)頁(yè)面的，但是還可以發(fā)送GET請(qǐng)求。

target

target屬性是每用一次查一次，這里就簡(jiǎn)單總結(jié)一下

• target="" 默認(rèn)為_blank，會(huì)在新窗口里打開
• target = "_blank" 新打開一個(gè)新的窗口，并打開
• target = "_self" 在當(dāng)前窗口打開，如果嵌在別的頁(yè)面的iframe里，則在iframe里打開: index1 -> index2，打開index2
• target = "_parent" 如果嵌在別的頁(yè)面的iframe元素里，則不在iframe元素里打開，而是那個(gè)窗口打開: 如果index1 -> index2，打開index1
• target = "_top" 在頂層窗口打開，如果 index1 -> index2 -> index3 ，一個(gè)套一個(gè)，那么在index1里點(diǎn)擊，則會(huì)在index1打開
• target="xxx" 在name="xxx"`的iframe里打開網(wǎng)頁(yè)

download

• download屬性，下載src里的內(nèi)容

href

• href="qq.com" -> 會(huì)變成相對(duì)路徑，不能正常訪問(wèn)qq.com，應(yīng)該寫成https://ww.qq.com，//qq.com（使用當(dāng)前頁(yè)面的協(xié)議）
• href="xxx.html" -> /xxx.html，以當(dāng)前目錄為基準(zhǔn)
• href="#iiiii"直接加到 index.html 后面 -> index.html#iiii，只做頁(yè)面內(nèi)的跳轉(zhuǎn)，不發(fā)起Get請(qǐng)求
• href="?name=hi"瀏覽器自動(dòng)判斷意思，將查詢放到index.html后面 -> index.html?name=hi，自動(dòng)發(fā)起Get請(qǐng)求
• href="javascript: alert('hi')"偽協(xié)議，可以寫JS代碼，直接執(zhí)行JS代碼。以前想點(diǎn)一個(gè)東西就執(zhí)行代碼，不寫onclick事件。用法：javascript:; -> 點(diǎn)擊一個(gè)a標(biāo)簽，但是不跳轉(zhuǎn)

<form/>

form的作用一般是展示一個(gè)表單，而一般用來(lái)發(fā)送POST請(qǐng)求。并而只能發(fā)送GET和POST請(qǐng)求，RESTful的其他請(qǐng)求都不能發(fā)送。

示例

<form action="users" method="post">
        <input type="text">
      <input type="submit" value="提交">
</form>

提交

一般來(lái)說(shuō)要加上method="POST"來(lái)發(fā)送POST請(qǐng)求，一般不發(fā)送GET請(qǐng)求，需要submit按鈕來(lái)提交去發(fā)送POST請(qǐng)求。

注意：如果用HTTP協(xié)議來(lái)發(fā)送請(qǐng)求，那么數(shù)據(jù)將以明文形式傳給服務(wù)器，如果想加密，那么必須用HTTPS來(lái)發(fā)送POST請(qǐng)求。

x-www-form-urlencoded

如果打開Chrome的Network會(huì)看到發(fā)請(qǐng)求的格式（Content-Type）是x-www-form-urlencoded，這就表示發(fā)請(qǐng)求的數(shù)據(jù)是用UTF-8來(lái)表示字符的，如：“你”就變成了%E4%BD%A0，其中E4 BD A0就是“你”。

target

其實(shí)很多人也不知道還有這個(gè)target屬性的，這個(gè)target屬性和標(biāo)簽<a/>里的target值是一樣的，也是控制在哪個(gè)地方打開新的網(wǎng)頁(yè)。

<input/>

<label/>

這個(gè)標(biāo)簽可以讓我們點(diǎn)擊文本的時(shí)候同時(shí)選中<input/>里的內(nèi)容。不過(guò)一般人會(huì)這么寫

<label for="xxx">Label</label>
<input id="xxx" type="radio" name="fruit" value="apple">

但是這樣要寫個(gè)ID，我們都知道一般不會(huì)給HTML元素起ID的，所以可以用<label/>標(biāo)簽包裹<input/>元素

<label >
    Hello
    <input type="checkbox" name="love" >
</label>

radio / checkbox

其實(shí)剛開始學(xué)radio或者checkbox的時(shí)候，總會(huì)發(fā)現(xiàn)怎么沒(méi)有了這個(gè)field的數(shù)據(jù)，其實(shí)我們都比較容易忘記加上name屬性啦，所以正確打開方式是

你喜歡的水果
<label >
    Banana
    <input type="checkbox" name="fruit" value="banana">
</label>
<label >
    Apple
    <input type="checkbox" name="fruit" value="apple">
</label>

愛我？
<label >
    愛
    <input type="radio" name="love" value="yes">
</label>
<label >
    不愛
    <input type="radio" name="love" value="no">
</label>

button / submit

我們經(jīng)常會(huì)遇到這樣的情況，有時(shí)候加<button/>就可以提交表單，有時(shí)候加<input/>也可以提交，但是不知道怎么回事，又不行了。下面說(shuō)下這些坑

• 如果一個(gè)form里只有一個(gè)按鈕沒(méi)有寫type <button>提交</button>，button標(biāo)簽，那么會(huì)自動(dòng)升級(jí)為submit
• 如果按鈕的寫了type <button type="xxx">點(diǎn)我</button>，而不會(huì)變成submit
• 如果寫了一個(gè)<input type="button>"，那么也是不能提交的，因?yàn)檫@只是一個(gè)普通的button
• 如果寫了<input type="submit">，那么點(diǎn)擊就可以提交

<textarea/>

關(guān)于這個(gè)標(biāo)簽，我們可能最不爽的就是可以拉動(dòng)這個(gè)元素，可以添加CSS來(lái)控制這個(gè)行為。

textarea {
    resize: none;
}

雖然這個(gè)標(biāo)簽有屬性 cols 和 rows ，但是一般不推薦使用，最好還是用CSS來(lái)控制元素的樣式，因?yàn)檫@兩個(gè)屬性控制的不是那么準(zhǔn)確。

<select/>

當(dāng)我們想弄一個(gè)下拉菜單的時(shí)候，總想著Bootstrap里的<button/> + <ul/>，但是HTML里已經(jīng)提供了這種元素啦，就是<select/>。

下拉菜單的每個(gè)菜單為<option/>，有屬性 disabled 控制是否可選；selected 控制是否開始就選中哪一項(xiàng)。

<select name="group">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3" disabled>3</option>
    <option value="4" selected>4</option>
</select>

<table/>

這個(gè)元素用起來(lái)只要按照標(biāo)準(zhǔn)用法來(lái)就好了。不過(guò)我們可能不太熟悉還有<colgroup/>和<col/>標(biāo)簽吧，他們是控制每一列的大小的，單位是px。

<table border="1">
    <colgroup>
        <col width="100">
        <col bgcolor="red" width="200">
    </colgroup>
    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Sam</td>
            <td>12</td>
        </tr>
        <tr>
            <td>Amy</td>
            <td>18</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>OK</td>
            <td>118</td>
        </tr>
    </tfoot>
</table>

<col/> 和 <colgroup/>

• width 表示每一列的寬度 + px
• bgcolor 表示每一列的顏色

注意事項(xiàng)

• th -> 表里的項(xiàng)目
• td -> 表里的數(shù)據(jù)
• thead,tbody,tfoot 不管怎么放，順序都是一樣的，瀏覽器會(huì)自動(dòng)排順序
• 如果沒(méi)有寫thead，所以內(nèi)容都放到tbody里，如果不寫tbody，瀏覽器會(huì)自動(dòng)加上tbody
• 可以在CSS去掉table中間的空間

table {
    border-collapse: collapse;
}