構成網頁的基本元素

來源:互聯網
上載者:User
網頁

  2.1題目(TITLE)
   Title元素是檔案頭中唯一一個必須出現的元素,它也只能出現在檔案頭中。title元素的格式為:
  <title>檔案題目</title>
    title標明該html檔案的題目,是對檔案內容的概括。一個好的題目應該能使讀者從中判斷出該檔案的大概內容。檔案的題目一般不會顯示在文字視窗中,而以視窗的名稱顯示出來。除了標識視窗外,當將某一 homepage 存入書籤或檔案時,title還用作書籤名或預設的檔案名稱。
  title的長度沒有限制,但過長的題目會導致折行,一般情況下它的長度不應超過64個字元。由於title的作用是標明檔案內容,所以太短的title也是不可取的,比如:introduction 這個題目,讀者不可能根據它判斷出本文介紹的是什麼。一個好的例子是:
    <titl> An Introduction to HTML 2.0 </title>
    在頭元素中還可以出現其他元素,如<isindex>,<meta>等等。這些元素都不是必須的,而且也不常用。 這些元素的用法和它們的含義可以參考有關文獻。
   下面是一個最簡單的html 檔案
<html>
<title>the simplest html file</title>
This is my first html file.
</html>


  §2.2 標題(hn)
   標題元素有6種,分別為h1, h2,…h6,用於表示文章中的各種題目。標題號越小,字型越大。一般情況下,瀏覽器對標題作如下解釋:
  h1 黑體,特大字型,置中,上下各有兩行空行。
  h2 黑體,大字型,上下各有一到兩行空行
  h3 黑體(斜體),大字型,左端微縮排,上下空行
  h4 黑體,普通字型,比h3更多縮排,上邊一空行
  h5 黑體(斜體),與h4相同縮排,上邊一空行
  h6 黑體,與本文有相同縮排,上邊一空行
  Netscape 2.0為hn的解釋為,一律黑體,字型越來越小。
 
  hn可以有對齊屬性,align=#,#表示left 標題居左center 標題置中right 標題居右
   例: <h2 align=center>Chapter 2 </h2>
  下面給出hn的例子及其輸出:
   <h1>Today is fine!</h1> Today is fine!
<h2>Today is fine!</h2> Today is fine!
<h3>Today is fine!</h3> Today is fine!
<h4>Today is fine!</h4> Today is fine!
<h5>Today is fine!</h5> Today is fine!
<h6>Today is fine!</h6> Today is fine!
  
  §2.3 分段<P>
  html的瀏覽器是基於視窗的,使用者可以隨時改變顯示區的大小,所以html將多個空格以及斷行符號等效為一個空格,這是和絕大多數文書處理器不同的。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>當 html檔案中有圖形,圖形可能佔據了視窗的一端,圖形的周圍可能還有較大的空白區。這時,不帶clear屬性的<p>可能會使文章的內容顯示在該空白區內。為確保下一段內容顯示在圖形的下方,可使用clear屬性。clear屬性的含義為:
  clear=left 下一段顯示在左邊界處空白的地區
    clear=right 下一段顯示在右邊界處空白的地區
    clear=all 下一段的左右兩邊都不許有別的內容


  §2.4 清單List
  清單用於列舉事實,常用的清單有3種格式,即無序清單(unordered List),有序清單(ordered list)和定義清單(definition list)


  2.4.1 無序清單(ul)
   無序清單用(ul)開始,每一個清單條目用<li>引導,最後是</ul>,注意清單條目不需要結尾連結簽</Li>。輸出時每一清單條目縮排,並且以黑點標示。例 :
   源檔案
 <ul>
<li>Today
<li>Tommorow
</ul>
  輸出為
  ●Today
  ●Tommorow
 
  2.4.2 有序清單<ol>
有序清單與無序清單相比,只是在輸出時清單條目用數字標示,下面是一個例子及其輸出: 
  <ol>
<li>Today
<li>Tommorow
</ol>
輸出為:
1.Today
2.Tommorow


  2.4.3 定義清單<dl>
  定義清單用於對清單條目進行簡短說明的場合,用<dl>開始,清單條目用<dt>引導,它的說明用<dd>引導。
  <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 改變條目標記
  1.改變無序清單條目標記
  無序清單輸出時,每一條目前都有一個黑色圓點,使用者可以用type序性修改條目的標記。type可以是disc 實心圓點 cirde圓圈 square實心方點
<ul>
<li type=disc>ONE
<li type=circle>TWO
<li type=square>THREE
</ul>
輸出為:
●ONE
○TWO
■THREE


  2.改變有序清單條目標記
  有序清單條目標記的預設值是阿拉伯數字,可以用type屬性修改。方法為<Litype=#>#=A, 大寫字母
a, 小寫字母
I, 大寫羅馬數字
i, 小寫羅馬數字
l, 預設,阿拉伯數字
<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.改變有序清單條目的超始數字
  有序清單的條目數字在預設情況下是從1開始的,用start屬性可修改這一值。方法為<ol start=#> #是條目起始號
   <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 清單的嵌套
  各種清單可以相互嵌套,每一個清單條目都可以是一個單獨的清單。每嵌套一層,清單條目的輸出就會有更大的縮排。請參照上面的例子。


   §2.5 預排版文本<pre>
     html的輸出是基於視窗的,因而html檔案在輸出時都是要重新排版的,若確實不需要重新排版的內容,可以用<pre>…</pre>通知瀏覽器。瀏覽器在輸出時,對這部分內容幾乎不做修改地輸出,輸出的字型電傳打字機字型。早期的html規範規定在預排版區內不能出現格式化輸出的元素。如hn等,Netscapr2.0在遇到預排版元素時,允許其中有其他元素。
  <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 區塊引述<BQ>
    區塊引述表示其中的內容是引用。瀏覽器內對區塊引述的解釋一般為左右縮排,上下各有一空行,有些瀏覽器還採用斜體字。


  §2.7 置中
    很多元素都有對齊屬性,如hn 、p等。也可以直接用置中連結簽<center>…</center>
<h3 align=center>
Wonderful!!
</h3>
<center>
This must be my dream.
</center>
Wonderful!!
This must be my dream.



相關文章

Alibaba Cloud 10 Year Anniversary

With You, We are Shaping a Digital World, 2009-2019

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。