推 荐 介 绍 H T M L 知 识 的 网 页
http://www./textbook/manual/a-html.htm
http://www./~yanglb/html/
http://www./webclass/html/html_design.html
http://www./teaching/htmlbook/
http://unit./wlzx/wlfw/FrontP98CAI/html/fundation/h013.htm
一、HTML基本结构
<HTML>
<HEAD>
头 部 信 息
</HEAD>
<BODY>
文 档 主 体， 正 文 部 分
</BODY>
</HTML>
其中<HTML>在最外层， 表示这对标记间的内容是HTML文 档。我们还会看到一些Hompage省略<HTML>标记，因为.html 或.htm 文件被Web浏览器默认为是HTML文档。<HEAD> 之间包括文档的头部信息，如文档总标题等，若不需头部信息则可省略此标记。<BODY> 标记一般不省略， 表示正文内容的开始。
下面是一个最基本的超文本文档的源代码：
<HTML>
<HEAD>
<TITLE>一个简单的HTML示例</TITLE>
</HEAD>
<BODY>
<CENTER>
<H3>欢迎光临我的主页</H3>
<BR>
<HR>
<FONT SIZE=2>
这是我第一次做主页，无论怎么样，我都会努力做好！
</FONT>
</CENTER>
</BODY>
</HTML> |
━┓
┃文件头
━┛
━┓
┃
┃
┃
┃文件体
┃
┃
┃
┃
━┛
|
超文本中的标签
刚刚接触超文本，遇到的最大的障碍就是一些用“<”和“>”括起来的句子，我们称它为标签，是用来分割和标记文本的元素，以形成文本的布局、文字的格式及五彩缤纷的画面。
1. 单标签
某些标记称为“单标签”，因为它只需单独使用就能完整地表达意思，这类标记的语法是：
< 标签名称>
最常用的单标签是<BR>, 它表示换行。
2.双标签
另一类标记称为“双标签”，它由“始标签”和“尾标签”两部分构成，必须成对使用，其中始标签告诉Web浏览器从此处开始执行该标记所表示的功能，而尾标签告诉Web浏览器在这里结束该功能。始标签前加一个斜杠（/）即成为尾标记。这类标记的语法是：
<标签> 内 容</ 标签>
其中“内容” 部分就是要被这对标记施加作用的部分。例如你想突出对某段文字的显示，就将此段文字放在一<EM> </EM>标记中：
<EM>第一：</EM>
3.标签属性
许多单标记和双标记的始标记内可以包含一些属性， 其语法是：
< 标签名字 属性1 属性2 属性3 … >
各属性之间无先后次序，属性也可省略（即取默认值），例如单标记<HR>表示在文档当前位置画一条
水平线（horizontal line），一般是从窗口中当前行的最左端一直画到最右端。带一些属性：
<HR SIZE=3 ALIGN=LEFT WIDTH="75%">
其中SIZE属性定义线的粗细，属性值取整数，缺为1；ALIGN属性表示对齐方式，可取LEFT（左对齐，
缺省值），CENTER（居中），RIGHT（右对齐）；WIDTH 属性定义线的长度，可取相对值，（由一对 " "
号括起来的百分数，表示相对于充满整个窗口的百分比），也可取绝对值（用整数表示的屏幕像素点的
个数，如WIDTH=300），缺省值是"100%"。
文字的大小设置
提供设置字号大小的是FONT，FONT有一个属性SIZE，通过指定SIZE属性就能设置字号大小，而SIZE属性的有效值范围为1－7，其中缺省值为3。我们可以SIZE属性值之前加上“＋”、“－”字符，来指定相对于字号初始值的增量或减量。
请看示例：
<html>
<head>
<title>字号大小</title>
</head>
<body>
<font size=7>这是size=7的字体</font><P>
<font size=6>这是size=6的字体</font><P>
<font size=5>这是size=5的字体</font><P>
<font size=4>这是size=4的字体</font><P>
<font size=3>这是size=3的字体</font><P>
<font size=2>这是size=2的字体</font><P>
<font size=1>这是size=1的字体</font><P>
<font size=-1>这是size=-1的字体</font><P>
</body>
</html>
文字的字体与样式
HTML4.0提供了定义字体的功能，用FACE属性来完成这个工作。FACE的属性值可以是本机上的任一字体类型，但有一点麻烦的是，只有对方的电脑中装有相同的字体才可以在他的浏览器中出现你预先设计的风格。
<font face="字体">
请看例子：
<HTML>
<HEAD>
<TITLE>字体</TITLE>
</HEAD>
<BODY>
<CENTER>
<FONT face="楷体_GB2312">欢迎光临</FONT><P>
<FONT face="宋体">欢迎光临</FONT><P>
<FONT face="仿宋_GB2312">欢迎光临</FONT><P>
<FONT face="黑体">欢迎光临</FONT><P>
<FONT face="Arial">Welcom my homepage.</FONT><P>
<FONT face="Comic Sans MS">Welcom my homepage.</FONT><P>
</CENTER>
</BODY>
</HTML>
为了让文字富有变化，或者为了着意强调某一部分，HTML提供了一些标签产生这些效果，现将常用的标签列举如下：
<B> </B> 粗体 HTML语言
<I> </I> 斜体 HTML语言
<U> </U> 加下划线 HTML语言
<TT> <TT> 打字机字体 HTML语言
<BIG> </BIG> 大型字体 HTML语言
<SMALL> </SMALL> 小型字体 HTML语言
<BLINK> </BLINK> 闪烁效果
<EM> </EM> 表示强调，一般为斜体 HTML语言
<STRONG> </STRONG> 表示特别强调，一般为粗体 HTML语言
<CITE> </CITE> 用于引证、举例，一般为斜体 HTML语言
现在我们用一个实例来看看效果：
<html>
<head>
<title>字体样式</title>
</head>
<body>
<B>黑体字</B>
<P> <I>斜体字</I>
<P> <U>加下划线</U>
<P> <BIG>大型字体</BIG>
<P> <SMALL>小型字体</SMALL>
<P> <BLINK>闪烁效果</BLINK>
<P><EM>Welcome</EM>
<P><STRONG>Welcome</STRONG>
<P><CITE>Welcom</CITE></P>
</body>
</html>
文字的颜色
文字颜色设置格式如下：
<font color=color_value>…</font>
请看例子：
<HTML>
<HEAD>
<TITLE>文字的颜色</TITLE>
</HEAD>
<BODY BGCOLOR=000080>
<CENTER>
<FONT COLOR=WHITE>色彩斑斓的世界</FONT><BR>
<FONT COLOR=RED>色彩斑斓的世界</FONT> <BR>
<FONT COLOR=#00FFFF>色彩斑斓的世界</FONT><BR>
<FONT COLOR=#FFFF00>色彩斑斓的世界</FONT><BR>
<FONT COLOR=#FFFFFF>色彩斑斓的世界</FONT> <BR>
<FONT COLOR=#00FF00>色彩斑斓的世界</FONT><BR>
<FONT COLOR=#C0C0C0>色彩斑斓的世界</FONT><BR>
</CENTER>
</BODY>
</HTML>
標籤 , 屬性名稱 , 簡介
<! - - ... - -> 註解
<!> 跑馬燈
<marquee>...</marquee>普通捲動
<marquee behavior=slide>...</marquee>滑動
<marquee behavior=scroll>...</marquee>預設捲動
<marquee behavior=alternate>...</marquee>來回捲動
<marquee direction=down>...</marquee>向下捲動
<marquee direction=up>...</marquee>向上捲動
<marquee direction=right></marquee>向右捲動
<marquee direction='left'></marquee>向左捲動
<marquee loop=2>...</marquee>捲動次數
<marquee width=180>...</marquee>設定寬度
<marquee height=30>...</marquee>設定高度
<marquee bgcolor=FF0000>...</marquee>設定背景顏色
<marquee scrollamount=30>...</marquee>設定捲動距離
<marquee scrolldelay=300>...</marquee>設定捲動時間
<!>字體效果
<h1>...</h1>標題字(最大)
<h6>...</h6>標題字(最小)
<b>...</b>粗體字
<strong>...</strong>粗體字(強調)
<i>...</i>斜體字
<em>...</em>斜體字(強調)
<dfn>...</dfn>斜體字(表示定義)
<u>...</u>底線
<ins>...</ins>底線(表示插入文字)
<strike>...</strike>橫線
<s>...</s>刪除線
<del>...</del>刪除線(表示刪除)
<kbd>...</kbd>鍵盤文字
<tt>...</tt> 打字體
<xmp>...</xmp>固定寬度字體(在文件中空白、換行、定位功能有效)
<plaintext>...</plaintext>固定寬度字體(不執行標記符號)
<listing>...</listing> 固定寬度小字體
<font color=00ff00>...</font>字體顏色
<font size=1>...</font>最小字體
<font style ='font-size:100 px'>...</font>無限增大
<!>區斷標記
<hr>水平線
<hr size='9'>水平線(設定大小)
<hr width='80%'>水平線(設定寬度)
<hr color='ff0000'>水平線(設定顏色)
<br>(換行)
<nobr>...</nobr>水域(不換行)
<p>...</p>水域(段落)
<center>...</center>置中
<!>連結格式
<base href=位址>(預設好連結路徑)
<a href=位址></a>外部連結
<a href=位址 target='_blank'></a>外部連結(另開新視窗)
<a href=位址 target='_top'></a>外部連結(全視窗連結)
<a href=位址 target='頁框名'></a>外部連結(在指定頁框連結)
<!>貼圖/音樂
<img src=圖片位址>貼圖
<img src=圖片位址 width='180'>設定圖片寬度
<img src=圖片位址 height='30'>設定圖片高度
<img src=圖片位址 alt='提示文字'>設定圖片提示文字
<img src=圖片位址' border='1'>設定圖片邊框
<bgsound src=MID音樂檔位址>背景音樂設定
<!>表格語法
<table aling=left>...</table>表格位置,置左
<table aling=center>...</table>表格位置,置中
<table background=圖片路徑>...</table>背景圖片的URL=就是路徑網址
<table border=邊框大小>...</table>設定表格邊框大小(使用數字)
<table bgcolor=顏色碼>...</table>設定表格的背景顏色
<table borderclor=顏色碼>...</table>設定表格邊框的顏色
<table borderclordark=顏色碼>...</table>設定表格暗邊框的顏色
<table borderclorlight=顏色碼>...</table>設定表格亮邊框的顏色
<table cellpadding=參數>...</table>指定內容與格線之間的間距(使用數字)
<table cellspacing=參數>...</table>指定格線與格線之間的距離(使用數字)
<table cols=參數>...</table>指定表格的欄數
<table frame=參數>...</table>設定表格外框線的顯示方式
<table width=寬度>...</table>指定表格的寬度大小(使用數字)
<table height=高度>...</table>指定表格的高度大小(使用數字)
<td colspan=參數>...</td>指定儲存格合併欄的欄數(使用數字)
<td rowspan=參數>...</td>指定儲存格合併列的列數(使用數字)
<!>分割視窗
<frameset cols="20%,*">左右分割,將左邊框架分割大小為20%右邊框架的大小瀏覽器會自動調整
<frameset rows="20%,*">上下分割,將上面框架分割大小為20%下面框架的大小瀏覽器會自動調整
<frameset cols="20%,*">分割左右兩個框架
<frameset cols="20%,*,20%">分割左中右三個框架
<分割上下兩個框架
<frameset rows="20%,*,20%">分割上中下三個框架
<! - - ... - -> 註解
<A HREF TARGET> 指定超連結的分割視窗
<A HREF=#錨的名稱> 指定錨名稱的超連結
<A HREF> 指定超連結
<A NAME=錨的名稱> 被連結點的名稱
<ADDRESS>....</ADDRESS> 用來顯示電子郵箱地址
<B> 粗體字
<BASE TARGET> 指定超連結的分割視窗
<BASEFONT SIZE> 更改預設字形大小
<BGSOUND SRC> 加入背景音樂
<BIG> 顯示大字體
<BLINK> 閃爍的文字
<BODY TEXT LINK VLINK> 設定文字顏色
<BODY> 顯示本文
<BR> 換行
<CAPTION ALIGN> 設定表格標題位置
<CAPTION>...</CAPTION> 為表格加上標題
<CENTER> 向中對齊
<CITE>...<CITE> 用於引經據典的文字
<CODE>...</CODE> 用於列出一段程式碼
<COMMENT>...</COMMENT> 加上註解
<DD> 設定定義列表的項目解說
<DFN>...</DFN> 顯示"定義"文字
<DIR>...</DIR> 列表文字標籤
<DL>...</DL> 設定定義列表的標籤
<DT> 設定定義列表的項目
<EM> 強調之用
<FONT FACE> 任意指定所用的字形
<FONT SIZE> 設定字體大小
<FORM ACTION> 設定戶動式表單的處理方式
<FORM METHOD> 設定戶動式表單之資料傳送方式
<FRAME MARGINHEIGHT> 設定視窗的上下邊界
<FRAME MARGINWIDTH> 設定視窗的左右邊界
<FRAME NAME> 為分割視窗命名
<FRAME NORESIZE> 鎖住分割視窗的大小
<FRAME SCROLLING> 設定分割視窗的捲軸
<FRAME SRC> 將HTML檔加入視窗
<FRAMESET COLS> 將視窗分割成左右的子視窗
<FRAMESET ROWS> 將視窗分割成上下的子視窗
<FRAMESET>...</FRAMESET> 劃分分割視窗
<H1>~<H6> 設定文字大小
<HEAD> 標示文件資訊
<HR> 加上分格線
<HTML> 文件的開始與結束
<I> 斜體字
<IMG ALIGN> 調整圖形影像的位置
<IMG ALT> 為你的圖形影像加註
<IMG DYNSRC LOOP> 加入影片
<IMG HEIGHT WIDTH> 插入圖片並預設圖形大小
<IMG HSPACE> 插入圖片並預設圖形的左右邊界
<IMG LOWSRC> 預載圖片功能
<IMG SRC BORDER> 設定圖片邊界
<IMG SRC> 插入圖片
<IMG VSPACE> 插入圖片並預設圖形的上下邊界
<INPUT TYPE NAME value> 在表單中加入輸入欄位
<ISINDEX> 定義查詢用表單
<KBD>...</KBD> 表示使用者輸入文字
<LI TYPE>...</LI> 列表的項目 ( 可指定符號 )
<MARQUEE> 跑馬燈效果
<MENU>...</MENU> 條列文字標籤
<META NAME="REFRESH" CONTENT URL> 自動更新文件內容
<MULTIPLE> 可同時選擇多項的列表欄
<NOFRAME> 定義不出現分割視窗的文字
<OL>...</OL> 有序號的列表
<OPTION> 定義表單中列表欄的項目
<P ALIGN> 設定對齊方向
<P> 分段
<PERSON>...</PERSON> 顯示人名
<PRE> 使用原有排列
<SAMP>...</SAMP> 用於引用字
<SELECT>...</SELECT> 在表單中定義列表欄
<SMALL> 顯示小字體
<STRIKE> 文字加橫線
<STRONG> 用於加強語氣
<SUB> 下標字
<SUP> 上標字
<TABLE BORDER=n> 調整表格的寬線高度
<TABLE CELLPADDING> 調整資料欄位之邊界
<TABLE CELLSPACING> 調整表格線的寬度
<TABLE HEIGHT> 調整表格的高度
<TABLE WIDTH> 調整表格的寬度
<TABLE>...</TABLE> 產生表格的標籤
<TD ALIGN> 調整表格欄位之左右對齊
<TD BGCOLOR> 設定表格欄位之背景顏色
<TD COLSPAN ROWSPAN> 表格欄位的合併
<TD NOWRAP> 設定表格欄位不換行
<TD VALIGN> 調整表格欄位之上下對齊
<TD WIDTH> 調整表格欄位寬度
<TD>...</TD> 定義表格的資料欄位
<TEXTAREA NAME ROWS COLS> 表單中加入多少列的文字輸入欄
<TEXTAREA WRAP> 決定文字輸入欄是自動否換行
<TH>...</TH> 定義表格的標頭欄位
<TITLE> 文件標題
<TR>...</TR> 定義表格美一行
<TT> 打字機字體
<U> 文字加底線
<UL TYPE>...</UL> 無序號的列表 ( 可指定符號 )
<VAR>...</VAR> 用於顯示變數
图形与文字的对齐排列：
由IMG中的ALIGN属性来设置图文的对齐方式，有以下几种：
| ALIGN=top |
〈IMG SRC="star.gif" ALIGN=top>美丽的心灵 |
 美丽的心灵 |
| ALIGN=middle |
〈IMG SRC="star.gif" ALIGN=middle>美丽的心灵 |
美丽的心灵 |
| ALIGN=buttom |
〈IMG SRC="star.gif" ALIGN=buttom>美丽的心灵 |
美丽的心灵 |
| ALIGN=texttop |
〈IMG SRC="star.gif" ALIGN=textop>美丽的心灵 |
美丽的心灵 |
| ALIGN=baseline |
〈IMG SRC="star.gif" ALIGN=baeline>美丽的心灵 |
美丽的心灵 |
| ALIGN=left |
〈IMG SRC="star.gif" ALIGN=left>美丽的心
灵，有着数不清的爱心，象天空里的星星，明
亮晶莹。 |
美丽的心灵，
有着数不清的
爱心，象天空
里的星星，明
亮晶莹。 |
| ALIGN=right |
〈IMG SRC="star.gif" ALIGN=right>美丽的心
灵，有着数不清的爱心，象天空里的星星，明
亮晶莹。 |
美丽的心灵，
有着数不清的
爱心，象天空
里的星星，明
亮晶莹。 |
图文之间的距离设置：
在HTML文件里图形水平位置的配置，可由HSPACE属性来完成，其垂直位置的配置，由VSPACE来完成。
播放音乐
HTML除了可以插入图形之外，还可以播放音乐和视频等。用浏览器可以播放的音乐格式有：MIDI音乐、WAV音乐、AU格式。另外在利用网络下载的各种音乐格式中，MP3是压缩率最高，音质最好的文件格式。
点播音乐
将音乐做成一个链接，只需用鼠标在上面单击，就可以听到动人的音乐了，这样做的方法很简单：
<A HREF="音乐地址">乐曲名</A>
例如：播放一段MIDI音乐：
<A HREF="midi.mid">MIDI音乐</A> MIDI音乐
播放一段AU格式音乐：
<A HREF="you.au">同桌的你-AU音乐</A> 同桌的你-AU音乐
把我们喜欢的音乐收集起来，作成一个音乐库，随时都可以让自己和别人徜徉在音乐的海洋中，已经有人这样做了，你一定已经遇到很多，而且自己也可以试着去做了！
自动载入音乐
前面，我们是借助链接来实现网上播放音乐这一功能的，我们还可以让音乐自动载入，你可以让它出现控制面板或当背景音乐来使用。基本语法：
<EMBED SRC="音乐文件地址">
属性有：
| SRC="FILENAME" |
设定音乐文件的路径 |
| AUTOSTART=TRUE/FALSE |
是否要音乐文件传送完就自动播放，TRUE是要，FALSE是不要，默认为FALSE |
| LOOP=TRUE/FALSE |
设定播放重复次数，LOOP=6表示重复6次，TRUE表示无限次播放，FALSE播放一次即停止。 |
| STARTIME="分:秒" |
设定乐曲的开始播放时间，如20秒后播放写为STARTIME=00:20 |
| VOLUME=0-100 |
设定音量的大小。如果没设定的话，就用系统的音量。 |
| WIDTH HEIGHT |
设定控制面板的大小 |
| HIDDEN=TRUE |
隐藏控制面板 |
| CONTROLS=CONSOLE/SMALLCONSOLE |
设定控制面板的样子 |
例：
*************************************
<html>
<head>
<title>播放音乐</title>
</head>
<body>
<EMBED SRC="midi.mid" autostart=true hidden=true loop=true>
作为背景音乐来播放。
</body>
</html>
例：
*************************************
<html>
<head>
<title>播放音乐</title>
</head>
<body>
<EMBED SRC="midi.mid" loop=true width=145 height=60>
<P> 出现控制面板了，你可以控制它的开与关，还可以调节音量的大小。</P>
<／body>
</html>
IE中的背景音乐
另外，还有一种插入背景音乐格式，不过只有在IE浏览器中才可以听到。
<bgsound src="音乐文件地址" loop=#>
#=循环数
例：
<bgsound src="sound.wav" loop=3>
|
