創作內容

6 GP

CSS 教學(六): html基礎知識

作者：law│2010-07-29 02:17:17│巴幣：0│人氣：1450

其實本篇的標題應該改為html教學,因為css算是html的一個部分,但既然開始了css教學,

那就繼續以css教學為主吧.

坦白說,本來我只想寫css教學,但有時候如果沒有一點html的基礎的話是根本不明白比較

深層的東西. 不過我暫時也不打算寫一系列的html教學(除非有人想學^^"),所以本篇只會概

述一些html的基礎專用名詞和一個簡單的網頁架構. (以及解答上篇提到的如何把視窗縮窄

但div區塊也不會自動跳到第二行) 讀完這篇後,其實大家已經有基本的知識架起一個屬於自

己的網頁了.

HTML簡介

html是一種專為設計網頁的標置語言,市面上有很多功能強大的html編輯器例如dreamweaver,

microsoft frontpage等. 不過即使沒有那些特殊的編輯器,只要有notepad (windows附送的文

字處理器)就可以寫出一個網頁了.

HTML的基礎結構

一個完整的html,必須要擁有一些特殊的標籤(tag). 在html的世界裡,所有標籤都會用"< >"這

個符號顯示 (例如: <p>和</p>). 而每一組標籤都包括開始標籤: <標籤>和完結標籤: </標籤>

以下為最基本html檔的結構:

<html>

<head>

</head>

<body>

</body>

</html>

從上面的html碼可知道,所有的網頁內容必須寫在<html></html>這組標籤之內.

<head></head>這組標籤的內容並不會在視窗中顯示,這組標籤通常是用來寫入網頁的標題

等資料,主要是給瀏覽器和網路搜尋器看的.

<body></body>這組標籤就是我們在瀏覽器中所看到的內容,凡是想顯示在瀏覽器中的文字

或圖片,必須寫在這組標籤之內.

HTML中的標籤

在html中的世界中,我們要列明每一個部分,例如網頁的某部分是段落的標題,某部是段落的內

容等. 這些東西全部都要用一些特別的標籤來表達. 這類型的標籤有很多種,我在這裡只會提

一些最基本的.

<h1></h1>: 這組標籤是用來顯示一段文章的標題,例如在這篇文中,"HTML中的標籤"這種藍

色標題就屬於這類型的標籤. 同類型的標籤分別為<h2></h2><h3></h3>至<h6></h6>. 要注

意的是,這類型的標籤中數字越大,代表這標題越重要,以我這篇為例. 我的<h1>就是"CSS教學

(六): html基礎認識",然後"HTML簡介"我藍字標題就可以屬於<h2>. 在使用<h1>這類型的標籤

時,顯示上會自動把標籤內的文字設定為粗體和字型也會是最大. 相對<h6>的標籤在顯示時會

自動把文字設定為粗體和最小(大約跟內文文字一樣大小)

<P></P>: 這組標籤是段落的意思.

<DIV></DIV>: 這組是區塊的意思.

<A></A>: 這是連結的意思.

<TABLE></TABLE>: 這組標籤通常用來顯示表格.

實例

我將會以前幾篇所建立的test.html為例子. 以下是test.html的原始碼:

<html>
<head>
<style>
P {
text-align: center;
color: #ffffff
}

.hutTop {
width: 800px;
height: 150px;
background: #000000;
margin-bottom: 5px;
}

.hutLeft {
width: 600px;
height: 400px;
background: #000000;
float: left;
}

.hutRight {
width: 197px;
height: 400px;
background: #000000;
}
</style>
</head>
<body>
<DIV class="hutTop">
<P>DIV 1</P>
</DIV>
<DIV class="hutLeft">
<P>DIV 2</P>
</DIV>
<DIV class="hutRight">
<P>DIV 3</P>
</DIV>
</body>
</html>
上面的例子顯示了整個網頁包含了最基本的元素,就是<html>,<head>和<body>

標籤. 而我把這頁的css碼都寫在<head>的標籤內,然後把會出現在視窗的內容寫

在<body>的標籤內.

當瀏覽器解讀這些碼時,它會從<head>的標籤開始解讀,然後再到<body>,以上面

的例子為例,瀏覽器在解讀<body>時,會把每一個<div>逐一解讀,分別是三個個別

的<div>. 而現在下面右邊的<div>(DIV 3),我在css中用了float的屬性來設定它,float

的特性是當視窗的實際寬度足夠時,float會把該區塊自動放在前一個區塊的旁邊. 因

此當你把視窗縮窄, DIV 3便會自動換到下一行.

要解決這個問題,我們只需在三個<div>的外面再加一個<div>,把三個<div>都包括在

其中就可以了. 以下是原始碼:

<html>
<head>
<style>
.content {
width: 800px;
}

P {
text-align: center;
color: #ffffff
}

.hutTop {
width: 800px;
height: 150px;
background: #000000;
margin-bottom: 5px;
}

.hutLeft {
width: 600px;
height: 400px;
background: #000000;
float: left;
}

.hutRight {
width: 197px;
height: 400px;
background: #000000;
}
</style>
</head>
<body>
<DIV class="content">
<DIV class="hutTop">
<P>DIV 1</P>
</DIV>
<DIV class="hutLeft">
<P>DIV 2</P>
</DIV>
<DIV class="hutRight">
<P>DIV 3</P>
</DIV>
</DIV>
</body>
</html>
我在三個<div>外面加了一個class是content的<div>,然後我在css中把content的寬度