web1.0 靜態(tài)頁面 用戶信息的消費者
web2.0? 動態(tài)交互? 用戶既是信息消費者也是信息的制造
?web3.0? 移動互聯(lián)網(wǎng) 基于HTML5開發(fā)
軟件：VSCode
常用快捷鍵：
1劫窒、打開命令面板：ctrl + shift + p | F1
2陷谱、在默認(rèn)瀏覽器打開? alt + b 通贞， 在其他瀏覽器打開? alt + shift + b
3裸违、向下復(fù)制行? shift + alt? + 向下箭頭
4住练、向上復(fù)制行? shift + alt? + 向上箭頭
5交洗、向下移動行? alt + 向下箭頭
6梧躺、向上移動行? alt + 向上的箭頭
7劣挫、查找? ctrl + f
8册养、替換? Ctrl + h
9、保存? Ctrl + s
10压固、ctrl+ 增大字號? Ctrl-減小字號
11捕儒、注釋? ctrl + /? alt + shift + a
前端界面的三個組成部分：
HTML 超文本標(biāo)記語言
?css? 樣式表語言
javascript? 腳本語言
HTML超文本標(biāo)記語言
HTML文檔——網(wǎng)頁
后綴名.html
分類：
單標(biāo)簽：<標(biāo)簽名>
雙標(biāo)簽：<標(biāo)簽名>[內(nèi)容]</標(biāo)簽名>
<標(biāo)簽名? 屬性名1="屬性值"? 屬性名2="屬性值">[內(nèi)容]</標(biāo)簽名>
?HTML注釋
<!-- html注釋內(nèi)容 -->
HTML基本結(jié)構(gòu)
?1、新建一個后綴名為.html的文件
?2邓夕、在html文件中，輸入英文狀態(tài)感嘆號!阎毅，按下回車鍵焚刚，生成HTML基本結(jié)構(gòu)
?常用html標(biāo)簽
塊級標(biāo)簽
?div標(biāo)簽? 盒子 塊
?語法：<div>[content]</div>
特性：
1. 寬度默認(rèn)撐滿整個父元素
2. 高度默認(rèn)由內(nèi)容撐開
3.獨立成行——垂直顯示
h系列標(biāo)簽：標(biāo)題標(biāo)簽
語法：
? <h1>title1</h1>
<h2>title2</h2>
<h3>title3</h3>
?<h4>title4</h4>
<h5>title5</h5>
?<h6>title6</h6>
?特性：
1.寬度默認(rèn)撐滿整個父元素
2.高度默認(rèn)由內(nèi)容撐開
3.獨立成行——垂直顯示
4.默認(rèn)自帶文字加粗
5.自帶外間距
h1~h6標(biāo)題字號依次減小，重要程度依次減弱扇调；h1標(biāo)簽在一個頁面中只能出現(xiàn)一次
?p標(biāo)簽? 段落標(biāo)簽
語法：<p></p>
特性:
1.寬度默認(rèn)撐滿整個父元素
2.高度默認(rèn)由內(nèi)容撐開
3.獨立成行——垂直顯示
?4.自帶外間距
?ul li標(biāo)簽? 無序列表
ul列表容器
li列表項矿咕，一個ul中可以有多個li標(biāo)簽
語法： <ul>
? ? ? ? ? ? <li>hhh</li>
????????????<li>hhh</li>
????????????<li>hhh</li>
????????????</ul>
特性
1.寬度默認(rèn)撐滿整個父元素
2.高度默認(rèn)由內(nèi)容撐開
3.獨立成行——垂直顯示
4.自帶外間距
5.自帶內(nèi)填充
6.自帶列表符? li{ list-style: none; }? 去掉自帶列表
行級標(biāo)簽
a標(biāo)簽? 超鏈接標(biāo)簽
語法：<a href="鏈接的URL地址" title="提示信息">鏈接文字</a>
特性：
1.寬度、高度默認(rèn)由內(nèi)容撐開
2.默認(rèn)橫向顯示
3.換行和空格會被解析
4.自帶文字顏色
5.自帶下劃線
注意：#占位??href="#"
span標(biāo)簽? 萬能標(biāo)簽
em標(biāo)簽? 文字呈現(xiàn)斜體效果
i標(biāo)簽? 文字呈現(xiàn)斜體效果
特性：
寬度狼钮、高度默認(rèn)由內(nèi)容撐開
換行和空格會被解析
塊級標(biāo)簽
? ?dl列表容器? dt列表標(biāo)題? dd列表項
? 語法：
? ? ? ? <dl>
? ? ? ? ? ? <dt>專業(yè)名詞</dt>
? ? ? ? ? ? <dd>對專業(yè)名詞的解釋</dd>
? ? ? ? ? ? <dt>列表標(biāo)題</dt>
? ? ? ? ? ? <dd>列表項</dd>
? ? ? ? ? ? <dd>列表項</dd>
? ? ? ? </dl>
?特性
1.寬度默認(rèn)撐滿整個父元素
2.高度默認(rèn)由內(nèi)容撐開
3.獨立成行——垂直顯示
4.自帶外間距
?圖片標(biāo)簽??
img標(biāo)簽——單標(biāo)簽? 行塊級元素
?語法：
? ? <img src="圖片的路徑" alt="替換文本" width="" height="">
? ? src屬性：圖片的URL地址
? ? alt屬性：替換文本
? ? width屬性? 圖片的寬度
? ? height屬性? 圖片的高度
特性
1.默認(rèn)橫向顯示碳柱，一行排不下會換行
2.換行和空格會被解析
3.可以設(shè)置寬度和高度
標(biāo)簽嵌套規(guī)則
1.h系列標(biāo)簽、p標(biāo)簽熬芜、dt莲镣、dd不能相互嵌套
2.div標(biāo)簽中可以添加任意標(biāo)簽
3.ul標(biāo)簽的第一級子元素必須是li；dl標(biāo)簽的第一級子元素必須是dt? dd
4.行級標(biāo)簽一般不會嵌套塊級（a除外）涎拉，塊級標(biāo)簽中可以嵌套行級
