一.HTML簡介
1.什么是HTML
HTML 指的是超文本標記語言 (Hyper Text Markup Language)
HTML 不是一種編程語言，而是一種標記語言 (markup language)
標記語言是一套標記標簽 (markup tag)
-
HTML 使用標記標簽來描述網(wǎng)頁
超文本的基本特征就是可超鏈接文檔，有2層含義：
a.它可以加入圖片、聲音、動畫、多媒體等內(nèi)容（超越了文本限制）。
b.它還可以從一個文件跳轉到另一個文件，與世界各地主機的文件連接（超鏈接文本）。
二、Web標準
web標準石油W3C組織和其他標準化組織制定的一系列標準的集合。W3C（萬維網(wǎng)聯(lián)盟）是國際最著名的標注化組織。
1.Web標準的構成
主要包括結構(Structure)、表現(xiàn)(Presentation)和行為(Behavior)三個方面。
| 標準 | 說明 |
|---|---|
| 結構 | 結構用于付網(wǎng)頁元素進行整理和分類，現(xiàn)階段主要學的是HTML。 |
| 表現(xiàn) | 表現(xiàn)對于設置網(wǎng)頁元素板式、顏色、大小等外觀樣式，只要是指CSS |
| 行為 | 行為是指網(wǎng)頁模型的定義及交互的編寫，現(xiàn)階段主要學的是Javascript |
Web標準提出的最佳體驗方案是：結構、樣式、行為相分離。
即結構寫到HTML文件中，表現(xiàn)寫到CSS中，行為寫到Javascript中。
三、開發(fā)工具VScode
1.插件安裝
Chinse Language：漢化插件
Open in brower：在瀏覽器中打開
安裝方法：
第一步點擊左邊最下面的圖標，或者按ctrl+shift+x調(diào)出應用商店
第二步搜索chin，找到簡體中文；open in 找到Open in brower
第三步點擊install即可。
2.json配置
加入以下兩行代碼能使代碼保存時自動格式化代碼。
"editor.formatOnType": true,
"editor.formatOnSave": true,
3.快捷鍵
!+tab 快速生成
Ctrl+Shift+N 打開新的編輯器窗口
Ctrl+Shift+W 關閉編輯器
Ctrl + X 剪切
Ctrl + C 復制
Alt + up/down 移動行上下
Shift + Alt up/down 在當前行上下復制當前行
Ctrl + Shift + K 刪除行
Ctrl + Enter 換行
Ctrl + Shift + Enter 在當前行上插入新的一行
Ctrl + ] 該行向左縮進一個tab距離
Ctrl + [ 該行向右縮進一個tab距離
Home 光標跳轉到行頭
End 光標跳轉到行尾
Ctrl + Home 跳轉到頁頭
Ctrl + End 跳轉到頁尾
Ctrl + up/down 行視圖上下偏移，相當于滾輪上/下滑
Alt + PgUp/PgDown 屏視圖上下偏移，相當于上/下一頁
Ctrl + Shift + [ 折疊區(qū)域代碼
Ctrl + Shift + ] 展開區(qū)域代碼
Ctrl + / 添加單行注釋
Shift + Alt +A 塊區(qū)域注釋
導航快捷鍵
Ctrl + T 列出所有符號
Ctrl + G 跳轉行
Ctrl + P 跳轉文件
Ctrl + Shift + O 跳轉到符號處
Ctrl + Shift + M 或 Ctrl + J 打開問題展示面板
F8 跳轉到下一個錯誤或者警告
Shift + F8 跳轉到上一個錯誤或者警告
Ctrl + Shift + Tab 切換到最近打開的文件
Alt + left / right 向后、向前
Ctrl + M 進入用Tab來移動焦點
Ctrl + F 查詢
Ctrl + H 替換
Alt + Enter 選中所有出現(xiàn)在查詢中的
Ctrl + D 匹配當前選中的詞匯或者行，再次選中-可操作
多行光標快捷鍵
Alt + 鼠標左鍵 插入光標-支持多個
Ctrl + Alt + up/down 上下插入光標-支持多個
Ctrl + U 撤銷最后一次光標操作
Shift + Alt + 鼠標左鍵 插入光標到選中范圍內(nèi)所有行結束符-支持多個
Ctrl + F2 選擇所有出現(xiàn)在當前選中的詞匯-操作
Shift + Alt + right 從光標處擴展選中全行
Shift + Alt + left 收縮選擇區(qū)域
Ctrl + Shift + Alt + PgUp/PgDown 插入多行光標的[整屏生效]
Shift + Alt + F 格式化代碼
F12 跳轉到定義處
Alt + F12 代碼片段顯示定義
Ctrl + K F12 在其他窗口打開定義處
Ctrl + . 快速修復部分可以修復的語法錯誤
Shift + F12 顯示所有引用
F2 重命名符號
Ctrl + Shift + . / , 替換下個值
編輯器管理快捷鍵
Ctrl + F4, Ctrl + W 關閉編輯器
Ctrl + |切割編輯窗口
Ctrl + 1/2/3 切換焦點在不同的切割窗口
Ctrl + Shift + PgUp/PgDown 切換標簽頁的位置
文件管理快捷鍵
Ctrl + N 新建文件
Ctrl + O 打開文件
Ctrl + S 保存文件
Ctrl + Shift + S 另存為
Ctrl + F4 關閉當前編輯窗口
Ctrl + W 關閉所有編輯窗口
Ctrl + Shift + T 撤銷最近關閉的一個文件編輯窗口
Ctrl + Enter 保持開啟
Ctrl + Shift + Tab 調(diào)出最近打開的文件列表，重復按會切換
Ctrl + Tab 與上面一致，順序不一致
Ctrl + P 復制當前打開文件的存放路徑
Ctrl + R 打開當前編輯文件存放位置【文件管理器】
四、HTML基本骨架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=f, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
1.<!DOCTYPE>聲明標簽
文檔類型聲明標簽，作用就是告訴瀏覽器使用哪種html版本來顯示網(wǎng)頁。
<!DOCTYPE html>
這句話的意思是：當前頁面采取的是HTML5版本來顯示網(wǎng)頁。
注意：
a.<!DOCTYPE> 聲明位于文檔中的最前面的位置，處于 <html> 標簽之前。
b.<!DOCTYPE>不是一個 HTML標簽，它就是文檔類型聲明標簽。
2.lang語言種類
用來定義當前文檔顯示的語言。
- <html lang="en">定義語言為英語 。
- <html lang="zh-CN">定義語言為中文
- <html lang="Fr">定義語言為法語。
- 其實對于文檔顯示來說，定義成en的文檔也可以顯示中文，定義成zh-CN的文檔也可以顯示英文
這個屬性對瀏覽器和搜索引擎的作用是讓瀏覽器指導你是哪種語言的網(wǎng)頁，例如在定義為法語的情況下輸入中文網(wǎng)頁會提示翻譯。
3.Character set字符集
1.字符集 (Character set)是多個字符的集合。以便計算機能夠識別和存儲各種文字。
2.charset 常用的值有：GB2312 、BIG5 、GBK 和 UTF-8，其中 UTF-8 也被稱為萬國碼，基本包含了全世界所 有國家需要用到的字符.
3.寫法：在<head>標簽內(nèi)，可以通過<meta> 標簽的 charset 屬性來規(guī)定 HTML 文檔應該使用哪種字符編碼。 <meta charset="UTF-8">
4.注意：上面語法是必須要寫的代碼，否則可能引起亂碼的情況。一般情況下，統(tǒng)一使用且統(tǒng)一寫成“UTF-8”編碼。
五、HTML語法規(guī)范
5.1基本語法規(guī)范
HTML標簽是由尖括號包圍的關鍵字，例如<html>。
HTML標簽通常是成對出現(xiàn)的，例如<html>和</html>,我們稱為雙標簽。標簽對中第一個出現(xiàn)的是開始標簽，第二個出現(xiàn)的是結束標簽。結束標簽通常是在前面加一個“/”。
有些特殊的標簽必須是單個標簽（極少情況下），例如br標簽，我們稱為單標簽。
5.2標簽關系
雙標簽關系可以分為兩類：包含關系和并列關系。
1.包含關系（父子關系）：
<head>
<title></title>
</head>
此時head標簽與tittle標簽就是包含關系，head標簽是父元素，tittle標簽是子元素。
2.并列關系（兄弟關系）
<head></head>
<body></body>
