#Head First HTML/CSS 讀書筆記（CSS篇）

05-06

寫在開始之前。

寫完上篇後就放假回家了，回家後事情比較多，但還勉強可以保持一天一章的速度，個人在第十一章「布局與定位」卡了幾天，感覺那一章需要聯繫的比較多，大寫需要注意一下。

這本書看完以後，下一本可能會是《Head First Servlets & Jsp》以及最近無聊學會了搭梯子，有機會也會分享給大家。

最後，歡迎大家關注與討論～

---

##第七章 CSS入門

1. p {

background-color:red;

}

// p 為選擇增加樣式的元素，叫做選擇器(selector)

// background-color 是指定你想要設置樣式的屬性

// 屬性和相應值之間有一個冒號，一句之後加一個分號

// 整個成為一個規則(RULE)

2. 規則放在<style>元素中

3. background-color 背景色

color 字體色

border 邊框可以設置粗細，虛實，顏色等

border-bottom 控制下邊框外觀

text-decoration 文本裝飾，包括上劃線(overline)，下劃線(ubderline)和刪除線(line-through)

在同一規則中可同時使用多個裝飾，中間用空格隔開，但若在不同規則中，則不累加，選一個

font-family 改變字體樣式 //注意計算機有可能未安裝部分字體

font-size 字體大小

font-weight 字體粗細

font-style 是否斜體

left 利用這個屬性指定一個元素左邊所在位置

line-height 文本元素中的行間距(leading)

top 控制元素頂部的位置

letter-spacing 這個屬性能夠在字母之間設置間距

padding 內邊距元素邊緣和它的內容之間的間距

text-align 將文本左對齊，居中或右對齊

background-image 這個屬性在元素後面放置一個圖像

4. 注意鏈接的顏色不會改變 //此處有問題

<a>,<em>會繼承<p>元素的font-family樣式

5. 合併用","連接 eg:h1,h2{ }

6. 一般把元素的所有共同樣式歸組在一起，然後把每個元素的特定樣式卸載另一個規則中，便於修改

7. border-bottom 下劃線會延伸到頁面邊緣

而使用文本下劃線的屬性text-decoration="underline"時，只會出現在文本下方

8. 只能對<body>中的元素增加樣式

9. 通常把CSS內容單獨創建.CSS文件，裡面沒有<style>標記，不包含任何HTML，稱作樣式表(stylesheets)

10. 要連接到外部樣式表，用<link>元素代替<style>

eg:<link type="text/css" rel="stylesheet" herf="lounge.css">

//type="text/css" 這是一個CSS樣式表，在HTML5中不再需要

//rel屬性指定了HTML文件與所鏈接的文件之間的關係

//樣式表放在這個herf中，此處用的是相對鏈接，也可以是個完整的URL

//<link>是一個void元素，沒有結束標記

11. sans-serif字體沒有襯線，看起來很清晰

默認的serif字體有襯線，通常認為這種字體在計算機屏幕上閱讀時會比較困難

12. CSS中的注釋用/* */表示

13. 將一個元素加入一個類，只需要增加屬性"class",並提供類名

14. 要在CSS創建一個類並選擇一個元素可以編寫一個類選擇器格式為元素名.類名{}

15. 只寫 .類名那麼這個規則會引用到這個類的所有成員

16. 有多個類名時，各個類名之間用一個空格分隔，類名的順序不重要

17. 如果出現特定程度相同的規則，由樣式表最後列出的規則決定

##第八章增加字體和顏色樣式

1. font-family 包含一組有共同特徵的字體，共五個字體系列

sans-serif 沒有襯線通常認為更容易在計算機屏幕上識讀

serif 有襯線讓人想到新聞報紙的文字排版

monospace 字體中不同字母所佔寬度相同，主要用於顯示軟體代碼的示例

cursive 包括看似手寫的字體

fantasy 包含有某種風格的裝飾性字體

2. 使用時可以指定多個字體名，用逗號分隔，最後通常用一個通用的字體系列名

瀏覽器能按順序選擇字體，如果字體包含空格，可以用""括起來

3. 使用Web字體(Web Font)

伺服器上存儲字體文件，字體文件包含Web頁面中使用這種字體時瀏覽器所需的一切信息

字體文件使用 .woff 文件擴展名這表示Web開放字體格式(Web open font format)

要用到CSS的特性: @fint-face規則

4. 字體格式還包括

TrueType字體: .ttf //IE8之前不可用

OpenType字體: .otf

Embedded OpenType字體: .eot //Microsoft專用僅IE提供支持

SVG字體: .svg

Web開放字體格式: .woff //IE8之前不可用

5. @font-face規則，放在body規則之上

與正常規則不同，@font-face規則會建立一個字體，並指定一個font-family名,名字可以隨便起

eg: @font-face {

fontfamily:"Emblema One";

src: url("http://xxx.woff"),

url("http://xxx.ttf");

}

之後在CSS中正常使用字體名即可

7. @font-face是一個內置CSS規則

@import 允許導入其他CSS文件，而不是HTML中通過一個<link>鏈入

@media 允許創建特定於某些"媒體"類型的CSS規則

8. 移動設備和小型設備並不支持Web字體，所以設計里一定要有候選字體

9. 要使用多個定製字體，需要為每個字體創建@font-face規則，並分別指定唯一的名字

不過每一個額外的字體都會增加額外的頁面載入時間

10. 指定像素數時，要數字+"px" 之間不能有空格說明字母最低部分與最高部分之間的長度

使用百分數指定字體大小時，就是相對於父元素的字體大小

使用em指定字體大小，是指定一個比例因子，是父元素字體大小的n倍

還有一種指定字體大小的方法:關鍵字

可以把字體大小指定為xx-small,x-small,small,medium,large,x-large,xx-large

每個大小約比前一個大20%，small通常定義為12px

11. 如何在大多數瀏覽器得到一致的字體:

選擇一個關鍵字(推薦small或medium)，指定它作為body規則中的字體大小，這相當於頁面的默認字體大小

再使用em或百分數,相對於body字體大小指定其他元素的字體大小，如此頁面上的所有字體都會自動的調整大小

12. 老版IE不支持文本縮放，所以最好不要用像素指定的方法

13. 字體粗細 font-weight 具有的屬性值

bold 粗體 normal 正常 bolder 更粗一點 lighter 更細一點

也可以是100-900之間的一個數(100的倍數)通常不使用，未得到廣泛支持

14. 字體風格 font-style

italic 斜體襯線彎曲不是所有字體都支持

oblique 普通傾斜

15. <em>要用來指定結構，表示強調<p>中的文本，而斜體是為了指定整個文本樣式

16. CSS顏色名不區分大小寫，，有16種基本顏色名較新的瀏覽器能找到150種擴展顏色

17. 指定顏色

用紅藍綠值指定顏色 eg: background-color:rgb(80%,40%,0%);

或: background-color:rgb(204,102,0); //0-255之間的數值 204=255×80%

使用十六進位碼指定顏色每組2位數字分別代表紅綠藍的分量 eg:#cc6600

若每組數字均相同，可以縮寫為#cbo,但#ccbb10 就不能使用縮寫

18. <del>元素標記某些內容為要刪除的內容

<ins>元素標記要插入的內容，與text-decoration的區別同上

##第九章盒模型(box model)

1. 每個元素就是一個盒子內容區(content area)包含內容，例如文本或圖像 //內容區中，內容與盒子邊緣之間沒有空間

內容區被可選的透明內邊距(padding)包圍

內邊距周圍可能放置一個可選的邊框(border)

邊框外有一個可選的透明外邊框(margin)包圍所有部分

2. 不能對內邊距和外邊距指定樣式，但因為他們是透明的，他們會呈現背景顏色或背景圖像。

區別是:元素的背景顏色或背景圖像會延伸到內邊距下面，但不會延伸到外邊距

3.盒模型CSS常用規則

.guarantee {

border-color: black;

border-width: 1px;

border-style: solid;

background-color: #a7cece;

padding: 25px;

margin: 30px;

background-image: url(images/background.gif);

background-repeat: no-repeat; //背景圖像不重複

// repeat 水平和垂直方面重複，是默認行為

// no-repeat 不重複

// repeat-x 只在水平方向重複

// repeat-y 只在垂直方向重複

// inherit 按照父元素的設置來繼承

background-position: top left; //位於左上角

// 可以像素指定或指定百分數或關鍵字，如top,left,right,bottom,center

padding-left: 80px;

//這裡順序很重要如果先設置padding-left 在設置padding, 前者會被後者覆蓋

margin-right: 250px; // 同上

}

4. border-style: solid; //實線

double //雙線

groove //槽線

ridge //脊線

outset //外凸

inset //內凹

doutted //虛線小點

dashed //破折線短劃

5. border-width: 5px;

thin

medium

thick

6. border-color: red;

rgb(100%,0%,0%)

#ff0000

7. 指定某一邊得邊框

border-top-color:black;

border-top-style:dashed;

border-top-width:thick;

8. 指定邊框圓角 border-radius:15px;

或 border-bottom-left-radius: 3em; //如果使用em,邊框半徑的度量相對於元素的字體大小

9. 對多個元素使用某個樣式時用class 如果只有一個元素需要加樣式，應該用id屬性

10. <p id="footer"> id屬性中不允許出現空格或其他特殊字元 //下劃線可以

一個元素不能有多個id

頁面上不允許多個元素都有相同的id

11. 在CSS中使用id

#footer { color: red; } 選擇id為"footer"的任意元素

或p#footer { color:red; } 選擇id為"footer"的<p>元素

12. 類名必須要以字母開頭，不過id名可以以一個數字或字母開頭

id和類名都可以包含字母數字以及下劃線，但不能有空格

13. <link>多張樣式表時，順序很重要，一個樣式表會覆蓋在它上面鏈接的樣式表中的樣式，最下面的樣式表最優先

14. media屬性媒體查詢在<link>元素中增加這個屬性，只使用適用於指定設備的樣式文件

15. media屬性還有 print //印表機

min-device-width //最大屏幕寬度

max-device-width //最小屏幕寬度

landscape(橫向) portrait(縱向) //顯示方向(orientation)

16. 直接在CSS中增加媒體查詢 //IE8之前版本不支持

@media screen and (min-device-width: 480px) {

#guarantee {

margin-right: 250px;

}

##第十章 div與span

1. 偽類 pseudo-classes 瀏覽器會在後台想這些類增加和刪除元素

2. 使用<div>標記邏輯區通常被稱為邏輯容器

3. width屬性設置瀏覽器寬度 width: 200px;

4. 一個塊元素的默認寬度是"auto",允許內容填滿可用的所有空間

5. 指定寬度可以是具體大小，通常按像素指定，也可以指定給一個百分數，那麼寬度會計算為元素所在容器寬度的一個百分比(容器可以是<body>,<div>等)

6. 一般高度是默認的，也就是auto，也可以設置顯式高度，但內容底部有可能"溢出"

7. text-align 文本對齊(包括圖像對齊) 有 center 等值

實際上它對所有內聯元素都會對齊，但只能在塊元素中，如果直接在內聯元素(如<img>)上不起作用

8. 子孫選擇器 div h2 { } 父元素和子孫元素名之間有空格，指出要選擇一個div子孫的所有<h2>

eg: #elixirs h2 { } 更複雜的選擇 #elixirs blockquote h2 { }

9. #elixirs>h2 表示選擇id為"elixirs"的元素的直接孩子<h2>

10. line-height屬性特殊用法，可以直接使用一個數

如使用1，就表示elixirs <div>中的各個元素行高是其自己字體大小的一倍

而不是elixirs <div>字體大小的一倍

還有一個normal關鍵字，允許瀏覽器選擇合適的行高大小

11. 距值快捷方式 padding: 0px 20px 30px 10px; //上右下左

若上下左右距值相同 padding: 20px;

若上下相同左右相同 padding: 0px 20px;

12. 邊框快捷方式 border: thin solid #007e7e; 可以任意順序

background屬性同border

13.簡寫形式 font: font-style font-variant font-weight //可選

font-size/line-height //字體大小必須指定，如果想設置行高，需要在size屬性後面加"/",然後指定需要的行高

font-family //必須指定一種字體，不過建議指定一些候選字體，family名之間要使用逗號分隔

eg: font: small/1.6em Verdana,Helvetica,Arial,sans-serif;

14. <em> <strong> 斜體和粗體表強調

15. <span> 創建內聯字元和元素的邏輯分組是內聯元素而<div>是塊元素

16. a:link { } //元素<a> 後面是一個":" 然後是我們想選擇的狀態，要確保選擇器之間沒有空格

eg:" a:link"是不行的

17. a:link { color: green; } 這個選擇器應用於處於未訪問狀態的鏈接

a:visited { } 這個選擇器應用於處於已訪問狀態的鏈接

a:hover { } 這個選擇器應用於處於懸停狀態的鏈接

還有focus狀態和active狀態 first-child和last-child等偽類

18. 如果讀者在一個屬性生命的最後加上"!important" 他就能覆蓋你的樣式

最優先的是作者的樣式，然後是讀者的樣式，最後是瀏覽器的默認樣壞死

19. P459 層疊規則

##第十一章布局與定位

1.流體布局 liquid layouts

流 Flow 就是瀏覽器在頁面上擺放HTML元素所用的方法

塊元素從上往下流，各元素之間有一個換行

內聯元素在水平方向上會相互挨著，總體上會從左上方流向右下方

2. 瀏覽器並排放置時，兩塊元素間距為它們的外邊距之和

垂直放置時，兩塊元素間距為最大的那個外邊距高度

// 只要兩個垂直外邊距噴在一起，就會摺疊，如果一個元素嵌套在另一個元素中也不例外

// 但外面的元素有一個邊框，那麼兩個元素就不會噴在一起，也就不會摺疊

3. 對於所有浮動元素，必須有一個寬度

float屬性可以設置為 left或right

其他塊元素會在浮動元素下面，彷彿沒有這個段落，而內聯元素定位時會考慮浮動元素的邊界

4. 中縫 gutter

5. 解決重疊問題，要用到clear屬性，可以設定為左邊，右邊或兩邊不允許有浮動內容

6. 不能浮動到中間，CSS只允許將一個元素向左或向右浮動

7. 注意當主內容區和浮動邊欄有可能有不一致的外邊距

8. 可以浮動內聯元素，例如圖像

9. 一般頁面是右緊左松的

10. 凍結布局 frozen layouts

11. 凝膠布局 Jello layouts 凝膠布局會鎖定頁面中內容去的寬度，不過會將他在瀏覽器中居中

只需將布局改為 margin-left: auto;

margin-right:auto; //這樣瀏覽器會自動顯示外邊距並確保左右邊距相同

12. 絕對定位 absolute positioning

在CSS中加入 #sidebar { position: absolute;

top: 100px;

right: 200px;

width: 280px;

}

絕對定位時，會從流中刪除，其他元素會完全忽略它，包括內聯元素

13. 絕對定位可以分層放置，有一個 z-index 屬性指定他在虛擬z軸上的位置，z越大越靠上方

14. position的默認值是 static(靜態)

還有fixed(固定)，將元素放在相對於瀏覽器窗口的一個位置上，而不是相對於頁面

relative(相對),會讓元素正常的流入頁面，不過在現實前要進行偏移

15. 可以對任何元素指定絕對位置，包括塊元素和內聯元素，只是任何元素一旦設置為絕對位置就會從流中刪除

16. 絕對定位不是必須要指定寬度的，塊元素會佔滿減去邊距後的整個瀏覽器寬度

17. 指定位置除了指定元素位置，還可以指定百分數，改變瀏覽器的寬度時，元素的位置可能會改變

18. CSS表格中只能放塊元素，所以要把圖像包圍在一個<div>中

19. CSS中表格樣式: div#tableContainer { display: table; }

行樣式: div#tableRow { display: table-row; }

列樣式: div#

單元格內: #main { display: table-cell; }

border-spacing屬性為單元格邊框間距，可以看作常規元素的外邊距

vertical=align: top 單元格中的所有內容相對於單元格上邊對齊,middle中間對齊,bottom底端對齊

20. border=spacing和外邊距創建的空間不會摺疊

第十二章 HTML5標記

1. 新元素 <article> 表示頁面的一個獨立組成部分，如帖子或新聞報道

<nav> 所包含的內容將作為頁面的導航鏈接

<header> 放在頁面頂部內容，或者放在頁面某個區塊的頂部

<footer> 放在頁面底部內容，或者放在頁面某個區塊的底部

<time> 可能包含一個日期或時間，也可能同時包括

<aside> 包含的內容是對頁面內容的補充，如插圖或邊欄

<section> 一個主題性分組，通常包括一個header，可能還有一個footer

<video> 用來為頁面增加視頻媒體

<mark> 用於突出顯示某些文本

<audio> 可以在頁面中包含聲音內容

<progress> 顯示任務完成的進度

<meter> 顯示某個範圍的度量比如溫度計

<canvas> 這個元素用來在頁面中顯示jsp繪製的圖像和動畫

<figure> 用來定義類似照片，圖片甚至代碼清單等獨立內容

實質等價於<div id="header">或<div id="foter">

2. 修改只需將 <div id="header">改為<header>,</div>改為</footer>

在CSS文件中將#header改為 header即可

3. <section>可以把相關的內容分組在一起

<article> 包含獨立的內容，如一個新聞報道，一個博客或一份簡短的報道

4. <time> datetime屬性 datetime="201-02-18 18:00Z" 如果在日期和實踐後面有一個Z，表示UTC時間

UTC 協調世界時 Coordinated Universal Time = GMT 格林威治時間 Greenwich Mean Time

eg: <time datetime="2012-03-12">3/1232012</time>

5. 導航CSS ul { list-style-type: none; } //刪除列表項的項目符號

ul li { display: inline; } // 從block改為inline，會像常規內聯元素

6. <video controls // 瀏覽器會提供一些控制視頻和音頻播放的控制項

autoplay // 一旦頁面載入就會自動播放注意autoplay和controls都是布爾屬性，沒有值

width_="512" height="288" // 頁面中視頻的寬度和高度

src="video/tweetsip.mp4" // 視頻的源位置

poster="images/poster.png" // 提供一個可選的海報圖像，視頻未播放時就會顯示這個圖像

id="video">

</video>

7. <video>其他注意點 preload屬性通常用於細粒度地控制視頻如何載入，來實現優化

值設為none //用戶播放視頻前部下載視頻

metadata //下載視頻元數據，但不下載視頻內容

auto //有瀏覽器自己決定

loop屬性也是一個布爾屬性，視頻結束後會自動化從新開始播放視頻

如果視窗不符合視頻大小，視頻會在上下加黑邊(letter-boxed)或左右加黑邊(pillar-boxed)來適應

8. <video controls autoplay width_="512" height="288">

<source src="video/tweetsip.mp4"> //瀏覽器從上向下查找，直到找到它能播放的格式

<source src="video/tweetsip.webm">//對於每個source元素，瀏覽器會載入元數據，看能不能播放，會很耗時

<p>Sorry</p>

</video>

9. 容器 container 用來包裝視頻，音頻和元數據的文件格式。常用的容器格式包括:MP4,WebM,0gg和Flash Video

編解碼器 codec 用來對一個特定視頻或音頻編碼完成編碼和解碼的軟體，流行的Web編解碼器包括:H.264,VP8,Theora,AAC和Vorbis

10. 更具體的指定視頻格式 <source src="video/tweetsip.ogv"

type=video/ogg; codecs="theora,vorbis"> //type是一個可選屬性，幫助它確定能不能播放這種類型

//codecsc參數指定使用哪個編碼器對視頻和音頻編碼來創建編碼的視頻文件

//注意codecs參數使用雙引號，type屬性兩邊需要使用單引號

//?並不會指定編碼器？

11. 對於Flash視頻，需要一個<object>元素。在<video>元素中插入<object>元素，把它放在<source>標記下面，如果瀏覽器不認識<video>元素，就會使用<object>

##第十三章表格與更多列表

1. <table> //標記開始表格

<tr> //這裡是第一行，用一個<tr>開始

<th>xxx</th> //每個<th>元素分別某一列的表頭。注意表頭是橫向排列的，是表示頭行。

</tr>

<tr>

<td>xxx</td> //第二行開始，每個<td>元素包含表格紅的一個單元格，<tr>構成了一行

</tr>

</table>

2. <table> <caption> xxx </caption> <tr></tr> </table> 給表格增加標題，顯示在表格上方

3. 可以在CSS中使用caption-side:bottom;將標題移到表格下方

4. border-spacing: 10px,20px; 邊框間距水平邊框間距垂直邊框間距

5. border-collapse: collapse; 邊框重疊

6. p:nth-child(even) { } 偶數段落 //也可以 p:nth-child(2n)

p:nth-child(odd) { } 奇數段落 //也可以 p:nth-child(2n+1)

7. <td rowspan="2"></td> 該行跨越兩行

<td Zcolspan="2"></td> 該行跨越兩行注意需要刪除同一行中的表格數據元素

8. li { list-style-type: disc (默認)/ circle / square / none ; }

9. 定製標記 li { list-style-image: url(xxx); }

10. 有序列表 list-style-type: decimal (十進位數) / upper-alpha (大寫字母) /

lower-alpha (小寫字母) / upper-roman (大寫羅馬數字) / lower-roman

11. list-style-position: inside (文本會在標記下迴繞) / outside (只在文本下迴繞) ？

##第十四章 HTML表單

1. <form //開始標記

action="Software mastery the fun way //action屬性包含Web伺服器的URL

/hfhtmlcss //腳本所在的文件夾

/contest.php" //將處理表單的數據的伺服器腳本的文件名有點繞？

method="POST"> //屬性確定表單數據如何發送到伺服器

</form> //結束標記

2. 文本輸入 text <input>元素用於輸入一行文本。它還有一些可選的屬性，允許你為這個控制項設置最大字元個數和寬度

<input type="text" //type屬性為"text"的<input>元素會在瀏覽器頁面中創建一個單行控制項

name="fillname"> //大多數表單元素都需要一個名字，伺服器腳本將使用這個元素名

//注意他是void元素，後面沒有結束標記

3. <input type="submit" value="Order Now">

//按鈕標籤默認為"Submit"(提交)或"Submit Query"(提交查詢) 按鈕名稱通過value修改

4. 單選按鈕輸入 radio <input> 單選鈕只允許從一組選項中選擇其一

<input type="radio" name="hotornot" value="hot"> //一組選項關聯的單選按鈕必須名字相同

<input type="radio" name="hotornot" value="hot"> //不過每個選項可以有不同的值

5. 複選框輸入 checkboc <input> 允許多選或不選

6. <textarea> 多行文本區，如果放不下，右側還會出現滾動條

7. <select>元素會在頁面創建一個菜單控制項。菜單提供從一組選項中做出選擇的方法

<option value="Buckaroo">Buckaroo Banzai</option>

<option value="Tommy">Perfect Tommy</option>

<option value="Penny">Penny Priddy</option>

</select>

8. number <input>元素會限制只能輸入數字，還可以指定元素允許的最小數和最大數

9. range <input>元素只會顯示一個滑動條，表示範圍輸入

10. color <input> 顏色輸入會彈出一個顏色選擇器，允許你選擇一個顏色

11. date <input> 日期輸入控制項會創建一個合法日期格式串

12. email <input> email輸入在移動瀏覽器上會得到一個更方便輸入email的定製鍵盤

13. tel <input> tel輸入在移動瀏覽器上會得到一個更方便輸入數字的定製鍵盤

14. url <input> url輸入在移動瀏覽器上會得到一個更方便輸入URL的定製鍵盤

15. 可以用maxlength="100" 來限制text <input>d的長度，當無法限制<textarea>的

16. 複選框只有一個名字，發送表單時會向伺服器發送 spice=salt&pepper&garlic ？沒有分號？

17. <input>是一個內聯元素，需要換行時要增加<br>

18. 如果為單選鈕輸入元素增加一個布爾屬性checked 瀏覽器會顯示錶單時默認選中那個元素

記住布爾屬性不需要值，如果有屬性輸入控制項就會選中？那如果有多個checked呢？

19. PHP希望得到提示表單變數可能包含多個值，如果使用複選框和PHP，最在名稱後加"[]",如"extras[]"

20. 向伺服器發送數據的方法: GET 和 POST

利用POST，所有表單數據會作為請求的一部分發送，對用戶是不可見的，用戶在地址欄里只能看見伺服器腳本的URL

eg:http://qq.com/css/test.php

利用GET，表單數據會追加到URL本身，所以用戶可以看到表單數據

eg:eg:http://qq.com/css/test.php?firstname=buckaroo&lastname=banzi

21. 如果希望用戶能夠對提交表單後的結果頁面加書籤就必須使用GET

如果你有一個處理訂單的伺服器腳本，就不希望加書籤，否則用戶返回時，都會重新提交訂單

如果使用<textarea>,就應該使用POST

22. <label>元素增加頁面可訪問性

<fieldset>和<legend>在視覺上對元素分組，；可以把公共元素組織在一起

？這兩個並沒看明白，用的時候再查吧？

23. password <input> 輸入文本會加掩碼 //不過注意表單數據並不會採用一種安全的方式從瀏覽器發送到伺服器腳本

24. file <input> 文件輸入允許你選擇一個文件，表單提交時，文件內容會隨其餘表單數據一同發送給伺服器。

注意你的伺服器腳本希望上傳一個文件，使用這個元素的前提是必須使用POST方法

25. <select name="xxx" multiple> 多選菜單

如果選項太多，會有一個滾動條。選擇是通過同時按下Ctrl或Command鍵，可以選擇多個選項

multiple是布爾屬性

26. placeholder屬性可以在文本區內提供一個提示，讓他了解你希望這個控制項中輸入什麼內容

這個屬性的值會顯示在控制項中，但比正常內容顏色淺一些，一旦單擊這個文本域，佔位文本就會消失。

27. required屬性布爾屬性

這個屬性同上可以用於任何錶單控制，表示這個域是必要的，必須填寫

##附錄

* 更多的CSS選擇器

1. 偽元素(Pseudo-element)選擇某些不便於包圍在<div>或<span>中

eg: p:first-letter {} //選擇一個塊元素中文本的第一個字母

p:first-line {} //選擇一個塊元素中文本的第一行

2. 屬性選擇器

eg: img[width] {} //選擇HTML中所有包含一個width屬性的圖像

img[height="300"] {} //選擇HTML中所有包含height屬性值為300的圖像

img[alt~="flowers"] {} //選擇alt屬性包含單詞"flowers"的圖像

3. 按兄弟選擇器

如果你希望只選擇前面有一個<h1>元素的段落 h1+p {} 先寫前面的元素，再寫兄弟元素

4. 結合選擇器

.blueberry p {} 選擇作為blueberry類的所有段落

構造一個複雜的選擇器: div#greentea > blockquote //id為"greentea"的<div>必須是<blockquote>的父元素

div#greentea > blockquote p //<p>元素必須是<blockquote>的子孫

div#greentea > blockquote p:first-line

* 開發商特定的CSS屬性

-moz-transform // 一個短橫線，開發商標識符，另一個短橫線，屬性

eg: <div> {

transform: rotate(45deg); //首先需要列出通用屬性 45度旋轉

-webkit-transform:rotate(45deg); //safari&chrome 特定屬性

}

* CSS變換和過渡

transition屬性在持續時間(duration)內變換完成如width或opacity

eg: transition: transform 2s; //transform沒有默認值，也就是說沒有變換

* 交互性

<sript> </script> ?下本書學習?

* HTML5 API和Web應用

深入書籍《Head First HTML5 Programming》

* Web字體

不允許瀏覽器載入多個字體故@font-face規則中不能列多個字體

* 創建Web頁面工具

* XHTML5&SVG&良構需要時候再看

* 伺服器端腳本

* 音頻

<audio>同<video> 主流有3種格式

深入書籍 Eric Meyer 《CSS Pocket Reference》
推薦閱讀：

※有哪些在伺服器端給網頁截圖的辦法？
※CSS究竟是怎麼工作的?
※如何實現 div的大小由背景圖片的大小決定？
※Razor 生成的html格式可以調整嗎？

TAG:HTMLCSS | 編程入門 | 前端入門 |