HTML靜態網頁（標籤、表格）

標籤：style   blog   http   color   ar   使用   sp   strong   div   

HTML靜態網頁：

開啟DREAMWEAVER，建立HTML，如：

 

body的屬性：

bgcolor　　　　　　　　頁面背景色

background　　　　　  背景壁紙、圖片

text　　　　　　　　　  文字顏色

topmargin　　　　　　  上邊距

leftmargin　　　　　　   左邊距

rightmargin　　　　　　右邊距

bottommargin　　　　  下邊距

body屬性用法樣本：

 

格式控制標籤：

<font color="" face="" size=""></font>

分別控制字型的顏色、字型和大小。

<b></b>　　　　　　　　字型加粗

<strong></strong>　　 字型加粗

<i></i>　　　　　　　　   傾斜

<em></em>　　　　　　 傾斜

<u></u>　　　　　　　　底線

<center></center>　　　置中

<br>或<br/>　　　　　　相當於斷行符號

&nbsp;　　　　　　　　　表示空格，Ctrl+shift+space

格式控制標籤使用樣本：

 

內容容器標籤：

<h1></h1>　　　　　　標題，會自動換行。HTML標題是　　　　　　　　　　　　　　　　　　　　　　

　　. . .　　　　　　　　通過<h1>到<h6>等標籤來定義的。

<h6></h6>

<p></p>　　　　　　　段落標籤（段落之間空行）

<div></div>　　　　　 層標籤（預設佔用一行）

<span></span>　　　 層標籤（預設用掉多大空間佔用多大空間）

 

<ol type="1">　　　　有序列表，序號為1,2,3....，引號中可以更改序號的形式

　　<li>內容<li>

　　<li>內容<li>

</ol>　　　　　　　　 上面的ol改為ul則變為無序號列表

樣本：

 

"../"　　　　　　表示上級目錄

"./"　　　　　　 表示目前的目錄

相對路徑：從當前頁面開始尋找。

絕對路徑：從網站的根開始尋找。"/"，代表網站的根。

 

 

超連結標籤：

<a href="超連結位址" target="_blank">超連結顯示文字</a>　　　　--在新視窗開啟

還可以在當前頁找到目錄點擊目錄上的超連結，自動跳轉到當頁的某一個地方。

樣本：

 

圖片標籤：

<img src="圖片地址" alt="文字" width=“” height=“” title=“標題文字” />

高度跟寬度設定一個即可保持原有比例。

alt在圖片無法載入時，顯示文字，還可以協助搜尋引擎搜尋。

title可以添加圖片描述，滑鼠放在圖片上時可以顯示描述。

樣本：

 

 

 

表格：

<table></table>表格

　　width:寬度。可以用像素或百分比表示。 常用960像素。

　　border：邊框，常用值為0。

　　cellpadding：內容跟邊框的距離，常用值為0。

　　cellspacing：儲存格與儲存格之間的間距，常用值為0。

　　algin：對齊。

　　bgcolor：背景色。

　　background：背景圖片。

 

<tr></tr>行

　　align:一行內容的水平對齊。

　　valign:一行內容的垂直對齊。

　　height：行高。

　　bgcolor：背景色。

　　background：背景圖片。

 

<td></td>儲存格

<th></th>表頭，儲存格的內容自動置中、加粗

　　align:儲存格內容的對齊。

　　valign:儲存格的內容的垂直對齊。

　　width：儲存格寬度。

　　height：儲存格高度。

　　bgcolor：背景色。

　　background：背景圖片。　　

　　內容必須放在儲存格裡，儲存格必須放在行裡，行必須放在表格裡。

　　設定儲存格行高、列高時，會同時影響對應的行或列。

儲存格合并：（建議盡量用表格嵌套）

　　colspan=“n”　　合并同一行的儲存格（後面寫代碼要減去相對應的列）

　　rowspan=“n”　 合并同一列儲存格（從第二行開始減去相對應的列）

 

表格樣本：

 

HTML靜態網頁（標籤、表格）