整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
、web標準
web標準是網頁制作的標準，它不是一個標準，而是由一系列標準組成。
web標準包含了三個方面：結構（html）,表現(css),行為(javascript或js)
注：a）W3C—萬維網聯盟，制定了結構和表現的標準
b) ECMA—歐洲電腦廠商聯合會，制定了行為標準
二、html相關概念
1.html—超文本標記語言
2.xhtml—可擴展的超文本標記語言
3.html5—html的第五次重大修改
注：html和xhtml的區別
xhtml相對于html4.0并沒有增加新的標簽，只是語法要求更加嚴格，例如標簽名稱小寫，標簽必須閉合
三、DW常用快捷鍵
1.新建文件 ctrl+n
2.保存文件 ctrl+s
3.預覽網頁 F12
4.打開文件 ctrl+o
5.打開首選參數面板 ctrl+u
6.撤銷 ctrl+z
7.恢復 ctrl+y
8.查找和替換 ctrl+f
9.顯示或隱藏文件面板 F8
四、html基本結構
1.文檔聲明
作用：告知瀏覽器網頁使用哪種html或xhtml規范
h5的文檔聲明： <!doctype html> 或 <!DOCTYPE HTML> 或 <!DOCTYPE html>
2.網頁根標簽（根元素）：<html>…</html>
所有網頁的內容及標簽都要放置在html標簽之間
3.html中的內容分為兩大部分：head部分和body部分
a)head部分：主要用來設置字符編碼，網頁標題，關鍵詞，描述，引入一些外部css文件，js文件等
b)body部分：所有要在網頁中呈現的內容和放置內容的標簽都要放在body部分
注：常用字符編碼格式為utf-8,還有gbk,gb2312
五、html基本語法
1.常規標記
語法： <標記 屬性=”屬性值” 屬性=”屬性值”></標記>
eg: <h3 class=”tit” id=”box”>前端開發</h3>
注：a）標記名稱要小寫
b) 屬性和屬性值用等號連接，屬性值要加雙引號
c)屬性和標記之間要加空格，多個屬性之間用空格隔開
d) 所有標點符號都必須是英文狀態下的
2.空標記
語法： <標記 屬性=”屬性值” 屬性=”屬性值”/>
eg: <img src=”1.jpg” title=”圖片”/>
六、html常用標記
1.網頁內容標題
語法： <hx>標題內容</hx> (x為1-6)
eg: <h3>前端開發</h3>
注：h1-h6都有加粗效果，字體逐漸減小
2.段落文本
語法： <p>段落文本內容</p>
3.換行
語法：<br/>
4.空格（html轉義字符）
5.加粗文本
語法： <strong>加粗文本內容</strong>
<b>加粗文本內容</b>
6.傾斜文本
語法：<em>傾斜文本內容</em>
<i>傾斜文本內容</i>
7.水平分隔線
語法： <hr/>
8.上標和下標
語法：上標： <sup>上標</sup>
下標： <sub>下標</sub>
※9.無序列表
語法： <ul>
<li>aaa</li>
…
</ul>
10.有序列表
語法：<ol type=”a|A|I|i” start=”2″>
<li>aaa</li>
…
</ol>
擴展：type用來設置序號的類型
start用來設置索引值
11.自定義列表
語法： <dl>
<dt>名詞</dt>
<dd>解釋</dd>
…
</dl>
—————————————————
相對路徑的三種寫法：
a）當當前文件和目標文件在同一目錄下，寫法如下：目標文件名+擴展名
b）當當前文件和目標文件所在文件夾在同一目錄下，寫法如下：目標文件所在文件夾名/目標文件名+擴展名
c）當當前文件所在文件夾和目標文件所在文件夾在同一目錄下，寫法如下：
../目標文件所在文件夾名/目標文件名+擴展名
注: ../代表返回到上一級目錄
—————————————————
※12.圖片
語法： <img src=”圖片路徑” title=”提示信息” alt=”替換信息” width=”數值” height=”數值”/>
eg: <img src=”img/1.jpg” title=”前端開發” alt=”加載失敗” width=”100″ height=”100″/>
注：alt和title的區別
alt是當圖片由于某些原因無法正常加載時顯示的替換信息
title是當鼠標懸停在圖片上時顯示的提示信息
※13.超鏈接
語法： <a href=”鏈接地址” target=”_blank” title=”***”>鏈接文本或圖片</a>
eg: <a href=”http://www.baidu.com” target=”_blank”>百度一下</a>
<a href=”http://www.1000phone.com” target=”_blank”><img src=”1.jpg” title=”前端開發”/></a>
<a href=”#”>新聞</a> 空鏈接
注：target=”_blank” 鏈接地址在新窗口打開
擴展：href和src的區別：
a）href表示超文本引用。用來建立當前元素和文檔之間的鏈接。常用的有：link、a
b）src是source的縮寫，src指向的內容會嵌入到文檔中當前標簽所在的位置。常用的有img，script
14.表格
作用：顯示數據
語法：<table border=”1″ cellspacing=”0″ cellpadding=”0″>
<tr align=”center” height=”30″>
<th width=”100″>姓名</th>
…
</tr>
<tr align=”center” height=”30″>
<td width=”100″>姓名</td>
…
</tr>
…
</table>
注：表格相關html標簽
1）table 用來定義一個表格
2）tr 定義表格的行
3）td 定義表格的列
4）th 定義表格的表頭(自動加粗居中)
5）caption 定義表格的標題
6）thead 定義表格的頁眉
7）tbody 定義表格的主體
8）tfoot 定義表格的頁腳
注：表格相關html屬性
a) border 設置表格的邊框
b) cellspacing 設置單元格之間的間距
c) cellpadding 設置內容和單元格之間的空隙
d) width 定義單元格的寬度和表格的寬度
e) height 定義單元格的高度或表格的高度
f) align 設置單元格內容的水平對齊方式 align=”left|center|right”
g) colspan 合并列（加在td上）
h) rowspan 合并行（加在td上）
表單
一、表單
作用：用來搜集用戶信息
語法： <form method=”get|post” action=”服務器端文件”>…</form>
注：所有的表單控件都要放置在form標簽之間
1.文本框
語法： <input type=”text” value=”***”/>
2.密碼框
語法：<input type=”password”/>
3.提交按鈕
語法： <input type=”submit” value=”登錄”/>
注：通過設置value屬性改變按鈕的默認文字內容
提交按鈕和要提交的表單內容必須放在一個form標簽中，才能提交
4.重置按鈕
語法：<input type=”reset”/>
注：重置按鈕必須放在form中才具備重置功能
5.單選按鈕
語法：<input type=”radio” name=”a” checked=”checked”/>
注：a)一組中的單選按鈕添加一致的name屬性值，才能達到多選其一的效果
b)設置checked=”checked”,在頁面加載完成后添加默認選中項
c)當屬性和屬性值相同時，可以省略屬性值
6.復選按鈕
語法： <input type=”checkbox” checked/>
注：checked屬性的設置同單選按鈕
7.下拉列表
語法：<select>
<option>a</option>
<option selected>b</option>
…
</select>
注：設置selected屬性改變默認選中項
8.文本域
語法：<textarea cols=”字符寬度” rows=”行數”></textarea>
擴展： 禁止用戶隨意拖拽改變文本域的大小，設置如下：
textarea{resize:none;}
9.普通按鈕
語法： <input type=”button” value=”***”/>
注：普通按鈕不具備提交功能，一般結合js的onclick事件使用
普通按鈕上的默認文字內容為空，需要通過value屬性進行設置
注：disabled=”disabled” 設置表單控件為禁用狀態
◆ get和post的區別
1）get主要用來獲取數據，post主要用來向服務器發送數據
2）get發送數據時，信息會顯示在url地址欄中，post直接通過服務器發送，用戶看不到這個過程
3) get可以傳送的數據量較小，一般不能大于2kb，post可以傳送的數據量較大，理論上沒有限制
4) get安全性較低，post安全性較高
二、div
作用：無語義標簽，主要用來布局和劃分板塊
語法： <div>…</div>
三、span
語法： <span>…</span>
作用：
a)標簽沒有固定的格式表現。當對它應用樣式時，它才會產生視覺上的變化。
b)span標簽提供了一種將文本的一部分或者文檔的一部分獨立出來的方式
四、iframe框架
語法：<iframe src=”1.html表單.html” width=”800″ frameborder=”0″ scrolling=”auto”></iframe>
注：scrolling=”no” 隱藏或去掉iframe的滾動條
作用：創建包含另外一個文檔的內聯框架
五、html注釋
語法： <!–注釋內容–>
css基礎
一、css概念及特點
css—層疊樣式表
特點：實現了結構與表現相分離
作用：定義html元素如何在網頁中顯示
二、css基礎語法
css由選擇器和聲明兩大部分組成，聲明又是由屬性和屬性值組成。即：
選擇器{屬性:屬性值;}
eg: h1{color:red;}
注：a）聲明要放在花括號中,每條聲明結束要加分號
b) 屬性和屬性值用冒號連接
c) 建議一條聲明占一行
三、樣式表的創建
1.內聯樣式（行間樣式，行內樣式）
語法：<標記 style=”屬性:屬性值;”></標記>
eg: <h1 style=”color:red;”>前端開發</h1>
2.內部樣式（嵌入式樣式）
語法：<style type=”text/css”>
選擇器{屬性:屬性值;}
</style>
eg: <style type=”text/css”>
h1{color:red;}
</style>
注：style標簽一般放在head部分
3.外部樣式表
a）使用link標簽引入
首先創建一個后綴名為.css的文件
然后通過link標簽引入，語法如下：
<link rel=”stylesheet” type=”text/css” href=”css文件路徑”/>
注：rel是用來建立外部文件和本文件之間的關系
link標簽一般放在head部分
b)使用@import引入css文件
語法： @import “css文件路徑”;
★ link和@import引入外部樣式的區別 ★
1）link屬于html標簽，除了可以引入css文件以外，還可以引入其他文件，@import屬于css范疇，只能引入css文件（老祖宗的區別）
2）link引入的css文件和頁面同時加載，@import引入的css文件在頁面加載完成后載入（加載順序不同）
3）link引入css文件無兼容性問題，所有瀏覽器都支持，@import低版本瀏覽器不支持（瀏覽器支持不同）
4）link是html標簽，支持js改變dom，@import不支持（是否支持js改變dom）
四、樣式表的優先級
樣式表的優先級
采取就近原則，即離被設置的元素越近，優先級越高
當css屬性值中出現!important的時候，它的優先級最高即：
!important>內聯>內部>外部
五、css注釋
語法： /*注釋內容*/
六、css選擇器
1.id選擇器
語法：<標記 id=”id名”></標記>
#id名{屬性:屬性值;}
eg: <h1 id=”edu”>前端開發</h1>
#edu{color:red;}
注：a）id選擇器優先級最高，id名是唯一的，不能出現同名的id
b) id名命名要語義化，常見命名方法：
I.駝峰命名法 id=”mainLoginContent”
II.下劃線連接命名法 id=”main_login_con”
2.類選擇器(class選擇器)
語法：<標記 class=”類名”></標記>
.類名{屬性:屬性值;}
eg: <h1 class=”tit”>前端開發</h1>
.tit{color:red;}
注：可以給具有相同樣式的元素添加相同的class名
注：類名詞列表用法：
<h3 class=”tit focus”>新聞資訊</h3>
當一個元素即具有與其他元素相同的樣式，又有某一個樣式不同時，需要用到類名詞列表的方式
3.后代選擇器（包含選擇器）
語法： 選擇符1 選擇符2{屬性:屬性值;}
eg: .box a{color:red;}
注：選擇符1和選擇符2必須滿足是包含與被包含的關系，才能使用后代選擇器
css核心屬性
一、字體類屬性
1.字體類型
語法： font-family:字體1,字體2,字體3;
eg: body{font-family:”Microsoft YaHei”,Arial;}
或 body{font-family:”微軟雅黑”,Arial;}
注：a）font-family設置多個字體時，用逗號分隔
b）中文字體要加雙引號，英文字體由多個單詞組成也要加雙引號
c）瀏覽器會優先識別字體1,如果找不到識別字體2，如果所列出的字體都無法識別，顯示瀏覽器默認字體
d）特殊字體一律用圖片
2.字體大小
語法：font-size:數值+單位;
eg: p{font-size:12px;}
注：a)字體大小一般設置偶數不設置奇數
b)瀏覽器默認字體大小為16px
c)字體大小單位有px,em,rem,pt等
注： font-size:16px; 等價于 font-size:medium;
3.字體加粗
語法：font-weight:normal(常規字體)|bold(加粗字體)|bolder(加粗字體)|100-900;
eg: h3{font-weight:normal;}
注：100-500為常規字體，600-900為加粗字體
4.字體傾斜
語法：font-style:normal(常規字體)|italic(傾斜)|oblique(傾斜);
5.字體是否大小寫
語法：font-variant:normal(常規字體)|small-caps(小型大寫字母字體);
注：主要針對英文起作用
6.font復合寫法
語法：font:style weight size family;
eg： font:12px/1.5 “微軟雅黑”;
上述代碼是指字體大小為12px，行高為字體大小的1.5倍，字體類型為微軟雅黑
注：在font的復合寫法中，size和family不可互換位置，也不可以和其他簡寫屬性互換位置
7.字體顏色
語法：color:顏色值;
注：顏色值的三種寫法：
a）十六進制寫法
color:#000; 黑色 color:#fff; 白色
b) rgb寫法
color:rgb(0,0,0); 黑色 color:rgb(255,255,255); 白色
c) 顏色單詞
color:black; color:white; color:red;
二、文本類屬性
1.文本水平對齊方式
語法：text-align:left(左對齊)|center(居中對齊)|right(右對齊)|justify(兩端對齊);
注：a）當需要讓容器中的文本或圖片等其他元素水平居中時，給父容器添加text-align:center;
b）justify兩端對齊主要針對英文
2.行高
語法：line-height:數值+單位;
eg: line-height:32px;
注：a）當單行文本的行高等于容器高時，可以實現單行文本在定高容器中垂直居中
b) line-height不允許設置負值
c) line-height的屬性值只寫數值不加單位時，代表行高為字體大小的多少倍
3.文本修飾
語法：text-decoration:none(沒有修飾)|underline(下劃線)|line-through(刪除線)|overline(上劃線);
eg: a{text-decoration:none;}
a:hover{text-decoration:underline;}
CSS盒模型
一、css盒模型的概念及組成
css盒模型的概念—css盒模型是css的基石，主要用來設置元素間的相互關系，每個html元素都有自己的盒模型。
css盒模型的組成—由content(主體),padding(補白，填充)，border(邊框)，margin(外邊距)組成。
1.content
語法：width:數值+單位;
height:數值+單位;
注：width和height的屬性值必須加單位
2.padding(content和border之間的區域)
a）設置一個值
padding:20px; 上，下，左，右均為20px
b）設置兩個值
padding:20px 5px; 上下為20px，左右為5px
c）設置三個值
padding:20px 5px 10px;上為20px，左右為5px，下為10px
d）設置四個值
padding:20px 5px 10px 0px;
順時針順序依次為：上20px，右5px，下10px,左0px
e) 還可以單獨設置某一個方向的padding值
eg: padding-left:20px; （left還可以更改為top，right，bottom）
注：
I.如果元素設置了寬高，設置padding后，要在原來寬高的基礎上減去設置的padding值，保證總寬高不變
II.padding不允許設置負值
III.背景可以延伸到padding區域
IV.當需要調整子元素在父元素中的位置關系時，可以通過給父元素設置padding來實現
容器溢出
一、容器溢出
語法：overflow:visible|hidden|scroll|auto|inherit;
visible 默認值，內容不會被裁剪，顯示在容器之外
hidden 內容會被裁剪，隱藏不可見
scroll 溢出部分的內容以滾動條的形式查看，如果沒有溢出，顯示默認的滾動條
auto 容器溢出時顯示滾動條
inherit 規定從父元素繼承overflow屬性值
還可以單獨設置某一個方向的溢出：
overflow-x:hidden|scroll|auto;
overflow-y:hidden|scroll|auto;
二、文本溢出
語法：text-overflow:clip(不顯示省略號)|ellipsis(顯示省略號);
三、單行文本省略號的設置
四個條件缺一不可：
（a）設置固定的寬度 width:value;
（b）設置文本強制在一行顯示 white-space:nowrap;
（c）設置容器溢出隱藏 overflow:hidden;
（d）設置文本溢出顯示省略號 text-overflow:ellipsis;
注：I.此方法只適用于單行文本省略號的設置，如果是多行文本顯示省略號可以使用js或由后端來處理
II.上述四個屬性必須給文本所在最近的父元素設置
元素類型及轉換
一、html元素類型
html元素分為三大類：塊元素，內聯元素，可變元素
注：也可將html元素分為這樣三類：塊元素，內聯元素，內聯塊狀元素
1.塊元素
常見塊元素：div,p,ul,ol,li,dl,dt,dd,form,table,tr,td,hr,h1,h2,h3,h4,h5,h6,fieldset
塊狀元素特點：
a) 塊狀元素以塊的形式顯示為一個矩形區域
b) 塊狀元素默認情況下，獨占一行，自上而下排列
c) 塊狀元素可以定義自己的寬度和高度，以及盒模型中的任意屬性（如margin，padding，border）
d) 塊狀元素可以作為一個容器容納其他的塊元素和內聯元素
2.內聯元素
常見內聯元素：a,span,strong,b,i,em,br,img,input,select,textarea
內聯元素特點：
a) 內聯元素沒有自己的形狀，也顯示為一個矩形區域
b) 內聯元素在一行逐個進行顯示
c) 內聯元素不能定義寬度和高度，以及與高度相關的一些屬性（margin-top,margin-bottom,padding-top,padding-bottom,line-height）
d) 內聯元素不能嵌套塊元素
常見內聯塊狀元素：img,input,select,textarea
內聯塊狀元素特點：
a) 即具有內聯元素特點，在一行逐個進行顯示
b) 又具有塊狀元素特點，可以定義寬度和高度，以及盒模型中的任意屬性
注：vertical-align屬性只針對內聯塊狀元素有效
3.可變元素
根據上下文關系決定元素類型，可變范圍塊元素和內聯元素
注：常用html元素默認有margin，padding的如下：
body 默認margin
h1-h6 默認margin
p 默認margin
ul 默認margin和padding
ol 默認margin和padding
dl 默認margin
dd 默認margin
td 默認padding
input 默認padding
textarea 默認padding
fieldset 默認padding和margin
二、元素類型轉換
語法：display:block|inline|inline-block|none|list-item;
a)block 將元素轉換為塊元素，是大部分塊元素的默認display屬性值
b)inline 將元素轉換為內聯元素，是內聯元素的默認display屬性值
c)inline-block 將元素轉換為內聯塊狀元素，是內聯塊狀元素的默認display屬性值（如img,input）
d)none 將元素隱藏不可見
e)list-item 將元素轉換為列表類型，是li的默認display屬性值
—————————————————
擴展：圖片默認有空隙：
方案一：給img添加display:block;
方案二：給img添加float屬性
—————————————————
注：當給元素設置了float后就相當于轉換成block
三、置換元素和非置換元素
1.置換元素
瀏覽器根據元素的標簽和屬性，來決定元素的具體顯示內容。
例如：根據img標簽的src屬性決定在網頁中顯示什么樣的圖片
根據input標簽的type屬性決定在網頁中顯示什么類型的input控件
2.非置換元素
除了置換元素，大部分html元素都是非置換元素，其內容直接顯示在瀏覽器中
（缺內容）
定位及錨點設置
一、常見的三種布局模型
1.流動模型（Flow）
元素沒有設置css樣式的布局，塊元素自上而下排列，內聯元素在一行逐個進行顯示
2.浮動模型（Float）
使用float屬性進行網頁布局，可以讓塊元素脫離文檔流在一行顯示，可以讓內聯元素設置寬高并且在一行顯示
3.層模型（Layer）
使用position定位屬性進行布局
二、定位布局
語法：position:static(默認值)|absolute(絕對定位)|relative(相對定位)|fixed(固定定位);
1.絕對定位
語法：position:absolute;
要成為絕對定位元素的參照物，必須滿足以下兩個條件：
a)參照物和絕對定位元素必須是包含與被包含關系
b)參照物必須具有定位屬性
如果找不到滿足以上兩個條件的父包含塊，那么絕對定位的參照物是瀏覽器窗口
注：元素的定位位置通過left,right,top,bottom屬性來進行設置
2.相對定位
語法：position:relative;
參照物：元素偏移前的位置
★相對定位和絕對定位的區別
a）參照物不同
絕對定位的參照物是離元素最近的具有定位屬性的父包含塊，相對定位的參照物是元素偏移前的位置
b) 是否會脫離文檔流
絕對定位會脫離文檔流，位置會被其他元素占據，相對定位不會脫離文檔流，原來的位置保留
3.固定定位
語法：position:fixed;
參照物：瀏覽器窗口或屏幕窗口
注：當給元素設置了固定定位后，元素會脫離正常的文檔流，位置會被其他元素占據
三、透明度設置
語法:opacity:數值; （取值范圍0-1,0為完全透明，1為完全不透明）
注：IE8及以下版本的IE瀏覽器不支持opacity屬性，兼容寫法如下：
filter:alpha(opacity=數值); （取值范圍0-100）
四、定位元素層疊屬性
語法：z-index:auto|number;
number 無單位的整數值，也可以設置負值
注：沒有設置z-index時，最后寫的對象優先顯示在上層，設置后，數值越大，層越靠上；
五、錨點鏈接
語法：
a）命名錨記：
<標記 id=”錨記名”></標記>
b）連接錨記名
<a href=”#錨記名”></a>
eg: <h1 id=”one”>第一章 html基礎</h1>
<a href=”#one”>第一章</a>
—————————————————
擴展一：如何在網頁中插入flash
語法：<object width=”1000″ height=”500″>
<param name=”movie” value=”img/flash.swf”/>
<embed width=”1000″ height=”500″ src=”img/flash.swf”></embed>
</object>
擴展二：設置滾動字幕效果
語法：
<marquee behavior=”scroll|alternate” width=”200″ height=”30″ direction=”left|right|up|down” scrollamount=”20″>
滾動內容…
</marquee>
注：scrollamount用來設置滾動的速度，值越大速度越快
寬高自適應
一、寬度自適應
語法：width:100%;
注：給元素設置寬度100%將會繼承父元素的寬度
塊狀元素默認寬度為100%
注：寬度自適應主要應用在通欄效果中
二、高度自適應
語法：height:auto; 或不設置高度
注：容器的高度由里面內容來決定
三、最大，最小高度，最大，最小寬度
1.最小高度
語法：min-height:數值+單位;
注：IE6不識別min-height屬性，兼容寫法如下：
a）min-height:100px; _height:100px;
b）min-height:100px; height:auto!important; height:100px;
2.最大高度
語法：max-height:數值+單位;
3.最小寬度
語法：min-width:數值+單位;
注：塊狀元素設置min-width屬性時，需要將元素轉換為內聯塊狀元素
4.最大寬度
語法：max-width:數值+單位;
注：以上四組屬性IE6及以下版本瀏覽器都不識別
四、高度塌陷問題
描述：父元素高度自適應，子元素float后，導致父元素高度為0稱為高度塌陷問題
a）給父元素一個固定的高度
父元素{height:value;}
缺點：給父元素固定的高度違背了高度自適應的原則，不建議使用
b) 給父元素添加overflow:hidden;
優點：簡單
缺點：當子元素存在定位時，定位在父元素框之外的部分將會被隱藏掉
c) 在浮動的子元素末尾添加一個空div，并設置如下樣式：
.clear{clear:both;height:0;overflow:hidden;}
優點：兼容性好，所有瀏覽器都支持
缺點：在網頁中添加若干個無意義的div，容易造成代碼冗余
d）萬能清除浮動法
父元素:after{content:”;
display:block;
clear:both;
height:0;
overflow:hidden;
visibility:hidden;}
優點：解決了代碼冗余的問題，是官方推薦的解決高度塌陷問題的方法
五、偽元素
1. 元素:before
語法： .box:before{
content:”hello”;
font-size:30px;
color:red;
…
}
注：:before是在元素里面所有內容之前添加一個偽元素
2. 元素:after
語法：.box:after{
content:”world”;
font-size:30px;
color:green;
}
注： :after是在元素里面所有內容之后添加一個偽元素
注：I.無論偽元素內容是否為空，都必須添加content屬性
II.偽元素是一個內聯元素
六、元素隱藏不可見的兩種方式
1.display:none;
元素隱藏不可見，位置不保留（看不見，摸不著）
2.visibility:hidden;
元素隱藏不可見，位置保留(看不見，摸得著)
七、窗口高度自適應
首先設置：
html,body{height:100%;}
然后給元素設置：
元素{height:100%;}
注：窗口高度自適應主要應用于內容不滿一屏或者沒有內容body和html高度為0的情況
八、水平居中
1.如果被設置元素為文本、圖片等行內元素時，水平居中是通過給父元素設置text-align:center;來實現的。
2.滿足定寬和塊狀兩個條件的元素是可以通過設置“左右margin”值為“auto”來實現居中的
注：當元素設置了float，絕對定位，固定定位，左右margin為auto將會失效
3.不定寬塊狀元素水平居中
方案一：給子元素設置display:inline-block;給父元素設置text-align:center;
方案二：給父元素設置display:table; margin:0 auto;
注：display:table; 將元素轉換為表格形式
九、元素水平垂直都居中問題
1.定寬高元素在屏幕窗口水平垂直都居中，方法如下：
元素{
width:value;
height:value;
position:fixed;
left:50%;
top:50%;
margin-left:-width/2;
margin-top:-height/2;
}
2.不定寬高元素在屏幕窗口水平垂直都居中，方法如下：
元素{
position:fixed;
left:0;
top:0;
bottom:0;
right:0;
margin:auto;
}
3.不定寬高的子元素在父元素中水平垂直都居中，方法如下：
a）父元素{
position:relative;
}
子元素{
position:absolute;
left:0;
top:0;
bottom:0;
right:0;
margin:auto;
}
b）父元素{
display:table-cell;
text-align:center;
vertical-align:middle;
}
注：display:table-cell;將元素轉換為表格單元格形式
十、圓角效果
語法：border-radius:數值+單位;
注：border-radius:50%; (圓)
注：border-radius是css3新增的屬性，低版本IE瀏覽器不支持，需要使用背景圖片的方式來實現
常見兼容性問題
一、常見兼容性問題
1.雙倍浮動bug
描述：塊元素float后，又設置了橫向的margin，在IE6下顯示的margin比設置的margin值要大
解決方案：給浮動的塊元素添加display:inline;
2.表單元素行高不一致
解決方案：
方案一：給表單元素添加vertical-align:middle;
方案二：給表單元素添加float屬性
擴展：如何去掉表單元素的外邊框，方法如下：
input{outline:none;}
3.在IE6不能識別較小高度的容器（一般為10px）
解決方案：
a）給容器添加overflow:hidden;
b）給容器添加font-size:0; (如果容器高度為0時使用第一種解決方案)
4.超鏈接中的圖片在IE瀏覽器中有默認的邊框
解決方案：給img標簽添加border:0; 或 border:none;
5.min-height屬性IE6不識別
解決方案：
a）min-height:100px; _height:100px;
b）min-height:100px; height:auto!important; height:100px;
6.圖片默認有空隙
解決方案：
a）給img設置display:block;
b）給img設置float屬性
7.百分比bug
描述：父元素寬度100%，子元素寬度50%，在IE6下，50%+50%大于100%
解決方案：給右邊左浮動的子元素添加clear:right;
8.低版本IE瀏覽器不識別opacity屬性
解決方案：filter:alpha(opacity=數值);
9.鼠標指針bug
描述：cursor:hand;只有低版本的IE瀏覽器支持，其他瀏覽器都不支持
解決方案： cursor:pointer; 所有瀏覽器都支持，將鼠標指針改為手型
10.上下margin重疊問題
描述：當給上下兩個元素同時設置margin值時，只能識別其中較大的那個值、
解決方案：
a)margin-top和margin-bottom只設置其中一個值
b)給其中一個設置margin屬性的元素外層再嵌套一個盒子，并設置overflow:hidden;
11.假傳圣旨問題
描述：給子元素設置margin-top應用在了父元素上
解決方案：
1）把給子元素設置的margin-top改為給父元素設置padding-top
2）給父元素設置overflow:hidden;
3）給父元素設置float屬性
4）給父元素設置border-top:1px solid transparent;
注：transparent為透明
12.按鈕默認大小不一
解決方案：按照設計稿上按鈕的樣式設定寬高，或者使用背景圖
二、css hack(過濾器)
1.下劃線屬性過濾器
語法： 選擇器{_屬性:屬性值;}
eg: .box{_background:red;}
注：只有IE6可以識別帶有下劃線的css屬性，其他瀏覽器都不識別
2.!important關鍵字過濾器
語法：選擇器{屬性:屬性值!important;}
eg: .box{background:yellow!important;background:blue;}
注：!important關鍵詞過濾器除IE6以外的其他瀏覽器都識別
添加!important關鍵詞的css屬性要放在標準css屬性之前
3.*屬性過濾器
語法：選擇器{*屬性:屬性值;}
eg: .box{*background:pink;}
注：*屬性過濾器只有IE6,IE7識別
4.
語法：選擇器{屬性:屬性值;}
eg: .box{background:orange;}
注：是IE6,7,8,9都識別
5.>5.\0<
語法：選擇器{屬性:屬性值>語法：選擇器{屬性:屬性值\0;}<;}
eg: .box{background:black>eg: .box{background:black\0;}<;}
注：>注：\0是IE8及以上版本瀏覽器識別<>
三、五大瀏覽器內核
1.IE 內核：Trident
2.Mozilla Firefox(火狐) 內核：Gecko
3.Safari,Chrome 內核：Webkit
4.Opera(歐朋) 內核：Presto
5.由Google,Opera,software聯合開發的瀏覽器排版引擎 內核：Blink
—————————————————
圖片整合
一、圖片整合的概念
圖片整合是指將多張背景圖片整合到一張背景圖中，通過background-position屬性實現圖片的定位技術。
二、圖片整合的優勢
將多張圖整合到一張圖中，減少了對服務器的請求次數，加快了頁面的加載速度，減小了圖片體積，從而達到了網站性能的優化。
注：圖片整合技術也稱為滑動門技術，雪碧圖，精靈圖
表單，表格高級
一、表單高級
表單的組成：表單域，表單控件，提示信息
1.表單域
<form method=”get|post” action=”服務器端文件”>…</form>
2.表單控件
文本框： <input type=”text”/>
密碼框： <input type=”password”/>
提交按鈕： <input type=”submit” value=”login”/>
重置按鈕： <input type=”reset”/>
單選按鈕： <input type=”radio” name=”a”/>
復選按鈕：<input type=”checkbox” checked/>
下拉菜單： <select><option>a</option>…</select>
文本域： <textarea></textarea>
3.提示信息
放置在表單控件前后的文字內容叫做提示信息，我們經常將提示信息放置在一個label標簽中，語法如下：
a）點擊文字選中單選按鈕或復選按鈕
<input type=”radio” id=”boy” name=”a”/> <label for=”boy”>男</label>
注：設置id屬性值和for屬性值一致產生關聯即可達到點擊文字選中按鈕的效果
b）通過給label標簽設置樣式達到一定的效果
注：label是一個內聯元素
4.表單字段集及表單字段集標題
語法： <fieldset>
<legend>標題</legend>
表單控件…
</fieldset>
注：將form表單中的內容進行分組，并添加一個標題，在form中可以嵌套多個fieldset
5.上傳文件
語法： <input type=”file”/>
6.隱藏字段
語法： <input type=”hidden”/>
注：主要用于后端處理數據
7.圖像域
語法： <input type=”image” width=”數值” height=”數值” src=”圖片路徑”/>
注：用在提交按鈕位置的圖像，使得這幅圖像具有按鈕的功能
二、表格高級
1.合并相鄰單元格邊框(給table加)
語法： border-collapse:collapse(合并相鄰單元格邊框)|separate(邊框分開);
2.定義表格標題的位置(給table加)
語法：caption-side:top|bottom|left|right;
注：left和right只有火狐支持
3.設置單元格間距(給table加)
語法：border-spacing:數值+單位;
注：當設置了border-collapse:collapse;后，border-spacing將會失效
4.設置無內容單元格隱藏(給table加)
語法：empty-cells:show(顯示)|hide(隱藏);
5.表格布局算法(給table加)
語法：table-layout:auto|fixed(單元格寬度固定，不隨內容多少發生變化);
三、表格重要html屬性
1.合并列
colspan=”數值”
2.合并行
rowspan=”數值”
3.單元格內容水平對齊方式
align=”left|center|right”
4.單元格內容垂直對齊方式
valign=”top|middle|bottom”
5.分隔線
rules=”rows|cols|all|groups|none”
rows 行分隔線
cols 列分隔線
all 行分隔線和列分隔線
groups 組分隔線
none 沒有分隔線
注：表格行分組：<thead></thead> <tbody></tbody> <tfoot></tfoot>
表格列分組：<colgroup span=”數值”></colgroup>
注： span用來設置幾列為一組，默認一列為一組
四、css樣式重置
作用：CSS reset的作用是讓各個瀏覽器的CSS樣式有一個統一的基準
五、seo優化
seo—搜索引擎優化
◆ 站內優化
1.頁面主題優化
給網站添加一個有意義的標題
2.頁面頭部優化
給網站添加關鍵詞，描述
<meta name=”keywords” content=”” /> 關鍵詞
<meta name=”description” content=””/> 描述
3.超鏈接優化
a）盡量少用或者不用flash設置超鏈接，seo無法識別flash中的超鏈接文字
b) 給a標簽添加title屬性，可以起到提示訪客的作用
c) 盡量避免使用圖片熱點鏈接
4.圖片優化
給img標簽添加title，alt屬性
5.網站地圖
給網站添加網站地圖或網站導航，方便瀏覽者快速找到有瀏覽的網頁信息
6.給網站添加友情鏈接
7.seo認為靜態頁面比動態頁面更有利于搜索引擎優化
8.避免”大體積”的頁面，代碼結構要合理
◆ 站外優化
1.百度推廣
2.流量分析
3.網站品牌建設
h5新標簽
一、h5新增結構性標簽
1.header 定義網頁的頭部
2.footer 定義網頁的底部
3.section 定義網頁的某一個區域
4.nav 定義網頁的導航部分
5.aside 定義網頁的側邊欄
6.article 定義網頁的一篇文章
7.hgroup 對網頁中的標題進行組合
8.figure 對網頁中的元素進行組合
9.figcaption 給figure組合添加一個標題
10.dialog 定義一個對話框
二、h5新增其他標簽
1.定義帶有記號的文本
語法： <ma rk>定義帶有記號的文本</mark>
2.定義已知范圍內的標量，測量
語法： <meter value=”10″ min=”1″ max=”100″></meter>
3.定義任務的進度或進程
語法： <progress value=”10″ min=”1″ max=”100″></progress>
三、音頻
語法： <audio controls autoplay loop>
<source src=”1.mp3″ type=”audio/mp3″/>
…
Your browser does not support the element
</audio>
注：音頻相關html屬性
a）src 引入音頻文件路徑
b) controls 顯示音頻控制條
c) autoplay 設置自動播放
d) loop 設置循環播放
注：audio支持的音頻格式：mp3,ogg,wav
四、視頻
語法：<video controls width=”數值” height=”數值” autoplay controls poster=”圖片路徑”>
<source src=”2.mp4″ type=”video/mp4″/>
…
Your browser does not support the element
</video>
注：視頻相關html屬性
a）src 引入音頻文件路徑
b) controls 顯示音頻控制條
c) autoplay 設置自動播放
d) loop 設置循環播放
e) width 定義視頻區域的寬度
f) height 定義視頻區域的高度
g) poster 在視頻播放前或快進快退時顯示的一張圖片
注：video支持的視頻格式：mp4(mpeg4),ogg,webm
五、h5新增type屬性值
1.type=”email”
限制用戶輸入為email類型（必須含有@符，@符前后內容不能為空）
2.type=”url”
限制用戶輸入為url類型（必須含有http://,并且后面內容不能為空）
3.type=”number”
限制用戶輸入為number類型
eg: <input type=”number” min=”1″ max=”100″ value=”1″ step=”2″/>
注：min 設置最小值 max 設置最大值 step 設置每次遞增遞減的值
4.type=”range”
產生一個滑動條的表單
eg: <input type=”range” value=”1″ min=”0″ max=”100″/>
5.type=”color”
產生一個選擇顏色的面板
6.type=”date”
產生一個選擇日期的面板
7.type=”time”
產生一個選擇時間的面板
8.type=”month”
產生一個選擇年月的面板
9.type=”search”
產生一個具有搜索意義的表單
六、h5新增表單屬性
1.required 必填項，限制用戶輸入不能為空
eg: <input type=”text” required/>
2.placeholder=”默認提示信息內容” 給表單控件添加默認提示信息
eg: <input type=”text” placeholder=”請輸入用戶名”/>
3.autofocus 頁面加載完成后自動聚焦到某個input框
eg: <input type=”text” autofocus/>
4.pattern=”正則表達式” 按照設置的規則輸入內容
eg: <input type=”text” pattern=”^[a-zA-Z0-9]{6,16}$”/>
5.list 指定一個datalist，作為下拉提示單
eg: <input type=”search” list=”data”/>
<datalist id=”data”>
<option>a</option>
…
</datalist>
注：type為search的input框的list屬性值必須和datalist標簽的id名一致才能實現搜索的功能
七.取消h5的表單驗證
語法： <form novalidate></form>
sublime常用快捷鍵
<!– sublime常用快捷鍵 –>
<!– 1.快速生成html基本模板 –>
<!– !+tab鍵 –>
<!– 2.添加或刪除注釋 –>
<!– ctrl+? –>
<!– <ul class=”uls”>
<li><a href=”#”>今天是2018年七月九號</a><span>2018-07-09</span></li>
<li><a href=”#”>今天是2018年七月九號</a><span>2018-07-09</span></li>
<li><a href=”#”>今天是2018年七月九號</a><span>2018-07-09</span></li>
<li><a href=”#”>今天是2018年七月九號</a><span>2018-07-09</span></li>
<li><a href=”#”>今天是2018年七月九號</a><span>2018-07-09</span></li>
<li><a href=”#”>今天是2018年七月九號</a><span>2018-07-09</span></li>
</ul> –>
<!– 3.快速生成標記內容
標記.class名>子標記名稱*個數
ul.uls>li*6>a+span –>
css3選擇器
一、基本選擇器
1.通配符
*{margin:0; padding:0;}
2.元素選擇符（標簽選擇器）
h1{color:red;}
3.class選擇器（類選擇器）
.box{background:blue;}
4.id選擇器
#wraper{color:black;}
5.群組選擇器
ol,ul{list-style:none;}
二、層次選擇器（關系選擇器）
1.E F (后代選擇器或包含選擇器)
匹配E元素下所有子元素F
eg: .box a{color:red;}
匹配.box下所有子元素a
2.E>F (子代選擇器)
匹配E元素下第一級子元素F
eg: .box>a{color:red;}
匹配.box下第一級子元素a
3.E+F 相鄰兄弟選擇器
匹配E元素后面緊鄰的那個F元素(有且僅有一個)
eg: .box+h1{color:blue;}
匹配.box后面緊鄰的那一個h1
4.E~F 通用兄弟選擇器
匹配E元素后面所有的F元素(有可能匹配到多個)
eg: .box~h1{color:blue;}
匹配.box后面所有的h1元素
三、動態偽類選擇器
1.E:link 沒有被訪問過的狀態
2.E:visited 訪問過后的狀態
3.E:hover 滑過時的狀態
4.E:active 鼠標按下時的狀態
5.E:focus 光標聚焦到input框時的狀態
四、結構性偽類選擇器
1. :first-child 匹配每個父元素下第一個子元素
eg: .box a:first-child{color:red;}
匹配.box下第一個子元素a(此時，a必須是.box下的第一個子元素)
eg: .box :first-child{color:red;}
匹配.box下每個父元素下的第一個子元素
注： :first-child 《=》 :nth-child(1)
都是匹配父元素下的第一個子元素
2. :last-child 匹配每個父元素下最后一個子元素
eg: .box a:last-child{color:blue;}
匹配.box下最后一個子元素a(此時，a必須是.box下最后一個子元素)
eg: .box :last-child{color:blue;}
匹配.box下每個父元素下的最后一個子元素
注： :last-child 《=》 :nth-last-child(1)
都是匹配父元素下的最后一個子元素
3. :nth-child(n) 匹配父元素下的第n個子元素
eg: .box :nth-child(3){color:red;}
匹配.box下每個父元素下的第三個子元素
4. :nth-child(2n) 匹配父元素下的第偶數個子元素
eg: .tab tr:nth-child(2n){background:red;}
匹配.tab下第偶數個tr
注： :nth-child(2n) 《=》 :nth-child(even)
5. :nth-child(2n+1) 匹配父元素下第奇數個子元素
eg: .tab tr:nth-child(2n+1){background:blue;}
匹配.tab下第奇數個tr
注： :nth-child(2n+1) 《=》 :nth-child(odd)
6. :nth-last-child(n) 匹配父元素下倒著數第n個子元素
eg: .tab tr:nth-last-child(3){color:red;}
匹配.tab下倒數第三個子元素tr
——————————————————-
7. :first-of-type 匹配父元素下指定類型的第一個子元素
eg: .uls li:first-of-type{background:pink;}
匹配.uls下li這種類型的第一個子元素
注： :first-of-type 《=》 :nth-of-type(1)
都是匹配父元素下指定類型的第一個子元素
8. :last-of-type 匹配父元素下指定類型的最后一個子元素
eg: .uls li:last-of-type{background:yellow;}
匹配.uls下li這種類型的最后一個子元素
注：:last-of-type 《=》 nth-last-of-type(1)
都是匹配父元素下指定類型的最后一個子元素
9. :nth-of-type(n) 匹配父元素下指定類型的第n個子元素
eg: .uls li:nth-of-type(3){background:blue;}
匹配.uls下li這種類型的第3個子元素
10. :nth-last-of-type(n) 匹配父元素下指定類型的倒數第n個子元素
eg: .uls li:nth-last-of-type(3){background:orange;}
匹配.uls下li這種類型的倒數第三個子元素
——————————————————-
11. :only-child 匹配父元素下唯一一個子元素
12. :only-of-type 匹配父元素下指定類型的唯一一個子元素
13. :empty 匹配內容為空的元素(空格，回車換行都不能有)
14. :root 匹配根元素html
四、UI狀態偽類選擇器（主要針對form表單元素）
1. E:checked 匹配選中狀態的單選或復選按鈕
eg: input:checked+label{color:red;}
匹配選中狀態的input控件后面緊鄰的那個label標簽
2. E:enabled 匹配啟用狀態的表單元素
eg: input:enabled{border:1px solid red;}
3. E:disabled 匹配禁用狀態的表單元素
eg: input:disabled{background:gray;}
五、目標偽類選擇器
語法： E:target 匹配錨點鏈接連接到的那個元素
eg: p:target{display:block;}
當錨點鏈接連接到p標簽，應用display:block;
六、屬性選擇器
1. E[attr] 匹配含有attr屬性的E元素
eg: a[title]{text-decoration:none;}
匹配含有title屬性的a標簽
2. E[attr=value] 匹配含有attr屬性并且值為value的E元素
eg: a[title=前端]{color:black;}
匹配含有title屬性并且值為前端的a標簽
3. E[attr^=value] 匹配含有attr屬性并且值以value開頭的E元素
eg: a[href^=http]{font-size:12px;}
匹配含有href屬性并且屬性值以http開頭的a標簽
4. E[attr$=value] 匹配含有attr屬性并且值以value結尾的E元素
eg: a[href$=com]{color:blue;}
匹配含有href屬性并且屬性值以com結尾的a標簽
5. E[attr~=value] 匹配含有attr屬性并且屬性值列表中含有value這個詞的E元素
eg: a[title~=培訓]{color:red;}
匹配含有title屬性，并且屬性值列表中含有培訓這個詞的a標簽
6. E[attr*=value] 匹配含有attr屬性并且屬性值列表中含有value這個字的E元素
eg: a[title*=培訓]{color:yellow;}
匹配含有title屬性，并且屬性值列表中含有培訓兩個字的a標簽
7. E[attr|=value] 匹配含有attr屬性，并且值以value-開頭或值為value的E元素
eg: a[class|=link]{color:blue;}
匹配含有class屬性并且值以link-開頭或值為link的a標簽
七、否定偽類選擇器
語法： E:not(F) 匹配不滿足條件F的E元素
eg: li:not([class=lis]){color:red;}
匹配不滿足條件class=lis的li元素
八、語言偽類選擇器
語法： E:lang(val) 匹配指定了lang屬性，并且值為val的E元素
九、偽元素
1. E:before 在E元素所有內容之前添加一個偽元素
eg: .box:before{
content:”hello”;
font-size:32px;
…
}
2. E:after 在E元素所有內容之后添加一個偽元素
eg: .box:after{
content:””;
display:block;
clear:both;
height:0;
overflow:hidden;
visibility:hidden;
}
注：:after常用于清除浮動
偽元素是一個內聯元素
不管內容是否為空，都不能省略content
3. :first-line 匹配段落文本中的第一行
4. :first-letter 匹配段落文本中的第一個字符
5. ::selection 改變選中文字的效果
注：針對火狐內核的兼容寫法如下：
p::-moz-selection{color:red;}
十、漸進增強和優雅降級
1.漸進增強
一開始就針對低版本瀏覽器進行構建頁面，完成基本的功能，然后再針對高級瀏覽器進行效果、交互、追加功能達到更好的體驗。
eg: .box{ /*漸進增強寫法*/
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
2.優雅降級
一開始就構建站點的完整功能，然后針對瀏覽器測試和修復。比如一開始使用 CSS3 的特性構建了一個應用，然后逐步針對各大瀏覽器進行 hack 使其可以在低版本瀏覽器上正常瀏覽。
eg: .box{ /*優雅降級寫法*/
transition: all .5s;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
}
注：css3屬性針對不同內核的兼容寫法：
對webkit內核 -webkit-
針對火狐內核 -moz-
針對opera內核 -o-
針對IE內核 -ms-
擴展：如何使用border實現三角的效果，方法如下：
元素{
width:0;
height:0;
border:3px solid transparent;
border-top-color:blue; /*top還可以根據需要更改為bottom,right,left*/
}
css3圓角，陰影
一、圓角
語法： border-radius:數值+單位;
1.設置一個值
border-radius:20px; 四個方向圓角都為20px
2.設置兩個值
border-radius:50px 10px; 左上，右下為50px,右上，左下為10px
3.設置三個值
border-radius:50px 0px 10px; 左上為50px,右上和左下為0,右下為10px
4.設置四個值
border-radius:0px 10px 30px 60px; 順時針方向依次為左上0，右上10，右下30，左下60
5.用/設置圓角
border-radius:50px/100px;
第一組值代表水平半徑為50px,/后的第二組值代表垂直半徑為100px
6.還可以單獨設置某一個方向的圓角
border-top-left-radius:10px;
注：border-top-left-radius:20px 50px; 水平半徑為20px,垂直半徑為50px
7.設置為圓
border-radius:50%;
二、多色彩邊框
語法： .box{-moz-border-top-colors:black red yellow;}
注：只有低版本的火狐瀏覽器支持
三、圖像邊框
1.設置圖像邊框的路徑
語法：border-image-source:url(圖片路徑);
2.設置圖像邊框的裁剪位置
語法：border-image-slice:數值;
注：a)設置數值專指像素
b) 如何需要中間部分顯示出來，需要添加fill
eg: border-image-slice:27 fill;
3.設置圖像邊框的平鋪屬性
語法：border-image-repeat:stretch|repeat|round;
a)stretch 默認值，圖像被拉伸
b)repeat 圖片默認平鋪，當碰到邊界時則會被截斷
c)round 圖片會根據邊框的尺寸動態調整圖片的大小直至正好可以鋪滿整個邊框。
eg: border-image-repeat:round stretch;
代表水平方向鋪滿，垂直方向拉伸
四、文本陰影
語法： text-shadow:水平偏移量 垂直偏移量 模糊度 顏色值;
eg: text-shadow:5px 5px 3px black,8px 8px 5px #999;
注：a) 多組陰影的值用逗號分隔
b) 水平偏移量向右為正，向左為負，垂直偏移量向下為正，向上為負
c) 模糊度最小值為0，不允許設置負值
擴展：文字描邊，語法如下：
-webkit-text-stroke:3px blue;
五、盒陰影
語法：box-shadow:水平偏移量 垂直偏移量 模糊度 擴展半徑 顏色值;
eg: box-shadow:5px 5px 10px #333,8px 8px 12px #666;
注：盒陰影默認為外陰影，如果需要設置內陰影，寫法如下：
eg: box-shadow:inset 3px 3px 5px #333,inset 5px 5px 8px #666;
注：當設置了擴展半徑后，一般水平和垂直偏移量設置為0
eg: box-shadow:0px 0px 5px 10px red;
box-shadow:inset 0px 0px 5px 10px red;
css3彈性布局
一、分欄布局
1.設置欄數
語法： column-count:數值;
2.設置每欄的寬度
語法：column-width:數值+單位;
注：column-count和column-width設置其中一個屬性即可
3.設置欄間距
語法：column-gap:數值+單位;
4.設置欄分隔線
語法：column-rule:寬度 solid|dashed|dotted 顏色;
eg: column-rule:3px dashed blue;
5.設置是否跨欄顯示
語法：column-span:all(跨欄顯示)|none(不跨欄顯示);
注：該屬性給需要跨欄顯示的元素添加
二、彈性布局
語法：display:flex;
說明：
a) 當給元素設置了display:flex;該元素就成為了彈性盒
b) 當給父元素設置彈性盒后，子元素的float,clear,vertical-align將會失效
c) 我們把設置了display:flex;屬性的元素叫做flex容器，把里面的子元素叫做flex項目
d) 當給元素設置了彈性盒以后，隨之會產生兩根軸線：主軸和交叉軸
◆ Flex容器屬性
1.改變主軸的方向
語法：flex-direction:row|row-reverse|column|column-reverse;
row 默認值，主軸在水平方向，起點在左端
row-reverse 主軸在水平方向，起點在右端
column 主軸在垂直方向，起點在上沿
column-reverse 主軸在垂直方向，起點在下沿
2.設置flex項目是單行顯示還是多行顯示
語法：flex-wrap:nowrap|wrap|wrap-reverse;
nowrap 默認值，不換行
wrap 換行
wrap-reverse 與wrap相似，但是行的順序是倒過來的
3.flex-direction和flex-wrap的簡寫方式
語法：flex-flow:row nowrap;
4.設置主軸對齊方式
語法：justify-content:flex-start|flex-end|center|space-between|space-around;
flex-start 類似于左浮動
flex-end 類似于右浮動
center flex項目居中對齊
space-between flex項目兩端對齊，中間間隔相等
space-around flex項目兩側間隔相等
5.設置交叉軸對齊方式
語法：align-items:flex-start|flex-end|center|baseline|stretch;
flex-start 對齊交叉軸的起點
flex-end 對齊交叉軸的終點
center 以交叉軸為參考，居中對齊
baseline flex項目第一行文字基線對齊
stretch flex項目沒有設置高度或者為auto，將占滿整個父元素的高度
———————————————–
★ 如何使用flex布局實現不定寬高的元素在屏幕窗口水平垂直都居中，方法如下：
html,body{height:100%;}
body{display:flex;justify-content:center;align-items:center;}
★ 如何使用flex布局實現不定寬高的子元素在父元素中水平垂直都居中，方法如下：
父元素{display:flex;justify-content:center;align-items:center;}
———————————————–
6.設置多根軸線對齊方式(如果只有一根軸線，該屬性不起作用)
語法：align-content:flex-start|flex-end|center|space-between|space-around|stretch;
flex-start 對齊交叉軸的起點
flex-end 對齊交叉軸的終點
center 以交叉軸為參考，居中對齊
space-between 軸線兩端對齊，中間間隔相等
space-around 軸線間兩側間隔相等
stretch flex項目沒有設置高度或者高度為auto，將占滿整個父元素的高度
◆ Flex項目屬性
1.改變flex項目排列順序
語法：order:0|數值;
注：默認值為0,值越小越靠前
2.設置某個flex項目不同于其他flex項目的交叉軸對齊方式
語法：align-self:flex-start|flex-end|center|baseline|stretch;
注：屬性值的使用方法同align-items屬性
3.設置flex項目的放大比例
語法：flex-grow:0|數值;
注：flex-grow默認值為0即使存在剩余空間也不放大
4.設置flex項目的縮小比例
語法：flex-shrink:1|數值;
注：flex-shrink默認值為1,當flex容器剩余空間不足時，flex項目等比例縮小
注：flex-shrink:0; 即使flex容器空間不足，flex項目也不縮小
5.設置flex項目占據主軸的空間
語法：flex-basis:數值+單位;
注：flex-basis默認值為auto
6.flex-grow,flex-shrink,flex-basis的簡寫方式
語法：flex:0 1 auto; (默認值)
注：flex:1; 完整寫法：flex:1 1 0%;
主要應用在兩個方面：
a) 等比例分配空間
b) 將剩余空間分配給某個元素
三、響應式布局
概念—寫一套css樣式可以應用在多個終端設備
優點：可以同時適配多個終端，靈活性更強
缺點：工作量增加，會造成代碼冗余，加載時間加長
原理：媒體查詢
四、媒體查詢
1.外聯式媒體查詢
語法：
<link rel=”stylesheet” media=”screen and (min-width:960px)” href=”blue.css”/>
<link rel=”stylesheet” media=”screen and (max-width:960px)” href=”red.css”/>
注：當屏幕窗口大于等于960px時，引用blue.css文件
當屏幕窗口小于等于960px時，引用red.css文件
2.內嵌式媒體查詢
語法：
@media screen and (min-width:320px) and (max-width:960px){
body{
background:red;
}
}
注：當屏幕窗口大于等于320px,小于等于960px時，body背景色為紅色
標準盒模型和怪異盒模型
一、標準盒模型和怪異盒模型
標準盒模型是由content,padding,border,margin四部分組成
怪異盒模型是由content,margin組成
標準盒模型的總寬度=width+左右padding+左右border+左右margin
標準盒模型的總高度=height+上下padding+上下border+上下margin
怪異盒模型的總寬度=width+左右margin
怪異盒模型的總高度=height+上下margin
注：當網頁沒有添加文檔聲明時，就會觸發某些瀏覽器(如IE6)的怪異模式
二、box-sizing常用屬性值有哪些及其含義？
1.box-sizing:border-box;
將標準盒模型轉換為怪異盒模型，總寬高不包括padding和border
2.box-sizing:content-box;
將怪異盒模型轉換為標準盒模型，總寬高包含padding和border
———————————————–
擴展：如何自定義字體
語法： @font-face{
font-family:字體名稱;
src:url(字體文件路徑);
}
body{
font-family:字體名稱;
}
css3移動端布局
一、移動端相關概念
1.屏幕尺寸
屏幕尺寸是指屏幕對角線的長度，單位為英寸，1英寸=2.54厘米
2.屏幕分辨率
屏幕分辨率是指橫縱方向上的像素點數，單位為px，1個像素點=1px
(這里的1px是指物理設備上的一個像素點)
常見移動端設備屏幕分辨率：
iphone6,6s,7,8 1334*750
iponee6plus,7plus,8plus 1920*1080
注：移動端設備一般為 縱向像素*橫向像素
3.ppi
屏幕每英寸可以顯示的像素點數，即屏幕像素密度，單位為ppi
計算公式：
4.dpr
dpr是devicePixelRatio的簡寫，指物理像素與邏輯像素的比值
物理像素：屏幕分辨率
邏輯像素：寫在css文件中的像素值，即要顯示在設備上的像素值
常見設備dpr值：
iphone6,7,8 dpr=2
iphone6plus,7plus,8plus dpr=3
5.移動端meta設置
<meta name=”viewport” content=”width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0″>
注：讓視圖窗口的寬度等于設備的寬度
快捷鍵：meta:vp+tab鍵
二、常見移動端布局方案
1.百分比布局(流式布局)
特點：文字流式，控件彈性，圖片等比例縮放
頂部和底部的bar不管分辨率怎么變，高度和位置都不變
案例：拉勾網
注：適用于內容較少比較簡單的移動端頁面
2.等比例縮放布局(rem布局)
特點：使用rem為主要單位進行頁面布局，很好的實現了在不同設備上頁面等比例縮放
案例：網易
注：適用于頁面內容較多較復雜的移動端頁面
3.混合布局
特點：混合布局是指將多種布局方式(如flex布局，圣杯布局，百分比布局等)融合在一起實現移動端的屏幕適配的方法
案例：淘寶網
三、移動端相關單位
1.px
像素，相對于屏幕分辨率而言
2.em
相對于父元素字體大小放大或縮小多少倍
1em = 16px
3.rem
相對于根元素字體大小放大或縮小多少倍
4.vw
vw是viewport width的縮寫，即視圖窗口的寬度
1vw = 視窗寬度的1%
vh是指視圖窗口的高度
vmin是vw和vh中較小值
vmax是vw和vh中較大值
css3基礎變形
一、css3基礎變形
語法： transform:rotate(旋轉)|scale(縮放)|skew(傾斜)|translate(位移);
1.旋轉(rotate)
a) rotateX(180deg) 沿x軸翻轉 等價于 rotate3d(1,0,0,180deg)
b) rotateY(180deg) 沿y軸翻轉 等價于 rotate3d(0,1,0,180deg)
c) rotateZ(180deg) 沿z軸翻轉 等價于 rotate3d(0,0,1,180deg)
d) rotate(60deg) 不指定軸時，是2d空間的旋轉，正值為順時針，負值為逆時針
注：rotate旋轉的單位是deg
2.縮放(scale)
a) scaleX(1.5) 沿x軸縮放，默認值為1，不放大不縮小，大于1為放大，小于1為縮小
b) scaleY(1.5) 沿y軸縮放
c) scale(1.5) 沿x軸和y軸同時縮放
d) scale(-1.5) 先翻轉后縮放
3.傾斜(skew)
a) skewX(30deg) 沿x軸傾斜
b) skewY(-30deg) 沿y軸傾斜
c) skew(30deg) 不指定軸時，默認沿x軸傾斜
d) skew(30deg,30deg) x軸和y軸同時傾斜
skewX(30deg) skewY(30deg) x軸和y軸同時傾斜
注：兩種寫法傾斜效果不同
skew傾斜單位為deg
4.位移(translate)
a) translateX(100px) 沿x軸位移，向右為正，向左為負
b) translateY(-100px) 沿y軸位移，向下為正，向上為負
c) translateZ(100px) 沿z軸位移，向前為正，向后為負
d) translate(100px) 不指定軸時，默認沿x軸位移
e) translate(100px,100px) x軸和y軸同時位移
translateX(100px) translateY(100px)x軸和y軸同時位移
◆ 使用變形實現不定寬高元素在屏幕窗口水平垂直都居中，方法如下：
元素{
position:fixed;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
◆ 使用變形實現不定寬高的子元素在父元素中水平垂直都居中，方法如下：
父元素{
position:relative;
}
子元素{
position:absolute;
left:50%;
top:50%;
transform:translateX(-50%) translateY(-50%);
}
二、變形綜合
當多種變形方式綜合在一起時，順序不同，效果有可能不同，例如：
eg1: transform:rotate(360deg) scale(1.5);
transform:scale(1.5) rotate(360deg);
順序不同，效果相同
eg2: transform:translateX(300px) rotate(360deg);
transform:rotate(360deg) translateX(300px);
順序不同，效果不同
三、改變變形元素中心點位置
語法：transform-origin:left|center|right top|center|bottom;
四、設置元素的變形類型
語法：transform-style:flat(默認值)|preserve-3d;
flat 默認值，2d空間的變形
preserve-3d 3d空間的變形
五、透視，井深
語法：perspective:數值+單位;
eg: 父元素{perspective:1500px;}
eg: 子元素{transform:perspective(800px) rotateY(60deg);}
注：perspective主要用來設置元素3d效果的強度
transition過渡動畫
一、transition過渡動畫
語法：transition:過渡屬性 過渡時間 過渡方式 過渡延遲時間;
eg: transition:all 1s;
1.transition-property(過渡屬性)
取值：
none 沒有屬性發生過渡
all 所有發生變化的屬性都添加過渡動畫
ident 指定發生過渡的屬性列表
eg: transition:transform 1s,background 2s,border-radius 3s;
2.transition-duration(過渡時間)
取值：
0 不執行過渡，直接看到結果
time 指定過渡時間，單位為s
3.transition-delay(過渡延遲時間)
取值：
0 不延遲，直接執行過渡動畫
正值 按照設定的時間延遲執行過渡動畫
負值 設定時間前的動畫將會被截斷
4.transition-timing-function(過渡方式)
取值：
ease 默認值
linear 勻速運動
ease-in 加速運動
ease-out 減速運動
ease-in-out 慢-快-慢
二、animation動畫
☆ 動畫關鍵幀
語法： @keyframes 動畫名稱{
0%{
屬性:屬性值;
}
50%{
屬性:屬性值;
}
…
100%{
屬性:屬性值;
}
}
@keyframes 動畫名稱{
from{
屬性:屬性值;
}
50%{
屬性:屬性值;
}
…
to{
屬性:屬性值;
}
}
———————————————–
語法： animation:動畫名稱 動畫執行時間 動畫延遲執行時間 動畫播放次數 動畫播放狀態;
1.animation-name(動畫名稱)
eg: animation:box_ani 1s;
注：此處的動畫名稱要和@keyframes中的動畫名稱一致
2.animation-duration(動畫執行一次所需時間)
取值：
0 動畫不執行
time 正數，單位為s或者ms
3.animation-delay(動畫延遲執行時間)
取值：
0 不延遲，動畫立即執行
正數 按照設定的時間延遲執行動畫
負數 設定時間前的動畫將會被截斷
4.animation-iteration-count(動畫播放次數)
取值：
number 自定義動畫執行次數，設置值可為0或正整數
infinite 無限循環播放
5.animation-play-state(設置對象動畫的狀態)
取值：
running 默認值，運動
paused 動畫暫停
6.animation-timing-function(對象動畫過渡類型)
取值：
ease
linear 勻速運動
ease-in
ease-out
ease-in-out
step-start 馬上轉跳到動畫結束狀態，或者轉跳到下一幀，中間沒有過渡
step-end 保持動畫開始時的狀態，直到動畫結束時，馬上轉跳到動畫結束狀態
steps(n,start|end) n代表動畫分幾步完成
7. animation-direction(設置對象動畫運動的方向)
取值：
normal 默認值，正常方向運動
reverse 與normal運動方向始終相反
alternate 正反方向交替運動，奇數次正方向，偶數次反方向
alternate-reverse 奇數次反方向，偶數次正方向
8.animation-fill-mode (設置對象動畫時間之外的狀態)
取值：
none 默認值，不設置時間之外的狀態
forwards 保持動畫結束時的狀態
backwards 保持動畫開始時的狀態
both 動畫遵循forwards和backwards兩個規則
擴展：
隱藏翻轉元素的背面，語法如下：backface-visibility:hidden;
css3背景，漸變，蒙版
一、背景切割
語法：background-clip:border-box|padding-box|content-box;
作用：設置背景在哪個區域可見
border-box 默認值.背景在邊框已經邊框以內的區域可見
padding-box 背景在padding區域和content區域可見
content-box 背景在content區域可見
二、背景原點
語法：background-origin:border-box|padding-box|content-box;
作用：設置背景圖原點的定位區域
padding-box 默認值，背景原點從padding區域開始
border-box 背景原點從border區域開始
content-box 背景原點從content區域開始
三、背景切割&背景原點
可以將背景切割和背景原點結合使用
eg: background-clip:content-box;
background-origin:border-box;
背景原點從border區域開始，背景在content區域可見
四、背景尺寸
語法：background-size:數值|100%|cover|contain;
1.length
該數值用來設置背景圖的寬度和高度，第一個值代表寬度，第二個值代表高度，如果省略第二個值，為auto,等比例縮放
eg: background-size:100px 200px; (背景圖有可能發生變形)
background-size:100px; (背景圖有可能超出容器,不會發生變形)
2.百分比
以容器的百分比來設置背景圖的寬度和高度
eg: background-size:100% 100%;(背景圖不會超出容器，但是背景圖有可能發生變形)
background-size:100%;(背景圖有可能超出容器，但是背景圖不會發生變形)
3.cover
把背景圖像擴展至足夠大，以使背景圖像完全覆蓋背景區域。背景圖像有可能超出容器，背景圖不會發生變形
eg: background-size:cover;
4.contain
把圖像擴展至最大尺寸，以使寬度和高度 完全適應內容區域。背景圖像始終被包含在容器內,背景圖不會發生變形
五、rgba模式
語法： background:rgba(r,g,b,a); a代表透明度，取值范圍0~1
eg: background:rgba(0,0,0,.4);
注：rgba模式和opacity的區別：
a) 給容器添加opacity,容器中的文字和圖片也會跟隨透明
b) rgba模式只是給容器的背景添加一定的透明度，容器中的文本和圖片不會跟隨透明
———————————————–
擴展：hsla模式
語法： background:hsla(h,s,l,a);
h 色調，取值范圍0~360
s 飽和度，取值范圍0%~100%
l 亮度，取值范圍0%~100%
a 透明度，取值范圍0~1
———————————————-
六、線性漸變
語法： background:linear-gradient(漸變方向,顏色 起始位置,顏色 起始位置);
eg: background:linear-gradient(to right,red 0%,yellow 30%,blue 50%);
注：重復的線性漸變寫法如下：
background:repeating-linear-gradient(to right,red 0%,yellow 15%,blue 25%);
注：設置重復的線性漸變，必須指定漸變的位置
七、徑向漸變
語法：background:-webkit-radial-gradient(漸變中心點位置,漸變形狀 漸變半徑長度,顏色 起始位置,顏色 起始位置);
eg: background:-webkit-radial-gradient(left top,circle closest-side,red 0%,yellow 10%);
注：重復的徑向漸變寫法：
background:-webkit-repeating-radial-gradient(center,red 0%,yellow 10%);
注：設置重復的徑向漸變，必須指定漸變的位置
———————————————–
擴展一 蒙版
語法： -webkit-mask-image:url(圖片路徑)|使用漸變作為蒙版圖片; -webkit-mask-repeat:no-repeat|repeat-x|repeat-y|repeat;
-webkit-mask-position:center;
擴展二 背景在文字區域可見
語法： -webkit-background-clip:text;
注：設置此屬性需要將文字顏色設置為透明，即 color:transparent;
擴展三：倒影
語法： -webkit-box-reflect:left|right|above(上)|below(下) 偏移量 倒影漸變;
———————————————–
八、BFC
1.概念
BFC——block formatting context (塊級格式化上下文)
2.如何觸發BFC
a) 設置了float除none以外的值(left,right)
b) 設置了overflow除visible以外的值(hidden,scroll,auto)
c) 設置了display屬性(table-cell,inline-block,flex)
d) 設置position屬性(absolute,fixed)
3.BFC的作用
a) 解決上下margin重疊問題
給設置margin的元素外邊再嵌套一個父元素，并設置overflow:hidden;這樣就給里面的元素創建了一個塊級格式化上下文
b) 常用來清除浮動，解決高度塌陷問題
給父元素設置overflow:hidden;就給里面浮動的子元素創建了一個塊級格式化上下文，閉合了浮動
c) 用于實現多欄布局
與浮動元素相鄰的已生成BFC的元素不能與浮動元素互相覆蓋。利用該特性可以作為多欄布局的一種實現方式
在自己的頁面中嵌入其他頁面是一個非常重要的操作，既能豐富自己的頁面樣式又能增強頁面的信息量。
舉個例子，如果打算在自己的頁面中插入一個視頻網站的視頻該怎么做呢？
假如我現在自己的頁面中嵌入這個視頻，
我只需要在視頻下側找到"分享"。
點擊之后出現這樣的對話框，如圖：
通過在我們的頁面中粘貼這段通用代碼就可以顯示這個視頻了。
代碼如下：
<iframe height=498 width=510 src='http://player.youku.com/embed/XNDQ5Mjg1MTU1Mg==' frameborder=0 'allowfullscreen'></iframe>下面就寫到我們的頁面中試試吧。
首先復制"第一個網頁.html"文件，改名為"在頁面中嵌入頁面.html"保存，然后用記事本打開，修改<head></head>標簽中的<title>第一個頁面</title>編輯為"在頁面中嵌入頁面"即可，完整代碼如下：
<!DOCTYPE HTML>
<html>
<head>
<title>在頁面中嵌入頁面</title>
</head>
<body>
<iframe height=498 width=510 src='http://player.youku.com/embed/XNDQ5Mjg1MTU1Mg==' frameborder=0 'allowfullscreen'></iframe>
</body>
</html>頁面效果如下：
怎么樣，是不是很神奇！
下面我們來分析一下這段代碼的含義。
首先要引入一個新標簽<iframe>，HTML的使用手冊中翻譯為"框架"，說實話，這么翻譯初學者是不知所云的。這個框架元素的主要作用就是在自己的頁面中嵌入其他頁面。
在<iframe>標簽中先指定路徑屬性即src。這里使用的是單引號，實際上只要是半角符號，單引號和雙引號都可以的。
然后設置長寬屬性，即width和height，大家可以嘗試改變數據看看。
frameborder可以為iframe的窗口指定一個邊框，大家可以嘗試把0改成1看看。大家注意哈，這里輸入30和輸入1是一樣的，因為這個屬性不是定義邊框的寬度，而是定義是否顯示邊框！在編程中叫做布爾值，0代表沒有邊框，1代表有邊框！和我們點燈的開關一樣！
如圖：多了個邊框出來。
最后'allowfullscreen'這個描述非常的奇葩，把它刪掉沒有任何影響。不曉得是干什么的，主要是也不符合html的語法（也可能是我沒見識）。如果有詳細了解的小伙伴歡迎留言指教，感激不盡。
下面我們嘗試修改一下src屬性，給它一個別的路徑看看。例如:
<!DOCTYPE HTML>
<html>
<head>
<title>在頁面中嵌入頁面</title>
</head>
<body>
<iframe height=498 width=510 src='https://www.toutiao.com/i6790673377188119052/'>
</iframe>
</body>
</html>需要注意的是，修改了src并保存文件之后要把原頁面關閉然后重新打開才可以正常顯示！
效果如下：
在瀏覽網頁時我們還經常遇到這樣的情況，就是有一個獨立窗口顯示嵌套的頁面，上面有個標題，一點擊就會跳到那個嵌入的頁面上，這個其實很簡答，使用一個<a></a>元素即可辦到，示例代碼如下:
<a href="https://www.toutiao.com/i6790673377188119052/">HTML中的塊級元素與內聯元素——零基礎自學網頁制作</a>
<iframe height=498 width=510 src='https://www.toutiao.com/i6790673377188119052/'></iframe>頁面示例如下：
框架元素并沒有換行，所有我們可以推測出<iframe>標簽實際上是個內聯元素，如何讓它換行呢？
為<iframe>的style屬性中寫入display:block即可。這句代碼的意思是按照塊元素來顯示<iframe>內容。
示例代碼如下：
<iframe height=498 width=510 style = "display:block;"src='https://www.toutiao.com/i6790673377188119052/'></iframe>頁面效果如下：
是不是很有意思。
下面我們來介紹一個更有趣的玩法。如圖所示：
這個怎么做呢？
這就要介紹<iframe>標簽中的另一個屬性：name（名字）
示例代碼如下：name="iframe"
<iframe name = "iframe" height=498 width=510style = "display:block;"src='https://www.toutiao.com/i6790673377188119052/'allowfullscreen'></iframe>這里講個題外話，如果大家了解中國古代的"請神術"的話就會知道這樣一個有趣的傳說，就是如果我們能叫出鬼神的名字就可以驅使它。
編程也是這樣，我們給函數或變量一個名字后，就可以隨時隨地的驅使它。
現在我們給<iframe>起了個名字叫做"iframe"，當然您可以使用其他名字也沒問題，但要使用英文或漢語拼音命名，名字是英語字母組合最好。
有了名字之后，<a>標簽就要驅使<iframe>標簽來顯示自己路徑下的內容，如何驅使呢？
大家還記得<a>標簽中有一個target屬性嗎？只要讓target="iframename"即可！
也就是target="iframe"。示例代碼如下：大家要注意的是<a>標簽也是內聯元素，也需要添加display:block，不然也是排在一列顯示。
<a style = "display:block;" target="iframe" href="https://www.toutiao.com/i6790673377188119052/">HTML中的塊級元素與內聯元素——零基礎自學網頁制作</a><!--第一個a鏈接的是頭條文章-->
<a style = "display:block;" target="iframe" href="https://baike.baidu.com/item/%E6%AD%BC-20/1555348?fromtitle=%E6%AD%BC20&fromid=1838467&fr=aladdin"> 殲20戰斗機百科</a><!--第二個a鏈接的是百度百科-->
<a style = "display:block;"target="iframe" href="image1.jpg">IT美女</a><!--第三個a鏈接的是本地圖片-->
<iframe name = "iframe" height=498 width=510style = "display:block;"></iframe>只要我們為不同的<a>標簽賦予target="iframe"的屬性，點擊這些<a>標簽就可以在叫做"iframe"的框架元素中顯示自己的頁面。這時我們可以把<iframe>標簽中的src屬性刪除掉，保存文件后，關閉測試網頁，再重新打開，效果如下:
初始狀態下，因為框架元素中的src是空的，所以打開后是空白的。如果您覺得單調可以任意復制3個<a>中的一個href中的鏈接路徑給<iframe>的src屬性，打開就是相應的標簽。這個就不演示了，大家自己試試即可。
點擊第一個鏈接效果如下：
點擊第二個鏈接如下：
點擊第三個鏈接如下：
最后再強調一下，改完框架的src屬性后需要關閉頁面后重新打開才可以，刷新的話并不能正確顯示！切記！
今天的示例代碼如下：
<!DOCTYPE HTML>
<html>
<head>
<title>在頁面中嵌入頁面</title>
</head>
<body>
<a style = "display:block;" target="iframe" href="https://www.toutiao.com/i6790673377188119052/">HTML中的塊級元素與內聯元素——零基礎自學網頁制作</a>
<a style = "display:block;" target="iframe" href="https://baike.baidu.com/item/%E6%AD%BC-20/1555348?fromtitle=%E6%AD%BC20&fromid=1838467&fr=aladdin">殲20戰斗機百科</a>
<a style = "display:block;" target="iframe" href="image1.jpg">IT美女</a>
<iframe name = "iframe" height=498 width=510 style = "display:block;"></iframe>
</body>
</html>今天的內容結束了，明天我將會為大家介紹<object>和<embed>這兩個標簽，它們可以在頁面中嵌入更多有趣的東西。
喜歡的小伙伴請關注我，閱讀中遇到任何問題請給我留言，如有疏漏或錯誤歡迎大家斧正，不勝感激！
HTML序章（學習目的、對象、基本概念）——零基礎自學網頁制作
HTML是什么？——零基礎自學網頁制作
第一個HTML頁面如何寫？——零基礎自學網頁制作
HTML頁面中head標簽有啥用？——零基礎自學網頁制作
初識meta標簽與SEO——零基礎自學網頁制作
HTML中的元素使用方法1——零基礎自學網頁制作
HTML中的元素使用方法2——零基礎自學網頁制作
HTML元素中的屬性1——零基礎自學網頁制作
HTML元素中的屬性2（路徑詳解）——零基礎自學網頁制作
使用HTML添加表格1（基本元素）——零基礎自學網頁制作
使用HTML添加表格2（表格頭部與腳部）——零基礎自學網頁制作
使用HTML添加表格3（間距與顏色）——零基礎自學網頁制作
使用HTML添加表格4（行顏色與表格嵌套）——零基礎自學網頁制作
16進制顏色表示與RGB色彩模型——零基礎自學網頁制作
HTML中的塊級元素與內聯元素——零基礎自學網頁制作
初識HTML中的<div>塊元素——零基礎自學網頁制作
在HTML頁面中嵌入其他頁面的方法——零基礎自學網頁制作
封閉在家學網頁制作！為頁面嵌入PDF文件——零基礎自學網頁制作
HTML表單元素初識1——零基礎自學網頁制作
HTML表單元素初識2——零基礎自學網頁制作
HTML表單3（下拉列表、多行文字輸入）——零基礎自學網頁制作
HTML表單4（form的action、method屬性）——零基礎自學網頁制作
HTML列表制作講解——零基礎自學網頁制作
為HTML頁面添加視頻、音頻的方法——零基礎自學網頁制作
音視頻格式轉換神器與html視頻元素加字幕——零基礎自學網頁制作
HTML中使用<a>標簽實現文本內鏈接——零基礎自學網頁制作
能夠寫出基本的頁面（里面包含圖片、各種標簽和鏈接）
我們主要用的開發工具有chrome、hbuilder、Photoshop
瀏覽器是網頁顯示、運行的平臺，常用的瀏覽器有IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等。我們平時稱為五大瀏覽器。
瀏覽器內核又可以分成兩部分：渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎。
渲染引擎 ：它負責取得網頁的內容（HTML、XML、圖像等等）、整理訊息（例如加入 CSS 等），以及計算網頁的顯示方式，然后會輸出至顯示器或打印機。瀏覽器的內核的不同對于網頁的語法解釋會有不同，所以渲染的效果也不相同。
JS 引擎 則是解析 Javascript 語言，執行 javascript語言來實現網頁的動態效果。
最開始渲染引擎和 JS 引擎并沒有區分得很明確，后來 JS 引擎越來越獨立，內核就傾向于只指渲染引擎。有一個網頁標準計劃小組制作了一個 ACID 來測試引擎的兼容性和性能。內核的種類很多，如果加上沒什么人使用的非商業的免費內核，可能會有10多種，但是常見的瀏覽器內核可以分這四種：Trident、Gecko、Blink、Webkit。
了解一點：移動端的瀏覽器內核主要說的是系統內置瀏覽器的內核。
Android手機而言，使用率最高的就是Webkit內核，大部分國產瀏覽器宣稱的自己的內核，基本上也是屬于webkit二次開發。
iOS以及WP7平臺上，由于系統原因，系統大部分自帶瀏覽器內核，一般是Safari或者IE內核Trident的
結構標準：結構用于對網頁元素進行整理和分類，咱們主要學的是HTML。 最重要
表現標準：表現用于設置網頁元素的版式、顏色、大小等外觀樣式，主要指的是CSS。
行為標準：行為是指網頁模型的定義及交互的編寫，咱們主要學的是 Javascript
HTML（英文Hyper Text Markup Language的縮寫）中文譯為“超文本標簽語言”。是用來描述網頁的一種語言。
所謂超文本，因為它可以加入圖片、聲音、動畫、多媒體等內容，不僅如此，它還可以從一個文件跳轉到另一個文件，與世界各地主機的文件連接。
<h1> 我是一個大標題 </h1>
注意： 體會 文本 標簽 語言 幾個詞語
總結： HTML 作用就是用標記標簽來描述網頁，把網頁內容在瀏覽器中展示出來。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>1.HTML標簽：
作用所有HTML中標簽的一個根節點。 最大的標簽 根標簽
2 head標簽： 文檔的頭部
文檔的頭部描述了文檔的各種屬性和信息，包括文檔的標題、在 Web 中的位置以及和其他文檔的關系等。絕大多數文檔頭部包含的數據都不會真正作為內容顯示給讀者。
注意在head標簽中我們必須要設置的標簽是title
3.title標簽： 文檔的標題
作用：讓頁面擁有一個屬于自己的標題。
4.body標簽：文檔的主體 以后我們的頁面內容 基本都是放到body里面的
body 元素包含文檔的所有內容（比如文本、超鏈接、圖像、表格和列表等等。）
在HTML頁面中，帶有“< >”符號的元素被稱為HTML標簽，如上面提到的 HTML、head、body都是HTML骨架結構標簽。所謂標簽就是放在“< >” 標簽符中表示某個功能的編碼命令，也稱為HTML標簽或 HTML元素
1.雙標簽
<標簽名> 內容 </標簽名>
該語法中“<標簽名>”表示該標簽的作用開始，一般稱為“開始標簽（start tag）”，“</標簽名>” 表示該標簽的作用結束，一般稱為“結束標簽（end tag）”。和開始標簽相比，結束標簽只是在前面加了一個關閉符“/”。
比如 <body>我是文字 </body>
2.單標簽
<標簽名 />
單標簽也稱空標簽，是指用一個標簽符號即可完整地描述某個功能的標簽。
比如 <br />
標簽的相互關系就分為兩種：
1.嵌套關系
<head> <title> </title> </head>
2.并列關系
<head></head> <body></body>
首先 HTML和CSS是兩種完全不同的語言，我們學的是結構，就只寫HTML標簽，認識標簽就可以了。 不會再給結構標簽指定樣式了。
HTML標簽有很多，這里我們學習最為常用的，后面有些較少用的，我們可以查下手冊就可以了。
排版標簽
單詞縮寫： head 頭部. 標題 title 文檔標題
為了使網頁更具有語義化，我們經常會在頁面中用到標題標簽，HTML提供了6個等級的標題，即
<h1>、<h2>、<h3>、<h4>、<h5>和<h6>
其基本語法格式如下：
<hn> 標題文本 </hn>
<p> 文本內容 </p>
<hr />是單標簽
<br />
div span 是沒有語義的 是我們網頁布局主要的2個盒子 css+div
div 就是 division 的縮寫 分割， 分區的意思 其實有很多div 來組合網頁。
span, 跨度，跨距；范圍
語法格式：
<div> 這是頭部 </div> <span>今日價格</span>
在網頁中，有時需要為文字設置粗體、斜體或下劃線效果，這時就需要用到HTML中的文本格式化標簽，使文字以特殊的方式顯示。
b i s u 只有使用 沒有 強調的意思 strong em del ins 語義更強烈
使用HTML制作網頁時，如果想讓HTML標簽提供更多的信息，可以使用HTML標簽的屬性加以設置。其基本語法格式如下：
<標簽名 屬性1="屬性值1" 屬性2="屬性值2" …> 內容 </標簽名>
在上面的語法中，
1.標簽可以擁有多個屬性，必須寫在開始標簽中，位于標簽名后面。
2.屬性之間不分先后順序，標簽名與屬性、屬性與屬性之間均以空格分開。
3.任何標簽的屬性都有默認值，省略該屬性則取默認值。
采取 鍵值對 的格式 key="value" 的格式
比如:
<hr width="400" />
屬性 是 寬度
值 是 400
單詞縮寫： image 圖像
HTML網頁中任何元素的實現都要依靠HTML標簽，要想在網頁中顯示圖像就需要使用圖像標簽，接下來將詳細介紹圖像標簽<img />以及和他相關的屬性。其基本語法格式如下：
該語法中src屬性用于指定圖像文件的路徑和文件名，他是img標簽的必需屬性。
<img src="圖像URL" />
單詞縮寫： anchor 的縮寫 [???k?(r)] 。基本解釋 錨, 鐵錨 的
在HTML中創建超鏈接非常簡單，只需用標簽環繞需要被鏈接的對象即可，其基本語法格式如下：
<a href="跳轉目標" target="目標窗口的彈出方式">文本或圖像</a>
href：用于指定鏈接目標的url地址，當為標簽應用href屬性時，它就具有了超鏈接的功能。 Hypertext Reference的縮寫。意思是超文本引用
target：用于指定鏈接頁面的打開方式，其取值有self和blank兩種，其中self為默認值，blank為在新窗口中打開方式。
注意：
1.外部鏈接 需要添加 http:// www.baidu.com
2.內部鏈接 直接鏈接內部頁面名稱即可 比如 < a href="index.html"> 首頁
3.如果當時沒有確定鏈接目標時，通常將鏈接標簽的href屬性值定義為“#”(即href="#")，表示該鏈接暫時為一個空鏈接。
4.不僅可以創建文本超鏈接，在網頁中各種網頁元素，如圖像、表格、音頻、視頻等都可以添加超鏈接。
通過創建錨點鏈接，用戶能夠快速定位到目標內容。
創建錨點鏈接分為兩步：
1.使用“a href=”#id名>“鏈接文本"</a>創建鏈接文本（被點擊的） <a href="#two"> 2.使用相應的id名標注跳轉目標的位置。 <h3 id="two">第2集</h3>
base 可以設置整體鏈接的打開狀態
base 寫到 <head> </head> 之間
把所有的連接 都默認添加 target="_blank"
在HTML中還有一種特殊的標簽——注釋標簽。如果需要在HTML文檔中添加一些便于閱讀和理解但又不需要顯示在頁面中的注釋文字，就需要使用注釋標簽。其基本語法格式如下：
<!-- 注釋語句 --> ctrl + / 或者 ctrl +shift + /
注釋內容不會顯示在瀏覽器窗口中，但是作為HTML文檔內容的一部分，也會被下載到用戶的計算機上，查看源代碼時就可以看到。
實際工作中，通常新建一個文件夾專門用于存放圖像文件，這時再插入圖像，就需要采用“路徑”的方式來指定圖像文件的位置。
根目錄 當前目錄
路徑可以分為： 相對路徑和絕對路徑
以引用文件之網頁所在位置為參考基礎，而建立出的目錄路徑。因此，當保存于不同目錄的網頁引用同一個文件時，所使用的路徑將不相同，故稱之為相對路徑。
絕對路徑以Web站點根目錄為參考基礎的目錄路徑。之所以稱為絕對，意指當所有網頁引用同一個文件時，所使用的路徑都是一樣的
“D:webimglogo.gif”，或完整的網絡地址，例如“http://www.itcast.cn/images/l...”。
無序列表的各個列表項之間沒有順序級別之分，是并列的。其基本語法格式如下：
<ul> <li>列表項1</li> <li>列表項2</li> <li>列表項3</li> ...... </ul>
注意：
有序列表即為有排列順序的列表，其各個列表項按照一定的順序排列定義，有序列表的基本語法格式如下：
<ol> <li>列表項1</li> <li>列表項2</li> <li>列表項3</li> ...... </ol>
所有特性基本與ul 一致。
但是實際工作中， 較少用 ol img src="media/1.jpg" />
定義列表常用于對術語或名詞進行解釋和描述，定義列表的列表項前沒有任何項目符號。其基本語法如下：
<dl> <dt>名詞1</dt> <dd>名詞1解釋1</dd> <dd>名詞1解釋2</dd> ... <dt>名詞2</dt> <dd>名詞2解釋1</dd> <dd>名詞2解釋2</dd> ... </dl>
在HTML網頁中，要想創建表格，就需要使用表格相關的標簽。創建表格的基本語法格式如下：
<table> <tr> <td>單元格內的文字</td> ... </tr> ... </table>
在上面的語法中包含三對HTML標簽，分別為 table</table、tr</tr、td</td，他們是創建表格的基本標簽，缺一不可，下面對他們進行具體的解釋
1.table用于定義一個表格。
2.tr 用于定義表格中的一行，必須嵌套在 table標簽中，在 table中包含幾對 tr，就有幾行表格。
3.td /td：用于定義表格中的單元格，必須嵌套在<tr></tr>標簽中，一對 <tr> </tr>中包含幾對<td></td>，就表示該行中有多少列（或多少個單元格）。
注意：
1. <tr></tr>中只能嵌套<td></td> 2. <td></td>標簽，他就像一個容器，可以容納所有的元素
表頭一般位于表格的第一行或第一列，其文本加粗居中，如下圖所示，即為設置了表頭的表格。設置表頭非常簡單，只需用表頭標簽th</th替代相應的單元格標簽td</td即可。
在使用表格進行布局時，可以將表格劃分為頭部、主體和頁腳（頁腳因為有兼容性問題，我們不在贅述），具體 如下所示：
<thead></thead>：用于定義表格的頭部。
必須位于<table></table> 標簽中，一般包含網頁的logo和導航等頭部信息。
<tbody></tbody>：用于定義表格的主體。
位于<table></table>標簽中，一般包含網頁中除頭部和底部之外的其他內容。
表格的標題： caption
定義和用法
caption 元素定義表格標題。
<table> <caption>我是表格標題</caption> </table>caption 標簽必須緊隨 table 標簽之后。您只能對每個表格定義一個標題。通常這個標題會被居中于表格之上。
跨行合并：rowspan 跨列合并：colspan
合并單元格的思想：
將多個內容合并的時候，就會有多余的東西，把它刪除。 例如 把 3個 td 合并成一個， 那就多余了2個，需要刪除。 公式： 刪除的個數 = 合并的個數 - 1
合并的順序 先上 先左
表格的學習要求： 能手寫表格結構，并且能合并單元格。
表單控件：
包含了具體的表單功能項，如單行文本輸入框、密碼輸入框、復選框、提交按鈕、重置按鈕等。
提示信息：
一個表單中通常還需要包含一些說明性的文字，提示用戶進行填寫和操作。
表單域：
他相當于一個容器，用來容納所有的表單控件和提示信息，可以通過他定義處理表單數據所用程序的url地址，以及數據提交到服務器的方法。如果不定義表單域，表單中的數據就無法傳送到后臺服務器。
在上面的語法中，input /標簽為單標簽，type屬性為其最基本的屬性，其取值有多種，用于指定不同的控件類型。除了type屬性之外，input /標簽還可以定義很多其他的屬性，其常用屬性如下表所示。
label 標簽為 input 元素定義標注（標簽）。
作用： 用于綁定一個表單元素, 當點擊label標簽的時候, 被綁定的表單元素就會獲得輸入焦點
如何綁定元素呢？
for 屬性規定 label 與哪個表單元素綁定。
<label for="male">Male</label> <input type="radio" name="sex" id="male" value="male">如果需要輸入大量的信息，就需要用到textarea/textarea標簽。通過textarea控件可以輕松地創建多行文本輸入框，其基本語法格式如下：
<textarea cols="每行中的字符數" rows="顯示的行數"> 文本內容 </textarea>使用select控件定義下拉菜單的基本語法格式如下
<select> <option>選項1</option> <option>選項2</option> <option>選項3</option> ... </select>注意：
在HTML中，form標簽被用于定義表單域，即創建一個表單，以實現用戶信息的收集和傳遞，form中的所有內容都會被提交給服務器。創建表單的基本語法格式如下：
<form action="url地址" method="提交方式" name="表單名稱"> 各種表單控件 </form>常用屬性：
注意： 每個表單都應該有自己表單域。
如需轉載，請注明出處，否則將追究法律責任。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
