文章目錄

一、瀏覽器:

1. 認識網頁:

1.1 網頁的組成:

網頁主要由文字、圖像和超鏈接等元素構成。當然，除了這些元素，網頁中還可以包含音頻、視頻以及Flash(現少用)等。

1.2 網頁如何形成:

HTML+css+js代碼 ⇒ 瀏覽器內核渲染 => 展示漂亮的頁面

2. 常見瀏覽器:

2.1 五大瀏覽器:

瀏覽器是網頁運行的平臺，常用的瀏覽器有IE(漸漸被Edge取代)、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等。我們平時稱爲五大瀏覽器。

2.2 瀏覽器佔有的份額:

查看網站： http://tongji.baidu.com/data/browser

3. 瀏覽器內核:

3.1 什麼是瀏覽器內核:

瀏覽器內核又分爲兩部分: 渲染引擎(layout engineer 或者 Rendeering Engineer) 和 JS引擎:
渲染引擎: 它負責取得網頁內容(HTML,XML, 圖片等), 整理訊息(例如: 加入css等), 以及計算網頁顯示方式, 然後會輸出至顯示器或打印機. 瀏覽器的內核的不同在於對網頁的語法解釋會有不同, 所以渲染效果也不相同.
JS引擎: JS引擎則是解析javascript語言,執行JavaScript語言來實現網頁的動態效果.
最開始, 渲染引擎和js引擎並沒有區分的很明確, 後來, js引擎越來越獨立, 內核就傾向於只值渲染引擎. 有一個網頁標準計劃小組製作了一個 ACID 來測試引擎的兼容性和性能. 內核的種類很多, 如加上沒什麼人使用的非商業的免費內核可能會有10多種, 但是常見的瀏覽器內核可以分這四種：Trident、Gecko、Blink、Webkit.

Trident(IE內核):

國內很多的雙核瀏覽器的其中一核便是 Trident, 美其名曰 “兼容模式”.
代表: IE、傲遊、世界之窗瀏覽器、Avant、騰訊TT、獵豹安全瀏覽器、 360極速瀏覽器、百度瀏覽器等.
Window10 發佈後, IE 將其內置瀏覽器命名爲 Edge, Edge 最顯著的特點就是新內核 EdgeHTML.

Gecko(firefox):

Gecko(Firefox 內核): Mozilla FireFox(火狐瀏覽器) 採用該內核, Gecko 的特點是代碼完全公開, 因此, 其可開發程度很高, 全世界的程序員都可以爲其編寫代碼, 增加功能. 可惜這幾年已經沒落了, 比如打開速度慢、升級頻繁、豬一樣的隊友flash、神一樣的對手chrome.

webkit(Safari):

Safari 是蘋果公司開發的瀏覽器, 所用瀏覽器內核的名稱是大名鼎鼎的 WebKit.
現在很多人錯誤地把 webkit 叫做 chrome內核(即使 chrome內核已經是 blink 了), 蘋果感覺像被別人搶了媳婦, 都哭暈再廁所裏面了.
代表瀏覽器：傲遊瀏覽器3、 Apple Safari (Win/Mac/iPhone/iPad)、Symbian手機瀏覽器、Android 默認瀏覽器，

2013年4月3日, 谷歌正式宣佈與WebKit分離.

Chromium/Bink(chrome):

在 Chromium 項目中研發 Blink 渲染引擎(即瀏覽器核心), 內置於 Chrome 瀏覽器之中. Blink 其實是 WebKit 的分支.
大部分國產瀏覽器最新版都採用Blink內核.

Presto(Opera):

Presto 是挪威產瀏覽器 opera 的 “前任” 內核，爲何說是 “前任”，因爲最新的 opera 瀏覽器早已將之拋棄從而投入到了谷歌懷抱了。

3.2 移動端的瀏覽器內核主要說的是系統內置瀏覽器的內核:

目前移動設備瀏覽器上常用的內核有 Webkit, Blink, Trident, Gecko 等,其中 iPhone 和 iPad 等蘋果 iOS 平臺主要是 WebKit, Android 4.4 之前的 Android 系統瀏覽器內核是 WebKit, Android4.4 系統瀏覽器切換到了Chromium, 內核是 Webkit 的分支 Blink, Windows Phone 8 系統瀏覽器內核是 Trident.

4.web標準:

通過以上瀏覽器的內核不同，我們知道他們工作原理、解析肯定不同，顯示就會有差別。

4.1 Web標準的好處:

讓web的發展前景更廣闊;
內容能被更廣泛的設備訪問;
更容易被搜索引擎訪問;
降低網站流量費用;
使網站更容易維護;
提高頁面瀏覽速度;

4.2 Web標準構成:

Web標準不是某一個標準, 而是由W3C和其他標準化組織制定的一系列標準的集合. 主要包括: 結構(Structure), 表現(Presentation), 行爲(Behavior) 三方面.

結構標準: 結構用於對網頁元素進行整理和分類, 主要包括XML和XHTML兩部分.
樣式標準: 表現用於設置網頁元素的版式, 顏色, 大小等外觀樣式, 主要指的是css.
行爲標準: 行爲標準指的是網頁模型的定義及交互的編寫, 主要包括DOM和ECMAScript兩部分

理想源碼結構: Html, CSS, JS

二、HTML基本結構:

1. HTML 初識

HTML(英文Hyper Text Markup Language的縮寫)中文譯爲"超文本標籤語言", 主要是通過HTML標籤對網頁中的文本、圖片、聲音等內容進行描述.

1.1 HTML骨架格式:

<HTML>   
    <head>     
        <title></title>
    </head>
    <body>
    </body>
</HTML>

1 HTML標籤：
- 作用所有HTML中標籤的一個根節點.
2 head標籤：
- 作用: 用於存放：
  title,meta,base,style,script,link
- 注意在head標籤中我們必須要設置的標籤是title
3.title標籤：
- 作用: 讓頁面擁有一個屬於自己的標題.
4.body標籤：
- 作用: 頁面在的主體部分, 用於存放所有的HTML標籤:
  p,h,a,b,u,i,s,em,del,ins,strong,img

1.2 HTML標籤分類

在HTML頁面中, 帶有“< >”符號的元素被稱爲HTML標籤, 如上面提到的 <HTML>、<head>、<body>都是HTML標籤. 所謂標籤就是放在“< >” 標籤符中表示某個功能的編碼命令, 也稱爲HTML標籤或 HTML元素.

1. 雙標籤

<標籤名> 內容 </標籤名>

該語法中“<標籤名>”表示該標籤的作用開始, 一般稱爲"開始標籤（start tag）"，"</標籤名>" 表示該標籤的作用結束, 一般稱爲“結束標籤(end tag)" . 和開始標籤相比, 結束標籤只是在前面加了一個關閉符“/”.

比如 <body>我是文字  </body>

2. 單標籤

<標籤名 />

單標籤也稱空標籤, 是指用一個標籤符號即可完整地描述某個功能的標籤.

比如  <br />

1.4HTML標籤關係

標籤的相互關係就分爲兩種：

1.嵌套關係:

<head>  
	<title> </title> 
</head>

2.並列關係:

<head></head>
<body></body>

2. 開發工具:

2.1 常用開發工具:

2.2 sublime模板:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Document</title>
</head>
<body>

</body>
</html>

1. 文檔類型<!DOCTYPE>:

<!DOCTYPE html>

標籤位於文檔的最前面, 用於向瀏覽器說明當前文檔使用哪種 HTML 或 XHTML 標準規範, 必需在開頭處使用標籤爲所有的XHTML文檔指定XHTML版本和類型, 只有這樣瀏覽器才能按指定的文檔類型進行解析.

注意: 一些老網站可能用的還是老版本的文檔類型比如 XHTML之類的, HTML5的文檔類型兼容很好(向下兼容的原則), 所以放心的使用HTML5的文檔類型就好了.

2. 字符集 <meta charset=“UTF-8”>

utf-8是目前最常用的字符集編碼方式, 常用的字符集編碼方式還有gbk和gb2312.

字符集	說明
gb2312	簡單中文, 包括6763個漢字
BIG5	繁體中文, 港澳臺等用
GBK	包含全部中文字符, 是GB2312的擴展, 加入對繁體字的支持，兼容GB2312
UTF-8	則包含全世界所有國家需要用到的字符

3.HTML標籤的語義化

白話: 所謂標籤語義化, 就是指標籤的含義。

3.1 爲什麼要有語義化標籤

方便代碼的閱讀和維護;
同時讓瀏覽器或是網絡爬蟲可以很好地解析, 從而更好分析其中的內容 ;
使用語義化標籤會具有更好地搜索引擎優化 ;

核心：合適的地方給一個最爲合理的標籤。
語義是否良好：當我們去掉CSS之後，網頁結構依然組織有序，並且有良好的可讀性。
遵循的原則：先確定語義的HTML ，再選合適的CSS。

三、HTML常用標籤:

1.排版標籤

排版標籤主要和css搭配使用, 顯示網頁結構的標籤, 是網頁佈局最常用的標籤.

1.2 標題標籤:

單詞縮寫： head 頭部. 標題

爲了使網頁更具有語義化, 我們經常會在頁面中用到標題標籤, HTML提供了6個等級的標題, 即:

 <h1>、<h2>、<h3>、<h4>、<h5>和<h6>

標題標籤語義：作爲標題使用，並且依據重要性遞減;

其基本語法格式如下：

<hn>   標題文本   </hn>

注意: h1 標籤因爲重要, 儘量少用, 不要動不動就向你扔了一個h1. 一般h1 都是給logo使用.

<body>
	<h1>h1</h1>
	<h2>h2</h2>
	<h3>h3</h3>
	<h4>h4</h4>
	<h5>h5</h5>
	<h6>h6</h6>
	<h7>h7</h7>
	<h8>h8</h8>
</body>

h1

h2

h3

h4

h5

h6

h7 h8

1.3段落標籤:

單詞縮寫： paragraph 段落

在網頁中要把文字有條理地顯示出來, 離不開段落標籤, 就如同我們平常寫文章一樣, 整個網頁也可以分爲若干個段落, 而段落的標籤就是

<p>  文本內容  </p>

是HTML文檔中最常見的標籤, 默認情況下, 文本在一個段落中會根據瀏覽器窗口的大小自動換行.

<body>
	<h1>慶餘年</h1>
	<h2>作者: 貓膩</h2>
	<p>這一年是慶國紀元五十七年，皇帝陛下率領大軍征伐西蠻的戰爭還沒有結束，司南伯爵也隨侍在軍中，京都內由皇太后及元老會執政。這一日，京都郊外流晶河畔的太平別院失火，一羣夜行高手，趁着火勢衝入了別院，見人便殺，犯下了驚天血案。
	</p>
    <p>別院的一位少年僕人則帶着小主人趁夜殺出了重圍，被一羣穿着夜行衣的兇徒追擊，雙方一直廝殺到城外南下的道口上，伏擊的高手們卻沒有想到這個身有殘障的少年，居然是位深不可測的強者，而在丘陵之後，竟然還有對方的援兵——這些援兵的身份更是讓這些人害怕不已！</p>
    <p>“黑騎士！”被弩箭射殺殆盡的兇徒們倒在血泊之中哀呼着。援兵騎在馬上，身上穿着黑色的盔甲，映着天上的月光，發着幽幽暗暗的噬魂光澤。騎兵人人手上都拿着只有軍隊裏才允許配備的硬弩，先前輕弩疾發，已經射死了大部分殺手。</p>
    <p>黑色騎兵的拱衛中，是一位坐在馬車裏的中年人，面色蒼白，下巴上有着很稀疏的幾絡鬍鬚。他看着場裏那個揹着孩子的少年僕人，點了點頭，然後輕輕拍了拍手掌。</p>
    <p>掌聲就是出擊的信號！</p>
</body>

慶餘年

作者: 貓膩

這一年是慶國紀元五十七年，皇帝陛下率領大軍征伐西蠻的戰爭還沒有結束，司南伯爵也隨侍在軍中，京都內由皇太后及元老會執政。這一日，京都郊外流晶河畔的太平別院失火，一羣夜行高手，趁着火勢衝入了別院，見人便殺，犯下了驚天血案。

別院的一位少年僕人則帶着小主人趁夜殺出了重圍，被一羣穿着夜行衣的兇徒追擊，雙方一直廝殺到城外南下的道口上，伏擊的高手們卻沒有想到這個身有殘障的少年，居然是位深不可測的強者，而在丘陵之後，竟然還有對方的援兵——這些援兵的身份更是讓這些人害怕不已！

“黑騎士！”被弩箭射殺殆盡的兇徒們倒在血泊之中哀呼着。援兵騎在馬上，身上穿着黑色的盔甲，映着天上的月光，發着幽幽暗暗的噬魂光澤。騎兵人人手上都拿着只有軍隊裏才允許配備的硬弩，先前輕弩疾發，已經射死了大部分殺手。

黑色騎兵的拱衛中，是一位坐在馬車裏的中年人，面色蒼白，下巴上有着很稀疏的幾絡鬍鬚。他看着場裏那個揹着孩子的少年僕人，點了點頭，然後輕輕拍了拍手掌。

掌聲就是出擊的信號！

1.4 平線標籤

單詞縮寫： horizontal 橫線

在網頁中常常看到一些水平線將段落與段落之間隔開, 使得文檔結構清晰, 層次分明. 這些水平線可以通過插入圖片實現, 也可以簡單地通過標籤來完成, <hr />就是創建橫跨網頁水平線的標籤. 其基本語法格式如下：

<hr />是單標籤

1.5換行標籤:

單詞縮寫： break 打斷 ,換行

在HTML中, 一個段落中的文字會從左到右依次排列, 直到瀏覽器窗口的右端, 然後自動換行. 如果希望某段文本強制換行顯示, 就需要使用換行標籤

<br />

這時如果還像在word中直接敲回車鍵換行就不起作用了

<body>
	<h3>---------四大美女---------</h3>
	1. 貂蟬
	<br>
	2. 西施
	<br>
	3. 王昭君
	4. 楊玉環
</body>

---------四大美女---------

1. 貂蟬
2. 西施
3. 王昭君 4. 楊玉環

1.6 div、span標籤:

div、span: 是沒有語義的,是我們網頁佈局主要的2個盒子

標籤	說明
div	就是 division 的縮寫 , 分割, 分區的意思. 其實有很多div 來組合網頁
span	跨度, 跨距;範圍

<div> 這是頭部 </div>
<span>今日價格</span>

這是頭部

今日價格

2. 文本格式化標籤

在網頁中, 有時需要爲文字設置粗體、斜體或下劃線效果，這時就需要用到HTML中的文本格式化標籤, 使文字以特殊的方式顯示.

標籤	顯示效果
<b></b>與<strong></strong>	文字以粗體方式顯示
<i></i>與<em></em>	文字以斜體方式顯示
<s></s>與<del></del>	文字以加刪除線方式顯示
<u></u>與<ins></ins>	文字以加下劃線方式顯示

<body>
	<strong>文字以粗體方式顯示</strong>
	<em>文字以斜體方式顯示</em>
	<del>文字以加刪除線方式顯示</del>
	<ins>文字以加刪除線方式顯示</ins>
</body>

文字以粗體方式顯示
文字以斜體方式顯示
~~文字以加刪除線方式顯示~~
文字以加刪除線方式顯示

3. 標籤屬性:

<img src="media/ttt.jpg" width="300"  />

屬性就是特性比如手機的顏色手機的尺寸，總結就是手機的。。

使用HTML製作網頁時, 如果想讓HTML標籤提供更多的信息, 可以使用HTML標籤的屬性加以設置. 其基本語法格式如下：

<標籤名 屬性1="屬性值1" 屬性2="屬性值2" …> 內容 </標籤名>

在上面的語法中，

1.標籤可以擁有多個屬性, 必須寫在開始標籤中, 位於標籤名後面;
2.屬性之間不分先後順序, 標籤名與屬性、屬性與屬性之間均以空格分開;
3.任何標籤的屬性都有默認值, 省略該屬性則取默認值;

採取鍵值對的格式 key=“value” 的格式

比如:

<hr width="400" />

屬性  是 寬度  

值    是 400

提倡: 儘量不使用樣式屬性

4. 圖片標籤img:

單詞縮寫: image 圖像

HTML網頁中任何元素的實現都要依靠HTML標籤, 要想在網頁中顯示圖像就需要使用圖像標籤, 接下來將詳細介紹圖像標籤<img />以及和他相關的屬性. 其基本語法格式如下：

該語法中src屬性用於指定圖像文件的路徑和文件名, 他是img標籤的必需屬性:

<img src="圖像URL" />

<img/>標記屬性:

屬性	屬性值	描述
src	URL	圖像的路徑
alt	文本	圖像不能顯示時的替換文本
title	文本	鼠標懸浮時顯示的文本
width	像素	設置圖像的寬度
height	像素	設置圖像的高度
border	數字	設置圖像邊框的寬度

<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3372136806,3092572726&fm=11&gp=0.jpg" style="width:300px;" />

5. 鏈接標籤:

5.1 超鏈接:

單詞縮寫： anchor 的縮寫。基本解釋錨, 鐵錨的

在HTML中創建超鏈接非常簡單，只需用標籤環繞需要被鏈接的對象即可，其基本語法格式如下：

<a href="跳轉目標" target="目標窗口的彈出方式">文本或圖像</a>

href：用於指定鏈接目標的url地址，當爲標籤應用href屬性時，它就具有了超鏈接的功能。 Hypertext Reference的縮寫。意思是超文本引用
target：用於指定鏈接頁面的打開方式，其取值有_self和_blank兩種，其中_self爲默認值，_blank爲在新窗口中打開方式。

注意：

1.外部鏈接需要添加 http:// www.baidu.com
2.內部鏈接直接鏈接內部頁面名稱即可比如 < a href=“index.html”> 首頁
3.如果當時沒有確定鏈接目標時，通常將鏈接標籤的href屬性值定義爲“#”(即href="#")，表示該鏈接暫時爲一個空鏈接。
4.不僅可以創建文本超鏈接，在網頁中各種網頁元素，如圖像、表格、音頻、視頻等都可以添加超鏈接。

5.2 錨點定位 :

通過創建錨點鏈接，用戶能夠快速定位到目標內容。
創建錨點鏈接分爲兩步：

1.使用“a href=”#id名>“鏈接文本"</a>創建鏈接文本。

2.使用相應的id名標註跳轉目標的位置。

5.3 base標籤:

base可以設置整體連接的打開狀態;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <base target="_self">
    <title>Document</title>
</head>
<body>
    <a href="http://www.baidu.com">百度一下</a>
</body>
</html>

target：用於指定鏈接頁面的打開方式，其取值有_self和_blank兩種，其中_self爲默認值，_blank爲在新窗口中打開方式

5.4 特殊字符標籤:

HTML爲這些特殊字符準備了專門的替代代碼:

特殊字符	描述	字符的代碼
	空格符	` `
<	小於號	`<`
>	大於號	`>`
&	和號	`&`
￥	人民幣	`¥`
©	版號	`©`
®	註冊商標	`®`
°	攝氏度	`°`
±	正負號	`±`
X	乘號	`×`
÷	除號	`÷`
²	平方2(上標2)	`²`
³	立方3(上標3)	`³`

5.5 註釋標籤:

在HTML中還有一種特殊的標籤——註釋標籤。如果需要在HTML文檔中添加一些便於閱讀和理解但又不需要顯示在頁面中的註釋文字，就需要使用註釋標籤。其基本語法格式如下：

<!-- 註釋語句 -->

註釋內容不會顯示在瀏覽器窗口中，但是作爲HTML文檔內容的一部分，也會被下載到用戶的計算機上，查看源代碼時就可以看到。

四、路徑:

實際工作中，通常新建一個文件夾專門用於存放圖像文件，這時再插入圖像，就需要採用“路徑”的方式來指定圖像文件的位置。

路徑可以分爲： 相對路徑 和 絕對路徑

1. 相對路徑:

圖像文件和HTML文件位於同一文件夾: 只需要輸入圖像文件的名稱即可, 如: <img src=“logo.gif”/>
圖像文件位於HTML文件的下一級文件夾: 輸入文件夾名和文件名, 之間用"/"隔開, 如: <img src=“img/img01/logo.gif”/>
圖像文件位於HTML文件的上一級文件夾: 在文件名之前加入"…/", 如果是上兩級, 則需要用"…/…/", 依次類推, 如: <img src="…/img/logo.gif"/>

2. 絕對路徑:

“D:\web\img\logo.gif”，或完整的網絡地址，例如“https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/logo_redBlue-ece8ad45d6.png”。

五、列表:

1. 無序列表 ul （重點）

無序列表的各個列表項之間沒有順序級別之分，是並列的。其基本語法格式如下：

<ul>
  <li>列表項1</li>
  <li>列表項2</li>
  <li>列表項3</li>
  ......
</ul>

注意：

190.<ul></ul>中只能嵌套<li></li>，直接在<ul></ul>標籤中輸入其他標籤或者文字的做法是不被允許的
2. <li>與</li>之間相當於一個容器，可以容納所有元素
3. 無序列表會帶有自己樣式屬性，放下那個樣式，一會讓CSS來

<h3>你喜歡的水果:</h3>
<ul>
	<li>蘋果</li>
	<li>香蕉</li>
	<li>橘子</li>
	<li>榴蓮</li>
</ul>

你喜歡的水果:

蘋果
香蕉
橘子
榴蓮

2. 有序列表 ol :

有序列表即爲有排列順序的列表，其各個列表項按照一定的順序排列定義，有序列表的基本語法格式如下：

<ol>
  <li>列表項1</li>
  <li>列表項2</li>
  <li>列表項3</li>
  ......
</ol>

所有特性基本與ul 一致
例:

<ol>
	<li>冠軍</li>
	<li>亞軍</li>
	<li>季軍</li>
</ol>

冠軍
亞軍
季軍

3. 自定義列表:

定義列表常用於對術語或名詞進行解釋和描述，定義列表的列表項前沒有任何項目符號。其基本語法如下：

<dl>
  <dt>定義標題</dt>
  <dd>定義描述1,解釋1</dd>
  <dd>定義描述2,解釋2</dd>
  ...
  <dt>定義標題2</dt>
  <dd>定義描述3,解釋4</dd>
  <dd>定義描述4,解釋4</dd>
  ...
</dl>

例:

<h3>地區</h3>
<dl>
<dt>北京</dt>
<dd>昌平區</dd>
<dd>海淀區</dd>
<dd>大興區</dd>
<dd>通州區</dd>
<dd>大興區</dd>
</dl>
<dl>
<dt>山東省</dt>
<dd>濟南市</dd>
<dd>青島市</dd>
<dd>濰坊市</dd>
<dd>泰安市</dd>
<dd>德州市</dd>
</dl>

地區

北京: 昌平區; 海淀區; 大興區; 通州區; 大興區

山東省: 濟南市; 青島市; 濰坊市; 泰安市; 德州市

-----------------------------------------------------------

小米官網:

4. 練習(四大名著):

<h3>中國四大名著</h3>
<ul>
	<li>
		<h3><img src="img/shui.jpg">《水滸傳》</h3>

		<p>
		《水滸傳》是中國歷史上第一部用古白話文寫成的歌頌農民起義的長篇章回體版塊結構小說，以宋江領導的起義軍爲主要題材，通過一系列梁山英雄反抗壓迫、英勇鬥爭的生動故事，暴露了北宋末年統治階級的腐朽和殘暴，揭露了當時尖銳對立的社會矛盾和“官逼民反”的殘酷現實。
		</p>
	</li>
	<li>
		<h3> <img src="img/san.jpg">《三國演義》</h3>
		<p>
			《三國演義》是綜合民間傳說和戲曲、話本，結合陳壽的《三國志》、范曄《後漢書》、元代《三國志平話》、和裴松之注的史料，以及作者個人對社會人生的體悟寫成。現所見刊本以明嘉靖本最早，分24卷，240則。清初毛宗崗父子又做了一些修改，併成爲現在最常見的120回本
		</p>
	</li>
	<li>
		<h3> <img src="img/xi.jpg">《西遊記》</h3>
		<p>
	西遊記以民間傳說的唐僧取經的故事和有關話本及雜劇（元末明初楊訥作）基礎上創作而成。
		</p>
	</li>
	<li>
		<h3> <img src="img/hong.jpg">《紅樓夢》</h3>
		<p>
			《紅樓夢》是一部章回體長篇小說。早期僅有前八十回抄本流傳，八十回後部分未完成且原稿佚失。原名《脂硯齋重評石頭記》。程偉元邀請高鶚協同整理出版百二十回全本，定名《紅樓夢》。亦有版本作《金玉緣》。
		</p>
	</li>
</ul>

六、表格(table):

存在即是合理的. 表格的現在還是較爲常用的一種標籤，但不是用來佈局，常見處理表格式數據.

1. 創建表格:

在HTML網頁中，要想創建表格，就需要使用表格相關的標籤。創建表格的基本語法格式如下：

<table>
  <thead>
    <tr>
       <th>表頭標籤</th>
       <th>表頭標籤</th>
       ...
    </tr>
  </thead>
  
  <tbody>
	  <tr>
	    <td>單元格內的文字</td>
	    <td>單元格內的文字</td>
	    ...
	  </tr>
	  <tr>
	    <td>單元格內的文字</td>
	    <td>單元格內的文字</td>
	    ...
	  </tr>
	  ...
  </tbody>
</table>

在上面的語法中包含三對HTML標籤，分別爲 <table></table>、<tr></tr>、<td&gt7lt;/td>，他們是創建表格的基本標籤，缺一不可，下面對他們進行具體地解釋。

1.table用於定義一個表格。
2.tr 用於定義表格中的一行，必須嵌套在 table /table標籤中，在 table /table中包含幾對 tr /tr，就有幾行表格。
3.td /td：用於定義表格中的單元格，必須嵌套在標籤中，一對中包含幾對，就表示該行中有多少列（或多少個單元格）。

注意：

1.<tr></tr>中只能嵌套<td></td>
2.<td></td>標籤，他就像一個容器，可以容納所有的元素

2. 表格屬性:

屬性名	含義	常用屬性值
border	設置表格邊框(默認border=“0”, 無邊框)	像素值
cellspacing	設置單元格與單元格之間的空白間距	像素值(默認2px)
cellpadding	設置單元格內容與單元格邊框之間的空白邊距	像素值(默認1px)
width	設置表格寬度	像素值
height	設置表格高度	像素值
align	設置表格在網頁中的水平對齊方式	left, center, right

3. 表格結構:

1.在使用表格進行佈局時，可以將表格劃分爲頭部、主體和頁腳（頁腳因爲有兼容性問題，我們不在贅述），具體如下所示：
2.<thead></thead>：用於定義表格的頭部。
3.必須位於<table>&lt/;table> 標籤中，一般包含網頁的logo和導航等頭部信息。
4.<tbody></tbody>：用於定義表格的主體。
5.位於<table></table>標籤中，一般包含網頁中除頭部和底部之外的其他內容。

4.表格標題:

<table>
<caption>表格標題</caption>
<thead>
...
</thead>
<tbody>
...
</tbody>
</table>

表格標題
表頭1	表頭2
內容1	內容2

5. 合併單元格

跨行合併：rowspan 跨列合併：colspan

合併單元格的思想:

將多個內容合併的時候，就會有多餘的東西，把它刪除。例如把 3個 td 合併成一個，那就多餘了2個，需要刪除。

公式：

刪除的個數 = 合併的個數 - 1

七、表單與表單控制:

1. 表單標籤:

在網頁中, 也需要跟用戶進行交互, 收集用戶資料，此時也需要表單
在HTML中，一個完整的表單通常由表單控件(也稱爲表單元素)、提示信息 和 表單域 3個部分構成
表單控件：

包含了具體的表單功能項，如單行文本輸入框、密碼輸入框、複選框、提交按鈕、重置按鈕等。

提示信息：

一個表單中通常還需要包含一些說明性的文字，提示用戶進行填寫和操作。

表單域：

他相當於一個容器，用來容納所有的表單控件和提示信息，可以通過他定義處理表單數據所用程序的url地址，以及數據提交到服務器的方法。如果不定義表單域，表單中的數據就無法傳送到後臺服務器。

2. input控件:

在上面的語法中,<input/>標籤爲 單標籤, type屬性爲其最基本的屬性, 其取值有多種, 用於指定不同的空間類型. 除了type屬性外, <input/>標籤還可以定義很多其他的屬性, 其重用的屬性如下:

input常用屬性
屬性	屬性值	描述
type	text	單行文本輸入
	password	密碼輸入框
	radio	單選按鈕, 如果是一組,通過相同的name實現
	checkbox	複選框, 通過name區分組
	button	普通按鈕
	submit	提交按鈕
	reset	重置按鈕
	image	圖像形式的提交按鈕(src屬性聲明圖片路徑)
	file	文件域
name	有用戶自定義	控件名稱
value	有用戶自定義	input控件中默認的文本值
nsize	正整數	input控件在頁面中顯示的寬度
checked	checked	定義選擇控件默認被選中的項
maxlength	正整數	控件允許輸入的最多字符數

<body>
      <!-- <input />   我們的input是一個單標籤  br hr  img  base  input     -->
      用戶名:  <input  type="text" value="派克鋼筆" />   <!-- 這是一個文本框 --> <br />
      密　碼:  <input  type="password" maxlength="6" /> <br />  <!-- 這是一個密碼框  ctrl+ /  註釋的快捷鍵 -->
	  性　別:　
	  <input  type="radio" name="sex" checked="checked" /> 女 
	  <input  type="radio" name="sex" /> 男
	  <input  type="radio" name="sex1"/> 未知
	   <br />
	     <!-- 單選框  如果是一組，我們通過相同的name值 來實現-->
	   愛　好:　
	   <input type="checkbox" name="hobby" checked="checked" /> 足球 
	   <input type="checkbox" name="hobby"/> 籃球  
	   <input type="checkbox" name="hobby"/> 乒乓球
	   <!-- 複選框 可以同時選擇多個 --><br />
	   搜索：  <input type="button" value="搜索啥"/>  <!-- 普通按鈕 --><br />
	   <input type="submit" value="提交表單" /><!-- 提交按鈕 -->
	   <input type="reset" value="重置表單" /><!-- 重置按鈕 --><br />

	   <input type="image" src="im.jpg" /><!-- 圖像按鈕 --><br />
	   上傳頭像: 
	   <input type="file" />  <!-- 文件按鈕 -->
    </body>

3. label標籤:

label標籤爲input元素定義標註(標籤).
作用: 用於綁定一個表單元素, 當點擊label標籤的時候, 被綁定的表單元素就會獲得輸入焦點.

<label>  輸入賬號: <input type="text" /> </label>

如果label裏面有多個表單，想定位到某個可以通過for id 的格式來進行

<label for="two">  輸入賬號: <input type="text" />   <input type="text"  id="two"/></label>

4. textare控件(文本域):

如果需要輸入大量的信息, 就需要用到<testarea></textarea>標籤. 通過textarea控件可以輕鬆的創建多行文本輸入框, 其基本語法格式如下:

<textarea cols="每行的字符數" rows="顯示的行數">
文本內容
</textarea>

5. 下拉菜單:

使用select控件定義下拉菜單的基本語法格式如下

<select>
  <option>選項1</option>
  <option>選項2</option>
  <option>選項3</option>
  ...
</select>


<body>
      籍貫:
       <select>
       		<option>點擊選擇您的籍貫</option>
       		<option>北京</option>
       		<option>上海</option>
       		<option>廣州</option>
       		<option selected="selected">星星</option>
       </select>
       <select>
       		<option>點擊選擇您的城市</option>
       		<option>海淀</option>
       		<option>昌平</option>
       		<option>通州</option>
       		<option>大興</option>
       </select>
    </body>

注意：

<select></select>中至少應包含一對<option></option>。
在option 中定義selected =" selected "時，當前項即爲默認選中項。

6. 表單域:

在HTML中，form標籤被用於定義表單域，即創建一個表單，以實現用戶信息的收集和傳遞，form中的所有內容都會被提交給服務器。創建表單的基本語法格式如下：

<form action="url地址" method="提交方式" name="表單名稱">
  各種表單控件
</form>

常用屬性：

Action:
在表單收集到信息後，需要將信息傳遞給服務器進行處理，action屬性用於指定接收並處理表單數據的服務器程序的url地址
method:
用於設置表單數據的提交方式，其取值爲get或post
name:
用於指定表單的名稱，以區分同一個頁面中的多個表單

注意：每個表單都應該有自己表單域。

八、HTML5 新增標籤和屬性:

1. html的發展:

1.1 文檔類型設定:

document
- HTML: sublime 輸入 html:4s
- XHTML: sublime 輸入 html:xt
- HTML5 sublime 輸入 html:5

1.2 字符設定

<meta http-equiv=“charset” content=“utf-8”>：HTML與XHTML中建議這樣去寫
<meta charset=“utf-8”>：HTML5的標籤中建議這樣去寫

2. 常用新標籤:

w3c手冊中文官網: http://w3school.com.cn/

header：定義文檔的頁眉頭部
nav：定義導航鏈接的部分
footer：定義文檔或節的頁腳底部
article：定義文章。
section：定義文檔中的節（section、區段）
aside：定義其所處內容之外的內容側邊

<header> 語義 :定義頁面的頭部  頁眉</header>
<nav>  語義 :定義導航欄 </nav> 
<footer> 語義: 定義 頁面底部 頁腳</footer>
<article> 語義:  定義文章</article>
<section> 語義： 定義區域</section>
<aside> 語義： 定義其所處內容之外的內容 側邊</aside>

datalist: 標籤定義選項列表. 請與input元素配合使用該元素;

<input type="text" value="輸入明星" list="star"/> <!--  input裏面用 list -->
<datalist id="star">   <!-- datalist 裏面用 id  來實現和 input 鏈接 -->  
    		<option>劉德華</option>
    		<option>劉若英</option>
    		<option>劉曉慶</option>
    		<option>郭富城</option>
    		<option>張學友</option>
    		<option>郭郭</option>
</datalist>

fieldset 元素可將表單內的相關元素分組，打包 legend 搭配使用

<fieldset>
    		<legend>用戶登錄</legend>  標題
    		用戶名: <input type="text"><br /><br />
    		密　碼: <input type="password">
</fieldset>

3. 新增的input type屬性值:

類型	使用示例	含義
email	<input type=“email”>	輸入郵箱格式
tel	<input type=“tel”>	輸入手機號碼格式
url	<input type=“url”>	輸入url格式
number	<input type=“number”>	輸入數字格式
search	<input type=“search”>	搜索框（體現語義化）
range	<input type=“range”>	自由拖動滑塊
tme	<input type=“time”>	小時分鐘
date	<input type=“date”>	年月日
datetime	<input type=“datetime”>	時間
month	<input type=“month”>	月年
week	<input type=“week”>	星期年

<body>
  <fieldset>
	<legend>HTML5新增的INPUT type 類型  那些表單</legend>
	<form action="">
        郵箱:  <input type="email" />  <!-- [email protected] -->  <br />
        手機:  <input type="tel" />  <!-- 手機格式 數字 -->  <br />
        數字:  <input type="number" />  <!-- 只能 是 數字 -->  <br />
        url:  <input type="url" />  <!-- 網址格式的 -->  <br />
        搜索:  <input type="search" />  <!-- 搜索 -->  <br />
        區域:  <input type="range" />  <!-- 區域 滑塊  -->  <br />
        時間:  <input type="time" />  <!--小時 分鐘  -->  <br />
        年月日:  <input type="date" />  <!--獲得年月日 -->  <br />
        月份:  <input type="month" />  <!--獲得年月 -->  <br />
        星期:  <input type="week" />  <!--獲得周 -->  <br />
        顏色:  <input type="color" />  <!-- 顏色 -->  <br />
		<input type="submit" />
	</form>
  </fieldset>
</body>

4. 常用新屬性:

屬性	用法	含義
placeholder	<input type=“text” placeholder=“請輸入用戶名”>	佔位符當用戶輸入的時候裏面的文字消失刪除所有文字，自動返回
autofocus	<input type=“text” autofocus>	規定當頁面加載時 input 元素應該自動獲得焦點
multiple	<input type=“file” multiple>	多文件上傳
autocomplete	<input type=“text” autocomplete=“off”>	規定表單是否應該啓用自動完成功能有2個值，一個是on 一個是off on 代表記錄已經輸入的值 1.autocomplete 首先需要提交按鈕 2.這個表單您必須給他名字
required	<input type=“text” required>	必填項內容不能爲空
accesskey	<input type=“text” accesskey=“s”>	規定激活（使元素獲得焦點）元素的快捷鍵採用 alt + s的形式

5. 小練習:

<body>
    <form action="">
        <fieldset>
            <legend>學生檔案</legend><br/><br/>
            <label>姓&emsp;名: <input type="text" placeholder="請輸入姓名"></label><br/><br/>
            <label>手機號: <input type="tel"></label><br/><br/>
            <label>郵&emsp;箱: <input type="email"></label><br/><br/>
            <label>所屬學院: <input type="text" list="xueyuan"></label>
            <datalist id="xueyuan">
                <option>外國語學院</option>
                <option>馬克思學院</option>
                <option>計算機學院</option>
                <option>醫學院</option>
                <option>教育學院</option>
            </datalist>
            <br/><br/>
            <label>出生年月: <input type="date" ></label>
            <br/><br/>
            <label>成&emsp;績: <input type="number"></label>
            <br/><br/>
            <label>畢業時間: <input type="date"></label>
            <br/><br/>
            <input type="submit" value="保存檔案">
            <input type="reset">
        </fieldset>
    </form>  
</body>

6. 多媒體標籤:

embed：標籤定義嵌入的內容
audio：播放音頻
video：播放視頻

6.1 多媒體 embed:

embed可以用來插入各種多媒體，格式可以是 Midi、Wav、AIFF、AU、MP3等等。url爲音頻或視頻文件及其路徑，可以是相對路徑或絕對路徑。

因爲兼容性問題，我們這裏只講解插入網絡視頻，後面H5會講解 audio 和video 視頻多媒體。

<embed src="https://v.qq.com/txp/iframe/player.html?vid=p0378i2xnqk" allowFullScreen="true" quality="high" width="480" height="400" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed>

6.2 多媒體(音頻) audio:

<audio src="bgsound.mp3"  autoplay="autoplay"  controls loop="-1"/></audio>

並且可以通過附加屬性可以更友好控制音頻的播放，如：

autoplay 自動播放
controls 是否顯不默認播放控件
loop 循環播放 loop = 2 就是循環2次 loop 或者 loop = “-1” 無限循環

由於版權等原因，不同的瀏覽器可支持播放的格式是不一樣的，如下圖供參考:

	IE 9+	Firefox 3.5+	Opera 10.5+	Chrome 3.0 +	Safari 3.0
Ogg Vorbis	-	√	√	√	-
MP3	√	-	-	√	√
Wav	-	√	√	-	√

爲了瀏覽器兼容，我們需要做三種聲音文件 ogg mp3

<audio controls autoplay>
  	<source  src="bgsound.mp3" />
  	<source  src="music.ogg" />
  	您的瀏覽器不支持播放聲音
 </audio>

6.3 多媒體(視頻) video:

<video src="mp4.mp4" autoplay controls></video>

同樣，通過附加屬性可以更友好的控制視頻的播放

autoplay 自動播放
controls 是否顯示默認播放控件
loop 循環播放
width 設置播放窗口寬度
height 設置播放窗口的高度