XHTML與CSS入門經典從零開始系列教程！

顯示全部樓層 · 發表於 2007-8-25 17:32:55

1、簡介及入門 ──一開始你所需要做的和創作你的第一個HTML文件
2、標籤、屬性和元素──構成HTML的要素
3、title文檔標題 ──頁面的標題
4、段落──用段落構建你的內容
5、標題h1~h6 ──6個等級的標題
6、列表──定義有序或無序的列表
7、鏈接──把東西鏈接起來
8、圖像──添加一點不是文本的東西
9、表格table ──使用表格式的數據
10、表單form ──文本框和其他由用戶輸入的構件
11、綜合應用__把上面所有的要素堆積起來

顯示全部樓層 · 發表於 2007-8-25 17:33:18

1、簡介及入門 ──一開始你所需要做的和創作你的第一個HTML文件

這份HTML初級教程假設你沒有任何HTML和CSS的知識背景。

學習基本的HTML十分容易，只要你能從頭到尾按照每一步驟來實踐。最後我們會將每一步綜合起來，以便我們繼續學習CSS初級指南。

需要記住的是，HTML和CSS是關於內容(HTML)和表現(CSS)的一切。HTML不過是有精美結構的內容罷了，是我們將要在下一步學習的CSS則是用來格式化內容的。

或許你已經留神過其他的HTML的教程，你可能會發現它們提及一些HTMLDog沒有的東西。這是因為許多方法已經過時，不符合標準或者只是平白的壞實踐。從一開始就在腦海中形成「走對的路」的思想最終可以幫助你掌握得更好。

絕大部分的HTML要素並不比你電腦上的其他要素要難——只不過是一大堆歸類的文件放置在一大堆的文件夾裡面而已。

HTML文件與簡單的文本文件無異，所以開始編輯HTML你只需要一個簡單的文本編輯器。記事本就是一個例子（在Windows裡可以從程序-〉附件的菜單中找到，如果你使用的是Linux，恭喜你，無論是控制台或者桌面環境，你都有更多更好的選擇，比如控制台的vi以及各種vi變種，GNOME的Gedit，KDE的kate等等——譯者注）。

[ 本帖最後由 qpyangwu 於 2007-8-25 17:34 編輯 ]

顯示全部樓層 · 發表於 2007-8-25 17:35:07

2、標籤、屬性和元素──構成HTML的要素

儘管HTML的基礎是純文本，但我們還是需要多一些東西才能使純文本文件變成合法的HTML文件。

標籤

HTML基本的構成包含標籤，標籤圍繞著內容，賦予內容某些意義。

按照下面改進你的文件：

Example Source Code [www.cn-webmaster.cn]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<body>
這是我的第一個網頁
</body>
</html>

保存文件，回到瀏覽器界面和選擇「玩新」（這會重新裝載網頁）。

網頁的外觀沒有任何改變，HTML的目的是表達內容，而不是表達表現，這個例子現在已經定義了網頁一定的基本元素。

第一行以<!DOCTYPE..開始是為了讓瀏覽器知道你到底要做什麼。你可能還不知道自己在做什麼，但接受它很重要。如果你不這樣做，瀏覽器將用「quirks」（奇怪的）模式來表現你的網頁。現在還不必擔心，當然你需要瞭解或者學習的話可以看看 HTML高級教成的進一步學習「文檔類型」。當前，只需要記住把這一行放在文件的頂端就可以了。

言歸正傳，<html>是隔開其他內容的起始標籤，它告訴瀏覽器，位於自己與閉合標籤</html>之間的就是是HTML文檔。在<body>和</body>之間的是這個文檔展示在瀏覽器上的主要內容。

閉合標籤

</body>和</html>關閉他們各自的標籤。所有的HTML標籤都要關閉。儘管老版本的HTML允許某些標籤不關閉，但最新的標準要求所有的標籤都要關閉。無論如何，閉合標籤是一個好習慣。

並不是所有的標籤都像<html></html>一樣關閉，有的標籤不用繞在內容外面，它們是自關閉的。比如斷行的的標籤是這樣的：<br />。呆會我們還有這方面的例子。你所需要記住的是，所有的標籤都必須關閉，以及，大部分的內容都在標籤之間，他們的格式是這樣的：起始標籤 - 內容 - 閉合標籤。

屬性

標籤可以有屬性，包含額外的信息。屬性一般出現在開放標籤中，它們的值總是在引號中。就像這樣：<tag attribute="value">Margarine</tag>。呆會我們會講解帶屬性的標籤。

元素

除了標記元素的開始與結束，標籤不願再多做些什麼。元素是構建網頁的bits。你可能會說，比如，在<body>和</body>之間的是主體元素，又如，<title>和</title>是標籤，而<title>Rumple Stiltskin</title>則是標題元素。

顯示全部樓層 · 發表於 2007-8-25 17:35:42

3、title文檔標題 ──頁面的標題

所有的HTML網頁都應該有文檔標題。

給你的文檔增加一個標題，按照下面改變你的代碼：

Example Source Code [www.cn-webmaster.cn]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>我的第一個網頁</title>
</head>
<body>
我的第一個網頁
</body>
</html>

你可以看到，我們已經增加從<head>標籤和<title>標籤開始的兩個新元素（看看他們是怎麼關閉的）。

頭元素（從起始標籤<head>到閉合標籤</head>之間的內容）出現在主體元素（從起始標籤<body>到閉合標籤</body>之間的內容）之前，包含將在主體元素信息之前裝載的信息。這些信息不會出現在瀏覽器窗口中。

隨著我們進一步學習，你會看到更多能夠插入頭元素的其它元素，但最重要的還是標題元素。

如果你從瀏覽器查看這個網頁（像前面一樣已經保存和玩新），你可以看到「這是我的第一個網頁」出現在瀏覽器窗口的標題欄。你鍵入的位於標題（title）標籤的文本已經變成了這個文檔的標題，驚奇吧？假設把這個網頁增添到你的收藏夾或者書籤，你會看到標題也會出現在這裡

顯示全部樓層 · 發表於 2007-8-25 17:36:06

4、段落──用段落構建你的內容

現在你的HTML文檔已經有了基本的框架，你可以來「胡搞」一陣子其他內容了

回到記事本，按照下面增加新行：

Example Source Code [www.cn-webmaster.cn]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>我的第一個網頁</title>
</head>
<body>
這是我的第一個網頁多令人激動
</body>
</html>

接著用瀏覽器查看一下。

你可能期望你的頁面展示出像所你鍵入得一樣格式，分為兩行，但是你會看到：

Example Source Code [www.cn-webmaster.cn]
這是我的第一個網頁多令人激動

這是因為瀏覽器不會關注你的代碼是怎麼寫的，也絲毫不關心空格（就算你鍵入「這是我的第一個網頁多令人激動」，結果還是是一樣的）。

要文本以不同的行來顯示，你必須明確地指出。

按照下面改進你的代碼：

Example Source Code [www.cn-webmaster.cn]
<p>這是我的第一個網頁</p>
<p>多令人激動</p>

p標籤代表paragraph，即段落。

查看結果，這兩行終究以兩行來顯示。cn-webmaster.cn

HTML文檔的內容應該跟書籍或者文章一樣，在適當的地方應該劃分段落。

強調

在段落中你可以用em標籤和strong標籤來強調突出文本。它們都做幾乎相同的事，儘管傳統上瀏覽器會以斜體來顯示em，以粗體來顯示strong。

Example Source Code [www.cn-webmaster.cn]
<p>是的，那個 <em>就是</em> 我要說的。 <strong>多</strong>令人激動</p>

換行

換行標籤可以用來打斷成兩行，像下面：

Example Source Code [www.cn-webmaster.cn]
這是我的第一個網頁<br /> 多令人激動

但是，這個方法已經嚴重被濫用來劃分段落，它不應該使用在預計分段的兩段文本中。（是什麼結構，該用什麼標籤就用什麼標籤，不是為斷行而分段或者為分段而斷行——譯者注）

（因為沒有任何東西在換行標籤之間，所以沒有閉合標籤，它是用「/」在br後自閉合的。）

顯示全部樓層 · 發表於 2007-8-25 17:36:28

5、標題h1~h6 ──6個等級的標題

段落標籤是格式化文本的開始。

HTML標籤有專門的標籤處理你頁面上的標題。

它們是h1，h2，h3，h4，h5和h6，像封建社會一樣，h1就是萬能的君主而h6就是最底層的百姓。

按照下面改進你的代碼：

Example Source Code [www.cn-webmaster.cn]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>我的第一個網頁</title>
</head>
<body>
<h1>我的第一個網頁</h1>
<h2>這是什麼</h2>
<p>用HTML組合起來的簡單網頁</p>
<h2>目的</h2>
<p>學習HTML</p>
</body>
</html>

注意，h1標籤在一個頁面只能使用一次——假定它是這個頁面的主標題，是不應該使用多次的（相當於一篇文章的題目，你可以有一個副題目，但你不會使用兩個並列的題目吧？——譯者注）。

但是，h2到h6可以如你所需任意使用多次，但它們應依設計意圖，該按順序使用。比如，h4應該是h3的子標題，h3應該是h2的子標題，以此類推

顯示全部樓層 · 發表於 2007-8-25 17:36:51

6、列表──定義有序或無序的列表

有三種類型的列表：無序、有序和定義列表。首先我們來學習前兩種，在HTML中級指南中學習定義列表。

為你的代碼增加以下東西：

Example Source Code [www.cn-webmaster.cn]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>我的第一個網頁</title>
</head>
<body>
<h1>我的第一個網頁</h1>
<h2>這是什麼</h2>
<p>用HTML組合起來的簡單網頁</p>
<h2>目的</h2>
<ul>
<li>學習HTML</li>
<li>顯擺，炫耀</li>
<li>因為我已經愛上了我的電腦，我想給她點HTML愛情調料。</li>
</ul>
</body>
</html>

在瀏覽器中查看，你會看到有項目符號（比如方塊）的列表。把ul改成ol後項目符號會變成編號，字母的或者數字的。

列表裡當然可以包含列表，形成有等級層次的嵌套列表。

用下面的代碼代替：

Example Source Code [www.cn-webmaster.cn]
<ul>
<li>學習HTML</li>
<li> 顯擺，炫耀
<ol>
<li>向老闆</li>
<li>向朋友</li>
<li>向我的小貓</li>
<li>給我腦中多嘴的小鴨子</li>
</ol></li>
<li>因為我已經愛上了我的電腦，我想給她點HTML愛情調料。</li>
</ul>

Ay vwah lah。列表裡面包含著列表。你可以在這裡包含更多的列表，還可以在那裡包含更多的列表，等等等等.

顯示全部樓層 · 發表於 2007-8-25 17:37:14

7、鏈接──把東西鏈接起來

現在你已經創建了一個獨立的網頁，所有的都顯得不錯。使因特網顯得特別的，是因為它把所有東西都連接起來了。

HTML中的H和T代表HyperText，即超文本，表示著一個由連接文本所構成的系統。

錨標籤a用來定義一個連接，但是還是需要為錨標籤增添其他的東西──連接目標。

為你的代碼增加以下東西：

Example Source Code [www.cn-webmaster.cn]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>我的第一個網頁</title>
</head>
<body>
<h1>我的第一個網頁</h1>
<h2>這是什麼</h2>
<p>用HTML組合起來的簡單網頁</p>
<h2>目的</h2>
<p>學習HTML</p>
<h2>在哪裡尋找教程</h2>
<p><a href="http://www.google.com">Google</a></p>
</body>
</html>

連接的目標用href屬性來定義。連接可以是絕對的，比如http://www.htmldog.com，也可以是相對的，相對於當前頁面來說。

所以，假設你有另外一個HTML文檔「flyingmoss.html」，其中一行代碼可以寫成<a href="flyingmoss.html">The miracle of moss in flight</a> ，諸如此類。

連接不僅可以連接到其他的HTML文檔，也可以連接到頁面上的其他文件。

連接還可以轉到頁面的其他部分。你可以給幾乎所有的標籤增加id屬性，比如<h2 id="moss">Moss</h2>，然後連接到它，像是這樣做：<a href="#moss">Go to moss</a>，點擊這個連接會直接滾動到帶有這個id的元素。

注意

Example Source Code [www.cn-webmaster.cn]
a標籤允許你為連接打開新窗口，而不是取代當前窗口，初聽起來似乎是一個不錯的主意，因為它不會讓用戶離開你的頁面。

但是，有很多理由證明，你不應該這樣做。

從易用性的觀點來看，這種方法破壞導航。最常用的導航玩具是瀏覽器上的「後退」，打開新窗口使這個功能失去了作用。

更廣泛地，還是從易用的觀點來看，用戶不需要到處都是彈出的新窗口。如果用戶需要打開新窗口，他們有權利（是的，有權利。不要強行干涉別人意志，不是很好嗎？在一般情況下，建議你盡量不要使用新窗口——譯者注）讓自己來控制。

顯示全部樓層 · 發表於 2007-8-25 17:37:36

8、圖像──添加一點不是文本的東西

都是文本的話看起來讓人感到乏味和無聊，自然，網頁不應該僅僅是文本而已（呵呵，對於一些技術性的文檔，我想，文本就已經嚴重足夠了——譯者注），它是多媒體的，最常見的形式就是圖像。

圖像標籤img用來為HTML添加圖像，像下面這樣改進你的代碼：

Example Source Code [www.cn-webmaster.cn]
<img src="http://www.yourdomain.com/logo.gif" width="88" height="31" alt="mysite logo" />

src屬性告訴瀏覽器圖像的地址。就像a標籤一樣，它可以是絕對的，如示範所示，但更多時候它是相對的。比如，你擁有自己的圖像且已經另存為alienpie.jpg放置在images文件夾下，代碼可以這樣寫<img src="images/alienpie.jpg"...

長度屬性width和高度屬性height是必需的（Zeldman的「惡名昭著」的《Designing with Web Standards》（中文版《網站重構——應用Web標準進行設計》已經出版，推薦翻譯者之一的著名設計師ajie的網站網頁設計師，你要是沒有訪問過，趕緊去，保準你收穫不小！）中說，width和height不是必須的，這可以節省帶寬。平時做網頁我也不喜歡用這兩個屬性。——譯者注），因為瀏覽器在下載過程中能夠計算出圖像佔據的空間，否則瀏覽器可能會產生一個頁面的跳躍，因為事先並不知道圖像要佔用多少空間，以致於破壞頁面佈局。

alt屬性表示可替代的描述。這是為不能或者不選擇圖像顯示的客戶端著想（比如終端瀏覽器lynx，不能顯示圖片，但可顯示alt中的文本。最壞的情況是，你寫錯了圖片的文件名或者路徑，即使在圖形瀏覽器中圖片顯示不出，但仍可顯示出alt中的文本，不會讓訪問者造成不必要的誤解。什麼情況下我們都推薦你，一定記得使用alt。——譯者注）。在最新版本的HTML版本中，這是不可缺少的屬性。

注意

Example Source Code [www.cn-webmaster.cn]
給網頁創做圖像雖然不是本站的主題，但我們還是有一些對你有用的東西要說。
經常被用到的圖像格式是GIF和JPEG。他們都是壓縮過的格式，有各自十分不同的用途。
GIF圖像不超過256色，但可以保持原有圖像的色彩。色數越低，圖像文件就越小。
GIF應該用在有純質顏色的圖像上。
JPEG使用十分精確的算法來壓縮圖像，對原圖像有些微的改變。壓縮程度越低，圖像文件越大，從而圖像更清晰。
JPEG應該使用在要逼真描繪的諸如攝影的圖像上。
網頁設計初學者需要處理的文件可能就是圖像文件了，忽視圖像過大是初學者常犯的錯誤。網頁下載應該盡可能快，想想看，一個使用少於7kb每秒的Modem聯網的人要用多少時間來下載你的整個頁面。
你必須在圖像質量和圖像文件大小之間作出選擇。許多現代的圖像處理軟件允許用最佳方式壓縮圖像，但同樣是一個冒險，或者產生錯誤。
譯者有話說：顯然，現在還沒有誰推薦PNG格式的圖像，可能只因為IE對其糟糕的支持。GIF到目前為止還沒有解決專利問題，使用它還是得冒侵權之危險。PNG很有潛力，同樣也具有透明能力，色數也不止GIF的可憐的256色而已，卻具有JPEG的高清晰、高保真度，這也是我，以個人的立場向你推薦的原因。
請參考GIF還是PNG.

顯示全部樓層 · 發表於 2007-8-25 17:38:11

9、表格table ──使用表格式的數據

漫步萬維網世界，有多少HTML表格被用來佈局頁面，還一度被濫用。我們會在 CSS高級教程中學習怎樣不用表格佈局頁面。表格的正確用處應該是，展示表格式的數據。

有很多標籤可以用在表格中，在初級指南中教授表格是如何工作的確實是一件比較困難的事情，沒有關係，我們一步一步來，先來看一個例子。例子什麼時候都是學習的好方法。

把下面的代碼拷貝到你文檔的主體(<body>與</body>中），我們就可以明細每個標籤是任何工作的了。

Example Source Code [www.cn-webmaster.cn]
<table>
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
<td>Row 1, cell 3</td>
</tr>
<tr>
<td>Row 2, cell 1</td>
<td>Row 2, cell 2</td>
<td>Row 2, cell 3</td>
</tr>
<tr>
<td>Row 3, cell 1</td>
<td>Row 3, cell 2</td>
<td>Row 3, cell 3</td>
</tr>
<tr>
<td>Row 4, cell 1</td>
<td>Row 4, cell 2</td>
<td>Row 4, cell 3</td>
</tr>
</table>

table元素定義標籤；tr元素定義表格中的一行；td元素定義數據單元格，這必須包含在tr標籤內，如上所示。

假設一個3x4的表格，包含12個單元，這就需要4個tr元素來定義行數和3個td元素在各行，總共有12個td元素。

		自動登錄	找回密碼
密碼			免费注册

XHTML與CSS入門經典從零開始系列教程！

評分

相關帖子

瀏覽過的版塊

XHTML與CSS入門經典 從零開始系列教程！

評分

相關帖子

瀏覽過的版塊

XHTML與CSS入門經典從零開始系列教程！