介紹html文檔的基本結構，html常用標簽的使用，理解html語言制作網頁基本原理。
html概述和基本結構
html概述
HTML是 HyperText Mark-up Language 的首字母簡寫，意思是超文本標記語言，超文本指的是超鏈接，標記指的是標簽，是一種用來制作網頁的語言，這種語言由一個個的標簽組成，用這種語言制作的文件保存的是一個文本文件，文件的擴展名為html或者htm，一個html文件就是一個網頁，html文件用編輯器打開顯示的是文本，可以用文本的方式編輯它，如果用瀏覽器打開，瀏覽器會按照標簽描述內容將文件渲染成網頁，顯示的網頁可以從一個網頁鏈接跳轉到另外一個網頁。
html基本結構
一個html的基本結構如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>網頁標題</title> </head> <body> 網頁顯示內容 </body> </html>
第一行是文檔聲明，第二行“<html>”標簽和最后一行“</html>”定義html文檔的整體，“<html>”標簽中的‘lang=“en”’定義網頁的語言為英文，定義成中文是'lang="zh-CN"',不定義也沒什么影響，它一般作為分析統計用。 “<head>”標簽和“<body>”標簽是它的第一層子元素，“<head>”標簽里面負責對網頁進行一些設置以及定義標題，設置包括定義網頁的編碼格式，外鏈css樣式文件和javascript文件等，設置的內容不會顯示在網頁上，標題的內容會顯示在標題欄，“<body>”內編寫網頁上顯示的內容。
HTML文檔類型
目前常用的兩種文檔類型是xhtml 1.0和html5
xhtml 1.0
xhtml 1.0 是html5之前的一個常用的版本，目前許多網站仍然使用此版本。
此版本文檔用sublime text創建方法： html:xt + tab
文檔示例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title> xhtml 1.0 文檔類型 </title> </head> <body> </body> </html>
html5
pc端可以使用xhtml 1.0，也可以使用html5，html5是向下兼容的
此版本文檔用sublime text創建方法： html:5 + tab 或者 ! + tab
文檔示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> html5文檔類型 </title> </head> <body> </body> </html>
兩種文檔的區別
1、文檔聲明和編碼聲明
2、html5新增了標簽元素以及元素屬性
html文檔規范
xhtml制定了文檔的編寫規范，html5可部分遵守，也可全部遵守，看開發要求。
1、所有的標簽必須小寫
2、所有的屬性必須用雙引號括起來
3、所有標簽必須閉合
4、img必須要加alt屬性(對圖片的描述)
html注釋：
html文檔代碼中可以插入注釋，注釋是對代碼的說明和解釋，注釋的內容不會顯示在頁面上，html代碼中插入注釋的方法是：
<!-- 這是一段注釋 -->
html標簽特點：
html的標簽大部分是成對出現的,少量是單個出現的，特定標簽之間可以相互嵌套，嵌套就是指一個標簽里面可以包含一個或多個其他的標簽，包含的標簽和父標簽可以是同類型的，也可以是不同類型的：
<!-- 成對出現的標簽 --> <body>......</body> <p>......</p> <div>......</div> <b>......</b> <!-- 單個出現的標簽 --> <br /> <img src="..." /> <input type="..." /> <!-- 標簽之間的嵌套 --> <p> <span>...</span> <a href="...">...</a> </p> <div> <h3>...</h3> <div> <span>...</span> <p>...</p> </div> </div>
html標題
通過 <h1>、<h2>、<h3>、<h4>、<h5>、<h6>,標簽可以在網頁上定義6種級別的標題。6種級別的標題表示文檔的6級目錄層級關系，比如說： <h1>用作主標題（最重要的），其后是 <h2>（次重要的），再其次是 <h3>，以此類推。搜索引擎會使用標題將網頁的結構和內容編制索引，所以網頁上使用標題是很重要的。
<h1>這是一級標題</h1> <h2>這是二級標題</h2> <h3>這是三級標題</h3>
html段落、換行與字符實體
html段落
<p>標簽定義一個文本段落，一個段落含有默認的上下間距，段落之間會用這種默認間距隔開，代碼如下：
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>段落</title> </head> <body> <p>HTML是 HyperText Mark-up Language 的首字母簡寫，意思是超文本標記語言，超 文本指的是超鏈接，標記指的是標簽，是一種用來制作網頁的語言，這種語言由一個個的 標簽組成，用這種語言制作的文件保存的是一個文本文件，文件的擴展名為html或者htm。 </p> <p>一個html文件就是一個網頁，html文件用編輯器打開顯示的是文本，可以用文本的方 式編輯它，如果用瀏覽器打開，瀏覽器會按照標簽描述內容將文件渲染成網頁，顯示的網 頁可以從一個網頁鏈接跳轉到另外一個網頁。</p> </body> </html>
html換行
代碼中成段的文字，直接在代碼中回車換行，在渲染成網頁時候不認這種換行，如果真想換行，可以在代碼的段落中插入<br />來強制換行，代碼如下：
<p> 一個html文件就是一個網頁，html文件用編輯器打開顯示的是文本，可以用<br /> 文本的方式編輯它，如果用瀏覽器打開，瀏覽器會按照標簽描述內容將文件<br /> 渲染成網頁，顯示的網頁可以從一個網頁鏈接跳轉到另外一個網頁。 </p>
html字符實體
代碼中成段的文字，如果文字間想空多個空格，在代碼中空多個空格，在渲染成網頁時只會顯示一個空格，如果想顯示多個空格，可以使用空格的字符實體,代碼如下：
<!-- 在段落前想縮進兩個文字的空格，使用空格的字符實體： --> <p> 一個html文件就是一個網頁，html文件用編輯器打開顯示的是文本，可以用<br /> 文本的方式編輯它，如果用瀏覽器打開，瀏覽器會按照標簽描述內容將文件<br /> 渲染成網頁，顯示的網頁可以從一個網頁鏈接跳轉到另外一個網頁。</p> 在網頁上顯示 “<” 和 “>” 會誤認為是標簽，想在網頁上顯示“<”和“>”可以使用它們的字符實體，比如： <!-- “<” 和 “>” 的字符實體為 < 和 > --> <p> 3 < 5 <br> 10 > 5 </p>
html塊、含樣式的標簽
html塊
1、div標簽 塊元素，表示一塊內容，沒有具體的語義。
2、span標簽 行內元素，表示一行中的一小段內容，沒有具體的語義。
含樣式和語義的標簽
1、em標簽 行內元素，表示語氣中的強調詞
2、i標簽 行內元素，原本沒有語義，w3c強加了語義，表示專業詞匯
3、b標簽 行內元素，原本沒有語義，w3c強加了語義，表示文檔中的關鍵字或者產品名
4、strong標簽 行內元素，表示非常重要的內容
語義化的標簽
語義化的標簽，就是在布局的時候多使用語義化的標簽，搜索引擎在爬網的時候能認識這些標簽，理解文檔的結構，方便網站的收錄。比如：h1標簽是表示標題，p標簽是表示段落，ul、li標簽是表示列表，a標簽表示鏈接，dl、dt、dd表示定義列表等，語義化的標簽不多。
html圖像、絕對路徑和相對路徑
html圖像
<img>標簽可以在網頁上插入一張圖片，它是獨立使用的標簽，通過“src”屬性定義圖片的地址，通過“alt”屬性定義圖片加載失敗時顯示的文字，以及對搜索引擎和盲人讀屏軟件的支持。
<img src="images/pic.jpg" alt="產品圖片" />
絕對路徑和相對路徑
像網頁上插入圖片這種外部文件，需要定義文件的引用地址，引用外部文件還包括引用外部樣式表，javascript等等，引用地址分為絕對地址和相對地址。
- 絕對地址：相對於磁盤的位置去定位文件的地址
- 相對地址：相對於引用文件本身去定位被引用的文件地址
絕對地址在整體文件遷移時會因為磁盤和頂層目錄的改變而找不到文件，相對路徑就沒有這個問題。相對路徑的定義技巧：
-
“ ./ ” 表示當前文件所在目錄下，比如：“./pic.jpg” 表示當前目錄下的pic.jpg的圖片，這個使用時可以省略。
-
“ ../ ” 表示當前文件所在目錄下的上一級目錄，比如：“../images/pic.jpg” 表示當前目錄下的上一級目錄下的images文件夾中的pic.jpg的圖片。
html鏈接
html鏈接
<a>標簽可以在網頁上定義一個鏈接地址，通過src屬性定義跳轉的地址，通過title屬性定義鼠標懸停時彈出的提示文字框。
<a href="#"></a> <!-- # 表示鏈接到頁面頂部 --> <a href="http://www.itcast.cn/" title="跳轉的傳智播客網站">傳智播客</a> <a href="2.html">測試頁面2</a>
定義頁面內滾動跳轉
頁面內定義了“id”或者“name”的元素，可以通過a標簽鏈接到它的頁面滾動位置，前提是頁面要足夠高，有滾動條，且元素不能在頁面頂部，否則頁面不會滾動。
<a href="#mao1">標題一</a> ...... ...... <h3 id="mao1">跳轉到的標題</h3>
html列表
有序列表
在網頁上定義一個有編號的內容列表可以用<ol>、<li>配合使用來實現，代碼如下：
<ol> <li>列表文字一</li> <li>列表文字二</li> <li>列表文字三</li> </ol>
在網頁上生成的列表，每條項目上會按1、2、3編號，有序列表在實際開發中較少使用。
無序列表
在網頁上定義一個無編號的內容列表可以用<ul>、<li>配合使用來實現，代碼如下：
<ul> <li>列表文字一</li> <li>列表文字二</li> <li>列表文字三</li> </ul>
在網頁上生成的列表，每條項目上會有一個小圖標，這個小圖標在不同瀏覽器上顯示效果不同，所以一般會用樣式去掉默認的小圖標，如果需要圖標，可以用樣式自定義圖標，從而達到在不同瀏覽器上顯示的效果相同,實際開發中一般用這種列表。
定義列表
定義列表通常用於術語的定義。<dl>標簽表示列表的整體。<dt>標簽定義術語的題目。<dd>標簽是術語的解釋。一個<dl>中可以有多個題目和解釋，代碼如下：
<h3>前端三大塊</h3> <dl> <dt>html</dt> <dd>負責頁面的結構</dd> <dt>css</dt> <dd>負責頁面的表現</dd> <dt>javascript</dt> <dd>負責頁面的行為</dd> </dl>
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來做整體頁面的布局，布局的技巧歸納為如下幾點：
1、定義表格寬高，將border、cellpadding、cellspacing全部設置為0
2、單元格里面嵌套表格
3、單元格中的元素和嵌套的表格用align和valign設置對齊方式
4、通過屬性或者css樣式設置單元格中元素的樣式
傳統布局目前應用：
1、快速制作用於演示的html頁面
2、商業推廣EDM制作(廣告郵件)
table布局實例（個人簡歷頁面布局實例）：
表格常用樣式屬性
border-collapse:collapse 設置邊框合並，制作一像素寬的邊線的表格
html表單
表單用於搜集不同類型的用戶輸入，表單由不同類型的標簽組成，實現一個特定功能的表單區域（比如：注冊），首先應該用<form>標簽來定義表單區域整體，在此標簽中再使用不同的表單控件來實現不同類型的信息輸入，具體實現及注釋可參照以下偽代碼：
<!-- form定義一個表單區域,action屬性定義表單數據提交的地址， method屬性定義提交的方式。 --> <form action="http://www..." method="get"> <!-- label標簽定義表單控件的文字標注，input類型為text定義了 一個單行文本輸入框 --> <p> <label>姓名：</label><input type="text" name="username" /> </p> <!-- input類型為password定義了一個密碼輸入框 --> <p> <label>密碼：</label><input type="password" name="password" /> </p> <!-- input類型為radio定義了單選框 --> <p> <label>性別：</label> <input type="radio" name="gender" value="0" /> 男 <input type="radio" name="gender" value="1" /> 女 </p> <!-- input類型為checkbox定義了單選框 --> <p> <label>愛好：</label> <input type="checkbox" name="like" value="sing" /> 唱歌 <input type="checkbox" name="like" value="run" /> 跑步 <input type="checkbox" name="like" value="swiming" /> 游泳 </p> <!-- input類型為file定義上傳照片或文件等資源 --> <p> <label>照片：</label> <input type="file" name="person_pic"> </p> <!-- textarea定義多行文本輸入 --> <p> <label>個人描述：</label> <textarea name="about"></textarea> </p> <!-- select定義下拉列表選擇 --> <p> <label>籍貫：</label> <select name="site"> <option value="0">北京</option> <option value="1">上海</option> <option value="2">廣州</option> <option value="3">深圳</option> </select> </p> <!-- input類型為submit定義提交按鈕 還可以用圖片控件代替submit按鈕提交，一般會導致提交兩次，不建議使用。如： <input type="image" src="xxx.gif"> --> <p> <input type="submit" name="" value="提交"> <!-- input類型為reset定義重置按鈕 --> <input type="reset" name="" value="重置"> </p> </form>
html內嵌框架
html內嵌框架
<iframe>標簽會創建包含另外一個html文件的內聯框架（即行內框架），src屬性來定義另一個html文件的引用地址，frameborder屬性定義邊框，scrolling屬性定義是否有滾動條，代碼如下：
<iframe src="http://www..." frameborder="0" scrolling="no"></iframe>
內嵌框架與a標簽配合使用
a標簽的target屬性可以將鏈接到的頁面直接顯示在當前頁面的iframe中，代碼如下：
<a href="01.html" target="myframe">頁面一</a> <a href="02.html" target="myframe">頁面二</a> <a href="03.html" target="myframe">頁面三</a> <iframe src="01.html" frameborder="0" scrolling="no" name="myframe"></iframe>