目錄
1、a 標籤的具體用法
HTML 中的 a 標籤（或稱錨元素）可以創建通向其他網頁、文件、同一頁面內的位置（內部錨點）、電子郵件地址或任何其他 URL 的超鏈接，它有以下幾個常用屬性屬性：href、target、download（此屬性指示瀏覽器下載 URL 而不是導航到它）、rel（該屬性指定了目標對象到鏈接對象的關係）。下面主要說一下 href 屬性和 target 屬性的取值。
1.1 a 標籤的 href 屬性及取值
| 屬性 | 取值 | 描述 |
| href（hyper reference） | 網址 |
如：<a href="//google.com">超鏈接</a> ，在前端頁面會展示一個超鏈接，點擊跳轉到 google 首頁，網址可以寫成：https://google.com、http://google.com、//google.com 三種形式，第三種形式屬於無協議網址，當用戶點擊第三種形式的超鏈接時，瀏覽器返回的響應頭會給一個 location 繼續跳轉參數，此時瀏覽器會繼續跳轉到 location 地址。 這樣寫的好處是如果你不知道網址的協議是 http 還是 https 可以不寫，這樣瀏覽器會自動尋址，但是如果你不知道網址的正確協議就隨便寫了一個，一旦寫錯就會報錯。所以瞭解一下第三種寫法吧~ |
| 路徑 |
如：<a href="/a/b/c.html">跳轉</a> ，a 標籤的 href屬性取值還可以是文件路徑，可以是相對路徑過絕對路徑，如果是絕對路徑的話，這裏會有一個坑，當你雙擊打開有 href 取值爲絕對路徑的 html 頁面時，該絕對路徑會基於系統根目錄去找，而不是基於你當前的項目去找，這要就會導致超鏈接跳轉的地方和我們預期的不一致。 解決方法：（1）絕對路徑會出問題，可以寫相對路徑呀（2）最好不要雙擊打開 .html 文件，你可以全局安裝 yarn global add http-server，然後通過 http-server . -c-1 的方式打開頁面，這個時候會出現四個網址，隨便打開一個，然後加上 html 的文件路徑，即可訪問（可以直接縮寫成 hs 啓動頁面）。或者安裝：yarn global add parcel，然後通過 parcel -a.html 的方式實現預覽。 |
|
| 僞協議 |
如：<a href="javascript : ; ">執行</a> ，該超鏈接被點擊後頁面什麼都不做，如果在冒號和分號中間添加 JavaScript 代碼，則點擊該 a 標籤，就會執行 JavaScript 代碼。 注意：這裏 href 的屬性值爲 javascript : ; 的時候和值爲 # 號並不一樣，如果 href 的值爲 #，點擊後頁面會回滾到頂部，而前者是什麼都不做。還有一種情況是 href 的屬性值什麼都不寫，點擊後頁面會刷新，不信你可以到到控制檯看一下。 |
|
| id 值 | 如：<a href="#header">去哪</a> ，該超鏈接被點擊後會跳轉到同一頁面的 id 值爲 header 的元素位置。 | |
| 郵箱或電話 | 如：<a href="mailto：[email protected]">發郵件</a> ，<a href="tel：110">打電話</a> |
1.2 a 標籤的 target 屬性及取值
| 屬性 | 取值 | 描述 |
| target | _blank | 如：<a href="//google.com" target=“_blank”>超鏈接</a> ，點擊該超鏈接後，會在一個新的標籤頁打開 google |
| _self | 如：<a href="//google.com" target=“_self”>超鏈接</a> ，點擊該超鏈接後，會在當前頁面打開 google | |
| _top | 該屬性值需要在頁面內嵌 iframe 窗口的情況下使用，如：<a href="//google.com" target=“_top”>超鏈接</a> ，當 iframe 窗口內的 a 標籤設置了該 target 屬性值，點擊後會在嵌含有該 a 標籤的 最頂層窗口打開 google | |
| _parent | 該屬性值需要在頁面內嵌 iframe 窗口的情況下使用，如：<a href="//google.com" target=“_parent”>超鏈接</a> ，當 iframe 窗口內的 a 標籤設置了該 target 屬性值，點擊後會在嵌含有該 a 標籤的上一層窗口打開 google | |
| window.xxx | 如：<a href="//google.com" target=“xxx”>超鏈接</a>，點擊後如果有 name 爲 xxx 的窗口就打開，如果沒有就創建一個名爲 xxx 的新標籤頁，如果頁面具有兩個上述的 a 標籤，點擊第二個可以同樣跳轉到第一個超鏈接打開的標籤頁，至於頁面的 name 屬性，可以到該頁面的控制檯輸入 console.log(window.name); 打印。 | |
| iframe.xxx |
<a href="https://google.com" target="xxx">google</a> <!--點擊後會在第一個iframe窗口打開google--> <iframe src=""name="xxx"></iframe> |
2、img 標籤的具體用法
HTML 中的 img 標籤主要是將一份圖像嵌入文檔。它有以下幾個常用屬性：alt、height、width、src，以及常用的onload、onerror 事件，下面具體介紹以下：
2.1 img 標籤的常用屬性
| 屬性 | 描述 |
| src（source） | img 標籤的 src 屬性可以是網絡地址，也可以是相對路徑和絕對路徑，它會發送發出一條 get 請求，展示一張圖片。 |
| alt（alternative） | <img src="dog.png" alt="這是一隻狗子">，可替換的，如果圖片加載失敗了，就會顯示 alt 屬性的內容。 |
| width / height | 該屬性可以設置圖片展示的寬高，推薦設置一個就可以，另一個屬性會根據圖片的原比例進行子使用。 |
| 響應式 |
如果想做到圖片響應式（手機端和 PC 端都能正常瀏覽），可以給 img 標籤設置 style 樣式：max-width：100% 。 |
2.2 img 標籤的幾個事件
| 事件 | 描述 |
| onload() | 如果圖片加載成功就會調用 onload() 方法，如：<img id="xxx" src="dog.png">，可以通過 JavaScript 代碼通過 id 獲取該 img 標籤，xxx.onload = function（）{ console.log（‘圖片加載成功’）}，//這種獲取元素的方法只能測試的時候用，如果寫時候還是老老實實 getElementById() 吧。 |
| onerror() | 如果圖片加載失敗就會調用 onerror() 方法，有了該方法我們就可以在圖片加載失敗的情況下進行挽救，對 img 標籤的 src 屬性重新賦值，加載別的路徑的圖片，xxx.onload = function（）{ xxx.src = '404.png' }，這樣圖片在加載失敗的情況下會重新加載404.png |
3、table 標籤的具體用法
與 table 標籤相關的標籤有很多，比如：table、thead、tbody、tfoot、tr、th、td，其中 tr 標籤是表頭，內容會自動呈現加粗樣式，在寫 tbale 標籤是，最好寫上 thead、tbody 和 tfoot，如果不寫的話，tr 和 td 標籤會被瀏覽器糾錯默認將其添加到 tbody 中。添加邊框卻不加任何樣式的 table 標籤在展示的時候比較難看，最好進行如下樣式設置：mdn 參考文檔
table { border-collapse:collapse; border-spacing:0 }
table-layout 自動定製列寬（值爲auto則根據內容寬度，值爲fixed則列寬等寬）
table-collapse 控制單元格是否合併
border-spacing 控制表格單元格間距
4、form 標籤的具體用法
form 標籤表示文檔中的一個區域，此區域包含有交互控制元件，用來向 Web 服務器提交信息。form 標籤的相關屬性有：action、autocomplete、method、target，下面具體看一下：
| 屬性 | 描述 |
| action | action 屬性表示請求頁面的地址，如：<form action="//google.com"><input type="text"><input type="submit"></form> |
| autocomplete | 表示是否自動填充，該屬性值有 on/off 兩個值， 假如form 表單中有 <input name="username"type="text"> ，在給 form 表單設置 autocomplete 屬性爲 on 時，用戶在輸入時就會自動填充用戶名，當然都是你個人用戶名的記錄。 |
| method | form 表單的請求方法，如果不寫該屬性的話，默認是 GET 請求，如果是 POST 請求的話必須特別指定 method="POST" |
| target | 代表你想提交的頁面，如果是_blank就會提交到一個新的頁面，該屬性和 a 標籤的 target 類似 |
| 注意：一個表單必須要有一個類型爲 submit 的按鈕，可以是 type = "submit" 的 input 標籤，也可以是 type = "submit" 的 button 標籤（如果你寫的是一個 button 沒指定 type 的話，默認就是 submit 類型），但是如果沒有一個爲 submit 類型的按鈕，則該表單就不能提交。 | |
|
input 和 button 之間的區別是什麼？，button 標籤中間還可以加標籤甚至是 img，如 ：<button type="submit"><strong>搞起</strong>button>，而 input 中間不可以加標籤（input 就是個單標籤，你讓他怎麼加？），如：<input type="submit"value="搞起”> |
|
| 注意事項：一般不監聽 input 的 click 事件，form 裏面的 input 要有 name 屬性，form 裏要放一個 type=submit 按鈕才能觸發 submit 事件 | |
5、input 標籤的具體用法
input 標籤用於爲基於 Web 的表單創建交互式控件，以便接受來自用戶的數據，它的主要作用就是讓用戶輸入內容。
5.1 input 標籤的基本屬性
| 標籤 | 描述 | 標籤 | 描述 |
| <input type = "text" required> | 默認類型 + html5的驗證器 | <input type = "date"> | 輸入日期的控件 |
| <input type = "button"> | 按鈕 | <input type = "hidden"> | 特殊使用的隱藏輸入框 |
| <input type = "submit"> | 提交按鈕 | <input type = "color"> | 用於指定顏色的控件 |
| <input type = "checkbox"> | 多選框，相同的name屬性爲一組 | <input type = "password"> | 值被遮蓋的單行文本字段 |
| <input type = "radio"> |
單選框，相同的name屬性爲一組 |
<input type = "e-mail"> | 編輯 e-mail 的字段 |
| <input type = "file"> | 點擊可上傳文件，multiple多文件 | <input type = "number"> | 輸入浮點數的控件 |
| <input type = "img"> | 圖片提交按鈕。必須使用 src 屬性定義圖片的來源及使用 alt 定義替代文本。 | ||
| <input name= "erha"> | 表單內的input要有name屬性 | <input autofocus type = "text"> | 自動聚焦 |
| <input type="checkbox" checked> | 表示已經選中狀態 | <input placeholder= "請輸入"> | 輸入提示 |
| <input value="123"> | 輸入框的值 | <input type = "button" disabled> | 禁用 |
| <select><option value="">-請選擇-<option><option value="1">星期一</option><option value="2">星期二</option></select> | |||
|
<textarea style="resize:none;width:50%;height:300px"></textarea> |
|||
5.2 input 標籤的幾個事件
| 事件 | 描述 |
| onfocus() | 當input 獲取到焦點時觸發 |
| onblur() | 當input失去焦點時觸發，注意：這個事件觸發的前提是已經獲取了焦點再失去焦點的時候纔會觸發該事件，用於判斷標籤爲空 |
| onchange() | 當input失去焦點並且它的value值發生變化時觸發，個人感覺可以用於註冊時的確認密碼。 |
| onclick() | 主要是用於 input type=button，input 作爲一個按鈕使用時的鼠標點擊事件 |
| onselect() | 當input裏的內容文本被選中後執行，只要選擇了就會觸發，不是全部選中 |
| oninput() | 當input的value值發生變化時就會觸發，（與onchange的區別是不用等到失去焦點就可以觸發了） |
| onkeydown() |
按下按鍵時的事件觸發 |
| onkeyup() | 當按鍵擡起的時候觸發的事件，在該事件觸發之前一定觸發了onkeydown事件--相當於一個按鍵，兩個事件，沒怎麼用過 |
| 以上事件可以直接放到input的屬性裏，例如：<input type="text" οnfοcus="a();" οnblur="b()" οnchange="c();" οnkeydοwn="d();" />， | |
| 也可以通過js給input dom元素添加相應的事件，如：document.getElementByTagName('input').onfocus = function(){}; | |