簡介
HTML: Hyper text markup language (超文本標記語言)
語言分爲解釋性語言和標記語言。
像C語言，c++，java等需要編譯成二進制文件被電腦識別後運行的是解釋性語言。
而Html是一種標記語言，瀏覽器會直接將對其的解釋呈現出來。
VSCode 寫 HTML
半角狀態下輸入感嘆號 ! ,然後按 Tab 鍵進行填充即可得到 HTML 的模板。
模板如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>
規範代碼
在保存時自動填充空格格式化代碼，使代碼更規範。
步驟：
- 快捷鍵 Ctrl + ,
- 在彈出的頁面中輸入 emment.include
- 點擊 settings.json 在彈出的頁面結尾加上
"editor.formatOnType": true,
"editor.formatOnSave": true
注意結尾沒有逗號。即可保存時自動格式化代碼。
標籤
標題
一共六級，從上至下大小依次遞減。
<h1></h1>
<h2></h2>
···
<h6></h6>
換行
單標籤
<br />
加粗
有兩個加粗的標籤，效果雖然相同，但strong語義更強烈。
<strong>Document</strong>
<b>Document</b>
傾斜
<em>Document</em>
佈局
佈局標籤，大布局，一個 div 只能佔一行，然後再向裏面填充內容。
<span></span>
小布局，同一行可以填充多個 div 。
<div></div>
圖像標籤
img 裏面參數的作用，屬性之間不分先後順序。
- src = “圖片所在的路徑”
- alt = “替換文本，如果圖片無法顯示，這裏的文字顯示出來”
- title = “提示文本，鼠標放在圖片上，加載出來的文字作爲提示”
- weight = “控制的圖像的寬度”
- height = “控制圖像的高度，以像素爲單位”
- border = “設置圖像的邊框”
相對路徑和絕對路徑
例子
- c:/a/q/b.jpg
- c:/c.jpg
- c/a/d/
- 如果當前位置爲 c : / 需要訪問 c : / a / q / b.jpg 的圖片
q / b.jpg
- 如果當前位置爲 c : / a / d 需要訪問 c : / a / q / b.jpg 的圖片
../a/q/b.jpg
模型
以當前文件所在位置爲其實位置，需要訪問的文件爲結尾。所做的操作也就是向上訪問向下訪問即可，而向下訪問就是之間寫文件名即可，向上訪問 則需要如下操作。這樣組合即可訪問到我們所需要的文件。
../
超鏈接標籤
向新網頁跳轉
a 標籤一共兩個屬性。
- href 跳轉的頁面，內部鏈接直接按照路徑來寫即可，外部鏈接需要寫 http ，如果鏈接是壓縮包那麼會直接下載下來。
- target 一共有兩個屬性， _self 覆蓋當前頁面打開， _blank 在新窗口打開。
<a href = "http://weijiew.com" target = "_blank">my blog</a>
在網頁內部上下跳轉
將 href 指向對應位置標籤的 id 即可，類似於目錄的作用。
<a href = "#h1" >my blog</a>
<h1 id="h1">h1</h1>