【資料來(lái)源：杭州饑人谷教育科技有限公司】

1. HTML 重點(diǎn)標(biāo)簽

1.1 a 標(biāo)簽

A. 屬性

(1) href = hyper reference 超鏈接

• 適用網(wǎng)址：http, https, 無(wú)協(xié)議（繼承當(dāng)前文件的協(xié)議）

跳轉(zhuǎn)demo.png

• 適用路徑，如跳轉(zhuǎn)頁(yè)面 絕對(duì)目錄/a/b/c.html 或 相對(duì)目錄a/b/c.html，index.html或./index.html
  ps. 這里的/a 是指http服務(wù)的目錄，不再是文件目錄，所以雙擊打開(kāi)再跳轉(zhuǎn)鏈接會(huì)跳轉(zhuǎn)到文件目錄，失去意義
• JS偽協(xié)議 javascript:代碼;，直接執(zhí)行js代碼，現(xiàn)在比較少用
  什么都不做的a標(biāo)簽: <a href="javascript:;" />
<a href="" /> 點(diǎn)擊后會(huì)刷新頁(yè)面
  <a href="#" /> 點(diǎn)擊后不會(huì)刷新頁(yè)面，但會(huì)回到頁(yè)面頂部
• 適用元素id，如: <a href="#xxx" />，頁(yè)面將跳轉(zhuǎn)至id為'xxx'的元素位置
• 發(fā)郵件mailto: + email，跳轉(zhuǎn)到發(fā)郵件頁(yè)面，并把email地址輸入到收件人框
• 打電話tel: + 電話號(hào)碼，手機(jī)上點(diǎn)擊直接跳轉(zhuǎn)到打電話界面，電話號(hào)碼直接輸入完畢

(2) target 在哪一個(gè)窗口打開(kāi)超鏈接

• '_self' 表示在當(dāng)前頁(yè)面打開(kāi)
• '_blank' 表示在空白頁(yè)打開(kāi)
• '_top' 表示在最上級(jí)頁(yè)面打開(kāi)
  【補(bǔ)充知識(shí)】iframe 引用其他頁(yè)面
  <iframe src='a-target-iframe.html' frameborder="0"></iframe>
  【重要】如果主頁(yè)面包含iframe，在iframe中有一個(gè)a標(biāo)簽：
  <a target="_top"></a> -> 點(diǎn)擊后將在主頁(yè)面打開(kāi)鏈接頁(yè)面
  <a target="_self"></a> -> 點(diǎn)擊后將在iframe頁(yè)面打開(kāi)鏈接頁(yè)面
• '_parent' 表示在父級(jí)頁(yè)面打開(kāi)
  如：有3個(gè)iframe嵌套，第三的iframe的鏈接如果設(shè)置父級(jí)頁(yè)面打開(kāi)將在第二個(gè)iframe打開(kāi)，如果設(shè)置'_top'將在主頁(yè)面打開(kāi)
• '窗口名' 表示在名為指定名稱的窗口（window.name）打開(kāi)，如果沒(méi)有則創(chuàng)建
• 'iframe名' 表示在名為指定名稱的iframe打開(kāi)
  <iframe src='a-target-iframe.html' name="xxx"></iframe>
• 【補(bǔ)充知識(shí)】打開(kāi)頁(yè)面的方式 -> 把本機(jī)作為服務(wù)器在端口部署網(wǎng)址:
  手機(jī)同在一個(gè)wifi也可以訪問(wèn)
  a. http-server
  step1: cd 到網(wǎng)頁(yè)文件路徑
  step2: 命令: http-server . -c-1 縮寫(xiě)為 hs . -c-1
  step3: 瀏覽器打開(kāi)URL后接文件名，如：192.168.56.1:8080/index.html
  b. parcel
  step1: cd 到網(wǎng)頁(yè)文件路徑
  step2: 命令: parcel index.html
  step3: 瀏覽器打開(kāi)URL

(3) download 下載網(wǎng)頁(yè)，但大部分情況不支持

(4) rel=noopener 用于防止特殊bug

1.2 iframe 標(biāo)簽

不需要深入學(xué)習(xí)，目前前端已使用其他方法實(shí)現(xiàn)

1.3 table

A. 屬性

• tr: table row
• th: table header會(huì)加粗
• td: table data

(1) thead

常用 thread > tr > th：

<thead>
  <tr>
    <th> Type1 </th>
    <th> Type2 </th>
  </tr>
</thead>

(2) tbody

常用 tbody > tr > td：

<tbody>
  <tr>
    <td> data1 </td>
    <td> data2 </td>
  </tr>
   <tr>
    <td> data3 </td>
    <td> data4 </td>
  </tr>
</tbody>

(3) tfoot

常用 tfoot > tr > td：

B. 常用格式

(1) 橫縱雙表頭

在tbody和tfoot中將橫向表頭位置改成<th>即可

<tbody>
  <tr>
    <th> Math </th>
    <td> data1 </td>
    <td> data2 </td>
  </tr>
   <tr>
    <th> English </th>
    <td> data3 </td>
    <td> data4 </td>
  </tr>
</tbody>

ps.
a. 如果在table中不寫(xiě)thead、tbody、tfoot，html將自動(dòng)把<tr>等格式放入tbody中
b. thead、tbody、tfoot不一定要按照順序?qū)?，html會(huì)自動(dòng)調(diào)換位置

(2) 相關(guān)樣式

• table-layout 布局
  auto: 自動(dòng)布局，按內(nèi)容計(jì)算寬度
  fixed: 等寬
• border-spacing 單元格間距
• border-collapse: collapse 合并單元格間隔
  

  ---

1.4 img

A. 作用

• 發(fā)出get請(qǐng)求，展示圖片

B. 屬性

(1) Alt - alternative 請(qǐng)求失敗時(shí)用一段文字代替圖片

(2) width 寬，height 高

ps. 如果只寫(xiě)寬度，高度會(huì)自適應(yīng)；只寫(xiě)高度，寬度會(huì)自適應(yīng)；兩個(gè)一起寫(xiě)，圖片會(huì)按照指定寬高展示，可能會(huì)變形！
永遠(yuǎn)不要讓圖片變形！

(3) src 圖片地址（可以為絕對(duì)地址、相對(duì)地址、URL）

C. 事件

• 監(jiān)聽(tīng)圖片是否加載成功

(1) onload 圖片加載成功觸發(fā)

(2) onerror 圖片加載失敗觸發(fā)

<img id="xxx" src="dog.png"></img>
<script>
  xxx.onload = function() {
    console.log("Succeed!");
  };
  xxx.onerror = function() {
    console.log("Failed!");
    <!-- 圖片加載失敗時(shí)進(jìn)行挽救 -->
    xxx.src = "/404.png";
  };
</script>

D. 響應(yīng)式

• 設(shè)置max-width: 100%，實(shí)現(xiàn)圖片永遠(yuǎn)填滿屏幕且不會(huì)變形
• 手機(jī)上瀏覽: F12 左上角第二個(gè)按鈕

手機(jī)預(yù)覽按鈕

1.5 form

• 一個(gè)form表單必須包含一個(gè)type="submit"的input或button，表單才能提交！
• form里面的input都要有name

A. 作用

• 發(fā)出get或post請(qǐng)求，然后刷新頁(yè)面

B. 屬性

(1) action

• 表單數(shù)據(jù)路徑，即向何處發(fā)請(qǐng)求 返回form-data response

(2) 一般表單含輸入框和提交按鈕

<form action="/xxx">
  <input type="text" />
  <input type="submit" />
</form>

ps. <input type="submit" /> 系統(tǒng)會(huì)自動(dòng)識(shí)別使用的語(yǔ)言替換submit按鈕的文字，如果要改變可寫(xiě)成<input type="submit" value="submit" />
【重要】<input type="submit" /> 和 <button type="submit"></button> 區(qū)別

• input中不能帶其他標(biāo)簽
• button中可以含其他標(biāo)簽，如:

<button type="submit">
  <strong>
    here!
  </strong>
</button>

(3) method 指定請(qǐng)求方法

• 發(fā)送post請(qǐng)求<form action="/xxx" method="POST"></form>

(4) autocomplete 自動(dòng)推薦輸入

將自動(dòng)填充開(kāi)啟autocomplete="on"，并在指定輸入框設(shè)定推薦輸入name="username"，會(huì)在輸入框推薦輸入項(xiàng)

<form action="/xxx" autocomplete="on">
  <input name="username" type="text" />
  <input type="submit" />
</form>

(5) target 要提交到哪個(gè)頁(yè)面，在哪個(gè)頁(yè)面刷新

• 用法如a標(biāo)簽的target

C. 事件 - onsubmit

1.6 input

A. 作用

• 讓用戶輸入內(nèi)容

B. Type

• text 讓用戶輸入文本的輸入框
• color 顏色鋪滿輸入框
• password 不顯示輸入的文字，用點(diǎn)表示
• radio 單選框（圓形）
  注意名字要一致才能實(shí)現(xiàn)多選1

<input name="gender" type="radio" />male
<input name="gender" type="radio" />female

• checkbox 多選框（方形）
  用法同radio一致，名字相同才會(huì)被認(rèn)為是一組

<input name="habit" type="checkbox" />Video Game
<input name="habit" type="checkbox" />Cycling
<input name="habit" type="checkbox" />Chessing

• file 選擇文件
  ps. 選擇多個(gè)文件，加上multiple: <input type="file" multiple />
• hidden 看不見(jiàn)的input，不是給人填的，給JS自動(dòng)填入

C. 事件

一般不監(jiān)聽(tīng)用戶click事件

• onchange 當(dāng)用戶輸入改變時(shí)觸發(fā)
• onfocus 當(dāng)用戶把鼠標(biāo)移動(dòng)到元素上時(shí)觸發(fā)
• onblur 當(dāng)用戶把鼠標(biāo)離開(kāi)元素時(shí)觸發(fā)

D. 驗(yàn)證器

• 要求用戶必須填寫(xiě)，加入required: <input type="text" required />

E. 其他輸入標(biāo)簽

(1) textarea 多行輸入

鎖死輸入?yún)^(qū)域大?。ú辉试S用戶拖動(dòng)）

<textarea style="resize:none; width:50%; height:300px;"></textarea>

(2) select 下拉選單

option中的value是真正選擇的值，文本值是展示的值

<select>
  <option value="">- 請(qǐng)選擇 -</option>
  <option value="1">星期一</option>
  <option value="2">星期二</option>
</select>

2. 其他感想

方方老師講的很好，本節(jié)課內(nèi)容真的豐富又有質(zhì)量，細(xì)節(jié)拉滿，需要花時(shí)間好好消化！