什麼是HTML？HTML怎麼學？HTML基礎教程
1.一般我都是在記事本中寫HTML檔案，也有很多人用DreamWeaver，這個隨意~~
2.HTML的一般結構如下：
<html>----以<html>開始，以</html>結束，表示之間的文件是HTML
<head>----HTML文件的頭部，主要放文件的標題資訊
<title>未使用CSS的HTML檔案</title>
</head>
<body>----HTML的主體部分
<h1>未使用CSS的HTML檔案</h1>
<hr>----在網頁中插入一條水平線
<p>未使用CSS的HTML檔案</p>
</body>
</html>
3.標記語法
(1)標記在使用時必須用尖括號"<>"括起來；標記的大小寫作用相同；
(2)單標記：<標記名稱>，例如<br>它表示換行；
(3)雙標記：<標記>內容</標記>
例如：<em>第一：</em>，它表示突出對“第一：”的顯示；
(4)：標記可以包含標記本身，即可以巢狀使用
<html>
<head>
<title>請輸入密碼</title>
</head>
<body>
<form>
<table border="1", width="321">
<tr>
<td>請輸入密碼</td>
</tr>
<tr>
<td>密碼<input type="password" name="text1"></td>
</tr>
</table>
</form>
</body>
</html>
4. 屬性語法
大多數單標記和雙標記的始標記內部都可以包含一些屬性
<標記名字 屬性1 屬性2 ...>
例如單標記<img>表示在文件當前位置插入一幅圖片
<img src="1.jpg" width="652px" height="1249px" alt="部落格">
其中src屬性規定顯示影象的路徑，width屬性設定影象的寬度，height屬性設定影象的高度，alt屬性規定影象的代替文字，src屬性為必需屬性，其他屬性為可選屬性。
5. HTML檔案命名：
(1)檔案的副檔名要以.html或.htm結束；
(2)檔名中只可由英文字母、數字或下劃線組成；
(3)檔名中不要包含特殊符號，如空格、￥等；
(4)檔名師區分大小寫的，在Unix和Windows主機中有大小寫的不同；
(5)網站首頁檔名預設是index.htm或index.html；
6. 編寫HTML檔案的注意事項：
(1)所有標記都要用尖括號<>括起來；
(2)成對出現的標記不要漏寫；
(3)採用標記巢狀的方式可以為同一個資訊應用多個標記，如<tag1><tag2>同一個資訊</tag2></tag1>；
(4)在程式碼中，不區分大小寫；
(5)任何空格或回車在程式碼中都無效，插入空格或回車有專用的標記，分別是 , <br>；
(6)標記中不要有空格；
(7)標記中的屬性，可以用雙引號("")引起來，也可以不引；
<hr color=red> 等價於 <hr color="red">
7.<p></p>表示插入段落文字；
8.繪製表格：三個成對標記<table></table>、<tr></tr>、<td></td>
<table width="650" border="1"> ----<table>是製作表格的標記，其後的屬性依次為表格寬度，邊框粗細
<tr>----<tr>表示插入行，一對<tr>表示一行
<td>----<td>表示一列
HTML基礎教程<br>
作者：王佔金等
<br>----<br>表示換行，單標記
定價49.00元<br>
</td>
<td>
<img src="1.jpg" width="69px" height="92" alt="HTML">
</td>
</tr>
<tr>
<td>
搜尋引擎營銷-網站流量大提速<br>
作者：（美）亨特<br>
定價：69.80元<br>
</td>
</tr>
</table>
9. 設定頁面標題：<title>頁面標題</title>；
10. 設定基地網址<base>
(1)<base>標記一般用於設計檔案的URL地址；
(2)一個HTML檔案只能有一個<base>標記，同時該標記必須放於頭部檔案中；
(3)<base href="檔案路徑" target="目標視窗">
href用於設定網頁檔案連結的地址，target用於設定頁面顯示的目標視窗。
例如：
<html>
<head>
<title>設定基地網址</title>
<base href="http://www.Broad View.com.cn">
</head>
<body>
2007年1月16日，電子工業出版社<a href="index">博文視點</a>公司召開了一次晚會。
</body>
</html>
11.定義元資訊<meta>
(1)該標記的主要功能是定義頁面中的一些資訊，但這些資訊不會出現在網頁中，而會在原始檔中顯示；
(2)<meta>標記通過一些屬性來定義檔案愛你的資訊，例如，檔案愛你的關鍵字、作者資訊、網頁過期時間等，HTML檔案的頭部檔案可以有多個<meta>標記；
(3)基本語法：
<meta http-equiv="" name="" content="">
http-equiv屬性用於設定一個http的標題域，但確定值由content屬性決定，name屬性用於設定元資訊出現的形式，content用於設定元資訊出現的內容。
12.設定頁面關鍵字--keywords
(1)基本語法：<meta name="keywords" content="value">
(2)語法說明：keywords用於說明定義的是關鍵字，value用於說明該網頁定義的關鍵字，可以是多個關鍵字；
(3)例子：
<html>
<head>
<title>設定關鍵字</title>
<meta name="keywords" content="計算機、英語、經管、財會、職場"> ----此行程式碼表示在該HTML檔案中定義的關鍵字為“計算機、英語、經管、財會、職場”，當利用搜索引擎搜尋圖書時，輸入任何一個關鍵字都可以搜尋到該網頁。
</head>
<body>
......
</body>
</html>
13. 設定頁面過期時間--expires
(1)基本語法： <meta http-equiv="expires" content="value">
(2)語法說明： expires用於設計頁面過期時間，content屬性設定具體過期時間值；
(3)例子：
<html>
<head>
<title>設定頁面過期時間</title>
<meta http-equiv="expires" content="FRI,1 Jun 2017 00 00 00 GMT">
</head>
<body>
......
</body>
</html>
14.設定頁面背景
(1)基本語法：<body bgcolor="">
(2)語法說明：bgcolor可以設定網頁的背景顏色；
(3)例子：
<html>
<head> ...</head>
<body style="background-color:blue">----此行程式碼表示：將網頁背景顏色設定為藍色，也可以設定為 red white等，也可以十六進位制數表示，例如“#00ff00”，或者rgb(0,0,0)的形式
......
</body>
</html>
15.設定頁面邊距
(1)基本語法：<body topmargin=value leftmargin=value rightmargin=value bottommargin=value>
(2)語法說明：topmargin 設定到頂端的距離
leftmargin設定到左邊的距離
rightmargin設定到右邊的距離
bottommargin設定到低端的距離
(3)例子：
<html>
<head>......</head>
<body topmargin=0 leftmargin=20 rightmargin=20 bottommargin=180>
2016年5月9日，陰雨
</body>
</html>
16.設計正文顏色
(1)基本語法：<body text=""> ...</body>
(2)語法說明：利用text屬性設定文件的顏色時，還可以進行其他設定，例如：背景、字型等；
(3)例子：
<html>
<head>......</head>
<body text="white" bgcolor="red">
2016年5月9日，陰雨
</body>
</html>
17.添加註釋 <!-->
註釋資訊不會在網頁中顯示，可以放在HTML檔案的任何地方
<!--請在此添加註釋語句-->
18. 新增空格
在主體中使用，一個 代表空一個字元
19.新增刪除線 <del></del>
使用成對標記<del></del>，在主體中新增
<body>
<del>請在此輸入需要新增刪除線的文字</del>
</body>
20. 插入特殊符號
符號對應程式碼
&&
TM &trade
￥¥
等~~
21.設定文字標註標記<ruby>
<ruby>
被說明的文字（當代最可愛的人）
<rt>
文字的標註（志願者）
</rt>
</ruby>
22.簡單文字修飾（加粗、斜體、下劃線）
<body>
普通文字的顯示<br>
<b>加粗文字的顯示</b>
<i>斜體文字</i>
<u>給文字加下劃線</u>
</body>
23.確定文字上下標-<sup>/<sub>
<body>
<sup>上標內容</sup>
<sub>下標內容</sub>
</body>
24.設定地址文字<address>
在網頁中新增地址文字，是為了更方便地突出顯示聯絡方式，將聯絡人的地址資訊突出顯示
<body>
<address>請在此新增地址資訊</address>
</body>
25.設定等寬文字 <tt> <samp> <code> <kdd>
多數情況用在英文文字顯示中
<body>
<tt>打字機風格顯示</tt>
<code>等寬文字設定內容</code>
<samp>等寬文字設定內容</samp>
<kdd>鍵盤輸入</kdd>
</body>
26.段落<p></p>----雙標記
回車<br>----單標記，強制性換行，可以放在<p></p>之間使用
預格式化<pre></pre>
利用<pre></pre>標記對網頁中文欄位落進行預格式化，在輸入過程中，按鍵盤上的回車鍵，就可以生成一個段落；
設定段落縮排<backquote>
利用一對<backquote></backquote>標記可以縮排5個字元
插入並設定水平線<hr>
水平線的屬性有：align---水平線對齊方式，取值有3種：left，right和center
width---水平線的長度，如500px
size---水平線的粗細
color---水平線的顏色，如red
noshade---水平線是否有陰影
標題標記<hn>，其中n為數字1-6，共分6級，數字越小，字型越大，表示越重要
27.插入列表
列表型別標記符號
定義列表<dl></dl>
無序列表<ul></ul>
目錄列表<dir></dir>
有序列表<ol></ol>
(1)插入定義列表<dl></dl>
<dl>
<dt>聯絡人<dd>*** ----<dt>定義名稱部分，只在<dl>中使用
<dt>聯絡地址<dd>北京市海淀區----<dd>解釋說明部分，只在<dl>中使用
<dt>郵政編碼<dd>100876
</dl>
輸出結果為：
聯絡人
***
聯絡地址
北京市海淀區
郵政編碼
100876
(2)插入無序列表<ul></ul>
<ul>
<li>聯絡人：***</li>
<li>聯絡地址：北京市海淀區</li>
<li>郵政編碼：100876</li>
</ul>
輸出結果為：
·聯絡人：***
·聯絡地址：北京市海淀區
·郵政編碼：100876
補充：無序列表<ul>中用type屬性來控制行的標號
type=disc 設定一個實心圓點的行標號，表示預設項，如上面所示；
type=circle 設定一個空心圓點作為行標號；
type=square 設定一個方形實心點作為行標號；
(3)插入有序列表<ol></ol>
<ol>
<li>聯絡人：***</li>
<li>聯絡地址：北京市海淀區</li>
<li>郵政編碼：100876</li>
</ol>
輸出結果為：
1.聯絡人：***
2.聯絡地址：北京市海淀區
3.郵政編碼：100876
補充：有序列表的順序是由屬性type和start來設定的。type表示標號的型別，start表示列表的標號從第幾項開始
type=1 表示用數字標號（預設項）
type=A 表示用大寫字母
type=a 表示用小寫字母
type=I 表示用大寫羅馬數字
type=i 表示用小寫羅馬數字
(4)巢狀定義列表
<dl>
<dt>網頁三劍客
<dd>Dreamweaver
<dd>Flash
<dd>Fireworks
<dt>程式設計三劍客
<dd>VB
<dd>VF
<dd>VC
</dl>
顯示結果為：
網頁三劍客
Dreamweaver
Flash
Fireworks
程式設計三劍客
VB
VF
VC
(5)巢狀有序與無序列表
<ul>
<li>水果類
<ol>
<li>蘋果</li>
<li>香蕉</li>
</ol>
</li>
<li>蔬菜類
<ol>
<li>蘿蔔</li>
<li>白菜</li>
</ol>
</li>
</ul>
顯示結果為：
·水果類
1.蘋果
2.香蕉
·蔬菜類
1.蘿蔔
2.白菜
28.超連結
一般而言，一個網站的檔案都是在同一個目錄下的
在HTML檔案中提供了三種路徑：絕對路徑，相對路徑，根路徑
在HTNL檔案中，超連結可以分為內部連結和外部連結。所謂內部連結：指網站內部檔案之間的連結；所謂外部連結，指網站內的檔案連結到站點內容外的檔案。
(1)絕對路徑：只檔案的完整路徑，包括檔案傳輸的協議http，ftp等，一般用於網站的外部連結，例如：http://ysu.edu.cn, ftp://202.206.251.100
(2)相對路徑：只相對於當前檔案的路徑，它包含了從當前檔案指向目的檔案的路徑。同時只要是處於站點資料夾之內，即使不屬於同一個檔案目錄下，相對路徑建立的連結也適合。採用相對路徑是建立兩個檔案之間的相互關係，可以不受站點和所處伺服器位置的影響。
相對位置如何輸入
同一目錄輸入要連結的文件
連結上一目錄先輸入"../"，再輸入目錄名
連結下一目錄先輸入目錄名，後加"/"
(3)根路徑：適合內部連結的建立，一般情況下不使用根路徑，以"/"開頭，後面緊跟檔案路徑。
29.超連結的建立
(1)插入內部連結： <a href="index.htm">連結內容</a>
(2)插入外部連結： <a href="http://ysu.edu.cn">燕山大學</a>
(3)設定影象對映：
基本語法：<img src="URL" usemap=""></img>
<map name="">
<area shape="" coords=" , , " href="URL">
</map>
語法說明：<img>標記表示插入影象檔案，src表示插入影象的路徑，<map>標記表示插入影象的對映；<area>標記表示影象對映區域；shape屬性表示對映區域形狀：rect表示矩形區域，circle表示橢圓形區域，poly表示多邊形區域；coords表示感應區域的座標。
30.表格
(1)<table></table>表示插入一個表格；
(2)<tr></tr>表示插入一行，<td></td>表示插入一列；
(3)<caption></caption>表示插入表格標題，用於<table>和<tr>之間；
(4)設定表格表頭<th>：將要作為表頭的一行，列標記<td>改為<th>即可；
(5)設定劃分結構表格<thead>、<tbody>、<tfoot>
所謂劃分結構表格，指將一個表格分成三個部分在網頁上顯示
<thead></thead>表示定義一組表頭行
<tbody></tbody>表示定義表格主體部分
<tfoot><tfoot>表示為表格新增一個標準
(6)設定表格的標記屬性
<table width="" border="" frame="" rules="">
width設定表格的寬度border設定表格邊框的粗細frame設定表格邊框的樣式rules設定表格內部邊框的屬性
above 顯示上邊框，border顯示上下左右邊框， below顯示下邊框， hsides顯示上下邊框，lhs顯示左邊框，rhs顯示右邊框，void 不顯示邊框，vsides 顯示左右邊框；
all 顯示所有內部邊框
groups 顯示介於行列之間的邊框
none 不顯示內部邊框
cols 顯示列邊框
rows 顯示行邊框
(7)設定表格行：<tr align="" valign="">
align設定行內容的水平對齊：left（左對齊），right，center
valign調整行內容的垂直對齊：top（頂端對齊），middle，bottom，baseline（基線）
(8)設定跨行：rowspan
<table>
<tr>
<td rowspan="2"> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
顯示結果為一個兩行三列的表格，但是第一列的兩個表格合併為一個了，即跨行。
(9)設定跨列：colspan
<table>
<tr>
<td colspan="2"> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
顯示結果為：
一個兩行三列的表格，但是第一行的前兩列表格合併為一個表格。