一、HTML基本概念
1、標記
標記是由一對尖括號<>和標記名組成，標記有單標記和雙標記之分。
單標記：只需單獨使用就能完整地表達意思的標記。語法爲：<標記名>
雙標記：指由“始標記”和“尾標記”兩部分構成，必須使用成對的標記
2、標記屬性
<標記名 屬性1 屬性2 屬性3 屬性 4……>
3、註釋語句
註釋語句的格式：<!--註釋內容-->
二、HTML文檔的基本格式
基本格式：
<html>
<html>
<head>
<title></title> <!-- 文件頭-->
</head>
<body> <!--文件主體-->
</body>
</html>
body文件主體標記
<body background="網頁背景圖像路徑" bgcolor="color"（背景顏色） text="color"（設置非可鏈接文字的色彩，默認顏色爲黑色）
link="color"(設置未被訪問過的超文本鏈接的色彩) alink="color"(設置被訪問瞬間的超文本鏈接的色彩) vlink="color"(設置被訪問後的超文本鏈接所顯示的顏色)
leftmargin="設置頁面左邊距" topmargin="設置頁面上邊距" value 可以是數值也可以是百分比
>……</body>
例如：
<html>
<head>
<title>奧恩</title></head>
<body background="ae.jpg"></body>
</html>三、HTML的基本語法
（1） HTML文件以純文本形式存放，擴展名爲HTM或HTML。若系統爲UNIX系統，擴展名必須是HTML
（2）標記名儘量是小寫字母
（3）多數HTML標記可以嵌套，但是不可以交叉
（4）HTML文件一行可以寫多個標記，但是標記的單詞不能分行寫
（5）HTML文件中的換行、回車符和空格在顯示效果中是無效的，如果要換行用<br/> ,換段用<p>; 空格用 代替，<用<； >用> &用&； "用"；
四、HTML的文本格式及功能實現
1、功能：標題是一段文字內容的核心，可以通過設置不同大小的標題，增加文章的條理性
格式 ：
<hn align="對齊方式">標題文字</hn>
屬性:n表示標題字號的級別,可以是1~6之間的任意整數，數字越小，字號越大；align用來設置標題在頁面中的對齊方式，取值包括：left（左對齊），right（右對齊），center（居中），默認爲left。
2、功能：改變網頁中的文字的字體，大小，顏色。
<font size="字號" face="字體" color="顏色">……</font>
3、文本修飾標記
功能給文本增添一些特殊效果，如黑體、斜體、下劃線，這是一組標記，可單獨使用，也可以組合使用。
<b></b>:加粗
<i></i>:斜體
<u></u>：下劃線
<strike></strike>:delete線
<sup></sup>:使文字成爲前一個字符的上標
<sub></sub>:是文字成爲前一個字符的下標
<em></em>:強調文字，通常爲斜體加黑體
<strong></strong>:特別強調的文字，斜體加黑體
4、段落標記
功能：設置文章段落的開始和結束。 <p align=“文本位置”></p>
功能：強行另起一行顯示該標記後面的網頁元素 <br/>
5、插入水平線標記
功能:在網頁插入一條水平線，用於頁面上的內容
<hr align="left" color="red" width="78%" size="2" noshade/>
6、預排格式標記
功能：保留文字在純文字編輯器中的格式，原樣顯示，不受前面文字的格式和段落式的影響
格式:<pre>要按預排格式顯示的文本</pre>
7、定位標記
功能:設定文字、圖像、表格等的擺放位置
<div align="center">……</div>
8、列表標記
無序列表：
格式：
格式：
<ul
type="加重符號類型">
<li type="加重符號類型"> </li>
<li type="加重符號類型"> </li>
<li type="加重符號類型"> </li>
</ul>
屬性：無序列表的開始和結束處，分別是<ul> </ul>。在每條列表條目之前必須加上<li>標記。
type 有三種:dics,實心圓； circle 空心圓；square 實心方塊
有序列表:
格式：
<ol type="序號類型" start="起始號碼">
<li type="序號類型"> </li>
<li type="符號類型"> </li>
<li type="符號類型"> </li>
</ol>
序號類型有五種：大寫英文字母 小寫英文字母 數字 大寫羅馬字母（I） 小寫羅馬字母（i）
9、定義列表
功能：用於需要對列表條目進行簡短說明的場合
格式：
<dl>
<dt>列表條目1</dt>
<dd>條目1說明<dd>
<dt>列表條目2</dt>
<dd>條目2說明<dd>
</dl>
屬性：<dl></dl>定義列表的結束和開始的標記
<dt></dt>每條列表前必須加上此標記名
<dd></dd>說明文字自動向右縮進
10、文字滾動標記
功能：在頁面中製作文字（也可以是圖像）滾動·效果
<marquee behavior="滾動的種類" （設置滾動方式） 三種：alternate（來回變動） scroll（循環滾動） slide（只滾動一次）
bgcolor="背景顏色"
direction="滾動的方向" 四種：up（向上） down（向下） left（向左） right（向右）
width="寬度"
height="高度"
loop="循環次數" 缺省值爲-1，無限滾動
scrollamount="滾動速度"
scrolldelay="每次滾動的間隔時間"
hspace="左右留白的距離"
vspace="上下留白的距離"
>
11、HTML的圖像與多媒體標記
功能：在當前位置插入圖像
格式：
<img src="圖片路徑"
<img src="圖片路徑"
alt="當圖片無法顯示時，所能代替的文字的描述"
title="鼠標放在圖片時的文字說明"
width="圖片寬度"
height="圖片高度"
border="邊款長度" 圖片外圍邊框寬度，其值爲整數
hspace="左右留白的距離"
vspace="上下留白的距離"
align="對齊方式"
>
12、背景聲音標記
功能：在網頁中加入聲音，聲音文件格式爲*.wav或*.mid
格式：
<bgsound src="聲音文件的路徑" loop="循環次數">
13、多媒體標記
功能:在頁面中放置如SWF動畫（即FLash動畫），MP3音樂、電影等多種多媒體內容
格式:
<embed src="多媒體路徑"
<embed src="多媒體路徑"
height="設置多媒體播放的區域"
width="設置多媒體的播放區域"
hidden="用於控制播放版面的顯示和隱藏" 其值爲false true
autostart="是否自動播放"
loop="循環幾次" 其值爲 true false
>
14、HTML的超鏈接標記
功能：創建超鏈接
格式：
<a href="http://www.baidu.com"
target="鏈接打開方式" 三種：_self 原窗口打開(缺省屬性) _blank 在新的一個框架中打開 _parent將鏈接的文件載入父框架打開
>圖像或其他多媒體文件或文字</a>
15、HTML表格製作
功能：建立基本表格
格式：
<table bgcolor="表格顏色"
background="表格的背景"
border="設置表格線的寬度"
bordercolor="表格線的顏色"
width="表格的寬度"
height="表格的高度"
align="對齊的方式"
cellspacing="設置相鄰單元格之間、單元格和邊框之間的間距"
cellpadding="單元格中的內容到邊框的距離"
>
<caption>表格標題<caption>
<tr>
<th>表頭</th>
</tr>
<tr>
<td>表項1</td><td>表項2</td>
<tr>
在<tr><th><td>可以添加兩類屬性：1、align ： left right center
2、valign：top （靠單元格頂） bottom（……底） middle（……中） baseline（相對基線對齊）
在<tr><td><th>中可以加rowspan和colspan屬性來實現單元格的合併。
rowspan 用於設置一個表格單元佔的行數（缺省值爲1）
colspan用於設置一個表格單元佔的列數（缺省值爲1）
16、HTML的表單標記
<form>表單</form>
功能：創建一個表單域，即定義表單的開始和結束位置有兩個的作用
1、限定表單的範圍。其他的表單對象，都要插入到<form>表單</form>中
2、攜帶表單的相關信息
格式：
<form name="設置表單的名稱"
action="用來定義表單處理程序的URL地址" （解釋URL：統一資源定位符是對可以從互聯網上得到的資源的位置和訪問方法的一種簡潔的表示）
當用戶提交表單時，服務器將執行此地址中的目錄中的某某程序
method="定義瀏覽器將表單數據傳遞到服務器處理程序的方式" 有兩種：1、get 表示處理程序從當前HTML文檔中獲得數據 2、post HTML把數據傳送給處理程序
>表單</form>
在表單標記<form>中包括的表單標記主要有input， select textarea
<input>標記 輸入標記
功能：用來收集用戶的輸入信息，其含義由type屬性決定。
格式：
<input name="設置區域的名稱" type="設置輸入區域的類型"/>
<input name="設置區域的名稱" type="設置輸入區域的類型"/>
type的類型
1、文本域text：text用來設定單行的輸入文本區域
格式：
<input type="text" maxlength="文本域中最大輸入字符數" size="文本域寬度" value="文本域初始缺省值"/>
2、密碼域 password
格式：
<input type="password" maxlength="密碼域中最大輸入字符數" size="密碼域寬度"/>
3、文件域file：file用於瀏覽器通過form表單向WEB服務器上傳文件
格式：
<input type="file"/>
4、單選按鈕radio： radio用於在表單上添加一個單選按鈕
格式：
<input type="radio" name="……" checked value="選中項目後傳送到服務器端的值，同組的value的值必須不同"/>
5、複選框checkbox:在表單中添加一個複選框
格式：
<input type="checkbox" checked(表示此項默認選中) value=" 內容"/>
6、普通按鈕 button：主要配合程序的需要來進行表單處理的
格式：
<input type="button" value=“傳給後臺的數據”/>
7、提交按鈕 submit：單擊"提交"按鈕後，可以實現表單內容的提交。
格式：
<input type="submit" value="和上一條一樣"/>
<input type="submit" value="和上一條一樣"/>
8、重置按鈕reset：清除所有表單信息
<input type="reset" value="和上一條一眼一樣"/>
9、圖像按鈕image：以一張圖片爲提交按鈕
格式：
<input type="image" src="圖片地址"/>
10隱藏域hidden：用於在表單上添加一個隱藏的表單字段元素，瀏覽器不會顯示這個表單字段元素，使用隱藏域，可以預設某些要傳遞的信息
格式：
<input type="hidden"/>
下拉列表框<select>
功能：當瀏覽器的項目較多時，可使用下拉列表框，只有單擊打開單擊按鈕打開列表後才能看到全部內容
格式：
<select name="設置下拉列表框或列表框的名稱"
<select name="設置下拉列表框或列表框的名稱"
size="若設置size的屬性，那麼表示爲下拉列表框；反之則表示爲列表框，size代表行數"
multiple (多選符號，若不寫multiple，否則只允許單選)
>
<option value="和上面的value效果一樣" selected（默認選項）>選項一</option><
option value="和上面的一樣">選項二</option>
多行文本域標記<textarea></textarea>
功能:
用於創建一個可以輸入多行的文本框，此標記對放在<form></form>
格式：
<textarea name="設置多行文本域的名稱" rows="行數" cols="列數/"></textarea>
<textarea name="設置多行文本域的名稱" rows="行數" cols="列數/"></textarea>
17、HTMl的框架標記
功能:將瀏覽器窗口劃分爲幾個子窗口，每個子窗口可以調入各自的HTMl文檔形成的不同的頁面，也可以按照一定方式組合在一起完成特殊的效果。框架通常使用的方法是在一個框架中放置目錄並設置鏈接
(1)框架集標記<framset>
功能：定義如何分隔窗口，用來定義主文檔中有幾個框架是如何排列的。
格式：
<framset rows="將窗口分成上下部分"，用“，”分割，value爲定義各窗口的寬度值，其值可以是百分號 像素值 或者*，（*）表示剩餘部分
cols="將窗口分爲左右部分"，用“，”分割，value爲定義各窗口的寬度值，其值可以是百分號 像素值 或者*，（*）表示剩餘部分
border=“邊框的寬度值”
bordercolor=“邊框的顏色”
farmeborder+“有無邊框”
farmespaceing=“設定各子框架的空白，單位爲象素”
>
框架標記<frame>
功能：
定義某一個具體的框架。
格式：
<frame src="設置框架要顯示的源文件的路徑"
<frame src="設置框架要顯示的源文件的路徑"
name="定義框架的名字。框架的名字必須以字母開頭"
scrolling="設定滾動條是否顯示，值顯示爲yes，不顯示no"，auto（若需要顯示則會自動顯示，不需要則自動不顯示）
noresize=“禁止改變框架的尺寸大小“”
<html>
<head><link rel="shortcut icon" type="x-icon" href="1.ico" media="screen" >
<title>奧恩</title></head> <!--網頁標題-->
<body background="ae.jpg" link="#000000" alink="#FFFF00" vlink="#0000FF"> <!--設置背景-->
<embed src="1.mp3" hidden="true" autostart="true" loop="true">
<font face="楷體" size="3" color="#FF0000">你是誰？？？？ <br/> <!--換行標記，給整個網頁設置爲3號字體紅色的楷體的字-->
<strike><font face="楷體" size="3" color="#00FF00">筆試</font></strike> <!--刪除線-->
<hr align="left" color="red" width="100%" size="2" /> <!--插入水平線標記-->
<marquee behavior="alternate" scrollamount=10>
<div align="center"> <!--定位標記，功能s與<p>類似，在爲許多段落標記比較方便-->
<ul type="circle"> <!--無序列表-->
<li type="circle">武器</li>
<li type="circle">問</li>
<li type="circle">問</li>
</ul>
<ol type="I" start="III"> <!--有序列表type爲羅馬數字-->
<li>誰的sa四大</li>
<li>薩德</li>
<li>愛迪生</li>
<li>薩德</li>
</ol>
</div>
<dl> <!--定義列表目錄，適用於爲列表簡短說明的場合-->
<dt>c語言</dt>
<dd>結構化的語言
</dd>
<dt>c++language</dt>
<dd>面向對象的語言</dd>
</dl>
</marquee>
<marquee bgcolor="#00FFFF"
direction="left"
srcollamount="9"
loop="-1"
srcolldelay="3"
width="100%" height="20"
hspace="1" vspace="1"
behavior="alternate">我的第一個循環滾動字幕</marquee>
<marquee behavior="alternate" scrollamount=16>
<a href="http://www.baidu.com" target=_blank> baidu</a> <!--超鏈接-->
</marquee>
<p></p>
<marquee behavior="alternate" >
<table width="800" align="center" border="1" bordercolor="#000000">
<tr height="80">
<td width="150" >網站標誌
</td>
<td colspan="2">廣告條
</td>
</tr>
<tr>
<td>導航1</td>
<td rowspan="5" align="center" bgcolor="#FF0000">內容一</td>
<td rowspan="5" align="center" bgcolor="#FF0000">內容二</td>
</tr>
<tr>
<td>導航2</td>
</tr>
<tr>
<td>導航3</td>
</tr>
<tr>
<td>導航4</td>
</tr>
<tr>
<td>導航5</td>
</tr>
<tr>
<td colspan="3" align="center">版權信息</td>
</tr>
</table>
</marquee>
<form name="1hao" method="post">
<h1><font align="center" color="#FF00FF"><marquee behavior="alternate" scrollamount=20>用戶註冊表</marquee></font></h1>
<table width="65%" align="center" border="1" bordercolor="#FF00FF">
<tr>
<td align="right"><font color="gold">用戶名</font></td>
<td><input type="text" name="username"/></td>
</tr>
<tr>
<td align="right"><font color="gold">密碼</font></td>
<td><input type="password" name="key"/></td>
</tr>
<tr>
<td align="right"><font color="gold">性別</font></td>
<td><input type="radio" name="sex" value="男" checked/><font color="blue">男</font>
<input type="radio" name="sex" value="女" /><font color="red">女</font></td>
</tr>
<tr>
<td align="right"><font color="gold">愛好</font></td>
<td><input type="checkbox" checked name="like" value="音樂"/><font color="gold">音樂</font>
<input type="checkbox" name="like" value="上網"/><font color="blue">上網</font>
<input type="checkbox" name="like" value="旅遊"/><font color="green">旅遊</font>
<input type="checkbox" name="like" value="體育"/><font color="purple">體育</font>
</tr>
<tr>
<td align="right"><font color="gold">職業<font></td>
<td><select name="work" size="3">
<option value="政府職員"><font color="olive">政府職員</font></option>
<option value="工程師"><font color="orange">工程師</font></option>
<option value="學生"selected><font color="#C0C0C0">學生</font></option>
<option value="商人"><font color="black">商人</font></option>
</select>
</td>
</tr>
<tr>
<td align="right"><font color="gold">個人收入<font></td>
<td><select name="shouru">
<option value="1000以下"><font color="olive">1000以下</font></option>
<option value="3000以下"><font color="orange">3000以下</font></option>
<option value="6000以下"selected><font color="#C0C0C0">6000以下</font></option>
<option value="6000以上"><font color="black">6000以上</font></option>
</select>
</td>
</tr>
<tr>
<td align="right"><font color="gold">個性照片<font></td>
<td ><input type="file"/></td>
</tr>
<tr>
<td align="right"><font color="gold">特色簽名<font></td>
<td><textarea name="qianming" rows=4 cols=50></textarea></td>
</tr>
<tr>
<td align="center" colspan=2><input type="button" name="button" value="忘記密碼"/> <input type="submit" name="submit" value="提交"> <input type="reset" name="reset" value="重置"/></td>
</tr>
</table>
</form>
</font></embed>
</body>
</html>