一、Html概述
1、認識網頁
組成：網頁主要由文字、圖片和按鈕等元素構成。當然，除了這些元素，網頁中還可以包含音頻、視頻以及Flash等。
總結：網頁其實就是由html標簽組成的。
2、網頁標准
web標准：制作網頁要遵循的規范
結構標准：HTML（搭建網頁結構）
表現標准：css（美化網頁）
行為標准：javascript
3、瀏覽器
作用：瀏覽器是網頁運行的平台，用於瀏覽網頁。
主流瀏覽器：IE、谷歌、火狐、360、qq、獵豹、UC、歐朋
世界5大主流瀏覽器：SIRI IE 歐朋 火狐 谷歌
| | | | |
webkit trident presto gecko blink
內核（渲染引擎）： 將網頁中的標簽信息轉化為我們人眼能夠識別的圖文信息。
4、服務器
1 1：瀏覽器向服務器發送請求（通過http協議） 2 3 2： http協議：超文本傳輸協議，也就是瀏覽器和服務器端的網頁傳輸數據的約束和規范 4 5 3： url協議:平時我們寫的網址就是url地址 6 7 url協議：規定url地址的格式 8 9 協議規定格式： scheme://host.domain:port/path/filename 10 11 scheme: 定義因特網服務的類型 。常見的就是http 12 13 host： 定義域主機（http 的默認主機是www） 14 15 domain: 定義因特網域名 比如：w3school.com.cn 16 17 :port 定義端口號（網頁默認端口 :80） 18 19 path: 網頁所在服務器上的路徑 20 21 filename: 文件名稱 22
二、Html介紹
1、定義
HTML(Hyper Text Markup Language ) ：中文譯為“超文本標記語言”，主要是通過html標記對網頁中的文本，圖片，聲音等內容進行描述。
HTML之所以稱為超文本標記語言，不僅是因為他通過標記描述網頁內容，同時也由於文本中包含了所謂的“超級鏈接”，通過超鏈接可以實現網頁的跳轉。從而構成了豐富多彩的Web頁面。
2、結構
1、HTML基本文檔格式
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>FirstDemo</title> 6 </head> 7 <body> 8 9 </body> 10 </html>
2、HTML基本文檔格式—<html> 標記
1 -- <html>稱為根標記，用於告知瀏覽器其自身是一個 HTML 文檔， <html>標記標志着HTML文檔的開始，</html>標記標志着HTML文檔的結束，在他們之間的是文檔的頭部和主體內容。 2 -- <html lang="en"> 向搜索引擎表示該頁面是html語言，並且語言為英文網站，其"lang"的意思就是“language”，語言的意思，而“en”即表示english 3 -- 這個主要是給搜索引擎看的，搜索引擎不會去判斷該站點是中文站還是英文站，所以這句話就是讓搜索引擎知道，你的站點是中文站，對html頁面本身不會有影響
3、HTML基本文檔格式—<head> 標記
-- <head>標記用於定義HTML文檔的頭部信息，也稱為頭部標記，緊跟在<html>標記之后，主要用來封裝其他位於文檔頭部的標記。 -- 一個HTML文檔只能含有一對<head>標記，絕大多數文檔頭部包含的數據都不會真正作為內容顯示在頁面中。
4、HTML文檔頭部相關標記—<title>標記
-- <title>標記用於定義HTML頁面的標題，即給網頁取一個名字，必須位於<head>標記之內。一個HTML文檔只能含有一對<title></title>標記，<title></title>之間的內容將顯示在瀏覽器窗口的標題欄中。
其基本語法格式如下： <title>網頁名稱</title>
5、HTML基本文檔格式—<body> 標記
-- <body>標記用於定義HTML文檔所要顯示的內容，也稱為主體標記。瀏覽器中顯示的所有文本、圖像、音頻和視頻等信息都必須位於<body>標記內，<body>標記中的信息才是最終展示給用戶看的。 -- 一個HTML文檔只能含有一對<body>標記，且<body>標記必須在<html>標記內，位於<head>頭部標記之后.
3、html標簽關系
1.嵌套關系
2.並列關系
嵌套關系：類似父親和兒子之間的關系
<html>
<head></head>
<body></body>
</html>
並列關系：類似與兄弟之間的關系
<head></head>
<body></body>
4、html標簽分類
1、HTML標記—雙標記
-- 雙標記也稱體標記，是指由開始和結束兩個標記符組成的標記。其基本語法格式如下： <標記名></標記名> 該語法中“<標記名>”表示該標記的作用開始，一般稱為“開始標記（start tag）”，“</標記名>” 表示該標記的作用結束，一般稱為“結束標記（end tag）”。和開始標記相比，結束標記只是在前面加了一個關閉符“/”。
2、HTML標記—單標記
-- 單標記也稱空標記，是指用一個標記符號即可完整地描述某個功能的標記。其基本語法格式如下： <標記名/>
5、單標記詳解
1、水平線標記<hr />
-- 在網頁中常常看到一些水平線將段落與段落之間隔開，使得文檔結構清晰，層次分明。這些水平線可以通過插入圖片實現，也可以簡單地通過標記來完成，<hr />就是創建橫跨網頁水平線的標記。其基本語法格式如下： <hr />是單標記，在網頁中輸入一個<hr />，就添加了一條默認樣式的水平線。
2、HTML標記—注釋標記
-- 在HTML中還有一種特殊的標記——注釋標記。如果需要在HTML文檔中添加一些便於閱讀和理解但又不需要顯示在頁面中的注釋文字，就需要使用注釋標記。其基本語法格式如下： <!-- 注釋語句 --> -- 注釋內容不會顯示在瀏覽器窗口中，但是作為HTML文檔內容的一部分，也會被下載到用戶的計算機上，查看源代碼時就可以看到。
3、換行標記<br />
--在HTML中，一個段落中的文字會從左到右依次排列，直到瀏覽器窗口的右端，然后自動換行。如果希望某段文本強制換行顯示，就需要使用換行標記<br />，這時如果還像在word中直接敲回車鍵換行就不起作用了。
4、圖像標記<img />
-- HTML網頁中任何元素的實現都要依靠HTML標記，要想在網頁中顯示圖像就需要使用圖像標記，接下來將詳細介紹圖像標記<img />以及和他相關的屬性。其基本語法格式如下： <img src="圖像URL"> -- 該語法中src屬性用於指定圖像文件的路徑和文件名，他是img標記的必需屬性。
相對路徑
相對路徑不帶有盤符，通常是以HTML網頁文件為起點，通過層級關系描述目標圖像的位置。
eg：<img src="img/logo.gif" alt="專業的java,.net,php,網頁,平面,iOS" />
相對路徑設置分為以下三種：
-- 圖像文件和html文件位於同一文件夾：只需輸入圖像文件的名稱即可，如<img src="logo.gif" />。
-- 圖像文件位於html文件的下一級文件夾：輸入文件夾名和文件名，之間用“/”隔開，如<img src="img/img01/logo.gif" />。
-- 圖像文件位於html文件的上一級文件夾：在文件名之前加入“../” ，如果是上兩級，則需要使用 “../ ../”，以此類推，如<img src="../logo.gif" />。
絕對路徑
絕對路徑一般是指帶有盤符的路徑。
eg: “D:\HTML+CSS網頁制作\chapter02\img\logo.gif”， 或完整的網絡地址，例如“http://www.baidu.com/images/logo.gif”。
6、雙標記詳解
1、段落標記<p>
-- 在網頁中要把文字有條理地顯示出來，離不開段落標記，就如同我們平常寫文章一樣，整個網頁也可以分為若干個段落，而段落的標記就是<p>。 -- <p>是HTML文檔中最常見的標記，默認情況下，文本在一個段落中會根據瀏覽器窗口的大小自動換行。
2、標題標記<hx>
-- 為了使網頁更具有語義化，我們經常會在頁面中用到標題標記，HTML提供了6個等級的標題，即<h1>、<h2>、<h3>、<h4>、<h5>和<h6>，從<h1>到<h6>重要性遞減。其基本語法格式如下： <hx>標題文本</hx>
3、文本樣式標記
-- 多種多樣的文字效果可以使網頁變得更加絢麗，為此HTML提供了文本樣式標記<font>，用來控制網頁中文本的字體、字號和顏色。其基本語法格式如下： <font>文本內容</font>
4、文本格式化標記
-- 在網頁中，有時需要為文字設置粗體、斜體或下划線效果，這時就需要用到HTML中的文本格式化標記，使文字以特殊的方式顯示。
文本格式化常用標記：
7、超鏈接
1、創建超鏈接
-- 在HTML中創建超鏈接非常簡單，只需用<a></a>標記環繞需要被鏈接的對象即可，其基本語法格式如下： <a href="跳轉目標" target="目標窗口的彈出方式">文本或圖像</a> -- 在上面的語法中，<a>標記是一個行內標記，用於定義超鏈接，href和target為其常用屬性，下面對它們進行具體地解釋。
2、超鏈接屬性
-- href：用於指定鏈接目標的url地址，當為<a>標記應用href屬性時，它就具有了超鏈接的功能。 -- target：用於指定鏈接頁面的打開方式，其取值有_self和_blank兩種，其中_self為默認值，_blank為在新窗口中打開方式。 -- <base /> 可以設置整體鏈接的打開狀態
3、超鏈接注意事項
注意: -- 暫時沒有確定鏈接目標時，通常將<a>標記的href屬性值定義為“#”(即href="#")，表示該鏈接暫時為一個空鏈接。 -- 不僅可以創建文本超鏈接，在網頁中各種網頁元素，如圖像、表格、音頻、視頻等都可以添加超鏈接。
4、錨點鏈接
通過創建錨點鏈接，用戶能夠快速定位到目標內容。 創建錨點鏈接分為兩步： -- 使用“<a href=”#id名“>鏈接文本</a>”創建鏈接文本。 -- 使用相應的id名標注跳轉目標的位置。
8、特殊符號標記
9、標簽語義化
- 標簽語義化概念：根據內容的結構化（內容語義化），選擇合適的標簽（代碼語義化）
- 標簽語義化意義：
1:網頁結構合理
2:有利於seo:和搜索引擎建立良好溝通，有了良好的結構和語義你的網頁內容自然容易被搜索引擎抓取；
3:方便其他設備解析（如屏幕閱讀器、盲人閱讀器、移動設備）
4:便於團隊開發和維護
- 注意事項：
1：盡可能少的使用無語義的標簽div和span；
2：在語義不明顯時，既可以使用div或者p時，盡量用p
3：不要使用純樣式標簽，如：b、font、u等，改用css設置。
4：需要強調的文本，可以包含在strong或者em標簽中strong默認樣式是加粗（不要用b），em是斜體（不用i）；
10、新標簽語義
