html+css知識點整理
1、htmlcss
一、錨連接html
（1）用法：chrome
從A頁面的甲位置跳轉到本頁面中的已位置（同一頁面）瀏覽器
從A頁面的甲位置跳轉到B頁面中的乙位置（兩個頁面）性能優化
（2）建立步驟：框架
a. 建立跳轉標記ssh
<a name="marker">乙位置</a> 工具
b.建立跳轉連接佈局
<a href="#marker">甲位置</a> 性能
二、html列表
<!--實心小圓點列表 無序列表 也是默認狀態--> <ul style="disc"> <li>列表1</li> <li>列表2</li> <li>列表3</li> </ul> <!--實心矩形列表--> <ul style="square"> <li>列表1</li> <li>列表2</li> <li>列表3</li> </ul> <!--空心列表--> <ul style="circle"> <li>列表1</li> <li>列表2</li> <li>列表3</li> </ul> <!--列表的嵌套--> <ul> <li>列表1 <ul> <li>列表1</li> <li>列表2</li> <li>列表3</li> </ul> </li> <li>列表2</li> <li>列表3</li> </ul> <!--有序列表--> <ol style="A"> <li>列表1</li> <li>列表2</li> <li>列表3</li> </ol> <ol style="a"> <li>列表1</li> <li>列表2</li> <li>列表3</li> </ol> <ol style="I"> <li>列表1</li> <li>列表2</li> <li>列表3</li> </ol> <!-- 定義列表--> <dl> <dt>水果</dt> <dd>蘋果</dd> <dd>香蕉</dd> <dd>橘子</dd> </dl>
三、表單
（1）關聯表單元素
語法：
<label for = "關聯元素ID"></label>
栗子：
<label for = "username" > 姓名：</label> <input name = "name" id = "username" size = "20" />
或
<label>姓名：<input name = "name" size = "20" /></label>
（2）只讀屬性
readonly: 但願某個框內的內容只容許用戶看，不能修改
（3）禁用屬性
disabled:因沒達到使用的條件，限制用戶使用
栗子：
<input type = "text" name = "" value = "123" readonly = "readonly" />
<input type = "button" name = "" value = "點擊" disabled = "disabled" />
四、表格
（1）表格經常使用屬性
width/height :表格的寬/高，單位能夠爲像素（px）或百分比（%）
border :默認爲表格邊框爲0（無邊框），可設置爲數值
cellspacing :控制單元格之間的間距，可設置爲數值
cellpadding :控制單元格邊框和其內容的間距，可設置爲數值
align :設置文本的水平對齊方式，可爲left,center,right
valign :設置文本的豎直方向對齊方式，可爲top,middle,bottom
bgcolor :設置背景色
<table border="1" width="100%" cellspacing="0" cellpadding="0" bgcolor="red"> <tr> <td align="center">第一個單元格</td> <td>第二個單元格</td> </tr> <tr> <td align="center">第一個單元格</td> <td>第二個單元格</td> </tr> </table>
（2）表格高級標籤
a、表格的分組標籤
<table width="100%" cellpadding="0" cellspacing="0" border="1"> <caption>年終數據報表</caption> <thead bgcolor="#99ffff"> <tr> <th>月份</th> <th>收入</th> </tr> </thead> <tbody bgcolor="#009966"> <tr> <td>1月</td> <td>100</td> </tr> <tr> <td>2月</td> <td>100</td> </tr> <tr> <td>3月</td> <td>100</td> </tr> <tr> <td>4月</td> <td>100</td> </tr> <tr> <td>5月</td> <td>100</td> </tr> <tr> <td>6月</td> <td>100</td> </tr> </tbody> <tfoot bgcolor="#ffff00"> <tr> <td>平均月收入</td> <td>196.67</td> </tr> <tr> <td>總計</td> <td>1180</td> </tr> </tfoot> </table>
b、表格的跨行與跨列
跨列：
<td>標籤的colspan 屬性，值爲數字，表示合併幾列；
跨行：
<td>標籤的rowspan 屬性，值爲數字，表示合併幾行；
<table width="400" cellpadding="0" cellspacing="0" border="1"> <tr> <th colspan="3">學生成績</th> </tr> <tr> <td rowspan="2">張三</td> <td>語文</td> <td>98</td> </tr> <tr> <td>數學</td> <td>95</td> </tr> <tr> <td rowspan="2">李四</td> <td>語文</td> <td>88</td> </tr> <tr> <td>數學</td> <td>91</td> </tr> </table>
五、XHTML框架結構
（1）<iframe>標籤
做用：建立文檔的內聯框架
屬性：
src（需引入的文檔路徑）
width/height（設定框架的寬與高）
scrolling（是否顯示滾動條，auto | yes | no）
frameborder（是否要邊框，1顯示，0不顯示）
name（內聯框架的名稱）
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
2、css
一、css複合選擇器
（1）並集選擇器
（2）交集選擇器
（3）後代選擇器
二、css中的優先級
（1）行內樣式 > 內部樣式表 > 外部樣式表（後二者就近原則）
（2）ID選擇器 > 類選擇器 > 標籤選擇器
三、css的屬性
（1）文字、文本屬性
font-style :設置字體風格；
font-weight :設置字體粗細；
font-size :設置字體的尺寸；
font-family :設置字體系列；
font :簡寫屬性，做用是把全部針對字體的屬性設置在一個聲明中（注意順序）
font : font-style || font-variant || font-weight || font-size / line-height || font-family
文本屬性：
color : 設置文本的顏色；
line-height : 設置文本的行高；
text-align : 設置文本的對齊方式，left 、center 、right；
text-decoration : 設置文本裝修，underline 、none 、line-through；
（2）背景屬性
background-color : 背景色；
background-image : 背景圖片，如：background-image:url("./images/bg.png");
background-position : 背景開始位置，包括水平方向（X軸）和豎直方向（Y軸）的設置
X軸取值： left ，center，right 或像素值或百分比；
Y軸取值：top ，center ，bottom 或像素值或百分比；
background-repeat : 背景填充方式，取值：repeat-x | repeat-y | no-repeat ；
background : 合寫方式，如 background: #fff url(bg.png) left top no-repeat;
（3）列表屬性
list-style-image : 將列表設置爲列表標誌； list-style-image:url("./arrow.gif");
list-style-type : 設置列表項標誌的類型：disc（實心圓）| circle（空心圓） | square（正方形）；
list-style : 以上屬性的合併簡寫，或none去掉默認屬性設置；
（4）超連接僞類
a:link {color:red} /*未訪問的連接*/
a:visited {color:blue} /*已訪問的連接*/
a:hover {color:green} /*當有鼠標懸停在連接上*/
a:active {color: yellow} /*被選擇的連接*/
用法：love hate！
（5）鼠標形狀控制：
cursor屬性：
url : 需使用自定義光標的URL;
default : 默認光標；
pointer : 超連接的指針；
wait : 指示程序正在忙；
heip : 指示可用的幫助；
text : 指示文本；
crosshair : 鼠標呈現十字狀；
move : 對象可被移動；
（6）盒子模型
margin : 外邊距；
padding : 內邊距；
border : 邊框；
margin : 0 auto; 盒子在頁面居中顯示；
盒子模型總尺度 = border + padding +margin + 內容尺寸（寬/高）
塊元素才能徹底適用於盒子模型：
使用display 屬性來互相轉化：
none : 元素隱藏，不可見，不佔據空間；
visibility : hidden; （元素隱藏，但佔據空間）
block : 轉爲塊級元素，獨佔一行；
inline : 轉爲內聯元素，不換行；
inline-block : 行內塊元素；
（7）浮動屬性
float 屬性：
取值：left，right，none
做用：
a、塊元素同行排列顯示，通常用於排版、分欄顯示；
b、設置浮動屬性後，脫離文檔流向指定的左邊或右邊對齊，直到父元素的邊界或浮動的元素；
注意：
使用浮動後要及時清除，以避免影響其後的網頁元素；
清除浮動的方法：
幾個並列的合資同時加浮動，它們的父級盒子出現以下狀況：
a、背景不能顯示；
b、邊框不能撐開；
清除浮動方法一：
添加新元素，應用 clear : both;
清除浮動方法二：
父級添加： overflow : auto; zoom : 1;
//zoom : 1; 是在處理兼容性問題；
清除浮動方法三：（聽說是最高大上的方法 :after 方法）
（注意：做用於浮動元素的父級）
#box{ zoom : 1;} /* ==for IE6/7 Maxthon2 == */
#box : after{ clear : both;content : '.' ;display : block; width : 0; height: 0;visibility:hidden;} /* ==for FF/chrome/opera/IE8== */
注意： 內聯元素添加浮動後，元素自動轉化爲塊級元素；
（8）overflow 屬性
做用：定義溢出元素內容區的內容會如何處理；
取值：
visible （默認）
auto （自動超出部分有滾動條）
hidden （多餘的隱藏）
scroll （即便沒有超出的部分，也有滾動條）
（9）定位屬性
position 屬性：
a、relative （相對定位）
相對它原來的位置，經過指定偏移，到達新的位置；
仍在標準流中，它對父級盒子和相鄰的盒子都沒有任何影響；
b、absolute（絕對定位）
脫離文檔流；
相對已設定非static定位屬性的父元素計算偏移量；
絕對定位會找到與本身最近的父類來定位，不是本身的父類與本身無關；
絕對定位找到了本身的父類以後，要看這個父類是否進行了相對定位，沒有相對定位的話就不會找這個父類來定位;
絕對定位會尋找一個 距離本身最近的 父類 ，而且這個父類進行了 相對定位，那麼這個盒子就會找這個已經有了相對定位的父類來定位。
c、fixed （相對瀏覽器固定定位，IE6不支持）
d、static（默認）
偏移量設置；
X軸（left、right 屬性）與Y軸 （top 、bottom 屬性）
可取值：像素或百分比；
e、設置定位盒子的層級：（數字越大層級越高，越在上層）
z-index:2; （數字以後沒有單位，數字能夠設置爲負值）
（10）盒子水平垂直居中：（盒子上的盒子）
給盒子樣式：
width:200px;
height:200px;
background-color:red;
position:absolute;
top:50%;
left:50%;
margin-left: -100px; 數值爲寬度的一半；
margin-top: -100px; 數值爲高度的一半；
3、網頁佈局：
（1）TABLE表格佈局：
優勢：簡單易懂，位置很規矩；
缺點：加載速度慢，結構固定不靈活，不利於維護和SEO；
（2）框架佈局：
多頁面加載在同一頁面，如<iframe>標籤；
（3）DIV+CSS方式佈局：（最合理的佈局方式）
a、HTML標籤：<div>標籤；
b、CSS樣式：float浮動和盒子模型；
優勢：
a、<div>標籤「乾淨」，網頁更小，打開更快；
b、結構清晰，便於維護，利於SEO;
c、<div>標籤更靈活，更好控制頁面元素；
d、樣式與結構相分離，更好的結構重組；
e、表現與內容相分離，利於分工協做；
（4）分區實現：
分別實現每一個區域的內容：
a、重複對大區塊下進行切分佈局：
浮動佈局；
自動居中佈局；
定位佈局（相對定位屬性和絕對定位屬性相結合）
b、肯定採用合適的HTML標籤：
遵循語義性標籤優先原則；
結構性容器通常採用<DIV>標籤；
小圖標、小部件通常採用內聯元素<span>標籤；
列表形式的內容通常採用<UL>、<OL>標籤；
表單、表格標籤元素有針對性使用；
合理運用<img>標籤或背景圖片；
（5）完善細節：
對結構細節進行完善：
a、採用圖片處理工具（ps）肯定元素的大小和位置；
b、利用盒子模型調整元素之間的位置，精確到1個像素
（原則上是與UI 效果圖一致）
c、對內容有預判處理：
內容超出範圍的自動隱藏或換行；
圖片大小或無圖片狀況處理；
儘可能採用自動適應的方式處理；
（6）性能優化：
對製做的網頁進行優化處理：
a、多采用類選擇器方式，減小CSS代碼；
b、壓縮CSS文件代碼，減少CSS文件大小；
c、減小圖片的請求；
d、減小外部文件的引用；
4、倒三角和css sprite製做
（1）實現倒三角方法：
方法一：用圖片背景；（背景圖片可定位）
background : url(images/bg.png) no-repeat 60px -7px;
方法二：用border製做倒三角；
結構： <div class="box">個人帳號<i></i></div>
樣式： body,div{margin:0;padding:0;}
.box{ position: relative;width:90px;height:20px;margin:20px auto;}
.box i{ position:absolute; top:5px;width:0;height:0;border-width:9px;border-style:solid; border-color: #000 #fff #fff #fff ;}
方法三：特殊符號
構造倒三角；
結構： <div class="box">個人帳號<span><i></i></span></div>
樣式： body,div{margin:0;padding:0;}
.box{position:relative;width:90px;margin: 20px auto;}
.box span{position；absolute;top:5px;overflow:hidden;}
.box span i{ display: inline-block;width:18px;height:18px;font-style:normal;margin-top:-8px;}
（2）CSS精靈：
a、簡介：
CSS精靈，又稱爲CSS Sprites或者CSS雪碧，是一種網頁圖片應用處理方式；
b、原理：
CSS精靈其實就是把網頁中一些背景圖片整合到一張圖片文件中，再利用CSS的「background-image」,"background-repeat","background-position"的組合進行背景定位，background-position能夠用數字精確的定位出背景圖片的位置；
c、css精靈使用：
c-一、必須設置大小；
c-二、background-image:背景圖片；
c-三、background-repeat:背景是否重複；
c-四、background-position:背景定位；
簡寫：background:url("1.png") no-repeat -10px -20px;
ps:圖片垂直居中：vertical-align:middle;
d、應用場景：
d-一、網頁中有不少icon小圖標的狀況下；
d-二、網頁中的一些特殊字體用圖片展現；
- 1. 知識點整理
- 2. Python知識點整理
- 3. HTML5知識點整理
- 4. Vue知識點整理
- 5. Vue2.0八——知識點整理
- 6. Python知識點整理（day1）
- 7. mysql知識點整理
- 8. Android知識點整理
- 9. mybatis知識點整理
- 10. 《算法》知識點整理
- 更多相關文章...
- • 與傳輸層有關的基本知識 - TCP/IP教程
- • Spring通知類型及使用ProxyFactoryBean創建AOP代理 - Spring教程
- • Docker 清理命令
- • ☆技術問答集錦（13）Java Instrument原理
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 知識點整理
- 2. Python知識點整理
- 3. HTML5知識點整理
- 4. Vue知識點整理
- 5. Vue2.0八——知識點整理
- 6. Python知識點整理（day1）
- 7. mysql知識點整理
- 8. Android知識點整理
- 9. mybatis知識點整理
- 10. 《算法》知識點整理