一、HTML和網站基礎知識
1、HTML簡介
HTML(hypertext markup language,超文本標記語言):是一種用來製作超文本文檔的簡單標記語言。用於描述網頁的格式設計（在網頁上定義一個標題、文本或表格等）和它與萬維網上其他頁面的連接信息。
2、網頁的分類
分爲靜態網頁和動態網頁
（1）靜態網頁：純HTML格式網頁，僅能提供瀏覽，無法與網站進行互動。在靜態網頁中，整個網頁的主要結構與網頁的顯示控制必須利用html實現。靜態頁的擴展名一般問.htm、.html、.shtml、.xml。
靜態網頁的執行過程：
- 瀏覽器向網絡中的服務器發出請求，指向某個靜態網頁
- 服務器接收到請求後，傳輸給瀏覽器文本文件
- 瀏覽器接收到服務器傳來的文件後，解析HTML標籤，將結果顯示出來。
（2）動態網頁：網頁的內容可以根據某種條件的改變而自動改變。採用動態技術的網頁。動態網頁的擴展名爲.asp、.jsp、.php、.perl、.cgi等擴展名，並且在動態網頁網址中有一個標誌性的符號“？”
3、標記
HTML用於描述功能的符號。標記在使用時必須用尖括號括起來。瀏覽器會對尖括號裏面的標記進行解釋。html常用的主要標記有<html>、<head>、<title>、<body>。
標記分爲單標記和雙標記：
（1）單標記：只需在尖括號中輸入標記名即可，一種單標記表示一種功能，沒有範圍之分。
格式：<標記>
如換行標記：<br>
（2）雙標記：標記有頭有尾，前面標記與後面標識保持一致，後面標記有斜槓。
格式：<標記>內容</標記>
如段落標記;<p> </p>
4、HTML標記構成
<html></html>裏面包含頭部<head>和內容體<body>。
5、網頁佈局的技術
（1）表格佈局技術：表格佈局在過去比較普遍，就是將各種需要的額佈局文本、圖像素材等放到無邊框的表格中，優點是不用擔心不同對象之間的影響，缺點是降低網頁下載速度。
（2）CSS（層疊樣式表）技術：又稱爲DIV+CSS佈局技術，可以精確定位文本和圖片，將數據和格式分開，使網頁的數據量大大減少。
二、常用HTML標記和格式
1、設置正文標題
格式：<h#>主題文字</h#>
#是標題字號1-6，數字越大字號越小。
2、設置段落
（1）段落標記
格式：<p>這裏表示段落</p>
段落之間會空一行
（2）段落中的空格
格式：“ ”
（3）強制換行
格式：<br>
3、給代碼添加註釋
格式：<!--這裏放註釋-->
4、文字的修飾
粗體格式：<b>粗體，這裏顯示的是粗體</b>
斜體格式：<i>斜體，這裏顯示的是斜體</i>
下劃線：<u>下劃線</u>
刪除線：<s>刪除線</s>
上標：<sup>上標</sup>
下標：<sub>下標</sub>
三、字體標記
1、設置字體大小
格式：<font size="1">要放的文字</font>
關鍵字size用來表示大小，從1-7的任意一個數字，數字越大，字體也就越大。
2、設置字體顏色
格式：<font color="red">要放的文字</font>
color後可以接顏色的單詞，也可以接RGB顏色值，如color="#cccccc";i
3、字體分爲邏輯字體和物理字體
物理字體：
邏輯字體：
四、文字佈局
1、行的控制
（1）換行控制
注意換行<p>和強制換行<br>的區別
<p>換行中間會空一行，<br>不會空一行
實例：
文字1<p>文字2<br>
文字3<br>文字4
測試效果：
（2）不換行控制
格式：<nobr>添加文字</nobr>
該標記中的文字，不會換行，在頁面中一行裏一直顯示下去。
2、文字對齊
語法：align="#"
#可以爲left、right、center。
align需要配合<p></p>等使用。
如文字右對齊：
<p align="right">這裏添加文字</p>
cener可不用align關鍵字，進行居中處理
<center>這裏添加文字</center>
3、列表
列表分爲有序列表和無序列表。有序列表前時有序號的數字；無序列表前是圓圈。
（1）無序列表
語法：
<ul>
<li>表項一</li>
<li>表項二</li>
<li>表項三</li>
</ul>
(2)有序列表
<ol>
<li>表項一</li>
<li>表項二</li>
<li>表項三</li>
</ol>
4、 製作滾動文字
（1）設置文字滾動
默認格式：<marquee>添加文字</marquee>
默認從右到左，循環滾動。
（2）設置文字滾動方向
direction屬性設置內容的滾動方向，屬性值有left、right、up、down。
<marquee direction>添加文字</marquee>
（3）設置文字滾動的速度和形式
五、圖像和鏈接
1、圖像的基本語法
（1）在網頁中插入圖像
格式：<img src="cd.jpg">
（2）圖像無法顯示時的提示信息
格式：<img src="cd.jpg" alt="圖片無法正常顯示時顯示的文字">
（3）控制圖像的大小
格式：<img src="cd.jpg" width="400px" height="400px">
2、圖像和文字對齊
格式：<img src="cd.jpg" align="#">
#爲圖片與文字對齊的屬性設置，可選top right botton left middle
3、圖像的邊框
<img src="cd.jpg" border="#px">
#爲邊框像素大小
4、文字鏈接
（1）簡單的文字鏈接
給文本上添加超鏈接，以達到點擊文字出現跳轉網頁的效果。
格式:
<a href="超鏈接網址">所要顯示的文字</a>
如：
<a href="http://www.baidu.com">百度一下</a>
（2）超鏈接網址的打開方式
<a href="超鏈接網址" target="#">所要顯示的文字</a>
#設置所鏈接的網頁在瀏覽器中的打開方式
（3）鏈接的註釋
當鼠標指針在文字上面，顯示鏈接的註釋
<a href="超鏈接網址" title="顯示內容">所要顯示的文字</a>
5、圖片鏈接
圖片鏈接語法
<a href="超鏈接網址" ><img src="cd.jpg"></a>
6、錨點鏈接
所謂的錨點鏈接，就是點擊某一個超鏈接，它就會跳到當前頁面的某一部分。
跳轉到錨點設置：
<a href="#錨點名">點擊到錨點鏈接</a>
錨點命名格式：<a name="錨點名">文章中的文字</a>
如：
<a href="#愛好">愛好</a> <!--點擊錨點鏈接-->
<a name="愛好">我的興趣愛好是打球</a><!--錨點鏈接-->
點擊藍色的“愛好”
即可跳轉到本頁中錨點處
7、郵電的地址鏈接
點擊郵件連接自動跳轉處郵箱發送頁
<a href="mailto:[email protected]">本人郵箱</a>