HTML常用標(biāo)簽簡(jiǎn)介

MDN中所列出的html標(biāo)簽列表

1. 一些簡(jiǎn)單的常見(jiàn)標(biāo)簽

• <h1>- <h6> 標(biāo)題元素
• <p> 段落元素
• <ul> 無(wú)序列表
• <ol> 有序列表
• <small> 不重要的文字
• <strongv 重要的文字
• <kbd> 鍵盤(pán)輸入元素
• <video> 視頻元素 audio> 音頻元素
• <svg> 可縮放矢量圖形
• <div> 區(qū)塊元素
• <span> 短語(yǔ)內(nèi)容

2. <a>&&<ifram>

• <a> 錨點(diǎn)，在http中進(jìn)行g(shù)et請(qǐng)求，有以下常用屬性
  （1）href 屬性：必需屬性，為錨定義一個(gè)超文本鏈接來(lái)源
  ==> href="qq.com" 會(huì)當(dāng)成文件打開(kāi)（因未設(shè)定打開(kāi)協(xié)議）
  ==> 無(wú)協(xié)議絕對(duì)地址，當(dāng)前時(shí)什么協(xié)議就以什么協(xié)議打開(kāi)
  ==> href="index.html" 相對(duì)路徑，以ftp協(xié)議
  ==> href="#XX" 定義當(dāng)前頁(yè)面的錨點(diǎn)
  ==> href="?xx=yy" 查詢(xún)參數(shù)
  ==> href="javascript:alert('1')" JavaScript偽協(xié)議
  ==> href="javascript:;" 為達(dá)到點(diǎn)擊鏈接不做跳轉(zhuǎn)的效果
  （2）target 屬性：該屬性指定在何處顯示鏈接的資源，可以<iframe>標(biāo)簽連用，指向iframe的name
  ==> target=_blank 在新的頁(yè)面打開(kāi)
  ==> target=_self 在自身打開(kāi)
  ==> target=_top 若在iframe中，在其最外層打開(kāi)
  ==> target=_parent 若在iframe中，在其上一層iframe打開(kāi)
  （3）download 屬性：當(dāng)網(wǎng)頁(yè)的響應(yīng)Content-Type設(shè)置為“application/octet-stream”時(shí)，可以不用download
  當(dāng)Content-Type設(shè)置為“text/html”時(shí)，若想下載如<a href="index.html" download>link</a>必須用download
• <iframe> 內(nèi)聯(lián)框架元素，有以下常用屬性
  ==> src 屬性 iframe指向的路徑
  ==> name 屬性 與<a>標(biāo)簽配合使用，用于<a>標(biāo)簽的指向鏈接
  ==> frameborder 屬性 iframe標(biāo)簽外邊框，一般設(shè)置為0

3. 表單標(biāo)簽

注：表單元素若要正常提交至服務(wù)器，需有name屬性

• <form> 在http中一般進(jìn)行post請(qǐng)求
  ==> action 屬性 用于制定表單提交的目標(biāo)
  ==> method 屬性 用于表示表單以何種方式發(fā)至目標(biāo)
  ==> target 屬性 同<a>標(biāo)簽的target
• <input type="submit">&&<input type="button">&&<button>
  PS：一個(gè)表單中，必須得有提交按鈕，否則表單數(shù)據(jù)無(wú)法提交
  ==> <input type="submit"> 提交按鈕，輸入完數(shù)據(jù) <kbd>Enter</kbd> 即可上傳表單數(shù)據(jù)
  ==> <button> 一個(gè)表單中若沒(méi)有提交按鈕，僅有button標(biāo)簽，該標(biāo)簽會(huì)自動(dòng)升級(jí)為submit
  ==> <input type="button"> 這么寫(xiě)就僅僅是一個(gè)普通的按鈕，即使表單沒(méi)有提交按鈕也不會(huì)自動(dòng)升級(jí)
• <input typt="checkbox>"&&<label>
  ==> <input type="checkbox"> 復(fù)選框
  ==> 達(dá)到點(diǎn)擊文字就可以選中復(fù)選框時(shí)可以和<label>連用，如：
  <input type="checkbox" id="btn"> <label for="btn">apple</label>
  不過(guò)常用下面這種寫(xiě)法：
  <label>apple<input type="checkbox"></label>
• <input type="radio"> 單選框，也可以同復(fù)選框一樣與<label>標(biāo)簽連用
  若達(dá)到幾個(gè)單選框只能選擇一個(gè)的效果，要設(shè)置一樣的name屬性
• <select> 下拉表單，常用的有name屬性，multiple（可多選）屬性
• <option> 下拉表單中的選項(xiàng)，有以下常用屬性
  ==> <optgroup> 為多個(gè)option標(biāo)簽劃分一個(gè)組，用label屬性設(shè)置組名，如:

 <optgroup label="x1">
      <option value="1">10</option>
      <option value="2">12</option>
 </optgroup>

==> <option>標(biāo)簽的常用屬性有value,設(shè)置選項(xiàng)上傳至服務(wù)器的值
disabled 屬性 設(shè)置選型不可選
selected屬性 設(shè)置該選項(xiàng)默認(rèn)選中

• <textarea> 多行文本域
  ==> 雖然該標(biāo)簽有cols屬性和rows屬性分別控制列數(shù)和行數(shù)，但都不是很準(zhǔn)確，所以一般<texrtarea>標(biāo)簽的大小用css的height和width來(lái)控制
  ==> 在css中，還可以設(shè)置其resize=none;用來(lái)控制該多行文本域不可被用戶(hù)拉動(dòng)，防止影響網(wǎng)頁(yè)布局

4. <table>表格元素

• <table>表格標(biāo)簽中只能有<thead>、<tbody>、<tfoot>三種標(biāo)簽。
• 如果沒(méi)有<thead>和<tfoot>標(biāo)簽，所有的內(nèi)容默認(rèn)添加在<tbody>標(biāo)簽中，如果沒(méi)有<tbody>標(biāo)簽，瀏覽器會(huì)自動(dòng)添加。
• 在設(shè)置了<thead>、<tbody>、<tfoot>三種標(biāo)簽后，三種標(biāo)簽在代碼中的順序?qū)⒉粫?huì)影響網(wǎng)頁(yè)渲染的效果，永遠(yuǎn)以<thead>、<tbody>、<tfoot>順序進(jìn)行展示。
• <td>表示表的數(shù)據(jù)、<th>表示表頭(默認(rèn)樣式包括加粗和居中)，<tr>表示每一行
• 所有的<td>、<th>標(biāo)簽都要在<tr>標(biāo)簽里面
• <colgroup>(有閉合標(biāo)簽)、<col>(空標(biāo)簽)
  代碼實(shí)例參上，以觀(guān)標(biāo)簽效果

<table border=1>
    <colgroup>
      <col width=100> <!-- 控制第一列的寬度-->
      <col width=100 bgcolor="blue"><!-- 控制第二列的寬度和背景顏色-->
      <col width=100>
      <col width=100>
    </colgroup>
    <thead>
      <tr>
        <th>h1</th>
        <th>h2</th>
        <th>h3</th>
        <th>h4</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>11</td>
        <td>12</td>
        <td>13</td>
        <td>14</td>
    </tbody>
    <tfoot>
      <tr>
        <td>31</td>
        <td>32</td>
        <td>33</td>
        <td>34</td>
      </tr>
    </tfoot>
  </table>

• css中，設(shè)置標(biāo)簽的邊框合并

table{
     border-collapse:collapse;
   }

5. 常用的內(nèi)容分區(qū)語(yǔ)義化標(biāo)簽

• <article> 表示文檔、頁(yè)面、應(yīng)用或網(wǎng)站中的獨(dú)立結(jié)構(gòu)
• <aside> 其通常表現(xiàn)為側(cè)邊欄或者嵌入內(nèi)容
• <footer> 表示最近一個(gè)章節(jié)內(nèi)容或者根節(jié)點(diǎn)元素的頁(yè)腳
• <header> 表示一組引導(dǎo)性的幫助，可能包含標(biāo)題元素
• <nav>導(dǎo)航欄，描繪一個(gè)含有多個(gè)超鏈接的區(qū)域
• <section> 表示文檔中的一個(gè)區(qū)域（或節(jié)），比如，內(nèi)容中的一個(gè)專(zhuān)題組，一般來(lái)說(shuō)會(huì)有包含一個(gè)標(biāo)題
• <dl>、<dt>、<dd>
  ==> <dl>是一個(gè)包含術(shù)語(yǔ)定義以及描述的列表
  ==> <dt>用于在一個(gè)定義列表中聲明一個(gè)術(shù)語(yǔ)
  ==> <dd> 用來(lái)指明一個(gè)描述列表<dl>元素中一個(gè)術(shù)語(yǔ)的描述
• <main> 表示文檔的主體內(nèi)容，由與文檔直接相關(guān)，或者擴(kuò)展于文檔的中心主題、應(yīng)用的主要功能部分的內(nèi)容組成。
• <address> 可以讓作者為它最近的<article>或者<body>]祖先元素提供聯(lián)系信息。在后一種情況下，它應(yīng)用于整個(gè)文檔。