设计之家 > 教程 > 網頁教程 > HTML教程 >

XHTML基礎教程(一)

作者:佚名 來源:網絡 時間:2007-12-24

什么是HTML?

簡單點說:HTML是用來做網頁的。它很簡單,在接下來的1~2分鐘之內你就會跟著我用HTML做一個簡單的網頁。

復雜點說:HTML(HyperTextMarkupLanguage的縮寫),即超文本鏈接標記語言。它是在互聯網發布超文本文件(通常所說的網頁)的通用語言。

什么是XHTML?更先進難懂的技術?

簡單點說:X是嚇唬人的,其實XHTML就是嚴謹而準確的HTML。如果說HTML是漢語,那么XHTML就是標準普通話。對于現在才剛剛開始學習網頁設計的朋友,直接學習XHTML是最佳的選擇。

復雜點說:XHTML是HTML的“升級”產品。事實上它也屬于HTML家族,對比以前各個版本的HTML,它具有更嚴格的書寫標準、更好的跨平臺能力。由于某些需要,XHTML將以前版本的HTML能夠實現的一些功能交給了CSS,這意味著你將需要學習兩種技術。但是這確實是Web未來發展的潮流。X代表“可以擴展的”。

學習XHTML的基礎

學習XHTML不需要任何基礎。相反,XHTML是學習學多其他知識的必要基礎。有些人可能聽說需要學習完HTML才可以學XHTML,事實并非如此,菜鳥吧(cainiao8.com)的XHTML教程就是面向沒有任何基礎的網頁設計新手的。如果你已經熟練的掌握了HTML,就不必看我們的入門教程了,我們為已經熟悉了HTML的站長準備了從HTML到XHTML。

學習XHTML的方法

閱讀XHTML教程以及其中的實例當然是學習XHTML的好辦法,但是僅僅如此是絕對不夠的。在學習的過程中,你可以找一些你以前比較喜歡瀏覽的站點,看看他們在實際的網站設計過程中是如何使用XHTML的。你只需要點擊瀏覽器工具欄上的“查看”按鈕,再選擇“查看源文件”,就可以看到該頁的代碼了。

好了,關于XHTML的介紹就說到這里,下面就讓我們開始學習XHTML吧。

用一分鐘制作自己的第一個網頁:

下面我們來試著做一個簡單的網頁,希望您能跟著我們操作,這只會花費您一分鐘時間。現在您也許不知道那些尖括號“<>”和里面的字母究竟是些什么東西,不要擔心,我們會在后面的教程中向您介紹。

首先請運行記事本,或在任意位置新建一個文本文檔,在記事本內輸入如下內容:

以下為引用的內容:
<html>
<head>
<title>我是這個網頁的標題</title>
</head>
<body>
<p>這是我的第一個網頁。</p>
</body>
</html>

輸入完畢后將文件保存,命名為“index.html”。(點擊“文件”―>“另存為”。在“文件名”一欄填入“index.html”,在“保存類型”一欄選擇"所有文件",然后點擊“保存按鈕”)

保存之后,雙擊該文件,瀏覽器就會自動打開這個網頁了。請確認一下你的網頁是否與該頁面相同,如果相同,那么你就成功地完成了自己的第一個比較簡陋的網頁。

請注意,這只是一個簡單的頁面,雖然它在語法上符合XHTML的標準,但是如果要作為一個完整的、符合W3C標準的XHTML網頁,它還缺少一些內容。相關內容將在后面的教程中介紹。這個網頁僅僅是用來講解一些基礎的XHTML知識。

基礎知識講解

我們剛剛制作的網頁以<html>開頭,以</html>結尾,它們分別代表網頁文件的開始和結束。

英文中head是頭的意思,body是身體的意思。網頁的<head></head>和<body>< /body>兩部分就分別代表了網頁的“頭”和“身子”。也許你注意到了,我們網頁的“頭”里面“有一個<title>< /title>。title一詞是標題的意思,網頁的標題(title)將會顯示在瀏覽器上方的標題欄中。而網頁的身子,也就是< body>與</body>標簽中間的內容將作為正文被顯示在瀏覽器中。

這個網頁很單薄,head和body中都沒有什么內容。我們會在以后的教程中逐漸豐富網頁的內容。但是現在請您記住一個概念:網頁的頭(head)是為瀏覽器寫的,它將不會顯示在頁面上,而身子(body)是為網站的用戶寫的,是瀏覽器將要顯示的內容。

菜鳥惡搞XHTML之錯誤示例

打開下面這兩個錯誤示例看看。它們的代碼都存在十分嚴重的錯誤,但是瀏覽器卻會準確無誤地顯示這兩個網頁。

示例1――身子長在腦袋里
<html>
<head>
<title>我是這個網頁的標題</title>
<p>這是我的第一個網頁。</p>
</head>
<body>
</body>
</html>

看看上面這個網頁,<head>和</head>之間的內容正常的顯示在頁面上了。但是這是滑稽的錯誤,把身子放在腦袋里了。

示例二――腦袋長在脖子下
<html>
<head>
</head>
<body>
<title>我是這個網頁的標題</title>
<p>這是我的第一個網頁。</p>
</body>
</html>

瀏覽器的適應能力實在是令人佩服,即使你將腦袋放在身子里它也認得出來。看看標題欄,標題完全正常顯示。

好了,在實際應用的時候請不要犯上面這種低級錯誤。這會造成嚴重的后果:搜索引擎可能不收錄你的網站;使用手機或者其他移動設備瀏覽你網站的朋友可能遇到未知錯誤。下面就趕快讓我們來進入XHTML的核心內容吧。

标签:

相關文章:

推薦設計

最新文章