萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> dreamweaver教程 >> Dreamweaver CS教程-HTML基礎語法

Dreamweaver CS教程-HTML基礎語法

 在HTML文本中,用尖括號括起來的部分稱為,標簽通常有開始標簽和結束標簽,它們一起限定了這個標簽所包含的內容。屬性只能在開始標簽中指定,屬性值可以用單引號或雙引號括起來。結束標簽都以/加上標簽名來表示。有時候,有些標簽並不包含其它內容(只包括自己的屬性,甚至連屬性都沒有),這種情況下,可以寫成類似這樣:<img src="logo.gif" />。注意最後的一個空格和一個反斜槓,它說明這個標簽已經結束,不需要單獨的結束標簽了。

某些標簽包含的內容中還可以有新的標簽,新的標簽名甚至可能還可以與包含它的標簽的名稱相同(哪些標簽可以包含標簽,可以包含哪些標簽也是有規定的)。在這種情況下,最後出現的標簽應該最先結束。比如:

<div>
     <div>分類目錄...</div>
     <div>當前分類內容列表...</div>
  </div>

HTML文檔裡所有的空白符(空格,Tab,換行,回車)會被浏覽器忽略,唯一的例外是空格,對空格的處理方式是所有連續的空格被當成一個空格,不管有一個,還是兩個,還是100個。之所以有這樣的規則是因為忽略空白符能讓使用HTML的作者以他覺得最方便的格式來排列內容,比如可以在每個標簽開始後增加縮進,標簽結束後減少縮進。由於英語文本中空格用得很普遍(用於分隔單詞),所以對空格做了這樣的特殊處理。如果要顯示連續的空格(比如為了縮進),應該用&nbsp;來代表空格。

常用標簽介紹

文本

最常用的標簽可能是<font>了,它用於改變字體、字號和文字顏色。

<font size="6">6</font>
  <font size="4">4</font>
  <font color="red" size="5">紅色的5</font>
  <font face="黑體">黑體的字</font>

加粗、下劃線和斜體字也是常用的文字效果,它們分別用<b>,<u>,<i>表示:

<b>Bold</b>
  <i>italic</i>
  <u>underline</u>

還有一些標簽,用來指出包含的文本有特殊的意義,比如<abbr>(表示縮寫),<em>(表示強調),<strong>(表示更強地強調),<cite>(表示引用),<address>(表示地址)等等。這些標簽不是為了定義顯示效果而存在的,所以從浏覽器裡看它們可能沒有任何效果,也可能不同的浏覽器對這些標簽的顯示效果完全不同。

一篇很長的文章,如果有合適的小標題的話,就可以快速地對它的內容進行大致的了解。在HTML裡,用來表示標題的標簽有:<h1>,<h2>,<h3>,<h4>,<h5>,<h6>,它們分別表示一級標題,二級標題,三級標題...

<h1>HTML基礎教程</h1>
      <h2>什麼是HTML</h2>
      ...
      <h2>HTML是什麼樣的</h2>
      ...

<hr>標簽用於在頁面上添加橫線。可以通過指定width和color屬性來控制橫線的長度和顏色。

<hr width="90%" color="red" />

<img>標簽用於在頁面上添加圖片,src屬性指定圖片的地址,如果無法打開src指定的圖片,浏覽器通常會在頁面上需要顯示圖片的地方顯示alt屬性定義的文本。

<img src="http://www.w3.org/Icons/valid-xhtml10" alt="圖片簡介" />

鏈接

超級鏈接用<a>標簽表示,href屬性指定了鏈接到的地址。<a>標簽可以包含文本,也可以包含圖片。

<a href="http://validator.w3.org"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="驗證HTML" /></a>

分段與換行

由於HTML文檔會忽略空白符,所以要想保證正常的分段換行的話,必須指出哪些文字是屬於同一段落的,這就用到了標簽<p>。表格

<p>這是第一段。</p>
<p>這是第二段。</p>


也可以用<br>。<br>只表示換行,不表示段落的開始或結束,所以通常沒有結束標簽。

這是第一段。<br />
這是第二段。<br />


有時,要把文檔看作不同的部分組合起來的,比如一個典型的頁面可能包括三個部分:頁頭,主體,頁腳。<div>標簽專門用於標明不同的部分:

<div>頁頭內容</div>
<div>主體內容</div>
<div>頁腳內容</div>


注:DIV標簽與CSS代碼(DIV+CSS)是目前最符合規范的網頁排版方法,做到了內容與樣式的分離。

copyright © 萬盛學電腦網 all rights reserved