最近看了看PHP的東西，看之前又翻 了翻前端頁面腳本的知識。略微整理，放在這裏，權作記錄。大家如果要看看，也權當基礎參考資料。
本文知識參考：
《HTML與CSS入門經典 第七版》（美）Dick Oliver； Michael Morrison
《CSS網站佈局實錄--基於web標準的網站設計指南 第二版》李超
--------------------------------------------------------------------------------------------------
一.首先要知道的東西。
XHTML編程時：
1.有標記和屬性兩部分
2.不區分大小寫，建議全部使用小寫，規範化
3.多個屬性使用空格分開，每個屬性幾乎都是可選的，屬性的值使用雙引號，規範化【可以使用單引號、雙引號、不加引號（使用雙引號）】eg.<font color=“red” size=“7”>
4.註釋方法： <!-- 註釋內容 -->
注意：在註釋中不能再有註釋，在註釋掉的標記之後，要保證還是一個結構完好的文檔。
5.使用回車或空格進行代碼排版，任何回車或空格在源代碼中都不起作，如果需要空格需使用字符實體。
字符實體：以&開頭，一個實體名或是使用#號和一個體編號，以分號;結束
eg.< 就是 < 或 <
> 就是 > 或 >
二.大體結構：
<html>
<head>
這裏是頭信息，不會顯示在瀏覽器中，包括基本的描述，整個網頁的公共屬性
<title>網頁標題</title>
顯示在標題欄中，有利搜索引擎
<base>
用於設定瀏覽器中文件的絕對路徑，網頁中的文件只需要寫下文件的相路徑即可，這個路徑就是base中指定下的路徑
<link rel="stylesheet" type="text/css" href="test.css">
用來鏈接css文件
<meta name="keywords" content="frank,blog">關鍵詞
<meta name="description" content="這是frank的博客">描述
<meta name="robots" content="index">機器人
<meta name="author" content="frank">作者
<meta name="copyright" content="2011 frank">版權
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta http-equiv="refresh" content="3000;url=http://www.baidu.com">
<meta http-equiv="expires" content="0">
<meta http-equiv="Windows-Target" content="_top">
<meta http-equiv="Page-Enter" content="revealTrans(Transition=5,Duration=1.000)">
</head>
<body>
是網頁文件的主體部分,正文 ：文字、圖片、鏈接、表單等
</body>
</html>
文檔類型定義DTD：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
三.標籤：
格式標籤：
<br /> 換行
<p> 段落
<hr /> 水平分隔線
<ul><li> 無序列表，可以加屬性style="list-style-style:disc",disc實心圓圈/circle空心圓圈/square實心方框三種
<ol><li> 有序的列表，可以加屬性style="list-style-style:upper-roman",upper-roman羅馬數字/upper-alpha大些字母/lower-alpha小寫字母三種
通常都使用圖片替換列表序號符
不常用：
<center> 居中
<pre> 保留文字在源代碼中的格式
文本標籤：
<hn>如：h1 h2 h3
調整字體儘量使用css：例子：
<p style="font-family:arial;font-size:12pt;font-weight:bold;color:red;"></p>
對部分內容進行格式化，使用<div></div>或者<p></p>,<p>可以調整整個段落，對每一行細微調整使用<span></span>
<b>粗體，同<strong>
<i>斜體，同<em>，以上二者儘量都使用後者
不常用的有：
<u>
<sub>上標<sup>下標
<font><tt><cite><small><big>
鏈接：
鏈接網頁內部：
<a id="abc"></a>然後<a href="#abc">點我到abc看</a>
鏈接網頁：
<a href="abc.html">abc</a>
鏈接到另一網頁特定部分：
<a herf="abc.html#xyz">到abc網頁的xyz部分看</a>
鏈接到email地址：
<a href="mailto:[email protected]">send me a message</a>
主題和郵件地址之間使用?，主題和內容之間使用#的字符實體&
<a href="mailto:[email protected]?subject=book&body=when is the next edition come out?">mail me</a>
也可以使用字符實體替換地址中的字母，防止垃圾郵件。
圖像：
<img src="abc.jpg" alt="說明文字" />標準要求alt屬性，圖像不顯示時可以看到alt中的文本，建議小圖像不添加說明時可以使用空alt=""
圖像鏈接：
<a href="abc.jpg"><img src="abc_sm.jpg" alt="abc" /></a>
水平對齊：
<div style="text-align:center"></div>
文本圍繞圖像：
<img src="abc.jpg" style="float:left" />
垂直跟文本對齊：
<img src="abc.jpg" style="vertical-align:middle" />有text-top、text-bottom、middle、baseline四種
指定寬和高：
<img src="abc.jpg" width="200" height="100">
使用圖像本來大小像素值，如果使用的值比原圖小或大，會通過瀏覽器壓縮或放大圖像，可能會失真。
顏色：
可以使用名稱，有十幾種：blank white red green blue yellow magenta cyan purple gray lime maroon navy olive silver teal 還可以fuchsia aqua
用處：網頁背景顏色，文字顏色，鏈接顏色
<body style="background-color:teal;color:fuchsia">color指的是網頁文本，頁面中的文本還可以指定color來覆蓋上面的顏色。
自定義顏色：
#rrggbb 紅綠藍三種
每一種的：00 33 66 99 CC FF 分別代表顏色深度的0% 20% 40% 60% 80% 100%
亮紅色就是FF00000 藍紫色660099 中灰色999999 深綠色003300
<body style="background-color:#FF0000;color:#003300">
注意：因爲不同計算機顯示環境不同，所以要儘量使用顏色名稱。
使用背景圖片平鋪：背景圖像在背景色之上覆蓋
<body style="background-image:url(abc.jpg)">
平鋪方法：默認是repeat,就是在x和y方向重複。有repeat/repeat-x/repeat-y/no-repeat
<body style="background-image:url(abc.jpg);background-repeat:repeat-x">
使用透明圖像：gif或png，gif只支持一種透明顏色，png效果更好。
表格：
<table>
<tr>開始一行，<td>一個單元格，<th>一個表頭的單元格（瀏覽器會居中並加粗文字），可以用任何數量的單元格，但是每行應包括相等數量的列,解決：使用colspan屬性跨越多列。
<table>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
colspan跨越多列，rowspan跨越多行。<th colspan="2">A</th>
編寫表格的html現在紙上畫出草稿可以節省時間。
表格或單元格的背景顏色和背景圖片：
<td style=""bankground-color:silver">
<td style=""bankground-image:url(abc.jpg)">
border:表格邊框粗細
cellspacing:邊框之間間距，單位像素
cellpadding:單元格中信息與四周的間距（會使表格放大或縮小），單位像素，0表示靠近邊框
<table border="2" cellpadding="4" cellspacing="2">
css中，上述兩項爲border-spacing和padding，當前瀏覽器對css這兩項屬性意見不一，先暫時不使用。
CSS基礎部分
佈局屬性：包括寬度，高度，邊距，填充，對齊方式，或準確位置。
display:block; 有block,list-item,inline,none四種
width height,單位有點pt，像素px，英寸in，釐米cm，毫米mm，最好統一單位，如字體用pt，尺寸用px。
格式化屬性：控制外觀。
border:四周的一個可見的邊框。
border-width:5px; 邊框寬度
border-color:blue;
border-style:dotted; 有值：solid單實線,double雙實線,dashed虛線,dotted點線,groove溝線,ridge脊線,inset內陷邊框,outset外凸邊框,none無邊框(默認)
border-left,border-right,border-top,border-bottom單獨爲每一邊設置邊框
border:10px double red;border可以後接border-width、border-style、border-color
color:black;指的是文字顏色
bankground-color:orange;文字背景顏色
text-align:center;內容的對齊，有left、right、center
text-indent:12px;內容從左邊的縮進距離
font-family:arial;逗號分隔優先順序的字體
font-size:12pt;通常用點做單位
font-style:italic;斜體或正常
font-weight:medium;粗體程度
樣式類class
<h1 class="abc">abc</h1>
h1.abc{font:36pt arial;}
<div class="abc">abc</div>
div.abc{font-size:12pt;}
幾個不常用的格式化文本屬性：
font-variant:small-caps; 小型大寫字母，有small-caps和none兩種
letter-spacing:5px;字母間距
word-spacing:10px;單詞間距
text-transform:uppercase;自動轉換字母大小寫。none默認，uppercase轉爲大寫，lowercase轉爲小寫，capitalize首字母大寫
鏈接外觀：
四種鏈接狀態：link,hover,active,visited
用僞類操作(使用冒號)：
a:link{
color:#19619A； 淡藍色
font-weight:bold; 粗體
text-decoration:none; 去掉下劃線
}
css代碼註釋：用於內部或外部樣式表
/* css commment */
css技巧：
通用類：
.abc{font-weight:bold;} 作用於支持font-weight屬性的所有abc類的標籤
指定多個選擇符：
a:link,a:visited,a:active{略}
混合樣式類：
a.abc:link,a:abc:visited,a.abc:active{略}
a.abc:hover{略}
ID類：內容中指定所屬ID類，樣式規則中使用#開頭規劃樣式，不鼓勵這樣做，因爲XHTML要求一個網頁中每個id屬性是唯一的。
CSS佈局知識：
相對定位：與原始位置相對的定位，原位置仍佔位。具體定位的top和left是相對於父對象，即相對於“根據父對象定位好的它自身的本來位置”。
絕對定位：絕對定位是參照瀏覽器定位的，如果想依照父對象來絕對定位，需要加上一個父對象，並使其爲相對定位，然後子對象絕對定位，這樣控制。
position:
relative 相對
absolute 絕對
四個屬性:right右邊的邊緣偏移，left左邊的邊緣偏移，top頂部邊緣偏移，bottom底部邊緣偏移。這四個屬性用在絕對定位和相對定位時的情況不同。絕對定位時，是根據邊緣對父元素邊緣的距離；相對定位時，是元素邊緣對本來相對位置的偏移。
絕對定位時可以重疊，z-index值大的在上面。
邊距margin：針對元素周邊空間
margin所有邊距，margin-top上邊距，margin-bottom下邊距，margin-left左邊距，margin-right右邊距。單位是px和%，%代表的是相對整個頁面的百分數
邊距只顯示在元素四周。
簡化寫法：一個值代表四周，兩個值代表上下的和左右的，四個值按順序代表上下左右。
eg.margin:5px 10%;
填充padding：針對元素內部空間
也是padding,padding-top,padding-bottom,padding-left,padding-right
水平對齊text-align:值有left,right,center,justify(兩端對齊)
垂直對齊vertical-align:值有top,middle,bottom,text-top,baseline,text-bottom,sub,super。
二者都是相對父元素來說的，比如內聯元素垂直對齊只是在同一行內來說。
文本與圖像：
float:文本繞圖像排列。值有left和right
clear:清除浮動。不繞圖像排列。值有none，left，right，both
overflow:元素過小文字要溢出出的規則。visible自動擴大，hidden隱藏溢出的文本，scroll出現滾動條。
XHTML表單：
文本框：
Your first name:<input type="text" size="20" maxlength="30" name="firstname"/>
size:寬度爲多少字符 maxlength:最多輸入字符數
複選框：
<input type="checkbox" name="a1" checked="checked" />a1<br />
<input type="checkbox" name="a2" />a2
checked表示默認選擇,元素和內容如果靠的太近，則加個空格(舉例：……/> 內容)
超過兩個時，name一樣，value不同：
<input type="checkbox" name="abc" value="a1" checked="checked" />a1<br />
<input type="checkbox" name="abc" value="a2" />a2<br />
<input type="checkbox" name="abc" value="a3" />a3
單選按鈕：
<input type="radio" name="abc" value="a1" checked="checked" />a1<br />
<input type="radio" name="abc" value="a2" />a2
選擇列表：
<select name="abc" size="3" multiple="multiple"/>
<option selected="selected">a1</option>
<option>a2</option>
<option>a3</option>
</select>
size同時顯示多少項，數字比項目少時出現滾動條
size=1時是下拉列表:
<select name="abc">
<option>visa</option>
<option>mastercard</option>
</select>
multiple可同時選擇多項
文本區域（超過一行）：
<textarea name="comment" rows="4" cols="20">Please send more information</textarea>
提交：
默認submit和reset按鈕：value爲按鈕上文字
<input type="submit" value="Place My Order Now!" />
<input type="reset" value="Clear This Form and Start Over" />
或使用自己的圖像：<input type="image" src="abc.jpg" alt="Order Now!" />