1.BODY
正文標記符<BODY>和</BODY>包含Web 頁的內容。文字、圖形、鏈接以及其他HTML元素都位于該標記符內。注意:空格、回車這些格式控制在顯示時都不起作用,如要使它們起作用,應使用預格式化元素<PRE>和</PRE>。
插入背景圖片:<BODY BACKGROUND="image.gif">
插入音樂head:<BGSOUND src="soundfileURL">
2.字符格式 FONT
所謂字符格式是指針對段落中的部分文字(一個或一組文字,也可以是整個段落的文字)所設置的格式,通常包括字體、字號、文字顏色。
FONT標記符具有3個常用的屬性: SIZE 設置字體大小、COLOR 設置字體顏色、FACE設置字體樣式。
3.標題樣式 Hn
在HTML中,用戶可以通過Hn標記符來標識文檔中的標題和副標題,其中n是1至6的數字;H1表示最大的標題,H6表示最小的標題。使用標題樣式必須使用結束標記符。
4.添加水平線 HR
添加水平線的標記符為HR,它包括以下屬性: SIZE 屬性用來改變水平線的粗細, WIDTH 屬性用來更改水平線的長度,NOSHADE 屬性使水平線以實線顯示, COLOR屬性可以控制水平線的顏色。
5.ALIGN屬性
ALIGN 屬性用于設置段落的對齊格式,其值包括:RIGHT(右對齊)、LEFT(左對齊)、CENTER(居中對齊)和 JUSTIFY(兩端對齊)。ALIGN 屬性可應用于多種標記符,最典型的是應用于 P、DIV、Hn(標題標記符)、HR 等。
6.有序列表 OL LI
有序列表(Ordered list)也稱數字式列表,它是一種在表的各項前顯示有數字或字母的縮排列表。 定義有序列表需要使用有序列表標記符<OL></OL>和列表項(List item)標記符<LI></<LI>(結束標記符可省略)。OL 標記符最常用的屬性type,用來設置數字序列樣式。取值為:1、A、a、I、i。
7.無序列表 UL LI
無序列表(Unordered list)也稱強調式列表,它是一種在表的各項前顯示有特殊項目符號的縮排列表。 定義無序列表需要使用無序列表標記符<UL></UL>和列表項(List item)標記符<LI></LI>(結束標記符可省略)。
8.IMG 標記符
- src 屬性用于指定要插入的圖像的文件名(包括路徑)
- alt 屬性表示圖像的簡單文本說明
- width 和 height 屬性指定圖像的顯示大小
- border 屬性指定圖像的邊框
- align屬性設置對齊方式
- hspace屬性設置水平方向的空白
- vspace屬性設置垂直方向的空白
二. 超鏈接
HTML(Hypertext Markup Language)超文本標記語言,它是一種規范,一種標準,它通過標記符(tag)來標記要顯示的網頁的各個部分。前面講述了ML標記語言部分,通常是一個網頁,這部分會講解超鏈接Hyperlink,通過超鏈接才能夠實現跳轉,構成完整的網頁。 1.URL URL(Universal Resources Locator)用于定位Web上的文檔信息。 一個 URL 包括 3 部分:協議、計算機地址、文件路徑。 協議://計算機/文件路徑
使用相對URL時,經常使用兩個與DOS類似的符號:句點(.)表示當前目錄雙重句點(..)表示當前目錄的上一級目錄。
2.超鏈接類型 根據超鏈接的目標文件不同,分為: - 網頁之間的超鏈接 - 頁面內的超鏈接 - 文件下載超鏈接 - Email超鏈接 - 空超鏈接 根據超鏈接源對象的不同,分為: - 文本超鏈接 - 圖像超鏈接(包括圖像映射) - 對象超鏈接(例如Flash、Java小程序) 根據超鏈接實現方式的不同,分為: - HTML超鏈接 - JavaScript超鏈接 - 對象超鏈接 3.創建超鏈接 A標記符用于創建超鏈接(結束標記不能省略),href 屬性指定超鏈接的目標文件。
內部網頁超鏈接:<a href=test.htm>link</a> 外部網頁超鏈接:<a href=http://www.microsoft.com>link</a> 注意:<a></a>之間是具體需要跳轉的內容(切勿丟失),設置超鏈接后會增加下劃線變藍。
注意:test.htm文件需要和源文件放在同一目錄下,同時如果想彈出新的網頁,則添加target屬性,如下: <a target="_blank">Visit CSDN</a> 詳見:http://www.w3school.com.cn/tags/tag_a.asp 如果希望圖片作為跳轉目錄,參考W3School例子:
4.錨點鏈接 使用頁面內的超鏈接,首先需要定義錨點,然后在超鏈接中指向該錨點。 定義錨點應使用<a name=xxx></a> 指向錨點的超鏈接為:<a href=#錨點名稱>link</a> 指向其他頁面內錨點的超鏈接:
<a href = 頁面的URL#該文件中的錨點>link</a> <a href= # >blank link</a>
<html>
<body>
<p>
<a href="#C6">查看 Chapter 6。</a>
</p>
<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 4</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>
<h2><a name="C6">Chapter 6</a></h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 7</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 8</h2>
<p>This chapter explains ba bla bla</p>
</body>
</html>
運行結果如下圖所示,點擊超鏈接跳轉到第6章節。
百度百科的目錄鏈接或CSDN的標題通常都是使用該方法實現。
5.超鏈接的顯示效果 在偽類和偽對象中,與超鏈接相關的四個偽類選擇器應用比較廣泛。 - a:link 定義超鏈接的默認樣式 - a:visited 定義超鏈接被訪問后的樣式 - a:hover 定義鼠標經過超鏈接的樣式 - a:active 定義超鏈接被激活時的樣式,如鼠標單擊之后,到鼠標被松開之間的這段時間的樣式 超鏈接的四種狀態樣式的排列順序是有要求的,一般不能隨意調換。先后順序應該是:link、visited、hover、active 超鏈接的四種狀態并非都必須要定義,可以定義其中的兩個或三個。 下劃線是超鏈接的基本樣式,但是很多網站并不喜歡使用,所以在建站之初,就徹底清除了所有超鏈接的下劃線: a{text-decoration:none;}。 下面舉個簡單的CSS例子,后面會詳細介紹CSS,也是難點。
<html>
<head>
<style type="text/css">
A {
FONT-SIZE: 16px; FONT-FAMILY: 宋體
}
A:link {
COLOR: #0055bb; TEXT-DECORATION: none
}
A:visited {
COLOR: #0077bb; TEXT-DECORATION: none
}
A:hover {
COLOR: green; FONT-FAMILY: 楷體; FONT-SIZE: 20
}
P {COLOR: red}
</style>
<title>第一個HTML代碼</title>
</head>
<body>
<P>CSS設置超鏈接樣式<BR /></P>
<A target="_blank"> Eastmount CSDN </A>
</body>
</html>
運行結果如下圖所示,沒有下劃線,同時懸停變化。[圖片上傳中。。。(1)]
6.Email鏈接 <a href=mailto:i@email.com>Email</a>
控制命令:
?subject= 設置信件主題
?cc= 設置抄送人
?bcc= 設置密件抄送人 & 組合多個控制命令