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