VSCode 寫 HTML 文件
技術標籤：工具技巧前端htmlhtml5visual studio codeweb
VSCode 寫 HTML 文件
一、VSCode 的使用
1.1 軟體的下載和基本的 html 檔案建立
-
VSCode 下載可以去VSCode官網下載
-
新建檔案，該檔名和和檔案格式為.html即可
-
在新建的 html 檔案中輸入 ! 接著回車或按 Tab 鍵即可生成網頁骨架。
<!-- 輸入 ! 回車可快速生成下面骨架 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> </html> -
修改網頁的< title > 和 < body > 標籤為自己想修改的內容然後右鍵選擇Open In Default Browser 在預設瀏覽器中開啟，可能你的右鍵沒有這個選項，需要安裝外掛。
-
覺得頁面程式碼字型不合適可以通過 command + 加號鍵、和 command + 減號鍵調整字型大小。
1.2 VSCode 外掛使用
-
外掛安裝方法，在最左邊的是外掛功能選擇，之後再搜尋框搜尋外掛名安裝，重啟 VSCode 即可生效。
-
推薦安裝的外掛
- Chinese(Simplified)Language Pack for VS Code：中文（簡體）語言包
- Open in Browser：右鍵選擇在瀏覽器中開啟 html 檔案，上面演示的功能
- JS-CSS-HTML Formatter：每次儲存，都會自動格式化js、css 和 html 程式碼
- Auto Rename Tag：自動重新命名配對的 HTML/XML 標籤
- CSS Peek：追蹤至樣式
更多好用的外掛希望大家相互推薦~
1.3 VSCode 工具生成的骨架標籤新增的程式碼
-
文件型別宣告標籤 < !DOCTYPE >：告訴瀏覽器使用那種 HTML 版本來顯示網頁
< !DOCTYPE html > 表示當前頁面採用的是 HTML5 版本來顯示網頁。< !DOCTYPE html > 不是一個 HTML 標籤，它只是一個文件型別宣告標籤。
-
lang 語言種類：用來定義當前文件顯示的語言
en 定義語言為英語，zh-CN 定義語言為中文。無論哪種都可以在網頁裡寫中英文，都能正常顯示，這個屬性只用於瀏覽器翻譯功能的判斷而已。
-
字符集：是多個字元的集合，以便計算機能夠識別和儲存各種文字
在< head> 標籤內，可以通過 < meta> 標籤的 charset 屬性來規定 HTML 文件使用的字元編碼集。
charset 常用值有：GB2312、BIG5、GBK 和 UTF-8，其中 UTF-8 也被稱為萬國碼，基本包含了全世界所有國家需要用到的字元。
【注意】:上面語法是必須要寫的程式碼，否則可能引起亂碼的情況。一般情況下，統一使用“UTF-8”編碼，儘量統一寫成標準的 “UTF-8”，不要寫成 “utf8” 或 “UTF8”。