這里我假設(shè)大家已經(jīng)對(duì)html標(biāo)簽有了基本了, 所以一些基本標(biāo)簽如div, p， h1等簡(jiǎn)單的標(biāo)簽我就不做介紹了, 我下面只介紹常用標(biāo)簽中的幾個(gè)需要注意的點(diǎn)

iframe標(biāo)簽

一個(gè)網(wǎng)頁(yè)中嵌套頁(yè)面, 現(xiàn)在用的不多了, 但是維護(hù)老項(xiàng)目可能會(huì)用到, 使用iframe后, 頁(yè)面會(huì)變卡

iframe標(biāo)簽寫法沒有太大難度, 基本上就是下面這樣

<iframe src="http://www.qq.com" frameborder="0"></iframe>

• src 嵌套頁(yè)面的路徑, 可以是相對(duì)路徑
• frameborder=0 嵌套頁(yè)面的邊框, 為0時(shí)不現(xiàn)實(shí)邊框, 一般我們也不寫

實(shí)現(xiàn)效果如下

iframe

其實(shí)ifame我們一般可以配合a便簽使用的
我們給iframe一個(gè)name屬性xxx, 然后在a標(biāo)簽中給一個(gè)target屬性xxx, 當(dāng)我們點(diǎn)擊a鏈接的時(shí)候, a鏈接的內(nèi)容就會(huì)現(xiàn)實(shí)在iframe中, 如下代碼

  <iframe name ="xxx" src="" frameborder="0"></iframe>
  <a target="xxx" >qq</a>
  <a target="xxx" >百度</a>

當(dāng)我們點(diǎn)擊qq鏈接時(shí), iframe就會(huì)出現(xiàn)qq主頁(yè)

qq

當(dāng)我們點(diǎn)擊百度時(shí), 就會(huì)出現(xiàn)百度主頁(yè)

百度

a標(biāo)簽

a標(biāo)簽最大的作用就是給服務(wù)器發(fā)送get請(qǐng)求宾娜，a標(biāo)簽中我們需要注意的一個(gè)是target屬性, 還有一個(gè)就是download屬性, 最后就是href支持的類型

  <a href="" target="_blank">新頁(yè)面打開鏈接</a>
  <a href="" target="_self">當(dāng)前頁(yè)面打開鏈接</a>
  <a href="" target="_parent">父元素打來(lái)鏈接</a>
  <a href="" target="_top">頂層元素打開鏈接</a>
  <a  download>下載鏈接內(nèi)容</a>

href可用的路徑類型

• 絕對(duì)路徑
  href="/src/css/style.css"

• 相對(duì)路徑
  href="src/css/style.css"
href="qq.com"

• 錨點(diǎn)
  href="#5"

• 查詢參數(shù)
  href="?name=Adam"

• 無(wú)協(xié)議絕對(duì)路徑
  當(dāng)前文件用什么協(xié)議就是什么協(xié)議

• url地址
  直接打開網(wǎng)址

• javascript偽協(xié)議
  href="javascript: alert(1)" 執(zhí)行alert代碼,
  這種情況一般用于防止a標(biāo)簽跳轉(zhuǎn), 設(shè)置href="javascript:;"后, 點(diǎn)擊a標(biāo)簽, 將不會(huì)進(jìn)行任何跳轉(zhuǎn)

form標(biāo)簽

對(duì)于form標(biāo)簽, 我們首先要記住下面幾句話

1. form標(biāo)簽主要是為了發(fā)送post請(qǐng)求
2. form表單內(nèi)使用submit提交表單, 所以請(qǐng)不要忘記添加submit按鈕
3. input中的name對(duì)應(yīng)HTTP請(qǐng)求第四部分請(qǐng)求中的key, 輸入的值對(duì)應(yīng)第四部分的value
4. form標(biāo)簽是有target屬性的, 什么是target屬性??? 往上翻a標(biāo)簽章節(jié)啊!
5. form標(biāo)簽其實(shí)是可以發(fā)送get請(qǐng)求的, 但是如果我們只是為了拿數(shù)據(jù)的話, 那為什么不用a標(biāo)簽?zāi)?

下面我們看一段代碼

<form action="user" method="post">
  <input type="text" name="username">
  <input type="password" name="password">
  <input type="submit">
</form>

我們輸入賬號(hào)密碼, 點(diǎn)提交后

輸入賬號(hào)密碼

我們會(huì)看到在HTTP請(qǐng)求中會(huì)有一個(gè)請(qǐng)求,

• 我們會(huì)發(fā)現(xiàn)這個(gè)請(qǐng)求的路徑是/user,對(duì)應(yīng)我們的form的action="user"
• 請(qǐng)求方法是POST, 對(duì)應(yīng)form的method="post"
• form data里面的請(qǐng)求體是username=adam&password=123456789
  細(xì)心的同學(xué)一定發(fā)現(xiàn)了這兩組數(shù)據(jù)剛好對(duì)應(yīng)了我們上面兩個(gè)input, 等號(hào)前面的key對(duì)應(yīng)我們input的name屬性, 等號(hào)后面的value對(duì)應(yīng)我們輸入的內(nèi)容
• 從上面的分析我們就可以看出, form表單實(shí)際上就是用來(lái)發(fā)送HTTP請(qǐng)求的

image.png

input標(biāo)簽

1. button標(biāo)簽和type="submit"區(qū)別

   • 如果一個(gè)form里只有一個(gè)button標(biāo)簽, <button></button>會(huì)自動(dòng)轉(zhuǎn)變?yōu)?<input type="submit">
   • input中的type=button不能自動(dòng)轉(zhuǎn)變?yōu)閟ubmit

2. label

• label標(biāo)簽的for和input的id是一對(duì)

 <form action="user" method="post">
   <label for="a">用戶名</label>
   <input type="text" name="username" id="a">
   <button>aa</button>
</form>

通常情況下, 我們只有點(diǎn)擊input輸入框才能輸入內(nèi)容的, 當(dāng)把label的for和input的id設(shè)為一樣時(shí)候, 點(diǎn)擊label, 相應(yīng)的input輸入框也可以輸入內(nèi)容了,如下面的圖, 當(dāng)設(shè)置label后, 我們點(diǎn)擊用戶名三個(gè)字, 輸入框也是可以輸入的, label適用于很多type, 如text, checkbox的等

image.png

• 不過老司機(jī)們都比較懶, 覺得每次輸入for和id很麻煩, 那么其實(shí)我們用label把input包裹起來(lái)也能達(dá)到這個(gè)效果

<form action="user" method="post">
  <label>用戶名
    <input type="text" name="username">
  </label>
  <button>aa</button>
</form>

3. checkbox
   記得給name和value啊, 不然服務(wù)器不好拿到數(shù)據(jù)啊

   <form action="user" method="post">
       <input type="checkbox" name="fruit" value="orange">橘子
       <input type="checkbox" name="fruit" value="apple">蘋果
       <input type="checkbox" name="fruit" value="banana">香蕉
     <input type="submit">
   

   我們點(diǎn)蘋果和香蕉啊

   
   
   水果

   請(qǐng)求體里面有了吧批狐？

請(qǐng)求體

4. radio
   radio我們只記住一句話就好, 只要給若干個(gè)radio同一個(gè)name屬性, 就能實(shí)現(xiàn)單選功能

5. select
   關(guān)于select主要強(qiáng)調(diào)以下幾點(diǎn)

   • select標(biāo)簽跟input標(biāo)簽一樣, name對(duì)應(yīng)請(qǐng)求頭第四部分的key, value對(duì)應(yīng)第四部分的value

   • select一定是和option成對(duì)出現(xiàn)的

   • select設(shè)置multiple后, 按住鍵盤ctrl可以多選

   • 設(shè)置disabled的option不能選擇

   • 設(shè)置selected的option是默認(rèn)選項(xiàng)

     下面是典型的select代碼

<form action="user" method="post">
  <select name="fruit" multiple>
    <option value="apple">蘋果</option>
    <option value="orange">橘子</option>
    <option value="banana" disabled>香蕉</option>
    <option value="peach" selected>桃子</option>
    <input type="submit">
  </select>
</form>

6. textarea

   • textarea的特殊點(diǎn)在于可以通過拖動(dòng)鼠標(biāo)改變輸入框大小, 這樣很容易由于用戶隨意拖動(dòng)輸入框破壞我們頁(yè)面的布局, 因此一般情況下我們都會(huì)固定寬高, 禁止拖動(dòng), 我們可以通過設(shè)置style="resize: none"來(lái)禁止拖動(dòng)輸入框

   • 雖然可以通過col和rows來(lái)設(shè)置行數(shù)和列數(shù), 但是依然建議通過css來(lái)控制輸入框大小而不是痛毆過行列來(lái)設(shè)置
     典型的textarea代碼

  <form action="user" method="post">
    <textarea style="resize: none" name="愛好" cols="30" rows="10"></textarea>
    <input type="submit">
  </form>

table

table主要就是寫起來(lái)復(fù)雜, 其他倒沒什么

  <table border=1>
    <colgroup>
      <col width=100px>
      <col width=200px>
      <col width=50px>
      <col width=150px>
    </colgroup>
    <thead>
      <tr>
        <th>項(xiàng)目</th><th>姓名</th><th>班級(jí)</th><th>分?jǐn)?shù)</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th></th><td>小明</td><td>1</td><td>95</td>
      </tr>
      <tr>
        <th></th><td>小紅</td><td>1</td><td>96</td>
      </tr>
    </tbody>
          <tr>
        <th>平均分</th><td></td><td></td><td>95.5</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <th>總分</th><td></td><td></td><td>191</td>
      </tr>
    </tfoot>
  </table>

具體的每個(gè)標(biāo)簽代表啥, 看下面的

table