之前寫過不少前端界面，但是沒有完整閱讀過一本HTML與CSS的書籍，都是用到什么查什么，最近閑暇之余想鞏固加深一下前端基礎方面的知識，閱讀了《Head First HTML與CSS》，感覺此書有點過於簡單了，但還是學到了不少，這里只記錄總結一些重要或自己之前並沒有太過注意的知識點。
1. 元素屬性的寫法：屬性名+等號（=）+用雙引號括起來的屬性值；
2. HTML中簡短引用元素：<q>...</q>，瀏覽器會負責加上雙引號，<q>一般作為現有段落的一部分，是內聯元素（inline），<blockquote>元素用於較長的引用，需單獨顯示，是塊元素（block）；
3. 換行：<br>，沒有實際內容，是void元素，<img>也是void元素，除要編寫XHTML兼容的頁面，一般都不使用<br/>；
4. <ol>有序列表，<ul>無序列表，<dl>為定義列表，每一項都有一個定義術語<dt>和一個定義描述<dd>；
5. 強調內容：<em>...</em>，特別強調<strong>；
6. <code>顯示計算機程序代碼，<time>顯示日期或時間，<pre>使瀏覽器按輸入的方式原樣顯示文本；
7. 建議<a>中的title屬性值與鏈接的Web頁面的<title>元素值相同，<a href="xxxx" title="所要鏈接的頁面的文本描述">xxxx</a>；
8. <a>元素可以帶一個id屬性，直接訪問頁面中的一個特定點，例如：
<h2 id="chai">Chai</h2>
<p>xxxx</p>
可以直接使用<a href="index.html#chai">See Chai Tea</a>，訪問到長文件中特定的位置；
如果在一個長文檔中，頂部有一個元素id為top，則在底部想要返回頂部，可以使用：<a href="#top">Back to top</a>；
9. 瀏覽器在一個新頁面打開鏈接：<a href="index.html" target="_blank">xxxx</a>；
10. JPEG適合連續色調圖像，如照片，是一種“有損”格式，不支持透明度和動畫；PNG適合單色圖像和線條構成的圖像，如logo，剪貼畫和圖像中的小文本，是“無損”格式的，壓縮式不會丟掉信息，允許透明 ；
GIF適合領域與PNG類似，“無損”格式，允許透明，支持動畫；
11. <img>元素在圖片加載失敗時，可使用alt屬性位訪問者提供提示，說明圖像中包含哪些信息，還可以調整圖像大小，具體如下：
<img src="http://www.baidu.com/test.png" alt="just for test." width="48" height="100">
12. 把圖片作為鏈接：
<a href="html/test_png.html">
<img src="img/test.png" alt="just for test.">
</a>
13. 相比於HTML 4.01，HTML5的doctype相當簡潔：<!doctype html>，指定字符編碼：<meta charset="utf-8">；
14. W3C的HTML驗證工具：http://validator.w3.org，CSS驗證工具：http://jigsaw.w3.org/css-validator/；
15. HTML編寫的一些原則：
- 一定要以<!doctype HTML>開頭；
- 在<head>中要包含正確的字符編碼<meta charset="UTF-8">；
- <head>中要包含<title>元素，一般在<head>中只放<meta>，<title>，<style>，<link>元素；
- 不允許在<img>等void元素中嵌套其他內聯元素；
- <img>元素中src和alt屬性都不可少；
16. 在<head>中引入外部CSS文件，<link rel="stylesheet" href="css/test.css">，<link>是一個void元素，href屬性可以是相對地址，也可以是完整URL；
17. 元素可以加入多個類，各個類名之間用空格分隔，例如： <p class="greentea blueberry redheart">...</p>，如果元素屬於多個類，且多個類中CSS都設置了相同的屬性，則會選擇CSS文件中最后 列出的那個規則；
18. CSS屬性：
- top,left分別控制元素頂部和左邊的位置；
- text-align控制文本左對齊，居中或右對齊；
- letter-spacing在字母之間設置間距；
- list-style改變列表中列表項的外觀；
- line-height設置文本元素中的行間距，如line-height: 1.6em；
- background-image設置背景圖片；
- p.classname選擇該類中的所有p元素；
- p#idname選擇id為idname的p元素；
19. font-family屬性定制頁面中使用的字體，共包括5個字體系列，sans-serif，serif，monospace，cursive，fantasy，其中最常用的還是sans-serif（無襯線）和serif（有襯線）；
例如：
body {
font-family: Verdana, Geneva, Arial, "Couries New", sans-serif;
}
可以使用web字體向用戶瀏覽器提供字體，使用CSS中的@font-face屬性，例如：
@font-face {
font-family: "Emblema One";
src: url("http://xxxxxxxxxx/xxx.woff"),
src: url("http://xxxxxxxxxx/xxx.ttf");
}
h1 {
font-family: "Emblema One", sans-serif;
}
FontSquirrel提供了Web字體托管服務；
20. font-size屬性控制字體大小，可以使用像素px，百分數%（相對於父元素），em（相對父元素），關鍵字四種方式指定字體大小，例如：
body {
font-size: 14px;(150%, 1.2em, small)
}
關鍵字，主要使用small和medimu，一般可指定它作為body規則中的字體大小，作為頁面默認字體大小，再使用em或百分數相對於body字體大小指定其他元素的字體大小；
21. font-weight改變字體粗細，一般使用bold和normal比較多，font-style為文本增加斜體風格，italic（斜體）和oblique（傾斜文本）；
22. 有時界面上我們不想讓鏈接有下划線，可以使用text-decoration: none;來去除下划線，text-decoration的值可以為line-through（刪除線），underline（下划線），overline（上划線）和
none（無裝飾）；
23. CSS元素盒模型：每個盒子由一個內容區、可選的內邊距（padding）、邊框（border）和外邊距（margin）組成；
24. background-image只是要設置一個元素的背景圖片，並不是用來在頁面中放置圖像，例如：
.classname {
background-image: url(image/background.gif);
background-repeat: no-repeat; /*repeat：水平垂直重復平鋪，no-repeat：不重復，repeat-x：只在水平方向重復，repeat-y：只在垂直方向重復，inherit：繼承父元素*/
background-position: top left; /*top，left，right，bottom，center*/
}
25. CSS中順序很重要，后面設置的會將前面設置的覆蓋掉；
26. 邊框樣式：border-style，共有8種樣式，solid（實線），double（雙線），groove（槽線），outset（外凸），dotted（虛線），dashed（破折線），inset（內凹），ridge（脊線）；
邊框寬度：border-width，可使用關鍵字（thin，medium，thick）和像素指定；
邊框顏色：border-color，值可為rgb(100%, 0%, 0%)，#ff0000，red幾種形式；
邊框圓角：border-radius: 15px，只指定左上角有圓角：border-top-left-radius: 3em;
27. 類名和id名都可以包含字母、數字和下划線，不能有空格，類名要以字母開頭，id名可以以數字開頭；
28. <link>元素中可以使用media屬性指定應用這個樣式表的設備類型，例如：
<link href="lounge-mobile.css" rel="stylesheet" media="screen and (max-device-width: 480px)">
也可以直接在CSS中指定，例如：
@media screen and (min-device-width: 481px) {
#guarantee {
margin-right: 30px;
}
}
@media規則中只包含特定於一種媒體類型的CSS規則；