HTML CSS整理筆記 – 前端基礎(chǔ)知識(shí)點(diǎn)匯總

(1)<table><tr><th><td>

(2)HTML5中已廢除table的border屬性，用css控制邊框?qū)挾取?/p>

(3)跨列(橫跨)：<td colspan=”所跨的列數(shù)”>內(nèi)容</td>

跨行(豎跨)：<td rowspan=”所跨行數(shù)”>內(nèi)容</td>，兩者都要?jiǎng)h除被合并的其他單元格。

(4)表格特點(diǎn)：同行單元格高度一致且水平對(duì)齊，同列單元格寬度一致且垂直對(duì)齊。

19.視頻元素：

(1)controls屬性提供播放暫停和音量控件、autoplay屬性自動(dòng)播放、loop屬性循環(huán)播放

<video src=”視頻路徑” controls=”controls”>你的瀏覽器不支持video標(biāo)簽</video>

(2)source元素鏈接不同的視頻文件，瀏覽器會(huì)自動(dòng)選擇第一個(gè)可識(shí)別的格式：

<video controls>
		<source src="video/video.webm" />
		<source src="video/video.mp4" />你的瀏覽器不支持video標(biāo)簽
	<video>

20.音頻元素：使用語(yǔ)法和視頻元素一樣，只要把video換成audio即可。

21.HTML5的結(jié)構(gòu)元素(先劃分結(jié)構(gòu)再寫(xiě)內(nèi)容)：

header(頭部)、footer(腳部)、

section(獨(dú)立區(qū)域)、article(獨(dú)立文章內(nèi)容)、

aside(相關(guān)內(nèi)容或應(yīng)用,常用于側(cè)邊欄)、nav(導(dǎo)航類(lèi)輔助內(nèi)容)

22.<iframe>框架:方便在頁(yè)面中引用站外的頁(yè)面內(nèi)容。

<iframe name="此框架的標(biāo)識(shí)名" src="引用的頁(yè)面地址"></iframe>

23.<iframe>和錨鏈接的結(jié)合：使錨鏈接的內(nèi)容在iframe框架中打開(kāi)

<iframe name="mainFrame" src="框架引用的頁(yè)面地址" />

<a href="鏈接路徑" target="mainFrame">點(diǎn)擊在框架中打開(kāi)</a>

——3 表單——

24.表單標(biāo)簽form：

<form method="post" action="login.html" enctype="text/plain">

表單內(nèi)容

</form>

(1)action=”url”屬性意為把表單提交到某個(gè)頁(yè)面,method=get|post意為向服務(wù)器發(fā)送數(shù)據(jù)的方式。

(2)提交方法：get提交,表單數(shù)據(jù)會(huì)在地址欄url中顯示；而post提交不會(huì)顯示，所以post提交更安全。

(3)enctype=”text/plain”指enctype 屬性規(guī)定在發(fā)送到服務(wù)器之前應(yīng)該如何對(duì)表單數(shù)據(jù)進(jìn)行編碼。text/plain 空格轉(zhuǎn)換為加號(hào)+，但不對(duì)特殊字符編碼。

24.表單元素：

(1)表單元素<input>標(biāo)簽的屬性：

type(默認(rèn)text,其他password,email,checkbox,radio,button,submit,reset,file,image,url,hidden,number,range,search等)、name、value(可選,該元素的初始值)、size(該元素的初始寬度)、maxlength(可輸入的最大字符數(shù))、checked(按鈕被選中)

(2)列表框<select><option>標(biāo)簽：

<select>中至少包含一個(gè)<option>。在<option>有多行選項(xiàng)需滾動(dòng)查看時(shí)，size屬性設(shè)置可提示看到的行數(shù)，selected屬性默認(rèn)選中該列表項(xiàng)。

(3)按鈕：button普通(要和事件如onclick關(guān)聯(lián)使用),submit(提交表單到action指定的url并傳遞表單數(shù)據(jù)),reset重置。要求美觀可使用圖片按鈕如<input type=”image” src=”圖片路徑”/>

(4)多行文本域：不能用value屬性賦初始值

<textarea name="標(biāo)識(shí)名" cols="顯示的列數(shù)" rows="顯示的行數(shù)">
		自我評(píng)價(jià)	
	</textarea>

(5)數(shù)字number：限制輸入的數(shù)據(jù)為數(shù)字，設(shè)定最大值最小值、合法的數(shù)據(jù)間隔step或默認(rèn)值等

<input type="number" name="num" min="0" max="100" step="10"/>

(6)滑塊range：作用和數(shù)字number一樣，只是外觀顯示為用滑動(dòng)條選擇數(shù)值

<input type="range" name="range" min="0" max="100" step="10"/>

(7)search搜索框:在任意頁(yè)面中用于輸入搜索關(guān)鍵詞的文本框

<input type="search" name="sousuo" />

(8)文件域：多用于文件上傳

<input type="file" name="files"/>
	<input type="submit" name="upfiles" value="上傳"/>

(9)當(dāng)表單數(shù)據(jù)包含普通數(shù)據(jù)、文件數(shù)據(jù)等多部分內(nèi)容時(shí)，要設(shè)置表單的enctype編碼屬性為 multipart/form-data,表示把表單數(shù)據(jù)分為多部分提交。

(10)表單隱藏域hidden：數(shù)據(jù)不會(huì)頁(yè)面中顯示，但會(huì)隨表單一同提交。

<input type="hidden" name="userid" value="20"/>

(11)表單元素 只讀屬性readonly、禁用disabled

(12)W3CHTML5標(biāo)準(zhǔn)中，規(guī)定對(duì)布爾類(lèi)型的屬性，屬性值可以省略。

(13)表單元素的標(biāo)注label：當(dāng)鼠標(biāo)單擊標(biāo)注的文本時(shí)，瀏覽器會(huì)自動(dòng)對(duì)焦關(guān)聯(lián)的表單元素，for屬性規(guī)定label與哪個(gè)表單元素綁定。name和id屬性必需。

<label for="female">女</label>
	<input type="radio" name="sex" id="female" />

24.HTML5表單新標(biāo)簽

• <form> 供用戶輸入的表單
• <input> 輸入域
• <textarea> 文本域 (多行輸入)
• <label> 定義 <input> 元素的標(biāo)簽，一般為輸入標(biāo)題
• <fieldset> 定義一組相關(guān)的表單元素，并使用外框包含起來(lái)
• <legend> 定義 <fieldset> 元素的標(biāo)題
• <select> 下拉選項(xiàng)列表
• <optgroup> 選項(xiàng)組
• <option> 下拉列表中的選項(xiàng)
• <button> 點(diǎn)擊按鈕
• <datalist> 指定一個(gè)預(yù)先定義的輸入控件選項(xiàng)列表
• <keygen> 定義了表單的密鑰對(duì)生成器字段
• <output> 計(jì)算結(jié)果

25.表單驗(yàn)證

(1)好處：減輕服務(wù)器的壓力；保證數(shù)據(jù)的可行性和安全性。

(2)placeholder:為文本框提示用戶輸入

<input type="text" name="name" placeholder="請(qǐng)輸入你的姓名"/>

(3)required：規(guī)定文本框不能為空

<input type="email" name="email" required/>

(4)pattern：輸入的內(nèi)容必須符合正則表達(dá)式自定義的規(guī)則

<input type=”text” name=”tel” required pattern=”^1[35]\d{9}”/>規(guī)定以13、15開(kāi)頭的11位數(shù)字

——4 CSS3基礎(chǔ)——

26.CSS：Cascading Style Sheet層疊樣式表,又稱(chēng)風(fēng)格樣式表Style Sheet，用于設(shè)計(jì)網(wǎng)頁(yè)風(fēng)格。

27.CSS3的基本語(yǔ)法結(jié)構(gòu)：

(1)CSS中注釋為 /*內(nèi)容*/

(2)CSS規(guī)則由選擇器、聲明組成。

(3)聲明必須放在大括號(hào){}中，聲明可以是一或多條。

(4)每條聲明由一個(gè)屬性和值組成，屬性和值用冒號(hào):分開(kāi)，每條語(yǔ)句以分號(hào);結(jié)尾如
<style type="text/css">
	h1{
	   font-size : 12px;
	   color : red;		
	}
</style>

28.在HTML中引入CSS樣式的方式：

(1)行內(nèi)樣式：直接在標(biāo)簽中用style屬性設(shè)置CSS樣式。

<p style="font-size:10px;">字體大小</p>

(2)內(nèi)部樣式表：把css代碼寫(xiě)在<head>的<style>中，規(guī)范化應(yīng)寫(xiě)為<style type=”text/css”>

(3)外部樣式表：文件擴(kuò)展名為.css 在外部樣式表中可直接寫(xiě)樣式代碼，不需要<style>標(biāo)簽。

a.鏈接式引用外部樣式表(常用)：

<head>
		<link href="外部樣式表路徑" rel="stylesheet" type="text/css"/>
	</head>
	b.導(dǎo)入式引用外部樣式表：
	<head>
	<style>
		@import url("外部樣式表路徑");
	</style>
	</head>

29.樣式優(yōu)先級(jí)：”就近原則”，行內(nèi)樣式>內(nèi)部樣式表>外部樣式表

當(dāng)有很多樣式時(shí)，用 !important 可以為某一個(gè)樣式覆蓋掉其他所有樣式。

如 #textcolor{ clor:pink !important;}

30.CSS選擇器命名規(guī)范：駝峰命名法，用語(yǔ)義化單詞命名且不能和ID選擇器同名.

31.CSS3的基本選擇器

(1)標(biāo)簽選擇器：以標(biāo)簽名作選擇器的名稱(chēng)如 h1{color:red;}

(2)類(lèi)選擇器：選擇器名可自定義如 .red{color:red;}同時(shí)要設(shè)置<標(biāo)簽 class=”red”>內(nèi)容</標(biāo)簽>

(3)ID選擇器：選擇器名可自定義如 #red{color:red;}同時(shí)要設(shè)置<標(biāo)簽 id=”red”>內(nèi)容</標(biāo)簽>，但同一個(gè)id屬性的選擇器在頁(yè)面中只能用一次。

32.基本選擇器的優(yōu)先級(jí)：ID選擇器>類(lèi)選擇器>標(biāo)簽選擇器

31.CSS3的高級(jí)選擇器

1.層次選擇器：

(1)后代選擇器A B{ }：中間用空格隔開(kāi)，只要是A的后代元素都會(huì)被選中。

(2)子選擇器A>B{ }：只能選擇A的子元素。

(3)相鄰兄弟選擇器A+B{ }：只用于A后面一個(gè)同級(jí)元素

(4)通用兄弟選擇器A~B{ }：用于A后面所有的同級(jí)元素

2.結(jié)構(gòu)偽類(lèi)選擇器：根據(jù)文檔對(duì)象模型DOM的節(jié)點(diǎn)(元素級(jí)別)來(lái)操作。

(1)B:first-child 作為父元素的第一個(gè)子元素B，作用和(3)相似

(2)B:last-child 作為父元素的最后一個(gè)子元素B

(3)A B:nth-child(n) 在父級(jí)中查第n個(gè)子元素是不是B，不分類(lèi)型

(4)B:first-of-type 選擇父元素內(nèi)B類(lèi)型的第一個(gè)元素B

(5)B:last-of-type 選擇父元素內(nèi)B類(lèi)型的最后一個(gè)元素B

(6)A B:nth-of-type(n) 在父級(jí)里先是不是B類(lèi)型，再看位置n

3.屬性選擇器：

(1)A[arrt] 選擇包含屬性arrt的A標(biāo)簽(也可寫(xiě)多個(gè)屬性，但要同時(shí)存在)

(2)A[arrt = val] 選擇包含屬性arrt,且屬性值=val(區(qū)分大小寫(xiě))的A標(biāo)簽

(3)A[arrt ^= val] 選擇包含屬性arrt,且屬性值以val開(kāi)頭的任意字符串

(4)A[arrt $= val] 選擇包含屬性arrt,且屬性值以val結(jié)尾的任意字符串

(5)A[arrt *= val] 選擇包含屬性arrt,且屬性值包含val字符串的A標(biāo)簽

——5 CSS3美化網(wǎng)頁(yè)——

32.CSS3設(shè)置文本樣式：

(1)<span>標(biāo)簽：用來(lái)設(shè)置行內(nèi)元素(或幾個(gè)文字)的樣式。

(2)字體樣式：

font-size：常用單位px

font-family：若同時(shí)設(shè)中英文字體，英文字體要設(shè)置在中文字體前面

font-style：normal標(biāo)準(zhǔn)、italic斜體、oblique傾斜

font-variant：small-caps; 字體設(shè)置為新型的大寫(xiě)字母，所有小寫(xiě)字母都轉(zhuǎn)換為大寫(xiě)。

font-weight：normal標(biāo)準(zhǔn)、bold粗、bolder更粗、lighter細(xì)、100-900數(shù)字越大越粗

font：一次設(shè)置字體所有屬性，順序?yàn)椤弊煮w風(fēng)格-粗細(xì)-大小-類(lèi)型”

如 font:italic bold 36px “宋體”;

(3)用font簡(jiǎn)寫(xiě)方式至少要指定 font-size和 font-family 屬性，其他的屬性(如font-weight、font-style、font-variant、line-height)如未指定將使用默認(rèn)值。縮寫(xiě)時(shí) font-size 與 line-height中間要加”/”斜扛如 “12px/1.5em”

• 32.Text-transform：控制文本的大小寫(xiě)：
• none 默認(rèn)，定義既有小寫(xiě)字母也有大寫(xiě)字母的標(biāo)準(zhǔn)文本(原文)
• capitalize 每個(gè)單詞以大寫(xiě)字母開(kāi)頭
• uppercase 全部為大寫(xiě)字母
• lowercase 全部小寫(xiě)字母
• inherit 從父元素繼承text-transform屬性的值。

32.direction屬性：規(guī)定文本的方向/書(shū)寫(xiě)方向。

• ltr 文本方向從左到右
• rtl 方向從右到左
• inherit 繼承父元素direction屬性的值。

32.文字排版

(1)適用大多數(shù)瀏覽器：

從左向右 writing-mode: vertical-lr;

從右向左 writing-mode: vertical-rl;

(2)只適用IE瀏覽器:

從左向右 writing-mode: tb-lr;

從右向左 writing-mode: tb-rl

33.排版網(wǎng)頁(yè)文本

(1)color文本顏色:

RGB：如color:#FF0000; 另一種方法rgb(r,g,b)其中三個(gè)參數(shù)取整0~255

RGBA：在RGB基礎(chǔ)上加控制alpha透明度的參數(shù)，取值0~1，0表示完全透明

(2)text-align水平對(duì)齊:

left左(默認(rèn))、center中間、right右、justify兩端對(duì)齊

(3)text-indent首行縮進(jìn)：2em或2px 縮進(jìn)兩個(gè)字符

(4)text-height文本行高: 單位px或 按倍數(shù)(行高是字體大小的倍數(shù))

(5)text-decoration文本裝飾：

none默認(rèn)無(wú)、underline下劃線、overline上劃線、line-through刪除線

(2)vertical-align垂直對(duì)齊：只能作用于<table>表格單元格的對(duì)象:

top頂、middle居中、bottom底

(4)text-shadow文本陰影：

語(yǔ)法”text-shadow:陰影顏色 x軸位移(x-offset) y軸位移(y-offset) 模糊半徑(blur-radius);”

如text-shadow: blue 10px 10ox 2px;

(5)查詢?yōu)g覽器是否支持HTML5及CSS3屬性的網(wǎng)址www.caniuse.com

33.CSS3設(shè)置超鏈接樣式：

偽類(lèi):根據(jù)標(biāo)簽處于某種行為或狀態(tài)來(lái)修飾超鏈接樣式。其他標(biāo)簽如p可以使用hover

和active。

語(yǔ)法”標(biāo)簽名:偽類(lèi)名{聲明;}”

(1)a:link 未訪問(wèn)前的超鏈接

(2)a:visited 訪問(wèn)過(guò)后

(3)a:hover 鼠標(biāo)移到鏈接上

(4)a:link 鼠標(biāo)點(diǎn)擊未釋放

(5)設(shè)置偽類(lèi)的順序：a:link – a:visited – a:hover – a:active

(6)雖有四種樣式,但實(shí)際開(kāi)發(fā)中只設(shè)置<a>標(biāo)簽選擇器樣式、鼠標(biāo)懸浮鏈接樣式

34.CSS3設(shè)置列表樣式

(1)list-style-type：列表項(xiàng)標(biāo)記類(lèi)型

none無(wú)符號(hào)、decimal數(shù)字、disc實(shí)心圓(默認(rèn))、circle空心圓、square實(shí)心正方形

(2)list-style-image：用圖像做列表項(xiàng)標(biāo)記

(3)list-style-position：設(shè)置列表項(xiàng)標(biāo)記的位置

(4)list-style：一次設(shè)置列表的所有屬性 (屬性值為none時(shí)說(shuō)明列表無(wú)樣式)

順序?yàn)?list-style-type + list-style-position + list-style-image

35.<div>標(biāo)簽：用于網(wǎng)頁(yè)布局，把HTML文檔分成獨(dú)立不同的部分。

36.CSS3設(shè)置背景樣式：

(1)background-color：背景色不能繼承，其默認(rèn)值是透明transparent

(2)background-image：url(圖片路徑)、none(不顯示背景圖像)

(3)background-repeat：背景圖像重復(fù)平鋪

repeat(沿水平和垂直方向)、no-repeat(不平鋪,只顯示一次)、

repeat-x(只沿水平方向)、repeat-y(只沿垂直方向)、

(4)background-position：背景圖的位置(X水平Y(jié)垂直方向的偏移量，如果只有一個(gè)方向關(guān)鍵字，則默認(rèn)另一個(gè)關(guān)鍵字為center)

1.Xpos Ypos:如 0px 0px：默認(rèn)無(wú)偏移,從左上角出現(xiàn)

30px 40px：正向偏移,圖像向右和向下出現(xiàn)

-50px -60px：反向偏移,圖像向左和向上出現(xiàn)

2.X% Y%：如30% 50%(水平方向偏移30%，垂直方向居中)

3.X水平關(guān)鍵詞(left,center,right)、Y垂直關(guān)鍵詞(top,center,bottom)

(5)background：一次設(shè)置背景的所有屬性

(6)background-size背景圖片尺寸：

auto(保持圖片原尺寸,不易失真)、cover(放大填滿容器標(biāo)簽)、

百分比percentage、contain(按照?qǐng)D片本身的寬高比例適應(yīng)定義背景的區(qū)域)

37.gradient線性漸變：顏色沿著一條直線方向過(guò)渡

(1)常規(guī)語(yǔ)法：” linear-gradient(position, color1, color2,…)”

(2)瀏覽器兼容語(yǔ)法：” -兼容前綴-linear-gradient(position,color1,color2,…)”

(3)漸變的直線方向：

to left 從右向左、to top left 向左上方、to bottom left 向左下方、

to right 從左向右、to top right向右上方、to bottomo right向右下方、

to bottom從上向下、to top 從下向上、

38.CSS3徑向漸變r(jià)adial-gradient：圓形漸變，顏色從一個(gè)起點(diǎn)朝所有方向混合，語(yǔ)法和線性漸變相似。

———6 盒子模型———

39.盒子模型的組成：

content網(wǎng)頁(yè)內(nèi)容、border邊框、padding內(nèi)邊距、margin外邊距

(1)邊框border：

border-color 邊框顏色：如border-color:#369 #000 #111 #F00;按“上右下左順時(shí)針”設(shè)置

border-width 邊框粗細(xì)：如細(xì)thin、中等medium、粗的thick

border-style 邊框樣式：常用none無(wú)邊框、dotted點(diǎn)線邊框、dashed虛線邊框、solid實(shí)線邊框

border 簡(jiǎn)寫(xiě):如下邊框border-bottom:9px red dashed;四條邊框border:9px blue solid;

(2)margin外邊距：盒子邊框以外和其他盒子間的距離

margin-top:上外邊距、margin-bottom：下外邊距

margin-left：左外邊距、margin-right：右外邊距

margin：簡(jiǎn)寫(xiě)”上右下左”

auto：設(shè)置盒子在它的父容器里居中顯示。如margin:0px auto;讓整個(gè)盒子居中。

如果將元素的 margin設(shè)為負(fù)值，則元素會(huì)變大。

(塊元素可以把左右頁(yè)邊距設(shè)置為”自動(dòng)”中心對(duì)齊。margin:auto;但前提寬度不能是100%)

注意：很多標(biāo)簽都有自身默認(rèn)的外邊距，所以一般用并集選擇器統(tǒng)一設(shè)置這些標(biāo)簽的外邊距為0px,這樣不會(huì)產(chǎn)生不必要的空隙。

如清除body和h2自帶的外邊距 body,h2{margin:0px;}

(3)padding內(nèi)邊距：

padding-left、padding-right、padding-top、padding-bottom、

padding”上右下左”

40.盒子模型的尺寸：

增加邊框、內(nèi)邊距、外邊距后不會(huì)影響內(nèi)容區(qū)域的尺寸，但會(huì)增加盒子模型的總尺寸。

(1)內(nèi)盒總尺寸 = border(上下/左右)+padding(上下/左右)+內(nèi)容寬/高度

(2)整個(gè)盒子的寬度 = 內(nèi)容寬度+左右padding+左右邊框border+左右margin

41.box-sizing拯救布局

(語(yǔ)法)box-sizing:content-box、border-box、inherit

(1)content-box：盒子的寬度或高度=border+padding+(margin)+width/height

(2)border-box：盒子的寬或高度等于元素內(nèi)容的寬或高度

(即 該內(nèi)容寬/高度=盒子寬/高度-border-padding )

(3)inherit：使元素繼承父元素的盒子模型模式。

42.border-radius圓角邊框：語(yǔ)法和邊框相似，只是四個(gè)邊框帶圓角

(語(yǔ)法)border-radius:length{1~4個(gè)數(shù)字};

(1)用border-radius制作特殊圖形

圓形：元素的寬度和高度必須相同。圓角半徑為元素寬度的一半，或直接設(shè)圓角半徑為50%

半圓形：元素的高度是寬度的2倍，且圓角半徑為元素的寬度值。

扇形：即制作四分之一圓形。”三同”元素寬度、高度、圓角半徑 “一不同”

43.盒子陰影：和文本陰影相似

(語(yǔ)法)box-shadow:inset x-offset y-offset blur-radius color;

inset：內(nèi)部陰影，可選。

x-offset：X軸水平位移，正值在右，負(fù)值在左。

y-offset：Y軸垂直位移，正值在下，負(fù)值在上。

blur-radius：模糊半徑可選，只能>=0 值越大陰影向外面積越大,邊緣越模糊。

——7 浮動(dòng)——

44.標(biāo)準(zhǔn)文檔流：元素根據(jù)塊元素或行內(nèi)元素的特性從上到下，從左到右的方式自然排列。

45.display屬性：用于指定標(biāo)簽的顯示方式

block：塊元素的默認(rèn)值，該元素前后自帶換行符

inline：行內(nèi)元素的默認(rèn)值，元素會(huì)顯示為行內(nèi)元素

inline-block：行內(nèi)塊元素，兼具行內(nèi)元素和塊元素的特性

none：元素不會(huì)顯示

46.Float：指定網(wǎng)頁(yè)元素向哪個(gè)方向浮動(dòng)

left左、right右、none默認(rèn)無(wú)(元素不浮動(dòng) 顯示在其文本出現(xiàn)的位置)

元素的水平方向浮動(dòng)，意味著元素只能左右移動(dòng)而不能上下移動(dòng)。

一個(gè)浮動(dòng)元素會(huì)盡量向左或向右移動(dòng)，直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹埂?/p>

浮動(dòng)元素之后的元素將圍繞它。

浮動(dòng)元素之前的元素將不會(huì)受到影響。

如果是右浮動(dòng)，后面的文本流將環(huán)繞在它左邊：

47.clear清除浮動(dòng)：當(dāng)子元素全部浮動(dòng)了，父級(jí)將包不住子元素會(huì)造成邊框塌陷，所以要清除浮動(dòng)元素對(duì)其他元素的影響。

48.clear屬性：規(guī)定元素的哪一側(cè)不允許其他浮動(dòng)元素。

left(左側(cè)不允許浮動(dòng)元素)、right(右側(cè)不允許)、

both(左右都不允許，常用于文本在圖片下方顯示)、

none(允許浮動(dòng)元素出現(xiàn)在兩側(cè))

49.解決父級(jí)邊框塌陷

(1)浮動(dòng)元素后加空的div，該div樣式要設(shè)置clear:both;margin:0px;padding:0px;

(2)設(shè)置父元素固定高度把邊框撐開(kāi)。

(3)父級(jí)添加overflow屬性:設(shè)置外層盒子的overflow:hidden。但此方法不能用于有下拉列表框的場(chǎng)景。

(4)父級(jí)添加偽類(lèi)after，推薦。

50.Overflow屬性：溢出處理，也可用于擴(kuò)展盒子高度。

1) visible 默認(rèn)溢出內(nèi)容可見(jiàn)，顯示在盒子外面

2) hidden 多出來(lái)的內(nèi)容被隱藏且沒(méi)有滾動(dòng)條

3) scroll 有垂直水平2條滾動(dòng)條，可查看多余內(nèi)容

4) auto 如果內(nèi)容溢出，自動(dòng)顯示滾動(dòng)條(只有垂直條)查看

5) inherit 繼承父特性

————8 定位網(wǎng)頁(yè)元素————

51.Position屬性：指定盒子的位置，相對(duì)它父級(jí)的位置或它自身應(yīng)該在的位置。

(1)static 默認(rèn)無(wú)定位，元素按照標(biāo)準(zhǔn)文檔布局。

(2)relative相對(duì)定位

a.特性:

1.以標(biāo)準(zhǔn)文檔流排版為基礎(chǔ)，相當(dāng)于它在原來(lái)位置偏移指定的距離。

2.元素位置偏移后，仍會(huì)保留原位置。

3.層級(jí)提高，可以遮蓋標(biāo)準(zhǔn)文檔流元素和浮動(dòng)元素。

b.使用場(chǎng)景：

相對(duì)定位可以不設(shè)偏移量，讓后面的絕對(duì)定位以它為祖先元素作基準(zhǔn)定位。

c.語(yǔ)法 position:relative,指定偏移量時(shí)：水平left(正值向右移)、right(正值向左),垂直top(正值向下)、bottom(正值向上)。如

div{ 
		position: relative;
		top:-20px;
		left:20px;
	}

(3)absolute絕對(duì)定位

a.特性：

1.以已定位的祖先元素作基準(zhǔn)定位，如果沒(méi)有定位的祖先元素，則以瀏覽器窗口為基準(zhǔn)定位。

2.元素位置偏移后，不保留原位置(其他元素可以用它原來(lái)的空位)

3.層級(jí)提高，可以遮蓋標(biāo)準(zhǔn)文檔流元素和浮動(dòng)元素。

4.設(shè)置絕對(duì)定位的元素脫離文檔流，對(duì)其他盒子的定位無(wú)影響

b.使用場(chǎng)景：下拉菜單、焦點(diǎn)圖輪播、彈出數(shù)字氣泡、特別花邊等。

(4)fixed固定定位

a.特性：直接以瀏覽器窗口為基準(zhǔn)定位，偏移位置不受窗口滾動(dòng)條滾動(dòng)的影響。

b.使用場(chǎng)景：窗口邊緣的固定廣告、返回頂部圖標(biāo)、邊緣固定導(dǎo)航欄等。

52.z-index屬性：設(shè)置定位元素的堆疊順序。默認(rèn)值0，值大的層位于值小層的上方。

(1)網(wǎng)頁(yè)中的元素都含有兩個(gè)堆疊層級(jí)，一個(gè)是未設(shè)置絕對(duì)定位時(shí)所處的環(huán)境，此時(shí)z-index是0；另一個(gè)是設(shè)置絕對(duì)定位時(shí)所處的堆疊環(huán)境，此時(shí)層的位置由z-index的值確定。

53.設(shè)置元素透明度的方法(通常兩種方法搜設(shè)置以適應(yīng)所有瀏覽器兼容)

(1)opacity:x x值為0~1，值越小越透明

(2)filter:alpha(opacity=x) x值為0~100，值越小越透明

——9 CSS3做網(wǎng)頁(yè)動(dòng)畫(huà)——

54.transform變形：

指效果的集合，如平移、旋轉(zhuǎn)、縮放、傾斜效果。

語(yǔ)法 transform:[transform-function]*;

其中transform-function是變形函數(shù)，如要設(shè)置多個(gè)，則中間以空格分開(kāi)。在用2D變形時(shí)要加瀏覽器兼容性前綴。

常用2D變形函數(shù)如下：

(1)translate(tx,ty)：

平移函數(shù)，將元素從原位置(基于X,Y坐標(biāo))移動(dòng)到指定位置上。

tx表示X軸(橫坐標(biāo))上移動(dòng)的向量長(zhǎng)度，正值向右，負(fù)值向左。

ty表示Y軸(縱坐標(biāo))上移動(dòng)的向量長(zhǎng)度，正值向下，負(fù)值向上。

(2)scale(sx,sy)：

縮放函數(shù)，定義寬高度(元素尺寸)的縮放比例，默認(rèn)值1。0~0.99縮小，大于1放大。

sx表示寬度即橫坐標(biāo)方向的縮放量。

sy表示高度即縱坐標(biāo)方向的縮放量。

(3)rotate(a)；

旋轉(zhuǎn)函數(shù)，只取一個(gè)值為度數(shù)值,單位deg表示角度°

正值順時(shí)針轉(zhuǎn)，負(fù)值逆時(shí)針轉(zhuǎn)。

rotate函數(shù)只旋轉(zhuǎn)，不改變?cè)匦螤睢?/p>

(4)skew(ax,ay)：

傾斜函數(shù)，取值為度數(shù)值，單位deg

ax表示水平方向即X軸的傾斜角度。

ay表示垂直方向即Y軸的傾斜角度。

55.3D變形函數(shù)：translate3d()平移函數(shù)、scale3d()縮放函數(shù)、rotate3d()旋轉(zhuǎn)函數(shù)

56.transition過(guò)渡：

指動(dòng)畫(huà)轉(zhuǎn)換的過(guò)程，如漸現(xiàn)、漸弱、動(dòng)畫(huà)快慢等。

通過(guò)指定屬性的初始狀態(tài)、結(jié)束狀態(tài)，在兩個(gè)狀態(tài)間通過(guò)平滑過(guò)渡的方式實(shí)現(xiàn)動(dòng)畫(huà)。

語(yǔ)法:[transition-property transition-duration

transition-timing-function transition-delay]*

(速記法)transition: 過(guò)渡屬性 過(guò)渡用時(shí) 過(guò)渡的動(dòng)畫(huà)函數(shù) 過(guò)渡的延遲時(shí)間

主要包括四個(gè)屬性值：

(1)transition-property：

過(guò)渡屬性，設(shè)置過(guò)渡或動(dòng)態(tài)模擬的CSS屬性

(2)transition-duration：

過(guò)渡用時(shí)，從舊屬性到新屬性的用時(shí)，單位為s

(3)transition-timing-function：

指定過(guò)渡函數(shù)、過(guò)渡速度,有以下方式：

• ease 速度由快到慢，逐漸變慢(默認(rèn))
• liner 勻速
• ease-in 越來(lái)越快(漸顯)
• ease-out 越來(lái)越慢(漸隱)
• ease-in-out 先加速再減速(漸顯漸隱)

(4)transition-delay：設(shè)置過(guò)渡是否延遲時(shí)間執(zhí)行。

注意：transition-duration指完成過(guò)渡需要的時(shí)間；transition-delay指過(guò)渡在什么時(shí)間之后觸發(fā)。

57.總結(jié)如何用transition實(shí)現(xiàn)過(guò)渡動(dòng)畫(huà)：

(1)在默認(rèn)樣式中聲明元素的初始狀態(tài)。

(2)聲明過(guò)渡元素之中狀態(tài)樣式，如懸浮狀態(tài)

(3)在默認(rèn)樣式中通過(guò)添加過(guò)渡函數(shù)，添加不同的樣式。

58.過(guò)渡的觸發(fā)機(jī)制：

(1)偽類(lèi)觸發(fā): :hover、 :active、 :focus、 :checked等

(2)媒體查詢：通過(guò)@media屬性判斷設(shè)備的尺寸、方向等。

(3)JavaScript觸發(fā)：用JavaScript腳本觸發(fā)。

59.animation動(dòng)畫(huà)

animation制作動(dòng)畫(huà)的步驟:

(1)通過(guò)類(lèi)似Flash動(dòng)畫(huà)的關(guān)鍵幀(@keyframes)聲明一個(gè)動(dòng)畫(huà)；

其中@keyframes稱(chēng)為關(guān)鍵幀，可以設(shè)置多段屬性。語(yǔ)法

@keyframes 動(dòng)畫(huà)名稱(chēng){
	from{ //css樣式代碼 }
	百分比1{ //css樣式 }
	百分比2{ //css樣式 }
	100%{ //css樣式 }
 }

(2)找到要設(shè)置動(dòng)畫(huà)的元素，調(diào)用關(guān)鍵幀已聲明的動(dòng)畫(huà)。

如 animation: spread(動(dòng)畫(huà)名) 2s linear(勻速);

60.animation動(dòng)畫(huà)的語(yǔ)法和屬性：

” animation: 動(dòng)畫(huà)名稱(chēng) 播放時(shí)間 播放方式 開(kāi)始播放的時(shí)間 播放次數(shù) 播放方向 播放狀態(tài) 動(dòng)畫(huà)時(shí)間之外的狀態(tài) “

其中屬性分別為：

animation-name 動(dòng)畫(huà)名稱(chēng)、

animation-duration 播放時(shí)間、

animation-timing-function 播放方式、

animation-delay 開(kāi)始播放的時(shí)間、

animation-iteration-count 播放次數(shù)(無(wú)限次用infinite)、

animation-diriection 播放方向、

animation-play-state 播放狀態(tài)、

animation-fill-mode 動(dòng)畫(huà)時(shí)間之外的狀態(tài)、

——HTML部分——

utf-8 和 utf8的使用

只有MySQL可以用”utf8″，但其他地方一律使用大寫(xiě)”UTF-8″。

網(wǎng)頁(yè)推薦使用長(zhǎng)后綴名.html

有的瀏覽器中直接輸出中文會(huì)出現(xiàn)中文亂碼，可加聲明<meta charset=”UTF-8″>

<!–HTML注釋–>

&nbsp //空格

&gt //大于號(hào)

&lt //小于號(hào)

&quot //雙引號(hào)

&copy //版本符號(hào)

<em></em>斜體

<img src=”地址” alt=”圖片代替文字” title=”鼠標(biāo)懸停提示” width=”” height=””/>

<a href=”鏈接網(wǎng)址” target=”目標(biāo)”>頁(yè)面間鏈接</a>

<!–1.頁(yè)面間鏈接：A頁(yè)到B頁(yè) 主要運(yùn)用于網(wǎng)頁(yè)導(dǎo)航–>

<a name=wo></a>

<a href=#wo>錨鏈接</a>

<!–2.錨鏈接：A頁(yè)甲位置到A頁(yè)的乙位置或A頁(yè)甲位置到B頁(yè)的乙位置 # 跳其他頁(yè)面要為href=”頁(yè)面名.html#錨鏈接”–>

<a?href=”mailto:bdqnWebmaster@bdqn.cn” target=”_blank”>功能性鏈接</a>

<!–3.功能性鏈接：在頁(yè)面中調(diào)用其他軟件功能，電子郵件”mailto: @bdqn.cn” qq msn–>

————

創(chuàng)建表格：

1、<table>：整個(gè)表格以<table>標(biāo)記開(kāi)始、</table>標(biāo)記結(jié)束，table在沒(méi)有添加css樣式之前，在瀏覽器中顯示是沒(méi)有表格線的。

2、<tbody>：如果不加<thead><tbody><tfooter> , table表格加載完后才顯示。加上這些表格結(jié)構(gòu)， tbody包含行的內(nèi)容下載完優(yōu)先顯示，不必等待表格結(jié)束后在顯示，同時(shí)如果表格很長(zhǎng)，用tbody分段，可以一部分一部分地顯示。（通俗理解table 可以按結(jié)構(gòu)一塊塊的顯示，不用等整個(gè)表格加載完后顯示。）

3、<tr>：表格的一行，所以有幾對(duì)tr 表格就有幾行。

4、<th>：表格的頭部的一個(gè)單元格，表格表頭，文本默認(rèn)粗體且居中顯示。

5、<td>：表格的一個(gè)單元格，一行中包含幾對(duì)<td>這行中就有幾個(gè)單元格。

6、表格中列的個(gè)數(shù)，取決于一行中數(shù)據(jù)單元格的個(gè)數(shù)。

7.設(shè)置樣式border-collapse:collapse;可以把雙線邊框線合并為一條線邊框。

<table border=”邊距寬度”>

<tr>

<td rowspan=”跨行數(shù)量” colspan=”跨列數(shù)量” align=”文本狀態(tài)”></td>

</tr>

</table>

————

表格可以添加標(biāo)題和摘要標(biāo)簽進(jìn)行優(yōu)化。

(1)摘要：

摘要的內(nèi)容不會(huì)在瀏覽器中顯示。作用是增加表格的可讀性(語(yǔ)義化)，使搜索引擎更好的讀懂表格內(nèi)容，還可以使屏幕閱讀器更好的幫助特殊用戶讀取表格內(nèi)容。

語(yǔ)法：<table summary=”表格簡(jiǎn)介文本”>

(2)標(biāo)題：

描述表格內(nèi)容，標(biāo)題的顯示位置：表格上方。

語(yǔ)法：

<table summary="表格簡(jiǎn)介">
    <caption>標(biāo)題文本</caption>
    <tr>
        <td>…</td>
    </tr>
</table>
————
<iframe></iframe>

內(nèi)聯(lián)框架iframe src=”引用頁(yè)面地址” name=”框架標(biāo)識(shí)名” frameborder=”邊框” scrolling=”是否出現(xiàn)滾動(dòng)條” noresize=”noresize”更改頁(yè)面大小

配合<a>標(biāo)簽的targer屬性及<iframe>標(biāo)簽的name屬性，可實(shí)現(xiàn)窗口間的關(guān)聯(lián)

//表單
文件域，ps：需要在表單中寫(xiě)入enctype="multipart/form=data" 屬性
<form method="提交方式" action="提交地址"> 
隱藏域：type="hidden"
只讀：readonly="readonly"
禁用：disabled="disabled"
<input type="text" name="名稱(chēng)" size="長(zhǎng)度" maxlength="最大長(zhǎng)度"/>
//password 密碼
//radio單選按鈕
<input type="radio" name="sex" value="男" id="nan"/>
<label for="nan">男</label>
<input type="radio" name="sex" value="女" id="nv"/>
<label for="nv">女</label>
checkbox多選按鈕
<input type="checkbox" name="n" value="1"/>

下拉列表

<select name="名稱(chēng)">
  <optoin value="值">1</option>
</select>mc 
文本域textarea
<textarea name="名稱(chēng)" rows="行高" cols="寬度"><textarea>

復(fù)合選擇器有：

. 類(lèi)選擇器

# id選擇器

空格 后代選擇器（交集、并集）

<link type="text/css" rel="stylesheet" href="css/style.css"/>鏈接式導(dǎo)入外部鏈接
<style type="text/css">
  @import url("css/stype.css");導(dǎo)入式
</typle>

優(yōu)先級(jí)： id選擇器>類(lèi)選擇器>標(biāo)簽選擇器

超鏈接偽類(lèi)：

.link 為點(diǎn)擊前

.visited 訪問(wèn)后

.hover 鼠標(biāo)懸停

.aotive 單擊未釋放

透明度

opacity:(范圍0~1)

filter:aplha(opcitive=透明度<(100)>);

:fouc-last-type:
:blur-first-type;
location.reload();
location.replay(.html);
history.back forward

————

在網(wǎng)頁(yè)中顯示一些計(jì)算機(jī)專(zhuān)業(yè)的編程代碼，當(dāng)代碼為一行時(shí)，使用<code>標(biāo)簽語(yǔ)法：<code>代碼語(yǔ)言</code>

注意：如果要插入多行代碼時(shí)不能使用<code>。多行代碼可以用<pre>。

語(yǔ)法：<pre>語(yǔ)言代碼段</pre>

<pre> 標(biāo)簽作用：預(yù)格式化的文本。被包圍在 pre 元素中的文本通常會(huì)保留空格和換行符。

超鏈接語(yǔ)法：

<a href="目標(biāo)網(wǎng)址" title="鼠標(biāo)滑過(guò)顯示的文本">鏈接顯示的文本</a>

title屬性的作用：鼠標(biāo)滑過(guò)鏈接文字時(shí)會(huì)顯示這個(gè)屬性的文本內(nèi)容。這個(gè)屬性能方便搜索引擎了解鏈接地址的內(nèi)容(語(yǔ)義化更友好)。

<a>標(biāo)簽可以鏈接Email地址，使用mailto能發(fā)送電子郵件。

如果mailto后面同時(shí)有多個(gè)參數(shù)的話，第一個(gè)參數(shù)必須以“?”開(kāi)頭，后面的參數(shù)每一個(gè)都以“&”分隔。

mailto寫(xiě)法：

<a href="mailto:yy@imooc.com ?subject=主題名稱(chēng) &body=郵件內(nèi)容">

當(dāng)用戶需要在表單中輸入大段文字時(shí)，需要用到文本輸入域。

語(yǔ)法：<textarea rows=”行數(shù)” cols=”列數(shù)”>文本</textarea>

1、<textarea>標(biāo)簽是成對(duì)出現(xiàn)的，以<textarea>開(kāi)始，以</textarea>結(jié)束。

2、cols ：多行輸入域的列數(shù)。

3、rows ：多行輸入域的行數(shù)。

4、在<textarea></textarea>標(biāo)簽之間可以輸入默認(rèn)值。

下拉列表進(jìn)行多選操作：在<select>標(biāo)簽中設(shè)置multiple=”multiple”屬性，就可以實(shí)現(xiàn)多選功能，在windows 操作系統(tǒng)下，進(jìn)行多選時(shí)按下Ctrl鍵同時(shí)進(jìn)行單擊（在 Mac下使用 Command +單擊），可以選擇多個(gè)選項(xiàng)。

通用選擇器作用是匹配html中所有標(biāo)簽，如 *{color:red}

為同一個(gè)元素設(shè)置了不同的CSS樣式代碼時(shí)，瀏覽器根據(jù)權(quán)值來(lái)判斷使用權(quán)值最高的樣式。

規(guī)則：

標(biāo)簽的權(quán)值為1，類(lèi)選擇符的權(quán)值為10，ID選擇符的權(quán)值最高為100。

!important有最高權(quán)值

!important要寫(xiě)在分號(hào)的前面，但注意當(dāng)網(wǎng)頁(yè)制作者不設(shè)置css樣式時(shí)，瀏覽器會(huì)按照自己的樣式來(lái)顯示網(wǎng)頁(yè)。并且用戶也可以在瀏覽器中設(shè)置自己習(xí)慣的樣式，比如有的用戶習(xí)慣把字號(hào)設(shè)置為大一些，使其查看網(wǎng)頁(yè)的文本更加清楚。這時(shí)注意樣式優(yōu)先級(jí)為：瀏覽器默認(rèn)的樣式 < 網(wǎng)頁(yè)制作者樣式 < 用戶自己設(shè)置的樣式，但 !important優(yōu)先級(jí)例外，權(quán)值高于用戶自設(shè)置的樣式。

什么是“置換元素”？

置換元素會(huì)根據(jù)標(biāo)簽屬性來(lái)顯示的元素。反之就是非置換元素了。

如img根據(jù)src屬性來(lái)顯示，input根據(jù)value屬性顯示，因此可知img和input是置換元素，同理textarea、 select也是置換元素。

————

段落排版：

(1)letter-spacing：?jiǎn)蝹€(gè)漢字間隔或單個(gè)字母間隔。

(2)word-spacing：按單詞來(lái)設(shè)置間隔。

——

1、border-style 邊框樣式：

dashed（虛線）| dotted（點(diǎn)線）| solid（實(shí)線）。

2、border-color 邊框顏色

3、border-width 邊框?qū)挾龋?/p>

thin | medium | thick。常用像素(px)。

4、當(dāng)margin(或padding或border)的left和right的值相同，如：

margin:10px 20px 30px 20px;

可縮寫(xiě)為：

margin:10px 20px 30px;

——

布局模型與盒模型一樣都是 CSS概念。布局模型建立在盒模型基礎(chǔ)上，不同于我們常說(shuō)的 CSS 布局樣式或 CSS 布局模板。CSS布局模板是外在的表現(xiàn)形式。

在網(wǎng)頁(yè)中，元素有三種布局模型：

1、流動(dòng)模型（Flow）

流動(dòng)（Flow）是默認(rèn)的網(wǎng)頁(yè)布局模式。特征：塊狀元素都會(huì)在所處的包含元素內(nèi)自上而下按順序垂直延伸分布，因?yàn)樵谀J(rèn)狀態(tài)下，塊狀元素的寬度都為100%。實(shí)際上，塊狀元素都會(huì)以行的形式占據(jù)位置。

流動(dòng)模型下，內(nèi)聯(lián)元素會(huì)在所處的包含元素內(nèi)從左到右水平分布顯示。

2、浮動(dòng)模型 (Float)

任何元素默認(rèn)是不能浮動(dòng)的，可用CSS定義為浮動(dòng)。

3、層模型（Layer）

讓html元素在網(wǎng)頁(yè)中精確定位，就像PhotoShop中的圖層一樣可以對(duì)每個(gè)圖層能夠精確定位操作。CSS定義了一組定位（positioning）屬性來(lái)支持層布局模型。

層模型有三種形式：

(1)絕對(duì)定位(position: absolute)

將元素從文檔流中拖出來(lái)，然后用left、right、top、bottom屬性相對(duì)最靠近它的一個(gè)帶有定位屬性的父包含塊進(jìn)行絕對(duì)定位。如果不存在這樣的父包含塊，則相對(duì)于body元素即相對(duì)于瀏覽器窗口。

(2)相對(duì)定位(position: relative)

元素在正常文檔流中的偏移位置。首先按static(float)方式生成一個(gè)元素(元素像層一樣浮動(dòng)了起來(lái))，然后相對(duì)于以前的位置移動(dòng)，移動(dòng)的方向和幅度由left、right、top、bottom屬性確定，偏移前的位置保留。

(3)固定定位(position: fixed)

始終位于瀏覽器窗口內(nèi)視圖的設(shè)置位置，不受文檔流動(dòng)影響，

另外屬性background-attachment:fixed;的作用也是設(shè)置背景圖片固定。

relative與absolute組合：

1、參照定位的元素必須是相對(duì)定位元素的前輩元素。

2、參照定位的元素必須加入position:relative。

3、定位元素加入position:absolute，便可以使用top、bottom、left、right來(lái)進(jìn)行偏移定位了。

設(shè)置顏色的方法：

1、英文單詞：p{color:red}

2、RGB顏色

由 R(red)、G(green)、B(blue)三種顏色比例來(lái)配色。

p{color:rgb(133,45,200)}

每一項(xiàng)的值可以是 0~255 的整數(shù)，也可以是0%~100% 的百分?jǐn)?shù)。如：

p{color:rgb(20%,33%,25%)}

3、十六進(jìn)制顏色

其原理也是 RGB 設(shè)置，每一項(xiàng)的值由 0-255 變成了十六進(jìn)制 00-ff。p{color:#00ffff;}

——

相對(duì)單位長(zhǎng)度值：

1、px像素

像素指的是顯示器上的小點(diǎn)(CSS規(guī)范中假設(shè)“90像素=1英寸”)。實(shí)際情況是瀏覽器和使用顯示器的實(shí)際像素值有關(guān)。

2、em

(1)元素給定字體的 font-size 值，如果元素的 font-size 為 14px，那么 1em = 14px；如果font-size 為18px，那么 1em = 18px。

如 p{font-size:12px; text-indent:2em;}意思首行縮進(jìn) 24px(即兩個(gè)字體大小的距離)

(2)當(dāng) font-size 設(shè)置為 em時(shí)，計(jì)算標(biāo)準(zhǔn)以它父元素的 font-size 為基礎(chǔ)。

如：<p>以這個(gè)<span>例子</span>為例</p>

p{font-size:14px} span{font-size:0.8em;}

這里 span 字體大小就為11.2px(14 * 0.8 = 11.2px)

3、%百分比

p{font-size:12px; line-height:130%}

設(shè)置行高(行間距)為字體的130%（12 * 1.3 = 15.6px）

塊狀元素沒(méi)有設(shè)置寬度時(shí)怎么居中?

1.加入 table 標(biāo)簽

2.設(shè)置 display: inline方法：顯示類(lèi)型設(shè)為行內(nèi)元素，進(jìn)行不定寬元素的屬性設(shè)置

3.設(shè)置 position: relative 和 left:50%。利用相對(duì)定位，將元素從左偏移50%實(shí)現(xiàn)居中。

——

隱性改變display類(lèi)型：

1. position : absolute;

2. float:left 或 float:right;

不論什么元素(display:none除外)，設(shè)置以上屬性之一，該元素的display顯示類(lèi)型就會(huì)自動(dòng)變?yōu)?以display:inline-block(行內(nèi)塊狀元素)方式顯示，此時(shí)可設(shè)置元素的 width 和 height，且默認(rèn)寬度不占滿父元素。

(如 a是行內(nèi)元素，直接設(shè)置它的 width 無(wú)效，但設(shè)置 position:absolute 絕對(duì)定位后就可以設(shè)置寬度)

文本格式化標(biāo)簽：

• <b> 文本加粗
• <strong>文本加粗(加重語(yǔ)氣)
• <i> 斜體字
• <em> 斜體(強(qiáng)調(diào)文字)
• <big> 字體放大
• <small> 字體縮小
• <sub> 定義下標(biāo)字
• <sup> 定義上標(biāo)字
• <ins> 插入字(字體下劃線)
• <del> 字體刪除線
• “計(jì)算機(jī)輸出” 標(biāo)簽：
• <code> 定義計(jì)算機(jī)代碼
• <kbd> 鍵盤(pán)輸入
• <samp> 定義計(jì)算機(jī)代碼樣本
• <var> 定義變量
• <pre> 預(yù)格式化文本(會(huì)保留文本的多個(gè)空格)
• 引文、引用、及標(biāo)簽定義：
• <abbr> 縮寫(xiě)
• <address> 地址聯(lián)系信息
• <bdo> 文字方向(設(shè)置dir=”rtl”為從右到左顯示)
• <blockquote> 長(zhǎng)文本引用(不會(huì)自帶雙引號(hào)，但會(huì)兩邊自動(dòng)縮進(jìn))
• <q> 短句引用語(yǔ)(自帶雙引號(hào))
• <cite> 定義引用、引證
• <dfn> 定義一個(gè)定義項(xiàng)目。

title=””屬性規(guī)定關(guān)于元素的額外信息。標(biāo)簽中加上title屬性可實(shí)現(xiàn)鼠標(biāo)移過(guò)時(shí)出現(xiàn)提示文字，如<p title=”提示”>

——

<base>元素:

描述了基本的鏈接地址/鏈接目標(biāo)，該標(biāo)簽作為HTML文檔中所有的鏈接標(biāo)簽的默認(rèn)鏈接:

<head>      
   <base href="www.baidu.com" target="_blank"/>      
</head>

提示：在HTML中，<base>標(biāo)簽沒(méi)有結(jié)束標(biāo)簽。

——

HTML 顏色值RGB

由紅(R)、綠(G)、藍(lán)(B)組成。

每個(gè)顏色的最低值為0(十六進(jìn)制為00)，最高值為255(十六進(jìn)制為FF)。

十六進(jìn)制值寫(xiě)法：#號(hào)后加3個(gè)或6個(gè)十六進(jìn)制字符。

三位數(shù)表示法為：#RGB，轉(zhuǎn)換為六位數(shù)表示為：#RRGGBB

——

常見(jiàn)的 URL Schemes

• http 超文本傳輸協(xié)議 以http:// 開(kāi)頭的普通網(wǎng)頁(yè)，不加密。
• https 安全超文本傳輸協(xié)議 安全網(wǎng)頁(yè)，加密所有信息交換。
• ftp 文件傳輸協(xié)議 用于將文件下載或上傳至網(wǎng)站。
• file 您計(jì)算機(jī)上的文件。

HTML5 多媒體標(biāo)簽

1. <embed> 定義內(nèi)嵌對(duì)象。HTML4不贊成，HTML5允許。
2. <object> 定義內(nèi)嵌對(duì)象。
3. <param> 定義對(duì)象的參數(shù)。
4. <audio> 定義聲音內(nèi)容
5. <video> 定義視頻或者影片
6. <source> 定義media元素的多媒體資源(<video>、<audio>)
7. <track> 規(guī)定media元素的字幕文件或其他包含文本的文件 (<video>、<audio>)

audio音頻設(shè)置

1.最好的解決方法：

下例使用兩個(gè)不同的音頻格式。HTML5 <audio> 元素會(huì)嘗試以 mp3 或 ogg來(lái)播放音頻。如果失敗，代碼將回退嘗試 <embed> 元素。

<audio controls height="100" width="100">
   <source src="horse.mp3" type="audio/mpeg">
   <source src="horse.ogg" type="audio/ogg">
   <embed height="50" width="100" src="horse.mp3">
</audio>

2.雅虎播放器使用免費(fèi)，提供一個(gè)小型的播放按鈕。

（1）如需使用它，需要把這段 JavaScript 插入網(wǎng)頁(yè)底部：

<script src="http://mediaplayer.yahoo.com/latest"></script>

（2）然后把MP3文件鏈接到頁(yè)面中，JS會(huì)自動(dòng)為每首歌創(chuàng)建播放按鈕如：

<a href="音頻路徑" >音樂(lè)1</a>
 <a href="horse.mp3">音樂(lè)2</a>
 <script src="http://mediaplayer.yahoo.com/latest"></script>

3.用超鏈接

以下代碼指向 mp3 文件鏈接。如果用戶點(diǎn)擊該鏈接，瀏覽器會(huì)啟動(dòng)”輔助應(yīng)用程序”來(lái)播放該文件：

<a href="horse.mp3">音樂(lè)1</a>

——

video視頻播放設(shè)置

1.最好的解決方法

下例中使用了4種不同的視頻格式。HTML 5 <video> 元素會(huì)嘗試以 mp4、ogg、webm其中一種格式來(lái)播放視頻。如果都失敗，則回退到 <embed> 元素。

HTML5的source + object + embed。
<video width="320" height="240" controls>
   <source src="movie.mp4" type="video/mp4">
   <source src="movie.ogg" type="video/ogg">
   <source src="movie.webm" type="video/webm">   
   <object data="movie.mp4" width="320" height="240">
	<embed src="movie.swf" width="320" height="240">
   </object> 
</video>

2.優(yōu)酷解決方案

如果要在網(wǎng)頁(yè)中播放視頻，可把視頻上傳到優(yōu)酷等視頻網(wǎng)站，然后在你的網(wǎng)頁(yè)中插入 HTML代碼即可播放視頻：

<embed  src="http://player.youku.com/player.php/sid/XMzI2NTc4NTMy/v.swf"
	width="480" height="400" 
	type="application/x-shockwave-flash">
</embed>

3.使用超鏈接

如果網(wǎng)頁(yè)包含指向媒體文件的超鏈接，大多數(shù)瀏覽器會(huì)使用”輔助應(yīng)用程序”來(lái)播放文件。

以下代碼指向 AVI文件的鏈接。如果用戶點(diǎn)擊該鏈接，瀏覽器會(huì)啟動(dòng)”輔助應(yīng)用程序”如 Windows Media Player 來(lái)播放該 AVI 文件：

<a href="www.baidu.com">播放該視頻</a>

HTML中如何鍵入空格？

1.用空格占位符&nbsp;

但&nbsp有不間斷的特性。即連續(xù)的&nbsp會(huì)在同一行內(nèi)顯示。即使有100個(gè)連續(xù)的&nbsp，瀏覽器也不會(huì)把它們回車(chē)拆行。

2.段落間距<p>、換行<br/>

3.用JS動(dòng)態(tài)給HTML添加空格：

例為照顧C(jī)SS樣式或照顧特殊效果的實(shí)現(xiàn)。如果你不單單想讓div之間是null，而是想動(dòng)態(tài)添加空格的話，這樣(jquery):

$("#id").innerHTML += " ";
——
display: none; 元素不顯示也不會(huì)占位
visibility: hidden;  元素只是隱藏但仍然占位置
visibility: collapse; 隱藏但不占空間，類(lèi)似display:none;
——
clip 剪輯一個(gè)絕對(duì)定位的元素。
clip : rect(top, right, bottom, left);

CSS 偽類(lèi)：

1.Anchor偽類(lèi) (偽類(lèi)如:link冒號(hào)和偽類(lèi)名之間不能有空格)

在支持 CSS 的瀏覽器中，鏈接的不同狀態(tài)可用不同的方式顯示：

• a:link {color:#FF0000;} /* 未訪問(wèn)的鏈接 */
• a:visited {color:#00FF00;} /* 已訪問(wèn)的鏈接 */
• a:hover {color:#FF00FF;} /* 鼠標(biāo)劃過(guò)鏈接 */
• a:active {color:#0000FF;} /* 已選中的鏈接 */

2.CSS類(lèi)和偽類(lèi)配合使用：

• p : first-child{ } 匹配父級(jí)中第一個(gè)<p>子元素
• p > i:first-child{ } 匹配所有<p>元素的第一個(gè) <i> 子元素
• p:first-child i{ } 匹配第一個(gè)<p>元素中的所有 <i> 元素
• ——
• White-space屬性：設(shè)置如何處理元素內(nèi)的空白。
• normal 默認(rèn)。空白會(huì)被瀏覽器忽略。
• pre 空白會(huì)被瀏覽器保留。其行為方式類(lèi)似 <pre>標(biāo)簽。
• nowrap 文本不會(huì)換行，文本在同一行上繼續(xù)，直到遇到<br/>為止。
• pre-wrap 保留空白符序列，但是正常地進(jìn)行換行。
• pre-line 合并空白符序列，但是保留換行符。
• inherit 從父元素繼承 white-space 屬性的值。

——

瀏覽器兼容前綴：

• -moz- 火狐等使用 Mozilla內(nèi)核的瀏覽器
• -webkit- 谷歌、Safari等使用 Webkit內(nèi)核的瀏覽器
• -o- Opera瀏覽器，使用Blink內(nèi)核
• -ms- IE，使用 Trident內(nèi)核

——viewport 是用戶網(wǎng)頁(yè)的可視區(qū)域。