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