HTML5和CSS3核心笔记
生活随笔
收集整理的這篇文章主要介紹了
HTML5和CSS3核心笔记
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
目錄
第一章：HTML基礎
第二章：CSS基礎
第三章、CSS核心元素
第四章、盒模型和文本溢出
第五章、元素類型
第六章、定位錨點
第七章、圖片整合
第八章、寬髙自適應
第九章、瀏覽器兼容
第十章、表格表單高級
第十一章、HTML5新增標簽
第十二章、CSS3選擇器和新增屬性
第十三章、2D和3D效果
第十四章、彈性盒和媒體查詢
第十五章、移動端布局
第一章：HTML基礎
一、HTML常用標簽1、語法：<i></i> | <em></em>說明：傾斜標記語法：<b></b> | <strong></strong>說明：加粗標記語法：<u></u>說明：傾斜標記2、語法：<br/>說明：空標記，用來設置字體換行語法：<hr/>說明：空標記，用做水平線語法：<p></p>說明：段落標記，標識一個段落（段落與段落之間有段間距）3、常用： 不換行空格> 右尖括號< 左尖括號© 備案中圖標 ?常用元素：語法：<div></div>說明：<div>標簽可以把文檔分割為獨立的、不同的部分。它可以用作嚴格的組織工具，并且不使用任何格式與其關聯語法：<span></span>說明：<span></span>文本結點可以是某一小段文本，或是某一個字。4、列表：HTML中有三種列表，分別是：>無序列表（ul）>有序列表（ol）>自定義列表（dl）1）、無序列表<ul><li>列表項內容</li><li>列表項內容</li><li>列表項內容</li>.............</ul>2）、有序列表<ol><li>列表項內容</li><li>列表項內容</li><li>列表項內容</li>.............</ol>3）、自定義列表<dl><dt>名詞</dt><dd>解釋</dd></dl>5、超鏈接和圖像超鏈接語法：<a href="目標文件路徑及全稱/連接地址" alt="替換文本" title="提示文本">鏈接文本/圖片</a>空鏈接語法：<a href="#"></a>插入圖像語法：<img src="目標文件路徑及全稱" alt="圖片替換文本" title="圖片標題"/>二、表格元素1、表格的語法語法：<table><tr><th></th><td></td><td></td></tr></table>說明：一對tr表示一行；一對td表示一列（一個單元格）;一對th表示表頭2、表格的相關屬性width="表格的寬度";height="表格的高度";border="表格的邊框";bordercolor="邊框色";cellspacing="單元格與單元格之間的間距"cellpadding="單元格與內容之間的空隙"align="表格對齊方式" 取值：left/right/centervalign="垂直對齊" 取值：top/bottom/middlecolspan="所要合并的單元格的列數"rowspan="所要合并的單元格的行數"三、表單元素1、表單域語法：<form name="表單名稱" method="post/get" action=""></form>說明：Get是用來從服務器上獲得數據，而Post是用來向服務器上傳遞數據。出于安全性考慮，建議最好使用Post提交數據2、表單控件文本框：<input type="text" value="默認值"/>密碼框：<input type="password"/>提交按鈕：<input type="submit" value="按鈕內容"/>重置按鈕：<input type="reset" value="按鈕內容"/>單選框：<input type="radio" name=""/>復選框：<input type="checkbox" name=""/>disabled="disabled":禁用checked="checked":默認選中按鈕：<input type="button" value="按鈕內容"/>3、下拉菜單語法：<select><option>下拉選項1</option><option>下拉選項2</option></select>4、多行文本框語法：<textarea cols="" rows=""></textarea>說明：rows屬性和cols屬性用來設置文本輸入窗口的高度和寬度，單位是字符第二章：CSS基礎
一、CSS樣式表的建立和優先級1、CSS樣式表的建立&方法一：內部樣式表（嵌套到頁面中）語法：<style type="text/css">/*css語句*/</style>說明：使用style標記創建樣式時，最好將該標記寫在<head></head>之間&方法二：內聯樣式（行間樣式，行內樣式，嵌入式樣式）語法：<標簽 style="屬性：屬性值;屬性：屬性值;"></標簽>例如：<div style="width:100px;height:100px;border:1px solid #eee;background:#fff"></div>&方法三：引用外部樣式表文件步驟1：外部樣式表的創建步驟2：外部樣式表的導入<link rel="stylesheet" type="text/css" href="目標文件路徑及全稱"/>說明：使用link元素導入外部樣式表是,需將該元素寫在文檔頭部，即<head></head>之間.rel:用于定義文檔關聯，表示關聯樣式表type:定義文檔類型2、CSS樣式表的優先級內聯樣式表的優先級別最高內部樣式表與外部樣式表的優先級和書寫的順序有關，后書寫的優先級別髙。二、CSS常用選擇符和權重1、CSS語法CSS語法由兩部分組成:選擇符、聲明語法：選擇符{屬性：屬性值;屬性：屬性值;}例如： h1{color：red;font-size：14px;}↑ ↑選擇符 聲明說明：1）、每個CSS樣式由兩部分組成，即選擇符和聲明，聲明又分為屬性和屬性值;2）、屬性必須放在花括號中，屬性和屬性值用冒號連接。3）、每條聲明用分號結束。4）、當一個屬性有多個屬性值的時候，屬性與屬性值不分先后順序5）、在書寫樣式過程中，空格、換行等操作不影響屬性顯示。2、CSS常用選擇符選擇符表示要定義樣式的對象，可以是元素本身，也可以是一類元素或者制定名稱的元素。常用的選擇符有：類型選擇符（標記選擇器）、類選擇符（class選擇符）、ID選擇符（id選擇器）、偽類選擇器、群組選擇符（集合選擇器）、通配符（*）、偽對象選擇符、包含選擇符（后代選擇器）1）、元素選擇符/類型選擇符（element選擇器）語法：元素名稱{屬性：屬性值}說明：元素選擇符就是以文檔語言對象類型作為選擇符，即使用結構中元素名稱作為選擇符。例如body、div、p、img、em、strong、span......等。所有的頁面元素都可以作為選擇符。用法：如果想改變某個元素的默認樣式，可以使用類型選擇符。當統一文檔某個元素的顯示效果時，可以使用類型選擇符。2）、ID選擇符語法：#id名{屬性：屬性值;}說明：當我們使用id選擇符時，應該為每個元素定義一個id名 起名時要取英文名，不能用關鍵字：（所有的標記和屬性都是關鍵字）一個id名稱只能對應文檔中一個具體的元素對象，因為id只能定義頁面中某一個唯一的元素對象。最大的用處：創建網頁的外圍結構3）、類選擇符（class選擇符）語法：.class名{屬性：屬性;}說明：當我們使用類選擇符時，應先為每個元素定義一個類名稱，class選擇符更適合定義一類樣式4）、通配選擇符語法：*{屬性：屬性值;}說明：通配選擇符的含義就是所有元素，常用來重置樣式5）、群組選擇符語法：選擇符1，選擇符2，選擇符3{屬性：屬性值;}說明：當有多個選擇符應用相同的樣式時，可以將選擇符用“，”分隔的方式，合并為一組6）、包含選擇符語法：選擇符1 選擇符2{屬性：屬性值;}說明：選擇符1和選擇符2用空格隔開，含義就是選擇符1中包含的所有選擇符27）、偽類選擇符語法：a:link{屬性：屬性值;} 超鏈接的初始狀態a:visited{屬性：屬性值;} 超鏈接被訪問后的狀態a:hover{屬性：屬性值;} 鼠標劃過超鏈接時的狀態a:active{屬性：屬性值;} 鼠標按下時超鏈接的狀態說明：當這4個超鏈接偽類選擇符聯合使用時，應注意他們的順序，正常順序為: a:link，a:visited，a:hover,a:active,錯誤的順序有時會使超鏈接的樣式失效為了簡化代碼，可以把偽類選擇符中相同的聲明提出來放在a選擇符中例如：a{color:red;} a:hover{color:green;} 表示超鏈接的三種狀態都相同，只有鼠標劃過變顏色。3、選擇符的權重css中用四位數字表示權重，權重的表達方式如：0,0,0,0類型選擇符的權重:0001class選擇符的權重:0010id選擇符的權重:0100屬性選擇符的權重:0010偽類選擇符的權重:0010偽元素選擇符的權重:0010包含選擇符的權重:包含的選擇符權重值之和內聯樣式的權重:1000繼承樣式的權重:0000當不同選擇符的樣式設置有沖突的時候，髙權重選擇符的樣式會覆蓋低權重選擇符的樣式。相同權重的選擇符，樣式遵循就近原則:哪個選擇符最后定義，就采用哪個選擇符樣式。第三章、CSS核心元素
一、文本類屬性1、font-family:字體類型語法：{font-family:字體1,字體2,字體3;}說明：當字體是中文字體時,需加雙引號;當英文字體中有空格時,需加雙引號如“Times New Roman”;當英文字體只有一個單詞組成是不加雙引號;如：Arial。2、font-size：文本大小語法：{font-size：數值;}說明：屬性值為數值時，必須給屬性值加單位，屬性值為0時除外。為了減小系統間的字體顯示差異，IE Netscape Mozilla的瀏覽器制作商于1999年召開會議，共同確定16px/ppi為標準字體大小默認值，即1em。默認情況下，1em=16px，0.75em=12px3、color:文本顏色語法：{color:顏色值;}說明：十六進制顏色模式: 0 1 2 3 4 5 6 7 8 9 A B C D E F 例如: color：#FF0000rgb顏色模式: color:rgb(0,204,204)rgba顏色模式: color:rgba(0,204,204,0.6)rgb三原色，a表示透明度4、font-weight:字體加粗語法:{font-weight:bolder/bold/normal/100-900;}說明：bolder（更粗的）/bold（加粗）/normal（常規）在css規范中，把字體的粗細分為9個等級，分別為100-900，其中100對應最輕的字體變形，而900對應最重的字體變形，一般500為常規字體，600-900為加粗字體5、font-style:字體傾斜語法:{font-style:italic/oblique/normal;}說明：italic和oblique都表示傾斜，不過oblique的幅度要大一些。但一般瀏覽器對它們的區分不是很明顯。6、text-align:水平對齊語法:{text-align:left/right/center/justify;}說明：justify對內容以兩端邊界線對齊顯示7、line-height:行髙語法:{line-height:normal/數值;}8、text-decoration:文本修飾語法:{text-decoration:none/underline/overline/line-through;}說明：none:沒有修飾underline:添加下劃線overline:添加上劃線line-through:添加刪除線9、text-indent:首行縮進語法:{text-indent:數值;}說明：text-indent可以取負值，可實現隱藏文本，懸掛縮進。text-indent屬性只對第一行起作用，若第一行不是文本則沒變化。二、列表屬性1、語法：{list-style-type:disc(實心圓)/circle(空心圓)/square(實心方塊)/none(去掉列表符號)}說明：定義列表符號樣式2、語法：{list-style-image:url(所使用照片的路徑及全稱);}說明：使用圖片作為列表符號3、語法：{list-style-position:outside/inside;}說明：定義列表符號的位置4、語法：{list-style:none;}說明：去掉列表樣式 三、背景屬性1、background-color:背景顏色語法：{background-color:顏色值;}2、background-iamge:背景圖片的設置語法：{background-iamge:url（背景圖片的路徑及全稱）;}說明：網頁上有兩種圖片形式:插入圖片、背景圖;插入圖片:屬于網頁內容,也就是結構。背景圖:屬于網頁的表現,背景圖上可以顯示文字、插入圖片、表格等。3、background-repeat:背景圖片的平鋪屬性語法：{background-repeat:no-repeat/repeat/repeat-x/repeat-y;}說明:no-repeat:不平鋪repeat:平鋪repeat-x:橫向平鋪repeat-y:縱向平鋪4、background-position:背景圖片的位置屬性語法：{background-position:值1 值2;}說明：值1:水平方向上的對齊方式（left/center/right）或值值2:垂直方向上的對齊方式（top/center/bottom）或值5、背景屬性的縮寫語法:{background:屬性值1 屬性值2 屬性值3}例:background:#背景色 url（背景圖片的路徑及全稱）no-repeat center top四、浮動屬性1、float:定義網頁中其它文本如何環繞該元素語法:{float:left/right/none;}說明:left:元素活動浮動在文本左面right:元素浮動在右面none:默認值,不浮動2、Clear:規定元素的哪一側不允許其他浮動元素屬性值none:默認值。允許浮動元素出現在兩側。both:在左右兩側均不允許浮動元素。left:在左側不允許浮動元素。right:在右側不允許浮動元素。3、解決高度塌陷方法一:給父元素添加聲明overflow:hidden方法二:在浮動元素下方添加空div，并給該元素添加聲明:clear:both;height:0;overflow:hidden(或font-size:0;)第四章、盒模型和文本溢出
一、盒模型1、盒模型的概念如果CSS對HTML文檔元素生成了一個描述該元素在HTML文檔布局中所占空間的矩形元素框（element box），那么我們可以形象地將其看作是一個盒子CSS圍繞這些盒子產生了一種“盒子模型”概念，通過定義一系列與盒子相關的屬性（內容、填充、邊框、邊界），可以控制各個盒子乃至整個HTML文檔的表現效果和布局結構。雖然CSS中沒有盒子這個單獨的屬性對象，但它卻是CSS中無處不在的一個重要組成部分。2、盒模型的組成CSS盒子模式都具備這些屬性:內容（content）、填充（padding）、邊框（border）、邊界（margin）邊界（margin）邊框（border）填充（padding）內容（content）3、盒模型的相關屬性1）、border的使用方法border:邊框寬度 邊框風格 邊框顏色;例如:{border:5px solid #f00;}邊框寬度：border-width:邊框顏色: border-color:邊框樣式: border-style:solid（實線）/dashed（虛線）/dotted（點劃線）/double（雙線）可單獨設置一方向邊框，如:底邊框: border-bottom:左邊框: border-left:2）、padding的使用方法padding設定頁面中一個元素內容（content）到元素的邊緣（border）之間的距離。背景色和背景圖像會覆蓋padding和content組成的區域&用法:用來調整內容在容器中的位置關系用來調整子元素在父元素中的位置關系。注:padding屬性需要添加在父元素上。padding值是額外加在元素原有大小之上的，如想保證元素大小不變，需從元素寬或髙上減掉后添加的padding屬性&屬性值的4種方式:四個值:上 右 下 左 三個值:上 左右 下二個值:上下 左右一個值:四個方向3）、margin的使用方法外邊距（margin）在border之外，margin區域不應用背景;CSS中margin默認值為0{margin:0 auto;} 在瀏覽器中橫向居中 注意事項:系統會為某些元素設置默認的margin值或者padding值。這對于我們以后尺寸的計算有影響，所以在以后的開發過程中，首先清除掉所有元素的margin和padding值。css首行代碼：*{margin:0;padding:0}相鄰兄弟元素在垂直方向上的margin值會出現融合的情況，融合后會取兩個元素里較大的值作為融合后的值當父級子級元素都設置了margin時，子級的margin值會傳遞到父級。margin傳遞解決辦法:給父級使用overflow:hidden屬性 二、文本溢出1、overflow屬性:定義溢出元素內容區的內容會如何處理語法：{overflow:visible/hidden/scroll/auto/inherit;}說明：visible:默認值，內容不會被修剪，會出現在元素框之外;hidden:內容會被修剪，并且其余內容是不可見的;scroll:內容會被修剪，但是瀏覽器會顯示滾條，以便查看其余的內容;auto:如果內容被修剪，則瀏覽器會顯示滾動條，以便查看其他的內容; inherit:規定應該從父元素繼承overflow屬性的值。2、white-space屬性: 設置如何處理元素內的空白語法:{white-space:normal/pre/nowrap/pre-wrap/pre-line/inherit;}說明：normal:默認。空白會被瀏覽器忽略；pre:空白會被瀏覽器保留nowrap:文本不會換行，文本會在在同一行上繼續，直到遇到<br>標簽為止；pre-wrap:保留空白符序列，但是正常地進行換行；pre-line:合并空白符序列，但是保留換行符；inherit:規定應該從父元素繼承white-space屬性的值。3、text-overflow屬性:規定當文本溢出包含元素時發生的事情語法:{text-overflow:clip/ellipsis;}說明:clip:不顯示省略號，而是簡單的裁切;ellipsis:當對象內文本溢出時，顯示省略標記;要實現溢出時產生省略號的效果還需定義:1）、容器寬度:width:value;(px、%、都可以)2）、強制文本在一行內顯示:white-space：nowrap;3）、溢出內容為隱藏:overflow:hidden;4）、溢出文本顯示省略號:text-overflow:ellipsis第五章、元素類型
一、元素類型 1、元素的類型根據css顯示分類，XHTML元素被分為三種類型:&塊狀元素（block element）1）、塊狀元素在網頁中就是以塊的形式顯示，所謂塊狀就是元素顯示為矩形區域，常用的塊狀元素包括div,dl,dt,dd,ol,ul,fieldset,(h1-h6),p,form,hr,iframe,colgroup,col,table,tr,td等;2）、默認情況下，塊狀元素都會占據一行，通俗地說，兩個相鄰塊狀元素不會出現并列顯示的現象；默認情況下，塊狀元素會按順序自上而下排列。3）、塊狀元素都可以定義自己的寬度和高度。4）、塊狀元素一般都作為其他元素的容器，它可以容納其他內聯元素和其它塊狀元素。我們可以把這種容器比喻為一個盒子。&內聯元素（inline element）（行內元素）1）、常見的內聯元素如:a,span,i,em,strong,b等2）、內聯元素的表現形式是始終以行內逐個進行顯示；3）、內聯元素沒有自己的形狀，不能定義它的寬和髙，它顯示的寬度、高度只能根據所包含內容的高度和寬度來確定，它的最小內容單元也會呈現矩形形狀4）、內聯元素也會遵循盒模型基本規則，如可以定義padding，border，margin，background等屬性，但個別屬性不能正確顯示；&可變元素需要根據上下文關系確定該元素是塊元素或者內聯元素。applet - java appletbutton - 按鈕del - 刪除文本iframe - inline frameins - 插入的文本map - 圖片區塊（map）object - object對象script - 客戶端腳本2、元素類型的轉換display屬性:用于定義建立布局時元素屬性值:none|inline|block|inline-block|list-item|run-in|table|inline-table|table-row-group|table-header-group|table-footer-group|table-row|table-colume-group|table-column|table-cell|table-caption|inherit大部分塊元素display屬性值默認為block，其中列表的默認值為list-item。大部分內聯元素的display屬性值默認為inline，其中img，input，默認為inline-block1）、block說明:類似在元素后面添加換行符，也就是說其他元素不能在其后面并列顯示。特征:當元素設置了float屬性后，就相當于給該元素加了display：block;屬性2）、inline 說明:在元素后面刪除換行符，多個元素可以在一行內并列顯示。特征:內容撐開寬度非獨占一行不支持寬髙代碼換行被解析成空格3）、inline-block (圖片/表單控件)說明:元素的內容以塊狀顯示,行內的其他元素顯示在同一行特征:不設置寬度時,內容撐開寬度非獨占一行支持寬髙代碼換行被解析成空格4）、none說明：此元素不會被顯示特征:隱藏元素并脫離文檔流5）、list-item說明:將元素轉換成列表。li的默認類型。特征:不設置寬度時,寬度撐滿一行獨占一行支持寬髙----------------------------------------------------------------------------&塊級元素（block element）div - 最常用塊級元素dl - 和dt-dd搭配使用的塊級元素form - 交互表單h1-h6 - 大標題hr - 水平分隔線ol - 排序表單p - 段落ul - 非排序列表fieldset - 表單字段集colgroup-col - 表單列分組元素table-tr-td 表格及行-單元格&內聯元素（inline element）a - 錨點br - 換行 em - 強調img - 圖片label - 表格標簽span - 常用內聯容器，定義文本內區塊strong - 粗體強調sub - 下標sup - 上標textarea - 多行文本輸入框u - 下劃線b - 粗體（不推薦）i - 斜體font - 字體設定（不推薦）input - 輸入框第六章、定位錨點
一、元素的定位設置1、position屬性:定義建立元素布局所用的定位機制語法:{position:static/absolute/relative/fixed;}static:默認值。沒有定位，元素出現在正常的流中（忽略top，bottom，left，right或者z-index聲明）。absolute:生成絕對定義的元素，相對于static定位以外的第一個父元素進行定位。元素的位置通過“left”“top”，“right”以及“bottom”屬性進行規定。relative:生成相對定位的元素，相對于其正常位置進行定位。fixed:生成絕對定位的元素，相對于瀏覽器窗口進行定位。元素的位置通過“left”“top”，“right”以及“bottom”屬性進行規定。2）、z-indext屬性:檢索或設置對象的層疊順序 （需加position）語法:{z-index:auto/number;}說明:auto:默認值。遵從其父對象number:無單位的整數值。可為負數較大number值的對象會覆蓋在較小number值的對象之上。如兩個絕對定位對象的此屬性具有同樣的number值，那么將依據它們在HTML文檔中聲明的順序層疊。此屬性僅僅作用于position屬性值為relative或absolute的對象。二、錨點鏈接錨點鏈接:是網頁制作中超級鏈接的一種，又叫命名錨記。命名錨記像一個迅速定位器一樣是一種頁面內的超級鏈接，運用相當普遍。設置錨點鏈接的方法:1、給元素定義命名錨記名語法:<標記 id=“命名錨記名”></標記>2、命名錨記鏈接語法:<a href=“#命名錨記名稱”></a>第七章、圖片整合
一、什么是圖片整合技術（css sprites 或者精靈圖）通過將多個圖片融合到一張圖里面，然后通過CSS background背景定位技術技巧布局網頁背景二、圖片整合的優勢:若干小圖標拼合成一張圖后布局，減少http iis 請求數，對于大戰大流量網站來說隱形優勢很顯然的，從而隱形地 提升了網站性能。對于大流量網站來說本來http請求數比較寶貴，使用DIV+CSS Sprites 這樣可以大大的提高了頁 面的性能，這是CSS Sprites最大的優點，也是其被廣泛傳播和應用的主要原因，同時也減少圖片文件數目。概括來說就是以下這兩點1）、通過圖片整合來減少對服務器的請求次數，從而提高頁面的加載速度2）、通過整合圖片來減少圖片的體積三、CSS Sprites的實現方法:滑動門技術1、什么是滑動門滑動門是一個形象的稱呼，它利用CSS背景圖像可層疊性，并允許彼此之上進行滑動來創造一些特殊動態效果2、滑動門特征通過滑動門技術，可以使CSS設計出來的導航菜單兼具傳統布局的圖像效果，與CSS布局的高效擴展性。第八章、寬髙自適應
網頁布局中經常要定義元素的寬和髙。但很多時候我們希望元素的大小能夠根據窗口或子元素自動調整，這就是自適應。元素自適應在網頁布局中非常重要，它能夠使網頁顯示更靈活，可以適應在不同設備、不同窗口和不同分辨率下顯示1、寬度自適應 元素寬度設置為100%。（塊元素寬度默認為100%）2、元素具備最小高度的自適應 min-height屬性:最小高度;說明:IE6瀏覽器不識別該屬性，height屬性在IE6里就類似min-height作用。 hack1:min-height:value;_heitht:value; hack2:min-height:value;height:auto! important; height:value;min-height max-height min-width max-width3、高度自適應1）、元素高度自適應窗口高度設置方法:html,body{height:100%}需要自適應的元素:height:100%;2）、自適應元素高度:父元素:height:value;需要自適應父元素高度的子元素: height:100%;height:auto,是指根據塊內內容自動調節高度height:100%，是指其相對父塊高度而定義的高度，也就是按照離它最近且有定義高度的父層的高度來定義高度第九章、瀏覽器兼容
CSS Bug: CSS樣式在各瀏覽器中解析不一致的情況，或者說CSS樣式在瀏覽器中不能正確顯示的問題稱為CSS bug.CSS Hack: CSS中，Hack 是指一種兼容CSS在不同瀏覽器中正確顯示的技巧方法，因為它們都屬于個人對CSS代碼的非官方 的修改，或非官方的補丁。有些人更喜歡使用patch（補丁）來描述這種行為。Filter: 表示過濾器的意思，它是一種對特定的瀏覽器或瀏覽器組顯示或隱藏規則或聲明的方法。本質上講，Filter是一 種用來過濾不同瀏覽器的Hack類型一、IE6常見CSS解析Bug及hack1、圖片間隙A）、div中的圖片間隙（該bug出現在IE6及更低版本中）描述:在div中插入圖片時，圖片會將div下方撐大三像素。hack1:將</div>與<img>寫在一行上;hack2:將<img>轉為塊狀元素，給<img>添加聲明:display:block;2、雙向浮向（雙倍邊距）描述:當IE6及更低版本瀏覽器在解析浮動元素時，會錯誤把浮向邊界加倍顯示。hack:給浮動元素添加聲明: _display：inline3、默認高度（IE6） 描述:在IE6及以下版本中，部分塊元素擁有默認高度（低于18px高度）hack1:給元素添加聲明:font-size:0;hack2:給元素添加聲明:overflow:hidden;4、表單元素行髙不一致（IE,MOZ,C,O,S）描述:表單元素行高對齊方式不一致hack:給表單元素添加聲明:float:left;5、按鈕元素默認大小不一描述:各瀏覽器中按鈕元素大小不一致hack1:統一大小/（用a標記模擬）。hack2:在input上寫按鈕的樣式，一定要把input的邊框去掉。hack3:如果這個按鈕是一個圖片，直接把圖片作為按鈕的背景圖即可。6、百分比bug描述:在IE6及以下版本中在解析百分比時，會按四舍五入方式計算從而導致50%加50%大于100%的情況hack:給右面的浮動元素添加聲明:clear:right;7、鼠標指針bug描述:cursor屬性的hand屬性值只有IE瀏覽器識別，其他瀏覽器不識別該聲明，cursor屬性的pointer屬性值IE6.0以上版本及其它內核瀏覽器都識別該聲明。hack:如統一某元素鼠標指針形狀為手型，應添加聲明: cursor:pointer;8、透明屬性IE瀏覽器寫法: filter:alpha(opacity=value);取值范圍1-100兼容其他瀏覽器寫法:opacity:value;(value的取值范圍0-1,0.1,0.2,0.3-----0.9)子元素能夠繼承父元素的透明效果二、過濾器（filter）1、下劃線屬性過濾器當在一個屬性前面增加了一個下劃線后，由于符合標準的瀏覽器不能識別帶有下劃線的屬性而忽略了這個聲明，但是在IE6及更低版本瀏覽器中會繼續解析這個規則。語法:選擇符{_屬性:屬性值;}2、！important關鍵字過濾器它表示所附加的聲明具有最高優先級的意思。但由于IE6及更低版本不能識別它，我們可以利用IE6的這個Bug作為過濾器來兼容IE6和其它標準瀏覽器語法:選擇符{屬性：屬性值！important}3、*屬性過濾器當在一個屬性前面增加了*后，該屬性只能被IE7瀏覽器識別，其它瀏覽器忽略該屬性的作用。語法：選擇符{*屬性：屬性值;}第十章、表格表單高級
一、表單高級屬性表單的組成:表單域：<form name="" method="" action=""></form>表單控件：<input type="text" value=""/>提示信息：1、表單字段集語法: <fieldset></fieldset>說明:相當于一個方框，在字段集中可以包含文本和其他元素。該元素用于對表單中的元素進行分組并在文檔中區別 標出文本。field元素可以嵌套，在其內部可以在設置多個fieldset對象。disable定義空間禁制可用。2、字段級標題語法:<legend></legend>說明:legend元素可以在fieldset對象繪制的方框內插入一個標題。legend元素必須是fielddet內的第一個元素3、提示信息標簽語法:<label for="綁定控件id名"></label>說明:label元素用來定義標簽，為頁面上的其他元素指定提示信息。要將label元素綁定到其他的控件上，可以將label 元素的for屬性設置為與該控件的id屬性值相同。第十一章、HTML5新增標簽
HTML5的特點:語義化標簽語義化標簽就是盡量使用有相對應的結構的含義的Html的標簽1、語法:<header></header> 說明:header元素表示頁面中一個內容區塊或者整個頁面的標題。2、語法:<footer></footer> 說明:footer元素表示整個頁面或者頁面中的一個內容區塊的腳注。一般來說，它會包含創造者的姓名，創作日期以及創造者聯系信息。3、語法:<article></article> 說明:article元素表示頁面中的一塊與上下文不相關的獨立內容，譬如博客中的一篇文章或者報紙中的一篇文章。4、語法:<aside></aside> 說明:aside元素表示acticle元素的內容之外的，與article元素的內容相關的輔助信息5、語法:<section></section> 說明:section元素表示頁面中的一個內容區塊,比如章節、頁眉、頁腳或頁面中的其他重要部分。它可以與h1、h2、h3、h4、h5、h6等元 素結合起來使用，標示文檔結構。6、語法:<nav></nav> 說明:nav元素表示頁面中導航鏈接的部分。7、語法:<figure></figure> 說明: figure元素表示一段獨立的流內容，一般表示文檔主體流內容中的一個獨立單元。使用figcaption元素為figure元素添加標題8、語法:<mark></mark> 說明： mark元素主要用來在視覺上向用戶呈現那些需要突出顯示或高亮顯示的文字。mark元素的一個比較典型的應用就是在搜索結果中向用戶 高亮顯示搜索關鍵詞。第十二章、CSS3選擇器和新增屬性
一、CSS3選擇器1、屬性選擇器語法:E[att]{sRules}說明:用于選取帶有指定屬性的元素語法:E[att="val"]{sRules}說明:用于選取帶有指定屬性和值的元素。語法:E[att~="val"]{sRules}說明:用于選取屬性值中包含指定詞匯的元素。語法:E[att|="val"]{sRules}說明:用于選取帶有以指定值開頭的屬性值的元素，該值必須是整個單詞。語法:E[att^="val"]{sRules}說明:匹配屬性值以指定值開頭的每個元素。語法:E[att$="val"]{sRules}說明:匹配屬性值以指定值結尾的每個元素。語法:E[att*="val"]{sRules}說明:匹配屬性值中包含指定值的每個元素。2、偽類選擇器結構性偽類選擇器1）、語法：:first-child與 :last-child說明：單獨指定第一個子元素和最后一個子元素的樣式。2）、語法：:nth-child（）與 :nth-last-child（）說明：對指定序號的子元素使用樣式。對所有第奇數個子元素或第偶數個子元素使用樣式:nth-child(odd){}//所有正數下第奇數個子元素:nth-child(even){}//所有正數下第偶數個子元素:nth-last-child(odd){}//所有倒數上第奇數個子元素:nth-last-child(even){}//所有倒數上第偶數個子元素3）、語法: :nth-of-type與:nth-last-of-type說明:使用這兩種選擇器時，CSS3在計算子元素是第奇數個子元素還是第偶數個子元素的時候，就只針對同類型的子元素進行計算了。4）、語法：:nth-child(an+b)與nth-last-child(an+b)說明:循環使用樣式，an+b形式，a表示每次循環中共包括幾種樣式，b表示指定的樣式在循環中所處的位置。5）、語法：:only-child說明：只有一個元素的時候使用目標偽類選擇器1）、語法：:target說明：突出顯示活動的HTML錨URL帶有后面跟有錨名稱#，指向文檔內某個具體的元素。這個被鏈接的元素就是目標元素（target element）。:target 選擇器可用于選取當前活動的目標元素。使用該選擇器來對頁面中的某個target元素（該元素的id當做頁面中的超鏈接來使用）指定樣式，該樣式只在用戶點擊了頁面中的超鏈接，并且跳轉到target元素后起作用。3、層級選擇器1）、語法：E>F{sRules}說明：子元素選擇器（Child selectors）只能選擇作為某元素子元素的元素，選擇匹配的F元素，且匹配的F元素為所匹配的E元素的子元素。2）、語法：E+F{sRules}說明：相鄰兄弟選擇器可以選擇緊接在另一元素后的元素，而且他們具有一個相同的父元素，EF兩元素具有一個相同的父元素，而且F元素在E元素后面，而且相鄰。3）、語法：E~F{sRules}說明：用來指定位于同一個父元素之中的某個元素之后的所有其他某個種類的兄弟元素所使用的樣式。二、服務器端字體和iconfont1、服務器端字體語法：@font-face說明：@font-face{font-family:WebFont;src:url("fonts/Fontin_Sans_B_45b.otf")format("opentype");}div{font-family:WebFont;}WebFont用來聲明使用服務端的字體format用來聲明字體文件的格式，可以省略文件格式的聲明而單獨使用src屬性值。字體文件的格式有OpenType與TrueType，前者的屬性值為opentype，后者的屬性值為turetype；前者的文件擴展名為.otf,后者的為.ttf2、iconfont用字體文件取代圖片文件，來展示圖標、特殊字體等元素的方法。三、CSS3新增屬性1、背景屬性1）、語法: background-clip:border-box/padding-box/content-box說明：在CSS3中，可以使用background-clip 來修改背景的顯示范圍，如果將background-clip的屬性值設定為border，則背景范圍包括邊框，如果設定為padding，則不包括邊框。border-box：背景被裁剪到邊框盒padding-box：背景被裁剪到內邊距框content-box：背景被裁剪到內容框2）、語法: background-origin:border-box/padding-box/content-box說明：在繪制背景圖像時，默認是從內部padding區域的左上角開始，但是可以利用background-origin屬性來指定繪制時從邊框的左上角開始，或者從內容的左上角開始。3）、語法：background-size:length/percentage/cover/contain說明：在CSS3中，可以使用background-size屬性來指定背景圖像的大小length：設置背景圖像的高度和寬度。第一個值設置寬度，第二個值設置高度。如果只設置一個值，則第二個值會被設置為“auto”。percentage：以父元素的百分比來設置背景圖像的寬度和高度。cover：把背景圖像擴展至足夠大，以使背景圖像完全覆蓋背景區域。背景圖像的某些部分也許無法顯示在背景定位區域中。contain：把圖像圖像擴展至最大尺寸，以使其寬度和高度完全適應內容區域。在一個元素中添加多張背景圖片4）、語法：div{background-image:url(flower-red.png),url(flower-green.png),url(sky.jpg);background-repeat:no-repeat,repeat-x,no-repeat;background-position:3% 98%,center center,right top;width:300px}說明：第一個定義的背景圖片在最上面的，最后定義的是在最下面的。使用background-repeat和background-position可以單獨指定背景圖像中某個文件的平鋪方式與放置的位置2、邊框屬性1）、語法：border-raidus說明：圓角邊框border-raidus：左上 右上 右下 左下border-raidus：左上右下 右上左下border-top-left-radius：左上角2）、語法：border-image:url("url")A B C D/border-image-width border-image-repeat說明：讓處于隨時變化狀態的元素的長或寬的邊框統一使用一個圖像文件來繪制。第一個參數作為邊框使用圖像的路徑，A B C D表示當瀏覽器自動把邊框所使用到的圖像進行分隔時的上邊距，右邊距，下邊距，左邊距，四個邊距相同時可以縮寫成一個，不需要單位border-img-width：表示邊框的寬度border-image-repeat：表示圖像邊框是否應平鋪（repeat）、鋪滿（round）或拉伸（stretch）3、盒陰影語法：box-shadow:h-shadow v-shadow blur spread color inset說明：讓盒在顯示時產生陰影效果。h-shadow：必需。水平陰影的位置。允許負值。v-shadow：必需。垂直陰影的位置。允許負值。blur：可選。模糊距離。spread：可選。陰影的尺寸。color：可選。陰影的顏色。inset：可選。將外部陰影（outset）改為內部陰影第十三章、2D和3D效果
一、2D效果1、CSS3過渡通過CSS3，我們可以在不使用Flash動畫或JavaScript的情況下，當元素從一種樣式變換為另一種樣式時為元素添加效果。IE 10、Firefox、Chrome以及Opera支持transition屬性。Safari 需要前綴-webkit-。要實現這一點，必須規定兩項內容：規定您希望把效果添加到哪個CSS屬性上規定效果的時長下面列出了所有的轉換屬性：屬性 描述transition 簡寫屬性，用于在一個屬性中設置四個過渡屬性。transition-property 規定應用過渡的CSS屬性的名稱。transition-duration 定義過渡效果花費的時間。默認是0。transition-timing-function 規定過渡效果的時間曲線。默認是“ease”。transition-delay 規定過渡效果何時開始。默認是0。1）、語法：transition-timing-function說明：transition-timing-function屬性規定過渡效果的速度曲線linear：規定以相同速度開始至結束的過渡效果。ease：規定以慢速開始，然后變快，然后慢速結束的過渡效果。ease-in：規定以慢速開始的過渡效果。ease-out：規定以慢速結束的過渡效果。ease-in-out：規定以慢速開始和結束的過渡效果。cubic-bezier（n,n,n,n）：在cubic-bezier函數中定義自己的值。可能的值是0至1之間的數值。2）、語法：transition-delay:time;說明：transition-delay屬性規定過渡效果何時開始。Time：規定在過渡效果開始之前需要等待的時間，以秒或毫秒計。2、2D變形在CSS3中transform主要包括以下幾種：選擇rotate、扭曲skew、縮放scale和移動translate以及矩陣變形matrix。語法：transform：none|rotate|scale|skew|translate|matrix;說明：none：表示不進行變換；可以同時對一個元素進行transform的多種屬性操作，例如rotate、scale、translate三種，但transform中使用多個屬性時卻需要有空格隔開1）、旋轉rotaterotate（）：通過指定的角度參數對原元素指定一個2D rotation（2D旋轉），需先有transform-origin屬性的定義。transform-origin定義的是旋轉的基點，其中angle是指旋轉角度，如果設置的值為正數表示順時針旋轉，如果設置的值為負數，則表示逆時針旋轉。如：transform:rotate（30deg）2）、移動translate移動translate我們分為三種情況：translate（x,y）水平方向和垂直方向同時移動（也就是x軸和y軸同時移動）translateX（x）僅水平方向移動translateY（y）僅垂直方向移動如：transform:translate(100px,20px);3）、縮放scalescale（x,y）使元素水平方向和垂直方向同時縮放（也就是X軸和Y軸同時縮放）scaleX（x） 元素僅水平方向縮放scaleY（y） 元素僅垂直方向縮放中心點就是元素的中心位置，縮放基數為14）、扭曲skew skew（x,y）使元素在水平和垂直方向同時扭曲（X軸和Y軸同時按一定的角度值進行扭曲變形）；skewX（x）僅使元素在水平方向扭曲變形（X軸扭曲變形）skewY（y）僅使元素在垂直方向扭曲變形（Y軸扭曲變形）如：transform:skew(30deg,10deg);5）、改變元素基點transform-origintransform-origin主要作用是在進行transform動作之前可以改變元素的基點位置，因為元素默認基點就是其中心位置。語法：transform-origin:x-axis y-axis;說明：默認點是元素的中心點。其中X和Y的值可以是百分值，em，px，其中X也可以是字符參數值left，center，right；Y和X一樣除了百分值外還可以設置字符值top，center，bottom，這個看上去有點像background-position設置一樣二、3D效果1、3D效果1）、3D位移在CSS3中3D位移主要包括兩種函數translateZ()和translate3d()。translate3d()函數使一個元素在三維空間移動。這種變形的特點是，使用三維向量的坐標定義元素在每個方向移動多少。隨著px的增加，直觀效果上:X：從左向右移動Y：從上向下移動Z：以方框中心為原點，變大2）、3D旋轉rotateX()、rotateY()和rotateZ()隨著px的增加，直觀效果上:X：以方框X軸，從下向上旋轉Y：以方框Y軸，從左向右旋轉Z：以方框中心為原點，順時針旋轉3）、3D縮放scale3d（x,y,z）隨著放大倍數的增加，直觀效果上:X:以方框Y軸，左右變寬Y:以方框X軸，上下變高Z:看不出變化。scaleZ()和scale3d()函數單獨使用時沒有任何效果4）、3D Transsform轉換屬性屬性 描述transform 向元素應用2D或3D轉換 transform-origin 允許你改變被轉換元素的位置transform-style 規定被嵌套元素如何在3D空間中顯示perspective 規定3D元素的透視效果perspective-origin 規定3D元素的底部位置backface-visibility 定義元素在不面對屏幕時是否可見語法：transform-origin：x-axis y-axis z-axis;語法：transform-style:flat|preserve-3d;說明：規定如何在3D空間中呈現被嵌套的元素。flat：子元素將不保留其3D位置preserve-3d：子元素將保留其3D位置perspective:xpx（透視點）x:1200~2000語法：perspective-origin:x-axis y-axis;說明：第一個長度值指定相對于元素的包含框的X軸上的位置。第一個長度值指定相對于元素的包含框的Y軸上的位置。語法：backface-visibility:說明：定義當元素不面向屏幕時是否可見。如果在旋轉元素不希望看到其背面時，該屬性很有用visible：為backface-visibility的默認值，表示反面可見hidden：表示反面不可見2、CSS3動畫第一種叫過渡（transition）動畫，就是從初始狀態過渡到結束狀態這個過程中所產生的動畫。css過渡只能定義首和尾兩個狀態，所有是最簡單的一種動畫。第二種叫關鍵幀（keyframes）動畫。不同于第一種的過渡動畫只能定義首尾兩個狀態，關鍵幀動畫可以定義多個狀態，或者用關鍵幀來說的話，過渡動畫只能定義第一幀和最后一幀這兩個關鍵幀，而關鍵幀動畫則可以定義任意多的關鍵幀，因而能實現更復雜的動畫效果。語法：@keyframes animationname{keyframes-selector{css-styles;}}說明：animationname（聲明動畫的名稱）keyframes-selector：用來劃分動畫的時長，可以使用百分比形式，也可以使用“from”和“to”的形式。“from”和“to”的形式等價于0%和100%。建議始終使用百分比形式。@keyframes 規則和所有動畫屬性屬性 描述animation 所有動畫屬性的簡寫屬性，除了animation-play-state屬性。animation-name 規定@keyframes動畫的名稱。animation-duration 規定動畫完成一個周期所花費的秒或毫秒。默認是0。animation-timing-function 規定動畫的速度曲線。animation-delay 規定動畫何時開始。默認是0。animation-iteration-count 規定動畫被播放的次數。默認是1。infinite：無限次播放語法：animation-direction：normal|alternate;說明：animation-direction屬性定義是否應該輪流反向播放動畫。normal：默認值alternate：動畫應該輪流反向播放語法：animation-play-state：paused|running;說明：animation-play-state屬性規定動畫正在運行還是暫停。注釋：您可以在JavaScript中使用該屬性，這樣就能在播放過程中暫停動畫。paused：規定動畫已暫停。running：規定動畫正在播放。第十四章、彈性盒和媒體查詢
一、彈性盒 彈性盒子是CSS3的一種新的布局模式。CSS3彈性盒（Flexible Box或flexbox），是一種當頁面需要適應不同的屏幕大小以及設備類型時確保元素擁有恰當的行為的布局方式。引入彈性盒布局模型的目的是提供一種更加有效的方式來對一個容器中的子元素進行排列、對齊和分配空白空間。彈性盒子由彈性容器（Flex container）和彈性子元素（Flex item）組成。彈性容器通過設置display屬性的值為flex將其定義為彈性容器。彈性容器內包含了一個或多個彈性子元素。主軸（main axis）：伸縮容器的主軸，伸縮項目主要沿著這條軸進行排列布局。主軸不一定水平；這主要取決與“justify-content”屬性（詳細見下文）。主軸起點（main-start）和主軸終點（main-end）：伸縮項目放置在伸縮容器內從主軸起點（main-start）和主軸終點（main-end）方向。主軸尺寸（main size）：伸縮項目在主軸方向的寬度或高度就是主軸的尺寸。伸縮項目主要的大小屬性要么是寬度，要么是高度屬性，由哪一個對著主軸方向決定。側軸（cross axis）：垂直于主軸稱為側軸。側軸起點（cross-start）和主軸終點（cross-end）：伸縮行的配置從容器的側軸起點邊開始，往側軸終點邊結束。側軸尺寸（cross size）：伸縮項目在側軸方向的寬度或高度就是項目的側軸長度，伸縮項目的側軸長度屬性是[width]或[height]屬性，由哪一個對著側軸方向決定以下屬性設在容器上：displayflex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-content以下子屬性設在內部元素上：flex-growflex-shrinkflex-basisflexorderalign-self1、語法:display:flex|inline-flex;說明：彈性容器通過設置display屬性的值為flex或inline-flex將其定義為彈性容器flex：將對象作為彈性伸縮盒顯示。inline-flex：將對象作為內聯塊級彈性伸縮盒顯示。2、語法：flex-direction:row|row-reverse|column|column-reverse;說明：設置伸縮盒主軸的起點和終點位置，子元素依然按照從主軸起點向終點方向排列row：默認位置，主軸橫向，起點在左側，終點在右側。row-reverse：主軸橫向反轉，起點在右側，終點在左側。column：主軸縱向，起點在上方，終點在下方。column-reverse：主軸縱向反轉，起點在下方，終點在上方。3、語法：flex-wrap:nowrap|wrap|wrap-reverse;說明：設置或檢索伸縮盒對象的子元素超出父容器時是否換行。nowrap：當子元素溢出父容器時不換行。wrap：當子元素溢出父容器時自動換行。wrap-reverse：反轉wrap排列。4、語法：justify-content:flex-start|flex-end|center|space-between|space-around;說明：設置或檢索彈性盒子元素在主軸方向上的對齊方式。當彈性盒里一行上的所有子元素都不能伸縮或已經達到其最大值時，這一屬性可協助對多余的空間進行分配。當元素溢出某行時，這一屬性同樣會在對齊上進行控制。flex-start：彈性盒子元素將向行起始位置對齊。flex-end：彈性盒子元素將向行結束位置對齊。center：彈性盒子元素將向行中間位置對齊。space-between：彈性盒子元素會平均地分布在行里。space-around：彈性盒子元素會平均地分布在行里，兩端保留子元素與子元素之間間距大小的一半5、語法：align-items:flex-start|flex-end|center|baseline|stretch;說明：設置或檢索彈性盒子元素在側軸方向上的對齊方式。baseline：將文字對齊；stretch：如果未設置寬髙，那么將元素默認拉伸為父元素高度。6、語法：align-content:flex-start|flex-end|center|space-between|space-around|stretch;說明：用于修改flex-wrap屬性的行為。類似與justify-content，但它不是設置彈性子元素的對齊，而是設置各個行的對齊。stretch：各行將會伸展以占用剩余的空間。子元素屬性 7、語法：flex-grow：<number>(default 0);說明：設置或檢索彈性盒的擴展比率。根據彈性盒子元素所設置的擴展因子作為比率來分配剩余空間。<number>:用數值來定義擴展比率。不允許負值flex-grow的默認值為0，如果沒有顯示定義該屬性，是不會擁有分配剩余空間權利的8、語法：flex-shrink:<number>(default 1);說明：設置或檢索彈性盒的收縮比率。flex-shrink的默認值為1，如果沒有顯示定義該屬性，將會自動按照默認值1在所有因子相加之后計算比率來進行空間收縮。9、語法：flex-basis:<length>|auto(default auto);說明：設置或檢索彈性盒伸縮基準值auto：無特定寬度值，取決于其它屬性值<length>：用長度值來定義寬度。不允許負值<percentage>：用百分比來定義寬度。不允許負值10、語法：flex:none|[flex-grow]||[flex-shrink]||[flex-basis];說明：復合屬性。設置或檢索伸縮盒對象的子元素如何分配空間。常用：flex:1;11、語法：order:<integer>;說明：設置或檢索彈性盒模型對象的子元素出現的順序。<integer>：用整數值來定義排列順序，數值小的排在前面。可以為負值。默認值：0;12、語法：align-self:auto|flex-start|flex-end|center|baseline|stretch;說明：用于設置彈性元素自身在側軸方向上的對齊方式。二、媒體查詢媒體查詢可以讓我們根據設備顯示器的特征（如視口寬度、屏幕比例、設備方向:橫向或縱向）為其設定CSS樣式，媒體查詢由媒體類型 和一個或多個檢測媒體特性的條件表達式組成。媒體查詢中可用于檢測的媒體特征有width、height和color（等）。使用媒體查詢，可以在不改變頁面內容的情況下，為特定的一些輸出設備定制顯示效果。語法一： @media mediatype and|not|only(media feature){CSS-Code; }語法二： 針對不同的媒體使用不同stylesheets <link rel="stylesheets" media="mediatype and|not|only(media feature)" href="mystylesheet.css">第十五章、移動端布局
一、百分比（彈性）布局的原理及應用二、rem（等比縮放）布局的原理及應用px為單位em為單位 能夠解決在瀏覽器中放大或縮放瀏覽頁面時會存在一個問題rem是什么？rem（font size of the root element）是指相對與根元素的字體大小的單位。簡單的說它就是一個相對單位。看到rem大家一定會想起em單位，em（font size of element）是指相對于父元素的字體大小的單位。它們之間其實很相似，只不過一個計算的規則是依賴根元素一個是依賴父元素計算。rem能等比例適配所有屏幕rem是通過根元素進行適配的，總結
以上是生活随笔為你收集整理的HTML5和CSS3核心笔记的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 想要30一朵花，这样做
- 下一篇： 史上最全最新前端面试题（不定期更新，有问