1. HTML 重點標簽

1.1 a 標簽

A. 屬性

(1) href = hyper reference 超鏈接

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

跳轉(zhuǎn)demo.png

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

(2) target 在哪一個窗口打開超鏈接

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

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

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

1.2 iframe 標簽

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

1.3 table

A. 屬性

• tr: table row
• th: table header會加粗
• 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中不寫thead、tbody、tfoot，html將自動把<tr>等格式放入tbody中
b. thead、tbody、tfoot不一定要按照順序?qū)?，html會自動調(diào)換位置

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

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

  ---

1.4 img

A. 作用

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

B. 屬性

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

(2) width 寬，height 高

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

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

C. 事件

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

(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!");
    <!-- 圖片加載失敗時進行挽救 -->
    xxx.src = "/404.png";
  };
</script>

D. 響應(yīng)式

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

手機預覽按鈕

1.5 form

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

A. 作用

• 發(fā)出get或post請求，然后刷新頁面

B. 屬性

(1) action

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

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

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

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

• input中不能帶其他標簽
• button中可以含其他標簽，如:

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

(3) method 指定請求方法

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

(4) autocomplete 自動推薦輸入

將自動填充開啟autocomplete="on"，并在指定輸入框設(shè)定推薦輸入name="username"，會在輸入框推薦輸入項

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

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

• 用法如a標簽的target

C. 事件 - onsubmit

1.6 input

A. 作用

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

B. Type

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

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

• checkbox 多選框（方形）
  用法同radio一致，名字相同才會被認為是一組

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

• file 選擇文件
  ps. 選擇多個文件，加上multiple: <input type="file" multiple />
• hidden 看不見的input，不是給人填的，給JS自動填入

C. 事件

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

• onchange 當用戶輸入改變時觸發(fā)
• onfocus 當用戶把鼠標移動到元素上時觸發(fā)
• onblur 當用戶把鼠標離開元素時觸發(fā)

D. 驗證器

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

E. 其他輸入標簽

(1) textarea 多行輸入

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

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

(2) select 下拉選單

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

<select>
  <option value="">- 請選擇 -</option>
  <option value="1">星期一</option>
  <option value="2">星期二</option>
</select>

2. HTML 實踐 in VSCode

(1) 多行wrap in list

選中內(nèi)容 -> ctrl + shift + p -> emmet wrap-> ul>li*

(2) 使用正則表達式刪除

ctrl + H -> Use Regular Expression -> \[\d+\] 表示中括號中多個數(shù)字 -> 替換為空 -> 再點擊Use Regular Expression 取消正則表達式回到原始replace界面

(3) 表格編輯按住alt選擇多個位置同時編輯

編輯完成后如下:

表格編輯

tr包裹后.png

(4) 圖片style設(shè)置max-width: 100%

• 圖片最好不超過300kb，否則需要壓縮

(5) TOC 目錄，<a href="#"> 設(shè)置id跳轉(zhuǎn)

(6) 單擊圖片新窗口打開-> 看高清圖

<a href="image/1.jpg" target="_blank">
  <img width="400" src="image/1.jpg" alt="圖1">
</a>

3. 調(diào)試

(1) 響應(yīng)式頁面 Settings

• meta:vp 內(nèi)容與設(shè)備寬度一致，初始縮放1倍，最大1倍，最小1倍，不允許用戶縮放

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

• img最大寬度100%

<style>
  img{
    max-width: 100%;
  }
</style>

(2) 調(diào)試方法

• 手機調(diào)試:
  a. 方法1：使手機和電腦同一wifi，打開hs，訪問ip:端口/頁面
  b. 方法2：hs在chrome上打開，開發(fā)者工具左上第二個按鈕
  border調(diào)試法
• chrome遠程調(diào)試（需要usb連接）
  

  ---

4. 部署到GitHub Pages

• (1) 新建github repo 并上傳html
• (2) repo settings -> GitHub Pages -> 選擇正確的分支 -> 生成URL -> 點擊后別忘記在后面加/index.html
• (3) 在About里設(shè)置Description，把網(wǎng)站地址放入'Website'中

Description.png