構(gòu)成網(wǎng)頁(yè)的基本元素
發(fā)布時(shí)間:2008-08-07 閱讀數(shù): 次 來(lái)源:網(wǎng)樂(lè)原科技
2.1標(biāo)題(TITLE)
Title元素是文件頭中唯一一個(gè)必須出現(xiàn)的元素,它也只能出現(xiàn)在文件頭中。title元素的格式為:
<title>文件標(biāo)題</title>
title標(biāo)明該html文件的標(biāo)題,是對(duì)文件內(nèi)容的概括。一個(gè)好的標(biāo)題應(yīng)該能使讀者從中判斷出該文件的大概內(nèi)容。文件的標(biāo)題一般不會(huì)顯示在文本窗口中,而以窗口的名稱顯示出來(lái)。除了標(biāo)識(shí)窗口外,當(dāng)將某一 homepage 存入書(shū)簽或文件時(shí),title還用作書(shū)簽名或缺省的文件名。
title的長(zhǎng)度沒(méi)有限制,但過(guò)長(zhǎng)的標(biāo)題會(huì)導(dǎo)致折行,一般情況下它的長(zhǎng)度不應(yīng)超過(guò)64個(gè)字符。由于title的作用是標(biāo)明文件內(nèi)容,所以太短的title也是不可取的,比如:introduction 這個(gè)標(biāo)題,讀者不可能根據(jù)它判斷出本文介紹的是什么。一個(gè)好的例子是:
<title> An Introduction to HTML </title>
在頭元素中還可以出現(xiàn)其他元素,如<isindex>,<meta>等等。這些元素都不是必須的,而且也不常用。 這些元素的用法和它們的含義可以參考有關(guān)文獻(xiàn)。
下面是一個(gè)最簡(jiǎn)單的html 文件
<html>
<title>the simplest html file</title>
This is my first html file.
</html>
§2.2 標(biāo)題(hn)
標(biāo)題元素有6種,分別為h1, h2,…h(huán)6,用于表示文章中的各種標(biāo)題。標(biāo)題號(hào)越小,字體越大。一般情況下,瀏覽器對(duì)標(biāo)題作如下解釋:
h1 黑體,特大字體,居中,上下各有兩行空行。
h2 黑體,大字體,上下各有一到兩行空行
h3 黑體(斜體),大字體,左端微縮進(jìn),上下空行
h4 黑體,普通字體,比h3更多縮進(jìn),上邊一空行
h5 黑體(斜體),與h4相同縮進(jìn),上邊一空行
h6 黑體,與正文有相同縮進(jìn),上邊一空行
Netscape 對(duì)hn的解釋為,一律黑體,字體越來(lái)越小。
hn可以有對(duì)齊屬性,align=#,#表示
left 標(biāo)題居左
center 標(biāo)題居中
right 標(biāo)題居右
例: <h2 align=center>Chapter 2 </h2>
<h1>標(biāo)題元素!</h1> 標(biāo)題元素!
<h2>標(biāo)題元素!</h2> 標(biāo)題元素!
<h3>標(biāo)題元素!</h3> 標(biāo)題元素!
<h4>標(biāo)題元素!</h4> 標(biāo)題元素!
<h5>標(biāo)題元素!</h5> 標(biāo)題元素!
<h6>標(biāo)題元素!</h6> 標(biāo)題元素!
§2.3 分段<P>
html的瀏覽器是基于窗口的,用戶可以隨時(shí)改變顯示區(qū)的大小,所以html將多個(gè)空格以及回車(chē)等效為一個(gè)空格,這是和絕大多數(shù)字處理器不同的。html的分段完全依賴于分段元素<P>。比如下面兩段源文件有相同的輸出。
<h2>This is a level Two Heading </h2>
paragraphy one <p>paragraph two <p>
… … … … … … … … … …
<h2>This Is a Level Two Heading</h2>
paragraph one <p>
paragraph Two <p>
<p>也可以有多種屬性,比較常用的屬性是:
aligh=# #可以是left,center,right,其含義同上文。
例 <p align=center>This is a centered paragraph </p>
當(dāng) html文件中有圖形,圖形可能占據(jù)了窗口的一端,圖形的周?chē)赡苓€有較大的空白區(qū)。這時(shí),不帶clear屬性的<p>可能會(huì)使文章的內(nèi)容顯示在該空白區(qū)內(nèi)。為確保下一段內(nèi)容顯示在圖形的下方,可使用clear屬性。clear屬性的含義為:
clear=left 下一段顯示在左邊界處空白的區(qū)域
clear=right 下一段顯示在右邊界處空白的區(qū)域
clear=all 下一段的左右兩邊都不許有別的內(nèi)容
§2.4 列表List
列表用于列舉事實(shí),常用的列表有3種格式,即無(wú)序列表(unordered List),有序列表(ordered list)和定義列表(definition list)
2.4.1 無(wú)序列表(ul)
無(wú)序列表用(ul)開(kāi)始,每一個(gè)列表?xiàng)l目用<li>引導(dǎo),最后是</ul>,注意列表?xiàng)l目不需要結(jié)尾標(biāo)注</Li>。輸出時(shí)每一列表?xiàng)l目縮進(jìn),并且以黑點(diǎn)標(biāo)示。
例 :
<ul>
<li>Today
<li>Tommorow
</ul>
輸出為
●Today
●Tommorow
2.4.2 有序列表<ol>
有序列表與無(wú)序列表相比,只是在輸出時(shí)列表?xiàng)l目用數(shù)字標(biāo)示,下面是一個(gè)例子及其輸出:
例:
<ol>
<li>Today
<li>Tommorow
</ol>
輸出為:
1.Today
2.Tommorow
2.4.3 定義列表<dl>
定義列表用于對(duì)列表?xiàng)l目進(jìn)行簡(jiǎn)短說(shuō)明的場(chǎng)合,用<dl>開(kāi)始,列表?xiàng)l目用<dt>引導(dǎo),它的說(shuō)明用<dd>引導(dǎo)。
<dl>
<dt>Item 1
<dd>The definition of item 1
<dt>Item 2
<dd>Definition or explaination of item 2
</dl>
輸出為:
Item 1
The definition of item 1
Item 2
Definiton or explaination of item 2
2.4.4 改變條目標(biāo)記
1.改變無(wú)序列表?xiàng)l目標(biāo)記
無(wú)序列表輸出時(shí),每一條目前都有一個(gè)黑色圓點(diǎn),用戶可以用type序性修改條目的標(biāo)記。type可以是disc 實(shí)心圓點(diǎn) cirde圓圈 square實(shí)心方點(diǎn)<ul>
<li type=disc>ONE
<li type=circle>TWO
<li type=square>THREE
</ul>
輸出為:
●ONE
○TWO
■THREE
2.改變有序列表?xiàng)l目標(biāo)記
有序列表?xiàng)l目標(biāo)記的缺省值是阿拉伯?dāng)?shù)字,可以用type屬性修改。方法為:
<li type=#>
#=A, 大寫(xiě)字母
a, 小寫(xiě)字母
I, 大寫(xiě)羅馬數(shù)字
i, 小寫(xiě)羅馬數(shù)字
l, 缺省,阿拉伯?dāng)?shù)字
<ol><li type=A>ONE-ONE
<li>ONE-TWO</ol>
輸出為:
A.ONE-ONE
B.ONE-TWO
<ol><li type=a>ONE-ONE
<li>ONE-TWO</ol>
輸出為:
a.ONE-ONE
b.ONE-TWO
<ol><li type=I>ONE-ONE
<li>ONE=TWO</ol>
輸出為:
Ⅰ.ONE-ONE
Ⅱ.ONE-TWO
<ol><li type=i>ONE-ONE
<li>ONE-TWO</ol>
輸出為:
i.ONE-ONE
ii.ONE-TWO
<ol><li type=1>ONE-ONE
<li>ONE-TWO</ol>
輸出為:
1.ONE-ONE
2.ONE-TWO
3.改變有序列表?xiàng)l目的起始數(shù)字
有序列表的條目數(shù)字在缺省情況下是從1開(kāi)始的,用start屬性可修改這一值。方法為<ol start=#> #是條目起始號(hào)
<ol start=5>
<li type=A>ONE-ONE
<li>ONE-TWO
<ol start=10>
<li>TWO-ONE
<li type=i>TWO-ONE
</ol></ol>
輸出為:
E.ONE-ONE
F.ONE-TWO
10.TWO-ONE
xi.TWO-TWO
2.4.5 列表的嵌套
各種列表可以相互嵌套,每一個(gè)列表?xiàng)l目都可以是一個(gè)單獨(dú)的列表。每嵌套一層,列表?xiàng)l目的輸出就會(huì)有更大的縮進(jìn)。請(qǐng)參照上面的例子。
§2.5 預(yù)格式化文本<pre>
html的輸出是基于窗口的,因而html文件在輸出時(shí)都是要重新格式化的,若確實(shí)不需要重新格式化的內(nèi)容,可以用<pre>…</pre>通知瀏覽器。瀏覽器在輸出時(shí),對(duì)這部分內(nèi)容幾乎不做修改地輸出,輸出的字體電傳打字機(jī)字體。早期的html規(guī)范規(guī)定在預(yù)格式化區(qū)內(nèi)不能出現(xiàn)格式化輸出的元素。如hn等,Netscape在遇到預(yù)格式化元素時(shí),允許其中有其他元素。
<pre>
please use your card.
VISA Master
<b>Here is an order form.</b>
<ul><li>Fax
<li>Air Mail </ul>
</pre>
輸出為:
please use your card
VISA Master
Here is an order form.
●Fax
●Air Mail
§2.6 塊引用<BLOCKQUOTE>
塊引用用<BLOCKQUOTE>標(biāo)注,使屏幕顯示單獨(dú)的一塊。大多數(shù)的瀏覽器采用縮進(jìn)編排的方式,使這一塊和其他部分的文本區(qū)分開(kāi)來(lái),上下各有一空行。
塊引用(Blockquote) <blockquote>...</blockquote>
Her Song:
<blockquote>
When I was young, I listened to the radio
waiting for my favorite songs....
</blockquote>
Her Song:
When I was young, I listened to the radio waiting for my favorite songs....
§2.7 居中
很多元素都有對(duì)齊方式屬性,如hn 、p等。也可以直接用居中標(biāo)注<center>…</center>
<h3 align=center>Wonderful!!</h3>
<center>This must be my dream.</center>
輸出為:
Wonderful!!
This must be my dream.