什麽是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>
顯示結果為：
一個兩行三列的表格，但是第一行的前兩列表格合並為一個表格。
什麽是HTML？HTML怎麽學？HTML基礎教程