html入门教程博客,HTML基础教程
VScode 常用插件：vscode-icons?:?方便展示各種后綴文件
View?In?Browser?&?Open?in?Browser?:?右鍵使用瀏覽器打開文件
Live?Server?：?模擬服務器方式打開文件
HTML?CSS?Support：?補全代碼或提示css?樣式
vs code 其他常用插件1、Auto?Rename?Tag?修改html標簽，自動幫你完成尾部閉合標簽的同步修改，和webstorm一樣。
2、Auto?Close?Tag?自動閉合HTML標簽
4、Beautiful?格式化代碼的工具
5、Ejs?Snippets?ejs?代碼提示
6、ESLint?檢查javascript語法錯誤與提示
7、File?Navigator?快速查找文件
8、Git?History(git?log)查看git?log
9、Gulp?Snippets?寫gulp時用到，gulp語法提示。
10、HTML?Snippets?超級好用且初級的H5代碼片段以及提示
11、Debug?for?Chrome讓vs?code映射chrome的debug功能，靜態頁面都可以用vscode來打斷點調試
12、Document?this?Js的注釋模板
13、jQuery?Code?Snippets?jquery提示工具
14、Html2jade?html模板轉pug模板
15、JS-CSS-HTML?Formatter?格式化
16、Npm?intellisense?require?時的包提示工具
17、Path?Intellisense?自動路徑補全、默認不帶這個功能
18、Project?Manager多個項目之間快速切換的工具
19、Pug(Jade)?snippets?pug語法提示
20、React?Components?根據文件名創建反應組件代碼。
21、React?Native?Tools?reactNative工具類為React?Native項目提供了開發環境。
22、Stylelintcss/sass代碼審查
23、Typings?auto?installer?安裝vscode?的代碼提示依賴庫，基于typtings的
24、VueHelper?Vue2代碼段(包括Vue2?api、vue-router2、vuex2)
25、Vue?2?Snippets?vue必備vue代碼提示
26、Vue-color?vue語法高亮主題
VScode自定義快捷方式ctrl?+?win?+?z?：?快速注釋
shift+ctrl+alt+z：代碼格式化
Alt?+?Shift?+?A?:塊注釋
自動加載默認VScode 模板英文狀態下，輸入!+tab
html元信息設置自適應語句
#設置當前文檔的視窗、視口的寬度直接就等同于瀏覽此也沒得設備得寬度，并且初始化縮放比例為?1
html自定義代碼片段方法：位置：?File?-->?Peference?-->?user?Snippets
編寫規則：每個代碼段都要以代碼段名稱進行定義，并具有前綴、范圍、內容和描述幾個重要參數。
Print?to?console?:?代碼段名稱，也就是自定義代碼片段名稱。
scope：?范圍，指定代碼片段應用的語言范圍。
prefix：前綴，觸發代碼段的快捷鍵
body：代碼段內容
$1,?$2:?光標停留位置
description：?該代碼段的說明或概述
示例：
"snippets?html5":?{
"prefix":?"ht",
"body"?:?[
"html>",
"",
"
","\t",
"\t
${1:網頁標題}","\n",
"
\n","\n",
""
],
"description":?"Most?basic?code?for?html5?doc"
}
html 格式化常見標簽文本雙標簽名稱：h1/h2/h3/h4/h5/h6?-->標題
p??-->?段落、正文
strong/em??-->?重點強調/一般強調
b/i???-->?粗體/斜體
ul/ol/dl?-->?列表區域
li/dt/dd?-->?列表項目
多媒體標簽：?a?-->?超級鏈接
img?-->?圖片
audio?-->?音頻
video?-->??視頻
canvas?-->?畫布(可以繪制圖形的區域)
表格表單標簽：table?-->?整體表格區域
tr?-->?表格內的行
td?-->?表格內的單元格
form?-->?整體表單區域
input?-->?表單中的組件元素
button?-->?表單中的按鈕元素
select?-->?表單中的下拉列表
布局常見標簽：div?-->?通用的欄目、板塊區域
section?-->?通用的欄目、板塊區域(比div小的范圍，“部分”的區域)
span?-->?通用的小組合區域(最小范圍的)
header?-->?頁面頭部
footer?-->?頁面底部
aside?-->?頁面側邊欄
nav?-->?導航區域
article?-->?文本區域
Html關聯css三種方式行間引用?=?html代碼行中直接嵌套css
原標題：老師留作業讓孵小雞，家長崩潰稱“聞所未聞”
內聯引用?=?html頁面建立專門的css代碼區域進行關聯
持續推進更高水平的對外開放p?{
font-size:?20px;
line-height:?10px;
}
外鏈引用?=?html頁面中從外部鏈接導入獨立的css文件
這是一遍好玩的新聞CSS選擇符優先級關系：ID選擇符優先級最高，因其具有唯一性。這種唯一性是至JS獲取ID標簽時，只對第一個ID元素生效。
類(class)是自定義的類別歸納，優先級其次。
標簽選擇符是html默認對象設置，優先級最低。
CSS常用選擇符通配選擇符：*
*?{
margin:?0;
padding:?0;
}??#協助消除內外邊距默認值(UA)
后代選擇符
article?header?h4?{
color:?black;
font-size:?25px;
}
子代選擇符
header>h1?{
color:?white;
}
后代?子代組合使用
body?header?>?a?{
background:??green;
}
群組選擇符
header,?h1,?h4?{
color:?azure;
}
指定選擇符
p.bg-yellow?{
font-size:?30px;
}
CSS常用選擇符優先級權重值計算：STYLE?ATTRIBUTE:1000;ID(#)標簽選擇符：100；CLASS(.)類選擇符:10；元素(標簽)選擇符:1
html盒模型屬性width：?設置對象寬度；具有?min-width??和?max-width設定
height：設置對象高度；
padding：?設置對象內部邊距
margin：?設置對象外部邊距
border：設置對象的邊框效果
總結
以上是生活随笔為你收集整理的html入门教程博客,HTML基础教程的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 0+到10+随机数+java_Java随
- 下一篇： 初识前端模板引擎jade