``

第一部分 前端HTML基礎(chǔ)

第一章 html基本結(jié)構(gòu)

認(rèn)識(shí)HTML：
html不是一種編程語(yǔ)言，是一種標(biāo)志語(yǔ)言
標(biāo)記語(yǔ)言是由一套標(biāo)識(shí)標(biāo)簽組成的
html使用標(biāo)簽來(lái)描述網(wǎng)頁(yè)
html結(jié)構(gòu)：

不成對(duì)出現(xiàn)的標(biāo)簽

---

標(biāo)簽

—-

僅僅用于標(biāo)題文本，不要為了產(chǎn)生粗體文本使用它們

標(biāo)簽 段落標(biāo)簽 *主要*標(biāo)簽都會(huì)讓文字產(chǎn)生加粗效果 *主要* 標(biāo)簽強(qiáng)調(diào) 用于傾斜 比強(qiáng)調(diào)更強(qiáng) 特殊符號(hào)： **? —->空格 > —>大于號(hào) <；—>小于號(hào)** "；—>引號(hào) ?–>版權(quán)號(hào)

第二章 html基本標(biāo)簽

HTMl基本標(biāo)簽：
span標(biāo)簽
對(duì)被用來(lái)組合文檔中的行內(nèi)元素
注意：span沒(méi)有固定的格式表現(xiàn)，當(dāng)對(duì)它應(yīng)用樣式時(shí)，才會(huì)產(chǎn)生視覺(jué)上的變化
標(biāo)簽—>他有一個(gè)必不可少的屬性 href
錨點(diǎn)也是一種超鏈接，是頁(yè)面內(nèi)進(jìn)行跳轉(zhuǎn)的超鏈接
第一步：創(chuàng)建錨點(diǎn)
第二步：使用創(chuàng)建好的錨點(diǎn)名稱 內(nèi)容

第三章 img圖片標(biāo)簽與路徑

圖片標(biāo)簽與路徑：

常見(jiàn)圖片格式 jpg png gif Gif （只支持全透明） Jpeg /jpg Png 半/全透明都支持

圖片標(biāo)簽寫法 ：

圖片四要素：

src=“” 圖片路徑
alt=“” 圖片含義
width=“” 圖片寬度 和圖片大小保持一致
height=“” 圖片高度 和圖片大小保持一致
title=“”
路徑知識(shí)：

相對(duì)路徑、絕對(duì)路徑：

相對(duì)路徑：(Relative Path) 相對(duì)于該文件的路徑；
絕對(duì)路徑：(Absolute Path) 從磁盤出發(fā)的路徑；
在靜態(tài)頁(yè)面中：
/開(kāi)頭表示根目錄；
./表示當(dāng)前目錄；（斜畫線前面一個(gè)點(diǎn)）
…/上級(jí)目錄；（斜畫線前面兩個(gè)點(diǎn)）
這些都是相對(duì)于當(dāng)前文件的位置來(lái)說(shuō)的，如果用絕對(duì)路徑的話就是寫全了。

第四章 三種列表的講解

三種列表的知識(shí)講解：

• 無(wú)序列表 無(wú)序列表是一個(gè)沒(méi)有順序項(xiàng)目的列表，此列表項(xiàng)默認(rèn)粗體圓點(diǎn)進(jìn)行標(biāo)識(shí)

有序列表 有序列表也是一列項(xiàng)目，只是列表項(xiàng)目使用的是數(shù)字進(jìn)行標(biāo)記。 有序列表始于

標(biāo)簽。每個(gè)列表項(xiàng)始于

標(biāo)簽。

內(nèi)容一

內(nèi)容二

內(nèi)容三

無(wú)序列表-嵌套

• 柚子
  • 沙田柚
  • 蜜柚
• 荔枝
• 蘋果

有序列表-嵌套

定義列表不僅僅是一列項(xiàng)目，而是項(xiàng)目及其注釋的組合。定義列表以

標(biāo)簽開(kāi)始。每個(gè)定義列表項(xiàng)以 開(kāi)始。每個(gè)自定義列表項(xiàng)的定義以

開(kāi)始。

pc網(wǎng)頁(yè)制作

學(xué)習(xí)DIV+CSS JS JQ 項(xiàng)目實(shí)戰(zhàn)

手機(jī)網(wǎng)頁(yè)制作

手機(jī)網(wǎng)頁(yè)制作實(shí)戰(zhàn)

dd是對(duì)dt的解釋

< dl>< /dl>用來(lái)創(chuàng)建一個(gè)普通的列表,
< dt>< /dt>用來(lái)創(chuàng)建列表中的上層項(xiàng)目，
< dd>< /dd>用來(lái)創(chuàng)建列表中最下層項(xiàng)目，
< dt>< /dt>和< dd>< /dd>都必須放在< dl>< /dl>標(biāo)志對(duì)之間。

中國(guó)城市

北京

上海

廣州

美國(guó)城市

華盛頓

芝加哥

紐約

list-style屬性具有三個(gè)屬性分量： list-style-position ：設(shè)置列表項(xiàng)圖標(biāo)的位置，位于文本內(nèi)或者文本外
list-style-type： 設(shè)置列表項(xiàng)圖標(biāo)的類型 list-style-image：使用圖像設(shè)置列表項(xiàng)圖標(biāo) 用于去掉li前面的項(xiàng)目符號(hào)（小圓點(diǎn)）

第五章 表單元素(上)

表單標(biāo)簽:

表單標(biāo)簽 表單是一個(gè)包含表單元素的區(qū)域，包括起來(lái)的都是表單的內(nèi)容

HTML標(biāo)簽 - 隱藏域隱藏標(biāo)簽：

隱藏域在頁(yè)面中對(duì)于用戶是不可見(jiàn)的，在表單中插入隱藏域的目的在于收集或發(fā)送信息，以利于被處理表單的程序所使用。瀏覽者單擊發(fā)送按鈕發(fā)送表單的時(shí)候，隱藏域的信息也被一起發(fā)送到服務(wù)器

標(biāo)簽的掌握

常用type類型：

type="text" 單行文本輸入框 type="password" 密碼（maxlength=""） type="radio" 單項(xiàng)選擇（checked="checked"） type="checkbox" 多項(xiàng)選擇 type="button" 按鈕 type="submit" 提交 type="image"圖片提交 type="file" 上傳文件 type="reset"重置 type="hidden" 隱藏 關(guān)于表單中的設(shè)置默認(rèn)值： **下拉菜單** textarea沒(méi)有默認(rèn)值

標(biāo)簽的使用

label 元素不會(huì)向用戶呈現(xiàn)任何特殊效果，增加了用戶體驗(yàn)感。
例子：（重要—注冊(cè)表單–用戶體驗(yàn)–必做）

單向選擇

男： 女：

第六章 表單和表格(下)

表單和表格標(biāo)簽：

文本域標(biāo)簽 標(biāo)簽： 是文本域標(biāo)簽，可以在其中插入一段文字內(nèi)容，它有兩個(gè)常用屬性rows和cols

注意： rows表示這個(gè)文本域有多少行 cols表示這個(gè)文本域有多少列
除了這兩個(gè)屬性它還有readonly（只讀，文本域的內(nèi)容無(wú)法改變，相當(dāng)于協(xié)議）和title（鼠標(biāo)放上提示）

標(biāo)簽的掌握

注：當(dāng)提交表單時(shí)，瀏覽器會(huì)提交選定的項(xiàng)目，或者收集用逗號(hào)分隔的多個(gè)選項(xiàng)，將其合成一個(gè)單獨(dú)的參數(shù)列表，并且在將 表單數(shù)據(jù)提交給服務(wù)器時(shí)包括 name屬性

1月 2月 常用到的屬性：disabled=“disabled” name="sel" size="2" 表格標(biāo)簽 表格標(biāo)簽： 是表格標(biāo)簽，可以用它定義一個(gè)表格。

姓名

性別

注意：的border屬性不能少 標(biāo)簽的使用 行標(biāo)簽： 可以定義表格中的一行，一個(gè)表示一行。

姓名	性別
姓名	性別

單元格標(biāo)簽: 可以定義表格中的一個(gè)單元格，表示一個(gè)單元格。

姓名

性別

愛(ài)好

border-collapse 屬性設(shè)置是否將表格邊框折疊為單一邊框： border-collapse:collapse; colspan左右合并 rowspan上下合并

第一部分總結(jié)

非可視化標(biāo)簽：head meta style scrpit…
可視化標(biāo)簽：img div span a ul li…
只有可視化標(biāo)簽，才能用css改變它
單標(biāo)簽：meta link base img input br hr
雙標(biāo)簽：html head body div a p span …ul li ol dl ….

常用可視化標(biāo)簽

div
一般用它來(lái)布局

a 超鏈接標(biāo)簽
href*屬性：設(shè)置跳轉(zhuǎn)的網(wǎng)頁(yè)地址
target屬性：設(shè)置跳轉(zhuǎn)的目標(biāo)
結(jié)論：凡事頁(yè)面可以點(diǎn)擊跳轉(zhuǎn)或者表單提交的文字，都用a標(biāo)簽

img
src*屬性用來(lái)設(shè)置圖片的url數(shù)據(jù)
alt提供給搜索引擎搜索的

width
height
結(jié)論 ：顯示圖片

ul li
列表
結(jié)論：只要將來(lái)設(shè)計(jì)頁(yè)面中有固定樣式的列表，就用ul和li

如果是合并豎排的就是合并行（rowspan）
如果是合并橫排的就是合并列（colspan）

第二部分 CSS

第七章 css基礎(chǔ)知識(shí)

css基礎(chǔ)知識(shí)：
css樣式表的定義
css：（Cascading Style Sheets）層疊樣式表；
分類及位置：內(nèi)部樣式-head區(qū)域style標(biāo)簽里面
外部樣式-link調(diào)用
內(nèi)聯(lián)樣式-標(biāo)簽元素里面
css內(nèi)的注釋：/注釋內(nèi)容/
css樣式表的語(yǔ)法

CSS規(guī)則由兩個(gè)主要的部分構(gòu)成：要添加樣式的盒子名或者標(biāo)簽名、和要添加的樣式。

盒子名或者標(biāo)簽名{屬性:值;}

CSS中幾種顏色的表示方法

用顏色名表示 有17個(gè)預(yù)先確定的顏色，它們是 aqua, black, blue, fuchsia, gray, green, lime,
maroon, navy, 　　olive, orange, purple, red, silver, teal, white, and
yellow 用十六進(jìn)制的顏色值表示(紅、綠、藍(lán))

#FF0000或者#F00 用rgb(r,g,b)函數(shù)表示

如：rgb(255,255,0) 用hsl(Hue,Saturation,Lightness)函數(shù)表示（色調(diào)、飽和度、亮度)

如：hsl(120,100%,100%),色調(diào)0代表紅色，120代表綠色，240代表 藍(lán)色 用rgba(r,g,b,a)函數(shù)表示

其中a表示的是改顏色的透明度，取值范圍是0~1，其中0代表完全透明
用hsla(Hue,Saturation,Lightness,alpha)函數(shù)表示

內(nèi)部樣式表
當(dāng)單個(gè)頁(yè)面需要設(shè)置樣式時(shí)，就應(yīng)該使用內(nèi)部樣式表。
使用 標(biāo)簽在文檔里面定義內(nèi)部樣式表

內(nèi)聯(lián)樣式表（優(yōu)先級(jí)高） 寫在標(biāo)簽里面的樣式 如：

表示給p標(biāo)簽里面的文字顏色設(shè)置為紅色

樣式的優(yōu)先級(jí)補(bǔ)充
相同權(quán)值情況下，CSS樣式的優(yōu)先級(jí)總結(jié)來(lái)說(shuō)，就是——就近原則（離被設(shè)置元素越近優(yōu)先級(jí)別越高）：
內(nèi)聯(lián)樣式表（標(biāo)簽內(nèi)部） > 嵌入樣式表（當(dāng)前文件中）> 外部樣式表（外部文件中）
權(quán)值不同時(shí)，瀏覽器是根據(jù)權(quán)值來(lái)判斷使用哪種css樣式的，哪種樣式權(quán)值高就使用哪種樣式

層疊優(yōu)先級(jí)是:

瀏覽器缺省< 外部樣式表 < 內(nèi)部樣式表 < 內(nèi)聯(lián)樣式
其中樣式表又有:類選擇器 < 類派生選擇器<ID選擇器 < ID派生選擇器
派生選擇器以前叫上下文選擇器，所以完整的層疊優(yōu)先級(jí)是:

瀏覽器缺省 <外部樣式表 < 外部樣式表類選擇器 < 外部樣式表類派生選擇器< 外部樣式表ID選擇器< 外部樣式表ID派生選擇器<
內(nèi)部樣式表 < 內(nèi)部樣式表類選擇器 < 內(nèi)部樣式表類派生選擇器 < 內(nèi)部樣式表ID選擇器 < 內(nèi)部樣式表ID派生選擇器 <
內(nèi)聯(lián)樣式…共12個(gè)優(yōu)先級(jí)

另外，如果同一個(gè)元素在沒(méi)有其他樣式的作用影響下，其Class定義了多個(gè)并以空格分開(kāi)，其優(yōu)先級(jí)順序?yàn)?#xff1a;

一個(gè)元素同時(shí)應(yīng)用多個(gè)class，后定義的優(yōu)先（即近者優(yōu)先），加上!important者最優(yōu)先！

第八章 css選擇器(上)

css選擇器：
class類選擇器可以重復(fù)利用
id選擇器唯一

標(biāo)簽選擇器
標(biāo)簽選擇器：頁(yè)面中所有的標(biāo)簽都是一個(gè)選擇器 p{color:red;}

ID選擇器
選擇id命名的元素 以 # 開(kāi)頭 #p1{color:#0f0;}
類選擇器

class選擇器，選擇clas命名的元素 以.開(kāi)頭 .first{color:#00f;}
css代碼寫完后上線前要經(jīng)過(guò)壓縮處理
本地和服務(wù)器分兩個(gè)css版本（備份）
壓縮后注釋都清除，空間體積減少

群組選擇器
選擇多個(gè)元素,以逗號(hào)隔開(kāi) #main,.first,span,a,h1{color:red;}

包含選擇器
選擇某元素的后代元素，也稱后代選擇器，父類與子類間以空格隔開(kāi)p
span{color:red;}

屬性選擇器
選擇包含某一屬性的元素
a[title]{color:red;} 選擇包含title的a標(biāo)簽
a[title][href]{color:red;} 選擇包含title和href的a標(biāo)簽

** 選擇器子類選擇器**
只選擇子元素（只選擇兒子）（相當(dāng)于包含元素）
p > span{color:red;}

相鄰兄弟選擇器
只選擇后面的相鄰兄弟元素
p + span{color:red;}

第十章 css選擇器(下)

偽類選擇器
a:link {color:#FF0000;} / 未訪問(wèn)的鏈接 / （只用于a標(biāo)簽）
a:visited {color:#00FF00;} / 已訪問(wèn)的鏈接 / （只用于a標(biāo)簽）
a:hover {color:#FF00FF;}/* 鼠標(biāo)移動(dòng)到鏈接上
*/（可和其他標(biāo)簽結(jié)合一起用）
a:active {color:#0000FF;} / 選定的鏈接 /
注意
偽類選擇器的排序很重要，a:link a:visited a:hover a:active

LV包包好啊

輸入偽類選擇器（針對(duì)表單）

input:focus{color:red;} / 鍵盤輸入焦點(diǎn) /

其他偽類選擇器
p:first-child{color:red;} /* 第一個(gè)p */
:before 在元素之前添加內(nèi)容。
:after 在元素之后添加內(nèi)容。

css優(yōu)先規(guī)則
內(nèi)聯(lián)樣式表-> ID 選擇器—> Class 類選擇器->標(biāo)簽選擇器

第十一章 背景屬性

背景屬性：

背景的添加 ：

背景顏色的添加:

background:red;
backgronnd-color:red;
背景圖片的添加：

background:url(“images/1.jpg”);
backgronnd-image:url(“images/1.jpg”);
背景的平鋪
什么是平鋪？平鋪就是圖片是否重復(fù)出現(xiàn)
不平鋪：background-repeat:no-repeat;
水平方向平鋪：background-repeat:repeat-x;
垂直方向平鋪：background-repeat:repeat-y;
完全平鋪：默認(rèn)為完全平鋪
背景圖片的定位
背景圖片的定位就是可以設(shè)置顯示背景圖片的位置，通過(guò)屬性background-position來(lái)實(shí)現(xiàn)
background-position的取值可為英文單詞或者數(shù)值和百分值。
background-positon的英文單詞取值
top left
top center
top right
center left
center center
center right
bottom left
bottom center
ottom right
background-positon的數(shù)值取值
background-position:x y;
positon的百分值取值
background-position:x% y%;
背景圖片的大小

背景圖片的大小可以通過(guò)屬性background-size來(lái)設(shè)置background-size的取值可為數(shù)值和百分值。
background-size的數(shù)值取值

background-size:x y;
background-size的數(shù)值取值

background-size:x% y%;
背景圖片的滾動(dòng)

背景圖片是否隨著內(nèi)容的滾動(dòng)而滾動(dòng)由background-attachment設(shè)置

background-attachment:fixed; 固定，不隨內(nèi)容的滾動(dòng)而滾動(dòng)

background-attachment:scroll; 滾動(dòng)，隨內(nèi)容的滾動(dòng)而滾動(dòng)

第十二章 文字文本屬性

css文字文本屬性：

文字屬性
color:red; 文字顏色
font-size:12px; 文字大小
font-weight:“bold” 文字粗細(xì)(bold/normal)
font-family:“宋體” 文字字體
font-variant:small-caps小寫字母以大寫字母顯示

文本屬性
text-align:center; 文本對(duì)齊(right/left/center)
line-height:10px; 行間距(可通過(guò)它實(shí)現(xiàn)文本的垂直居中)
text-indent:20px; 首行縮進(jìn)
text-decoration:none;
文本線(none/underline/overline/line-through)
letter-spacing: 字間距

第十三章 盒子模型

盒子模型
盒子模型就是一個(gè)有高度和寬度的矩形區(qū)域
所有html標(biāo)簽都是盒子模型
div標(biāo)簽自定義盒子模型
所有的標(biāo)簽都是盒子模型

class和id的主要差別是：class用于元素組（類似的元素，或者可以理解為某一類元素），而id用于標(biāo)識(shí)單獨(dú)的唯一的元素。

盒子模型組成部分：
自身內(nèi)容：width、height 寬高
內(nèi)邊距： padding
盒子邊框： border 邊框線
與其他盒子距離： margin外邊距
內(nèi)容+內(nèi)邊距+邊框+外邊距=面積
border 邊框

常見(jiàn)寫法 border:1px solid #f00;
單獨(dú)屬性：

border-width:
border-style:
dotted 點(diǎn)狀虛線
dashed（虛線）
solid（實(shí)線）
double（雙實(shí)線）
border-color (顏色)
padding 內(nèi)邊距

值：像素/厘米等長(zhǎng)度單位、百分比

padding:10px; 上下左右
padding:10px 10px; 上下 左右
padding:10px 10px 10px; 上 左右 下
padding:10px 10px 10px 10px; 上 右 下 左（設(shè)置4個(gè)點(diǎn)–>順時(shí)針?lè)较?#xff09;
單獨(dú)屬性：

padding-top:
padding-right:
padding-bottom:
padding-left:
當(dāng)設(shè)置內(nèi)邊距的時(shí)候會(huì)把盒子撐大，為了保持盒子原來(lái)的大小，應(yīng)該高度和寬度進(jìn)行減小，根據(jù)width和height減小

margin 外邊距

值：與padding相同

單獨(dú)屬性：與padding相同

外邊距合并：兩個(gè)盒子同時(shí)設(shè)置了外邊距，會(huì)進(jìn)行一個(gè)外邊距合并

清除內(nèi)外邊距

• {
  padding：0；
  margin：0；
  }

第十四章圓角邊框

語(yǔ)法：
border-radius: length;
①參數(shù)值可以為數(shù)值或百分比
②如果是正方形想要設(shè)置一個(gè)圓，把數(shù)值修改為寬度或者高度的一半即可，或直接寫50%
③如果是矩形，設(shè)置為高度的一半
④該屬性是一個(gè)簡(jiǎn)寫屬性，可以跟四個(gè)值，分別代表左上角、右上角、右下角、左下角（順時(shí)針）

第十五章盒子陰影

語(yǔ)法：
box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow:必需 水平陰影的位置，可以負(fù)值
v-shadow:必須 垂直陰影的位置，可以負(fù)值
blur:可選 模糊距離
spread:可選 陰影尺寸
color:可選 陰影顏色
inset:可選 將外陰影（outset）改為內(nèi)陰影

注意
①默認(rèn)是外陰影，但是不可以寫outset，否則導(dǎo)致陰影無(wú)效
②盒子陰影不占用空間，不會(huì)影響其他盒子的排列

第十六章浮動(dòng)

css提供三種傳統(tǒng)布局方式
①普通流（標(biāo)準(zhǔn)流/文檔流）：就是標(biāo)簽按照規(guī)定好的默認(rèn)方式排列
②浮動(dòng)
③定位
網(wǎng)頁(yè)布局第一標(biāo)準(zhǔn)：多個(gè)塊級(jí)元素縱向排列找標(biāo)準(zhǔn)流，多個(gè)塊級(jí)元素橫向排列找浮動(dòng)
語(yǔ)法：
選擇器 { float ：屬性值；}
屬性值：none 元素不浮動(dòng)（默認(rèn)值）
left 元素向左浮動(dòng)
right 元素向右浮動(dòng)
浮動(dòng)特性
1、浮動(dòng)元素會(huì)脫離標(biāo)準(zhǔn)流（脫標(biāo)）
①脫離標(biāo)準(zhǔn)流的控制（浮）移動(dòng)到指定位置（動(dòng)）
②浮動(dòng)的盒子不在保留原先的位置
2、浮動(dòng)元素會(huì)一行內(nèi)顯示并且元素頂部對(duì)齊
3、浮動(dòng)的元素會(huì)具有行內(nèi)塊元素的特性
浮動(dòng)元素經(jīng)常和標(biāo)準(zhǔn)流父級(jí)搭配使用
先用標(biāo)準(zhǔn)流的父元素排列上下位置，之后內(nèi)部子元素采取浮動(dòng)排列左右位置，符合網(wǎng)頁(yè)布局第一準(zhǔn)則
浮動(dòng)的注意點(diǎn)
1、浮動(dòng)和標(biāo)準(zhǔn)流的父盒子搭配
先用標(biāo)準(zhǔn)流父元素排列上下位置，之后內(nèi)部子元素采取浮動(dòng)排列左右位置
2、一個(gè)元素浮動(dòng)了，理論上其余的兄弟元素也要浮動(dòng)
浮動(dòng)盒子只會(huì)影響后面的標(biāo)準(zhǔn)流，不會(huì)影響前面的標(biāo)準(zhǔn)流

第十七章清除浮動(dòng)

清除浮動(dòng)的本質(zhì)：清除浮動(dòng)元素造成的影響。如果父盒子本身有高度，則不需要清除浮動(dòng)。
清除浮動(dòng)之后，父級(jí)就會(huì)根據(jù)浮動(dòng)的子盒子自動(dòng)檢測(cè)高度，父級(jí)有了高度，就不會(huì)影響下面的標(biāo)準(zhǔn)流了
語(yǔ)法：
選擇器 {clear：屬性值；}
屬性值：left 清除左側(cè)浮動(dòng)影響
right 清除右側(cè)浮動(dòng)影
both 同時(shí)清除左右兩側(cè)浮動(dòng)影響
清除浮動(dòng)策略：閉合浮動(dòng)
清除浮動(dòng)方法
1、額外標(biāo)簽法
在浮動(dòng)元素末尾添加一個(gè)空標(biāo)簽（必須是塊級(jí)元素）或

2、父級(jí)添加overflow屬性
給父級(jí)添加overflow屬性，將其屬性設(shè)置為hidden、auto或scroll
3、父級(jí)添加after偽元素
.clearfix:after {
content:“”;
height: 0;
clear: both;
visibility；hidden;
}
.clearfix {
*zoom: 1;
}
代表網(wǎng)頁(yè)：百度 網(wǎng)易 淘寶網(wǎng)
4、給父級(jí)添加雙偽元素
.clearfix :before ,.clearfix:after {
content:“”;
display:table;
}
.clearfix:after {

clear: both;

}
.clearfix {
*zoom: 1;
}
代表網(wǎng)頁(yè)：小米 騰訊

第十八章PS切圖

PS切圖方式：圖層切圖、切片切圖、PS插件切圖
圖層切圖：
最簡(jiǎn)單的切圖方式：（圖層菜單👉合并圖層ctrl+e）右擊圖層👉快速導(dǎo)出為PNG
切片切圖：
1、利用切片選中圖片
2、導(dǎo)出選中的圖片
文件菜單👉導(dǎo)出👉移動(dòng)👉儲(chǔ)存為web設(shè)備所用格式👉選擇我們要的圖片格式👉儲(chǔ)存
PS插件切圖

第十九章CSS書寫順序

1、布局定位屬性:display/position/float/clear/visiblity/overflow(建議diaplay第一個(gè)寫)
2、自身屬性：width/height/margin/padding/border/background
3、文本屬性：color/font/text-align/vertical-align/white-space/break-word
4、其他屬性(css)：content/cursor/border-radius/box-shadow/text-shadow/
background:linear-gradiet…

第二十章在線案例

導(dǎo)航欄：實(shí)際開(kāi)發(fā)中，我們不會(huì)直接用鏈接a 而是用li 包含鏈接（li+a）的做法

第二十一章定位

定位可以讓盒子自由的在某個(gè)盒子內(nèi)移動(dòng)位置或固定屏幕中的某個(gè)位置，并且可以壓住其他盒子
定位=定位模式+邊偏移
定位模式：通過(guò)css的position屬性來(lái)設(shè)置，其四個(gè)值
static （靜態(tài)定位） relative （相對(duì)定位） absolute （絕對(duì)定位） fixed （固定定位）
邊偏移：有top bottom left right 四個(gè)值其定義為相對(duì)于其父元素各邊線的距離

靜態(tài)定位

語(yǔ)法：
選擇器 { position ：static；}

相對(duì)定位

相對(duì)定位是元素在移動(dòng)位置的時(shí)候，相對(duì)于他原來(lái)位置說(shuō)的（自戀型）
語(yǔ)法：
選擇器 { position： relative}
特點(diǎn)：
1、總是相對(duì)于自己原來(lái)的位置來(lái)移動(dòng)的
2不脫標(biāo)、繼續(xù)保留原來(lái)位置

絕對(duì)定位

絕對(duì)定位是元素在移動(dòng)位置的時(shí)候。相對(duì)于它祖先為之來(lái)說(shuō)的（拼爹型）
語(yǔ)法：
選擇器 { position：absolute;}
特點(diǎn)：
1、如果沒(méi)有祖先元素或者祖先沒(méi)有定位，一瀏覽器為準(zhǔn)定位
2、如果祖先元素有定位，則以最近一級(jí)有定位的祖先元素為參考點(diǎn)
3、脫標(biāo)

子絕父相

自己是絕對(duì)定位的話，父級(jí)就要用相對(duì)定位

固定定位

固定定位是元素固定于瀏覽器某一可視位置
語(yǔ)法：
選擇器 { position: fixed;}
特點(diǎn)：
1、一瀏覽器的可視窗口為參照點(diǎn)移動(dòng)元素
2、脫標(biāo)
小算法：
1、讓固定定位的盒子left：50%
2、讓固定定位的盒子margin-left版心寬度一半的距離

第二十二章粘性定位

粘性定位：固定定位和相對(duì)定位的組合 sticky 粘性的
語(yǔ)法：
選擇器 { position：sticky；}
特定：
1、不脫標(biāo)
2、以可視窗口為參照
3、必須添加top bottom left right 其中一個(gè)才有效

第二十三章定位的疊放次序

可以使用z-index來(lái)控制盒子的先后次序
語(yǔ)法：
選擇器{ z-index：1；}
數(shù)值可以是正整數(shù)、負(fù)整數(shù)、或者0，默認(rèn)是auto，數(shù)值越大，盒子越靠上
如果屬性值相同，則按照書寫順序，后來(lái)居上
數(shù)字后面不能加單位
只有定位的盒子才有z-index屬性

定位拓展
1、絕對(duì)定位的盒子居中
加了絕對(duì)定位的盒子不能通過(guò)margin：0 auto；水平居中，但是可以通過(guò)以下計(jì)算法實(shí)現(xiàn)水平和垂直居中
①left：50%；
②margin-left：-100px；讓盒子左移自身寬度的一半
2、定位特殊特性
① 行內(nèi)元素添加絕對(duì)或固定定位，可以直接設(shè)置高度和寬度
② 塊級(jí)元素添加絕對(duì)或固定定位，如果不設(shè)置高度和寬度 ，默認(rèn)大小是內(nèi)容大小
3、脫標(biāo)盒子不會(huì)觸發(fā)外邊距塌陷
浮動(dòng)元素、絕對(duì)元素、固定定位元素都不會(huì)觸發(fā)外邊距合并問(wèn)題
4、絕對(duì)定位（固定定位）會(huì)完全壓住盒子
浮動(dòng)元素不會(huì)壓住標(biāo)準(zhǔn)流內(nèi)的文字（圖片）
絕對(duì)定位（固定定位）會(huì)壓住下面標(biāo)準(zhǔn)流所有內(nèi)容

第二十四章元素的顯示與隱藏

1、display 顯示隱藏（隱藏元素后，不在占有原來(lái)的位置）
·display:none ;隱藏對(duì)象
·display：block；除了轉(zhuǎn)換為塊級(jí)元素之外，同時(shí)還有顯示元素的意思
2、visibility 顯示隱藏（隱藏元素后，占有原來(lái)的位置）
·visibility：visible；元素可視
·visibility：hidden；元素隱藏
3、overflow 溢出顯示隱藏
·visible 不剪切內(nèi)容也不添加滾動(dòng)條
·hidden 不顯示超過(guò)對(duì)象尺寸的內(nèi)容，超出部分隱藏掉
·scroll 不管是否有超出內(nèi)容，都添加滾動(dòng)條
·auto 超出自動(dòng)顯示滾動(dòng)條，不超出不顯示滾動(dòng)條

第二十五章精靈圖

1、將多個(gè)小圖片整合到一張大圖中
2、大圖成為sprites 精靈圖或者雪碧圖
3、移動(dòng)背景圖片位置，此時(shí)可以使用background-position、
4、往上和往左移數(shù)值為負(fù)

第二十六章字體圖標(biāo)

下載網(wǎng)站：
1、icomoon字庫(kù) http://icomoon.io
2、阿里iconfont http://www.iconfont.cn/

CSS三角

div {
width: 0;
height: 0;
line-beight: 0;
font-size:0;
border: 50px solid transparent;
border-left-color: pink;
}

CSS用戶界面樣式

鼠標(biāo)樣式

li { cursor： pointer；}
屬性值：default（小白 默認(rèn)） pointer （小手） move（ 移動(dòng)） text （文本） not-allowed （ 禁止）

輪廓線

input { outline： none；}

防止拖拽文本域

textarea { resize： none;}

vertical-align 屬性

css的vertical-align屬性使用場(chǎng)景：經(jīng)常用于設(shè)置圖片或者表單（行內(nèi)塊元素）和文字垂直對(duì)齊
vertical-align ： baseline | tou | middle | bottom
解決圖片底部默認(rèn)空白縫隙問(wèn)題
1、給圖片添加vertical-align：middle | top | bottom
2、把圖片轉(zhuǎn)換為塊元素：display：block；

溢出文字省略號(hào)顯示

1、單行文本溢出顯示省略號(hào)------必須滿足三個(gè)條件
①先強(qiáng)制一行內(nèi)顯示文本 white-space：nowrap；（默認(rèn)normal自動(dòng)換行）
②超出部分隱藏 overflow：hidden；
③文字用省略號(hào)代替超出部分 text-overflow：ellipsis；
2、多行文本溢出顯示省略號(hào)
overflow：hidden；
text-overflow：ellipsis；
彈性伸縮盒子模型顯示
display：-webkit-box；
限制在一個(gè)塊元素顯示文本的行數(shù)
-webkit-line-clamp：2；
設(shè)置或檢索伸縮盒子對(duì)象的子元素的排列方式
-webkit-box-orient：vertical；

常見(jiàn)布局技巧

1、margin負(fù)值運(yùn)用
① 讓每個(gè)盒子margin往左側(cè)移動(dòng)-1屁行正好壓住相鄰盒子邊框
②鼠標(biāo)經(jīng)過(guò)盒子的時(shí)候，提高當(dāng)前盒子的層級(jí)即可（如果沒(méi)有定位，則加相對(duì)定位保留位置；如果有定位，則加z-index）
2、文字圍繞浮動(dòng)元素
3、行內(nèi)塊的巧妙運(yùn)用
4、css三角強(qiáng)化
width：0；
height：0；
border-color：transparent red transparent transparent；
border-style；solid；
border-width：22px 0px 0 0；

CSS初始化

HTML5的新特性

增加了一些新的標(biāo)簽、新的表單和新的表單屬性等
1.HTML5新增的語(yǔ)義化標(biāo)簽
·

:頭部標(biāo)簽
·:導(dǎo)航標(biāo)簽
· :內(nèi)容標(biāo)簽
· :定義文檔某個(gè)區(qū)域
·:側(cè)邊欄標(biāo)簽
·:尾部標(biāo)簽
注意：
語(yǔ)義標(biāo)注主要針對(duì)搜索引擎的
這些新標(biāo)簽頁(yè)面中可以使用多次
在IE9中，需要把這些元素轉(zhuǎn)換為塊級(jí)元素
其實(shí)，其實(shí)我們移動(dòng)端中更喜歡這種標(biāo)簽
HTML5還增加了很多其他標(biāo)簽
2.HTML5新增的多媒體標(biāo)簽
音頻：
視頻：

3.HTML5新增的input標(biāo)簽
4.HTML5新增的表單屬性

總結(jié)

以上是生活随笔為你收集整理的前端HTML+CSS学习笔记的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。