目錄
第一章 HTML第一天
本章要點：
1、常用瀏覽器的介紹以及瀏覽器內核；
2、Html概述和Html編譯器以及Html基本結構；
3、靜態頁面以及動態頁面；
4、Html標題、段落、換行與字符實體；
5、Html常用標籤以及每個標籤的語義；
6、Html圖像、絕對路徑和相對路徑；
7、Html超鏈接以及其屬性介紹；
8、Html列表和表格。
一、常用瀏覽器與瀏覽器內核
1、常用瀏覽器
Chrome（推薦谷歌） Firefox（火狐） IE瀏覽器
Opera瀏覽器 safari瀏覽器
2、瀏覽器內核
瀏覽器內核的理解？
主要分成兩部分：渲染引擎（layout或engine）和JS引擎。
渲染引擎：負責取得網頁的內容（HTML、XML、圖像等）、整理信息（加入CSS等），以及計算網頁的顯示方式，然後輸出到顯示器或打印機。瀏覽器的內核的不同對網頁的語法解釋會有不同，所以渲染的效果也不相同。所有網頁瀏覽器、電子郵件客戶端以及其他需要編輯、顯示網絡內容的應用程序都需要內核。
JS引擎：解析和執行JS來實現網頁的動態效果。
最開始渲染引擎和JS引擎並沒有區分的很明確，後來JS引擎越來越獨立，內核就傾向於只是指渲染引擎。
常見的瀏覽器內核有哪些？
Trident內核(IE內核)：IE，MaxThon，TT，The World，360，搜狗瀏覽器等[MSHTML]
Gecko內核(Firefox內核)：Netscape6及以上版本，FF，MozillaSuite/SeaMonkey等
Presto內核(opera前內核)：Opera7及以上[Opera內核原爲：Presto，現爲：Blink]
Webkit內核(safari內核)：Safari，Chrome等[Chrome：Blink（Webkit的分支）]
二、Html概述和Html編譯器及Html基本結構
1. Html簡介
HTML是 Hyper Text Markup Language 的首字母簡寫，意思是超文本標記語言，超文本指的是超鏈接，標記指的是標籤，是一種用來製作網頁的語言，這種語言由一個個的標籤組成，用這種語言製作的文件保存的是一個文本文件，文件的擴展名爲html或者htm，一個html文件就是一個網頁，html文件用編輯器打開顯示的是文本，可以用文本的方式編輯它，如果用瀏覽器打開，瀏覽器會按照標籤描述內容將文件渲染成網頁，顯示的網頁可以從一個網頁鏈接跳轉到另外一個網頁。
2. Html編譯器介紹
(1) 、Notepad++
Notepad++是一款非常經典的編輯器，它的功能比Windows 中的 Notepad強大得多，不僅有語法高亮度顯示，也有語法摺疊功能、代碼自動補全等，你還可以根據自己的喜好設置用戶界面，使用擴展功能。
(2) 、Sublime Text2
Sublime Text是具有漂亮的用戶界面、強大功能和優良性能的一款代碼編輯器，你可以在Windows、OS X和Linux等主流操作系統上運行使用，而且現在一直可以免費使用。
(3) 、Adobe Dreamweaver
DW是第一套針對專業網頁設計師特別發展的視覺化網頁開發工具，利用它可以輕而易舉地製作出跨越平臺限制和跨越瀏覽器限制的充滿動感的網頁。
(4) 、Hbuilder
支持HTML5的Web開發IDE。HBuilder本身主體是由Java編寫，它基於Eclipse，所以順其自然地兼容了Eclipse的插件。快，是HBuilder的最大優勢，通過完整的語法提示和代碼輸入法、代碼塊等，大幅提升HTML、js、css的開發效率。
(5) 、EditPlus
EditPlus是一款由韓國 Sangil Kim (ES-Computing)出品的小巧但是功能強大的可處理文本、HTML和程序語言的Windows編輯器，另外它也是一個非常好用的HTML編輯器，它除了支持顏色標記、HTML 標記，同時支持C、C++、Perl、Java。
(6) 、CoffeeCup HTML Editor
它是一種體積小，易於使用的應用程序，可以幫助編輯和預覽HTML文件。它有着許多的版本，可以按鈕操作Javascript腳本，進行字體設計、幀設計、顏色嚮導、抓取等。它是HTML編輯器中非常好的一款。
(7) WebStorm
WebStorm 是jetbrains公司旗下一款JavaScript 開發工具。目前已經被廣大中國JS開發者譽爲"Web前端開發神器"、"最強大的HTML5編輯器"、"最智能的JavaScript IDE"等。與IntelliJ IDEA同源，繼承了IntelliJ IDEA強大的JS部分的功能。
3. Html基本結構
1）、<HTML>標籤
<html>標籤的作用相當於設計者在告訴瀏覽器，整個網頁是從<html>這裏開始的，然後到</html>結束。
對於<html>這個標籤，我們經常看到這樣一句代碼：
html xmlns="http://www.w3.org/1999/xhtml
其實上面這句代碼聲明瞭該網頁使用的是W3C組織的 XHTML標準。
2）、<head>標籤
head標籤是頁面的“頭部”，只能定義一些特殊的內容。
3）、<body>標籤
body標籤是頁面的“身體”，一般網頁絕大多數的標籤代碼都是在這裏編寫。
在此說明一下：
①對於HTML的基本結構，你至少要默寫出來，這些都要記憶。
②記憶標籤小技巧：根據標籤字母意思就很容易記憶了，比如<head>表示“頁頭”，<body>表示“頁身”。
三、靜態頁面以及動態頁面
1. 靜態頁面
靜態網頁也稱爲普通網頁，是相對網頁而言的。靜態網頁不是指網頁中的元素都是靜止不動的，而是指網頁文件中沒有程序代碼，只有HTML（超文本標記語言）標記，一般後綴爲.htm、.html、.shtml或.xml等。在靜態網頁中，可以包括GIF動畫，鼠標經過Flash按鈕時，按鈕可能會發生變化。
靜態網頁一經制成，內容就不會再變化，不管何人何時訪問，顯示的內容都是一樣的。
如果要修改網頁的內容，就必須修改其源代碼，然後重新上傳到服務器上。
對於靜態網頁，用戶可以直接雙擊打開，看到的效果與訪問服務器是相同的，即服務器參加與否對頁面的內容是不會有影響的。這是因爲在用戶訪問該網頁之前，網頁的內容就已經確定，無論用戶何時、以怎樣的方式訪問，網頁的內容都不會再改變。
靜態網頁的工作流程可以分爲以下4個步驟。
1) 編寫一個靜態文件，並在Web服務器上發佈；
2) 用戶在瀏覽器的地址欄中輸入該靜態網頁的URL（統一資源定位符）並按回車鍵，瀏覽器發送請求到Web服務器；
3) Web服務器找到此靜態文件的位置，並將它轉換爲HTML流傳送到用戶的瀏覽器；
4) 瀏覽器收到HTML流，顯示此網頁的內容；
靜態網頁的內容不會發生任何變化。其工作原理圖，如下所示。
2. 動態頁面
動態網頁是指在網頁文件中除了HTML標記以外，還包括一些實現特定功能的程序代碼，這些程序代碼使得瀏覽器與服務器之間可以進行交互，即服務器端可以根據客戶端的不同請求動態產生網頁內容。動態網頁的後綴名通常根據所用的程序設計語言的不同而不同，一般爲.asp、.aspx、cgi、.php、.perl、.jsp等。動態網頁可以根據不同的時間、不同的瀏覽者顯示不同的信息。常見的留言板、論壇、聊天室都是用動態網頁實現的。
動態網頁相對複雜，不能直接雙擊打開。動態網頁的工作流程分爲以下4個步驟。
1) 編寫動態網頁文件，其中包括程序代碼，並在Web服務器上發佈；
2) 用戶在瀏覽器的地址欄中輸入該動態網頁的URL並按回車鍵（Enter），瀏覽器發送訪問請求到Web服務器；
3) Web服務器找到此動態網頁的位置，並根據其中的程序代碼動態建立HTML流傳送到用戶瀏覽器；
4) 瀏覽器接收到HTML流，顯示此網頁的內容；
從整個工作流可以看出，用戶瀏覽動態網頁時，需要在服務器上動態執行該網頁文件，將含有程序代碼的動態網頁轉化爲標準的靜態網頁，最後把靜態網頁發送給用戶。其工作原理圖，如下所示。
3. 靜態頁面和動態頁面的區別
靜態網頁
(1) 靜態網頁每個網頁都有一個固定的URL，且網頁URL以.htm、.html、.shtml等常見形式爲後綴，而不含有“？”；
(2) 網頁內容一經發布到網站服務器上，無論是否有用戶訪問，每個靜態網頁的內容都是保存在網站服務器上的，也就是說，靜態網頁是實實在在保存在服務器上的文件，每個網頁都是一個獨立的文件；
(3) 靜態網頁的內容相對穩定，因此容易被搜索引擎檢索；
(4) 靜態網頁沒有數據庫的支持，在網站製作和維護方面工作量較大，因此當網站信息量很大時完全依靠靜態網頁製作方式比較困難；
(5) 靜態網頁的交互性較差，在功能方面有較大的限制。
動態網頁
1) 動態網頁以數據庫技術爲基礎，可以大大降低網站維護的工作量；
2) 採用動態網頁技術的網站可以實現更多的功能，如用戶註冊、用戶登錄、在線調查、用戶管理、訂單管理等等；
3) 動態網頁實際上並不是獨立存在於服務器上的網頁文件，只有當用戶請求時服務器才返回一個完整的網頁；
4) 動態網頁中的“？”對搜索引擎檢索存在一定的問題，搜索引擎一般不可能從一個網站的數據庫中訪問全部網頁，或者出於技術方面的考慮，搜索蜘蛛不去抓取網址中“？”後面的內容，因此採用動態網頁的網站在進行搜索引擎推廣時需要做一定的技術處理才能適應搜索引擎的要求
四、Html標題、段落、換行與字符實體
1. Html標題
a. 標題（Heading）是通過 <h1> - <h6> 等標籤進行定義的。
b. <h1> 定義最大的標題。<h6> 定義最小的標題。
<h1> This is a heading </h1>
<h2> This is a heading </h2>
<h3> This is a heading </h3>
<h4> This is a heading </h4>
<h5> This is a heading </h5>
<h6> This is a heading </h6>
2. Html段落
段落是通過 <p> 標籤定義的。
<p> 這是段落 </p>
<p> 這是段落 </p>
<p> 這是段落 </p>
<p> 段落是由P標籤定義的 </p>
3. Html字符實體
a. 在 HTML 中，某些字符是預留的。
b. 在 HTML 中不能使用小於號（<）和大於號（>），這是因爲瀏覽器會誤認爲它們是標籤。
c. 如果希望正確地顯示預留字符，我們必須在 HTML 源代碼中使用字符實體（character entities）。
<!--這是字符實體-->
<p>商標:© 空格: 小於號:< 大於號:> 商標註冊:® 商標:™</p>
五、Html圖像、絕對路徑和相對路徑
1. Html圖像
圖像標籤（<img>）和源屬性（Src）
在 HTML 中，圖像由 <img> 標籤定義。
<img> 是空標籤，意思是說，它只包含屬性，並且沒有閉合標籤。
要在頁面上顯示圖像，你需要使用源屬性（src）。src 指 "source"。源屬性的值是圖像的 URL 地址。
源碼如下：
<img src='url'/>
URL 指存儲圖像的位置。
如果名爲 "boat.gif"的圖像位於 [www.yltedu.com的目錄中,那麼其URL爲http://www.yltedu.com/images/boat.gif。](http://www.yltedu.com的目錄中,那麼其Url爲http:/www.yltedu.com/images/boat.gif。)
img元素文本屬性（Alt）
alt 屬性用來爲圖像定義一串預備的可替換的文本。替換文本屬性的值是用戶定義的。
<!--圖像標籤-->
<img src="img/logo.png" alt="logo"/>
在瀏覽器無法載入圖像時，替換文本屬性告訴讀者她們失去的信息。此時，瀏覽器將顯示這個替代性的文本而不是圖像。爲頁面上的圖像都加上替換文本屬性是個好習慣，這樣有助於更好的顯示信息，並且對於那些使用純文本瀏覽器的人來說是非常有用的。
<img src="圖像源文件路徑" alt="圖片無法顯示時的提示文字" title="鼠標經過圖片時的提示文字"/>
2. 絕對路徑
絕對路徑是指文件在硬盤上真正存在的路徑。例如“bg.jpg”這個圖片是存放在硬盤的“E:\book\網頁佈局代碼\第2章”目錄下，那麼 “bg.jpg”這個圖片的絕對路徑就是“E:\book\網頁布\代碼\第2章\bg.jpg"。那麼如果要使用絕對路徑指定網頁的背景圖片就應該使用 以下語句：
<body background="E:\book\網頁佈局\代碼\第2章\bg.jpg"></body>
使用絕對路徑的缺點：
事實上，在網頁編程時，很少會使用絕對路徑，如果使用“E:\book\網頁布\代碼\第2章\bg.jpg”來指定背景圖片的位置，在自己的計算機上 瀏覽可能會一切正常，但是上傳到Web服務器上瀏覽就很有可能不會顯示圖片了。因爲上傳到Web服務器上時，可能整個網站並沒有放在Web服務器的E盤， 有可能是D盤或H盤。即使放在Web服務器的E盤裏，Web服務器的E盤裏也不一定會存在“E:\book\網頁佈局\代碼\第2章”這個目錄，因此在瀏 覽網頁時是不會顯示圖片的。
3. 相對路徑
爲了避免以上這種隋況發生，通常在網頁裏指定文件時，都會選擇使用相對路徑。所謂相對路徑，就是相對於自己的目標文件位置。例如上面的例子，“s1.htm” 文件裏引用了“bg.jpg”圖片，由於“bg.jpg”圖片相對於“s1.htm”來說，是在同一個目錄的，那麼要在“s1.htm”文件裏使用以下代碼後，只要這兩個文件的相對位置沒有變(也就是說還是在同一個目錄內)，那麼無論上傳到Web服務器的哪個位置，在瀏覽器裏都能正確地顯示圖片。
相對路徑使用的特殊符號：
以下爲建立路徑所使用的幾個特殊符號，及其所代表的意義。
"./"：代表目前所在的目錄。
"../"：代表上一層目錄。
以"/"開頭：代表根目錄。
六、Html超鏈接以及其屬性介紹
1. Html超鏈接
超鏈接的英文名是hyperlink，它能夠讓瀏覽者在各個獨立的頁面之間方便地跳轉。每個網站都是由衆多的網頁組成，網頁之間通常都是通過鏈接方式相互關聯的。超鏈接的範圍很廣，可以將文檔中的任何文字及任意位置的圖片設置爲超鏈接。超鏈接有外部鏈接、內部鏈接、電子郵件鏈接、錨點鏈接、空連接、腳本鏈接等。
a標籤是非常常見而簡單的標籤。在HTML中，使用a標籤來表示一個超鏈接。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>超鏈接a標籤</title>
</head>
<body>
<a href="http://www.yltedu.com">英萊特科技</a>
</body>
</html>
2. 超鏈接元素的屬性
超鏈接屬性中，我們只需要掌握target屬性就可以了。超鏈接屬性中，我們只需要掌握target屬性就可以了。
在創建網頁中，默認情況下超鏈接在原來的瀏覽器窗口打開，但是我們可以使用target屬性來控制目標窗口的打開方式。
一般情況下，target只用到“self”和“blank”這兩個屬性值，其他兩個我們不需要深究，因爲幾乎用不到。
<a href="http://www.yltedu.com" target="_blank">陝西科技</a>
3. 錨點鏈接
錨點鏈接是內部鏈接的一種，它鏈接對象是當前頁面的某一個部分。
有些網頁由於內容比較多，導致頁面過長，訪問者需要不停地拖動瀏覽器上的滾動條來查看文檔中的內容。爲了方便用戶查看文檔中的內容，在文檔中需要建立錨點鏈接。
所謂的錨點鏈接，就是點擊某一個超鏈接，它就會跳到當前頁面的某一部分。
<p id="Top">這是頂部</p>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<a href="#Top">返回頂部</a>
七、Html列表和表格
1. Html列表
列表是網頁中一種常用的數據排列方式，我們在網頁中到處都可以看到列表的身影，如圖顯示
HTML中，列表共有3種：①有序列表；②無序列表；③定義列表。
圖1有序列表
圖2無序列表
圖3自定義列表
(1) 有序列表的各個列表項是有順序的。有序列表從<ol>開始，到</ol>結束，中間的列表項是<li>標籤內容。有序列表的列表項是有先後順序的，一般採用數字或字母作爲順序，默認是採用數字順序。
有序列表的type屬性
type屬性實現的效果可以用CSS的list-style-type實現，作爲初學者我們可以先用一下type屬性，到時候學了CSS入門教程之後，我們直接摒棄type屬性，而全部改用CSS控制樣式。
<!--有序列表-->
<ol type="a">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>Ajax</li>
<li>SEO</li>
<li>ASP.net</li>
</ol>
(2) 無序列表，很好理解，有序列表的列表項是有一定順序的，而無序列表的列表項是沒有順序的。默認情況下，無序列表的項目符號是●，不過可以通過無序列表type屬性來改變無序列表的列表項符號。
無序列表type屬性
無序列表跟有序列表一樣，都有一個type屬性，用於控制列表項符號。我們可以改變type屬性值來調整列表項符號。
<!--無序列表-->
<ul type="square">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>Ajax</li>
<li>SEO</li>
<li>ASP.net</li>
</ul>
(3) 定義列表在實際開發用得不多，不過還是有一定的講解價值。
定義列表由兩部分組成：定義條件和定義描述。
<dl>
<dt>HTML</dt>
<dd>製作網頁的標準語言,控制網頁的結構</dd>
<dt>CSS</dt>
<dd>層疊樣式表,控制網頁的樣式</dd>
<dt>JavaScript</dt>
<dd>腳本語言,控制網頁的行爲</dd>
</dl>
<dl>標記和</dl>標記分別定義了定義列表的開始和結束，<dt>後面添加要解釋的名詞，而在<dd>後面則添加該名詞的具體解釋。
2. Html表格
(1) 表格的概述
在製作網頁時，使用表格可以更清晰地排列數據。在過去的web1.0時代，表格更多地用在網頁佈局定位上。但是在web2.0時代，表格定位已經被摒棄了，現在使用的是“DIV+CSS”模式。
(2) 表格基本結構
表格基本標籤有：table標籤（表格）、tr標籤（行）、td標籤（單元格）。<tr>標籤和<td>標籤都要在表格的開始標籤<table>和結束標籤</table>之間纔有效。
<!--表格標籤-->
<table border="1" >
<tr>
<td>單元格1</td>
<td>單元格2</td>
</tr>
<tr>
<td>單元格3</td>
<td>單元格4</td>
</tr>
</table>
表格一般都有一個標題，表格標題使用<caption>標籤。表格的標題一般位於整個表格的第1行，一個表格只能含有一個表格標題。
<!--表格舉例-->
<table border=”1”>
<caption>英萊特項目部實習生成績統計</caption>
<tr>
<td>小明</td>
<td>80</td>
<td>80</td>
<td>80</td>
</tr>
<tr>
<td>小紅</td>
<td>90</td>
<td>90</td>
<td>90</td>
</tr>
<tr>
<td>小杰</td>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
</table>
(3) 表格語義化
上面幾節課我們學習瞭如下標籤：table標籤（表格）、tr標籤（行）、td標籤（標準單元格）、caption標籤（標題）、th標籤（表頭單元格）。
爲了更深一層對錶格進行語義化，HTML引入了thead、tbody和tfoot這三個標籤。這三個標籤把表格分爲三部分：表頭、表身、表腳。有了這三個標籤，表格HTML代碼語義更加良好，結構更加清晰。
英萊特實習生月考成績統計
<!--月考成績統計-->
<table border="1" cellspacing="0" cellpadding="1" width="800px" height="300px" >
<tr align="left" >
<th>姓名</th>
<th>成績</th>
<th>崗位</th>
<th>時間</th>
</tr>
<tr height="44px">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr bgcolor="#eee">
<td>張無忌</td>
<td>80</td>
<td>python工程師</td>
<td>2018-10-31</td>
</tr>
<tr>
<td>張三丰</td>
<td>86</td>
<td>.net工程師</td>
<td>2018-10-31</td>
</tr>
<tr bgcolor="#eee">
<td>金毛獅王</td>
<td>99</td>
<td>python工程師</td>
<td>2018-10-31</td>
</tr>
<tr >
<td>滅絕師太</td>
<td>89</td>
<td>Java工程師</td>
<td>2018-10-31</td>
</tr>
<tr bgcolor="#eee">
<td>平均:</td>
<td>90</td>
<td>及格率:</td>
<td>90%</td>
</tr>
</table>
(4) 表格合併
在設計表格時，有時需要將兩個或更多的相鄰單元格組合成一個單元格，經常使用word的人都會操作過。在HTML中，這就需要用到“表格合併行”和“表格和並列”。
table常用標籤
1、table標籤：聲明一個表格
2、tr標籤：定義表格中的一行
3、td和th標籤：定義一行中的一個單元格，td代表普通單元格，th表示表頭單元格
table常用屬性：
1、border 定義表格的邊框
2、cellpadding 定義單元格內內容與邊框的距離
3、cellspacing 定義單元格與單元格之間的距離
4、align 設置單元格中內容的水平對齊方式,設置值有：left | center | right
5、valign 設置單元格中內容的垂直對齊方式 top | middle | bottom
6、colspan 設置單元格水平合併
7、rowspan 設置單元格垂直合併
實例代碼:
<!--表格合併:課表的練習-->
<table border="1" cellspacing="" cellpadding="1" width="800px" height="400px" align="center" bordercolor="blue">
<tr align="center">
<td>項目</td>
<td colspan="5">上課</td>
<!--<td></td>-->
<!--<td></td>-->
<!--<td></td>-->
<!--<td></td>-->
<td colspan="2">休息</td>
<!--<td></td>-->
</tr>
<tr align="center">
<td>星期</td>
<td>星期一</td>
<td>星期二</td>
<td>星期三</td>
<td>星期四</td>
<td>星期五</td>
<td>星期六</td>
<td>星期日</td>
</tr>
<tr align="center">
<td rowspan="4">上午</td>
<td>語文</td>
<td>數學</td>
<td>英語</td>
<td>英語</td>
<td>物理</td>
<td>計算機</td>
<td rowspan="4">休息</td>
</tr>
<tr align="center">
<!--<td></td>-->
<td>數學</td>
<td>數學</td>
<td>地理</td>
<td>歷史</td>
<td>化學</td>
<td>計算機</td>
<!--<td></td>-->
</tr>
<tr align="center">
<!--<td></td>-->
<td>化學</td>
<td>語文</td>
<td>體育</td>
<td>計算機英語</td>
<td>英語</td>
<td>計算機</td>
<!--<td></td>-->
</tr>
<tr align="center">
<!--<td></td>-->
<td>政治</td>
<td>英語</td>
<td>體育</td>
<td>歷史</td>
<td>地理</td>
<td>計算機</td>
<!--<td></td>-->
</tr>
<tr align="center">
<td rowspan="2">下午</td>
<td>語文</td>
<td>數學</td>
<td>英語</td>
<td>物理</td>
<td>計算機</td>
<td>英語</td>
<td rowspan="2">休息</td>
</tr>
<tr align="center">
<!--<td></td>-->
<td>數學</td>
<td>數學</td>
<td>地理</td>
<td>歷史</td>
<td>化學</td>
<td>計算機</td>
<!--<td></td>-->
</tr>
</table>