頁面編碼（告訴瀏覽器是什麼編碼） 刷新和跳轉 關鍵詞 X-UA-Compatible Title網頁頭部信息 常用標簽 表格 實例： ...
1 Doctype 2 3 Doctype告訴瀏覽器使用什麼樣的html或xhtml規範來解析html文檔 4 5 有和無的區別 6 7 BackCompat：標準相容模式未開啟（或叫怪異模式[Quirks mode]、混雜模式） 8 9 CSS1Compat：標準相容模式已開啟（或叫嚴格模式[Standards mode/Strict mode]） 10 11 這個屬性會被瀏覽器識別並使用，但是如果你的頁面沒有DOCTYPE的聲明，那麼compatMode預設就是BackCompat,這也就是惡魔的開始 -- 瀏覽器按照自己的方式解析渲染頁面，那麼，在不同的瀏覽器就會顯示不同的樣式。如果你的頁面添加了那麼，那麼就等同於開啟了標準模式，那麼瀏覽器就得老老實實的按照W3C的標準解析渲染頁面，這樣一來，你的頁面在所有的瀏覽器里顯示的就都是一個樣子了。 12 13 功能14 15 Doctype告訴瀏覽器使用什麼樣的html或xhtml規範來解析html文檔, dtd文件則包含了標記、attributes 、properties、約束規則。 16 17 Meta(metadata information) 18 19 提供有關頁面的元信息，例：頁面編碼、刷新、跳轉、針對搜索引擎和更新頻度的描述和關鍵詞
頁面編碼（告訴瀏覽器是什麼編碼）
<meta http-equiv=“content-type” content=“text/html;charset=utf-8”>
刷新和跳轉
< meta http-equiv=“Refresh” Content=“30″> < meta http-equiv=”Refresh“ Content=”5; Url=http://www.autohome.com.cn“ />
關鍵詞
< meta name="keywords" content="專訪,11,43" >
X-UA-Compatible
與任何早期瀏覽器版本相比，Internet Explorer 8 對行業標準提供了更加緊密的支持。因此，針對舊版本的瀏覽器設計的站點可能不會按預期顯示。為了幫助減輕任何問題，Internet Explorer 8 引入了文檔相容性的概念，從而允許您指定站點所支持的 Internet Explorer 版本。文檔相容性在 Internet Explorer 8 中添加了新的模式；這些模式將告訴瀏覽器如何解釋和呈現網站。如果您的站點在 Internet Explorer 8 中無法正確顯示，則可以更新該站點以支持最新的 Web 標準（首選方式），也可以強制 Internet Explorer 8 按照在舊版本的瀏覽器中查看站點的方式來顯示內容。通過使用 meta 元素將 X-UA-Compatible 標頭添加到網頁中，可以實現這一點。 當 Internet Explorer 8 遇到未包含 X-UA-Compatible 標頭的網頁時，它將使用指令來確定如何顯示該網頁。如果該指令丟失或未指定基於標準的文檔類型，則 Internet Explorer 8 將以 IE5 模式（Quirks 模式）顯示該網頁。更多 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
Title網頁頭部信息
Link 1.css < link rel="stylesheet" type="text/css" href="css/common.css" > 2.icon < link rel="shortcut icon" href="image/favicon.ico">
Style 在頁面中寫樣式 例如： < style type="text/css" > .bb{ background-color: red; } < /style> Script
引進文件 < script type="text/javascript" src="http://www.googletagservices.com/tag/js/gpt.js"> </script > 寫js代碼 < script type="text/javascript" > ... </script >
常用標簽
標簽一般分為兩種：塊級標簽和行內標簽
行內標簽:a、span、select 等#頁面展示的時候是一整行
塊級標簽:div、h1、p 等#頁面展示的時候是一整塊
各種符號
http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html
因為類似<div>這個是不可以直接顯示出來的，所以需要通過特定的符號來展示 <div >
p 和 br
p表示段落，預設段落之間是有間隔的！
br 是換行
a標簽 < a href="http://www.autohome.com.cn"> </a> 1、target屬性，_blank表示在新的頁面打開 2、錨
H 標簽
H1 H2 H3 H4 H5 H6
select 標簽 <select> <option value='1'>上海</option> <option value='2'>北京</option> <option value='3' selected='selected'>廣州</option> selected='selected'表示模式選中，而value所定義的值是用來提交給後臺進行數據操作的，提交1就表示是上海 </select> <select multiple="multiple" size='2'> multiple 表示可以多選 size 規定下拉列表中可見選項的數目 <optgroup> 標簽可以把相關的選項組合在一起，label 為選項組規定描述，分組的功能 <select> <optgroup label='河北省'> <option>石家莊</option> <option>邯鄲</option> </optgroup> <optgroup label='山西省'> <option>太原</option> <option>平遙</option> </optgroup> </select>
<input type = "checkbox/radio/text/password/button/submit/file" name='xx' /> Checkbox 覆選框 radio 單選框 在單選框中，如果需要互斥的屬性，需要將name設置為同一個 text 文本框 password 密碼框 button 按鈕 submit 提交按鈕 會提交數據 file 上傳文件 提交文件時： enctype='multipart/form-data' method='POST'
多行輸入的文本框
<textarea>asdjoifjwe</textarea>
<form action='後臺url' method='POST'> NAME:<input name='username' type='txt'/> <br/> pwd:<input name='paswd' type='password'/> <input type='button' onclick='alert(123) 'value='提交'/> <input type='submit' value='提交'/>
</form>
name主要就是為了讓後臺獲取值
只要我的游標到了這一行會自動定位到文本框裡面
<label for='name2'>姓名:<input id='name2' type='txt'/></label>
三種列表樣式
<ul> <li>ul.li</li> <li>ul.li</li> <li>ul.li</li>
</ul> <ol> <li>ul.li</li> <li>ul.li</li> <li>ul.li</li> </ol> <dl> <dt>江蘇</dt> <dd>南通</dd> <dd>蘇州</dd> <dt>北京</dt> <dd>北京</dd> </dl>
表格
<table> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>2</td> <td>3</td> </tr> </table>
<table border='1'> border標簽 <tr> <th>1</th> 標題th <th>2</th> </tr> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>2</td> <td>3</td> </tr> </table>
colspan='2'合併行
rowspan='2'合併列
樣式
<fieldset> <legend>登錄</legend> <p>用戶名：</p> <p>密碼：</p> </fieldset>
實例：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv=“content-type” content=“text/html;charset=utf-8”> 5 <title>頁面一</title> 6 </head> 7 8 <body> 9 10 <h1>哈哈</h1> 11 <div><div></div> 12 <div>bill</div> 13 <div>bill</div> 14 <span>shaobing</span> 15 <span>shaobing</span> 16 <p>ninini nnnnnnmn</p> 17 <p>fsdfwejoifjsdafwen <br/>fsdfewf wefsadf</p> 18 <a href='http://www.baidu.com' target='_blank'>bill</a> 19 20 目錄： 21 <div> 22 <a href='#id1'>第一章</a> 23 <a href='#id2'>第二章</a> 24 <a href='#id3'>第三章</a> 25 </div> 26 內容： 27 <div id='id1'>第一章內容</div> 28 <div id='id2' style='height:1000px;background-color:red'>第二章內容</div> 29 <div id='id3'>第三章內容</div> 30 31 32 <select> 33 <option value='1'>上海</option> 34 <option value='2'>北京</option> 35 <option value='3' selected='selected'>廣州</option> 36 </select> 37 38 39 40 <select> 41 <optgroup label='河北省'> 42 <option>石家莊</option> 43 <option>邯鄲</option> 44 </optgroup> 45 <optgroup label='山西省'> 46 <option>太原</option> 47 <option>平遙</option> 48 </optgroup> 49 </select> 50 51 <input type='text'/> 52 <input type='password'/> 53 54 <input type='checkbox'/> 55 <input type='checkbox'/> 56 <input type='checkbox'/> 57 <input type='checkbox'/> 58 59 男：<input type='radio' name='nimei'/> 60 女：<input type='radio' name='nimei'/> 61 中：<input type='radio' name='nimei'/> 62 <br/><br/><br/><br/><br/> 63 <input type='button' value='提交'/> 64 <input type='submit' value='提交'/> 65 66 <br/><br/><br/><br/><br/> 67 68 <input type='file' /> 69 <br/> 70 71 <textarea>asdjoifjwe</textarea> 72 <br/> 73 74 <form action='後臺url' method='POST'> 75 NAME:<input name='username' type='txt'/> 76 <br/> 77 pwd:<input name='paswd' type='password'/> 78 <input type='button' onclick='alert(123) 'value='提交'/> 79 <input type='submit' value='提交'/> 80 </form> 81 82 83 <br/><br/><br/> 84 <label for='name2'>姓名:<input id='name2' type='txt'/></label> 85 86 <ul> 87 <li>ul.li</li> 88 <li>ul.li</li> 89 <li>ul.li</li> 90 </ul> 91 92 <ol> 93 <li>ul.li</li> 94 <li>ul.li</li> 95 <li>ul.li</li> 96 </ol> 97 98 <dl> 99 <dt>江蘇</dt> 100 <dd>南通</dd> 101 <dd>蘇州</dd> 102 <dt>北京</dt> 103 <dd>北京</dd> 104 105 </dl> 106 107 <br/><br/><br/> 108 109 <table border='1'> 110 <tr> 111 <th>1</th> 112 <th>2</th> 113 </tr> 114 <tr> 115 <td>1</td> 116 <td>2</td> 117 </tr> 118 <tr> 119 <td>2</td> 120 <td>3</td> 121 </tr> 122 </table> 123 124 125 <br/><br/><br/> 126 <table border='1'> 127 <thead> 128 <tr> 129 <th>1</th> 130 <th>2</th> 131 </tr> 132 </thead> 133 <tbody> 134 <tr> 135 <td colspan='2'>1</td> 136 <td>2</td> 137 </tr> 138 <tr> 139 <td rowspan='2'>1</td> 140 <td>2</td> 141 </tr> 142 <tr> 143 <td>2</td> 144 <td>3</td> 145 </tr> 146 </tbody> 147 </table> 148 149 <br/><br/> 150 151 <fieldset> 152 <legend>登錄</legend> 153 <p>用戶名：</p> 154 <p>密碼：</p> 155 </fieldset> 156 </body> 157 158 </html>
