本文的目的通過(guò)重點(diǎn)標(biāo)簽的學(xué)習(xí)前進(jìn)

一、 iframe 的學(xué)習(xí)

iframe通俗的的理解就是，可以在頁(yè)面里面嵌套新的頁(yè)面
它的使用會(huì)使頁(yè)面變卡，一般會(huì)有一個(gè)固定的尺寸，默認(rèn)的。他也屬于可替換元素行列。我們可以通過(guò)CSS來(lái)改變尺寸
frameborder消除邊框
name屬性與a標(biāo)簽結(jié)合

<!-- <iframe name=iframe src="http://qq.com" ></iframe> -->

<iframe name="000" src="" ></iframe>
<a target="000" >aaaa</a>

a標(biāo)簽的鏈接會(huì)在iframe的內(nèi)嵌窗口里面打開(kāi)

二、a標(biāo)簽的學(xué)習(xí)

a標(biāo)簽四種常見(jiàn)的target

       <a  target="_blank">topQQ</a> //在新的頁(yè)面打開(kāi)鏈接
        <a  target="_self">topQQ</a> //在當(dāng)前窗口打開(kāi)鏈接
        <a  target="_parent">parentQQ</a> //在父級(jí)
        <a  target="_top">topQQ</a> // 在頂級(jí)
        

a標(biāo)簽可以設(shè)置download屬性，使其不打開(kāi)鏈接。而是下載當(dāng)前頁(yè)面的HTML。
也可以把你當(dāng)前目錄下的文件下載。

 <a  download>下載</a>
 <a href="222/分配的ip地址.xls" download>下載文件</a>

a標(biāo)簽會(huì)自動(dòng)添加當(dāng)前頁(yè)面的協(xié)議。例如以下例子，如果不寫http協(xié)議，會(huì)根據(jù)當(dāng)前頁(yè)面的協(xié)議自動(dòng)加上，如果當(dāng)前頁(yè)面是http協(xié)議（通過(guò)下面的http-server模擬），那么就打開(kāi)qq.com，如果只是本地的HTML，那么協(xié)議時(shí)file協(xié)議，不會(huì)下載

<a  download>下載</a>

<a  download>下載</a>

a標(biāo)簽會(huì)在地址欄后加上錨點(diǎn)，即#開(kāi)始的那串字符串

<a href="#kkkk" download>下載文件</a>

a標(biāo)簽會(huì)在地址欄后加上?name=wushao

一定要記得a標(biāo)簽可以發(fā)起get請(qǐng)求

<a href="?name=wushao" download>下載文件</a>

a標(biāo)簽可以使用偽協(xié)議，這是歷史遺留問(wèn)題，以前的前端想在a標(biāo)簽里面直接打開(kāi)js代碼。現(xiàn)在常用于一些奇葩需求。
如果，你不想這個(gè)a標(biāo)簽，有任何動(dòng)作，無(wú)法點(diǎn)擊，就用偽協(xié)議。

<a href="javaScript:;" target="_top">topQQ</a> //無(wú)法操作了
<a href="javaScript:alert(1);" target="_top">topQQ</a>

反之如果你只是加錨點(diǎn)，那么會(huì)定位到開(kāi)始位置。
如果你href=" "，那么會(huì)刷新頁(yè)面。
綜上所述，如果你對(duì)a標(biāo)簽什么也不想做，就用偽協(xié)議,詳見(jiàn)MDN 的a標(biāo)簽

無(wú)障礙建議

錨點(diǎn)標(biāo)簽常常通過(guò)將 href 屬性設(shè)置為 "#" 或 "javascript:void(0)" 來(lái)創(chuàng)造一個(gè)能阻止頁(yè)面刷新的偽按鈕的方式被濫用。 這些屬性值會(huì)在拖動(dòng) / 復(fù)制鏈接時(shí)導(dǎo)致意外行為，在新窗口 / 新標(biāo)簽打開(kāi)鏈接，加入書(shū)簽以及 JavaScript 仍在下載時(shí)會(huì)出現(xiàn)錯(cuò)誤或被禁用。這也會(huì)向輔助技術(shù)（如屏幕閱讀器）傳達(dá)不正確的語(yǔ)義。在這些情況下，推薦使用 <button>來(lái)代替。通常情況下，您應(yīng)該只將錨點(diǎn)用于正常的 URL 導(dǎo)航。

那么就有三種寫法了

• href="javaScript:;"
• href="javaScript:void(0);"
  或者直接 href="#"

小型服務(wù)器 npm i -g http-server
它會(huì)安裝在npm目錄下，把bin目錄添加到~/.bashrc腳本配置文件里面，在文件的最后一行加上

export PATH="http-server的絕對(duì)路徑:$PATH"

配置好path之后，就可以直接使用了。
在你想模擬http協(xié)議環(huán)境的時(shí)候，在那個(gè)目錄下打開(kāi)http-server就可以用了

三、form標(biāo)簽的學(xué)習(xí)

form a 標(biāo)簽最大的區(qū)別就是form標(biāo)簽是post提交，雖然你可以修改成get,但是沒(méi)有人蛋疼的這么做。

• 默認(rèn)的get方法演示

<form action="users" >
        用戶:<input type="text" name="name"><br>
        密碼:<input type="text" name="password"><br>
        <!-- <input type="submit" value="提交"> -->
        <input type="button" name="button" value="button">
        <button type="submit">提交</button>
 </form>

form默認(rèn)的get方法.png

以上是智障的寫法，下面是優(yōu)雅的寫法。

• 注意form必須要用一個(gè)type=submit的input不然無(wú)法提交數(shù)據(jù)?。。。?/li>

<form action="users"  method="post">
        用戶:<input type="text" name="name"><br>
        密碼:<input type="text" name="password"><br>
        <input type="submit" value="提交">
        <input type="button" name="button" value="button">
 </form>

type是submit和button.png

form方法post的方法.png

• 以前我們?cè)谡?qǐng)求里面只能看見(jiàn)前三個(gè)部分，有了form標(biāo)簽之后，終于能看到第四部分，form data啦

  
  
  post解析.png
• 如果你的form表單里面沒(méi)有一個(gè)type=submit的input,可以使用type=submit的button的標(biāo)簽,也可以使用<button >提交</button>

  <form action="users" >
        用戶:<input type="text" name="name"><br>
        密碼:<input type="text" name="password"><br>
        <!-- <input type="submit" value="提交"> -->
        <input type="button" name="button" value="button">
        <button type="submit">提交</button>
        //等價(jià)于 <button >提交</button>
    </form>

form表單有且只有兩個(gè)方法，你不規(guī)定method那么就是get,你就是智障；所以你規(guī)定method="post"，你不智障；如果你寫了這兩種之外的方法，那么還是按照get方法提交，你是智障中的戰(zhàn)斗機(jī)。

四、input button標(biāo)簽的學(xué)習(xí)

• input button 標(biāo)簽的最大區(qū)別就是input標(biāo)簽是空標(biāo)簽。
• input 標(biāo)簽的type有很多種,后期我有接觸到了type="file"，還可以加上multiple，上傳多文件。（12.28更新）
  而且input必須有name屬性，因?yàn)槟闾峤坏臄?shù)據(jù)要用，組成name=value。

<input id="POST-name" type="text" name="name"> //普通文本
<input id="POST-name" type="password" name="password"> //密碼
<input id="POST-name" type="submit" value="提交"> //提交
<input id="POST-name" type="checkbox" name="name"> //復(fù)選框
<input id="POST-name" type="radio" name="name"> //單選框

• 復(fù)選框和單選框的小練習(xí)

   <form action="users" method="post">
        用戶:<input type="text" name="name"><br>
        密碼:<input type="text" name="password"><br>
        <!-- <input type="submit" value="提交"> -->
        <input type="button" name="button" value="button">
        <button type="submit">提交</button>
        <br>
        <input id="love" type="checkbox" name="loveme"> <label for="love">愛(ài)我 </label>
        <input id="eat" type="checkbox" name="loveme"> <label for="eat">饅頭 </label> 
        <input id="play" type="checkbox" name="loveme" checked> <label for="play">籃球 </label>
        <input id="apple" type="radio" name="name" checked="checked"><label for="apple">蘋果 </label> 
        <input id="orange" type="radio" name="name"><label for="orange">橘子 </label>  
    </form>

checkbox和radio.png

checked="checked" 與 直接書(shū)寫 checked 一樣的效果

• 注意以上的代碼中，包含的 label標(biāo)簽，有時(shí)候我們?yōu)榱巳诵曰男枨螅灰髽?biāo)點(diǎn)中文字的一部分就算選中了，所以用 label標(biāo)簽的for屬性與input的id屬性關(guān)聯(lián)。

<input id="play" type="checkbox" name="loveme" checked> <label for="play">籃球 </label>

• 當(dāng)然了，你身為一個(gè)老司機(jī)，應(yīng)該這么寫

<label ><input type="checkbox" name="loveme" checked> 籃球 </label>

• 省了兩個(gè)屬性，簡(jiǎn)潔優(yōu)雅。
  button標(biāo)簽也有很多type

<button name="button" type="button"> Click me </button> 
//僅表示按鈕，沒(méi)有任何作用.它可以有與元素事件相關(guān)的客戶端腳本，當(dāng)事件出現(xiàn)時(shí)可觸發(fā),與js結(jié)合使用
<button name="button" type="submit"> Click me </button>
//此按鈕提交表單數(shù)據(jù)給服務(wù)器

• input 也可以實(shí)現(xiàn)滑動(dòng)的效果

<input type="range" name="" value="">

range.png

五、下拉框

<select>
      <option value="1">湖人</option>
      <option value="2" selected>凱爾特人人</option>
      <option value="3">馬刺</option>
 </select>

凱爾特人人是默認(rèn)勾選的

六、table標(biāo)簽的學(xué)習(xí)

table在古代用來(lái)做布局，現(xiàn)在基本不用了。
只有四個(gè)元素，thead、tbody、tfoot、colgroup。即使你不寫tbody你也有這個(gè)標(biāo)簽，而且可以不止一個(gè)。thead里面有tr、th，tbody里面有tr、td，tfoot里面有tr、td，colgroup里面有col,用來(lái)控制列的寬度，基本不使用了。我現(xiàn)在維護(hù)的網(wǎng)頁(yè)，用的table 布局，修改很麻煩

<table>
  <thead>
    <tr>
      <th>Header content 1</th>
      <th>Header content 2</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>Footer content 1</td>
      <td>Footer content 2</td>
    </tr>
  </tfoot>
  //即使寫在這里。瀏覽器也會(huì)把他放到底部去
  <tbody>
    <tr>
      <td>Body content 1</td>
      <td>Body content 2</td>
    </tr>
  </tbody>
  //可以包含多個(gè)tbody

noscript標(biāo)簽表示如果用戶禁用了js,就顯示該標(biāo)簽里面的內(nèi)容

七、空元素

就是里面不能有內(nèi)容的標(biāo)簽

八、可替換標(biāo)簽

CSS 里，可替換元素（replaced element）的展現(xiàn)不是由CSS來(lái)控制的。這些元素是一類 外觀渲染獨(dú)立于CSS的 外部對(duì)象。 典型的可替換元素有
<img> <object> <video> 和 表單元素，如<textarea> <input> 。 某些元素只在一些特殊情況下表現(xiàn)為可替換元素，例如<audio> 和 <canvas>
上面是MDN的原話，反正我看的云里霧里。用圖片解釋一下吧。

可替換元素.png

九、全局屬性

十、display不止三種

不僅僅有 none inline block inline-block 還有很多
常見(jiàn)的display默認(rèn)的是block的有divp 、form 和HTML5中的新元素： header 、 footer 、 section。我們不需要特別關(guān)心display的，因?yàn)檫@個(gè)主要由CSS修改

li標(biāo)簽的樣式可以改成實(shí)心原點(diǎn)，方形，也可以加上羅馬數(shù)字

具體的細(xì)節(jié)可以查看MDN list sytle
具體的符號(hào)樣式的設(shè)置可以看list-style-type
比如你想改成方形，就用list-style-type: type