HTML基礎知識：HTML文檔的基本概念_第1頁
HTML基礎知識：HTML文檔的基本概念_第2頁
HTML基礎知識：HTML文檔的基本概念_第3頁
HTML基礎知識：HTML文檔的基本概念_第4頁
HTML基礎知識：HTML文檔的基本概念_第5頁
已閱讀5頁，還剩32頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

HTML基礎知識：HTML文檔的基本概念

下面我們先來了解一下HTML文檔中的一些基本概念。

1.1.1標記（標簽）

HTML文件是以各種功能的元素所組成的，用于描述這些功能元素的符號稱

為“標記”，或者稱為“標簽”。如〈HTML〉、〈BODY〉、〈TABLE》等。

標簽在使用時必須用尖括號“〈>”括起來，而且大部分是成對出現，無斜

杠的標簽表示該標簽的作用開始，有斜杠的標簽表示該標簽的作用結束。如

<TABLE>表示??個表格的開始，〈/TABLE》表示一個表格的結束。

在HTML中，標簽的大小寫作用相同，如〈TABLE》和〈table》都是表示一個表

格的開始。其實，這些標簽名稱大都為相應的英文單詞首字母和縮寫，非常容易

記憶。

1.1.2特殊字符

由于尖括號和英文雙引號被用來提示HTML的標簽及參數值，那么在網頁中

要顯示尖括號和英文引號只能用其他符號來代替，下面是常見特殊字符所代表的

正常字符。

表1-1HTML特殊字符

書寫內容對應字符

<<

>>

〃

"

&&

 空格

1.1.3語法

一個標簽，為了明確它的功能，往往用一些屬性參數來描述，對這些屬性參

數的規(guī)定就是所謂的語法。

基本的語法格式為：〈標簽名稱屬性名=〃屬性值〃……>

例如：<palign二〃left"class=“type”>

1.1.4元素

元素是HTML文件中的一種基本結構單位，一對起始標簽和終止標簽以及它

們之間的所有內容稱為一個元素，元素能獨立體現一種頁面效果或者實現利功

能。從這個定義可以看出，上面的<p>即是一個元素，它定義了后面段落的基本

格式。我們可以把元素看作是一個功能模塊。

1.2HTML文檔的基本結構

1.2.1聲明為HTML文件

在每一個HTML文件的開始，必須加上〈HTML〉標簽，用來聲明以下的文件屬

于HTML文件，以便瀏覽器辨認。同時，要在文件結尾加上終止標簽〈/HTML〉，以

聲明這個HTML文件的結束。

例如：

<html>

<head>

<title>...</title>

</head>

<body>

文件正文體

</body>

</html>

1.2.2文件頭聲明

語法格式：<head>...</head>

從〈head》起始標簽到</head>終止標簽，里面所有的文字都屬于HTML文件的

文件頭，并不屬于文件正文體。所以，之間的一切文字都是對下面HTML文件的

說明。后面將要提到的文件標題〈title>，以及動態(tài)文件鏈接和動態(tài)文字排列標

簽等文件定義標簽<meta>,或者是JavaScript的程序代碼都是放在文件頭聲明

里，因為它們都不屬于HTML文件的正文體，也就是說它們不是HTML的內容，只

是定義這份文件需要特殊處理的一些聲明。

例如：<head>

<title>...</title>

</head>

1.2.3文件注解

語法格式：<!—文件注解—>

和其他所有程序語言一樣，為了讓自己或者他人在將來修改、維護網頁時方

便閱讀和理解，一般可以在HTML文件里加上注解，提醒自己或者他人，文件的

內容是什么用途、意義以及大體的編寫思路。

例如：

<!——********——>

<!一示例一》

<!一這是文件注解標簽一>

1.2.4文件標題

語法格式：<title>...</title>

這個標簽用于說明這份HTML文件的標題，說明這個頁面的內容主題。在起

始和終止標簽內填入主題后，用瀏覽器觀看這個頁面的時候，相對應的主題內容

就會顯示在瀏覽器最上方的標題欄內。

例如：〈title》這是我的網頁</title>

注意：〈title》標簽內的文字，還會在前臺用戶選擇〃添加到收藏夾"時，自

動顯示在彈出對話框中的〃名稱”一欄里。如圖所示。

圖1-1〈title〉標簽的功能之一

1.2.5聲明文件主體

語法格式:<body>...</body>

在這兩個起始和終止標簽之間的內容就是HTML文件的主體，是當前HTML

文件的核心所在。這里僅以基本文字的輸出為例，后面的課程將會作詳細介紹。

例如：

<body>

這是我編寫的第一個HTML文件!!!

</body>

注意：當編寫完源文件時，保存文件的擴展名以htm或html為后綴，建議

大家使用后綴為html為文件的擴展名。

1.3HTML文檔的基本單位

在編輯HTML文件的時候，將會涉及到對各種對象屬性的賦值，例如，定義

標題的內容、定義文本的格式、定義圖像的位置、定義水平線和表格的長寬、定

義文字和背景的顏色、定義鏈接的指向位置等等。我們通常用各種數據來這這些

屬性賦值。

在我們用來定義對象屬性的各種數據中，我們可以有很大的自由度來選擇和

定制，例如我們可以把標題定義為一段文字，也能是一段字母、數字或者標點符

號。但有一些數據，不僅在編寫的許多場合要用到它們，而且它們的表示方法、

代表的含義都有一套比較嚴格的規(guī)則，如果使用錯誤將導致最終結果出現錯誤。

下面是幾種通用性強、使用范圍廣同時又具有嚴格定義的數據類型。

1.3.1長度單位

長度單位可以用來定義水平線、表格邊框、圖像等對象的長、寬、高等一系

列屬性，同時也能用來定義這些對象在頁面上的位置等屬性，用來描述頁面上可

能涉及的各種長度。

長度的表示有兩種方式：絕對長度和相對長度。它們的單位分別為像素和百

分比，像素代表屏幕上的每個點，而相對長度代表描述對象占瀏覽器窗口的比例。

一般在網頁設計中較少使用絕對長度。因為瀏覽器窗口可隨時調整大小，如果

設置為約對長度很容易造成水平線不協(xié)調，而使用相對長度來描述對象則會隨瀏

覽器窗口大小變化，適應窗口的改變。

下面，我們就以水平線的寬度定義為例，具體說明長度這個數據類型的兩種

表示方法在定義對象時的表達方式和效果。

絕對長度

例如：<hrwidth="400">

<hr>標簽是在頁面上建立水平線的標簽。width是水平線元素中的一種屬

性，用來表示水平線的寬度。這里的width=400即表示這個水平線的寬度為400

像素。

注意：在表示長度單位的時候，缺省的單位是像素。

相對長度

例如:<hrwidth="50%”>

這個例子中的width=50%表示這個水平線占據窗口或框架有效范圍的50%的

寬度。

在HTML文件中的兩條水平線分別用絕對長度和相對長度定義，在調整瀏覽

器窗口時，這兩條水平線有不同的表現。縮小瀏覽器窗口之后絕對長度的水平線

不會跟隨調整，將超過窗口的寬度。

1.3.2顏色單位

和長度單位一樣，顏色單位也是描述頁面表現形式中應用很廣泛的一種數據

類型。在制作頁面的過程中，需要能定義字體、頁面背景、表格背景甚至超鏈接

的顏色，通過利用顏色數據來定義這些對象的顏色屬性。顏色單位有三種表達的

方式，我們用定義文本的字體顏色屬性來說明顏色數據在定義對象時的各種表達

方式和效果。

十六進制顏色代碼

語法格式：SRRGGBB

十六進制的顏色代碼之前一定要有一個號，這種顏色代碼表現形式由

三個部分組成，其中前兩位數字代表紅色，中間兩位數字代表綠色，后面兩位數

字代表藍色。不同的取值決定了不同顏色的表現。它們的取值范圍為00—FF。

例如：＜fontcolor="#FF0000”＞紅色字體＜/font＞

十進制RGB碼

語法格式：RGB(RRR,GGG,BBB)

這個表達式的格式中，RGB表示后面括號里的3個數字分別是三種顏色的RGB

代碼，取值在0到255之間，其中第一個數字代表紅色，中間一個數字代表綠色,

后面一個數字代表藍色。每種取值決定了不同顏色的表現。

例如：＜fontcolor="rgb(255,0,0)”＞紅色字體〈/font》

注意：在實際中很少使用這種方式，一般都使用十六制顏色代碼。

直接顏色名稱

在這種形式的顏色代碼中可以直接使用顏色的英文名稱。

例如：＜fontcolor="red"＞紅色字體＜/font＞

由于在各種場合對顏色屬性的定義基本相同，后面的內容將不再對對象的顏

色屬性定義作詳細說明。大家在編寫HTML文件定義各種對象的顏色屬性時，除

了標簽不同之外，都可按上面的方法來實現。

1.3.3URL路徑

URL路徑是一種互聯(lián)網地址的表示法。在這個數據里可以包括以何種協(xié)議鏈

接、要鏈接到哪一個地址、鏈接地址的端口號以及服務器里文件的完整路徑和文

件名稱等信息。由于在互聯(lián)網中同時支持了多種協(xié)議，而且可以鏈接到不同目錄

下的不同文件甚至不同段落，所以無法再用傳統(tǒng)的IP地址或者域名表示地址信

息，只能用包含了眾多信息的URL來對地址和文件進行定位。

在HTML文件編寫過程中，當對互聯(lián)網地址或者文件的位置信息進行定義的

時候，都需要用URL路徑來表示，URL是一種常用的數據類型。

絕對路徑

絕對路徑是將服務器上磁盤驅動器名稱和完整的路徑都寫出來，同時也會表

現出磁盤上的目錄結構。

語法格式：<scheme>:<scheme_dependent_information>

其中,<scheme>是某種傳輸協(xié)議，如HTTP、FTP,而

<scheme_dependent_information》則是要鏈接的位置信息，包括服務器名稱、域

名、端口號和文件路徑等。在HTML文件中，文件路徑的表示方法又分為絕對路

徑和相對路徑兩種，可以方便的為我們定位所要鏈接的文件。

例如：

<ahref="http:〃/index.html"〉

<ahref=/，flie:///d:/website/index,html"〉

相對路徑

相對路徑則是相對于當前的HTML文檔所在目錄或站點根目錄的路徑。

語法格式：相對關系/部分路徑/文件名

根據相對路徑的參照點又分為“相對文檔的相對路徑"和''相對根目錄的相

對路徑”。

1、相對文檔的相對路徑

這種路徑的表現形式是根據目標文檔所在的目錄和當前文檔所在目錄之間

的關系的一種表現形式。符號“??/”表示上一級目錄，沒有的相對路徑

則表示當前目錄。

例如：當前文檔的路徑為：website/html/link/index,htm。我們要找到html

目錄下images文件夾中的logo.gifo在這個例子中，當前文檔是在link目錄

下，則表示回到link目錄的上一級目錄html目錄，因此這個路徑的表現

形式就是：

/images/logo.gif”

如果我們需要找website目錄下的images文件夾中的logo,gif,那個這個

路徑就是：

images/logo.gif”

2、相對根目錄的相對路徑

相對根目錄的相對路徑是根據目標文檔相對根目錄的關系的一種表現形式。

在這種表達式中的第一個字符是“/"，這個符號表示這個路徑是一個相對根目

錄的表達式。

例如：＜ahref="/html/link/index.html”＞

由于相對路徑的概念不容易理解，還希望大家在學習的過程中仔細體會。

一般來說，我們都把已經編寫好的主要的HTML文件以及與其相關的其他文

件放在同一個目錄和這個目錄的下級子目錄里，這樣對管理、修改和維護比較有

利。當發(fā)生整個網站系統(tǒng)的遷移時，因為所有的文件相對地址來表示，所以對這

些文件產生的影響很少，遷移和后續(xù)工作相對不容易出錯。因此，相對路徑應該

是我們普遍被采用的方式。

1.4HEAD部分

HEAD部分由標簽＜head＞＜/head》組成，是HTML文檔的首要部分，緊接在

＜html＞的開始標簽之后，在＜body＞標簽之前。在這一部分包含著頁面的一些重要

的設置信息。包含的元素如下：

表1-2BODY標簽包含的元素

元素名稱含義

title文檔標題

meta描述非HTML標準的一些文檔信息

link描述當前文檔與其他文檔之間的鏈接關系

base定義提交時默認的外部資源

script腳本程序內容

style樣式表內容

1.4.1TITLE元素

TITLE元素是HEAD部分的重要組成部分，它包含的內容將顯示在瀏覽器的

窗口標題欄中。如果沒有TITLE元素，瀏覽器標題欄將顯示本頁的文件名。

語法格式：〈title》文檔標題〈/title》

1.4.2META元素（附）

META元素提供一些非HTML標準的用戶不可見的信息。META元素通常用來為

搜索引擎定義頁面描述以及搜索關鍵字；或者是定義用戶瀏覽器上的Cookie,

還可以設置頁面使其可以根據我們定義的時間間隔新頁面。值得注意的是“META

標簽沒有結束標簽</META>”配對。

META標簽分兩大部分：HTTP標題信息(HTTP-EQUIV)和頁面描述信息(NAME)。

HTTP-EQUIV

HTTP-EQUIV類似于HTTP的頭部協(xié)議，它回應給瀏覽器一些有用的信息，以

幫助正確和精確地顯示網頁內容。常用的HTTP-EQUIV類型有：

1、Content-Type

說明：設定頁面使用的字符集，用以說明主頁制作所使用的文字語言，瀏覽

器會根據此來調用相應的字符集顯示網頁內容。

2、Refresh(刷新)

說明：讓網頁多長時間(秒)刷新自己，或在多長時間后讓網頁自動鏈接到

其它網頁。

例如：

<Metahttp-equiv="Refresh"Content="30”〉

<Metahttp-equiv="Refresh"Content="5;url=http:〃”>

注意：其中的5是指停留5秒鐘后自動刷新到URL網址

1.4.3LINK元素

LINK元素用于指定當前文檔和其他文檔之間的鏈接關系。一個最有用的也

是最常用的應用就是外部層疊樣式表的定位。

注意:很多網站如果你把她保存在收件夾中后，會發(fā)現它連帶著一個小圖標,

如果再次點擊進入之后還會發(fā)現地址欄中也有個小圖標?，F在只要在你的頁頭加

上這段話，就能輕松實現這一功能?！碙INK》用來將目前文件與其它URL作連結，

但不會有連結按鈕，用于<HEAD>標記間。

語法格式：<linkrel="描述"href="URL地址”>

屬性：rel說明兩個文檔之間的關系。

Href說明目標文檔名。

下面是一個利用link元素來指定一個外聯(lián)樣式表文件的例子：

<linkrel=z/StyleSheetz/href="style.css”〉

1.4.4BASE元素

使用<base>標簽最主要的原因，是為了確保文檔中所有的相對URL都可以被

分解成正確的文檔地址，即使在文檔本身被移動或重命名的情況下也可以正確解

析。

語法格式：<beashref="原始地址"target="目標窗口名稱”>

屬性href指定文檔中鏈接到的所有文件默認的URL地址。在base元素中指

定href的屬性，所有的相對路徑的前面都會加上href屬性中的值。

例如：我們在base元素中指定href的屬性為：http:〃www.crazytribe,net,

并且在文檔中有一個這樣的鏈接：

<ahref=z//”>〈img

src=http:〃/images/top,jpgalt="NLP網站“></a>

那么該鏈接指向的URL地址就是http://www.crazytribe,net/index,htm,

同時img元素的源文件也就是/images/logo.gif。

屬性target指定文檔中所有鏈接的默認打開窗口。該屬性最常見的應用是

在框架Frame頁中。

1.4.5SCRIPT元素

〈script》標簽是用來在頁面中插入腳本程序，代碼需要放置在起始和結束的

〈script》標簽之中。

語法格式：<scriptlanguage一腳本語言“〉

<!―JS代碼一》

</script>

language屬性用來指明腳本語言的種類。因為瀏覽器可以使用多種腳本語

言，所以必須指明語言的種類。

1.4.6STYLE元素

用來指定當前文檔的CSS層疊樣式表，它非常有用，而且功能靈活，讓你輕

松指定一些如字體、顏色、背景、邊界以及其他在body部分使用標簽特征。

語法格式：<styletype="text/css”>

樣式語句

</style>

1.5BODY部分

這一節(jié)我們講述HTML文檔中重要的一部分body部分，以及大部分body

部分中的HTML元素的語法及其各自的屬性，這其中主要包括：body元素、標題

元素、段落元素、無序列表元素、有序列表元素、鏈接元素以及圖像元素等等。

可以說，掌握了這部分內容，我們就能編寫出一個具備基本要素的web頁面了。

1.5.1BODY元素

在開始編寫具體內容之前，我們需要對頁面進行一個整體的基本規(guī)劃和設

置，例如頁面的背景顏色、背景圖案、頁面留白以及大部分文字的顏色等等。在

HTML中，我們使用<body>元素來定義頁面的這些基本屬性。

語法格式：

<bodybgcolor=，///background*'"text=""leftmargin=""topmargin="

1.1〃〃-I?1〃〃1.1〃〃、

link=alink=vlink=>

</body>

在body元素的屬性中可以分為三類，第一類為背景屬性，包括bgcolor和

background；第二類為文字屬性，包括text、link>alink和vlink；第三類為

留白屬性，包括leftmargin和topmargino

表1-4BODY元素的屬性

屬性名稱含義

bgcolor指定頁面的背景色（顏色值）

background指定頁面的背景圖案（圖片平鋪）（URL值）

text非鏈接文字的顏色（顏色值）

link可鏈接文字的顏色（顏色值）

alink正被點擊的可鏈接文字的顏色（顏色值）

vlink已經點擊（訪問）過的可鏈接文字的顏色（顏色值）

leftmargin頁面左側的留白（長度單位）

topmargin頁面頂部的留白（長度單位）

1.5.2標題元素

一般文件中會有標題，包括主標題、次標題、副標題等形式。我們在編寫

HTML文件的時候，同樣需要考慮把標題突出，讓人可以馬上看到標題并被標題

所吸引。在HTML文件中，可以利用字體大小的變化來達到這個效果，一共有6

類標題的標簽。

語法格式：＜hxalign=""＞標題內容＜/hx〉

其中：x的取值為1至6之間的一個數字。

表1-5標題元素的屬性

屬性名稱含義

align指定標題元素中文字的對齊方式（默認值left）

可選值:leftcenter|right

1.5.3段落元素

段落元素用來描述一一個段落,在表現形式上,兩個段落之間會插入一個空行。

當我們想對整個文檔進行整體設置時，可以利用段落標簽的屬性對整個段落的基

本排版形式進行調整。

語法格式：＜palign=""＞...＜/p＞

表1-6段落元素的屬性

屬性名稱含義

align指定段落元素中文字的對齊方式（默認值left）

可選值：leftcenterright

1.5.4換行標簽

換行標簽＜br〉是個單一的標簽，不需要終止標簽。這個標簽可以用來控制文

字的換行，是對文字編排的基本標簽。

語法格式：＜br＞

1.5.5不換行標簽

在不換行標簽＜nobr＞和〈/nobr＞之間的文字將不會根據瀏覽器的窗口大小而

自動換行，而是一直延伸下去。當窗口寬度不夠顯示文字內容的時候，可利用水

平滾動條來瀏覽整個文件的內容。

語法格式：＜nobr＞...＜/nobr＞

在通常情況下，如果我們不對文字的排版加以控制，文本將會根據瀏覽器窗

口寬度的變化自動換行，自動適應窗口變化達到默認的顯示效果。而如果使用了

＜nobf＞標簽后，文本將不會自動換行，將一直延伸下去。這時，我們看到瀏覽器

窗口下方自動出現水平滾動條，可以通過拖動滾動條瀏覽所有內容。

1.5.6預格式化元素

在對文本的處理中，我們通常會遇到縮進、間隔等一些需要空白的地方，但

是瀏覽器對這些處理的控制上不夠靈活，在很多情況下就無法達到我們要求的效

果。這個問題就可以用預格式化標簽＜pre＞來解決。在〈pre＞和＜/pre＞之間的文本

在瀏覽器中生成的效果將會和我們編寫時制定的格式一樣。

語法格式：＜pre＞...＜/pre＞

例如：＜pre＞

這是第一行，

這是第二行，

這是第三行。

＜/pre＞

這時，瀏覽器中看到的效果就與源文件中的效果--樣。

1.5.7列表元素

當我們要表現的信息在頁面上是一條一條整齊出現的時候，就要使用到列表

標簽，它能很容易的讓這些信息美觀、明顯的出現在頁面上，并且可以使文章內

容看起來更富有條理。列表類元素可分為無序列表、有序列表以及自定義列表。

無序列表

無序列表就是在每一個列表項前面加上?、■、。等符號，所以又稱符號列

表。

語法格式：<ultype」"〉

<li>第一個列表項</li>

<li》第二個列表項</li>

</ul>

表1-7無序列表的屬性

屬性名稱含義

type指定無序列表項前的符號樣式。

可選值：disc（實心圓點，默認）

circle（空心圓點）

square（實心方塊）

有序列表

所謂的有序列表<。1>元素就是在每一個列表項的前面加上一個編號字符，這

個編號字符可以是阿拉伯數字也可以是英文字母。

語法格式：<oltype=""start="">

<li〉第一個列表項</li>

<li>第二個列表項</li>

</ol>

表1-8有序列表的屬性

屬性名稱含義

type指定列表項前面的編號字符。

可選值：1（數字編號，默認）

a（小寫英文字母，如a、b、c）

A（大寫英文字母，如A、B、C）

i（小寫羅馬字母，如i、ii,iii）

I（大寫羅馬字母，如I、H、III）

start指定編號的起始序號（必須是數字）

有序列表的起始序號隨著《。1〉元素中的type屬性的改變而改變，并且始終

是該字符中的第一個字符，如當type屬性的值為a時，那么列表序號的起始值

也就是a。但我們可以通過《。1〉元素的start屬性來改變列表項的起始序號，如

type屬性的值為a,而start屬性的值為2,那么該列表序號的起始值就是b。

自定義列表

自定義列表包括3個部分，＜dl〉稱為自定義列表標簽?！磀t＞用于標示自定義

條目，＜dd〉則用以標示自定義內容。

所謂自定義列表就是一種分兩層的項目列表，沒有符號及數字序號。三個標

簽都沒有常用的屬性。而＜dt＞、〈dd〉可以獨立使用，只是一些舊的瀏覽器并不支

持，如IE3.0。常用的如〈dd＞標簽可用以制造段落第一個字前面的空白。

語法格式：＜dl＞

＜dt〉第一個列表項〈/dt＞

＜dd＞第二個列表項＜/dd＞

＜/dl＞

1.5.8鏈接元素

前面我們已經講過HTML語言是一種描述性的標簽語言，那么HTML和其他的

標簽語言有什么區(qū)別？這里我們要介紹HTML中最為重要的一個概念--鏈接，鏈

接是之所以將HTML文檔稱為超文本以及交互式文檔的一個基本原因。

我們可以通過一個鏈接來調用另一個網絡資源，比如，一個圖像、-一段視頻

電影或者是一個HTML文檔。從某種意義上來說，鏈接是推動網絡蓬勃發(fā)展的一

個重要力量。

在HTML語言中使用＜aX/a＞這一對標簽來聲明一個鏈接元素。

語法格式：＜ahref="http:〃/"name="nlp"target」“

titlei”＞NLP培訓＜/a＞

href屬性

用來指定鏈接的目標地址，該屬性的值可以是一個URL地址也可以是一個鏈

接錨點。

語法格式：<ahref="http:〃/about/”〉張國維NLP培訓

</a>或者

<ahref="http:〃/news/404.劉文華資

本兵法</a〉

當href屬性的值為…個URL地址時，即該鏈接指向一個文檔之外的另一個

文件，我們稱之為“文檔外鏈接”；當href屬性的值為一個錨點時，那么該鏈

接則指向文檔內該錨點的所在位置，我們稱之為“文檔內鏈接”。

例如：<ahref="http:〃/nlp/”>中國首屆國際NLP大會

</a>

<ahref=/，/”>nlp網站</a>

name屬性

用于指定一個錨點的名稱。在上面我們已經提到了錨點的概念。所謂錨點，

指的是文檔中的某一個位置。

我們使用<a>元素的name屬性給文檔中的某一個位置命名，以便于建立一個

可以直接轉到該位置的鏈接。

語法格式：<aname="value"X/a〉

name屬性可以是一個任意形式的字符串。但我們在建立錨點的時候應該盡

量使用有意義的并且容易區(qū)分的名字作為錨點的名稱。

例如：<aname=，，tableElement//X/a>

鏈接到該錨點的鏈接則應該是：

<ahref="http:〃/news/366.html”>馮曉強商戰(zhàn)智

慧</a>

target屬性

用于指定鏈接的目標窗口，即點擊該鏈接時所打開的窗口。

語法格式：<ahref=/，/news/366.html"targeti”〉

馮曉強NLP</a>

表1-9target屬性的值

屬性值含義

_blank在新窗口中打開。

_self在當前窗口（或框架）中打開鏈接（默認值）。

_parent在當前窗口的父窗口（上級窗口）中打開鏈接，僅應用于框架頁面。

_top在最高級窗口中打開鏈接，僅應用于框架中，即去除窗口中的框架。

窗口框架的名稱在指定的窗口或框架中打開鏈接，如果指定名稱的窗口或框架不存

在，則新打開一個窗口，并定義為參數名稱。

title屬性

用于指定當鼠標移動到鏈接上時顯示的提示文字。Netscape瀏覽器不支持

該屬性。

語法格式：＜ahref="/"title="value”＞中

國NLP培訓學院＜/a＞

其中：value為長度小于255個字符的字符串。

在瀏覽器中查看并將鼠標移動到相應的鏈接上稍做停留，這時就會顯示一個

提示，提示的內容就是title屬性中的值。

1.5.9圖像元素

HTML文檔的另一個重要特點是能包含圖像文件。在HTML語言中使用＜img＞

元素將圖片引入到文檔中，＜img＞元素沒有結束標簽。

語法格式：

＜ahref="/images/nlp/wXimgsrc=〃

http://\?/images/nlp-dahui.gif〃alt=，，nlp大會〃width二〃〃

height=〃〃border=〃〃align=〃〃X/a＞

src屬性

用于指定圖片的路徑。目前得到廣泛應用的圖片文件格式有gif、jpg格式。

若圖片文件與該HTML文檔位于相同目錄，則只需寫上文件名稱，否則必須加上

正確的URL路徑，相對路徑或絕對路徑均可一。

例如：<imgsrc="http:〃/images/nlp-dahui.gif”

alt="中國NLP大會”>

alt屬性

用以描述該圖像，若使用不支持圖片的瀏覽器查看時，這些文字將會代替圖

片被顯示。若瀏覽器支持圖片，則當鼠標移到圖片上該文字也會顯示。

例如：<imgsrc="http:〃/images/nlp-dahui.gif"alt="

國際NLP大會”》

width屬性和height屬性

這兩個屬性分別指定圖片的寬度和高度。屬性的值一般采用像素作為長度單

位。如果不指定img元素的width屬性和height屬性，瀏覽器將自動判斷圖片

的寬度和高度并正確的顯示出來。不過，為了減少瀏覽器的解析時間，我們應該

提供正確的width屬性以及height屬性。

border屬性

該屬性用于定義圖片邊框的寬度，默認值為0。

例如：<imgsrc="/images/nlp-dahui.gif，z

border="2"alt="廣州NLP大會”>

align屬性

用來設置圖片旁邊文字的位置，你可以控制文字出現在圖片的偏上方、中間、

底部、左右等。

表ITOalign屬性的值

屬性值含義

top圖片和文字頂部對齊。

middle圖片和文字居中對齊。

bottom圖片和文字底邊對齊（默認值）。

left圖片居左對齊，文字沿圖片繞排。

right圖片居右對齊，文字沿圖片繞排。

absmiddle圖片對齊到目前文字行絕對中央。

absbottom圖片對齊到目前文字行絕對底部。

1.5.10文字的排版

一般我們制作的網頁都會有很多文字信息，有的網頁甚至基本上是以文字資

料為主。在這樣的頁面上，如果文字雜亂無章的排列，不僅讓觀看的人感到難以

入目，更重要的是會讓我們找不到想要的主要信息。而使用過文字處理軟件的人

都知道，經過精心編排的文字資料會產生一目了然的良好效果。由此我們可知對

頁面文本進行排版處理、對字體進行特效處理的重要性。

這一部分我們將介紹一些控制文字表現形式（如：字體、顏色等）的元素。

隨著層疊樣式表（CSS）的使用，這一元素已不再推薦使用，應盡量使用樣式表

來控制文字的顯示特性。

不換行空白

在瀏覽器中瀏覽HTML文檔時，瀏覽器根據單詞之間的留白來自動換行，并

且“HTML不支持兩個及兩個以上的空格”。因此HTML語言提供了一個不換行空

白的標簽“ "，這樣如果需要某幾個單詞之間不出現換行的話，我們就可

以在這些單詞之間使用這個不換行標簽來替代空格，并且也可以利用這個標簽來

建立兩個或兩個以上的空格效果。

文本結構元素

在一個文檔中，我們有時候需要用一些特殊的形式來表現某段文字的特殊意

義，比如加強某段文字的語氣，以提醒瀏覽者的注意力。在HTML中提供了這樣

一些元素來實現我們制作網頁時的需要。

1、em和strong元素

這兩個元素都是用來強調某一段文字的語氣，或者是用來指這段文字需要重

點注意。通常，em元素中的文字在瀏覽器中顯示的是一個“斜體的文字”，而

strong元素中的文字則使用的是“粗體的文字”。

例如：<em>斜體文字</em>

〈strong〉粗體文字〈/strong〉

2>blockquote元素

該元素通常用來說明該段文字是引用他人的作品，在瀏覽器中查看時，

blockquote元素中的文字會用一個“縮進”的形式表現出來。

語法格式：<blockquote>...</blockquote>

3、sup和sub元素

有時在網頁中我們會需要使用到一些特殊的字符，比如化學的分子式或者是

數學的表達式，這時我們就會需要用到這兩個元素。

例如：下標：H<sub>2</sub>0<br>

上標：a<sup>2</sup>+b<sup>2</sup>

Font元素

字體設置標簽用來對<font>和</font>之間的文字的字體屬性進行設置，如

文字的字體、顏色以及大小。

語法格式：<fontface=〃〃size二〃〃color=〃〃>

表1-11FONT元素的屬性

屬性名稱含義

face文字的字體名稱。

size文字大小，可選值為卜7,默認為3。

color文字的顏色。

例如：<fontface=〃幼圓〃size=〃5〃color=〃#0000ff〃>紅色的5號幼圓字

體</font>

在使用font元素的face屬性時一定要注意,必須使用系統(tǒng)默認安裝的字體。

水平線元素

在我們設計制作網頁的時候，通常需要利用水平線來區(qū)分頁面上不同的區(qū)

域，或者用水平線把不同主題的信息間隔開來。合理使用水平線不但能使頁面的

布局清晰合理，還能使頁面看起來美觀大方。在這一部分，我們將主要講解如何

在頁面上實現各種水平線的效果。

水平線標簽〈hr＞是個單■-標簽，沒有結束標簽。加入這個標簽將使頁面產生

一條相應的水平線。

語法格式：＜hrwidth=""align=""size=""color=""noshade＞

表1-12水平線元素的屬性

屬性名稱含義

width水平線的寬度，默認值為100機

align水平線的對齊方式，默認值為居中對齊（center）。

size水平線的厚度，默認值為2。

color水平線的顏色，該屬性NetScape不支持。

noshade無陰影效果，即實線。

字體樣式元素

在HTML中我們可以通過下列的元素來設置字體的樣式。

表1-13字體樣式元素

元素名稱含義

<b></b>字體加粗。

<i></i>斜體。

<u></u>下劃線。

<strike></strike>刪除線。

<big></big>字號加大。

<small></small>字號減小。

1.5.11層

在HTML語言中，層是一種十分常用的HTML元素。我們經?？梢栽诰W頁上看

到利用層達到的頁面效果。例如，有些網上商城頁面中的矩形框中的廣告浮標就

是使用了層。

要理解層的概念，首先簡要介紹一下〈div＞、＜span＞兩種HTML元素。＜div＞.

＜span＞元素是在HTML4.0中新加入的元素。其中＜div〉元素是“塊級元素”，它

的屬性和段落元素＜P＞類似，都可以定義頁面段落上的屬性，不同的是兩個＜div＞

元素之間不會產生像兩個＜p＞元素之間的空行。而＜span＞元素是“行內元素”，

我們使用該元素可以定義段落中部分文字的屬性。

層是可以疊加在其他頁面元素之上的，并且可以設定層的尺寸以及大小?？?/p>

是在HTML語言中，＜div＞、＜span＞元素沒有這樣的屬性。我們要使用CSS規(guī)范來

定義＜div＞、＜span＞元素的這些屬性。這些將在《CSS》一章做介紹。

語法格式：＜divalign=""style=""X/div＞

表1-14層元素的屬性

屬性名稱含義

align設置層中元素的水平對齊方式。

style設置元素應用css規(guī)范的屬性。

〈span〉和＜div＞元素的用法是基本相同的。但是有一點需要大家注意，雖然

大多數瀏覽器都支持〈span〉和〈div〉元素，但是不同的瀏覽器對同一種元素的解

釋可能會出現差異，＜div＞元素的兼容性比＜span＞元素要好，所以大家最好使用

＜div＞元素。

1.5.12FIELDSET元素

Fieldset元素是HTML4.0出現的標簽，主要用于構造一個類似于Swing是

的"TitledBorder”。

語法格式：

＜fieldsetstyle=""align="”...＞

＜legendstyle=""...＞

1234

＜/legend＞

</fieldset>

表1-15FIELDSET元素的屬性

屬性名稱含義

classcss類型

idid編號

langlanguage語言

languagejavascriptjscriptvbscriptvbs

stylecss樣式

title鼠標提示文本

eventscript

表1-16LEGEND元素的屬性

屬性名稱含義

aligncenterleftright

valignbottom|top

idid編號

langlanguage語言

languagejavascriptjscript!vbscriptvbs

stylecss樣式

title鼠標提示文本

eventscript

例如：<fieldsettitle="abc”>

<legendalign="center”>

title

</legend>

12345

</fieldset>

1.5.13MARQUEE元素

MARQUEE元素主要用于創(chuàng)建滾動字幕，它的默認寬度與其父元素的寬度相

等。如果MARQUEE位于沒有指定寬度的TD內，就需要明確指定MARQUEE的寬

度。如果MARQUEE和TD的寬度都沒有指定，那么滾動字幕就將限定于1個像

素寬。

要創(chuàng)建垂直滾動的字幕，請將其scrollLeft屬性設定為0。要創(chuàng)建水平滾

動的字幕，請將其scrollTop屬性設定為0,這將覆蓋任何腳本設置。

scrollLeft和scrollTop屬性當字幕滾動時為只讀。當不處于滾動狀態(tài)

時，scrollLeft對于設置為水平滾動的字幕來說為可讀寫，scrollTop對于設

置為垂直滾動的字幕來說為可讀寫。

語法格式：〈marquee）滾動內容</marquee>

表1-17MARQUEE元素的屬性

屬性名稱含義

direction滾動方向(leftrightupdown)

behavior移動方式。值：scroll（循環(huán)移動）、

slide（只移動一個回合）、alternate（來回移動）。

loop循環(huán)。若未指定則循環(huán)不止（infinite）,其值取數值。

scrollamount移動速度。值取正整數。數值越大，速度越快。

scrolldelay延時。數值。

bgcolor底色。

width和height移動的寬度與高度。

hspace水平空白

vspace垂直空白

align對齊方式(topmiddlebottom)

例如：

<marqueedirection=〃up〃>向上移動〈/marquee>

<marqueedirection=/，left，zbehavior二〃alternate”〉來回移動〈/marquee〉

<marqueedirection二〃left“behavior二〃slide〃>只移動一次〈/marquee)

<marqueeloop=〃3〃〉循環(huán)三次〈/marquee〉

<marqueescrollamount=〃25〃>移動速度〈/marquee〉

<marqueescrolIdelay=〃1000〃>設置延時〈/marquee)

<marqueebgcolor—pink〃>設置底色〈/marquee〉

<marqueewidth="200〃height-200〃bgcolor="pink〃direction二〃down〃>

設置寬高

</marquee>

<marqueeid二〃ml〃direction="right”

style二〃border-width:2px;border-style:solid;"width=〃200〃

height=〃200〃>

right

</marquee><br>

<button

onclick二〃alert('scrollLeft:，+ml.scrollLeft+，scrollRight+ml.scrollTo

P)〃>

Read

</button>

<buttononclick=，，ml.stop();ml.scrollLeft=190;z，>

Stop&SetscrollLeft=190

</button>

<buttononclick=z，ml.start();z，>Start</button>

我們在上面所舉的例子當中，marquee所移動的對象都是文字，但現實中所

有的可視對象，只要有足夠的區(qū)域，marquee都能令它們移動。

例如：

〈marqueedirection=〃up〃>

<inputtype="button"value二〃向上移動〃>向上移動

</marquee>

1.6表格

表格是HTML語言中最為復雜的一部分，也是應用最為廣泛的一個元素。

1.6.1TABLE元素

表格中所有行和列以及單元格中的內容必須包圍在一?對〈tableX/table>標

簽中。

語法格式：

<tablewidth=〃〃bgcolor=〃〃background二〃〃

border=cellspacing二〃〃

cellpadding="">

<tr>

<td>...</td>

</tr>

</table>

Width屬性

width屬性用于指定表格的寬度，在默認狀態(tài)下為自動適應表格內容的寬

度，即根據表格中的內容自動調節(jié)表格的寬度。取值可以是絕對長度或者相對長

度。

Bgcolor屬性和BackGround屬性

bgcolor屬性用來指定表格的背景顏色，在默認狀態(tài)下表格是沒有背景色

的。

background屬性用來指定表格的背景圖案。

Border屬性和BorderColor屬性

border屬性用于指定表格邊框的寬度，其默認值為0,即沒有邊框。

bordercolor屬性用于指定表格的邊框的顏色，在默認狀態(tài)下，表格的邊框

成3D的狀態(tài)。

CellSpacing屬性和CellPadding屬性

cellspacing屬性指定表格中單元格間的距離，即單元格間距。

cellpadding屬性指定表格中單元格的內容與單元格邊框之間的留白距離，

即單元格邊距。注意：這兩個屬性的值均為“長度單位”。

1.6.2TR元素

TR元素表示的是表格中的行，表格中的每一行都必須包含在一對<trX/tr〉

標簽中。

語法格式：<tralign-"bgcolor/”〉...</tr>

表1-18TR元素的屬性

屬性名稱含義

align指定該行單元格對齊方式,值：left（默認）、center、righto

bgcolor指定該行的背景顏色。

1.6.3TD元素

單元格是表格的基本組成元素，一個td元素就代表表格中的一個單元格，

由tr元素中的所有單元格就組成了一行。

語法格式：

<tdwidth=""height」“align=""valign=""bgcolor」“background*'"

rowspan=""colspan="”〉

</td>

Width屬性和Height屬性

我們可以用Width屬性和Height屬性來控制單元格的寬度和高度。在默認

狀態(tài)下，單元格是根據單元格的內容以及整個表格的寬度來自動調整的。

Align屬性和Valign屬性

align屬性用來控制單元格內容的水平對齊方式；valign屬性控制單元格內

容的垂直對齊方式。

表1-19align屬性和valign屬性

屬性名稱含義

align指定單元格水平對齊方式，值：left（默認）、center>right

valign指定單元格垂直對齊方式,值:middle（默認）、top、bottom

ColSpan屬性和RowSpan屬性

Colspan屬性指定當前單元格跨越列的數量，其默認值為E

Rowspan屬性指定當前單元格跨越行的數量，其默認值為1。

Bgcolor屬性和BackGround屬性

bgcolor屬性用來指定單元格的背景顏色。

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論