01、HTML基礎簡介
HTML (HyperText Markup Language，超文本標記語言) 不是一門編程語言，而是一種用于定義內容結構的標記語言，用來描述網頁內容，檔案格式為.html，HTML 由一系列的元素（elements）組成，這些元素用來實作不同的內容，HTML5是HTML新的修訂版本，2014年由W3C制定發布，增加了很多語意化標簽，
W3C：World Wide Web Consortium，萬維網聯盟組織，是一個國際互聯網標準化組織，1994年成立，核心目的是制定WEB規范標準，
WEB標準主要包括三個方面：
- 結構標準（HTML）：超文本標記語言（HyperText Markup Language），定義網頁內容的組織結構，
- 表現標準（CSS）：層疊樣式表（Cascading Style Sheets），用于設定網頁元素的版式、顏色、大小等外觀樣式，
- 行為標準（JS）：JavaScript，用于實作網頁的互動和行為，
1.1、HTML知識結構
詳見前端技術路線圖
1.2、<基礎語法>
HTML 是一種<XML>格式的標記語言，每一個標簽都是以尖括號“<>”來定義的，HTML不區分大小寫，HTML中的標簽名、屬性名都統一小寫，都按照小寫來處理，就是說如果你大寫的也會被轉換為小寫，??自定義標簽、屬性時需注意，
<標簽名 屬性名=“屬性值”>內容</標簽名>
一個元素主要部分：開始標簽、結束標簽與內容相結合，開始標簽中還包括屬性/值，
- 開始標簽（Opening tag）：包含元素的名稱（本例為
p），被大于號、小于號所包圍，表示元素從這里開始或者開始起作用， - 結束標簽（Closing tag）：與開始標簽相似，只是其在元素名之前包含了一個斜杠
/，這表示元素的結尾， - 內容（Content）：元素的內容，元素標簽內的內容，
- 屬性：屬性定義元素的一些額外資訊，一個屬性就是一個鍵值對組成
屬性名="屬性值"，值必須添加引號，多個屬性空格隔開，
??單標簽（空元素）：
<標簽名>，<標簽名 屬性名="屬性值">，大部分元素標簽都是是雙標簽的形式，具有開始標簽、結束標簽，也有小部分元素沒有結束標簽，稱為單標簽，或空元素，HTML5中的單標簽不需要寫斜杠/，可兼容斜杠，如<hr>，<br>，<img>，<input>，<link>，<meta>，<base>、table中的<col>、<source>，<embed>...
??HTML中的注釋格式：<!--注釋-->
1.3、轉義字符
HTML中的有些字符是內置的特殊關鍵字或特殊符號，如 <>、"、'、空格 、換行（用<br>元素）、tab，不能直接在HTML中顯示，需要用轉義字符（特殊編碼），以符號&開始，以分號(;結束，如下表，HTML中用物體名稱、物體編碼（字符的unicode編碼）都可以，
元素內容中空格（空白字符、換行），HTML 解釋器會將連續出現的空白字符減少為一個單獨的空格符，
| 顯示結果 | 描述 | 物體名稱 | 物體編號 |
|---|---|---|---|
| 空格 | |||
| 全角空格，1個中文字寬 | ? | ||
| < | 小于號 | < | < |
| > | 大于號 | > | > |
| & | 和號 | & | & |
| " | 引號 | " | " |
| ' | 撇號 | ' (IE不支持) | ' |
| ￥ | 元（yen） | ￥ | ￥ |
| € | 歐元（euro） | € | € |
| ? | 著作權（copyright） | ? | ? |
| ? | 注冊商標 | ? | ? |
| ? | 商標 | ? | ? |
<p> 一個段落，轉移字符添加空格</p>
<p><一個段落，轉移字符添加尖括號></p>
- 更多：HTML特殊轉義字符對照表
1.4、MIME 媒體型別
媒體型別MIME（ Multipurpose Internet Mail Extensions 或 MIME 型別 ）是一種標準，用來表示檔案、檔案或位元組流的性質和格式，在很多需要引入資源、申明資源型別的地方使用，
通用結構：type/subtype，大小寫不敏感，一般都小寫
| 型別 | 描述 | 典型示例值 |
|---|---|---|
| text | 表明檔案是普通文本，理論上是人類可讀的 | ??text/plain：未知型別的普通文本- text/html：html內容 ??text/css：css檔案，<link>引入css檔案時指定型別 type ="text/css"，可省??text/javascript：js檔案， <script>引入js時可省略 |
| image | 表明是某種影像，不包括視頻，動態圖（比如動態 gif）也使用 image 型別 | ??image/gif, image/png, image/jpeg, image/bmp, image/webp, image/x-icon, image/vnd.microsoft.icon 特定格式的影像 ?? image/*：圖片通配 |
| audio | 表明是某種音頻檔案 | ?? audio/midi, audio/mpeg, audio/webm, audio/ogg, audio/wav ?? audio/* |
| video | 表明是某種視頻檔案 | ??video/webm, video/ogg ??video/* |
| application | 表明是某種二進制資料 | ??application/octet-stream：未知的應用程式檔案 ??application/pkcs12, application/vnd.mspowerpoint, application/xhtml+xml, application/xml, application/pdf |
| multipart | 復合檔案 | ?? multipart/form-data：表單form提交資料中有二進制檔案 ??multipart/byteranges：用于把部分的回應報文發送回瀏覽器，狀態碼206 |
- 媒體型別頁面中找到最新的完整串列
02、網頁結構/骨架
2.1、<html>網頁結構
- H5版本申明：
<!DOCTYPE html>，檔案（第一行）必備的檔案型別申明，避免瀏覽器怪異行為，這不是一個標簽， - 主根元素<html>：
<html>整個網頁</html>，定義html檔案，也限定了檔案的開始和結束點， - 頭部元素<head>：
<head>網頁頭部資訊，當前網頁的一些元資料資訊</head>，用于描述檔案的各種屬性和資訊，包括檔案標題，這部分內容是給瀏覽器、開發者使用的，不用向用戶顯示， - 內容根元素：
<body>網頁內容區域</body>，檔案內容的主體，包含檔案所有的正式內容，用于給用戶顯示，
body有背景色bgcolor、前景色text等屬性，不過樣式一般用css管理樣式，
<!DOCTYPE html>
<html>
<head>
<!-- 頭部，網頁的一些元資料資訊 -->
</head>
<body bgcolor="blue" text="red">
<!-- 我們看到的網頁內容區域 -->
</body>
</html>
??快捷鍵（VSCode）：半角的嘆號
!快速輸入HTML的主體網頁結構內容，然后Tab鍵切換修改（預置）引數值，或Esc，
2.2、<Head>頭部標簽
- <meta>：用于描述HTML檔案的屬性、關鍵詞等元資料的元素，如檔案編碼字符集
charset， - <title>：網頁標題，出現在瀏覽器標簽上，是head中唯一必須包含的元素，有利益SEO優化，
- <link>：引入外部資源，常用的如css資源，
- <script>：內部js代碼，或引入外部js檔案，script必須是雙標簽，
<base>：檔案根 URL 元素，每個檔案只能一個，指定當前檔案的根URL地址，
<head>
<!-- 頭部，網頁的一些屬性申明資訊 -->
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<base href="http://www.example.com/">
<title>網頁標題-HTML學習</title>
<link rel="stylesheet" href="https://www.cnblogs.com/anding/p/css檔案路徑"/>
<script src="https://www.cnblogs.com/anding/p/js檔案路徑" type="text/javascript" charset="utf-8"></script>
無標簽的不規范內容，這行文字會被自動處理到body中
</head>
2.3、<meta>元資料
<meta>（ /?met?/元）元資料就是描述資料的資料，支持多種屬性值，用來設定當前網頁的各種引數和行為，
如<meta charset="utf-8"> ，該元素指定檔案使用 UTF-8 字符編碼，UTF-8 包括絕大多數人類已知語言的字符，基本上 UTF-8 可以處理任何文本內容，還可以避免以后出現某些問題，沒有理由再選用其他編碼，
?
| meta型別 | 描述 | 值 |
|---|---|---|
| charset | 檔案的字符編碼，一般用"utf-8" | <meta charset="utf-8"/> |
| name | 指定元資料的型別，配合content使用，標準元資料名稱 | ?? description：檔案的描述 ?? keywords：關鍵詞，逗號分割，用于SEO ?? viewport：設定視口的大小等屬性，主要用于移動端 ?? referrer(/r??f??r?/ 推薦人，來歷)：控制http的 Referer 請求頭， |
| http-equiv | 定義了一個編譯指示指令 | ?? content-type(過時)：推薦使用meat的charset屬性代替， ?? default-style：默認樣式（首選樣式） ?? x-ua-compatible( /k?m?p?t?bl/ 兼容的)：設定兼容性 ?? refresh：頁面載入的時間間隔設定 ?? Cache-Control：控制HTTP快取，常用content值如下： ??● no-cache：和服務器確認沒修過過才快取 ??● no-store：不存盤，每次都重新請求 ??● public可以被任意快取，private只在運行的瀏覽器快取 ??● max-age：快取時長（s） ??● no-transform：中間代理不允許格式轉換，避免中間被壓縮轉換 ??Expires：過期時間（GMT），推薦用上面的max-age ?? Content-Security-Policy：CSP內容安全策略，可配置安全權限 |
| content | http-equiv 或name 屬性的值 | <meta name="keyword" content="購物,淘寶"> |
請求頭Referer實際上是 "referrer"，屬于拼寫錯誤（少了一個
r），上個世紀制定HTTP/1.0協議時發生的拼寫錯誤，后來被大量服務使用就沒有改了，
<meta charset="UTF-8">
<meta name="description" content="淘寶網 - 亞洲較大的網上交易平臺，提供各類服飾、美容… ">
<meta name="keyword" content="淘寶,掏寶,網上購物,C2C,在線交易,交易市場,網上交易...">
<!-- viewport：設定視口大小及縮放 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">
<!-- 如果目標更加安全，則發送完整 URL，否則不發送referrer -->
<meta name="referrer" content="no-referrer-when-downgrade">
<!-- format-detection：禁用（IOS）上的電話號碼、郵箱檢測 -->
<meta name="format-detection" content="telephone=no, email=no">
<!-- 瀏覽器內核：webkit -->
<meta name="renderer" content="webkit">
<!-- 網站型別(百度定義的)，pc,mobile -->
<meta name="applicable-device" content="pc">
<!-- 淘寶自己定義的元資料，用于跟蹤電商資料 -->
<meta name="spm-id" content="a21bo">
<!-- 檔案編碼型別Content-Type -->
<meta http-equiv="Content-Type" content="text/html" charset="utf-8">
<!-- 過期時間：0立即過期 -->
<meta http-equiv="expires" content="0">
<!-- 瀏覽器兼容性設定：優先使用 IE 最新版本和 Chrome -->
<meta http-equiv="X-UA-Compatible" content="IE=10,chrome=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- no-transform主要是用在 proxy 服務器，不允許進行格式轉換 -->
<meta http-equiv="Cache-Control" content="no-transform">
<!-- 是早期百度提供的禁止將網頁進行轉碼的代碼 -->
<meta http-equiv="Cache-Control" content="no-siteapp">
2.4、<link>外部資源
<link>用于加載外部資源，并指定當前檔案與外部資源的關系（relationship），一般都是放在在head中使用，常用于引入樣式資源，ref為stylesheet時也可以放到body中，
| 屬性 | 描述 | 值/備注 |
|---|---|---|
| rel | 關系（relationship），表示引入的檔案與前檔案與的關系 | ?? stylesheet：樣式檔案css，比較常用；icon：網站圖示； ?? preload：預加載，更多鏈接型別 |
| href | 外部檔案路徑，支持url、檔案路徑的資源地址 | 參考資源路徑 |
| type | 被連接檔案的MIME 型別 | text/css（樣式檔案，常用）、text/html等MIME型別 |
| media | 媒體查詢，滿足媒體條件才會被加載 | media="screen and (max-width: 600px)" |
| disabled | 禁用該樣式資源 | |
| 字符編碼，已淘汰的屬性 |
<link type ="text/css" rel="stylesheet" href="https://www.cnblogs.com/anding/p/css1.css">
<link rel="icon" href="https://www.cnblogs.com/res/favicon.ico" type="image/x-icon">
?注意： 如果你的網站使用了內容安全策略（Content Security Policy，CSP）來增加安全性，這個策略會應用在圖示上，如果你遇到了圖示沒有被加載的問題，你需要確認 Content-Security-Policy 回應頭的 img-src 指令有沒有禁止訪問圖示，
2.5、< script>腳本
<script>元素用于嵌入或參考可執行腳本，通常指向 JavaScript 代碼，除了放到head，也可以放到其他位置，一般推薦放到body后，等html加載完成再執行，因為<script>默認是阻塞式的，要等他加載、執行完才會繼續網頁后面的內容，
| 屬性 | 描述 | 值/備注 |
|---|---|---|
| src | 外部資源地址，與嵌入腳本代碼不可同時使用 | 資源路徑 |
| type | 定義腳本語言型別，可空，默認為JavaScript型別 | 支持的MIME型別包括text/javascript, text/ecmascript, application/javascript, 和application/ecmascript |
| async | （異步）并行加載，加載完后執行 | 注意：多個async腳本加載完成的順序不確定 |
| defer | 告訴瀏覽器在決議完成 HTML 后再加載 JavaScript | 是個懂事的孩子！注意：多個defer腳本是順序加載執行的 |
<script src="https://www.cnblogs.com/anding/p/js檔案路徑" type="text/javascript" defer></script>
<script>
console.log("hello world!");
</script>
03、HTML常見屬性
3.1、全域公共屬性
全域公共屬性是所有 HTML 元素共有的屬性，它們可以用于所有元素，即使屬性可能對某些元素不起作用，
| 屬性 | 描述 | 值/備注 |
|---|---|---|
| id | 唯一識別符號（ID），表示整個檔案唯一的元素，重復則第一個有效，可用來定位元素， | <div id="app"> |
| name | 名稱，給元素一個名分，建議填寫，很有用的： ?? 可用來定位元素： document.getElementsByName(name)?? <input>表單單選radio、多選checkbox用name來分組?? form表單提交資料用元素的 name作為引數名（key），也可form.inputName?? a標簽的 name可以用來做為錨點：<a href="https://www.cnblogs.com/anding/p/#name"/> |
|
| class | 樣式類名，類選擇器（.classname），多個空格分割，可用來定位元素， |
|
| style | 行內樣式，在屬性上快速寫css樣式， | style="color:red;" |
| title | 提示文本，滑鼠懸浮顯示 | |
| hidden | 隱藏元素，不顯示，同display: none，但hidden只兼容IE11以上 |
|
| lang | 語言，元素所用的語言，zh（中文）、en（英文） | |
| tabindex | Tab鍵焦點排序，通過Tab鍵切換元素焦點 | 整數 |
| contenteditable | 元素是否可編輯，啟用后可以編輯元素內容 | bool值 |
| inputmode | 輸入模式，輸入的虛擬鍵盤，用于<input>元素，及contenteditable模式下的任何元素 |
|
| draggable | 元素拖動，HTML 拖放 API | bool值 |
| dir | 文本方向，列舉值：ltr（左到右）、rtl（右到左）、auto | dir="rtl" |
| accesskey | 鍵盤快捷鍵，需配合瀏覽器的快捷鍵使用，一般為Alt+設定的快捷鍵 |
accesskey="W" |
- MDN的全域屬性
3.2、資源路徑src/href
資源檔案路徑，如img的src指向一個外部資源檔案，一般有下面三種路徑方式，
<script>標簽的src<img>的src<link>標簽的href<a>標簽的href
| 路徑 | 描述 |
|---|---|
| 絕對路徑 | 在電腦磁盤上的檔案絕對（完整）路徑：如 "D:\\Project_Files\\res\\png-0078.png"，注意需要WEB服務器對該檔案有訪問權限， |
| 相對路徑 | 在當前Web專案目錄內，進行資源路徑定位的相對路徑，如父級、同級/子級、根目錄等，通過相對與自己的位置去定位目標檔案路徑，相對路徑是使用最頻繁的路徑方式了！ ?? 父級 ../：父級目錄，向上一級，可多個組合向上多級，如../../向上2級，?? 同級/子級 ./：同級目錄（包含子級），可以省略，?? 跟目錄 /：表示當前Web專案的根目錄， |
| 網路路徑 | http網路地址 |
04、HTML元素分類
HTML5之前，經常把元素分為塊元素、行內元素，HTML5有了新的磁區方式，按照內容模型來區分，包括元資料模型、區塊型、標題型、檔案流性、陳述句型、內嵌型、互動型、混合型等，但塊元素、行內元素依然作為一種常用的分類方式使用，
| 塊元素-塊元素 | 行內元素-行內元素 | |
|---|---|---|
| 是否換行 | 獨占一行，從新的一行開始，其后也另起一行 | 和其他元素在同一行 |
| 大小設定 | 元素的高、寬、行高、邊距、對齊都可調整，寬度默認100% | 元素高、寬、外邊距不可設定，寬度根據內容自適應 |
| 包含元素 | 一般可包含其他行內元素和塊元素 | 一般可包含其他行內元素，不可包含塊元素 |
| 常見元素 | div，hr、br，form、table，h1-6，p，pre，ul/ol | span，font，span，input，textarea，label，img，a，button，select |
- 還有一種混合型“行內塊元素”，和其他元素在一行，但元素的高、寬、外邊距都可以設定，如
button、img、input，- 通過CSS樣式的
display屬性可以更改元素的型別，如可設定<a>為一個塊元素布局display: block;
- HTML所有元素的在線清單
- HTMl元素清單（中文版）
05、關于HTML5
2014年正式發布的HTML5是一個里程碑版本，他將HTML5當做WEB應用開發平臺，制定了一些列新的標準，不僅僅是HTML標準的升級，還包括CSS、JavaScript，是一整套的新一代WEB應用解決方案，HTML5定義了一系列新元素，如新語意元素、智能表單、多媒體標簽等，可以幫助開發者創建富互聯網應用，
IE8 及以下版本的瀏覽器不支持 H5 和 CSS3，解決方法是引入
html5shiv.js檔案，
我們現在常用的如在線畫圖、在線表格、Office365、網頁游戲等富WEB應用，以及基于WEB的混合技術客戶端，都是HTML5的佳作，
??著作權申明：著作權所有@安木夕，本文內容僅供學習，歡迎指正、交流，轉載請注明出處！原文編輯地址
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/519071.html
標籤：Html/Css
上一篇：PKI，CA詳解學習筆記
下一篇：事件委托