1.HTML+CSS基礎學習筆記1（前端零基礎入門小tips）

html中標籤的知識點總結

<head>是頭標籤裏面的東西不會在網頁裏顯示,它是用來幫助瀏覽器解析頁面。
html中的註釋，不會在網頁中顯示，只會在源碼中顯示。
<title>網頁的標題，默認顯示在瀏覽器標題欄中，搜索引擎在檢索頁面時會首先檢索title
<body>標籤用來設置網頁的主體內容（網頁可見的內容）。
經過屬性能夠設置標籤中的內容，在開始標籤中添加屬性，實際上就是一個名值對的結構（屬性名=「屬性值」）。
一個標籤中可使用多個屬性，每一個屬性之間必須用空格隔開。
<font>標籤中的size屬性最大就是7。
在html中元素就是標籤，兩者等價。
<meta>標籤用來設置網頁的一些元數據，好比網頁的字符集，關鍵字，簡介。 <meta>是一個自結束標籤，編寫一個自結束標籤時，能夠在開始標籤中添加一個/,(<meta/>)。<meta>標籤設置網頁的關鍵字 name=「keywords」 content=「能夠設置多個關鍵字，用逗號隔開」，<meta>標籤設置網頁的描述，name=「description」 content="描述詞" 搜索引擎在檢索頁面時，會同時檢索頁面中的關鍵詞和描述，到那時這兩個值不會影響頁面在搜索引擎中的排名。使用<meta>標籤能夠用來作請求的重定向<meta http-equiv="refresh" content="秒數;url=目標路徑">。
在HTML中，一共有六級標題標籤<h1>~<h6>,顯示效果從大到小。
使用html標籤時，關心的是標籤的語義，咱們使用的標籤都是語義化標籤，6級標題中，<h1>最重要，表示一個網頁中的主要內容，<h2>~<h6>重要性依次下降，對於搜索引擎檢索完<title>，會當即查看<h1>中的內容，會影響到頁面在搜索引擎中的排名，頁面只能寫一個<h1>。
段落標籤用於標示內容中的一個天然段，使用<p></p>,<p>標籤中的文字，默認會獨佔一行，而且段與段之間會有一個間距。
在頁面中可使用<br>標籤來表示一個換行，<br>標籤是一個自結束標籤<br/>。
<hr>標籤是一個自結束標籤，生成一條水平線<hr/>
圖片標籤<img>是一個自結束標籤，屬性src：設置一個外部圖片的路徑 alt：能夠設置在圖片不能顯示時的描述，搜索引擎能夠經過alt屬性來識別不一樣的圖片，若是不寫alt屬性，則搜索引擎不會對<img>標籤中的圖片進行收錄。
使用內聯框架能夠引入一個外部的頁面，使用<iframe>標籤來建立一個內聯框架。<iframe>的屬性：src：指向一個外部頁面的路徑，可使用相對路徑 name：能夠爲內聯框架指定一個name屬性。(在現實開發中不推薦使用內聯框架，由於內聯框架中的內容不會被搜索引擎檢索。)
使用超連接可讓咱們從一個頁面跳轉到另外一個頁面，使用<a>標籤來建立一個超連接。超連接<a>標籤的屬性： href：指向連接跳轉的目標地址，能夠寫一個相對路徑也能夠寫一個完整的地址。 target：能夠用來置頂打開連接的位置可選值：（1）_self：表示在當前窗口中打開（默認值）。（2）_blank:在新的窗口中打開連接。（3）能夠設置一個內聯框架的name屬性值，連接將會在指定的內聯框架中打開。
建立超連接時，若是地址不肯定能夠直接寫一個#做爲佔位符。若是將連接地址設置爲#，則點擊超連接之後，會自動跳轉到當前頁面的頂部。
<center>標籤中的內容會默認在頁面中居中顯示。（不推薦使用）
在HTML中有一個屬性，每個元素均可以設置，該屬性能夠做爲標籤的惟一標識。id屬性在同一個頁面中只能有一個不能重複。
發送電子郵件的超連接，點擊連接之後能夠自動打開計算機中默認的郵件客戶端。href=「mailto:郵件地址」 當點擊這個超連接時，會默認打開計算機的默認電子郵件客戶端，而且將收件人設置mailto後的郵件地址。
<div>這個標籤沒有任何語義，就是一個塊元素，不會爲裏面的元素設置任何的樣式，主要是爲頁面進行佈局的，塊元素是會獨佔一行的元素，不管內容有多少，都會獨佔一整行。相似還有<p>標籤，<h1>等等。
<span>標籤是個內聯元素（行內元素），沒有任何語義，專門來選中文字，而後爲文字設置樣式，行內元素指的是隻佔自身大小的元素，不會佔用一整行。相似<a>，<img>，<iframe>。
塊元素主要用來作頁面中的佈局，內聯元素主要用來選中文本設置樣式，通常狀況下只使用塊元素去包含內聯元素，而不會使用內聯元素去包含一個塊元素。<a>元素能夠包含任意的元素，除了它自己,<p>元素不能夠包含任何其餘的塊元素。
嚴格來講在HTML5中沒有塊元素和內聯元素的概念。
<em>標籤用於表示一段內容中的着重點。<strong>標籤用於表示一個內容的重要性。這兩個標籤能夠單獨使用，也能夠一塊兒使用。一般em顯示爲斜體，而strong顯示爲粗體。<em>和<strong>這兩個標籤表示一個強調的內容。em主要表示語氣上的強調。strong 表示一個強調的內容，比em更強烈。
<i>標籤中的內容會以斜體顯示。<b>標籤中的內容會以加粗顯示。html5規範中規定，對於不須要着重的內容而是單純的加粗或者是斜體。就可使用<b>和<i>標籤。
<small>標籤中的內容會比他的父元素中的文字要小一些，在Html5中使用<small>標籤來表示一些細則一類的內容，好比：合同中小字，網站的版權聲明均可以放到<small>標籤中。
網頁中全部的加書名號的內容均可以使用<cite>標籤，表示參考的內容。好比：書名，歌名，話劇名。
<q>標籤表示一個短的引用（行內引用）<q>標籤引用的內容，瀏覽器會默認加上引號。
<blockquote>標籤表示一個長引用（塊級引用）獨佔一行。
使用<sup>標籤來設置一個上標，<sub>標籤用來表示一個下標。
使用<del>標籤來表示一個刪除的內容，<del>標籤中的內容會自動添加刪除線。
<ins>標籤表示一個插入的內容。<ins>標籤中的內容會自動添加下劃線。
須要頁面中更直接編寫一些代碼，<pre>是一個預格式標籤，會將代碼中的格式保存，不會忽略多個空格，<code>專門用來表示代碼，通常結合使用<pre>和<code>來表示一段代碼。
使用<input>標籤能夠建立一個文本輸入框。
title屬性能夠給任何標籤指定，當鼠標移入到元素上時，元素中的title屬性的值將會做爲提示文字顯示。

元素之間的關係

父元素：直接包含子元素的元素。
子元素：直接被父元素包含的元素。
祖先元素：直接或間接包含後代元素的元素。
後代元素：直接或間接被祖先元素包含的元素，子元素也是後代元素。
兄弟元素：擁有相同父元素的元素叫作兄弟元素。
子元素默認是存在於父元素的內容區中，理論上講子元素的最大能夠等於內容區大小，若是子元素大小超過了父元素的內容區，則超過的大小會在父元素之外的位置顯示，超出父元素的內容，咱們稱爲溢出內容。父元素默認是將溢出內容，在父元素外邊顯示。經過overflow能夠設置父元素如何處理溢出內容，可選值：visible(默認值)，不會對溢出內容作處理，元素會在父元素意外的位置顯示。hidden：溢出的內容會被修剪，不會顯示。scroll：會爲父元素添加滾動條，經過拖動滾動條來查看完整內容，該屬性不論內容是否溢出，都會添加水平和垂直雙方向的滾動條。auto：會根據需求自動添加滾動條（須要水平就添加水平滾動條，須要垂直就添加垂直滾動條，都不須要就都不加，都須要就都加）

html中的文檔聲明解釋

爲了讓瀏覽器識別HTML版本，須要在網頁的最上邊添加一個doctype聲明，來告訴瀏覽器網頁的版本，不寫文檔聲明會致使有些瀏覽器進入一個怪異模式，進入怪異模式之後，瀏覽器加載頁面會致使頁面沒法正常顯示。
<!doctype html>是html5的文檔聲明。通常來講用html5的文檔聲明，簡潔好記，同時也是主流版本，其餘版本的文檔聲明比較長，用的也比較少，這裏不一一贅述，感興趣能夠自行查找。

字符集知識點

網頁產生亂碼的根本緣由是編碼和解碼採用的字符集不一樣，編碼時須要告訴瀏覽器，網頁採用的編碼字符集。
常見的字符集ASCII(美國),ISO-8859-1（歐洲）,GBK,GB2312（中國）,UTF-8（萬國碼）,ANSI(自動以系統的默認編碼保存文件)。
在中文系統的瀏覽器中，默認都是使用GB2312進行解碼的。
通常網頁的字符集採用UTF-8，<meta charset="UTF-8"/>
在html中，字符之間寫再多的空格，瀏覽器也會當成一個空格解析。

html中實體的知識點

在html中，一些如<>這種特殊字符是不能直接使用的，須要使用一些特殊的符號來表示這些特殊字符，這些特殊符號成爲實體（轉義字符串）
實體的語法： &實體的名字； < &lt; > &gt; 空格 &nbsp；版權符號 &copy；瀏覽器解析到實體時會自動將實體轉換爲其對應的字符。

html中的列表知識點

列表至關於去超市購物時的購物清單，在html中也能夠建立列表，在網頁中一共有三種列表：

無序列表：使用<ul>標籤來建立一個無序列表，使用<li>標籤在<ul>標籤中建立一個一個的列表項，一個<li>標籤就是一個列表項。經過type屬性能夠修改無序列表的項目符號可選值：disc（默認值）實心的圓點。square,實心的方塊。(<ul>和<li>都是塊元素)
有序列表：有序列表和無序列表相似，只不過它使用<ol>標籤來代替<ul>標籤，有序列表使用有序的序號做爲項目符號。type屬性能夠指定序號的類型，可選值 1，默認值，使用阿拉伯數字。 a/A採用小寫或者大寫做爲符號。i/I採用小寫或大寫的羅馬數字做爲序號。（<ol>也是塊元素）
定義列表：定義列表用來對一些詞彙或內容進行定義。使用<dl>標籤來建立一個定義列表，<dl>標籤中有兩個子標籤，<dt>標籤：被定義的內容。<dd>標籤：對定義內容的描述。一樣<dl>和<ul>和<ol>之間均可以互相嵌套。

列表之間都是能夠互相嵌套，能夠在無序列表中放個有序列表，也能夠在有序列表中放一個無序列表。

html中表格知識點

在html中，使用<table>標籤來建立一個表格。在<table>標籤中使用<tr>標籤來表示表格中的一行，有幾行就有幾個<tr>標籤，在<tr>標籤中須要使用<td>標籤來建立一個單元格，有幾個單元格就有幾個<td>標籤。
<table>標籤中有align屬性，設置成center表示表格居中。colspan屬性表示橫向的合併單元格，rowspan屬性用來設置縱向設置單元格。語法：colspan(rowspan)=「合併的單元格數」

html中文檔流的知識點

文檔流：處在網頁的最底層，它表示的是一個頁面中的位置，咱們所建立的元素都處在文檔流裏。
元素在文檔流中的特色：
1. 塊元素：塊元素在文檔流中獨佔一行，塊元素會自上向下排列。塊元素在文檔流中默認寬度是父元素的100%，寬度值是auto。塊元素在文檔流中的高度默認被內容撐開。
2. 內聯元素：內聯元素在文檔流中只佔自身的大小，會默認從左向右排列。若是一行中不足以容納全部的內聯元素，則換到下一行繼續自左向右。在文檔流中，內聯元素的寬度和高度默認都被內容撐開。
塊元素在文檔流中默認垂直排列，自上至下。若是但願塊元素在頁面中水平排列，能夠是塊元素脫離文檔流，使用float來使元素浮動，從而脫離文檔流。可選值：none(默認值)，元素默認在文檔流種排列。left：元素會當即脫離文檔流，向頁面的左側浮動。right：元素會當即脫離文檔流，向頁面的右側浮動。當爲一個元素設置浮動之後（float屬性是一個非none的值）元素會當即脫離文檔流，元素脫離文檔流之後，它下邊的元素會當即向上移動，元素浮動之後，會盡可能向頁面的左上或右上漂浮，直到遇到父元素的邊框或者其餘浮動元素。若是浮動元素上邊是一個沒有浮動的塊元素，則浮動元素不會超過塊元素。浮動的元素不會超過它上邊的兄弟元素，最多最多一邊齊。
浮動的元素不會蓋住文字，文字會自動環繞在浮動元素的周圍，因此能夠經過浮動來設置文字環繞圖片的效果。
在文檔流中，子元素的寬度默認佔父元素的所有。當元素設置浮動之後，會徹底脫離文檔流。塊元素脫離文檔流之後，高度和寬度都被內容撐開。
內聯元素脫離文檔流之後會變成塊元素。

CSS中屬性的知識點

css樣式的使用:
- 能夠編寫到元素的style屬性當中，給誰設置就寫在哪裏，將樣式直接編寫到style屬性中，這種樣式稱爲內聯樣式，內聯樣式只對當前的元素中的內容起做用，內聯樣式不方便複用，內聯樣式屬於結構與表現耦合，不方便後期的維護，不推薦使用。style中每一個樣式寫完了要用分號分開。
- 能夠將css樣式編寫到head中的style標籤裏，將樣式表編寫的style標籤中，而後經過css選擇器選中指定元素。而後能夠同時爲這些元素一塊兒設置樣式，這樣可使樣式進一步複用。將樣式表編寫到style標籤中，也可使表現和結構進一步分離，是推薦的使用方式。style中養成寫type="text/css"用來兼容老版本的瀏覽器。<style>標籤裏是css代碼，不能出現HTML中的內容，包括HTML的註釋。
- 能夠將樣式表編寫到外部的css文件中，而後經過<link>標籤來將外部的css文件引入到當前頁面中，這樣外部文件中的css樣式表會應用到當前頁面中。語法：<link rel=「stylesheet」 type="text/css" href="外部文件相對路徑">將css樣式統一編寫到外部的樣式表中，徹底使結構和表現分離，可使樣式表能夠在不一樣的頁面中使用，最大限度的使樣式能夠進行復用，將樣式統一寫在樣式表中，而後經過<link>標籤引入，能夠利用瀏覽器的緩存加快用戶訪問的速度提升了用戶體驗，因此在開發中最推薦使用的是外部的css文件。
color設置顏色，font-size設置字體大小。
width：能夠用來修改圖片的寬度，height：能夠用來修改圖片的高度，通常使用px做爲單位。當寬度和高度兩個屬性若是隻設置一個，另外一個也會同時等比例調整大小。
當元素的width和height的值爲auto時，此時指定padding不會影響可見框的大小。而是會自動修改寬度，以適應padding。
css的註釋做用和HTML註釋相似，必須編寫在<style>標籤中，或者是css文件中。/* */
在css中，祖先元素上的樣式，也會被他的後代元素所繼承。利用繼承能夠將一些基本的樣式設置給祖先元素，這樣全部的後代元素將會自動繼承這些樣式。可是並非全部的樣式都會被子元素所繼承，好比：背景相關的樣式都不會被繼承，邊框相關的樣式，定位相關的。
去掉項目符號 ul{list-style：none；}。
默認的項目符號咱們通常不使用，若是設置項目符號，則能夠採用爲<li>標籤設置背景圖片的方式來設置。
超連接會默認添加下劃線，也就是超連接的text-decoration的默認值是underline，若是須要去除超連接的下劃線則須要將該樣式設置爲none。
letter-spacing能夠指定字符間距。
word-spacing能夠設置單詞之間的距離。實際上就是設置詞與詞之間空格的大小。
經過display屬性能夠修改元素的類型，可選值： inline：能夠將一個元素做爲內聯元素顯示。block：能夠將一個元素設置成塊元素顯示。inline-block：將一個元素轉換爲行內塊元素。（行內塊元素可使一個元素既有行內元素的特色，又有塊元素的特色，便可以設置寬高，又不會獨佔一行）none：不顯示元素，而且元素不會在頁面中繼續佔有位置。（使用該方式隱藏的元素，不會在頁面中顯示，而且再也不佔據頁面的位置)。
visibility:能夠用來設置元素的隱藏和顯示的狀態，可選值：visible （默認值），元素默認會在頁面顯示。hidden：元素會隱藏不顯示。使用visibility：hidden隱藏的元素雖然不會在頁面中顯示，可是它的位置會依然保持。
當元素的寬度是auto時，padding會自動調整寬度的大小來適應父元素，確保子元素不會溢出父元素。（會主動往裏擠）
經過z-index屬性能夠用來設置元素的層級。能夠爲z-index指定一個正整數做爲值，該值將會做爲當前元素的層級。層級越高，越優先顯示。對於沒有開啓定位的元素不能使用z-index。父元素的層級再高，也不會蓋住子元素。
設置元素的透明背景 opacity能夠用來設置元素背景的透明，它須要一個0-1之間的值。0表示徹底透明，1表示徹底不透明，0.5表示半透明。opacity屬性在IE8及如下的瀏覽器中不支持，IE8及如下的瀏覽器須要使用以下屬性代替，filter：alpha(opacity=透明度)，透明度須要一個0-100之間的值，0表示徹底透明，100表示徹底不透明，50表示半透明。這種方式支持IE6，可是這種效果在IE Tester中沒法測試。
在<body>標籤的最後引入外部的js文件。

1.<cursor>標籤能夠用來設置鼠標指針的樣式。css

在項目測試時，能夠壓縮css代碼和圖片整合提高網頁訪問速度。

css中字體知識點

color是前景色（字體顏色），font-size（設置文字大小，瀏覽器中默認的文字大小爲16px）設置的並非文字自己的大小，在頁面中，每一個文字都是處在一個看不見的框中的，咱們設置的font-size其實是設置格的高度，並非字體的大小，通常狀況下文字都要比格要小一些，有時也會比格大，根據字體的不一樣，顯示效果也不一樣。html
font-family能夠指定文字的字體，當採用某種字體時，若是瀏覽器支持則使用該字體，若是字體不支持，則使用默認字體。該樣式能夠同時指定多個字體，多個字體之間使用逗號分開，當採用多個字體時，瀏覽器會優先使用前邊的字體，若是前邊沒有在嘗試下一個。html5
瀏覽器使用的字體默認就是計算機中的字體，若是計算機中有，則使用，若是沒有就不用。在開發中，若是字體太奇怪，用的太少了，儘可能不用使用，有可能用戶的電腦沒有，就不能達到想要的效果。chrome
字體的分類，在網頁中將字體分爲5大類，能夠將字體設置爲這些大的分類。當設置爲大的分類之後，瀏覽器會自動選擇指定的字體並應用樣式，通常會將字體的大分類指定爲font-family中的最後一個字體（通常用serif和sans-serif）。serif（襯線字體），sans-serif(非襯線字體)，monospace（等寬字體）程序語言通常都是等寬字體，cursive（草書字體），fantasy（虛幻字體）api
font-style能夠用來設置文字的斜體，可選值：normal，默認值，文字正常顯示。 italic 文字會以斜體顯示。oblique 文字會以傾斜的效果顯示。大部分瀏覽器都不會對傾斜和斜體做區分。也就是說設置italic和oblique的效果每每是同樣的，通常只會使用italic。瀏覽器
font-weight能夠用來設置文本加粗的效果，可選值：normal，默認值，文字正常顯示。bold，文字加粗顯示。該樣式也能夠指定100-900之間的9個值，可是因爲用戶的計算機每每沒有這麼多級別的字體，因此不能達到咱們想要的效果。也就是200有可能比100粗，300有可能比200粗，可是也多是同樣的。緩存
font-variant能夠用來設置小型大寫字母，可選值：normal，默認值，文字正常顯示。small-caps文本以小型大寫字母顯示。小型大寫字母：將全部的字母都以大寫形式顯示，可是小寫字母的大寫，要比大寫字母的大小小一些。服務器
在css中還爲咱們提供了一個樣式叫font，使用該樣式能夠同時設置字體相關的全部樣式。能夠將字體的樣式的值統一寫在font樣式中，不一樣的值之間使用空格隔開。使用font設置字體樣式時，斜體，加粗，小大字母，沒有順序要求，甚至能夠不寫，若是不寫則使用默認值。可是要求文字的大小和字體必須寫。並且字體必須是最後一個樣式，大小必須是倒數第二個樣式。實際上使用簡寫屬性也會有一個比較好的性能。markdown
在chrome瀏覽器中字體最小支持到12px，1-11都顯示爲12px。框架

css中文本知識點

在css中並無爲咱們提供一個直接設置行間距的方式，咱們只能經過設置行高來間接的設置行間距，行高越大行間距越大，使用line-height來設置行高。行高相似於單線本，線與線之間的距離就是行高，網頁中的文字也是寫在一個看不見的行中的，而文字會默認在行高中垂直居中顯示。行間距=行高-字體大小。經過設置line-height能夠間接的設置行高，能夠接收的值：1.直接接收一個大小，2.能夠指定一個百分數，則會相對於字體去計算行高。3.能夠直接傳一個數值，則行高會設置爲字體大小相應的倍數。
對於單行文原本說，能夠將行高設置爲和父元素的高度一致，這樣可使單行文本在父元素中垂直居中。
在font中也能夠指定行高，在字體大小後能夠添加/行高，來指定行高，該值是可選的，若是不指定則會使用默認值。
text-transform能夠用來設置文本的大小寫，可選值：none（默認值），該怎麼顯示就怎麼顯示不作任何處理。 capitalize 單詞的首字母大寫，經過空格來識別單詞。uppercase 全部的字母都大寫。lowercase 全部的字母都小寫。
text-decoration能夠用來設置文本的修飾，可選值：none（默認值），不添加任何修飾，正常顯示。underline爲文本添加下劃線。overline爲文本添加上劃線。line-through爲文本添加刪除線。
text-align用於設置文本的對齊方式，可選值：left(默認值)，文本靠左對齊。right文本靠右對齊。center文本居中對齊。justify兩端對齊，經過調整文本之間的空格大小來達到一個兩端對齊的目的。
text-indent用來設置首行縮進。當給它指定一個正值時，會自動向右側縮進指定的像素。若是爲它指定一個負值，則會向左移動指定的像素。經過這種方式能夠將一些不想顯示的文字隱藏起來。這個值通常都會使用em做爲單位。
設置文本域不能調整大小。(resize:none)
在文本框或文本域中能夠經過<placeholder>標籤來指定提示文字（水印），這個屬性在IE8及如下的瀏覽器中不支持，若是要兼容IE8須要使用js。

背景圖片的知識點

使用background-image來設置背景圖片，語法：background-image：url(相對路徑)。若是背景圖片大於元素，默認會顯示圖片的左上角。若是背景圖片和元素同樣大，則會將背景圖片所有顯示。相對路徑寫在哪就相對於哪一個文件夾。若是背景圖片小於元素大小，則會默認將背景圖片平鋪以充滿元素。能夠同時爲一個元素指定背景顏色和背景圖片，這樣背景顏色將會做爲背景圖片的底色。通常狀況下設置背景圖片時都會同時設置一個背景顏色。
background-repeat用於設置背景圖片的重複方式，可選值：repeat(默認值)，背景圖片會雙方向重複（平鋪）。no-repeat，背景圖片不會重複，有多大就顯示多大。repeat-x：背景圖片沿水平方向重複。repeat-y：背景圖片沿垂直方向重複。
背景圖片默認是貼着元素的左上角顯示，經過background-position能夠調整背景圖片在元素中的位置，可選值：該屬性可使用top，right,left,bottom,center中的兩個值來指定一個背景圖片的位置。也能夠直接指定兩個偏移量，第一個值是水平偏移量（若是指定的是一個正值，則圖片會向右移一指定的像素，若是指定的是一個負值，則圖片會向左移指定的像素），第二個值是垂直偏移量（若是指定的是一個正值，則圖片會向下移一指定的像素，若是指定的是一個負值，則圖片會向上移指定的像素）。
background-attachment用來設置背景圖片是否隨頁面一塊兒滾動。可選值：scroll默認值，背景圖片隨着窗口滾動。fixed：背景圖片會固定在某一位置，不隨頁面滾動。當背景圖片的background-attachment設置爲fixed，背景圖片的定位永遠相對於瀏覽器的窗口。不隨窗口滾動的圖片，通常都是設置給body，而不設置給其餘元素。
background經過該屬性能夠同時設置全部背景相關的樣式，沒有順序的要求，誰在前誰在後都行，也沒有數量的要求，不寫的樣式就使用默認值。

css中顏色知識點

顏色單位：在css中能夠直接使用顏色的單詞來表示不一樣的顏色。也可使用RGB值來表示不一樣的顏色，所謂的RGB值指的是經過三元色，經過這三種顏色的不一樣的濃度，來表示出不一樣的顏色。例子：rgb（紅色的濃度，綠色的濃度，藍色的濃度）；顏色的濃度須要一個0-255之間的值，255表示最大，0表示沒有，濃度也能夠採用一個百分數來設置，須要一個0%-100%之間的數字。使用百分數最終也會轉換爲0-255之間的數。
可使用十六進制的rgb值來表示顏色，使用三組兩位的十六進制數字，每組表示一個顏色，第一組表示紅色的濃度，第二組表示綠色的濃度，第三組表示一個藍色的濃度，範圍都是00~ff。語法： #紅色綠色藍色 ，00表示沒有，至關於rgb中的0，ff表示最大，至關於rgb中的255 例如紅色#ff0000，綠色#00ff00，藍色#0000ff；像這種兩位重複的顏色能夠簡寫好比#ff0000能夠寫成#f00，#aabbcc能夠寫成#abc

css中長度單位知識點

像素px，像素是在網頁中使用的最多的一個單位，一個像素就至關於屏幕中的一個小點，屏幕實際上就是由這些像素點構成的。可是這些像素點是不能直接看見。不一樣的顯示器一個像素的大小也不相同，顯示效果越好越清晰，像素就越小，反之像素越大。
百分比% 也能夠將單位設置爲一個百分比的形式，這樣瀏覽器將會根據其父元素的樣式來計算該值。使用百分比的好處是，當父元素的屬性值發生變化時，子元素也會按照比例發生改變，在咱們建立一個自適應的頁面時，常用百分比做爲單位。
em 和百分比相似，它是相對於當前元素的字體大小來計算的，1em=1font-size,使用em時，當字體大小發生改變時，em也會隨之改變，當設置字體相關的樣式時，常常會使用em。

css中的選擇器與聲明塊

css的語法:主要是選擇器和聲明塊。
css選擇器：能夠選中頁面中指定的元素。而且將聲明塊中的樣式應用到選擇器對應的元素上。
css聲明塊：聲明塊緊跟在選擇器的後面，使用一對{}括起來。聲明塊中實際上就是一組組的名值對結構。一組一組的名值對稱爲聲明。在一個聲明塊中能夠寫多個聲明，多個聲明之間使用;隔開，聲明的樣式名和樣式值之間使用：鏈接。
css中經常使用的選擇器，
1. 元素選擇器：經過元素選擇器能夠選擇頁面中的全部指定元素。語法：標籤名{}
2. id選擇器：經過元素的id屬性值選中惟一的一個元素。語法： #id屬性值{}，對於id選擇器來講，不建議使用複合選擇器。
3. 類選擇器（class選擇器）：能夠爲元素設置class屬性，class屬性和id屬性相似，可是class屬性能夠重複，擁有相同class屬性值的元素，咱們稱爲一組元素，經過元素的class屬性值選中一組元素。語法：.class元素值{} ，能夠同時爲一個元素設置多個class屬性值，多個值之間使用空格隔開。
4. 選擇器分組（並集選擇器），經過選擇器分組能夠同時選中多個選擇器對應的元素，語法： 選擇器1，選擇器2，選擇器n{}
5. 通配選擇器，能夠選中頁面中的全部的元素，語法:*{}
6. 複合選擇器（交集選擇器）做用：能夠選中同時知足多個選擇器的元素。語法：選擇器1選擇器2選擇器n{}
7. 後代元素選擇器做用：選中指定元素的指定後代元素。語法：祖先元素後代元素{}
8. 子元素選擇器做用：選中指定父元素的指定子元素語法： 父元素>子元素{}，IE6及如下的瀏覽器不支持子元素選擇器。
選擇器越短越好

css中僞類知識點

僞類專門用來表示元素的一種特殊的狀態。好比訪問過的超連接，普通的超連接，獲取焦點的文本框，當咱們須要爲處在特殊狀態的元素設置樣式時，就可使用僞類。
a：link表示普通的連接（沒訪問過的連接）
a：visited表示訪問過的連接，因爲涉及到用戶的隱私問題，因此使用visited僞類只能設置字體顏色。（瀏覽器是經過歷史記錄來判斷一個連接是否訪問過）
a:hover{} 僞類表示鼠標移入的狀態。
a:active{}表示的是超連接被點擊的狀態
hover和active也能夠爲其餘元素設置。IE6中，不支持對超連接之外的元素設置hover和active。
：focus僞類能夠獲取焦點
爲<p>標籤中選中的內容使用樣式，可使用::selection僞類。注意：這個僞類在火狐中須要採用另外一種方式編寫，::-moz-selection{}
使用僞元素來表示元素中的一些特殊的位置。例如：爲<P>標籤中第一個字符來設置一個特殊的樣式p：first-letter{ color:red;} 例如：爲<p>標籤中的第一行設置一個背景顏色爲黃色p：first-line{background-color:yellow;}
:before表示元素最前邊的部分。通常before都須要結合content這個樣式一塊兒使用，經過content能夠向before或after的位置添加一些內容。
:after表示元素最後邊的部分。用的不是特別多。
否認僞類做用：能夠從已選中的元素彙總剔除某些元素。語法： :not（選擇器）
涉及到a的僞類一共有四個，:link,:visited,:hover,:active,順序就是如此。不然會被覆蓋。

首次加載頁面時圖片閃爍問題

用超連接僞類作按鈕時，發現第一次切換圖片時會發現圖片有一個很是快的閃爍，這個閃爍會形成一次不佳的用戶體驗。產生問題的緣由：背景圖片是之外部資源的形式加載進網頁的，瀏覽器每加載一個外部資源就須要單獨的發送一次請求。可是外部資源並非同時加載的，瀏覽器會在資源被使用纔去加載資源。因爲加載圖片須要必定的時間，因此在加載和顯示過程會有一段時間，背景圖片沒法顯示，致使出現閃爍的狀況。
爲了解決閃爍狀況，能夠將多個圖片整合爲一張圖片，這樣能夠同時將三張圖片一塊兒加載，就不會出現閃爍的問題了，而後經過background-position來切換要顯示的圖片的位置，這種技術叫作圖片整合技術（css-Sprite）,整合的圖片成爲雪碧圖。
雪碧圖的製做，先在ps中調整畫布，再整合。
雪碧圖只適用於背景圖片，並且是寬高都固定的背景。
使用雪碧圖的優勢
1. 將多個圖片整合爲一張圖片裏，瀏覽器只須要發送一次請求，能夠同時加載多個圖片，提升訪問效率，提升了用戶體驗。
2. 將多個圖片整合爲一張圖片，減少了圖片的總大小，提升請求的速度，增長了用戶體驗。

css中屬性選擇器知識點

屬性選擇器做用：能夠根據元素中的屬性或屬性值來選取指定元素。
- 語法1：[屬性名]選取含有指定屬性的元素。
- 語法2：[屬性名=「屬性值」] 選取含有指定屬性值的元素。
- 語法3： [屬性名^="屬性值"]選取屬性值以指定內容開頭的元素。
- 語法4：[屬性名$=「屬性值」] 選取屬性值以指定內容結尾的元素。
- 語法5：[屬性名*=「屬性值」] 選取屬性值以包含指定內容的元素。
:first-child能夠選中第一個子元素。 :last-child能夠選中最後一個子元素。 :nth-child能夠選中任意位置的子元素,該選擇器後邊能夠制定一個參數，指定要選中第幾個子元素。even表示偶數位置的子元素，odd表示奇數位置的子元素。語法 :nth-child()
:first-of-type :last-of-type :nth-of-type 和上面的相似，只不過child是在全部的子元素中排列，而type是在當前類型的子元素中排列。
後一個兄弟選擇器.做用：能夠選中一個元素緊挨着的指定的兄弟元素。語法：前一個+後一個
選中後邊全部兄弟元素語法：前一個~後邊全部。

css選擇器優先級知識點

當使用不一樣的選擇器，選中同一個元素時而且設置相同的樣式時，這時樣式之間產生了衝突。最終到底採用哪一個選擇器定義的樣式，由選擇器的優先級（權重）決定，優先級高的優先顯示。
優先級規則：內聯樣式優先級1000 ， id選擇器優先級100，類和僞類優先級10，元素選擇器優先級1 通配選擇器*優先級0，繼承的樣式沒有優先級。
當選擇器中包含多種選擇器時，須要將多種選擇器的優先級相加而後再比較，可是注意，選擇器的優先級計算不會超過他的最大的數量級。
若是選擇器的優先級同樣，則使用靠後的樣式。
並集選擇器的優先級是單獨計算的。

css hack知識點

有一些狀況，有一些特殊的代碼只須要在某些特殊的瀏覽器中執行，而在其餘的瀏覽器中不須要執行，這時就可使用CSS Hack來解決該問題，CSS Hack實際上指的是一個特殊的代碼，這段代碼只在某些瀏覽器中能夠識別，而其餘瀏覽器不能識別，經過這種方式，來爲一些瀏覽器設置特殊的代碼。條件Hack只對IE瀏覽器有效，其餘的瀏覽器都會將它識別爲註釋。IE10及以上的瀏覽器已經不支持這種方式。<!--[if IE]><![endif]>,經過這種方式能夠專門給IE瀏覽器設置樣式表來解決兼容性問題。
在樣式前添加一個下劃線，則該樣式只有IE6及如下的瀏覽器才能夠識別。
添加了*的樣式只有IE7及如下的瀏覽器認識。
CSS Hack不到萬不得已的狀況儘可能不要使用。
在選擇器前添加 * html，則該選擇器只有IE6可以識別。

HTML中表格的知識點

使用<table>標籤建立表格，<table>是一個塊元素。
<table>和<td>邊框之間默認有一個距離，經過border-spacing屬性能夠設置這個距離。
border-collapse能夠用來設置表格的邊框合併。若是設置了邊框合併，則border-spacing自動失效。
可使用<th>標籤來表示表頭中的內容，它的用法和<td>標籤同樣，不一樣的是有默認效果（居中和加粗）
有一些狀況下表格是很是長的，這時須要將表格分爲三個部分，表頭，表格的主體，表格底部，在HTML中爲咱們提供了三個標籤：<thead>（表頭），<tbody>(表格主體)，<tfoot>（表格底部），這三個標籤的做用，就是來區分表格的不一樣的部分，他們都是<table>標籤的子標籤，都須要直接寫到<table>標籤中，<tr>須要寫在這些標籤當中，<thead>中的內容，永遠會顯示在表格的頭部，<tfoot>中的內容，永遠都會顯示在表格的底部，<tbody>標籤中的內容，永遠都會顯示在表格的中部。若是表格中沒有寫<tbody>標籤，瀏覽器會自動在表格中添加<tbody>標籤而且將全部的<tr>標籤都放到<tbody>標籤中，因此注意<tr>標籤並非<table>標籤的子元素，而是<tbody>標籤的子元素，經過table>tr沒法選中須要經過tbody>tr
表格的列數由<td>標籤最多的那行決定，表格是能夠嵌套的，能夠在<td>標籤中放置一個表格。

css盒模型知識點

盒子模型：一個盒子會分紅幾個部分：內容區（content），內邊距（padding），邊框（border），外邊距（margin）。
使用width來設置盒子內容區的寬度，使用height來設置盒子內容區的高度。width和height只是設置的盒子內容區的大小，而不是盒子的整個大小。
爲元素設置邊框，要爲一個元素設置邊框必須指定三個樣式。border-width：邊框的寬度。border-color：邊框顏色。border-style：邊框屬性。
盒子可見框的大小由內容區，內邊距和邊框共同決定。
border-width設置邊框的寬度，使用border-width能夠分別指定四個邊框的寬度，若是在border-width指定了四個值，則四個值會分別設置給上右下左，按照順時針的方向設置的。若是指定三個值，則三個值分別設置給上，左右，下。若是指定兩個值，則兩個值分別設置給上下，左右。若是指定一個值，則四邊都是該值。除了border-width，css中還提供了border-xxx-width，xxx的值多是top，right，bottom，left，專門用來設置指定邊的寬度。
border-color設置邊框的顏色，使用border-color能夠分別指定四個邊框的顏色，若是在border-color指定了四個值，則四個值會分別設置給上右下左，按照順時針的方向設置的。若是指定三個值，則三個值分別設置給上，左右，下。若是指定兩個值，則兩個值分別設置給上下，左右。若是指定一個值，則四邊都是該值。除了border-color，css中還提供了border-xxx-color，xxx的值多是top，right，bottom，left，專門用來設置指定邊的顏色。
border-style：設置邊框的樣式，可選值：none（默認值），solid實線，dotted點狀虛線，dashed虛線，double雙線。style也能夠分別指定四個邊的邊框樣式，規則和width一致，同時它也提供border-xxx-style四個樣式，來分別設置四個邊。
火狐瀏覽器邊框默認是3，顏色是黑色。大部分的瀏覽器中，邊框的寬度和顏色都是有默認值的，而邊框的樣式默認值都是none。
border是邊框的間接樣式，經過它能夠同時設置四個邊框的樣式，寬度，顏色。並且沒有任何順序要求。border一指定就是同時指定四個邊不能分別指定。border-top，border-right，border-left，border-bottom能夠單獨設置四個邊的樣式，規則和border同樣，只不過它只對一個邊生效。
內邊距（padding）：指的是盒子的內容區與盒子邊框之間的距離，一共有四個方向的內邊距。能夠經過：padding-top，padding-right，padding-bottom，padding-left來設置四個方向的內邊距。內邊距會影響盒子可見框的大小。元素的背景會延伸到內邊距。盒子的大小由內容區，內邊距和邊框共同決定。盒子可見框的寬度=border-left-width+padding-left+width+padding-right+border-right-width.可見框的高度=border-top-width+padding-top+height+padding-bottom+border-bottom-width。
使用padding能夠同時設置四個邊框的樣式，規則和border-width一致。
外邊距指的是盒子與其餘盒子之間的距離，不會影響可見框的大小，可是會影響到盒子的位置。盒子有四個方向的外邊距：margin-top，margin-right，margin-bottom，margin-left。因爲頁面中的元素都是靠左靠上擺放的，因此注意當咱們設置上和左外邊距時，會致使盒子自身的位置發生改變。而若是是設置右和下外邊距時，會致使盒子其餘位置發生改變。外邊距也能夠指定一個負值，若是外邊距設置的是負值，則元素會向反方向移動。margin還能夠設置爲auto，auto通常只設置給水平方向的margin。若是隻指定左外邊距或有外邊距的margin爲auto則會將外邊距設置爲最大值。垂直方向外邊距若是設置爲auto，則外邊距默認就是0.若是將left和right同時設置爲auto，則會將兩側的外邊距設置爲相同的值，就可使元素自動在父元素中居中，因此咱們常常將左右外邊距設置爲auto以使子元素在父元素中水平居中。外邊距一樣可使用簡寫屬性margin，能夠同時設置四個方向的外邊距，規則和padding同樣。特殊形式（margin：0 auto；居中）
垂直外邊距的重疊，在網頁中垂直方向的相鄰外邊距會發生外邊距的重疊，所謂的外邊距重疊指兄弟元素之間的相鄰外邊距會取最大值而不是取和。若是父子元素的垂直外邊距相鄰了，則子元素的外邊距會設置給父元素。消除重疊的方式能夠改變兩個條件之一，如垂直條件（能夠設置父元素的padding來代替margin），相鄰條件（能夠給父元素設置邊框，或者設置父元素的內邊距）。
瀏覽器爲了在頁面中沒有樣式時，也可讓頁面有一個比較好的顯示效果。因此爲不少元素都設置了一些默認的margin和padding，而他的這些默認樣式，正常狀況下是不須要使用的，因此咱們每每在編寫樣式以前須要將瀏覽器中的默認的margin和padding通通去掉。*{margin：0；padding：0；}
內聯元素不能設置width和height,內聯元素能夠設置水平方向的內邊距，內聯元素能夠設置垂直方向的內邊距，可是不會影響頁面佈局，內聯元素能夠設置邊框，可是垂直的邊框不會影響頁面佈局，內聯元素支持水平方向的外邊距，內聯元素不支持垂直外邊距。

元素外邊距重疊問題

子元素和父元素相鄰的垂直外邊距會發生重疊，子元素的外邊距會傳遞給父元素。使用空的table標籤能夠隔離父子元素的外邊距，阻止外邊距的重疊。
display:table能夠將一個元素設置爲表格顯示。能夠解決父子元素外邊距重疊
通過修改後的clearfix是一個多功能的，既能夠解決高度塌陷，又能夠確保父元素和子元素的垂直外邊距不會重疊，.clearfix:before,.clearfix:after{ content:"";display:table;clear:both;}

BFC相關知識及開啓方式

根據W3C的標準，在頁面中元素都有一個隱含的屬性叫作Block Formatting Context,簡稱BFC，該屬性能夠設置打開或者關閉，默認是關閉的，當開啓元素的BFC之後，元素將具備以下的特性：
1. 父元素的垂直外邊距不會和子元素重疊。
2. 開啓BFC的元素不會被浮動元素所覆蓋。
3. 開啓BFC的元素能夠包含浮動的子元素。
如何開啓元素的BFC
1. 設置元素浮動（使用這種方式開啓，雖然能夠撐開父元素，可是會致使父元素的寬度丟失，並且是用這種方式也會致使下邊的元素上移，不能解決高度塌陷的問題）
2. 設置元素絕對定位
3. 設置元素爲inline-block（能夠解決高度塌陷的問題，可是會致使寬度丟失，不推薦使用這種方式）
4. 將元素的overflow設置爲一個非visible的值。（推薦方式，將overflow設置爲hidden是反作用最小的開啓BFC的方式。解決高度塌陷最簡單的方式）
可是在IE6及如下的瀏覽器並不支持BFC，因此使用這種方式不能兼容IE6，在IE6中雖然沒有BFC，可是具備另外一個隱含的屬性叫作hasLayout，該屬性的做用和BFC相似，因此在IE6瀏覽器能夠經過開hasLayout來解決該問題，開啓方式不少，反作用最小的：直接將元素的zoom設置爲1便可
zoom表示放大的意思，後邊跟着一個數值，寫幾就將元素放大幾倍。zoom：1表示不放大元素，可是經過該樣式能夠開啓hasLayout。zoom這個樣式，只在IE中支持，其餘瀏覽器都不支持。
在IE6中，若是爲元素指定了一個寬度，則會默認開啓hasLayout。

html中表單的知識點

表單的做用就是用來將用戶信息提交給服務器的。使用<from>標籤建立一個表單。<form>標籤中必須制定一個action屬性，該屬性指向的是一個服務器的地址，當咱們提交表單時將會提交到action屬性對應的地址。使用<form>標籤建立的僅僅是一個空白的表單，咱們還須要向<form>標籤中添加不一樣的表單項。
使用<input>標籤來建立一個文本框，它的type屬性是text。（內聯元素）若是但願表單項中的數據會提交到服務器中，還必須給表單項指定一個name屬性。name表示提交內容的名字。用戶填寫的信息會附在url地址的後邊以查詢字符串的形式發送給服務器，格式：url地址？查詢字符串 （屬性名=屬性值&屬性名=屬性值）在文本框中也能夠指定value屬性值，該值會將做爲文本框的默認值顯示。
提交按鈕能夠將表單中的信息提交給服務器，一樣使用<input>標籤建立一個提交按鈕，它的type是submit。在提交按鈕中能夠經過value屬性來指定按鈕上的文字。
使用<input>標籤建立一個密碼框，它的type是password。
使用<input>標籤來建立一個單選按鈕，它的type屬性使用radio，單選按鈕經過name屬性進行分組，name屬性相同是一組按鈕，像須要用戶選擇，可是不須要用戶直接填寫內容的表單項，還必須指定一個value屬性，這樣被選中的表單項的value屬性值將會最終提交給服務器。
多選框使用<input>標籤建立，它的type屬性使用checkbox。
使用<select>標籤來建立一個下拉列表，在下拉列表中使用<option>標籤來建立一個一個列表項，下拉列表的name屬性須要指定給<select>標籤，而value屬性須要指定給<option>標籤，能夠經過在<option>標籤中添加selected=「selected」來將選項設置爲默認選中。當爲<select>標籤添加一個multiple="multiple",則下拉列表變爲一個多選的下拉列表。在<select>標籤中可使用optgroup屬性對選項進行分組，同一個optgroup的選項是一組。能夠經過label屬性來指定分組的名字。
若是但願在單選按鈕或者是多選框中指定默認選中的選項，則能夠在但願選中的項中添加checked=「checked」屬性。
使用<textarea>標籤建立一個多行文本框(文本域)
使用<input>標籤建立一個重置按鈕，它的type是reset，點擊重置按鈕後表單中內容會恢復爲默認值。
使用<input type=button>能夠建立單純的按鈕，這個按鈕沒有任何功能，只能被點擊。除了使用<input>也可使用<button>標籤來建立。這種方式和使用<input>相似，只不過因爲它是成對出現的標籤，使用起來更加的靈活。
在html中專門用來選中表單中的提示文字的<label>標籤。該標籤能夠指定一個for屬性，該屬性的值須要指定一個表單項的id值。
在表單中可使用<fieldset>標籤來爲表單項進行分組，能夠將表單項中的同一組放到一個<fieldset>標籤中，在<fieldset>標籤中可使用<legend>子標籤，來指定組名。

清除元素浮動的問題

咱們有時但願清除掉其餘元素浮動對當前元素產生的影響。這時可使用clear屬性來完成，clear能夠用來清除其餘浮動元素對當前元素的影響。可選值：none(默認值)，不清除浮動。left，清除左側浮動對當前元素的影響。right，清除右側浮動元素對當前元素的影響。both，清除兩側浮動元素對當前元素的影響（清除對它影響最大的一側）。清除浮動之後，元素會回到其它元素浮動以前的位置。

父元素高度塌陷相關知識點

高度塌陷的緣由：在文檔流中，父元素的高度默認是被子元素撐開的，也就是子元素多高，父元素多高，可是當爲子元素設置浮動之後，子元素會徹底脫離文檔流，此時將會致使父元素沒法撐起子元素的高度，致使父元素的高度塌陷。因爲父元素的高度塌陷了，則父元素下的全部元素都會向上移動，這樣將會致使頁面佈局混亂。因此在開發中必定要避免出現高度塌陷的問題。
解決高度塌陷的幾種方案
1. 咱們能夠將父元素的高度寫死，以免塌陷的問題出現，可是一旦高度寫死，父元素的高度將不能自動適應子元素的高度，因此這種方案是不推薦使用的。
2. 能夠直接在高度塌陷的父元素的最後，添加一個空白的div，因爲這個div並無浮動，因此他是能夠撐開父元素的高度的。而後在對其進行清除浮動，這樣能夠經過這個空白的div來撐開父元素的高度，基本沒有反作用。使用這種方式雖然能夠解決問題，可是會在頁面中添加多餘的結構。
3. 能夠經過after僞類向元素的最後添加一個空白的塊元素，而後對其清除浮動，這樣作和添加一個div的原理是同樣的，能夠達到一個相同的效果，並且不會在頁面中添加多餘的div，這是咱們最推薦使用的方式，幾乎沒有反作用。可是在IE6中不支持after僞類，，因此在IE6中還須要使用hasLayout來處理。

元素定位的知識點

定位指的是將指定的元素擺放到頁面的任意位置，經過定位能夠任意的擺放元素，經過position屬性來設置元素的定位，可選值static：（默認值）元素沒有開啓定位。relative：開啓元素的相對定位。absolute：開啓元素的絕對定位。fixed：開啓元素的固定定位（絕對定位的一種）。當開啓了元素的定位（position屬性值是一個非static的值）時，能夠經過left，right，top，bottom四個屬性來設置元素的偏移量。left：元素相對其定位位置的左側偏移量。right：元素相對於其定位位置的右側偏移量。
top：元素相對於其定位位置的上邊的偏移量。bottom：元素相對於其定位位置下邊的偏移量。
當元素的position屬性設置爲relative時，則開啓了元素的相對定位。當開啓了元素的相對定位之後，而不設置偏移量時，元素不會發生任何變化。相對定位是相對於元素在文檔流中原來的位置移動。相對定位的元素不會脫離文檔流。相對定位會使元素提高一個層級。一般偏移量只須要兩個就能夠對一個元素進行定位，通常選擇水平方向的偏移量和垂直方向的偏移量來爲元素進行定位。相對定位不會改變元素的性質，塊仍是快，內聯仍是內聯。
當position屬性值設置爲absolute時，則開啓了元素的絕對定位。絕對定位的特色：
1. 開啓絕對定位會脫離文檔流。
2. 開啓絕對定位之後，若是不設置偏移量，則元素的位置不會發生變化。
3. 絕對定位是相對於離他最近的開啓了定位的祖先元素進行定位的（通常狀況，開啓了子元素的絕對定位都會同時開啓父元素的相對定位）。若是全部的祖先元素都沒有開啓定位，則會相對於瀏覽器窗口進行定位。
4. 絕對定位會使元素提高一個層級。
5. 絕對定位會改變元素的性質，內聯元素會變成塊元素，塊元素的寬度和高度默認都被內容撐開。
當元素的position屬性設置fixed時，則開啓了元素的固定定位。固定定位也是一種絕對定位，它的大部分特色都和絕對定位同樣。不一樣的是：固定定位永遠都會相對於瀏覽器窗口定位。固定定位會固定在瀏覽器窗口某個位置，不會隨滾動條滾動。IE6不支持固定定位。
若是定位元素的層級是同樣的，則下邊的元素會蓋住上邊的。

引用的路徑的知識點

相對路徑：相對於當前資源所在目錄的位置。
可使用../來返回上一級目錄，返回幾級目錄就寫幾個../
能夠在樣式的最後添加一個！important，則此時該樣式將會得到一個最高的優先級，將會優先於全部的樣式顯示，甚至超過內聯樣式。可是在開發中不建議使用。

引用的圖片的知識點

圖片的格式

JPEG(JPG)支持的顏色比較多，圖片能夠壓縮，但不支持透明，通常使用JPEG來保存照片等顏色豐富的圖片。
GIF支持的顏色少，只支持簡單的透明，支持動態圖，圖片顏色單一或者是動態圖時可使用gif。
PNG支持的顏色多，而且支持複雜的透明，能夠用來顯示顏色複雜的透明的圖片。

圖片的使用原則：效果不一致，使用效果好的，效果同樣，使用小的。

IE6中圖片顯示問題

在IE6中對圖片格式png24支持度不高，若是使用的圖片格式是png24，則會致使透明效果沒法正常顯示。
解決方法：
1. 可使用png8來代替png24，便可解決問題。可是使用png8代替使用png24之後，圖片的清晰度會有所降低。
2. 使用js來解決該問題，須要向頁面中引入一個外部的js文件，而後再寫一些簡單的js代碼，來處理該問題。DD_belatedPNG.fix('標籤名')；

IE6中雙倍邊距問題

IE6的雙倍邊距bug，在IE6中，當爲一個向左浮動的元素設置左外邊距，或者爲一個向右浮動的元素設置右外邊距，這個外邊距將會是設置的值的2倍，添加一個樣式來解決IE6的雙倍邊距問題，display：inline。對於一個浮動元素來講設置沒有任何意義，可是該屬性能夠解決IE6的雙倍邊距問題。

html中框架集的知識點

框架集和內聯框架的做用相似，都是用於在一個頁面中引入其餘的外部的頁面，框架集能夠同時引入多個頁面，而內聯框架只能引入一個，在h5標準中，推薦使用框架集，而不使用內聯框架。使用<frameset>標籤來建立一個框架集，注意<frameset>標籤不能和<body>標籤出如今同一個頁面中，因此要使用框架集，頁面中就不可使用<body>標籤。在<frameset>標籤中使用<frame>子標籤來指定要引入的頁面。引入幾個頁面就寫幾個<frame>標籤。屬性：rows：指定框架集中全部的框架，一行一行的排列。cols，指定框架集中的全部的頁面，一列一列的排列，這兩個屬性<frameset>標籤必須選擇一個，而且須要在屬性中指定每一部分所佔的大小。
<frameset>標籤中也能夠嵌套<frameset>標籤。<frameset>標籤和<iframe>標籤同樣，它裏面的內容都不會被搜索引擎所檢索，因此若是搜索引擎檢索到的頁面是一個框架頁的話，它不是去判斷裏邊的內容的使用框架集則意味着頁面中不能有本身的內容，只能引入其餘的頁面，而咱們每單獨加在一個頁面，瀏覽器阿都須要從新發送一次請求，引入幾個頁面就須要發送幾回請求，用戶的體驗比較差，若是非得用，建議使用<frameset>標籤而不使用<iframe>標籤。

xhtml經常使用語法規範

HTML中不區分大小寫，可是通常都使用小寫。
HTML中的註釋不能嵌套。
HTML標籤必須結構完整，要麼成對出現，要麼自結束標籤（瀏覽器會盡最大的努力正確解析頁面，全部不符合語法規範的內容，瀏覽器都會自動修正，可是有些狀況會修正錯誤）。
HTML標籤能夠嵌套，可是不能交叉嵌套。
HTML標籤中的屬性必須有值，且值必須加引號。

標籤命名規範

id ，class和文件的命名規範，命名時儘可能使用英文，若是不會可使用拼音，可是不要英文和拼音混用。命名格式，駝峯命名法，首字母小寫，每一個單詞的開頭字母大寫，例子：aaaBbbCcc ,helloWorld,也能夠全部的字母都小寫，單詞之間使用_或-連接，aaa_bbb_ccc , aaa-bbb-ccc。