前端HTML+CSS学习笔记
``
第一部分 前端HTML基礎
第一章 html基本結構
認識HTML：
html不是一種編程語言，是一種標志語言
標記語言是由一套標識標簽組成的
html使用標簽來描述網頁
html結構：
標簽
—-
僅僅用于標題文本，不要為了產生粗體文本使用它們
標簽 段落標簽 *主要*標簽都會讓文字產生加粗效果 *主要* 標簽強調 用于傾斜 比強調更強 特殊符號： **? —->空格 > —>大于號 <；—>小于號** "；—>引號 ?–>版權號
第二章 html基本標簽
HTMl基本標簽：
span標簽
對被用來組合文檔中的行內元素
注意：span沒有固定的格式表現，當對它應用樣式時，才會產生視覺上的變化
標簽—>他有一個必不可少的屬性 href
錨點也是一種超鏈接，是頁面內進行跳轉的超鏈接
第一步：創建錨點
第二步：使用創建好的錨點名稱 內容
第三章 img圖片標簽與路徑
圖片標簽與路徑：
常見圖片格式 jpg png gif Gif （只支持全透明） Jpeg /jpg Png 半/全透明都支持
圖片標簽寫法 ：
圖片四要素：
src=“” 圖片路徑
alt=“” 圖片含義
width=“” 圖片寬度 和圖片大小保持一致
height=“” 圖片高度 和圖片大小保持一致
title=“”
路徑知識：
相對路徑、絕對路徑：
相對路徑：(Relative Path) 相對于該文件的路徑；
絕對路徑：(Absolute Path) 從磁盤出發的路徑；
在靜態頁面中：
/開頭表示根目錄；
./表示當前目錄；（斜畫線前面一個點）
…/上級目錄；（斜畫線前面兩個點）
這些都是相對于當前文件的位置來說的，如果用絕對路徑的話就是寫全了。
第四章 三種列表的講解
三種列表的知識講解：
- 無序列表 無序列表是一個沒有順序項目的列表，此列表項默認粗體圓點進行標識
無序列表-嵌套
- 柚子
- 沙田柚
- 蜜柚
- 荔枝
- 蘋果
定義列表不僅僅是一列項目，而是項目及其注釋的組合。定義列表以
標簽開始。每個定義列表項以 開始。每個自定義列表項的定義以< dl>< /dl>用來創建一個普通的列表,
< dt>< /dt>用來創建列表中的上層項目，
< dd>< /dd>用來創建列表中最下層項目，
< dt>< /dt>和< dd>< /dd>都必須放在< dl>< /dl>標志對之間。
list-style屬性具有三個屬性分量： list-style-position ：設置列表項圖標的位置，位于文本內或者文本外
list-style-type： 設置列表項圖標的類型 list-style-image：使用圖像設置列表項圖標 用于去掉li前面的項目符號（小圓點）
第五章 表單元素(上)
表單標簽:
表單標簽 表單是一個包含表單元素的區域，包括起來的都是表單的內容HTML標簽 - 隱藏域隱藏標簽：
隱藏域在頁面中對于用戶是不可見的，在表單中插入隱藏域的目的在于收集或發送信息，以利于被處理表單的程序所使用。瀏覽者單擊發送按鈕發送表單的時候，隱藏域的信息也被一起發送到服務器
標簽的掌握常用type類型：
type="text" 單行文本輸入框 type="password" 密碼（maxlength=""） type="radio" 單項選擇（checked="checked"） type="checkbox" 多項選擇 type="button" 按鈕 type="submit" 提交 type="image"圖片提交 type="file" 上傳文件 type="reset"重置 type="hidden" 隱藏 關于表單中的設置默認值： **下拉菜單** textarea沒有默認值標簽的使用
label 元素不會向用戶呈現任何特殊效果，增加了用戶體驗感。
例子：（重要—注冊表單–用戶體驗–必做）
單向選擇
男： 女：第六章 表單和表格(下)
表單和表格標簽：
文本域標簽 標簽： 是文本域標簽，可以在其中插入一段文字內容，它有兩個常用屬性rows和cols注意： rows表示這個文本域有多少行 cols表示這個文本域有多少列
除了這兩個屬性它還有readonly（只讀，文本域的內容無法改變，相當于協議）和title（鼠標放上提示）
標簽的掌握
注：當提交表單時，瀏覽器會提交選定的項目，或者收集用逗號分隔的多個選項，將其合成一個單獨的參數列表，并且在將 表單數據提交給服務器時包括 name屬性
1月 2月 常用到的屬性：disabled=“disabled” name="sel" size="2" 表格標簽| 姓名 | 性別 |
| 姓名 | 性別 |
| 姓名 | 性別 |
| 姓名 | 性別 | 愛好 |
第一部分總結
非可視化標簽：head meta style scrpit…
可視化標簽：img div span a ul li…
只有可視化標簽，才能用css改變它
單標簽：meta link base img input br hr
雙標簽：html head body div a p span …ul li ol dl ….
常用可視化標簽
div
一般用它來布局
a 超鏈接標簽
href*屬性：設置跳轉的網頁地址
target屬性：設置跳轉的目標
結論：凡事頁面可以點擊跳轉或者表單提交的文字，都用a標簽
img
src*屬性用來設置圖片的url數據
alt提供給搜索引擎搜索的
width
height
結論 ：顯示圖片
ul li
列表
結論：只要將來設計頁面中有固定樣式的列表，就用ul和li
如果是合并豎排的就是合并行（rowspan）
如果是合并橫排的就是合并列（colspan）
第二部分 CSS
第七章 css基礎知識
css基礎知識：
css樣式表的定義
css：（Cascading Style Sheets）層疊樣式表；
分類及位置：內部樣式-head區域style標簽里面
外部樣式-link調用
內聯樣式-標簽元素里面
css內的注釋：/注釋內容/
css樣式表的語法
CSS規則由兩個主要的部分構成：要添加樣式的盒子名或者標簽名、和要添加的樣式。
盒子名或者標簽名{屬性:值;}
CSS中幾種顏色的表示方法
用顏色名表示 有17個預先確定的顏色，它們是 aqua, black, blue, fuchsia, gray, green, lime,
maroon, navy, olive, orange, purple, red, silver, teal, white, and
yellow 用十六進制的顏色值表示(紅、綠、藍)
#FF0000或者#F00 用rgb(r,g,b)函數表示
如：rgb(255,255,0) 用hsl(Hue,Saturation,Lightness)函數表示（色調、飽和度、亮度)
如：hsl(120,100%,100%),色調0代表紅色，120代表綠色，240代表 藍色 用rgba(r,g,b,a)函數表示
其中a表示的是改顏色的透明度，取值范圍是0~1，其中0代表完全透明
用hsla(Hue,Saturation,Lightness,alpha)函數表示
內部樣式表
當單個頁面需要設置樣式時，就應該使用內部樣式表。
使用 標簽在文檔里面定義內部樣式表
樣式的優先級補充
相同權值情況下，CSS樣式的優先級總結來說，就是——就近原則（離被設置元素越近優先級別越高）：
內聯樣式表（標簽內部） > 嵌入樣式表（當前文件中）> 外部樣式表（外部文件中）
權值不同時，瀏覽器是根據權值來判斷使用哪種css樣式的，哪種樣式權值高就使用哪種樣式
層疊優先級是:
瀏覽器缺省< 外部樣式表 < 內部樣式表 < 內聯樣式
其中樣式表又有:類選擇器 < 類派生選擇器<ID選擇器 < ID派生選擇器
派生選擇器以前叫上下文選擇器，所以完整的層疊優先級是:
瀏覽器缺省 <外部樣式表 < 外部樣式表類選擇器 < 外部樣式表類派生選擇器< 外部樣式表ID選擇器< 外部樣式表ID派生選擇器<
內部樣式表 < 內部樣式表類選擇器 < 內部樣式表類派生選擇器 < 內部樣式表ID選擇器 < 內部樣式表ID派生選擇器 <
內聯樣式…共12個優先級
另外，如果同一個元素在沒有其他樣式的作用影響下，其Class定義了多個并以空格分開，其優先級順序為：
一個元素同時應用多個class，后定義的優先（即近者優先），加上!important者最優先！
第八章 css選擇器(上)
css選擇器：
class類選擇器可以重復利用
id選擇器唯一
標簽選擇器
標簽選擇器：頁面中所有的標簽都是一個選擇器 p{color:red;}
ID選擇器
選擇id命名的元素 以 # 開頭 #p1{color:#0f0;}
類選擇器
class選擇器，選擇clas命名的元素 以.開頭 .first{color:#00f;}
css代碼寫完后上線前要經過壓縮處理
本地和服務器分兩個css版本（備份）
壓縮后注釋都清除，空間體積減少
群組選擇器
選擇多個元素,以逗號隔開 #main,.first,span,a,h1{color:red;}
包含選擇器
選擇某元素的后代元素，也稱后代選擇器，父類與子類間以空格隔開p
span{color:red;}
屬性選擇器
選擇包含某一屬性的元素
a[title]{color:red;} 選擇包含title的a標簽
a[title][href]{color:red;} 選擇包含title和href的a標簽
** 選擇器子類選擇器**
只選擇子元素（只選擇兒子）（相當于包含元素）
p > span{color:red;}
相鄰兄弟選擇器
只選擇后面的相鄰兄弟元素
p + span{color:red;}
第十章 css選擇器(下)
偽類選擇器
a:link {color:#FF0000;} / 未訪問的鏈接 / （只用于a標簽）
a:visited {color:#00FF00;} / 已訪問的鏈接 / （只用于a標簽）
a:hover {color:#FF00FF;}/* 鼠標移動到鏈接上
*/（可和其他標簽結合一起用）
a:active {color:#0000FF;} / 選定的鏈接 /
注意
偽類選擇器的排序很重要，a:link a:visited a:hover a:active
LV包包好啊
輸入偽類選擇器（針對表單）
input:focus{color:red;} / 鍵盤輸入焦點 /
其他偽類選擇器
p:first-child{color:red;} /* 第一個p */
:before 在元素之前添加內容。
:after 在元素之后添加內容。
css優先規則
內聯樣式表-> ID 選擇器—> Class 類選擇器->標簽選擇器
第十一章 背景屬性
背景屬性：
背景的添加 ：
背景顏色的添加:
background:red;
backgronnd-color:red;
背景圖片的添加：
background:url(“images/1.jpg”);
backgronnd-image:url(“images/1.jpg”);
背景的平鋪
什么是平鋪？平鋪就是圖片是否重復出現
不平鋪：background-repeat:no-repeat;
水平方向平鋪：background-repeat:repeat-x;
垂直方向平鋪：background-repeat:repeat-y;
完全平鋪：默認為完全平鋪
背景圖片的定位
背景圖片的定位就是可以設置顯示背景圖片的位置，通過屬性background-position來實現
background-position的取值可為英文單詞或者數值和百分值。
background-positon的英文單詞取值
top left
top center
top right
center left
center center
center right
bottom left
bottom center
ottom right
background-positon的數值取值
background-position:x y;
positon的百分值取值
background-position:x% y%;
背景圖片的大小
背景圖片的大小可以通過屬性background-size來設置background-size的取值可為數值和百分值。
background-size的數值取值
background-size:x y;
background-size的數值取值
background-size:x% y%;
背景圖片的滾動
背景圖片是否隨著內容的滾動而滾動由background-attachment設置
background-attachment:fixed; 固定，不隨內容的滾動而滾動
background-attachment:scroll; 滾動，隨內容的滾動而滾動
第十二章 文字文本屬性
css文字文本屬性：
文字屬性
color:red; 文字顏色
font-size:12px; 文字大小
font-weight:“bold” 文字粗細(bold/normal)
font-family:“宋體” 文字字體
font-variant:small-caps小寫字母以大寫字母顯示
文本屬性
text-align:center; 文本對齊(right/left/center)
line-height:10px; 行間距(可通過它實現文本的垂直居中)
text-indent:20px; 首行縮進
text-decoration:none;
文本線(none/underline/overline/line-through)
letter-spacing: 字間距
第十三章 盒子模型
盒子模型
盒子模型就是一個有高度和寬度的矩形區域
所有html標簽都是盒子模型
div標簽自定義盒子模型
所有的標簽都是盒子模型
class和id的主要差別是：class用于元素組（類似的元素，或者可以理解為某一類元素），而id用于標識單獨的唯一的元素。
盒子模型組成部分：
自身內容：width、height 寬高
內邊距： padding
盒子邊框： border 邊框線
與其他盒子距離： margin外邊距
內容+內邊距+邊框+外邊距=面積
border 邊框
常見寫法 border:1px solid #f00;
單獨屬性：
border-width:
border-style:
dotted 點狀虛線
dashed（虛線）
solid（實線）
double（雙實線）
border-color (顏色)
padding 內邊距
值：像素/厘米等長度單位、百分比
padding:10px; 上下左右
padding:10px 10px; 上下 左右
padding:10px 10px 10px; 上 左右 下
padding:10px 10px 10px 10px; 上 右 下 左（設置4個點–>順時針方向）
單獨屬性：
padding-top:
padding-right:
padding-bottom:
padding-left:
當設置內邊距的時候會把盒子撐大，為了保持盒子原來的大小，應該高度和寬度進行減小，根據width和height減小
margin 外邊距
值：與padding相同
單獨屬性：與padding相同
外邊距合并：兩個盒子同時設置了外邊距，會進行一個外邊距合并
清除內外邊距
- {
padding：0；
margin：0；
}
第十四章圓角邊框
語法：
border-radius: length;
①參數值可以為數值或百分比
②如果是正方形想要設置一個圓，把數值修改為寬度或者高度的一半即可，或直接寫50%
③如果是矩形，設置為高度的一半
④該屬性是一個簡寫屬性，可以跟四個值，分別代表左上角、右上角、右下角、左下角（順時針）
第十五章盒子陰影
語法：
box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow:必需 水平陰影的位置，可以負值
v-shadow:必須 垂直陰影的位置，可以負值
blur:可選 模糊距離
spread:可選 陰影尺寸
color:可選 陰影顏色
inset:可選 將外陰影（outset）改為內陰影
注意
①默認是外陰影，但是不可以寫outset，否則導致陰影無效
②盒子陰影不占用空間，不會影響其他盒子的排列
第十六章浮動
css提供三種傳統布局方式
①普通流（標準流/文檔流）：就是標簽按照規定好的默認方式排列
②浮動
③定位
網頁布局第一標準：多個塊級元素縱向排列找標準流，多個塊級元素橫向排列找浮動
語法：
選擇器 { float ：屬性值；}
屬性值：none 元素不浮動（默認值）
left 元素向左浮動
right 元素向右浮動
浮動特性
1、浮動元素會脫離標準流（脫標）
①脫離標準流的控制（浮）移動到指定位置（動）
②浮動的盒子不在保留原先的位置
2、浮動元素會一行內顯示并且元素頂部對齊
3、浮動的元素會具有行內塊元素的特性
浮動元素經常和標準流父級搭配使用
先用標準流的父元素排列上下位置，之后內部子元素采取浮動排列左右位置，符合網頁布局第一準則
浮動的注意點
1、浮動和標準流的父盒子搭配
先用標準流父元素排列上下位置，之后內部子元素采取浮動排列左右位置
2、一個元素浮動了，理論上其余的兄弟元素也要浮動
浮動盒子只會影響后面的標準流，不會影響前面的標準流
第十七章清除浮動
清除浮動的本質：清除浮動元素造成的影響。如果父盒子本身有高度，則不需要清除浮動。
清除浮動之后，父級就會根據浮動的子盒子自動檢測高度，父級有了高度，就不會影響下面的標準流了
語法：
選擇器 {clear：屬性值；}
屬性值：left 清除左側浮動影響
right 清除右側浮動影
both 同時清除左右兩側浮動影響
清除浮動策略：閉合浮動
清除浮動方法
1、額外標簽法
在浮動元素末尾添加一個空標簽（必須是塊級元素）或
2、父級添加overflow屬性
給父級添加overflow屬性，將其屬性設置為hidden、auto或scroll
3、父級添加after偽元素
.clearfix:after {
content:“”;
height: 0;
clear: both;
visibility；hidden;
}
.clearfix {
*zoom: 1;
}
代表網頁：百度 網易 淘寶網
4、給父級添加雙偽元素
.clearfix :before ,.clearfix:after {
content:“”;
display:table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
代表網頁：小米 騰訊
第十八章PS切圖
PS切圖方式：圖層切圖、切片切圖、PS插件切圖
圖層切圖：
最簡單的切圖方式：（圖層菜單👉合并圖層ctrl+e）右擊圖層👉快速導出為PNG
切片切圖：
1、利用切片選中圖片
2、導出選中的圖片
文件菜單👉導出👉移動👉儲存為web設備所用格式👉選擇我們要的圖片格式👉儲存
PS插件切圖
第十九章CSS書寫順序
1、布局定位屬性:display/position/float/clear/visiblity/overflow(建議diaplay第一個寫)
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…
第二十章在線案例
導航欄：實際開發中，我們不會直接用鏈接a 而是用li 包含鏈接（li+a）的做法
第二十一章定位
定位可以讓盒子自由的在某個盒子內移動位置或固定屏幕中的某個位置，并且可以壓住其他盒子
定位=定位模式+邊偏移
定位模式：通過css的position屬性來設置，其四個值
static （靜態定位） relative （相對定位） absolute （絕對定位） fixed （固定定位）
邊偏移：有top bottom left right 四個值其定義為相對于其父元素各邊線的距離
靜態定位
語法：
選擇器 { position ：static；}
相對定位
相對定位是元素在移動位置的時候，相對于他原來位置說的（自戀型）
語法：
選擇器 { position： relative}
特點：
1、總是相對于自己原來的位置來移動的
2不脫標、繼續保留原來位置
絕對定位
絕對定位是元素在移動位置的時候。相對于它祖先為之來說的（拼爹型）
語法：
選擇器 { position：absolute;}
特點：
1、如果沒有祖先元素或者祖先沒有定位，一瀏覽器為準定位
2、如果祖先元素有定位，則以最近一級有定位的祖先元素為參考點
3、脫標
子絕父相
自己是絕對定位的話，父級就要用相對定位
固定定位
固定定位是元素固定于瀏覽器某一可視位置
語法：
選擇器 { position: fixed;}
特點：
1、一瀏覽器的可視窗口為參照點移動元素
2、脫標
小算法：
1、讓固定定位的盒子left：50%
2、讓固定定位的盒子margin-left版心寬度一半的距離
第二十二章粘性定位
粘性定位：固定定位和相對定位的組合 sticky 粘性的
語法：
選擇器 { position：sticky；}
特定：
1、不脫標
2、以可視窗口為參照
3、必須添加top bottom left right 其中一個才有效
第二十三章定位的疊放次序
可以使用z-index來控制盒子的先后次序
語法：
選擇器{ z-index：1；}
數值可以是正整數、負整數、或者0，默認是auto，數值越大，盒子越靠上
如果屬性值相同，則按照書寫順序，后來居上
數字后面不能加單位
只有定位的盒子才有z-index屬性
定位拓展
1、絕對定位的盒子居中
加了絕對定位的盒子不能通過margin：0 auto；水平居中，但是可以通過以下計算法實現水平和垂直居中
①left：50%；
②margin-left：-100px；讓盒子左移自身寬度的一半
2、定位特殊特性
① 行內元素添加絕對或固定定位，可以直接設置高度和寬度
② 塊級元素添加絕對或固定定位，如果不設置高度和寬度 ，默認大小是內容大小
3、脫標盒子不會觸發外邊距塌陷
浮動元素、絕對元素、固定定位元素都不會觸發外邊距合并問題
4、絕對定位（固定定位）會完全壓住盒子
浮動元素不會壓住標準流內的文字（圖片）
絕對定位（固定定位）會壓住下面標準流所有內容
第二十四章元素的顯示與隱藏
1、display 顯示隱藏（隱藏元素后，不在占有原來的位置）
·display:none ;隱藏對象
·display：block；除了轉換為塊級元素之外，同時還有顯示元素的意思
2、visibility 顯示隱藏（隱藏元素后，占有原來的位置）
·visibility：visible；元素可視
·visibility：hidden；元素隱藏
3、overflow 溢出顯示隱藏
·visible 不剪切內容也不添加滾動條
·hidden 不顯示超過對象尺寸的內容，超出部分隱藏掉
·scroll 不管是否有超出內容，都添加滾動條
·auto 超出自動顯示滾動條，不超出不顯示滾動條
第二十五章精靈圖
1、將多個小圖片整合到一張大圖中
2、大圖成為sprites 精靈圖或者雪碧圖
3、移動背景圖片位置，此時可以使用background-position、
4、往上和往左移數值為負
第二十六章字體圖標
下載網站：
1、icomoon字庫 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用戶界面樣式
鼠標樣式
li { cursor： pointer；}
屬性值：default（小白 默認） pointer （小手） move（ 移動） text （文本） not-allowed （ 禁止）
輪廓線
input { outline： none；}
防止拖拽文本域
textarea { resize： none;}
vertical-align 屬性
css的vertical-align屬性使用場景：經常用于設置圖片或者表單（行內塊元素）和文字垂直對齊
vertical-align ： baseline | tou | middle | bottom
解決圖片底部默認空白縫隙問題
1、給圖片添加vertical-align：middle | top | bottom
2、把圖片轉換為塊元素：display：block；
溢出文字省略號顯示
1、單行文本溢出顯示省略號------必須滿足三個條件
①先強制一行內顯示文本 white-space：nowrap；（默認normal自動換行）
②超出部分隱藏 overflow：hidden；
③文字用省略號代替超出部分 text-overflow：ellipsis；
2、多行文本溢出顯示省略號
overflow：hidden；
text-overflow：ellipsis；
彈性伸縮盒子模型顯示
display：-webkit-box；
限制在一個塊元素顯示文本的行數
-webkit-line-clamp：2；
設置或檢索伸縮盒子對象的子元素的排列方式
-webkit-box-orient：vertical；
常見布局技巧
1、margin負值運用
① 讓每個盒子margin往左側移動-1屁行正好壓住相鄰盒子邊框
②鼠標經過盒子的時候，提高當前盒子的層級即可（如果沒有定位，則加相對定位保留位置；如果有定位，則加z-index）
2、文字圍繞浮動元素
3、行內塊的巧妙運用
4、css三角強化
width：0；
height：0；
border-color：transparent red transparent transparent；
border-style；solid；
border-width：22px 0px 0 0；
CSS初始化
HTML5的新特性
增加了一些新的標簽、新的表單和新的表單屬性等
1.HTML5新增的語義化標簽
·
·:導航標簽
· :內容標簽
· :定義文檔某個區域
·:側邊欄標簽
·:尾部標簽
注意：
語義標注主要針對搜索引擎的
這些新標簽頁面中可以使用多次
在IE9中，需要把這些元素轉換為塊級元素
其實，其實我們移動端中更喜歡這種標簽
HTML5還增加了很多其他標簽
2.HTML5新增的多媒體標簽
音頻：
視頻：
3.HTML5新增的input標簽
4.HTML5新增的表單屬性
總結
以上是生活随笔為你收集整理的前端HTML+CSS学习笔记的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【探索HTML5第二弹03】走近地图应用
- 下一篇： 微信或者特定程序连不上网，但是浏览器和其