網頁主要由文字、圖像和超鏈接等元素構成。當然，除了這些元素，網頁中還可以包含音頻、視頻以及Flash等。
瀏覽器的內核
負責讀取網頁內容, 整理訊息, 計算網頁的顯示方式并顯示頁面。
| 瀏覽器 | 內核 | 備注 |
|---|---|---|
| IE | Trident | IE、獵豹安全、360極速瀏覽器、百度瀏覽器 |
| firefox | Gecko | 可惜這幾年已經沒落了，打開速度慢、升級頻繁、豬一樣的隊友flash、神一樣的對手chrome。 |
| Safari | webkit | 現在很多人錯誤地把 webkit 叫做 chrome內核（即使 chrome內核已經是 blink 了）。蘋果感覺像被別人搶了媳婦，都哭暈再廁所里面了。 |
| chrome | Chromium/Blink | 在 Chromium 項目中研發 Blink 渲染引擎（即瀏覽器核心），內置于 Chrome 瀏覽器之中。Blink 其實是 WebKit 的分支。大部分國產瀏覽器最新版都采用Blink內核。二次開發 |
| Opera | Presto | Presto（已經廢棄） 是挪威產瀏覽器 opera 的 "前任" 內核，為何說是 "前任"，因為最新的 opera 瀏覽器早已將之拋棄從而投入到了谷歌懷抱了。 現在用blink內核。 |
注意
移動端的瀏覽器內核主要說的是系統內置瀏覽器的內核。
Android手機而言，使用率最高的就是Webkit內核，大部分國產瀏覽器宣稱的自己的內核，基本上也是屬于webkit二次開發。
iOS以及WP7平臺上，由于系統原因，系統大部分自帶瀏覽器內核，一般是Safari或者IE內核Trident的
Web標準
由W3C組織和其他標準化組織制定的一系列標準的集合。
Web標準的好處:
1、讓Web的發展前景更廣闊
2、內容能被更廣泛的設備訪問
3、更容易被搜尋引擎搜索
4、降低網站流量費用
5、使網站更易于維護
6、提高頁面瀏覽速度
Web標準構成
HTML指的是超文本標記語言(Hyper Text Markup Lanugage)是用來描述網頁的一種語言。
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
| 標簽名 | 定義 | 說明 |
|---|---|---|
<html></html> |
HTML標簽 | 頁面中最大的標簽，根標簽 |
<head></head> |
文檔的頭部 | 注意在head標簽中我們必須要設置的標簽是title |
<titile></title> |
文檔的標題 | 網頁標題 |
<body></body> |
文檔的主體 | 元素包含文檔的所有內容，頁面內容 基本都是放到body里面的 |
常規元素(雙標簽)
<標簽名> 內容 </標簽名>
空元素(單標簽)
<標簽名/>
<!DOCTYPE> 聲明位于文檔中的最前面的位置，處于 <html> 標簽之前。此標簽可告知瀏覽器文檔使用哪種 HTML 或 XHTML 規范。
標題標簽 h
標題標簽語義: 作為標題使用, 并且依據重要性遞減
基本語法
<h1> 標題文本 </h1>
<h2> 標題文本 </h2>
<h3> 標題文本 </h3>
<h4> 標題文本 </h4>
<h5> 標題文本 </h5>
<h6> 標題文本 </h6>
段落標簽 p
?作用語義: 把文檔分割為若干段落
<p> 文本內容 </p>
水平線標簽 hr
作用語義: 默認樣式的水平線
<hr />
table 標簽
table 表格基本語法*
<table>
<tr>
<th>表頭內容</th>
</tr>
<tr>
<td>單元格內的文字</td>
</tr>
</table>
<tr> 代表一行 內只能嵌套<td><td> 代表單元格標簽可以容納所有的元素<th> 表頭元素表格屬性
| 屬性名 | 含義 | 常用屬性值 |
|---|---|---|
| border | 設置表格的邊框 | 像素值 |
| cellspacing | 設置單元格與單元格邊框之間的空白間距 | 像素值(默認為2px) |
| cellpadding | 設置單元格內容與單元格邊框之間的空白間距 | 像素值(默認為1px) |
| width | 設置表格的寬度 | 像素值 |
| height | 設置表格的高度 | 像素值 |
| alian | 設置表格再網頁鐘的水平對齊方式 | left, center,right |
表格標題 caption
定義和用法
<table>
<caption>表格標題</caption>
</table>
合并單元格
跨行合并: rowspan="合并單元格的個數"
跨列合并: colspan="合并單元格的個數"
合并的順序按照 先上 后下 先左 后右 的順序
例如: <td colspan = "3"> </td>
總結表格
| 標簽名 | 定義 | 說明 |
|---|---|---|
<table></table> |
表格標簽 | 就是一個四方的盒子 |
<tr></tr> |
表格行標簽 | 行標簽要再table標簽內部才有意義 |
<td></td> |
單元格標簽 | 單元格標簽是個容器級元素，可以放任何東西 |
<th></th> |
表頭單元格標簽 | 它還是一個單元格，但是里面的文字會居中且加粗 |
<caption></caption> |
表格標題標簽 | 表格的標題，跟著表格一起走，和表格居中對齊 |
clospan 和 rowspan |
合并屬性 | 用來合并單元格的 |
列表標簽
容器里面裝載著結構, 樣式一致的文字或圖標的一種形式, 叫列表
無序列表 <ul>
無序列表的各個列表項之間沒有順序級別之分, 是并列的。其基本語法格式:
<ul>
<li>列表項1</li>
<li>列表項2</li>
<li>列表項3</li>
······
</ul>
注意：
<ul></ul>中只能嵌套<li></li>, 直接再<ul></ul>標簽中輸入其他標簽或者文字得做法是不被允許.<li>與</li>之間相當于一個容器,可以容納所有元素。
有序列表 <ol>
有序列表即為有排列順序的列表，其各個列表項按照一定的順序排列定義，有序列表的基本語法格式如下：
<ol>
<li>列表項1</li>
<li>列表項2</li>
<li>列表項3</li>
······
</ol>
自定義列表<dl>
定義列表常用于對術語或名詞進行解釋和描述，定義列表的列表項前沒有任何項目符號。其基本語法如下：
<dl>
<dt>名詞1</dt>
<dd>名詞1解釋1</dd>
<dd>名詞1解釋2</dd>
...
<dt>名詞2</dt>
<dd>名詞2解釋1</dd>
<dd>名詞2解釋2</dd>
...
</dl>
例如:
頁面底下的幫助頁面
列表總結
| 標簽名 | 定義 | 說明 |
|---|---|---|
<ul></ul> |
無序標簽 | 里面只能包含li 沒有順序，布局中最常用的列表 |
<ol></ol> |
有序標簽 | 里面只能包含li 有順序， 使用情況較少 |
<dl></dl> |
自定義列表 | dt 和 dd, 創建網頁下幫助信息 |
跟用戶進行交互，收集用戶資料，此時也需要表單。包含了具體的表單功能項，如單行文本輸入框、密碼輸入框、復選框、提交按鈕、重置按鈕等。
input 控件
| 屬性 | 屬性值 | 描述 |
|---|---|---|
| type | text | 單行文本輸入框 |
| password | 密碼輸入框 | |
| radio | 單選按鈕 | |
| checkbox | 復選框 | |
| button | 普通按鈕 | |
| submit | 提交按鈕 | |
| reset | 重置按鈕 | |
| image | 圖像形式的提交按鈕 | |
| file | 文件域 | |
| name | 由用戶自定義 | 控件向后臺提交的名稱 |
| value | 由用戶自定義 | input空間中的默認文本值 |
| size | 正整數 | input空間在頁面中的顯示寬度 |
| checked | checked | 定義在選擇空間默認被選中的項 |
| maxlength | 正整數 | 空間允許輸入的最多字符數 |
type屬性
用戶名:<input type="text" />
密 碼:<input type="password" />
value屬性
value 默認的文本值, 默認寫入的文字。
用戶名:<input type="text" name="username" value="請輸入用戶名">
name屬性
name表單的名字， 這樣，后臺可以通過這個name屬性找到這個表單。 頁面中的表單很多，name主要作用就是用于區別不同的表單。
<input type="radio" name="sex" />男
<input type="radio" name="sex" />女
checked屬性
表示默認選中狀態。 較常見于 單選按鈕和復選按鈕。
下面表示男被默認選中
性 別:
<input type="radio" name="sex" value="男" checked="checked" />男
<input type="radio" name="sex" value="女" />女
label標簽
label標簽主要目的是為了提高用戶體驗。 用于綁定一個表單元素, 當點擊label標簽的時候, 被綁定的表單元素就會獲得輸入焦點。
<label> 用戶名： <input type="radio" name="usename" value="請輸入用戶名"> </label>
適合單個表單選擇
<label for="sex">男</label>
<input type="radio" name="sex" id="sex">
textarea空間(文本域)
通過textarea控件可以輕松地創建多行文本輸入框.
cols="每行中的字符數" rows="顯示的行數"
<textarea >
文本內容
</textarea>
| 表單 | 名稱 | 區別 | 默認值顯示 | 用于場景 |
|---|---|---|---|---|
| input type="text" | 文本框 | 只能顯示一行文本 | 單標簽，通過value顯示默認值 | 用戶名、昵稱、密碼等 |
| textarea | 文本域 | 可以顯示多行文本 | 雙標簽，默認值寫到標簽中間 | 留言板 |
select 下拉列表
有多個選項讓用戶選擇, 為了節約空間,我們可以使用select空間定義下拉列表
<select>
<option>選項1</option>
<option>選項2</option>
<option>選項3</option>
...
</select>
<select> 中至少包含一對 optionform表單域
在HTML中，form標簽被用于定義表單域，以實現用戶信息的收集和傳遞，form中的所有內容都會被提交給服務器。
<form action="url地址" method="提交方式" name="表單名稱">
各種表單控件
</form>
常用屬性：
| 屬性 | 屬性值 | 作用 |
|---|---|---|
| action | url地址 | 用于指定接收并處理表單數據的服務器程序的url地址。 |
| method | get/post | 用于設置表單數據的提交方式，其取值為get或post。 |
| name | 名稱 | 用于指定表單的名稱，以區分同一個頁面中的多個表單。 |
