第一天：

一、基礎(chǔ)認(rèn)知

1.網(wǎng)頁(yè)由哪些部分組成：圖片，音頻，視頻，超鏈接。

2.前端代碼由“瀏覽器”轉(zhuǎn)化成用戶眼中的頁(yè)面。（解析和渲染）

3.瀏覽器：是網(wǎng)頁(yè)顯示、運(yùn)行的平臺(tái)，前端開發(fā)必備利器

4.渲染引擎（瀏覽器內(nèi)核）：瀏覽器中專門對(duì)代碼進(jìn)行解析渲染的部分

5.web標(biāo)準(zhǔn)

二、基礎(chǔ)html

1.<strong>...</strong>，是雙標(biāo)簽語(yǔ)句，作用是加粗

ctrl+s保存

ctrl+/注釋

shift+1-》！，輸入！可以直接生成框架

HTMl骨架結(jié)構(gòu)：

html標(biāo)簽：網(wǎng)頁(yè)的整體

head標(biāo)簽：網(wǎng)頁(yè)的頭部

body標(biāo)簽：網(wǎng)頁(yè)的身體

title標(biāo)簽：網(wǎng)頁(yè)的標(biāo)題

html之間由嵌套關(guān)系和并列關(guān)系

第二天：

1.排版標(biāo)簽

標(biāo)題標(biāo)簽：Ctrl+d連選相同數(shù)字，然后一起修改

shift+alt+向下 添加標(biāo)題

段落標(biāo)簽：若輸入文字過(guò)多，導(dǎo)致要拖動(dòng)很久的輻條，則查看-自動(dòng)換行（alt+Z）勾選

最新版的vscode按！已經(jīng)不會(huì)出html骨架了，現(xiàn)在要構(gòu)建html框架輸入的是html：5然后回車

2.文本格式化標(biāo)簽：

3.媒體標(biāo)簽

./當(dāng)前的（相對(duì)路徑）

mac的是根目錄

相對(duì)路徑（常用）

概念普及：

當(dāng)前文件：當(dāng)前的html網(wǎng)頁(yè)

目標(biāo)文件：要找到的圖片

相對(duì)路徑：從當(dāng)前文件開始出發(fā)目標(biāo)文件的 過(guò)程

相對(duì)路徑分類：

同級(jí)目錄

下級(jí)目錄

文件夾名字/圖片名字如

imges/f.gif

上級(jí)目錄

../返回上級(jí)目錄

如果在不同文件夾，卻相鄰，相對(duì)路徑則先返回上級(jí)../再進(jìn)入目標(biāo)文件夾尋找

如../imges/f.jpg

音頻標(biāo)簽

autoplay部分瀏覽器不支持

任何標(biāo)簽里的src都是指路徑的意思

視頻標(biāo)簽

谷歌瀏覽器可以讓視頻自動(dòng)播放，但必須是靜音狀態(tài)muted

MP4只支持h264編碼的，其他編碼會(huì)沒有畫面

4.鏈接標(biāo)簽

href全稱hyperlink reference 超鏈接引用

--跳轉(zhuǎn)地址

（超鏈接是目前唯一自帶顏色的標(biāo)簽）

當(dāng)開發(fā)網(wǎng)站初期，我們還不知道跳轉(zhuǎn)地址的時(shí)候，href的值書寫#（空連接）

如果不寫target，默認(rèn)值是_self覆蓋原網(wǎng)頁(yè)

index網(wǎng)頁(yè)首頁(yè)

一、列表標(biāo)簽

目標(biāo)：能夠使用無(wú)需列表、有序列表、自定義列表標(biāo)簽，實(shí)現(xiàn)網(wǎng)頁(yè)中列表結(jié)構(gòu)的1搭建

1.列表的應(yīng)用場(chǎng)景

2.無(wú)序列表

3.有序列表

4.自定義列表

二、表格標(biāo)簽

表格邊框：border邊框?qū)傩裕簊olid實(shí)線顯示

<table border="1px">

tab縮進(jìn)

shift+tab退回

合并單元格-思路

場(chǎng)景：將水平或垂直多個(gè)單元格合并成一個(gè)單元格

1.跨行合并（垂直合并成一個(gè)）

2.跨列合并（水平合并成一個(gè)）

三、表單標(biāo)簽

目標(biāo)：能夠使用表單相關(guān)標(biāo)簽和屬性，實(shí)現(xiàn)網(wǎng)頁(yè)中表單類網(wǎng)頁(yè)結(jié)構(gòu)搭建

input是行內(nèi)塊元素所以不換行

action表單提交地址

button：若要有提示文本則額外添加屬性value：提示文本

1. 向上復(fù)制單元格：Shift +Alt+UpArrow 2. 向下復(fù)制單元格：Shift +Alt+DownArrow

如果在行代碼的末端直接回車都知道，如果光標(biāo)在中間開頭的就CTRL+回車

四、語(yǔ)義化標(biāo)簽

目標(biāo)：能夠認(rèn)識(shí)開發(fā)中沒有語(yǔ)義布局標(biāo)簽（div和span）和有語(yǔ)義的布局標(biāo)簽

場(chǎng)景：實(shí)際開發(fā)網(wǎng)頁(yè)時(shí)會(huì)大量頻繁的使用div和span這倆個(gè)沒語(yǔ)義的布局標(biāo)簽

div標(biāo)簽：一行只現(xiàn)實(shí)一個(gè)（獨(dú)占一行）

span標(biāo)簽：一行可以顯示多個(gè)

五、實(shí)體標(biāo)簽

目標(biāo)：能夠通過(guò)字符實(shí)體在網(wǎng)頁(yè)中顯示特殊符號(hào)

css

pixel像素--px

二、基礎(chǔ)選擇器

目標(biāo)：理解選擇器的作用，能夠使用基礎(chǔ)選擇器在HTML中選擇元素

選擇器的作用：

選擇頁(yè)面中對(duì)應(yīng)標(biāo)簽（找她），方便后續(xù)設(shè)置樣式（改她）

優(yōu)先級(jí) id選擇器 > 類選擇器 > 標(biāo)簽選擇器

清除內(nèi)外邊距

三、字體樣式和文本樣式

就近原則，行內(nèi)優(yōu)先，頁(yè)面其次，外嵌最后

作用域小優(yōu)先級(jí)高

多個(gè)屬性以空格隔開

復(fù)合屬性：一個(gè)屬性冒號(hào)后面書寫多個(gè)值的寫法

這個(gè)是塊元素整體居中，text-align是塊元素里面的元素基于父元素居中

p是段落文本，div是一整塊地

div相當(dāng)于文本框

一、選擇器進(jìn)階

目標(biāo)：能夠理解復(fù)合選擇器的規(guī)則，并使用復(fù)合選擇器在HTML中選擇元素

后代選擇器選擇所有的后代

選擇器1和選擇器2可以為標(biāo)簽，ID，類

div+p（同級(jí)）生成div和p標(biāo)簽

ul>li{111}*3

ul里面三個(gè)li，每個(gè)li為111

ul>li{$}*3

ul里面三個(gè)li，每個(gè)li數(shù)值遞增

二、背景相關(guān)屬性

正數(shù)：向右向下移動(dòng)；負(fù)數(shù)：向左向右移動(dòng)

注意：背景色和背景圖只顯示在盒子里面

背景圖位置如果是英文單詞可以顛倒順序

數(shù)字就不可以

三、元素顯示模式

四、css特性

目標(biāo)：能夠認(rèn)識(shí)css的繼承和層疊特性

選多行加內(nèi)容刪除alt+shift+鼠標(biāo)左鍵單擊

一、css三大特性

目標(biāo)：能認(rèn)識(shí)不同選擇器的優(yōu)先級(jí)公式，能夠進(jìn)行css權(quán)重疊加計(jì)算，分析并解決css沖突問(wèn)題

！important不要給繼承的添加，自己有樣式無(wú)法繼承父級(jí)樣式

就近原則

三、盒子模型

目標(biāo)：能夠認(rèn)識(shí)盒子模型的組成，能夠掌握盒子模型邊框、內(nèi)邊距、外邊距的設(shè)置方法

border屬性不分順序，粗細(xì)+線條種類+線條顏色

也可padding-方位名詞

某一邊不想設(shè)內(nèi)邊距，設(shè)置0px即可

撐大盒子的都有啥？border+padding

要保持盒子尺寸不變則，新尺寸=原尺寸-2*（border大小+padding大?。?/p>

margin外邊距用法和padding一樣

margin：0 auto；auto外邊距自動(dòng)擠壓

設(shè)計(jì)稿開頭代碼可以用下列