html總結
全寫： HyperText Mark-up Language
譯名： 超文件註標式語言（譯名之
簡釋：一種爲普通文件中某些字句加上標示的語言，其目的在於運用標記（tag）使文件達到預期的顯示效果
注意事項
1.< > 是全部標記的開始和結束
2.標記之間能夠嵌套<h1><center>標題</h1></center>
3.在源代碼中不區分大小寫 <head> <Head> <HEAD> 做用相同
4.在標記中能夠放置各類屬性 <h1 align=center>
5.回車鍵和空格鍵在源代碼中不起做用
6.註釋 <!-- -->
1.頁面的頭部標記
<head> javascript css通常都定義在<head>中
通常說來頭部定義的內容不會在網頁上顯示,而是經過另外的方式起做用 如:<title>
頭部標記
標記 描述
<base> 當前文檔的URL全稱(基底網址)
<title> 設定顯示在IE左上方的標題內容
<meta> 有關文檔自己的元信息 例如：用於查詢的關鍵字
<style> 設定CSS層疊樣式表的內容
<link> 設定外部文件的鏈接
<script> 設定頁面中程序腳本的內容
<title> 網頁的標題
做用： 在瀏覽者保存該頁面後變爲保存後網頁的文件名
能夠添加進收藏夾中時顯示該頁面的名字
<HTML>
<HEAD>
<TITLE>歡迎學習 HTML</TITLE>
</HEAD>
<BODY>
<H3>個人第一個 HTML 文檔</H3>
</BODY>
</HTML>
<base>基底網址標記 :通常用來設定IE中文件的絕對路徑
一篇文檔中的 <base>基底網址標記不能多於一個,必 須放於頭部而且應該在任何包含URL地址的語句以前
<base href="url" target="window_name">
href屬性指定了文檔的基礎URL地址
target定義的是打開頁面的窗口
<HTML>
<HEAD>
<TITLE>歡迎學習 HTML</TITLE>
<BASE href="http://www.163.com" target="_self">
</HEAD>
<BODY>
<H3>個人第一個 HTML 文檔</H3>
<a href=new.html>新聞</a>
</BODY>
</HTML> 將鼠標放置到鏈接的上方
<meta>元信息標記 :功能定義頁面中的信息, 這些信息不會在頁面中顯示
只會在源代碼中顯示
在HTML中能夠包括任意數量的<meta>元信息標記
屬性
http-equiv 生成一個HTTP標題域，它的屬性與另外一個屬性相同
如：http-equiv=expires,實際取值由content肯定
name 若是元數據是以關鍵字/取值的形式出現的
name表示關鍵字
content 關鍵字/取值的內容
定義編輯工具
<HTML>
<HEAD>
<TITLE>歡迎學習 HTML</TITLE>
<meta name=generator content="notepad">
</HEAD>
<BODY>
<H3>個人第一個 HTML 文檔</H3>
<a href=new.html>新聞</a>
</BODY>
</HTML> 以記事本作爲網頁的編輯工具
generator:爲編輯器定義
content:定義編輯器的名稱
設定關鍵字 關鍵字是爲搜索引擎提供的 不宜過多
語法 <meta name="keywords" content="value">
keywords:定義關鍵字
content：定義關鍵字的內容
<HTML>
<HEAD>
<TITLE>歡迎學習 HTML</TITLE>
<meta name=keywords content="mp3, mtv,音樂,搖滾">
</HEAD>
<BODY>
</BODY>
</HTML>
設定描述 是爲搜索引擎提供的
語法 <meta name="discription" content="value">
<HTML>
<HEAD>
<TITLE>歡迎學習 HTML</TITLE>
<meta name="discription" content="HTML語言">
</HEAD>
<BODY>
</BODY>
</HTML>
設定做者
在頁面的源代碼中，顯示頁面製做者的姓名及我的信息
語法 <meta name="author" content="value">
<HTML>
<HEAD>
<TITLE>歡迎學習 HTML</TITLE>
<meta name="author" content="李四">
</HEAD>
<BODY>
</BODY>
</HTML>
設定字符集
gb2312 簡體中文
big5 繁體中文
iso8850-1 英文
語法 <meta http-equiv="content-type"
content="text/html;charset=value">
http-equiv 傳送HTTP通訊協議的表頭
content 定義頁面的內碼 CHARSET中寫下內碼的語系
<HTML>
<HEAD>
<TITLE>歡迎學習 HTML</TITLE>
<meta http-equiv="content-type"
content="text/html;charset=gb2312">
</HEAD>
<BODY>
</BODY>
</HTML>
設定自動刷新 就是每隔幾秒後刷新頁面的內容
好比圖文直播
語法 <meta http-equiv="refresh" content="value">
http-equiv 傳送HTTP通訊協議的表頭
refresh 表明刷新
content 中寫下刷新間隔的秒數
<HTML>
<HEAD>
<TITLE>歡迎學習 HTML</TITLE>
<meta http-equiv="refresh"
content="3">
</HEAD>
<BODY>
<p>3秒刷新一次</p>
</BODY>
</HTML>
設定自動跳轉
如可先在一個頁面上顯示歡迎信息，通過一段時間
自動跳轉到指定的網頁上
語法
<meta http-equiv="refresh" content="value" url="url_value">
http-equiv 傳送HTTP通訊協議的表頭
refresh 表明刷新
content 中寫下刷新間隔的秒數後跳轉到文件地址
<HTML>
<HEAD>
<TITLE>歡迎學習 HTML</TITLE>
<meta http-equiv="refresh"
content="5;
url=new.html">
</HEAD>
<BODY>
<h2><center>請稍等片刻......</center><h2>
<p>本頁面5秒後跳轉到新的地址</p>
</BODY>
</HTML>
設定轉場效果
轉場效果即網頁的過渡，是指當進入或離開網站時
頁面具備不一樣的切換效果
語法
<meta http-equiv=""
content="revealtrans(duration=value,transition=number)">
event設定頁面進入或退出的時候產生切換效果
page-enter 表示進入網頁時有網頁的過渡效果
page-exit 表示退出網頁時有網頁的過渡效果
duration表示網頁過渡效果的延續時間，單位爲秒
transition 寫下過渡效果的方式編號
效果 效果編號
盒狀收縮 0
盒狀展開 1
圓形收縮 2
圓形展開 3
向上擦除 4
向下擦除 5
向左擦除 6
向右擦除 7
垂直百頁窗 8
水平百頁窗 9
橫向棋盤式 10
縱向棋盤式 11
溶解 12
左右向中部收縮 13
中部向左右收縮 14
上下向中部收縮 15
中部向上下展開 16
階梯狀向左下展開 17
階梯狀向左上展開 18
階梯狀向右下展開 19
階梯狀向右上展開 20
隨機水平線 21
隨機垂直線 22
隨機 23
<HTML>
<HEAD>
<TITLE>歡迎學習 HTML</TITLE>
<BODY bgcolor=#99ccff>
<center>
<h2><center>頁面的過渡效果</h2>
<p><img src="new.gif" width=400 height=200></img></p>
<a href="new.html">進入網頁</a><br>
<a href="old.html">退出網頁</a><br>
</center>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>歡迎學習 HTML</TITLE>
<meta http-equiv="page-enter"
content="revealtrans(duration=3,transition=10)">
</head>
<BODY bgcolor=#99ccff>
<center>
<h2>顯示頁面的進入效果</h2>
<p><img src="我LOVE你.gif" width=400 height=200></img></p>
<a href="test1.html">返回</a>
</center>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>歡迎學習 HTML</TITLE>
<meta http-equiv="page-exit"
content="revealtrans(duration=5,transition=8)">
</head>
<BODY bgcolor=#99ccff>
<center>
<h2>顯示頁面的退出效果</h2>
<p><img src="快還錢.gif" width=400 height=200></img></p>
<a href="test1.html">返回</a>
</center>
</BODY>
</HTML>
2.頁面的主體標記
頁面的主體位於<body></body>之間
<body>元素的屬性
屬性 描述
text 設定頁面文字的顏色
bgcolor 設定頁面背景的顏色
background 設定頁面背景的圖象
bgproperties 設定頁面背景的圖象爲固定，不隨頁面的滾動而滾動
link 設定頁面默認的鏈接顏色
alink 設定鼠標單擊時的鏈接顏色
vlink 設定訪問過的鏈接顏色
topMargin 設定頁面的上邊距
leftMargin 設定頁面的左邊距
text 設定頁面文字的顏色
<HTML>
<HEAD>
<TITLE>歡迎學習 HTML</TITLE>
<BODY text=#0000ff>
<center>
<h2>設定頁面的文字顏色爲藍色</h2>
</center>
</BODY>
</HTML>
bgcolor 設定頁面背景的顏色
<HTML>
<HEAD>
<TITLE>歡迎學習 HTML</TITLE>
<BODY text=#ffffff bgcolor="#336699">
<center>
<h2>設定頁面的文字顏色爲白色 背景顏色爲深藍色</h2>
</center>
</BODY>
</HTML>
background 設定頁面背景的圖象
<HTML>
<HEAD>
<TITLE>歡迎學習 HTML</TITLE>
<BODY text=#336699 background="2008.jpg">
<center>
<h2>設定頁面的文字顏色爲深藍色 背景圖象爲2008.jpg</h2>
</center>
</BODY>
</HTML>
bgproperties 設定頁面背景的圖象爲固定，不隨頁面的滾動而滾動
bgproperties＝fixed 設定爲固定的效果
<HTML>
<HEAD>
<TITLE>歡迎學習 HTML</TITLE>
<BODY text=#336699 background="2008.jpg" bgproperties＝fixed>
<center>
<h2>設定頁面的文字顏色爲深藍色 背景圖象爲2008.jpg</h2>
</center>
</BODY>
</HTML>
鏈接文字顏色的屬性 默認鏈接文字的顏色爲藍色 訪問事後的顏色是紫紅色
這樣有助於用戶判斷是否點擊過該鏈接
在HTML中能夠修改的鏈接狀態共有3種
link 設定頁面默認的鏈接顏色
alink 設定鼠標單擊時的鏈接顏色
vlink 設定訪問過的鏈接顏色
<HTML>
<HEAD>
<TITLE>歡迎學習 HTML</TITLE>
<BODY text=#ffffff bgcolor="#336699"
link="red" alink="#00ff00" vlink="#cccccc" >
<center>
<h2>設定不一樣的鏈接顏色</h2><br>
<a href=new.html>鏈接</a>
<a href=old.html>鏈接</a>
</center>
</BODY>
</HTML>
topMargin 設定頁面的上邊距 單位爲像素
<HTML>
<HEAD>
<TITLE>歡迎學習 HTML</TITLE>
<BODY topMargin=30>
<p>設定頁面的上邊距爲30像素</p>
</BODY>
</HTML>
leftMargin 設定頁面的左邊距
<HTML>
<HEAD>
<TITLE>歡迎學習 HTML</TITLE>
<BODY leftMargin=30>
<p>設定頁面的左邊距爲30像素</p>
</BODY>
</HTML>
3.文字與段落
空格符號
<HTML>
<HEAD>
<TITLE>插入聲音</TITLE>
</HEAD>
<BODY>
<H1><FONT SIZE=3 COLOR=FORESTGREEN><B>插 入 聲 音</B></FONT></H1>
<HR>
</BODY>
</HTML>
特殊符號 " "
& &
< <
> >
<HTML>
<HEAD>
<TITLE>插入聲音</TITLE>
</HEAD>
<BODY>
<H1><FONT SIZE=3 COLOR=FORESTGREEN><B>"音樂"</B></FONT></H1>
<HR>
</BODY>
</HTML>
<!-- --> 註釋語句 如 <!-- HTML語言 --> 該代碼不會在IE中顯示
<!-- HTML語言 -->
<HTML>
<HEAD>
<TITLE>插入聲音</TITLE>
</HEAD>
<BODY>
<H1><FONT SIZE=3 COLOR=FORESTGREEN><B>"音樂"</B></FONT></H1>
<HR>
</BODY>
</HTML>
<h>標題字標記 <h1></h1> <h2></h2> <h3></h3> <h4></h4> <h5></h5> <h6></h6>
字體依次逐級遞減
<HTML>
<HEAD>
<TITLE>HTML 簡介</TITLE>
</HEAD>
<BODY>
<H1>HTML 簡介</H1>
<H2>HTML 簡介</H2>
<H3>HTML 簡介</H3>
<H4>HTML 簡介</H4>
<H5>HTML 簡介</H5>
<H6>HTML 簡介</H6>
</BODY>
</HTML>
對齊屬性 align left(默認) center right
<HTML>
<HEAD>
<TITLE>HTML 簡介</TITLE>
</HEAD>
<BODY>
<H1 align=center>HTML 簡介</H1>
<H2 align=right>HTML 簡介</H2>
<H3 algin=left>HTML 簡介</H3>
</body>
</HTML>
<b> <strong> 粗體標記
<b>HTML</b> 簡介 <strong>簡介</strong>
<i> <em> <cite> 斜體標記
<i>你好</i>歡迎你 <em>來聽個人</em>HTML<cite>課程</cite>
<sup>上標記 <sub>下標記
<HTML>
<HEAD>
<TITLE>字符級標記示例</TITLE>
</HEAD>
<BODY>
<P ALIGN="center"><B>字符級標記示例</B></P>
<P>圓的面積=pi*r<SUP>2</SUP></P>
<P>水的化學符號：H<SUB>2</SUB>O</P>
<P><EM>這是一種頗有趣的體驗</EM></P>
</BODY>
</HTML>
<big>大字號標記 將當前的文字加大一級字號顯示
<HTML>
<HEAD>
<TITLE>字符級標記示例</TITLE>
</HEAD>
<BODY>
這是一種頗有趣的體驗<br>
<big>這是一種頗有趣的體驗</big>
</BODY>
</HTML>
<small>小字號標記 將當前的文字縮小一級字號顯示
<u>下劃線標記
<HTML>
<HEAD>
<TITLE>字符級標記示例</TITLE>
</HEAD>
<BODY>
<u>這是一種頗有趣的體驗</u>
</BODY>
</HTML>
<s> <strike> 刪除線標記
<HTML>
<HEAD>
<TITLE>字符級標記示例</TITLE>
</HEAD>
<BODY>
<s>這是一種頗有趣的體驗</s><br>
<strike>這是一種頗有趣的體驗</strike>
</BODY>
</HTML>
<address>地址文字標記 :主要用語顯示E_MAIL 地址等文字內容 主要用於英文字體中顯示
<HTML>
<HEAD>
<TITLE>歡迎學習 HTML</TITLE>
</HEAD>
<BODY BGCOLOR = lavender>
<H3>個人第一個 HTML 文檔</H3>
<P>這將是一種頗有趣的體驗
<H2>使用另外一個標題</H2>
<P> 另外一個段落元素
<ADDRESS>
<P><A href=「http://www.163.com/」>單擊此處訪問北京網易有限公司的主頁</A> </ADDRESS>
</BODY>
</HTML>
<tt>打字機標記 該標記用來建立出打字機風格的字體,文字間是以等寬來顯示的
<HTML>
<HEAD>
<TITLE>歡迎學習 HTML</TITLE>
</HEAD>
<BODY BGCOLOR = lavender>
<H3>個人第一個 HTML 文檔</H3>
<P>這將是一種頗有趣的體驗
<H2>使用另外一個標題</H2>
<P> 另外一個段落元素
<ADDRESS>
<P><A href=「http://www.163.com/」>單擊此處訪問北京網易有限公司的主頁</A> </ADDRESS>
<tt>另外一個段落元素</tt>
</BODY>
</HTML>
<code> <samp> 等寬文字標記 使用等寬字體來顯示文字的內容 主要用於英文字體中顯示
<HTML>
<HEAD>
<TITLE>歡迎學習 HTML</TITLE>
</HEAD>
<BODY BGCOLOR = lavender>
<p><code>welcome you</code></p>
<p><samp>welcome you</samp></p>
</BODY>
</HTML>
<kbd> 在標記間的文字就是鍵盤輸入命令的文字效果
<HTML>
<HEAD>
<TITLE>歡迎學習 HTML</TITLE>
</HEAD>
<BODY BGCOLOR = lavender>
<p><kbd>welcome you</kbd></p>
</BODY>
</HTML>
<var> 能夠顯示變量的文字效果,使用斜體
<HTML>
<HEAD>
<TITLE>歡迎學習 HTML</TITLE>
</HEAD>
<BODY BGCOLOR = lavender>
<p><var>welcome you</var></p>
</BODY>
</HTML>
<font>字體標記
屬性 字體face 字號size (-7---+7) 默認是3 顏色color
控制面板--->字體 Windows系統中的字體均可以顯示在IE中
<HTML>
<HEAD>
<TITLE>歡迎使用HTML</TITLE>
</HEAD>
<BODY>
<H3><FONT SIZE = 3 COLOR = HOTPINK FACE = "隸書">個人第一個HTML文檔 </FONT></H3>
<P>這<FONT COLOR = BLUE SIZE = 6>將會</FONT>是一種頗有趣的體驗
</BODY>
</HTML>
<basefont>基字標記
<HTML>
<HEAD>
<TITLE>歡迎使用HTML</TITLE>
</HEAD>
<BODY>
<BASEFONT SIZE = 3 COLOR = HOTPINK FACE = "隸書">個人第一個HTML文檔 </BASEFONT>
<P>這<FONT COLOR = BLUE SIZE =+1>將會</FONT>是一種頗有趣的體驗
<P>這<FONT COLOR = BLUE SIZE =-1>將會</FONT>是一種頗有趣的體驗
</BODY>
</HTML>
段落標記
<p>段落標記 段落:就是一段格式上統一的文本 能夠說段落就是帶有硬回車的組合
屬性 align(left center right)
<HTML>
<HEAD>
<TITLE>歡迎使用HTML</TITLE>
</HEAD>
<BODY>
<P align=left>是一種頗有趣的體驗</p>
<P align=center>是一種頗有趣的體驗</p>
<P align=right>是一種頗有趣的體驗</p>
</BODY>
</HTML>
<br> 換行標記 <nobr>不換行標記
<HTML>
<HEAD>
<TITLE>歡迎使用HTML</TITLE>
</HEAD>
<BODY>
<nobr>歡迎使用HTML歡迎使用HTML歡迎使用HTML歡迎使用HTML歡迎使用HTML歡迎使用HTML歡迎使用HTML歡迎使用HTML歡迎使用HTML歡迎使用HTML歡迎使用HTML歡迎使用HTML歡迎使用HTML歡迎使用HTML歡迎使用HTML歡迎使用HTML歡迎使用HTML歡迎使用HTML歡迎使用HTML歡迎使用HTML
</nobr>
</BODY>
</HTML>
<pre>預格式化標記:就是保留文字在源代碼中的格式,頁面的顯示效果與在源代碼的格式徹底一致
<HTML>
<HEAD>
<TITLE>學習HTML</TITLE>
</HEAD>
<BODY>
<PRE>
漢普蒂·鄧普蒂坐在牆上
漢普蒂·鄧普蒂摔了一大跤
國王全部的馬
和全部的人
也沒法再把漢普蒂·鄧普蒂拼起來
</PRE>
</BODY>
</HTML>
<center>居中標記
<HTML>
<HEAD>
<TITLE>學習HTML</TITLE>
</HEAD>
<BODY> <center>
<PRE>
漢普蒂·鄧普蒂坐在牆上
漢普蒂·鄧普蒂摔了一大跤
國王全部的馬
和全部的人
也沒法再把漢普蒂·鄧普蒂拼起來
</PRE> </center>
</BODY>
</HTML>
<blockquote>縮排標記 :文字空2個字
<HTML>
<HEAD>
<TITLE>學習HTML</TITLE>
</HEAD>
<BODY>
<P>blockquote元素用於以文本塊的形式設置內容格式。
<BLOCKQUOTE>
漢普蒂·鄧普蒂坐在牆上
漢普蒂·鄧普蒂摔了一大跤
國王全部的馬
和全部的人
也沒法再把漢普蒂·鄧普蒂拼起來
</BLOCKQUOTE>
<P>請注意，上述內容顯示爲一個文本塊。
</BODY>
</HTML>
<hr>水平線標記 用語段落與段落之間的分割
<HTML>
<HEAD>
<TITLE>學習HTML</TITLE>
</HEAD>
<BODY>
<P>blockquote元素用於以文本塊的形式設置內容格式。
<hr>
<BLOCKQUOTE>
漢普蒂·鄧普蒂坐在牆上
漢普蒂·鄧普蒂摔了一大跤
國王全部的馬
和全部的人
也沒法再把漢普蒂·鄧普蒂拼起來
</BLOCKQUOTE>
<hr>
<P>請注意，上述內容顯示爲一個文本塊。
</BODY>
</HTML>
水平線的寬度屬性 width 默認是 100%
<HTML>
<HEAD>
<TITLE>學習HTML</TITLE>
</HEAD>
<BODY>
<P>blockquote元素用於以文本塊的形式設置內容格式。
<hr width=300>
<BLOCKQUOTE>
漢普蒂·鄧普蒂坐在牆上
漢普蒂·鄧普蒂摔了一大跤
國王全部的馬
和全部的人
也沒法再把漢普蒂·鄧普蒂拼起來
</BLOCKQUOTE>
<hr width=80%>
<P>請注意，上述內容顯示爲一個文本塊。
</BODY>
</HTML>
<hr width=300> :表示絕對寬度300像素
<hr width=80%> :水平線的相對寬度80%
水平線的高度屬性 size 只能用絕對像素來定義
<HTML>
<HEAD>
<TITLE>學習HTML</TITLE>
</HEAD>
<BODY>
<P>blockquote元素用於以文本塊的形式設置內容格式。
<hr width=300 size=1>
<BLOCKQUOTE>
漢普蒂·鄧普蒂坐在牆上
漢普蒂·鄧普蒂摔了一大跤
國王全部的馬
和全部的人
也沒法再把漢普蒂·鄧普蒂拼起來
</BLOCKQUOTE>
<hr width=80% size=9>
<P>請注意，上述內容顯示爲一個文本塊。
</BODY>
</HTML>
水平線去掉陰影的屬性 noshade :默認是空心的立體效果
<HTML>
<HEAD>
<TITLE>學習HTML</TITLE>
</HEAD>
<BODY>
<P>blockquote元素用於以文本塊的形式設置內容格式。
<hr width=300 size=2 noshade>
<BLOCKQUOTE>
漢普蒂·鄧普蒂坐在牆上
漢普蒂·鄧普蒂摔了一大跤
國王全部的馬
和全部的人
也沒法再把漢普蒂·鄧普蒂拼起來
</BLOCKQUOTE>
<hr width=80% size=9 noshade>
<P>請注意，上述內容顯示爲一個文本塊。
</BODY>
</HTML>
水平線顏色的屬性 color
<HTML>
<HEAD>
<TITLE>學習HTML</TITLE>
</HEAD>
<BODY>
<P>blockquote元素用於以文本塊的形式設置內容格式。
<hr width=300 size=2 noshade color=red>
<BLOCKQUOTE>
漢普蒂·鄧普蒂坐在牆上
漢普蒂·鄧普蒂摔了一大跤
國王全部的馬
和全部的人
也沒法再把漢普蒂·鄧普蒂拼起來
</BLOCKQUOTE>
<hr width=80% size=9 noshade color=blue>
<P>請注意，上述內容顯示爲一個文本塊。
</BODY>
</HTML>
水平線排列的屬性 align(left center right)
<HTML>
<HEAD>
<TITLE>學習HTML</TITLE>
</HEAD>
<BODY>
<P>blockquote元素用於以文本塊的形式設置內容格式。
<hr width=300 size=2 noshade color=red align=left>
<BLOCKQUOTE>
漢普蒂·鄧普蒂坐在牆上
漢普蒂·鄧普蒂摔了一大跤
國王全部的馬
和全部的人
也沒法再把漢普蒂·鄧普蒂拼起來
</BLOCKQUOTE>
<hr width=80% size=9 noshade color=blue align=right>
<P>請注意，上述內容顯示爲一個文本塊。
</BODY>
</HTML>
4.列表
有序列表:指的是按照數字或字母順序排列列表項目
語法: <ol> <li> ... </ol>
<HTML>
<HEAD>
<TITLE>學習 HTML</TITLE>
</HEAD>
<BODY>
<OL>
<LI>星期一
<LI>星期二
<LI>星期三
<LI>星期四
<LI>星期五
</OL>
</BODY>
</HTML>
在有序列表的默認狀況下,使用數字序號做爲列表的開始
有序列表的類型 1 a A i I
<HTML>
<HEAD>
<TITLE>學習 HTML</TITLE>
</HEAD>
<BODY>
<OL type=I>
<LI>星期一
<LI>星期二
<LI>星期三
<LI>星期四
<LI>星期五
</OL>
</BODY>
</HTML>
有序列表的起始屬性start
<HTML>
<HEAD>
<TITLE>學習 HTML</TITLE>
</HEAD>
<BODY>
<OL type=A start=5>
<LI>星期一
<LI>星期二
<LI>星期三
<LI>星期四
<LI>星期五
</OL>
</BODY>
</HTML>
<ul>無序列表標記 各個列表項之間沒有順序級別之分
<li>作爲每個項目的起始
<dir>目錄列表標記 用於顯示文件內容的目錄大綱 一般用於設計一個壓縮的較窄的列表
如 字典的索引
<HTML>
<HEAD>
<TITLE>學習 HTML</TITLE>
</HEAD>
<BODY>
<dir>
<LI>星期一</LI>
<LI>星期二
<LI>星期三
<LI>星期四
<LI>星期五
</dir>
</BODY>
</HTML>
<dl>定義列表標記
使用<dl>做爲定義列表的聲明 <dt>使用做爲名詞的標題 <dd>用做解釋名詞
<HTML>
<HEAD>
<TITLE>學習 HTML</TITLE>
</HEAD>
<BODY>
<DL>
<DT>星期日
<DD>一週的第一天
<DT>HTML
<DD>超文本標記語言
<DT>互聯網
<DD>網絡的網絡
</DL>
</BODY>
</HTML>
<menu> 菜單列表標記
<HTML>
<HEAD>
<TITLE>學習 HTML</TITLE>
</HEAD>
<BODY>
<menu>
<LI>星期一
<LI>星期二
<LI>星期三
<LI>星期四
<LI>星期五
</menu>
</BODY>
</HTML>
type無序列表的類型屬性 默認是黑色實心圈 disc circle square
<HTML>
<HEAD>
<TITLE>學習 HTML</TITLE>
</HEAD>
<BODY>
<menu type=circle>
<LI>星期一
<LI>星期二
<LI>星期三
<LI>星期四
<LI>星期五
</menu>
</BODY>
</HTML>
列表的嵌套
<HTML>
<HEAD>
<TITLE>學習 HTML</TITLE>
</HEAD>
<BODY>
<DL>
<DT><u>程序員應具有的開發知識</u><br><br>
<DD>html css javascript
<DD>struts spring hibernate
<DD>tomcat weblogic
<br><br><br>
<DT><u>程序員應具有的數據庫知識</u><br><br><br><br>
<DD>sqlserver oracle
</DL>
</BODY>
</HTML>
無序列表和有序列表的嵌套
<HTML>
<HEAD>
<TITLE>學習 HTML</TITLE>
</HEAD>
<BODY>
<ul type=square>
<li><u>J2EE常見的框架技術</u>
<ol type=I>
<li> struts
<li> spring
<li> hibernate
</ol>
<li><u>J2EE常見的服務器技術</u>
<ol type=I>
<li> sqlserver
<li> oracle
<li> mysql
</ol>
<li><u>Java網頁經常使用的技術</u>
<ol type=I>
<li> jsp
<li> servlet
<li> javabean
</ol>
</ul>
</body>
</HTML>
5.超鏈接
URL:urource Locator 通用資源標識符 指每一個網站的獨立地址
<a>鏈接標記
屬性 href:指定鏈接地址
Name:給鏈接命名
Title:給鏈接提示文字
Target:指定鏈接的目的窗口
內部連接 :到同一文檔內或同一網站內的其餘部分的連接
外部連接 :到其餘網站或服務器上的頁面的連接。
絕對路徑:爲文件提供的徹底路徑 如:http://www.sina.com
當鏈接到其它網站的時候必須使用絕對鏈接
相對路徑: 適合網站的內部鏈接
相對鏈接的使用方法:
若是鏈接到同一目錄下,則只需輸入要鏈接的文檔名稱
若是鏈接到下一級目錄下的文件中,先輸入目錄名,而後/ 再輸入文件名
若是鏈接到上一級目錄的文件,先輸入../ 再輸入目錄名,文件名
根路徑: 適合網站的內部鏈接 不建議使用 以/開始 再輸入目錄名,文件名
/root/index.html
設定鏈接的目標窗口
target屬性 屬性值 _parent 在上一級窗口中打開
_blank 在新窗口中打開
_self 在同一窗口中打開
_top 在IE 的整個窗口中打開 忽略任何框架
書籤
連接到同一文檔的各個部分 test1.html
<HTML>
<HEAD><TITLE>使用連接</TITLE></HEAD>
<BODY>
<A HREF = #Internet>互聯網</A><BR><BR>
<A HREF = #HTML>HTML簡介</A><BR><BR>
<A HREF = #Consistency>多樣化和統一性</A><BR><BR>
<A name = Internet>互聯網</A><BR>
<P>互聯網是網絡的網絡。也就是說，計算機網絡能夠跨越國家甚至全球的範圍鏈接到其餘網絡。世界上全部的計算機均可以經過TCP/IP傳輸協議綁定在一塊兒。</P>
<A name = HTML>HTML簡介</A><BR>
<P>超文本標記語言是Web用來建立和識別文檔的標準語言。雖然它不是標準通用標記語言 (SGML) 的子集，但與它有着某種程度上的關聯。SGML是一種文檔格式語言表示方法。</P>
<A name = Consistency>多樣性和統一性</A><BR>
<P>萬事萬物都離不開多樣性和統一性這樣一條基本準則。也就是說，全部的事物均可以融合成一個總體，同時，又保持本身獨特的不同凡響的一面。站點的獨特性偏偏來源於它的一致性。顏色、字體、分欄佈局以及其餘設計元素應在站點的每一個部分都保持一致。 </P>
<BR><BR><BR><BR><BR><BR>
</BODY>
</HTML>
test2.html 鏈接到其它頁面中的書籤
<h1>J2EE採用的框架技術</h1>
<a href=test1.html#Internet>互聯網</a>
<a href=test1.html#HTML>HTML簡介</a>
<a href=test1.html#Consistency>多樣性和統一性</a>
<h1>J2EE採用的框架技術</h1>
外部鏈接 指跳轉到當前網站的外部 須要寫鏈接的絕對地址
url的格式
WWW http:// 進入萬維網站點
Ftp ftp:// 進入文件傳輸服務器
News news:// 啓動新聞討論組
Telnet telnet:// 啓動telnet方式
Gopher gopher:// 訪問一個gopher服務器
E-mail mailto:// 啓動郵件
鏈接到外部網站
<a href="http://www.sina.com.cn">鏈接到新浪</a>
發送E-MAIL 會自動打開系統自帶的郵件軟件如:outlook
<a href="mailto:baiyunri2005@163.com">給老師寫信</a>
<a href="mailto:baiyunri2005@163.com?subject=J2EE知識
&cc=zhangsan@263.net&bcc=lisi@163.com">給老師寫信</a>
subject 電子郵件主題
CC 抄送收件人
BCC 暗送收件人
鏈接 FTP 文件傳輸協議
<a href="ftp://ftp.pku.edu.cn">北京大學</a>
鏈接telnet
就是一臺計算機鏈接到另外一臺計算機上 共享網絡的硬件與軟件資源
<a href="telnet://162.105.203.245:23">北京大學</a>
鏈接到 gopher 它是主要的信息檢索工具
<a href="gopher://dosfan.lib.nic.edu/1">gopher站點</a>
鏈接到News新聞組
新聞組是由世界各地上千個新聞服務器組成的
它是我的向新聞服務器所張貼的郵件的集合
<a href="news://news.newsfan.net">News新聞組</a>
下載文件
<a href="女孩·足球.mp3">下載軟件</a>
6.圖片
<img>
src 圖片的源文件
alt 圖片的提示文字
width 圖片的寬度
height 圖片的高度
vspace 圖片與文字的垂直間距
hspace 圖片與文字的水平間距
border 圖片的邊框
algin 排列 left圖片在文字的左側
right圖片在文字的右側
top 文字位於圖片的頂端
bottom文字位於圖片的底端
middle文字位於圖片的中部
示例:<P>
<center>
<a href=第五題.html>
<IMG ALIGN=bottom
SRC=2439.gif
alt="小孩"
height=200 width=200 border=1
vspace=30 hspace=3>
</a>底部對齊在此處定義顏色
</center></P>
7.表格
<table>...</table> 表格標記
border 屬性定義邊框的寬度,單位爲像素
width 屬性定義表格的寬度
Heigth 屬性定義表格的高度
bordercolor 屬性定義表格的邊框顏色
bgcolor 屬性定義表格的背景顏色
background 屬性定義表格的背景圖象
cellspacing 屬性定義單元格間距,單位爲像素
cellpadding 屬性定義單元格內容和邊框之間的距離
align 屬性定義表格的水平對齊方式 center left right
bordercolorlight 屬性定義表格的亮邊框顏色
bordercolordark 屬性定義表格的暗邊框顏色
示例:<TABLE border=1 width=600 heigth=50 bordercolor=red bgcolor=yellow
background=我LOVE你.gif align=center cellspacing=10 cellpadding=25>
<caption>...</caption> 表格標題
align 屬性定義表格標題的水平對齊方式 center(默認) left right
valign 屬性定義表格標題的垂直對齊方式 top(默認) millde bottom
示例: <CAPTION valign=bottom align=right>建立表</CAPTION>
<th>...</th> 表格的表頭(指表格的第一行,文字以居中加粗顯示)
algin
valgin
bgcolor
background
bordercolor
bordercolorlight
bordercolordark
width
height
<tr>...</tr> 行標記
algin
valgin
bgcolor
background
bordercolor
bordercolorlight
bordercolordark
<td>...</td> 列標記
algin
valgin
bgcolor
background
bordercolor
bordercolorlight
bordercolordark
width
height
rowspan跨行屬性 示例:<TD rowspan=3>J2EE框架</TD>
colspan跨列屬性 <TD colspan=3>
8.表單 是實現動態網頁的一種主要外在形式
表單的主要功能是收集信息,瀏覽者的信息
過程爲:輸入的數據提交給服務器 由服務器的相關程序進行處理
表單標記<form>
屬性 表單的名字 name
表單的傳送方法 method(get默認 post)
用來定義表單處理程序的位置 action
<FORM action="http://mysite.com/processform" METHOD="post">
...表單內容...
</FORM>
其中,Method屬性中,Get方法時將表單內容附加在URL地址後面,因此對提交信息的長度進行了限制,最多不能夠超過8192個字符,若是信息太長,將被截去,從而致使意想不到的處理結果.同時Get方法不具備保密性,不是於處理如信用卡卡號等要求保密的內容,並且補農傳送非ASCII碼的字符.
Post方法是將用戶在表單中填寫的數據包含在表單主體中,一塊兒傳送到服務器商的處理程序中,該方法沒有字符的限制,它包含了ISO10646的字符集,是一種郵寄方式,在瀏覽器的地址欄不顯示提交的信息,這中方式傳送的數據是沒有限制的.當不指明方式時,默認爲Get方式.
<form>標記中能夠包含如下四個標記
<input>表單輸入標記
<select>菜單和列表標記
<option>菜單和列表項目標記
<textarea>文本域標記
<input>表單輸入標記
屬性 name:域的名稱
Type:域的類型 text 文字域
password 密碼域
file 文件域
checkbox 複選框
radio 單選框
button 普通按紐
submit 提交按紐
reset 重置按紐
Hidden 隱藏域
Image 圖象域(圖象提交按鈕)
text 文字域
屬性 name 文字域的名字
maxlength 文字域的最大輸入字符數
size 文字域的寬度
value 文字域的默認值
<INPUT TYPE="TEXT" NAME="RESULT_TextField-6" SIZE="30" MAXLENGTH="30" value=請在這裏輸入值>
password 密碼域
<INPUT TYPE="password" NAME="RESULT_TextField-6" SIZE="30" MAXLENGTH="30" value=請在這裏輸入值>
file 文件域 好比郵件的附件功能 招聘時上傳照片
<input type=file name=File>
checkbox 複選框 從若干選項中選擇多個
<INPUT TYPE="CHECKBOX" NAME="RESULT_CheckBox-0" VALUE="CheckBox-0">股票
<INPUT TYPE="CHECKBOX" NAME="RESULT_CheckBox-1" VALUE="CheckBox-1">期權
<INPUT TYPE="CHECKBOX" NAME="RESULT_CheckBox-2" VALUE="CheckBox-2">互惠基金
屬性 checked 表示被默認選種
value 表示選種後傳到服務器的值
<INPUT TYPE="password" NAME="RESULT_TextField-6" SIZE="30" MAXLENGTH="30" value=請在這裏輸入值>
<input type=file name=File>
<P> <INPUT TYPE="CHECKBOX" NAME="RESULT_CheckBox-4" VALUE="CheckBox-0" checked>股票
<INPUT TYPE="CHECKBOX" NAME="RESULT_CheckBox-4" VALUE="CheckBox-1">期權
<INPUT TYPE="CHECKBOX" NAME="RESULT_CheckBox-4" VALUE="CheckBox-2">互惠基金<BR></p>
radio 單選框
<INPUT TYPE="RADIO" NAME="RESULT_RadioButton-0" VALUE="Radio0">新手
<INPUT TYPE="RADIO" NAME="RESULT_RadioButton-1" VALUE="Radio-1">中級
<INPUT TYPE="RADIO" NAME="RESULT_RadioButton-2" VALUE="Radio-2">專家
屬性 checked 表示被默認選種
value 表示選種後傳到服務器的值
<p> <INPUT TYPE="RADIO" NAME="RESULT_RadioButton-3" VALUE="Radio-0" checked >新手
<INPUT TYPE="RADIO" NAME="RESULT_RadioButton-3" VALUE="Radio-1">中級
<INPUT TYPE="RADIO" NAME="RESULT_RadioButton-3" VALUE="Radio-2">專家</p>
button 普通按紐 主要配合javascript腳原本進行表單的處理
屬性 value 表示按紐上的文字
<input type=button value=按鈕>
submit 提交按紐
<INPUT TYPE="SUBMIT" NAME="submit1" VALUE="提交">
reset 重置按紐 能夠清除表單的內容
<HTML>
<HEAD> <TITLE>表單示例</TITLE></HEAD>
<BODY bgColor="#ffffcc" Text="#000099">
<FORM ACTION="http://www.mysite.com/FormSite" METHOD="POST">
<B><H2 align="left">證券調查示例</H2></B>
<p><B>投資經驗</B></p>
<p> <INPUT TYPE="RADIO" NAME="RESULT_RadioButton-3" VALUE="Radio-0">新手
<INPUT TYPE="RADIO" NAME="RESULT_RadioButton-3" VALUE="Radio-1">中級
<INPUT TYPE="RADIO" NAME="RESULT_RadioButton-3" VALUE="Radio-2">專家</p>
<p><B>投資類型</B></P>
<P> <INPUT TYPE="CHECKBOX" NAME="RESULT_CheckBox-4" VALUE="CheckBox-0">股票
<INPUT TYPE="CHECKBOX" NAME="RESULT_CheckBox-4" VALUE="CheckBox-1">期權
<INPUT TYPE="CHECKBOX" NAME="RESULT_CheckBox-4" VALUE="CheckBox-2">互惠基金<BR></p>
<p><B>今年選擇什麼證券？</B></P>
<P> <INPUT TYPE="TEXT" NAME="RESULT_TextField-6" SIZE="30" MAXLENGTH="30"></p>
<p>
<INPUT TYPE="SUBMIT" NAME="submit1" VALUE="提交">
<INPUT TYPE="RESET" NAME="reset1" VALUE="重置"></p>
</FORM>
</BODY>
</HTML>
Image 圖象域(圖象提交按鈕) 指能夠用在提交按紐位置上圖片
這幅圖片具有按紐的功能
<input type=image name=Image src=酷吧.gif>
Hidden 隱藏域 在頁面中對用戶是不可見的
使用它的目的在於收集或發送信息以利於被處理表單的 程序使用
菜單和列表標記<select> <option>
是爲了節省網頁的空間而產生
屬性 name :菜單和列表的名稱
size :顯示列表的數目
value : 選項值
selected: 默認選項
multiple:列表中的項目多選
<SELECT NAME="RESULT_RadioButton-5">
<OPTION value="網上交易" multiple>1)網上交易</OPTION>
<OPTION value="電話交易">2)電話交易</OPTION>
<OPTION value="經紀人代理" selected>3)經紀人代理</OPTION>
<OPTION value="其餘">4)其餘</OPTION>
</SELECT>
文字域標記<textarea> 能夠在其中輸入多行的文本
屬性 name文字域名稱
rows文字域行數
cols文字域列數
value 文字域的默認值
<TEXTAREA NAME="RESULT_TextArea-8" ROWS="7" COLS="20"></TEXTAREA>
行會自動添加 列是固定不變的
9.框架
左右分割窗口的屬性cols
<HTML>
<HEAD>
<TITLE>嵌套框架</TITLE>
</HEAD>
<FRAMESET cols="33%, 33%, 34%">
<FRAME src = " 酷吧.gif">
<FRAMESET rows="40%, 50%">
<FRAME src = "2439.gif">
<FRAME src = "2439.gif">
</FRAMESET>
<FRAME src = "酷吧.gif">
</FRAMESET>
</HTML>
上下分割窗口的屬性rows
<HTML>
<HEAD>
<TITLE>嵌套框架</TITLE>
</HEAD>
<FRAMESET rows="33%, 33%,*">
<FRAME src = " 酷吧.gif">
<FRAMESET rows="40%, 50%">
<FRAME src = "2439.gif">
<FRAME src = "2439.gif">
</FRAMESET>
<FRAME src = "酷吧.gif">
</FRAMESET>
</HTML>
在使用了框架集的頁面中,頁面的body被frameset所取代 而後經過frame標記定義每一個框架
*表示剩下的部分
framespacing 設置框架邊框寬度屬性
bordercolor 設置框架邊框顏色屬性
<HTML>
<HEAD>
<TITLE>嵌套框架</TITLE>
</HEAD>
<FRAMESET cols="20%, 80%" framespacing=15 bordercolor=red>
<FRAME src = " 酷吧.gif">
<FRAMESET rows="40%, 50%">
<FRAME src = "2439.gif">
<FRAME src = "2439.gif">
</FRAMESET>
<FRAME src = "酷吧.gif">
</FRAMESET>
</HTML>
<frame>經過它能夠定義框架頁面的內容 如:<frame src=test.html>
name:框架名稱屬性 <frame src=test.html name="right">
frameborder 框架邊框顯示屬性 0不顯示邊框 1顯示邊框
可用於 <frame> <FRAMESET>
scrolling框架滾動條顯示屬性 yes 顯示滾動條
no 不顯示滾動條
auto 根據頁面的長度自動判斷是否顯示滾動條
如:<frame src=test.html scrolling=no>
<frame src=test.html scrolling=auto>
noresize 表明禁止改變框架的尺寸大小
如:<frame src=test.html noresize>
marginwidth 邊框邊緣寬度屬性 好比文字與圖片與框架邊框的寬度距離
如:<frame src=test.html marginwidth=40>
marginheight 邊框邊緣高度屬性 好比文字與圖片與框架邊框的高度距離
如:<frame src=test.html marginheight=40>
<noframes>標記表示不支持框架技術 對於較底的IE版本而言
<HTML>
<HEAD>
<TITLE>嵌套框架</TITLE>
</HEAD>
<FRAMESET cols="20%, 80%" bordercolor=red>
<FRAME src = " 酷吧.gif" marginwidth=40>
<FRAME src = "酷吧.gif" marginheight=40>
</FRAMESET>
<noframes>
對不起,您的瀏覽器不支持框架
</noframes>
</HTML>
<iframe> 浮動框架 在瀏覽器中能夠嵌套子窗口,在其中顯示頁面的內容
<HTML>
<HEAD>
<TITLE>嵌套框架</TITLE>
</HEAD>
<body>
<iframe src=" 酷吧.gif" width=400 height=300 name="iframe" align=center>
</iframe>
</body>
</HTML>
10.多媒體頁面
<marquee>滾動文字標記
<HTML>
<HEAD>
<TITLE>學習 HTML</TITLE>
</HEAD>
<BODY>
<marquee>你好,歡迎您的光臨!!!</marquee>
</body>
</HTML>
滾動方向屬性 direction (up down left right)
<HTML>
<HEAD>
<TITLE>學習 HTML</TITLE>
</HEAD>
<BODY>
<marquee direction =up>你好,歡迎您的光臨!!!</marquee>
<marquee direction =down>你好,歡迎您的光臨!!!</marquee>
<marquee direction =left>你好,歡迎您的光臨!!!</marquee>
<marquee direction =right>你好,歡迎您的光臨!!!</marquee>
</body>
</HTML>
滾動方式屬性 behavior scroll:循環往復 slide:只進行一次滾動
alternate:交替進行滾動
<HTML>
<HEAD>
<TITLE>學習 HTML</TITLE>
</HEAD>
<BODY>
<marquee behavior =scroll>你好,歡迎您的光臨!!!</marquee>
<br><br>
<marquee behavior =slide>你好,歡迎您的光臨!!!</marquee>
<br><br>
<marquee behavior =alternate>你好,歡迎您的光臨!!!</marquee>
</body>
</HTML>
滾動速度屬性 scrollamount
<HTML>
<HEAD>
<TITLE>學習 HTML</TITLE>
</HEAD>
<BODY>
<marquee behavior =scroll scrollamount=30>你好,歡迎您的光臨!!!</marquee>
<br><br>
<marquee behavior =slide>你好,歡迎您的光臨!!!</marquee>
<br><br>
<marquee behavior =altenate>你好,歡迎您的光臨!!!</marquee>
</body>
</HTML>
滾動延遲屬性 scrolldelay 500 等於0.5秒
<HTML>
<HEAD>
<TITLE>學習 HTML</TITLE>
</HEAD>
<BODY>
<marquee behavior =scroll scrolldelay=500 >你好,歡迎您的光臨!!!</marquee>
<br><br>
<marquee behavior =slide>你好,歡迎您的光臨!!!</marquee>
<br><br>
<marquee behavior =altenate>你好,歡迎您的光臨!!!</marquee>
</body>
</HTML>
滾動循環屬性 loop
滾動範圍屬性 width height
<HTML>
<HEAD>
<TITLE>學習 HTML</TITLE>
</HEAD>
<BODY>
<marquee behavior =scroll width=200 height=60 >你好,歡迎您的光臨!!! </marquee>
<br><br>
<marquee behavior =slide>你好,歡迎您的光臨!!!</marquee>
<br><br>
<marquee behavior =altenate>你好,歡迎您的光臨!!!</marquee>
</body>
</HTML>
嵌入多媒體內容
mp3:是MPEG Layer3 的簡稱
<HTML>
<HEAD>
<TITLE>插入聲音</TITLE>
</HEAD>
<BODY>
<H1><FONT SIZE=3 COLOR=FORESTGREEN><B>插入聲音</B></FONT></H1>
<HR>
<EMBED ALIGN=CENTER WIDTH="200" HEIGHT="200" SRC="lene.mp3" AUTOSTART="TRUE">
</BODY>
</HTML>
<bgsound>背景音樂標記 當打開頁面後自動播放
<HTML>
<HEAD>
<TITLE>插入聲音</TITLE>
</HEAD>
<BODY>
<H1><FONT SIZE=3 COLOR=FORESTGREEN><B>插入聲音</B></FONT></H1>
<HR>
<bgsound SRC="lene.mp3">
</BODY>
</HTML>
loop 背景音樂循環次數
<HTML>
<HEAD>
<TITLE>插入聲音</TITLE>
</HEAD>
<BODY>
<H1><FONT SIZE=3 COLOR=FORESTGREEN><B>插入聲音</B></FONT></H1>
<HR>
<bgsound SRC="lene.mp3" loop=10>
</BODY>
</HTML>
全寫： HyperText Mark-up Language
譯名： 超文件註標式語言（譯名之
簡釋：一種爲普通文件中某些字句加上標示的語言，其目的在於運用標記（tag）使文件達到預期的顯示效果
注意事項
1.< > 是全部標記的開始和結束
2.標記之間能夠嵌套<h1><center>標題</h1></center>
3.在源代碼中不區分大小寫 <head> <Head> <HEAD> 做用相同
4.在標記中能夠放置各類屬性 <h1 align=center>
5.回車鍵和空格鍵在源代碼中不起做用
6.註釋 <!-- -->
1.頁面的頭部標記
<head> javascript css通常都定義在<head>中
通常說來頭部定義的內容不會在網頁上顯示,而是經過另外的方式起做用 如:<title>
頭部標記
標記 描述
<base> 當前文檔的URL全稱(基底網址)
<title> 設定顯示在IE左上方的標題內容
<meta> 有關文檔自己的元信息 例如：用於查詢的關鍵字
<style> 設定CSS層疊樣式表的內容
<link> 設定外部文件的鏈接
<script> 設定頁面中程序腳本的內容
<title> 網頁的標題
做用： 在瀏覽者保存該頁面後變爲保存後網頁的文件名
能夠添加進收藏夾中時顯示該頁面的名字
<HTML>
<HEAD>
<TITLE>歡迎學習 HTML</TITLE>
</HEAD>
<BODY>
<H3>個人第一個 HTML 文檔</H3>
</BODY>
</HTML>
<base>基底網址標記 :通常用來設定IE中文件的絕對路徑
一篇文檔中的 <base>基底網址標記不能多於一個,必 須放於頭部而且應該在任何包含URL地址的語句以前
<base href="url" target="window_name">
href屬性指定了文檔的基礎URL地址
target定義的是打開頁面的窗口
<HTML>
<HEAD>
<TITLE>歡迎學習 HTML</TITLE>
<BASE href="http://www.163.com" target="_self">
</HEAD>
<BODY>
<H3>個人第一個 HTML 文檔</H3>
<a href=new.html>新聞</a>
</BODY>
</HTML> 將鼠標放置到鏈接的上方
<meta>元信息標記 :功能定義頁面中的信息, 這些信息不會在頁面中顯示
只會在源代碼中顯示
在HTML中能夠包括任意數量的<meta>元信息標記
屬性
http-equiv 生成一個HTTP標題域，它的屬性與另外一個屬性相同
如：http-equiv=expires,實際取值由content肯定
name 若是元數據是以關鍵字/取值的形式出現的
name表示關鍵字
content 關鍵字/取值的內容
定義編輯工具
<HTML>
<HEAD>
<TITLE>歡迎學習 HTML</TITLE>
<meta name=generator content="notepad">
</HEAD>
<BODY>
<H3>個人第一個 HTML 文檔</H3>
<a href=new.html>新聞</a>
</BODY>
</HTML> 以記事本作爲網頁的編輯工具
generator:爲編輯器定義
content:定義編輯器的名稱
設定關鍵字 關鍵字是爲搜索引擎提供的 不宜過多
語法 <meta name="keywords" content="value">
keywords:定義關鍵字
content：定義關鍵字的內容
<HTML>
<HEAD>
<TITLE>歡迎學習 HTML</TITLE>
<meta name=keywords content="mp3, mtv,音樂,搖滾">
</HEAD>
<BODY>
</BODY>
</HTML>
設定描述 是爲搜索引擎提供的
語法 <meta name="discription" content="value">
<HTML>
<HEAD>
<TITLE>歡迎學習 HTML</TITLE>
<meta name="discription" content="HTML語言">
</HEAD>
<BODY>
</BODY>
</HTML>
設定做者
在頁面的源代碼中，顯示頁面製做者的姓名及我的信息
語法 <meta name="author" content="value">
<HTML>
<HEAD>
<TITLE>歡迎學習 HTML</TITLE>
<meta name="author" content="李四">
</HEAD>
<BODY>
</BODY>
</HTML>
設定字符集
gb2312 簡體中文
big5 繁體中文
iso8850-1 英文
語法 <meta http-equiv="content-type"
content="text/html;charset=value">
http-equiv 傳送HTTP通訊協議的表頭
content 定義頁面的內碼 CHARSET中寫下內碼的語系
<HTML>
<HEAD>
<TITLE>歡迎學習 HTML</TITLE>
<meta http-equiv="content-type"
content="text/html;charset=gb2312">
</HEAD>
<BODY>
</BODY>
</HTML>
設定自動刷新 就是每隔幾秒後刷新頁面的內容
好比圖文直播
語法 <meta http-equiv="refresh" content="value">
http-equiv 傳送HTTP通訊協議的表頭
refresh 表明刷新
content 中寫下刷新間隔的秒數
<HTML>
<HEAD>
<TITLE>歡迎學習 HTML</TITLE>
<meta http-equiv="refresh"
content="3">
</HEAD>
<BODY>
<p>3秒刷新一次</p>
</BODY>
</HTML>
設定自動跳轉
如可先在一個頁面上顯示歡迎信息，通過一段時間
自動跳轉到指定的網頁上
語法
<meta http-equiv="refresh" content="value" url="url_value">
http-equiv 傳送HTTP通訊協議的表頭
refresh 表明刷新
content 中寫下刷新間隔的秒數後跳轉到文件地址
<HTML>
<HEAD>
<TITLE>歡迎學習 HTML</TITLE>
<meta http-equiv="refresh"
content="5;
url=new.html">
</HEAD>
<BODY>
<h2><center>請稍等片刻......</center><h2>
<p>本頁面5秒後跳轉到新的地址</p>
</BODY>
</HTML>
設定轉場效果
轉場效果即網頁的過渡，是指當進入或離開網站時
頁面具備不一樣的切換效果
語法
<meta http-equiv=""
content="revealtrans(duration=value,transition=number)">
event設定頁面進入或退出的時候產生切換效果
page-enter 表示進入網頁時有網頁的過渡效果
page-exit 表示退出網頁時有網頁的過渡效果
duration表示網頁過渡效果的延續時間，單位爲秒
transition 寫下過渡效果的方式編號
效果 效果編號
盒狀收縮 0
盒狀展開 1
圓形收縮 2
圓形展開 3
向上擦除 4
向下擦除 5
向左擦除 6
向右擦除 7
垂直百頁窗 8
水平百頁窗 9
橫向棋盤式 10
縱向棋盤式 11
溶解 12
左右向中部收縮 13
中部向左右收縮 14
上下向中部收縮 15
中部向上下展開 16
階梯狀向左下展開 17
階梯狀向左上展開 18
階梯狀向右下展開 19
階梯狀向右上展開 20
隨機水平線 21
隨機垂直線 22
隨機 23
<HTML>
<HEAD>
<TITLE>歡迎學習 HTML</TITLE>
<BODY bgcolor=#99ccff>
<center>
<h2><center>頁面的過渡效果</h2>
<p><img src="new.gif" width=400 height=200></img></p>
<a href="new.html">進入網頁</a><br>
<a href="old.html">退出網頁</a><br>
</center>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>歡迎學習 HTML</TITLE>
<meta http-equiv="page-enter"
content="revealtrans(duration=3,transition=10)">
</head>
<BODY bgcolor=#99ccff>
<center>
<h2>顯示頁面的進入效果</h2>
<p><img src="我LOVE你.gif" width=400 height=200></img></p>
<a href="test1.html">返回</a>
</center>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>歡迎學習 HTML</TITLE>
<meta http-equiv="page-exit"
content="revealtrans(duration=5,transition=8)">
</head>
<BODY bgcolor=#99ccff>
<center>
<h2>顯示頁面的退出效果</h2>
<p><img src="快還錢.gif" width=400 height=200></img></p>
<a href="test1.html">返回</a>
</center>
</BODY>
</HTML>
2.頁面的主體標記
頁面的主體位於<body></body>之間
<body>元素的屬性
屬性 描述
text 設定頁面文字的顏色
bgcolor 設定頁面背景的顏色
background 設定頁面背景的圖象
bgproperties 設定頁面背景的圖象爲固定，不隨頁面的滾動而滾動
link 設定頁面默認的鏈接顏色
alink 設定鼠標單擊時的鏈接顏色
vlink 設定訪問過的鏈接顏色
topMargin 設定頁面的上邊距
leftMargin 設定頁面的左邊距
text 設定頁面文字的顏色
<HTML>
<HEAD>
<TITLE>歡迎學習 HTML</TITLE>
<BODY text=#0000ff>
<center>
<h2>設定頁面的文字顏色爲藍色</h2>
</center>
</BODY>
</HTML>
bgcolor 設定頁面背景的顏色
<HTML>
<HEAD>
<TITLE>歡迎學習 HTML</TITLE>
<BODY text=#ffffff bgcolor="#336699">
<center>
<h2>設定頁面的文字顏色爲白色 背景顏色爲深藍色</h2>
</center>
</BODY>
</HTML>
background 設定頁面背景的圖象
<HTML>
<HEAD>
<TITLE>歡迎學習 HTML</TITLE>
<BODY text=#336699 background="2008.jpg">
<center>
<h2>設定頁面的文字顏色爲深藍色 背景圖象爲2008.jpg</h2>
</center>
</BODY>
</HTML>
bgproperties 設定頁面背景的圖象爲固定，不隨頁面的滾動而滾動
bgproperties＝fixed 設定爲固定的效果
<HTML>
<HEAD>
<TITLE>歡迎學習 HTML</TITLE>
<BODY text=#336699 background="2008.jpg" bgproperties＝fixed>
<center>
<h2>設定頁面的文字顏色爲深藍色 背景圖象爲2008.jpg</h2>
</center>
</BODY>
</HTML>
鏈接文字顏色的屬性 默認鏈接文字的顏色爲藍色 訪問事後的顏色是紫紅色
這樣有助於用戶判斷是否點擊過該鏈接
在HTML中能夠修改的鏈接狀態共有3種
link 設定頁面默認的鏈接顏色
alink 設定鼠標單擊時的鏈接顏色
vlink 設定訪問過的鏈接顏色
<HTML>
<HEAD>
<TITLE>歡迎學習 HTML</TITLE>
<BODY text=#ffffff bgcolor="#336699"
link="red" alink="#00ff00" vlink="#cccccc" >
<center>
<h2>設定不一樣的鏈接顏色</h2><br>
<a href=new.html>鏈接</a>
<a href=old.html>鏈接</a>
</center>
</BODY>
</HTML>
topMargin 設定頁面的上邊距 單位爲像素
<HTML>
<HEAD>
<TITLE>歡迎學習 HTML</TITLE>
<BODY topMargin=30>
<p>設定頁面的上邊距爲30像素</p>
</BODY>
</HTML>
leftMargin 設定頁面的左邊距
<HTML>
<HEAD>
<TITLE>歡迎學習 HTML</TITLE>
<BODY leftMargin=30>
<p>設定頁面的左邊距爲30像素</p>
</BODY>
</HTML>
3.文字與段落
空格符號
<HTML>
<HEAD>
<TITLE>插入聲音</TITLE>
</HEAD>
<BODY>
<H1><FONT SIZE=3 COLOR=FORESTGREEN><B>插 入 聲 音</B></FONT></H1>
<HR>
</BODY>
</HTML>
特殊符號 " "
& &
< <
> >
<HTML>
<HEAD>
<TITLE>插入聲音</TITLE>
</HEAD>
<BODY>
<H1><FONT SIZE=3 COLOR=FORESTGREEN><B>"音樂"</B></FONT></H1>
<HR>
</BODY>
</HTML>
<!-- --> 註釋語句 如 <!-- HTML語言 --> 該代碼不會在IE中顯示
<!-- HTML語言 -->
<HTML>
<HEAD>
<TITLE>插入聲音</TITLE>
</HEAD>
<BODY>
<H1><FONT SIZE=3 COLOR=FORESTGREEN><B>"音樂"</B></FONT></H1>
<HR>
</BODY>
</HTML>
<h>標題字標記 <h1></h1> <h2></h2> <h3></h3> <h4></h4> <h5></h5> <h6></h6>
字體依次逐級遞減
<HTML>
<HEAD>
<TITLE>HTML 簡介</TITLE>
</HEAD>
<BODY>
<H1>HTML 簡介</H1>
<H2>HTML 簡介</H2>
<H3>HTML 簡介</H3>
<H4>HTML 簡介</H4>
<H5>HTML 簡介</H5>
<H6>HTML 簡介</H6>
</BODY>
</HTML>
對齊屬性 align left(默認) center right
<HTML>
<HEAD>
<TITLE>HTML 簡介</TITLE>
</HEAD>
<BODY>
<H1 align=center>HTML 簡介</H1>
<H2 align=right>HTML 簡介</H2>
<H3 algin=left>HTML 簡介</H3>
</body>
</HTML>
<b> <strong> 粗體標記
<b>HTML</b> 簡介 <strong>簡介</strong>
<i> <em> <cite> 斜體標記
<i>你好</i>歡迎你 <em>來聽個人</em>HTML<cite>課程</cite>
<sup>上標記 <sub>下標記
<HTML>
<HEAD>
<TITLE>字符級標記示例</TITLE>
</HEAD>
<BODY>
<P ALIGN="center"><B>字符級標記示例</B></P>
<P>圓的面積=pi*r<SUP>2</SUP></P>
<P>水的化學符號：H<SUB>2</SUB>O</P>
<P><EM>這是一種頗有趣的體驗</EM></P>
</BODY>
</HTML>
<big>大字號標記 將當前的文字加大一級字號顯示
<HTML>
<HEAD>
<TITLE>字符級標記示例</TITLE>
</HEAD>
<BODY>
這是一種頗有趣的體驗<br>
<big>這是一種頗有趣的體驗</big>
</BODY>
</HTML>
<small>小字號標記 將當前的文字縮小一級字號顯示
<u>下劃線標記
<HTML>
<HEAD>
<TITLE>字符級標記示例</TITLE>
</HEAD>
<BODY>
<u>這是一種頗有趣的體驗</u>
</BODY>
</HTML>
<s> <strike> 刪除線標記
<HTML>
<HEAD>
<TITLE>字符級標記示例</TITLE>
</HEAD>
<BODY>
<s>這是一種頗有趣的體驗</s><br>
<strike>這是一種頗有趣的體驗</strike>
</BODY>
</HTML>
<address>地址文字標記 :主要用語顯示E_MAIL 地址等文字內容 主要用於英文字體中顯示
<HTML>
<HEAD>
<TITLE>歡迎學習 HTML</TITLE>
</HEAD>
<BODY BGCOLOR = lavender>
<H3>個人第一個 HTML 文檔</H3>
<P>這將是一種頗有趣的體驗
<H2>使用另外一個標題</H2>
<P> 另外一個段落元素
<ADDRESS>
<P><A href=「http://www.163.com/」>單擊此處訪問北京網易有限公司的主頁</A> </ADDRESS>
</BODY>
</HTML>
<tt>打字機標記 該標記用來建立出打字機風格的字體,文字間是以等寬來顯示的
<HTML>
<HEAD>
<TITLE>歡迎學習 HTML</TITLE>
</HEAD>
<BODY BGCOLOR = lavender>
<H3>個人第一個 HTML 文檔</H3>
<P>這將是一種頗有趣的體驗
<H2>使用另外一個標題</H2>
<P> 另外一個段落元素
<ADDRESS>
<P><A href=「http://www.163.com/」>單擊此處訪問北京網易有限公司的主頁</A> </ADDRESS>
<tt>另外一個段落元素</tt>
</BODY>
</HTML>
<code> <samp> 等寬文字標記 使用等寬字體來顯示文字的內容 主要用於英文字體中顯示
<HTML>
<HEAD>
<TITLE>歡迎學習 HTML</TITLE>
</HEAD>
<BODY BGCOLOR = lavender>
<p><code>welcome you</code></p>
<p><samp>welcome you</samp></p>
</BODY>
</HTML>
<kbd> 在標記間的文字就是鍵盤輸入命令的文字效果
<HTML>
<HEAD>
<TITLE>歡迎學習 HTML</TITLE>
</HEAD>
<BODY BGCOLOR = lavender>
<p><kbd>welcome you</kbd></p>
</BODY>
</HTML>
<var> 能夠顯示變量的文字效果,使用斜體
<HTML>
<HEAD>
<TITLE>歡迎學習 HTML</TITLE>
</HEAD>
<BODY BGCOLOR = lavender>
<p><var>welcome you</var></p>
</BODY>
</HTML>
<font>字體標記
屬性 字體face 字號size (-7---+7) 默認是3 顏色color
控制面板--->字體 Windows系統中的字體均可以顯示在IE中
<HTML>
<HEAD>
<TITLE>歡迎使用HTML</TITLE>
</HEAD>
<BODY>
<H3><FONT SIZE = 3 COLOR = HOTPINK FACE = "隸書">個人第一個HTML文檔 </FONT></H3>
<P>這<FONT COLOR = BLUE SIZE = 6>將會</FONT>是一種頗有趣的體驗
</BODY>
</HTML>
<basefont>基字標記
<HTML>
<HEAD>
<TITLE>歡迎使用HTML</TITLE>
</HEAD>
<BODY>
<BASEFONT SIZE = 3 COLOR = HOTPINK FACE = "隸書">個人第一個HTML文檔 </BASEFONT>
<P>這<FONT COLOR = BLUE SIZE =+1>將會</FONT>是一種頗有趣的體驗
<P>這<FONT COLOR = BLUE SIZE =-1>將會</FONT>是一種頗有趣的體驗
</BODY>
</HTML>
段落標記
<p>段落標記 段落:就是一段格式上統一的文本 能夠說段落就是帶有硬回車的組合
屬性 align(left center right)
<HTML>
<HEAD>
<TITLE>歡迎使用HTML</TITLE>
</HEAD>
<BODY>
<P align=left>是一種頗有趣的體驗</p>
<P align=center>是一種頗有趣的體驗</p>
<P align=right>是一種頗有趣的體驗</p>
</BODY>
</HTML>
<br> 換行標記 <nobr>不換行標記
<HTML>
<HEAD>
<TITLE>歡迎使用HTML</TITLE>
</HEAD>
<BODY>
<nobr>歡迎使用HTML歡迎使用HTML歡迎使用HTML歡迎使用HTML歡迎使用HTML歡迎使用HTML歡迎使用HTML歡迎使用HTML歡迎使用HTML歡迎使用HTML歡迎使用HTML歡迎使用HTML歡迎使用HTML歡迎使用HTML歡迎使用HTML歡迎使用HTML歡迎使用HTML歡迎使用HTML歡迎使用HTML歡迎使用HTML
</nobr>
</BODY>
</HTML>
<pre>預格式化標記:就是保留文字在源代碼中的格式,頁面的顯示效果與在源代碼的格式徹底一致
<HTML>
<HEAD>
<TITLE>學習HTML</TITLE>
</HEAD>
<BODY>
<PRE>
漢普蒂·鄧普蒂坐在牆上
漢普蒂·鄧普蒂摔了一大跤
國王全部的馬
和全部的人
也沒法再把漢普蒂·鄧普蒂拼起來
</PRE>
</BODY>
</HTML>
<center>居中標記
<HTML>
<HEAD>
<TITLE>學習HTML</TITLE>
</HEAD>
<BODY> <center>
<PRE>
漢普蒂·鄧普蒂坐在牆上
漢普蒂·鄧普蒂摔了一大跤
國王全部的馬
和全部的人
也沒法再把漢普蒂·鄧普蒂拼起來
</PRE> </center>
</BODY>
</HTML>
<blockquote>縮排標記 :文字空2個字
<HTML>
<HEAD>
<TITLE>學習HTML</TITLE>
</HEAD>
<BODY>
<P>blockquote元素用於以文本塊的形式設置內容格式。
<BLOCKQUOTE>
漢普蒂·鄧普蒂坐在牆上
漢普蒂·鄧普蒂摔了一大跤
國王全部的馬
和全部的人
也沒法再把漢普蒂·鄧普蒂拼起來
</BLOCKQUOTE>
<P>請注意，上述內容顯示爲一個文本塊。
</BODY>
</HTML>
<hr>水平線標記 用語段落與段落之間的分割
<HTML>
<HEAD>
<TITLE>學習HTML</TITLE>
</HEAD>
<BODY>
<P>blockquote元素用於以文本塊的形式設置內容格式。
<hr>
<BLOCKQUOTE>
漢普蒂·鄧普蒂坐在牆上
漢普蒂·鄧普蒂摔了一大跤
國王全部的馬
和全部的人
也沒法再把漢普蒂·鄧普蒂拼起來
</BLOCKQUOTE>
<hr>
<P>請注意，上述內容顯示爲一個文本塊。
</BODY>
</HTML>
水平線的寬度屬性 width 默認是 100%
<HTML>
<HEAD>
<TITLE>學習HTML</TITLE>
</HEAD>
<BODY>
<P>blockquote元素用於以文本塊的形式設置內容格式。
<hr width=300>
<BLOCKQUOTE>
漢普蒂·鄧普蒂坐在牆上
漢普蒂·鄧普蒂摔了一大跤
國王全部的馬
和全部的人
也沒法再把漢普蒂·鄧普蒂拼起來
</BLOCKQUOTE>
<hr width=80%>
<P>請注意，上述內容顯示爲一個文本塊。
</BODY>
</HTML>
<hr width=300> :表示絕對寬度300像素
<hr width=80%> :水平線的相對寬度80%
水平線的高度屬性 size 只能用絕對像素來定義
<HTML>
<HEAD>
<TITLE>學習HTML</TITLE>
</HEAD>
<BODY>
<P>blockquote元素用於以文本塊的形式設置內容格式。
<hr width=300 size=1>
<BLOCKQUOTE>
漢普蒂·鄧普蒂坐在牆上
漢普蒂·鄧普蒂摔了一大跤
國王全部的馬
和全部的人
也沒法再把漢普蒂·鄧普蒂拼起來
</BLOCKQUOTE>
<hr width=80% size=9>
<P>請注意，上述內容顯示爲一個文本塊。
</BODY>
</HTML>
水平線去掉陰影的屬性 noshade :默認是空心的立體效果
<HTML>
<HEAD>
<TITLE>學習HTML</TITLE>
</HEAD>
<BODY>
<P>blockquote元素用於以文本塊的形式設置內容格式。
<hr width=300 size=2 noshade>
<BLOCKQUOTE>
漢普蒂·鄧普蒂坐在牆上
漢普蒂·鄧普蒂摔了一大跤
國王全部的馬
和全部的人
也沒法再把漢普蒂·鄧普蒂拼起來
</BLOCKQUOTE>
<hr width=80% size=9 noshade>
<P>請注意，上述內容顯示爲一個文本塊。
</BODY>
</HTML>
水平線顏色的屬性 color
<HTML>
<HEAD>
<TITLE>學習HTML</TITLE>
</HEAD>
<BODY>
<P>blockquote元素用於以文本塊的形式設置內容格式。
<hr width=300 size=2 noshade color=red>
<BLOCKQUOTE>
漢普蒂·鄧普蒂坐在牆上
漢普蒂·鄧普蒂摔了一大跤
國王全部的馬
和全部的人
也沒法再把漢普蒂·鄧普蒂拼起來
</BLOCKQUOTE>
<hr width=80% size=9 noshade color=blue>
<P>請注意，上述內容顯示爲一個文本塊。
</BODY>
</HTML>
水平線排列的屬性 align(left center right)
<HTML>
<HEAD>
<TITLE>學習HTML</TITLE>
</HEAD>
<BODY>
<P>blockquote元素用於以文本塊的形式設置內容格式。
<hr width=300 size=2 noshade color=red align=left>
<BLOCKQUOTE>
漢普蒂·鄧普蒂坐在牆上
漢普蒂·鄧普蒂摔了一大跤
國王全部的馬
和全部的人
也沒法再把漢普蒂·鄧普蒂拼起來
</BLOCKQUOTE>
<hr width=80% size=9 noshade color=blue align=right>
<P>請注意，上述內容顯示爲一個文本塊。
</BODY>
</HTML>
4.列表
有序列表:指的是按照數字或字母順序排列列表項目
語法: <ol> <li> ... </ol>
<HTML>
<HEAD>
<TITLE>學習 HTML</TITLE>
</HEAD>
<BODY>
<OL>
<LI>星期一
<LI>星期二
<LI>星期三
<LI>星期四
<LI>星期五
</OL>
</BODY>
</HTML>
在有序列表的默認狀況下,使用數字序號做爲列表的開始
有序列表的類型 1 a A i I
<HTML>
<HEAD>
<TITLE>學習 HTML</TITLE>
</HEAD>
<BODY>
<OL type=I>
<LI>星期一
<LI>星期二
<LI>星期三
<LI>星期四
<LI>星期五
</OL>
</BODY>
</HTML>
有序列表的起始屬性start
<HTML>
<HEAD>
<TITLE>學習 HTML</TITLE>
</HEAD>
<BODY>
<OL type=A start=5>
<LI>星期一
<LI>星期二
<LI>星期三
<LI>星期四
<LI>星期五
</OL>
</BODY>
</HTML>
<ul>無序列表標記 各個列表項之間沒有順序級別之分
<li>作爲每個項目的起始
<dir>目錄列表標記 用於顯示文件內容的目錄大綱 一般用於設計一個壓縮的較窄的列表
如 字典的索引
<HTML>
<HEAD>
<TITLE>學習 HTML</TITLE>
</HEAD>
<BODY>
<dir>
<LI>星期一</LI>
<LI>星期二
<LI>星期三
<LI>星期四
<LI>星期五
</dir>
</BODY>
</HTML>
<dl>定義列表標記
使用<dl>做爲定義列表的聲明 <dt>使用做爲名詞的標題 <dd>用做解釋名詞
<HTML>
<HEAD>
<TITLE>學習 HTML</TITLE>
</HEAD>
<BODY>
<DL>
<DT>星期日
<DD>一週的第一天
<DT>HTML
<DD>超文本標記語言
<DT>互聯網
<DD>網絡的網絡
</DL>
</BODY>
</HTML>
<menu> 菜單列表標記
<HTML>
<HEAD>
<TITLE>學習 HTML</TITLE>
</HEAD>
<BODY>
<menu>
<LI>星期一
<LI>星期二
<LI>星期三
<LI>星期四
<LI>星期五
</menu>
</BODY>
</HTML>
type無序列表的類型屬性 默認是黑色實心圈 disc circle square
<HTML>
<HEAD>
<TITLE>學習 HTML</TITLE>
</HEAD>
<BODY>
<menu type=circle>
<LI>星期一
<LI>星期二
<LI>星期三
<LI>星期四
<LI>星期五
</menu>
</BODY>
</HTML>
列表的嵌套
<HTML>
<HEAD>
<TITLE>學習 HTML</TITLE>
</HEAD>
<BODY>
<DL>
<DT><u>程序員應具有的開發知識</u><br><br>
<DD>html css javascript
<DD>struts spring hibernate
<DD>tomcat weblogic
<br><br><br>
<DT><u>程序員應具有的數據庫知識</u><br><br><br><br>
<DD>sqlserver oracle
</DL>
</BODY>
</HTML>
無序列表和有序列表的嵌套
<HTML>
<HEAD>
<TITLE>學習 HTML</TITLE>
</HEAD>
<BODY>
<ul type=square>
<li><u>J2EE常見的框架技術</u>
<ol type=I>
<li> struts
<li> spring
<li> hibernate
</ol>
<li><u>J2EE常見的服務器技術</u>
<ol type=I>
<li> sqlserver
<li> oracle
<li> mysql
</ol>
<li><u>Java網頁經常使用的技術</u>
<ol type=I>
<li> jsp
<li> servlet
<li> javabean
</ol>
</ul>
</body>
</HTML>
5.超鏈接
URL:urource Locator 通用資源標識符 指每一個網站的獨立地址
<a>鏈接標記
屬性 href:指定鏈接地址
Name:給鏈接命名
Title:給鏈接提示文字
Target:指定鏈接的目的窗口
內部連接 :到同一文檔內或同一網站內的其餘部分的連接
外部連接 :到其餘網站或服務器上的頁面的連接。
絕對路徑:爲文件提供的徹底路徑 如:http://www.sina.com
當鏈接到其它網站的時候必須使用絕對鏈接
相對路徑: 適合網站的內部鏈接
相對鏈接的使用方法:
若是鏈接到同一目錄下,則只需輸入要鏈接的文檔名稱
若是鏈接到下一級目錄下的文件中,先輸入目錄名,而後/ 再輸入文件名
若是鏈接到上一級目錄的文件,先輸入../ 再輸入目錄名,文件名
根路徑: 適合網站的內部鏈接 不建議使用 以/開始 再輸入目錄名,文件名
/root/index.html
設定鏈接的目標窗口
target屬性 屬性值 _parent 在上一級窗口中打開
_blank 在新窗口中打開
_self 在同一窗口中打開
_top 在IE 的整個窗口中打開 忽略任何框架
書籤
連接到同一文檔的各個部分 test1.html
<HTML>
<HEAD><TITLE>使用連接</TITLE></HEAD>
<BODY>
<A HREF = #Internet>互聯網</A><BR><BR>
<A HREF = #HTML>HTML簡介</A><BR><BR>
<A HREF = #Consistency>多樣化和統一性</A><BR><BR>
<A name = Internet>互聯網</A><BR>
<P>互聯網是網絡的網絡。也就是說，計算機網絡能夠跨越國家甚至全球的範圍鏈接到其餘網絡。世界上全部的計算機均可以經過TCP/IP傳輸協議綁定在一塊兒。</P>
<A name = HTML>HTML簡介</A><BR>
<P>超文本標記語言是Web用來建立和識別文檔的標準語言。雖然它不是標準通用標記語言 (SGML) 的子集，但與它有着某種程度上的關聯。SGML是一種文檔格式語言表示方法。</P>
<A name = Consistency>多樣性和統一性</A><BR>
<P>萬事萬物都離不開多樣性和統一性這樣一條基本準則。也就是說，全部的事物均可以融合成一個總體，同時，又保持本身獨特的不同凡響的一面。站點的獨特性偏偏來源於它的一致性。顏色、字體、分欄佈局以及其餘設計元素應在站點的每一個部分都保持一致。 </P>
<BR><BR><BR><BR><BR><BR>
</BODY>
</HTML>
test2.html 鏈接到其它頁面中的書籤
<h1>J2EE採用的框架技術</h1>
<a href=test1.html#Internet>互聯網</a>
<a href=test1.html#HTML>HTML簡介</a>
<a href=test1.html#Consistency>多樣性和統一性</a>
<h1>J2EE採用的框架技術</h1>
外部鏈接 指跳轉到當前網站的外部 須要寫鏈接的絕對地址
url的格式
WWW http:// 進入萬維網站點
Ftp ftp:// 進入文件傳輸服務器
News news:// 啓動新聞討論組
Telnet telnet:// 啓動telnet方式
Gopher gopher:// 訪問一個gopher服務器
E-mail mailto:// 啓動郵件
鏈接到外部網站
<a href="http://www.sina.com.cn">鏈接到新浪</a>
發送E-MAIL 會自動打開系統自帶的郵件軟件如:outlook
<a href="mailto:baiyunri2005@163.com">給老師寫信</a>
<a href="mailto:baiyunri2005@163.com?subject=J2EE知識
&cc=zhangsan@263.net&bcc=lisi@163.com">給老師寫信</a>
subject 電子郵件主題
CC 抄送收件人
BCC 暗送收件人
鏈接 FTP 文件傳輸協議
<a href="ftp://ftp.pku.edu.cn">北京大學</a>
鏈接telnet
就是一臺計算機鏈接到另外一臺計算機上 共享網絡的硬件與軟件資源
<a href="telnet://162.105.203.245:23">北京大學</a>
鏈接到 gopher 它是主要的信息檢索工具
<a href="gopher://dosfan.lib.nic.edu/1">gopher站點</a>
鏈接到News新聞組
新聞組是由世界各地上千個新聞服務器組成的
它是我的向新聞服務器所張貼的郵件的集合
<a href="news://news.newsfan.net">News新聞組</a>
下載文件
<a href="女孩·足球.mp3">下載軟件</a>
6.圖片
<img>
src 圖片的源文件
alt 圖片的提示文字
width 圖片的寬度
height 圖片的高度
vspace 圖片與文字的垂直間距
hspace 圖片與文字的水平間距
border 圖片的邊框
algin 排列 left圖片在文字的左側
right圖片在文字的右側
top 文字位於圖片的頂端
bottom文字位於圖片的底端
middle文字位於圖片的中部
示例:<P>
<center>
<a href=第五題.html>
<IMG ALIGN=bottom
SRC=2439.gif
alt="小孩"
height=200 width=200 border=1
vspace=30 hspace=3>
</a>底部對齊在此處定義顏色
</center></P>
7.表格
<table>...</table> 表格標記
border 屬性定義邊框的寬度,單位爲像素
width 屬性定義表格的寬度
Heigth 屬性定義表格的高度
bordercolor 屬性定義表格的邊框顏色
bgcolor 屬性定義表格的背景顏色
background 屬性定義表格的背景圖象
cellspacing 屬性定義單元格間距,單位爲像素
cellpadding 屬性定義單元格內容和邊框之間的距離
align 屬性定義表格的水平對齊方式 center left right
bordercolorlight 屬性定義表格的亮邊框顏色
bordercolordark 屬性定義表格的暗邊框顏色
示例:<TABLE border=1 width=600 heigth=50 bordercolor=red bgcolor=yellow
background=我LOVE你.gif align=center cellspacing=10 cellpadding=25>
<caption>...</caption> 表格標題
align 屬性定義表格標題的水平對齊方式 center(默認) left right
valign 屬性定義表格標題的垂直對齊方式 top(默認) millde bottom
示例: <CAPTION valign=bottom align=right>建立表</CAPTION>
<th>...</th> 表格的表頭(指表格的第一行,文字以居中加粗顯示)
algin
valgin
bgcolor
background
bordercolor
bordercolorlight
bordercolordark
width
height
<tr>...</tr> 行標記
algin
valgin
bgcolor
background
bordercolor
bordercolorlight
bordercolordark
<td>...</td> 列標記
algin
valgin
bgcolor
background
bordercolor
bordercolorlight
bordercolordark
width
height
rowspan跨行屬性 示例:<TD rowspan=3>J2EE框架</TD>
colspan跨列屬性 <TD colspan=3>
8.表單 是實現動態網頁的一種主要外在形式
表單的主要功能是收集信息,瀏覽者的信息
過程爲:輸入的數據提交給服務器 由服務器的相關程序進行處理
表單標記<form>
屬性 表單的名字 name
表單的傳送方法 method(get默認 post)
用來定義表單處理程序的位置 action
<FORM action="http://mysite.com/processform" METHOD="post">
...表單內容...
</FORM>
其中,Method屬性中,Get方法時將表單內容附加在URL地址後面,因此對提交信息的長度進行了限制,最多不能夠超過8192個字符,若是信息太長,將被截去,從而致使意想不到的處理結果.同時Get方法不具備保密性,不是於處理如信用卡卡號等要求保密的內容,並且補農傳送非ASCII碼的字符.
Post方法是將用戶在表單中填寫的數據包含在表單主體中,一塊兒傳送到服務器商的處理程序中,該方法沒有字符的限制,它包含了ISO10646的字符集,是一種郵寄方式,在瀏覽器的地址欄不顯示提交的信息,這中方式傳送的數據是沒有限制的.當不指明方式時,默認爲Get方式.
<form>標記中能夠包含如下四個標記
<input>表單輸入標記
<select>菜單和列表標記
<option>菜單和列表項目標記
<textarea>文本域標記
<input>表單輸入標記
屬性 name:域的名稱
Type:域的類型 text 文字域
password 密碼域
file 文件域
checkbox 複選框
radio 單選框
button 普通按紐
submit 提交按紐
reset 重置按紐
Hidden 隱藏域
Image 圖象域(圖象提交按鈕)
text 文字域
屬性 name 文字域的名字
maxlength 文字域的最大輸入字符數
size 文字域的寬度
value 文字域的默認值
<INPUT TYPE="TEXT" NAME="RESULT_TextField-6" SIZE="30" MAXLENGTH="30" value=請在這裏輸入值>
password 密碼域
<INPUT TYPE="password" NAME="RESULT_TextField-6" SIZE="30" MAXLENGTH="30" value=請在這裏輸入值>
file 文件域 好比郵件的附件功能 招聘時上傳照片
<input type=file name=File>
checkbox 複選框 從若干選項中選擇多個
<INPUT TYPE="CHECKBOX" NAME="RESULT_CheckBox-0" VALUE="CheckBox-0">股票
<INPUT TYPE="CHECKBOX" NAME="RESULT_CheckBox-1" VALUE="CheckBox-1">期權
<INPUT TYPE="CHECKBOX" NAME="RESULT_CheckBox-2" VALUE="CheckBox-2">互惠基金
屬性 checked 表示被默認選種
value 表示選種後傳到服務器的值
<INPUT TYPE="password" NAME="RESULT_TextField-6" SIZE="30" MAXLENGTH="30" value=請在這裏輸入值>
<input type=file name=File>
<P> <INPUT TYPE="CHECKBOX" NAME="RESULT_CheckBox-4" VALUE="CheckBox-0" checked>股票
<INPUT TYPE="CHECKBOX" NAME="RESULT_CheckBox-4" VALUE="CheckBox-1">期權
<INPUT TYPE="CHECKBOX" NAME="RESULT_CheckBox-4" VALUE="CheckBox-2">互惠基金<BR></p>
radio 單選框
<INPUT TYPE="RADIO" NAME="RESULT_RadioButton-0" VALUE="Radio0">新手
<INPUT TYPE="RADIO" NAME="RESULT_RadioButton-1" VALUE="Radio-1">中級
<INPUT TYPE="RADIO" NAME="RESULT_RadioButton-2" VALUE="Radio-2">專家
屬性 checked 表示被默認選種
value 表示選種後傳到服務器的值
<p> <INPUT TYPE="RADIO" NAME="RESULT_RadioButton-3" VALUE="Radio-0" checked >新手
<INPUT TYPE="RADIO" NAME="RESULT_RadioButton-3" VALUE="Radio-1">中級
<INPUT TYPE="RADIO" NAME="RESULT_RadioButton-3" VALUE="Radio-2">專家</p>
button 普通按紐 主要配合javascript腳原本進行表單的處理
屬性 value 表示按紐上的文字
<input type=button value=按鈕>
submit 提交按紐
<INPUT TYPE="SUBMIT" NAME="submit1" VALUE="提交">
reset 重置按紐 能夠清除表單的內容
<HTML>
<HEAD> <TITLE>表單示例</TITLE></HEAD>
<BODY bgColor="#ffffcc" Text="#000099">
<FORM ACTION="http://www.mysite.com/FormSite" METHOD="POST">
<B><H2 align="left">證券調查示例</H2></B>
<p><B>投資經驗</B></p>
<p> <INPUT TYPE="RADIO" NAME="RESULT_RadioButton-3" VALUE="Radio-0">新手
<INPUT TYPE="RADIO" NAME="RESULT_RadioButton-3" VALUE="Radio-1">中級
<INPUT TYPE="RADIO" NAME="RESULT_RadioButton-3" VALUE="Radio-2">專家</p>
<p><B>投資類型</B></P>
<P> <INPUT TYPE="CHECKBOX" NAME="RESULT_CheckBox-4" VALUE="CheckBox-0">股票
<INPUT TYPE="CHECKBOX" NAME="RESULT_CheckBox-4" VALUE="CheckBox-1">期權
<INPUT TYPE="CHECKBOX" NAME="RESULT_CheckBox-4" VALUE="CheckBox-2">互惠基金<BR></p>
<p><B>今年選擇什麼證券？</B></P>
<P> <INPUT TYPE="TEXT" NAME="RESULT_TextField-6" SIZE="30" MAXLENGTH="30"></p>
<p>
<INPUT TYPE="SUBMIT" NAME="submit1" VALUE="提交">
<INPUT TYPE="RESET" NAME="reset1" VALUE="重置"></p>
</FORM>
</BODY>
</HTML>
Image 圖象域(圖象提交按鈕) 指能夠用在提交按紐位置上圖片
這幅圖片具有按紐的功能
<input type=image name=Image src=酷吧.gif>
Hidden 隱藏域 在頁面中對用戶是不可見的
使用它的目的在於收集或發送信息以利於被處理表單的 程序使用
菜單和列表標記<select> <option>
是爲了節省網頁的空間而產生
屬性 name :菜單和列表的名稱
size :顯示列表的數目
value : 選項值
selected: 默認選項
multiple:列表中的項目多選
<SELECT NAME="RESULT_RadioButton-5">
<OPTION value="網上交易" multiple>1)網上交易</OPTION>
<OPTION value="電話交易">2)電話交易</OPTION>
<OPTION value="經紀人代理" selected>3)經紀人代理</OPTION>
<OPTION value="其餘">4)其餘</OPTION>
</SELECT>
文字域標記<textarea> 能夠在其中輸入多行的文本
屬性 name文字域名稱
rows文字域行數
cols文字域列數
value 文字域的默認值
<TEXTAREA NAME="RESULT_TextArea-8" ROWS="7" COLS="20"></TEXTAREA>
行會自動添加 列是固定不變的
9.框架
左右分割窗口的屬性cols
<HTML>
<HEAD>
<TITLE>嵌套框架</TITLE>
</HEAD>
<FRAMESET cols="33%, 33%, 34%">
<FRAME src = " 酷吧.gif">
<FRAMESET rows="40%, 50%">
<FRAME src = "2439.gif">
<FRAME src = "2439.gif">
</FRAMESET>
<FRAME src = "酷吧.gif">
</FRAMESET>
</HTML>
上下分割窗口的屬性rows
<HTML>
<HEAD>
<TITLE>嵌套框架</TITLE>
</HEAD>
<FRAMESET rows="33%, 33%,*">
<FRAME src = " 酷吧.gif">
<FRAMESET rows="40%, 50%">
<FRAME src = "2439.gif">
<FRAME src = "2439.gif">
</FRAMESET>
<FRAME src = "酷吧.gif">
</FRAMESET>
</HTML>
在使用了框架集的頁面中,頁面的body被frameset所取代 而後經過frame標記定義每一個框架
*表示剩下的部分
framespacing 設置框架邊框寬度屬性
bordercolor 設置框架邊框顏色屬性
<HTML>
<HEAD>
<TITLE>嵌套框架</TITLE>
</HEAD>
<FRAMESET cols="20%, 80%" framespacing=15 bordercolor=red>
<FRAME src = " 酷吧.gif">
<FRAMESET rows="40%, 50%">
<FRAME src = "2439.gif">
<FRAME src = "2439.gif">
</FRAMESET>
<FRAME src = "酷吧.gif">
</FRAMESET>
</HTML>
<frame>經過它能夠定義框架頁面的內容 如:<frame src=test.html>
name:框架名稱屬性 <frame src=test.html name="right">
frameborder 框架邊框顯示屬性 0不顯示邊框 1顯示邊框
可用於 <frame> <FRAMESET>
scrolling框架滾動條顯示屬性 yes 顯示滾動條
no 不顯示滾動條
auto 根據頁面的長度自動判斷是否顯示滾動條
如:<frame src=test.html scrolling=no>
<frame src=test.html scrolling=auto>
noresize 表明禁止改變框架的尺寸大小
如:<frame src=test.html noresize>
marginwidth 邊框邊緣寬度屬性 好比文字與圖片與框架邊框的寬度距離
如:<frame src=test.html marginwidth=40>
marginheight 邊框邊緣高度屬性 好比文字與圖片與框架邊框的高度距離
如:<frame src=test.html marginheight=40>
<noframes>標記表示不支持框架技術 對於較底的IE版本而言
<HTML>
<HEAD>
<TITLE>嵌套框架</TITLE>
</HEAD>
<FRAMESET cols="20%, 80%" bordercolor=red>
<FRAME src = " 酷吧.gif" marginwidth=40>
<FRAME src = "酷吧.gif" marginheight=40>
</FRAMESET>
<noframes>
對不起,您的瀏覽器不支持框架
</noframes>
</HTML>
<iframe> 浮動框架 在瀏覽器中能夠嵌套子窗口,在其中顯示頁面的內容
<HTML>
<HEAD>
<TITLE>嵌套框架</TITLE>
</HEAD>
<body>
<iframe src=" 酷吧.gif" width=400 height=300 name="iframe" align=center>
</iframe>
</body>
</HTML>
10.多媒體頁面
<marquee>滾動文字標記
<HTML>
<HEAD>
<TITLE>學習 HTML</TITLE>
</HEAD>
<BODY>
<marquee>你好,歡迎您的光臨!!!</marquee>
</body>
</HTML>
滾動方向屬性 direction (up down left right)
<HTML>
<HEAD>
<TITLE>學習 HTML</TITLE>
</HEAD>
<BODY>
<marquee direction =up>你好,歡迎您的光臨!!!</marquee>
<marquee direction =down>你好,歡迎您的光臨!!!</marquee>
<marquee direction =left>你好,歡迎您的光臨!!!</marquee>
<marquee direction =right>你好,歡迎您的光臨!!!</marquee>
</body>
</HTML>
滾動方式屬性 behavior scroll:循環往復 slide:只進行一次滾動
alternate:交替進行滾動
<HTML>
<HEAD>
<TITLE>學習 HTML</TITLE>
</HEAD>
<BODY>
<marquee behavior =scroll>你好,歡迎您的光臨!!!</marquee>
<br><br>
<marquee behavior =slide>你好,歡迎您的光臨!!!</marquee>
<br><br>
<marquee behavior =alternate>你好,歡迎您的光臨!!!</marquee>
</body>
</HTML>
滾動速度屬性 scrollamount
<HTML>
<HEAD>
<TITLE>學習 HTML</TITLE>
</HEAD>
<BODY>
<marquee behavior =scroll scrollamount=30>你好,歡迎您的光臨!!!</marquee>
<br><br>
<marquee behavior =slide>你好,歡迎您的光臨!!!</marquee>
<br><br>
<marquee behavior =altenate>你好,歡迎您的光臨!!!</marquee>
</body>
</HTML>
滾動延遲屬性 scrolldelay 500 等於0.5秒
<HTML>
<HEAD>
<TITLE>學習 HTML</TITLE>
</HEAD>
<BODY>
<marquee behavior =scroll scrolldelay=500 >你好,歡迎您的光臨!!!</marquee>
<br><br>
<marquee behavior =slide>你好,歡迎您的光臨!!!</marquee>
<br><br>
<marquee behavior =altenate>你好,歡迎您的光臨!!!</marquee>
</body>
</HTML>
滾動循環屬性 loop
滾動範圍屬性 width height
<HTML>
<HEAD>
<TITLE>學習 HTML</TITLE>
</HEAD>
<BODY>
<marquee behavior =scroll width=200 height=60 >你好,歡迎您的光臨!!! </marquee>
<br><br>
<marquee behavior =slide>你好,歡迎您的光臨!!!</marquee>
<br><br>
<marquee behavior =altenate>你好,歡迎您的光臨!!!</marquee>
</body>
</HTML>
嵌入多媒體內容
mp3:是MPEG Layer3 的簡稱
<HTML>
<HEAD>
<TITLE>插入聲音</TITLE>
</HEAD>
<BODY>
<H1><FONT SIZE=3 COLOR=FORESTGREEN><B>插入聲音</B></FONT></H1>
<HR>
<EMBED ALIGN=CENTER WIDTH="200" HEIGHT="200" SRC="lene.mp3" AUTOSTART="TRUE">
</BODY>
</HTML>
<bgsound>背景音樂標記 當打開頁面後自動播放
<HTML>
<HEAD>
<TITLE>插入聲音</TITLE>
</HEAD>
<BODY>
<H1><FONT SIZE=3 COLOR=FORESTGREEN><B>插入聲音</B></FONT></H1>
<HR>
<bgsound SRC="lene.mp3">
</BODY>
</HTML>
loop 背景音樂循環次數
<HTML>
<HEAD>
<TITLE>插入聲音</TITLE>
</HEAD>
<BODY>
<H1><FONT SIZE=3 COLOR=FORESTGREEN><B>插入聲音</B></FONT></H1>
<HR>
<bgsound SRC="lene.mp3" loop=10>
</BODY>
</HTML>
全寫： HyperText Mark-up Language
譯名： 超文件註標式語言（譯名之
簡釋：一種爲普通文件中某些字句加上標示的語言，其目的在於運用標記（tag）使文件達到預期的顯示效果
注意事項
1.< > 是全部標記的開始和結束
2.標記之間能夠嵌套<h1><center>標題</h1></center>
3.在源代碼中不區分大小寫 <head> <Head> <HEAD> 做用相同
4.在標記中能夠放置各類屬性 <h1 align=center>
5.回車鍵和空格鍵在源代碼中不起做用
6.註釋 <!-- -->
1.頁面的頭部標記
<head> javascript css通常都定義在<head>中
通常說來頭部定義的內容不會在網頁上顯示,而是經過另外的方式起做用 如:<title>
頭部標記
標記 描述
<base> 當前文檔的URL全稱(基底網址)
<title> 設定顯示在IE左上方的標題內容
<meta> 有關文檔自己的元信息 例如：用於查詢的關鍵字
<style> 設定CSS層疊樣式表的內容
<link> 設定外部文件的鏈接
<script> 設定頁面中程序腳本的內容
<title> 網頁的標題
做用： 在瀏覽者保存該頁面後變爲保存後網頁的文件名
能夠添加進收藏夾中時顯示該頁面的名字
<HTML>
<HEAD>
<TITLE>歡迎學習 HTML</TITLE>
</HEAD>
<BODY>
<H3>個人第一個 HTML 文檔</H3>
</BODY>
</HTML>
<base>基底網址標記 :通常用來設定IE中文件的絕對路徑
一篇文檔中的 <base>基底網址標記不能多於一個,必 須放於頭部而且應該在任何包含URL地址的語句以前
<base href="url" target="window_name">
href屬性指定了文檔的基礎URL地址
target定義的是打開頁面的窗口
<HTML>
<HEAD>
<TITLE>歡迎學習 HTML</TITLE>
<BASE href="http://www.163.com" target="_self">
</HEAD>
<BODY>
<H3>個人第一個 HTML 文檔</H3>
<a href=new.html>新聞</a>
</BODY>
</HTML> 將鼠標放置到鏈接的上方
<meta>元信息標記 :功能定義頁面中的信息, 這些信息不會在頁面中顯示
只會在源代碼中顯示
在HTML中能夠包括任意數量的<meta>元信息標記
屬性
http-equiv 生成一個HTTP標題域，它的屬性與另外一個屬性相同
如：http-equiv=expires,實際取值由content肯定
name 若是元數據是以關鍵字/取值的形式出現的
name表示關鍵字
content 關鍵字/取值的內容
定義編輯工具
<HTML>
<HEAD>
<TITLE>歡迎學習 HTML</TITLE>
<meta name=generator content="notepad">
</HEAD>
<BODY>
<H3>個人第一個 HTML 文檔</H3>
<a href=new.html>新聞</a>
</BODY>
</HTML> 以記事本作爲網頁的編輯工具
generator:爲編輯器定義
content:定義編輯器的名稱
設定關鍵字 關鍵字是爲搜索引擎提供的 不宜過多
語法 <meta name="keywords" content="value">
keywords:定義關鍵字
content：定義關鍵字的內容
<HTML>
<HEAD>
<TITLE>歡迎學習 HTML</TITLE>
<meta name=keywords content="mp3, mtv,音樂,搖滾">
</HEAD>
<BODY>
</BODY>
</HTML>
設定描述 是爲搜索引擎提供的
語法 <meta name="discription" content="value">
<HTML>
<HEAD>
<TITLE>歡迎學習 HTML</TITLE>
<meta name="discription" content="HTML語言">
</HEAD>
<BODY>
</BODY>
</HTML>
設定做者
在頁面的源代碼中，顯示頁面製做者的姓名及我的信息
語法 <meta name="author" content="value">
<HTML>
<HEAD>
<TITLE>歡迎學習 HTML</TITLE>
<meta name="author" content="李四">
</HEAD>
<BODY>
</BODY>
</HTML>
設定字符集
gb2312 簡體中文
big5 繁體中文
iso8850-1 英文
語法 <meta http-equiv="content-type"
content="text/html;charset=value">
http-equiv 傳送HTTP通訊協議的表頭
content 定義頁面的內碼 CHARSET中寫下內碼的語系
<HTML>
<HEAD>
<TITLE>歡迎學習 HTML</TITLE>
<meta http-equiv="content-type"
content="text/html;charset=gb2312">
</HEAD>
<BODY>
</BODY>
</HTML>
設定自動刷新 就是每隔幾秒後刷新頁面的內容
好比圖文直播
語法 <meta http-equiv="refresh" content="value">
http-equiv 傳送HTTP通訊協議的表頭
refresh 表明刷新
content 中寫下刷新間隔的秒數
<HTML>
<HEAD>
<TITLE>歡迎學習 HTML</TITLE>
<meta http-equiv="refresh"
content="3">
</HEAD>
<BODY>
<p>3秒刷新一次</p>
</BODY>
</HTML>
設定自動跳轉
如可先在一個頁面上顯示歡迎信息，通過一段時間
自動跳轉到指定的網頁上
語法
<meta http-equiv="refresh" content="value" url="url_value">
http-equiv 傳送HTTP通訊協議的表頭
refresh 表明刷新
content 中寫下刷新間隔的秒數後跳轉到文件地址
<HTML>
<HEAD>
<TITLE>歡迎學習 HTML</TITLE>
<meta http-equiv="refresh"
content="5;
url=new.html">
</HEAD>
<BODY>
<h2><center>請稍等片刻......</center><h2>
<p>本頁面5秒後跳轉到新的地址</p>
</BODY>
</HTML>
設定轉場效果
轉場效果即網頁的過渡，是指當進入或離開網站時
頁面具備不一樣的切換效果
語法
<meta http-equiv=""
content="revealtrans(duration=value,transition=number)">
event設定頁面進入或退出的時候產生切換效果
page-enter 表示進入網頁時有網頁的過渡效果
page-exit 表示退出網頁時有網頁的過渡效果
duration表示網頁過渡效果的延續時間，單位爲秒
transition 寫下過渡效果的方式編號
效果 效果編號
盒狀收縮 0
盒狀展開 1
圓形收縮 2
圓形展開 3
向上擦除 4
向下擦除 5
向左擦除 6
向右擦除 7
垂直百頁窗 8
水平百頁窗 9
橫向棋盤式 10
縱向棋盤式 11
溶解 12
左右向中部收縮 13
中部向左右收縮 14
上下向中部收縮 15
中部向上下展開 16
階梯狀向左下展開 17
階梯狀向左上展開 18
階梯狀向右下展開 19
階梯狀向右上展開 20
隨機水平線 21
隨機垂直線 22
隨機 23
<HTML>
<HEAD>
<TITLE>歡迎學習 HTML</TITLE>
<BODY bgcolor=#99ccff>
<center>
<h2><center>頁面的過渡效果</h2>
<p><img src="new.gif" width=400 height=200></img></p>
<a href="new.html">進入網頁</a><br>
<a href="old.html">退出網頁</a><br>
</center>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>歡迎學習 HTML</TITLE>
<meta http-equiv="page-enter"
content="revealtrans(duration=3,transition=10)">
</head>
<BODY bgcolor=#99ccff>
<center>
<h2>顯示頁面的進入效果</h2>
<p><img src="我LOVE你.gif" width=400 height=200></img></p>
<a href="test1.html">返回</a>
</center>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>歡迎學習 HTML</TITLE>
<meta http-equiv="page-exit"
content="revealtrans(duration=5,transition=8)">
</head>
<BODY bgcolor=#99ccff>
<center>
<h2>顯示頁面的退出效果</h2>
<p><img src="快還錢.gif" width=400 height=200></img></p>
<a href="test1.html">返回</a>
</center>
</BODY>
</HTML>
2.頁面的主體標記
頁面的主體位於<body></body>之間
<body>元素的屬性
屬性 描述
text 設定頁面文字的顏色
bgcolor 設定頁面背景的顏色
background 設定頁面背景的圖象
bgproperties 設定頁面背景的圖象爲固定，不隨頁面的滾動而滾動
link 設定頁面默認的鏈接顏色
alink 設定鼠標單擊時的鏈接顏色
vlink 設定訪問過的鏈接顏色
topMargin 設定頁面的上邊距
leftMargin 設定頁面的左邊距
text 設定頁面文字的顏色
<HTML>
<HEAD>
<TITLE>歡迎學習 HTML</TITLE>
<BODY text=#0000ff>
<center>
<h2>設定頁面的文字顏色爲藍色</h2>
</center>
</BODY>
</HTML>
bgcolor 設定頁面背景的顏色
<HTML>
<HEAD>
<TITLE>歡迎學習 HTML</TITLE>
<BODY text=#ffffff bgcolor="#336699">
<center>
<h2>設定頁面的文字顏色爲白色 背景顏色爲深藍色</h2>
</center>
</BODY>
</HTML>
background 設定頁面背景的圖象
<HTML>
<HEAD>
<TITLE>歡迎學習 HTML</TITLE>
<BODY text=#336699 background="2008.jpg">
<center>
<h2>設定頁面的文字顏色爲深藍色 背景圖象爲2008.jpg</h2>
</center>
</BODY>
</HTML>
bgproperties 設定頁面背景的圖象爲固定，不隨頁面的滾動而滾動
bgproperties＝fixed 設定爲固定的效果
<HTML>
<HEAD>
<TITLE>歡迎學習 HTML</TITLE>
<BODY text=#336699 background="2008.jpg" bgproperties＝fixed>
<center>
<h2>設定頁面的文字顏色爲深藍色 背景圖象爲2008.jpg</h2>
</center>
</BODY>
</HTML>
鏈接文字顏色的屬性 默認鏈接文字的顏色爲藍色 訪問事後的顏色是紫紅色
這樣有助於用戶判斷是否點擊過該鏈接
在HTML中能夠修改的鏈接狀態共有3種
link 設定頁面默認的鏈接顏色
alink 設定鼠標單擊時的鏈接顏色
vlink 設定訪問過的鏈接顏色
<HTML>
<HEAD>
<TITLE>歡迎學習 HTML</TITLE>
<BODY text=#ffffff bgcolor="#336699"
link="red" alink="#00ff00" vlink="#cccccc" >
<center>
<h2>設定不一樣的鏈接顏色</h2><br>
<a href=new.html>鏈接</a>
<a href=old.html>鏈接</a>
</center>
</BODY>
</HTML>
topMargin 設定頁面的上邊距 單位爲像素
<HTML>
<HEAD>
<TITLE>歡迎學習 HTML</TITLE>
<BODY topMargin=30>
<p>設定頁面的上邊距爲30像素</p>
</BODY>
</HTML>
leftMargin 設定頁面的左邊距
<HTML>
<HEAD>
<TITLE>歡迎學習 HTML</TITLE>
<BODY leftMargin=30>
<p>設定頁面的左邊距爲30像素</p>
</BODY>
</HTML>
3.文字與段落
空格符號
<HTML>
<HEAD>
<TITLE>插入聲音</TITLE>
</HEAD>
<BODY>
<H1><FONT SIZE=3 COLOR=FORESTGREEN><B>插 入 聲 音</B></FONT></H1>
<HR>
</BODY>
</HTML>
特殊符號 " "
& &
< <
> >
<HTML>
<HEAD>
<TITLE>插入聲音</TITLE>
</HEAD>
<BODY>
<H1><FONT SIZE=3 COLOR=FORESTGREEN><B>"音樂"</B></FONT></H1>
<HR>
</BODY>
</HTML>
<!-- --> 註釋語句 如 <!-- HTML語言 --> 該代碼不會在IE中顯示
<!-- HTML語言 -->
<HTML>
<HEAD>
<TITLE>插入聲音</TITLE>
</HEAD>
<BODY>
<H1><FONT SIZE=3 COLOR=FORESTGREEN><B>"音樂"</B></FONT></H1>
<HR>
</BODY>
</HTML>
<h>標題字標記 <h1></h1> <h2></h2> <h3></h3> <h4></h4> <h5></h5> <h6></h6>
字體依次逐級遞減
<HTML>
<HEAD>
<TITLE>HTML 簡介</TITLE>
</HEAD>
<BODY>
<H1>HTML 簡介</H1>
<H2>HTML 簡介</H2>
<H3>HTML 簡介</H3>
<H4>HTML 簡介</H4>
<H5>HTML 簡介</H5>
<H6>HTML 簡介</H6>
</BODY>
</HTML>
對齊屬性 align left(默認) center right
<HTML>
<HEAD>
<TITLE>HTML 簡介</TITLE>
</HEAD>
<BODY>
<H1 align=center>HTML 簡介</H1>
<H2 align=right>HTML 簡介</H2>
<H3 algin=left>HTML 簡介</H3>
</body>
</HTML>
<b> <strong> 粗體標記
<b>HTML</b> 簡介 <strong>簡介</strong>
<i> <em> <cite> 斜體標記
<i>你好</i>歡迎你 <em>來聽個人</em>HTML<cite>課程</cite>
<sup>上標記 <sub>下標記
<HTML>
<HEAD>
<TITLE>字符級標記示例</TITLE>
</HEAD>
<BODY>
<P ALIGN="center"><B>字符級標記示例</B></P>
<P>圓的面積=pi*r<SUP>2</SUP></P>
<P>水的化學符號：H<SUB>2</SUB>O</P>
<P><EM>這是一種頗有趣的體驗</EM></P>
</BODY>
</HTML>
<big>大字號標記 將當前的文字加大一級字號顯示
<HTML>
<HEAD>
<TITLE>字符級標記示例</TITLE>
</HEAD>
<BODY>
這是一種頗有趣的體驗<br>
<big>這是一種頗有趣的體驗</big>
</BODY>
</HTML>
<small>小字號標記 將當前的文字縮小一級字號顯示
<u>下劃線標記
<HTML>
<HEAD>
<TITLE>字符級標記示例</TITLE>
</HEAD>
<BODY>
<u>這是一種頗有趣的體驗</u>
</BODY>
</HTML>
<s> <strike> 刪除線標記
<HTML>
<HEAD>
<TITLE>字符級標記示例</TITLE>
</HEAD>
<BODY>
<s>這是一種頗有趣的體驗</s><br>
<strike>這是一種頗有趣的體驗</strike>
</BODY>
</HTML>
<address>地址文字標記 :主要用語顯示E_MAIL 地址等文字內容 主要用於英文字體中顯示
<HTML>
<HEAD>
<TITLE>歡迎學習 HTML</TITLE>
</HEAD>
<BODY BGCOLOR = lavender>
<H3>個人第一個 HTML 文檔</H3>
<P>這將是一種頗有趣的體驗
<H2>使用另外一個標題</H2>
<P> 另外一個段落元素
<ADDRESS>
<P><A href=「http://www.163.com/」>單擊此處訪問北京網易有限公司的主頁</A> </ADDRESS>
</BODY>
</HTML>
<tt>打字機標記 該標記用來建立出打字機風格的字體,文字間是以等寬來顯示的
<HTML>
<HEAD>
<TITLE>歡迎學習 HTML</TITLE>
</HEAD>
<BODY BGCOLOR = lavender>
<H3>個人第一個 HTML 文檔</H3>
<P>這將是一種頗有趣的體驗
<H2>使用另外一個標題</H2>
<P> 另外一個段落元素
<ADDRESS>
<P><A href=「http://www.163.com/」>單擊此處訪問北京網易有限公司的主頁</A> </ADDRESS>
<tt>另外一個段落元素</tt>
</BODY>
</HTML>
<code> <samp> 等寬文字標記 使用等寬字體來顯示文字的內容 主要用於英文字體中顯示
<HTML>
<HEAD>
<TITLE>歡迎學習 HTML</TITLE>
</HEAD>
<BODY BGCOLOR = lavender>
<p><code>welcome you</code></p>
<p><samp>welcome you</samp></p>
</BODY>
</HTML>
<kbd> 在標記間的文字就是鍵盤輸入命令的文字效果
<HTML>
<HEAD>
<TITLE>歡迎學習 HTML</TITLE>
</HEAD>
<BODY BGCOLOR = lavender>
<p><kbd>welcome you</kbd></p>
</BODY>
</HTML>
<var> 能夠顯示變量的文字效果,使用斜體
<HTML>
<HEAD>
<TITLE>歡迎學習 HTML</TITLE>
</HEAD>
<BODY BGCOLOR = lavender>
<p><var>welcome you</var></p>
</BODY>
</HTML>
<font>字體標記
屬性 字體face 字號size (-7---+7) 默認是3 顏色color
控制面板--->字體 Windows系統中的字體均可以顯示在IE中
<HTML>
<HEAD>
<TITLE>歡迎使用HTML</TITLE>
</HEAD>
<BODY>
<H3><FONT SIZE = 3 COLOR = HOTPINK FACE = "隸書">個人第一個HTML文檔 </FONT></H3>
<P>這<FONT COLOR = BLUE SIZE = 6>將會</FONT>是一種頗有趣的體驗
</BODY>
</HTML>
<basefont>基字標記
<HTML>
<HEAD>
<TITLE>歡迎使用HTML</TITLE>
</HEAD>
<BODY>
<BASEFONT SIZE = 3 COLOR = HOTPINK FACE = "隸書">個人第一個HTML文檔 </BASEFONT>
<P>這<FONT COLOR = BLUE SIZE =+1>將會</FONT>是一種頗有趣的體驗
<P>這<FONT COLOR = BLUE SIZE =-1>將會</FONT>是一種頗有趣的體驗
</BODY>
</HTML>
段落標記
<p>段落標記 段落:就是一段格式上統一的文本 能夠說段落就是帶有硬回車的組合
屬性 align(left center right)
<HTML>
<HEAD>
<TITLE>歡迎使用HTML</TITLE>
</HEAD>
<BODY>
<P align=left>是一種頗有趣的體驗</p>
<P align=center>是一種頗有趣的體驗</p>
<P align=right>是一種頗有趣的體驗</p>
</BODY>
</HTML>
<br> 換行標記 <nobr>不換行標記
<HTML>
<HEAD>
<TITLE>歡迎使用HTML</TITLE>
</HEAD>
<BODY>
<nobr>歡迎使用HTML歡迎使用HTML歡迎使用HTML歡迎使用HTML歡迎使用HTML歡迎使用HTML歡迎使用HTML歡迎使用HTML歡迎使用HTML歡迎使用HTML歡迎使用HTML歡迎使用HTML歡迎使用HTML歡迎使用HTML歡迎使用HTML歡迎使用HTML歡迎使用HTML歡迎使用HTML歡迎使用HTML歡迎使用HTML
</nobr>
</BODY>
</HTML>
<pre>預格式化標記:就是保留文字在源代碼中的格式,頁面的顯示效果與在源代碼的格式徹底一致
<HTML>
<HEAD>
<TITLE>學習HTML</TITLE>
</HEAD>
<BODY>
<PRE>
漢普蒂·鄧普蒂坐在牆上
漢普蒂·鄧普蒂摔了一大跤
國王全部的馬
和全部的人
也沒法再把漢普蒂·鄧普蒂拼起來
</PRE>
</BODY>
</HTML>
<center>居中標記
<HTML>
<HEAD>
<TITLE>學習HTML</TITLE>
</HEAD>
<BODY> <center>
<PRE>
漢普蒂·鄧普蒂坐在牆上
漢普蒂·鄧普蒂摔了一大跤
國王全部的馬
和全部的人
也沒法再把漢普蒂·鄧普蒂拼起來
</PRE> </center>
</BODY>
</HTML>
<blockquote>縮排標記 :文字空2個字
<HTML>
<HEAD>
<TITLE>學習HTML</TITLE>
</HEAD>
<BODY>
<P>blockquote元素用於以文本塊的形式設置內容格式。
<BLOCKQUOTE>
漢普蒂·鄧普蒂坐在牆上
漢普蒂·鄧普蒂摔了一大跤
國王全部的馬
和全部的人
也沒法再把漢普蒂·鄧普蒂拼起來
</BLOCKQUOTE>
<P>請注意，上述內容顯示爲一個文本塊。
</BODY>
</HTML>
<hr>水平線標記 用語段落與段落之間的分割
<HTML>
<HEAD>
<TITLE>學習HTML</TITLE>
</HEAD>
<BODY>
<P>blockquote元素用於以文本塊的形式設置內容格式。
<hr>
<BLOCKQUOTE>
漢普蒂·鄧普蒂坐在牆上
漢普蒂·鄧普蒂摔了一大跤
國王全部的馬
和全部的人
也沒法再把漢普蒂·鄧普蒂拼起來
</BLOCKQUOTE>
<hr>
<P>請注意，上述內容顯示爲一個文本塊。
</BODY>
</HTML>
水平線的寬度屬性 width 默認是 100%
<HTML>
<HEAD>
<TITLE>學習HTML</TITLE>
</HEAD>
<BODY>
<P>blockquote元素用於以文本塊的形式設置內容格式。
<hr width=300>
<BLOCKQUOTE>
漢普蒂·鄧普蒂坐在牆上
漢普蒂·鄧普蒂摔了一大跤
國王全部的馬
和全部的人
也沒法再把漢普蒂·鄧普蒂拼起來
</BLOCKQUOTE>
<hr width=80%>
<P>請注意，上述內容顯示爲一個文本塊。
</BODY>
</HTML>
<hr width=300> :表示絕對寬度300像素
<hr width=80%> :水平線的相對寬度80%
水平線的高度屬性 size 只能用絕對像素來定義
<HTML>
<HEAD>
<TITLE>學習HTML</TITLE>
</HEAD>
<BODY>
<P>blockquote元素用於以文本塊的形式設置內容格式。
<hr width=300 size=1>
<BLOCKQUOTE>
漢普蒂·鄧普蒂坐在牆上
漢普蒂·鄧普蒂摔了一大跤
國王全部的馬
和全部的人
也沒法再把漢普蒂·鄧普蒂拼起來
</BLOCKQUOTE>
<hr width=80% size=9>
<P>請注意，上述內容顯示爲一個文本塊。
</BODY>
</HTML>
水平線去掉陰影的屬性 noshade :默認是空心的立體效果
<HTML>
<HEAD>
<TITLE>學習HTML</TITLE>
</HEAD>
<BODY>
<P>blockquote元素用於以文本塊的形式設置內容格式。
<hr width=300 size=2 noshade>
<BLOCKQUOTE>
漢普蒂·鄧普蒂坐在牆上
漢普蒂·鄧普蒂摔了一大跤
國王全部的馬
和全部的人
也沒法再把漢普蒂·鄧普蒂拼起來
</BLOCKQUOTE>
<hr width=80% size=9 noshade>
<P>請注意，上述內容顯示爲一個文本塊。
</BODY>
</HTML>
水平線顏色的屬性 color
<HTML>
<HEAD>
<TITLE>學習HTML</TITLE>
</HEAD>
<BODY>
<P>blockquote元素用於以文本塊的形式設置內容格式。
<hr width=300 size=2 noshade color=red>
<BLOCKQUOTE>
漢普蒂·鄧普蒂坐在牆上
漢普蒂·鄧普蒂摔了一大跤
國王全部的馬
和全部的人
也沒法再把漢普蒂·鄧普蒂拼起來
</BLOCKQUOTE>
<hr width=80% size=9 noshade color=blue>
<P>請注意，上述內容顯示爲一個文本塊。
</BODY>
</HTML>
水平線排列的屬性 align(left center right)
<HTML>
<HEAD>
<TITLE>學習HTML</TITLE>
</HEAD>
<BODY>
<P>blockquote元素用於以文本塊的形式設置內容格式。
<hr width=300 size=2 noshade color=red align=left>
<BLOCKQUOTE>
漢普蒂·鄧普蒂坐在牆上
漢普蒂·鄧普蒂摔了一大跤
國王全部的馬
和全部的人
也沒法再把漢普蒂·鄧普蒂拼起來
</BLOCKQUOTE>
<hr width=80% size=9 noshade color=blue align=right>
<P>請注意，上述內容顯示爲一個文本塊。
</BODY>
</HTML>
4.列表
有序列表:指的是按照數字或字母順序排列列表項目
語法: <ol> <li> ... </ol>
<HTML>
<HEAD>
<TITLE>學習 HTML</TITLE>
</HEAD>
<BODY>
<OL>
<LI>星期一
<LI>星期二
<LI>星期三
<LI>星期四
<LI>星期五
</OL>
</BODY>
</HTML>
在有序列表的默認狀況下,使用數字序號做爲列表的開始
有序列表的類型 1 a A i I
<HTML>
<HEAD>
<TITLE>學習 HTML</TITLE>
</HEAD>
<BODY>
<OL type=I>
<LI>星期一
<LI>星期二
<LI>星期三
<LI>星期四
<LI>星期五
</OL>
</BODY>
</HTML>
有序列表的起始屬性start
<HTML>
<HEAD>
<TITLE>學習 HTML</TITLE>
</HEAD>
<BODY>
<OL type=A start=5>
<LI>星期一
<LI>星期二
<LI>星期三
<LI>星期四
<LI>星期五
</OL>
</BODY>
</HTML>
<ul>無序列表標記 各個列表項之間沒有順序級別之分
<li>作爲每個項目的起始
<dir>目錄列表標記 用於顯示文件內容的目錄大綱 一般用於設計一個壓縮的較窄的列表
如 字典的索引
<HTML>
<HEAD>
<TITLE>學習 HTML</TITLE>
</HEAD>
<BODY>
<dir>
<LI>星期一</LI>
<LI>星期二
<LI>星期三
<LI>星期四
<LI>星期五
</dir>
</BODY>
</HTML>
<dl>定義列表標記
使用<dl>做爲定義列表的聲明 <dt>使用做爲名詞的標題 <dd>用做解釋名詞
<HTML>
<HEAD>
<TITLE>學習 HTML</TITLE>
</HEAD>
<BODY>
<DL>
<DT>星期日
<DD>一週的第一天
<DT>HTML
<DD>超文本標記語言
<DT>互聯網
<DD>網絡的網絡
</DL>
</BODY>
</HTML>
<menu> 菜單列表標記
<HTML>
<HEAD>
<TITLE>學習 HTML</TITLE>
</HEAD>
<BODY>
<menu>
<LI>星期一
<LI>星期二
<LI>星期三
<LI>星期四
<LI>星期五
</menu>
</BODY>
</HTML>
type無序列表的類型屬性 默認是黑色實心圈 disc circle square
<HTML>
<HEAD>
<TITLE>學習 HTML</TITLE>
</HEAD>
<BODY>
<menu type=circle>
<LI>星期一
<LI>星期二
<LI>星期三
<LI>星期四
<LI>星期五
</menu>
</BODY>
</HTML>
列表的嵌套
<HTML>
<HEAD>
<TITLE>學習 HTML</TITLE>
</HEAD>
<BODY>
<DL>
<DT><u>程序員應具有的開發知識</u><br><br>
<DD>html css javascript
<DD>struts spring hibernate
<DD>tomcat weblogic
<br><br><br>
<DT><u>程序員應具有的數據庫知識</u><br><br><br><br>
<DD>sqlserver oracle
</DL>
</BODY>
</HTML>
無序列表和有序列表的嵌套
<HTML>
<HEAD>
<TITLE>學習 HTML</TITLE>
</HEAD>
<BODY>
<ul type=square>
<li><u>J2EE常見的框架技術</u>
<ol type=I>
<li> struts
<li> spring
<li> hibernate
</ol>
<li><u>J2EE常見的服務器技術</u>
<ol type=I>
<li> sqlserver
<li> oracle
<li> mysql
</ol>
<li><u>Java網頁經常使用的技術</u>
<ol type=I>
<li> jsp
<li> servlet
<li> javabean
</ol>
</ul>
</body>
</HTML>
5.超鏈接
URL:urource Locator 通用資源標識符 指每一個網站的獨立地址
<a>鏈接標記
屬性 href:指定鏈接地址
Name:給鏈接命名
Title:給鏈接提示文字
Target:指定鏈接的目的窗口
內部連接 :到同一文檔內或同一網站內的其餘部分的連接
外部連接 :到其餘網站或服務器上的頁面的連接。
絕對路徑:爲文件提供的徹底路徑 如:http://www.sina.com
當鏈接到其它網站的時候必須使用絕對鏈接
相對路徑: 適合網站的內部鏈接
相對鏈接的使用方法:
若是鏈接到同一目錄下,則只需輸入要鏈接的文檔名稱
若是鏈接到下一級目錄下的文件中,先輸入目錄名,而後/ 再輸入文件名
若是鏈接到上一級目錄的文件,先輸入../ 再輸入目錄名,文件名
根路徑: 適合網站的內部鏈接 不建議使用 以/開始 再輸入目錄名,文件名
/root/index.html
設定鏈接的目標窗口
target屬性 屬性值 _parent 在上一級窗口中打開
_blank 在新窗口中打開
_self 在同一窗口中打開
_top 在IE 的整個窗口中打開 忽略任何框架
書籤
連接到同一文檔的各個部分 test1.html
<HTML>
<HEAD><TITLE>使用連接</TITLE></HEAD>
<BODY>
<A HREF = #Internet>互聯網</A><BR><BR>
<A HREF = #HTML>HTML簡介</A><BR><BR>
<A HREF = #Consistency>多樣化和統一性</A><BR><BR>
<A name = Internet>互聯網</A><BR>
<P>互聯網是網絡的網絡。也就是說，計算機網絡能夠跨越國家甚至全球的範圍鏈接到其餘網絡。世界上全部的計算機均可以經過TCP/IP傳輸協議綁定在一塊兒。</P>
<A name = HTML>HTML簡介</A><BR>
<P>超文本標記語言是Web用來建立和識別文檔的標準語言。雖然它不是標準通用標記語言 (SGML) 的子集，但與它有着某種程度上的關聯。SGML是一種文檔格式語言表示方法。</P>
<A name = Consistency>多樣性和統一性</A><BR>
<P>萬事萬物都離不開多樣性和統一性這樣一條基本準則。也就是說，全部的事物均可以融合成一個總體，同時，又保持本身獨特的不同凡響的一面。站點的獨特性偏偏來源於它的一致性。顏色、字體、分欄佈局以及其餘設計元素應在站點的每一個部分都保持一致。 </P>
<BR><BR><BR><BR><BR><BR>
</BODY>
</HTML>
test2.html 鏈接到其它頁面中的書籤
<h1>J2EE採用的框架技術</h1>
<a href=test1.html#Internet>互聯網</a>
<a href=test1.html#HTML>HTML簡介</a>
<a href=test1.html#Consistency>多樣性和統一性</a>
<h1>J2EE採用的框架技術</h1>
外部鏈接 指跳轉到當前網站的外部 須要寫鏈接的絕對地址
url的格式
WWW http:// 進入萬維網站點
Ftp ftp:// 進入文件傳輸服務器
News news:// 啓動新聞討論組
Telnet telnet:// 啓動telnet方式
Gopher gopher:// 訪問一個gopher服務器
E-mail mailto:// 啓動郵件
鏈接到外部網站
<a href="http://www.sina.com.cn">鏈接到新浪</a>
發送E-MAIL 會自動打開系統自帶的郵件軟件如:outlook
<a href="mailto:baiyunri2005@163.com">給老師寫信</a>
<a href="mailto:baiyunri2005@163.com?subject=J2EE知識
&cc=zhangsan@263.net&bcc=lisi@163.com">給老師寫信</a>
subject 電子郵件主題
CC 抄送收件人
BCC 暗送收件人
鏈接 FTP 文件傳輸協議
<a href="ftp://ftp.pku.edu.cn">北京大學</a>
鏈接telnet
就是一臺計算機鏈接到另外一臺計算機上 共享網絡的硬件與軟件資源
<a href="telnet://162.105.203.245:23">北京大學</a>
鏈接到 gopher 它是主要的信息檢索工具
<a href="gopher://dosfan.lib.nic.edu/1">gopher站點</a>
鏈接到News新聞組
新聞組是由世界各地上千個新聞服務器組成的
它是我的向新聞服務器所張貼的郵件的集合
<a href="news://news.newsfan.net">News新聞組</a>
下載文件
<a href="女孩·足球.mp3">下載軟件</a>
6.圖片
<img>
src 圖片的源文件
alt 圖片的提示文字
width 圖片的寬度
height 圖片的高度
vspace 圖片與文字的垂直間距
hspace 圖片與文字的水平間距
border 圖片的邊框
algin 排列 left圖片在文字的左側
right圖片在文字的右側
top 文字位於圖片的頂端
bottom文字位於圖片的底端
middle文字位於圖片的中部
示例:<P>
<center>
<a href=第五題.html>
<IMG ALIGN=bottom
SRC=2439.gif
alt="小孩"
height=200 width=200 border=1
vspace=30 hspace=3>
</a>底部對齊在此處定義顏色
</center></P>
7.表格
<table>...</table> 表格標記
border 屬性定義邊框的寬度,單位爲像素
width 屬性定義表格的寬度
Heigth 屬性定義表格的高度
bordercolor 屬性定義表格的邊框顏色
bgcolor 屬性定義表格的背景顏色
background 屬性定義表格的背景圖象
cellspacing 屬性定義單元格間距,單位爲像素
cellpadding 屬性定義單元格內容和邊框之間的距離
align 屬性定義表格的水平對齊方式 center left right
bordercolorlight 屬性定義表格的亮邊框顏色
bordercolordark 屬性定義表格的暗邊框顏色
示例:<TABLE border=1 width=600 heigth=50 bordercolor=red bgcolor=yellow
background=我LOVE你.gif align=center cellspacing=10 cellpadding=25>
<caption>...</caption> 表格標題
align 屬性定義表格標題的水平對齊方式 center(默認) left right
valign 屬性定義表格標題的垂直對齊方式 top(默認) millde bottom
示例: <CAPTION valign=bottom align=right>建立表</CAPTION>
<th>...</th> 表格的表頭(指表格的第一行,文字以居中加粗顯示)
algin
valgin
bgcolor
background
bordercolor
bordercolorlight
bordercolordark
width
height
<tr>...</tr> 行標記
algin
valgin
bgcolor
background
bordercolor
bordercolorlight
bordercolordark
<td>...</td> 列標記
algin
valgin
bgcolor
background
bordercolor
bordercolorlight
bordercolordark
width
height
rowspan跨行屬性 示例:<TD rowspan=3>J2EE框架</TD>
colspan跨列屬性 <TD colspan=3>
8.表單 是實現動態網頁的一種主要外在形式
表單的主要功能是收集信息,瀏覽者的信息
過程爲:輸入的數據提交給服務器 由服務器的相關程序進行處理
表單標記<form>
屬性 表單的名字 name
表單的傳送方法 method(get默認 post)
用來定義表單處理程序的位置 action
<FORM action="http://mysite.com/processform" METHOD="post">
...表單內容...
</FORM>
其中,Method屬性中,Get方法時將表單內容附加在URL地址後面,因此對提交信息的長度進行了限制,最多不能夠超過8192個字符,若是信息太長,將被截去,從而致使意想不到的處理結果.同時Get方法不具備保密性,不是於處理如信用卡卡號等要求保密的內容,並且補農傳送非ASCII碼的字符.
Post方法是將用戶在表單中填寫的數據包含在表單主體中,一塊兒傳送到服務器商的處理程序中,該方法沒有字符的限制,它包含了ISO10646的字符集,是一種郵寄方式,在瀏覽器的地址欄不顯示提交的信息,這中方式傳送的數據是沒有限制的.當不指明方式時,默認爲Get方式.
<form>標記中能夠包含如下四個標記
<input>表單輸入標記
<select>菜單和列表標記
<option>菜單和列表項目標記
<textarea>文本域標記
<input>表單輸入標記
屬性 name:域的名稱
Type:域的類型 text 文字域
password 密碼域
file 文件域
checkbox 複選框
radio 單選框
button 普通按紐
submit 提交按紐
reset 重置按紐
Hidden 隱藏域
Image 圖象域(圖象提交按鈕)
text 文字域
屬性 name 文字域的名字
maxlength 文字域的最大輸入字符數
size 文字域的寬度
value 文字域的默認值
<INPUT TYPE="TEXT" NAME="RESULT_TextField-6" SIZE="30" MAXLENGTH="30" value=請在這裏輸入值>
password 密碼域
<INPUT TYPE="password" NAME="RESULT_TextField-6" SIZE="30" MAXLENGTH="30" value=請在這裏輸入值>
file 文件域 好比郵件的附件功能 招聘時上傳照片
<input type=file name=File>
checkbox 複選框 從若干選項中選擇多個
<INPUT TYPE="CHECKBOX" NAME="RESULT_CheckBox-0" VALUE="CheckBox-0">股票
<INPUT TYPE="CHECKBOX" NAME="RESULT_CheckBox-1" VALUE="CheckBox-1">期權
<INPUT TYPE="CHECKBOX" NAME="RESULT_CheckBox-2" VALUE="CheckBox-2">互惠基金
屬性 checked 表示被默認選種
value 表示選種後傳到服務器的值
<INPUT TYPE="password" NAME="RESULT_TextField-6" SIZE="30" MAXLENGTH="30" value=請在這裏輸入值>
<input type=file name=File>
<P> <INPUT TYPE="CHECKBOX" NAME="RESULT_CheckBox-4" VALUE="CheckBox-0" checked>股票
<INPUT TYPE="CHECKBOX" NAME="RESULT_CheckBox-4" VALUE="CheckBox-1">期權
<INPUT TYPE="CHECKBOX" NAME="RESULT_CheckBox-4" VALUE="CheckBox-2">互惠基金<BR></p>
radio 單選框
<INPUT TYPE="RADIO" NAME="RESULT_RadioButton-0" VALUE="Radio0">新手
<INPUT TYPE="RADIO" NAME="RESULT_RadioButton-1" VALUE="Radio-1">中級
<INPUT TYPE="RADIO" NAME="RESULT_RadioButton-2" VALUE="Radio-2">專家
屬性 checked 表示被默認選種
value 表示選種後傳到服務器的值
<p> <INPUT TYPE="RADIO" NAME="RESULT_RadioButton-3" VALUE="Radio-0" checked >新手
<INPUT TYPE="RADIO" NAME="RESULT_RadioButton-3" VALUE="Radio-1">中級
<INPUT TYPE="RADIO" NAME="RESULT_RadioButton-3" VALUE="Radio-2">專家</p>
button 普通按紐 主要配合javascript腳原本進行表單的處理
屬性 value 表示按紐上的文字
<input type=button value=按鈕>
submit 提交按紐
<INPUT TYPE="SUBMIT" NAME="submit1" VALUE="提交">
reset 重置按紐 能夠清除表單的內容
<HTML>
<HEAD> <TITLE>表單示例</TITLE></HEAD>
<BODY bgColor="#ffffcc" Text="#000099">
<FORM ACTION="http://www.mysite.com/FormSite" METHOD="POST">
<B><H2 align="left">證券調查示例</H2></B>
<p><B>投資經驗</B></p>
<p> <INPUT TYPE="RADIO" NAME="RESULT_RadioButton-3" VALUE="Radio-0">新手
<INPUT TYPE="RADIO" NAME="RESULT_RadioButton-3" VALUE="Radio-1">中級
<INPUT TYPE="RADIO" NAME="RESULT_RadioButton-3" VALUE="Radio-2">專家</p>
<p><B>投資類型</B></P>
<P> <INPUT TYPE="CHECKBOX" NAME="RESULT_CheckBox-4" VALUE="CheckBox-0">股票
<INPUT TYPE="CHECKBOX" NAME="RESULT_CheckBox-4" VALUE="CheckBox-1">期權
<INPUT TYPE="CHECKBOX" NAME="RESULT_CheckBox-4" VALUE="CheckBox-2">互惠基金<BR></p>
<p><B>今年選擇什麼證券？</B></P>
<P> <INPUT TYPE="TEXT" NAME="RESULT_TextField-6" SIZE="30" MAXLENGTH="30"></p>
<p>
<INPUT TYPE="SUBMIT" NAME="submit1" VALUE="提交">
<INPUT TYPE="RESET" NAME="reset1" VALUE="重置"></p>
</FORM>
</BODY>
</HTML>
Image 圖象域(圖象提交按鈕) 指能夠用在提交按紐位置上圖片
這幅圖片具有按紐的功能
<input type=image name=Image src=酷吧.gif>
Hidden 隱藏域 在頁面中對用戶是不可見的
使用它的目的在於收集或發送信息以利於被處理表單的 程序使用
菜單和列表標記<select> <option>
是爲了節省網頁的空間而產生
屬性 name :菜單和列表的名稱
size :顯示列表的數目
value : 選項值
selected: 默認選項
multiple:列表中的項目多選
<SELECT NAME="RESULT_RadioButton-5">
<OPTION value="網上交易" multiple>1)網上交易</OPTION>
<OPTION value="電話交易">2)電話交易</OPTION>
<OPTION value="經紀人代理" selected>3)經紀人代理</OPTION>
<OPTION value="其餘">4)其餘</OPTION>
</SELECT>
文字域標記<textarea> 能夠在其中輸入多行的文本
屬性 name文字域名稱
rows文字域行數
cols文字域列數
value 文字域的默認值
<TEXTAREA NAME="RESULT_TextArea-8" ROWS="7" COLS="20"></TEXTAREA>
行會自動添加 列是固定不變的
9.框架
左右分割窗口的屬性cols
<HTML>
<HEAD>
<TITLE>嵌套框架</TITLE>
</HEAD>
<FRAMESET cols="33%, 33%, 34%">
<FRAME src = " 酷吧.gif">
<FRAMESET rows="40%, 50%">
<FRAME src = "2439.gif">
<FRAME src = "2439.gif">
</FRAMESET>
<FRAME src = "酷吧.gif">
</FRAMESET>
</HTML>
上下分割窗口的屬性rows
<HTML>
<HEAD>
<TITLE>嵌套框架</TITLE>
</HEAD>
<FRAMESET rows="33%, 33%,*">
<FRAME src = " 酷吧.gif">
<FRAMESET rows="40%, 50%">
<FRAME src = "2439.gif">
<FRAME src = "2439.gif">
</FRAMESET>
<FRAME src = "酷吧.gif">
</FRAMESET>
</HTML>
在使用了框架集的頁面中,頁面的body被frameset所取代 而後經過frame標記定義每一個框架
*表示剩下的部分
framespacing 設置框架邊框寬度屬性
bordercolor 設置框架邊框顏色屬性
<HTML>
<HEAD>
<TITLE>嵌套框架</TITLE>
</HEAD>
<FRAMESET cols="20%, 80%" framespacing=15 bordercolor=red>
<FRAME src = " 酷吧.gif">
<FRAMESET rows="40%, 50%">
<FRAME src = "2439.gif">
<FRAME src = "2439.gif">
</FRAMESET>
<FRAME src = "酷吧.gif">
</FRAMESET>
</HTML>
<frame>經過它能夠定義框架頁面的內容 如:<frame src=test.html>
name:框架名稱屬性 <frame src=test.html name="right">
frameborder 框架邊框顯示屬性 0不顯示邊框 1顯示邊框
可用於 <frame> <FRAMESET>
scrolling框架滾動條顯示屬性 yes 顯示滾動條
no 不顯示滾動條
auto 根據頁面的長度自動判斷是否顯示滾動條
如:<frame src=test.html scrolling=no>
<frame src=test.html scrolling=auto>
noresize 表明禁止改變框架的尺寸大小
如:<frame src=test.html noresize>
marginwidth 邊框邊緣寬度屬性 好比文字與圖片與框架邊框的寬度距離
如:<frame src=test.html marginwidth=40>
marginheight 邊框邊緣高度屬性 好比文字與圖片與框架邊框的高度距離
如:<frame src=test.html marginheight=40>
<noframes>標記表示不支持框架技術 對於較底的IE版本而言
<HTML>
<HEAD>
<TITLE>嵌套框架</TITLE>
</HEAD>
<FRAMESET cols="20%, 80%" bordercolor=red>
<FRAME src = " 酷吧.gif" marginwidth=40>
<FRAME src = "酷吧.gif" marginheight=40>
</FRAMESET>
<noframes>
對不起,您的瀏覽器不支持框架
</noframes>
</HTML>
<iframe> 浮動框架 在瀏覽器中能夠嵌套子窗口,在其中顯示頁面的內容
<HTML>
<HEAD>
<TITLE>嵌套框架</TITLE>
</HEAD>
<body>
<iframe src=" 酷吧.gif" width=400 height=300 name="iframe" align=center>
</iframe>
</body>
</HTML>
10.多媒體頁面
<marquee>滾動文字標記
<HTML>
<HEAD>
<TITLE>學習 HTML</TITLE>
</HEAD>
<BODY>
<marquee>你好,歡迎您的光臨!!!</marquee>
</body>
</HTML>
滾動方向屬性 direction (up down left right)
<HTML>
<HEAD>
<TITLE>學習 HTML</TITLE>
</HEAD>
<BODY>
<marquee direction =up>你好,歡迎您的光臨!!!</marquee>
<marquee direction =down>你好,歡迎您的光臨!!!</marquee>
<marquee direction =left>你好,歡迎您的光臨!!!</marquee>
<marquee direction =right>你好,歡迎您的光臨!!!</marquee>
</body>
</HTML>
滾動方式屬性 behavior scroll:循環往復 slide:只進行一次滾動
alternate:交替進行滾動
<HTML>
<HEAD>
<TITLE>學習 HTML</TITLE>
</HEAD>
<BODY>
<marquee behavior =scroll>你好,歡迎您的光臨!!!</marquee>
<br><br>
<marquee behavior =slide>你好,歡迎您的光臨!!!</marquee>
<br><br>
<marquee behavior =alternate>你好,歡迎您的光臨!!!</marquee>
</body>
</HTML>
滾動速度屬性 scrollamount
<HTML>
<HEAD>
<TITLE>學習 HTML</TITLE>
</HEAD>
<BODY>
<marquee behavior =scroll scrollamount=30>你好,歡迎您的光臨!!!</marquee>
<br><br>
<marquee behavior =slide>你好,歡迎您的光臨!!!</marquee>
<br><br>
<marquee behavior =altenate>你好,歡迎您的光臨!!!</marquee>
</body>
</HTML>
滾動延遲屬性 scrolldelay 500 等於0.5秒
<HTML>
<HEAD>
<TITLE>學習 HTML</TITLE>
</HEAD>
<BODY>
<marquee behavior =scroll scrolldelay=500 >你好,歡迎您的光臨!!!</marquee>
<br><br>
<marquee behavior =slide>你好,歡迎您的光臨!!!</marquee>
<br><br>
<marquee behavior =altenate>你好,歡迎您的光臨!!!</marquee>
</body>
</HTML>
滾動循環屬性 loop
滾動範圍屬性 width height
<HTML>
<HEAD>
<TITLE>學習 HTML</TITLE>
</HEAD>
<BODY>
<marquee behavior =scroll width=200 height=60 >你好,歡迎您的光臨!!! </marquee>
<br><br>
<marquee behavior =slide>你好,歡迎您的光臨!!!</marquee>
<br><br>
<marquee behavior =altenate>你好,歡迎您的光臨!!!</marquee>
</body>
</HTML>
嵌入多媒體內容
mp3:是MPEG Layer3 的簡稱
<HTML>
<HEAD>
<TITLE>插入聲音</TITLE>
</HEAD>
<BODY>
<H1><FONT SIZE=3 COLOR=FORESTGREEN><B>插入聲音</B></FONT></H1>
<HR>
<EMBED ALIGN=CENTER WIDTH="200" HEIGHT="200" SRC="lene.mp3" AUTOSTART="TRUE">
</BODY>
</HTML>
<bgsound>背景音樂標記 當打開頁面後自動播放
<HTML>
<HEAD>
<TITLE>插入聲音</TITLE>
</HEAD>
<BODY>
<H1><FONT SIZE=3 COLOR=FORESTGREEN><B>插入聲音</B></FONT></H1>
<HR>
<bgsound SRC="lene.mp3">
</BODY>
</HTML>
loop 背景音樂循環次數
<HTML>
<HEAD>
<TITLE>插入聲音</TITLE>
</HEAD>
<BODY>
<H1><FONT SIZE=3 COLOR=FORESTGREEN><B>插入聲音</B></FONT></H1>
<HR>
<bgsound SRC="lene.mp3" loop=10>
</BODY>
</HTML>
javascript
- 1. HTML總結
- 2. HTML的總結
- 3. HTML DOM總結
- 4. html總結
- 5. HTML總結篇
- 6. 【HTML】總結
- 7. HTML CSS總結
- 8. html+css總結
- 9. HTML+CSS：總結
- 10. HTML+CSS總結
- 更多相關文章...
- • Docker 資源彙總 - Docker教程
- • XML 總結 下一步學習什麼呢？ - XML 教程
- • 算法總結-雙指針
- • 算法總結-回溯法
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. HTML總結
- 2. HTML的總結
- 3. HTML DOM總結
- 4. html總結
- 5. HTML總結篇
- 6. 【HTML】總結
- 7. HTML CSS總結
- 8. html+css總結
- 9. HTML+CSS：總結
- 10. HTML+CSS總結