書名： HTML+CSS網頁開發技術精解
作者名：吳玉中等編著
本章字數： 2233字
更新時間： 2018-12-30 14:34:28

第1篇 HTML篇

第1章網頁標識語言HTML基礎

學前必讀：

隨著網絡的不斷普及，網頁已經被大多數人所熟悉。但是這些頁面是怎樣搭建起來的呢？又是怎樣顯示的呢？其實網頁是由一種簡單的標記語言HTML構成的。HTML語言是組成網頁的基本語言，它是一切網頁制作的基礎。如果能夠熟悉掌握并應用HTML代碼，大到做網站，小到個人網頁等都會有很大的好處。本章將講解HTML的基本概念，以及開發HTML所使用的軟件的相關知識。

本章重點：

● HTML語言概述

● HTML文件的基本結構

● 編寫簡單的HTML實例

● 運行并瀏覽HTML文件

1.1 HTML語言概述

HTML是目前網絡上應用最為廣泛的語言，也是構成網頁文檔的主要語言。其實它并不能算做一種程序語言，因為它缺少語言所應有的特征。HTML通過IE等瀏覽器的翻譯，將網頁中所要呈現的內容展現在用戶眼前。

1.1.1 認識HTML語言

HTML的英文全稱是Hyper Text Markup Language，中文通常稱做超文本標記語言或超文本標識語言，HTML是Internet上用于編寫網頁的主要語言，它提供了精簡而有力的文件定義，可以設計出多姿多彩的超媒體文件，通過HTTP通信協議，使得HTML文件可以在全球互聯網（World Wide Web）上進行跨平臺的文件交換。

HTML文件為純文本的文件格式，可以用任何的文本編輯器或者使用FrontPage、Dreamweaver等網頁制作工具來編輯。至于文件中的文字、字體、字體大小、段落、圖片、表格及超鏈接，甚至是文件名稱都是以不同意義的標簽來描述，以此來定義文件的結構與文件間的邏輯關聯。簡而言之，HTML是以標簽來描述文件中的多媒體信息。如圖1.1所示是HTML編寫的網頁，由文字、圖像和多媒體等組成。

圖1.1 HTML編寫的網頁

1.1.2 HTML語言的發展歷史

HTML作為定義萬維網的基本規則之一，最初由蒂姆·本尼斯李創建，用來解決科學家們共享網絡信息的問題。最初的HTML語言以文本格式為基礎，可以用任何編輯器和文字處理器來為網絡創建或轉換文本，僅有不多的幾個標簽。

下面是HTML的發展簡史。

HTML 1.0——1993年6月，互聯網工程工作小組（IETF）工作草案發布。

HTML 2.0——1995年11月發布。

HTML 3.2——1996年1月W3C推薦標準。

HTML 4.0——1997年12月W3C推薦標準。

HTML 4.01——1999年12月W3C推薦標準。

HTML 5.0——2008年8月W3C工作草案。

1.2 HTML文件的基本結構

HTML中每個用來作為標記的符號都可以看做是一條命令，它告訴瀏覽器應該如何顯示文件的內容。在制作網頁的時候，很多制作完的網頁最終效果為.htm或.html格式的文件，這就明確地告訴用戶，網頁在瀏覽器中被解讀為HTML格式的文件，而這一文件的內容顯示到瀏覽器中就是用戶所看到的“網頁”。每個被用戶看到的“網頁”在瀏覽器中都會還原成HTML的源代碼。

1.2.1 HTML文件結構

一個完整的HTML文檔必須包含三個部分：一個由<html>元素定義的文檔版本信息，一個由<head>定義各項聲明的文檔頭部和一個由<body>定義的文檔主體部分。<head>作為各種聲明信息的包含元素出現在文檔的頂端，并且要先于<body>出現。而<body>用來顯示文檔主體內容。

下面是一個HTML文件的基本結構。

    <html>文件開始標記
    <head>文件頭的內容</head>
    <body>文件主體的內容</body>
    </html>

從上面的代碼可以看出，HTML代碼分為三部分，其中各部分含義如下。

<html>…</html>：告訴瀏覽器HTML文件開始和結束的位置，其中包括<head>和<body>等標記。HTML文檔中所有的內容都應該在這兩個標記之間，一個HTML文檔總是以<html>開始，以</html>結束。

<head>…</head>：HTML文件的頭部標記，在其中可以放置頁面的標題以及文件信息等內容，通常將這兩個標簽之間的內容統稱為HTML的頭部。

<body>…</body>：用來指明文檔的主體區域，網頁所要顯示的內容都放在這個標記內，其結束標記</body>指明主體區域的結束。

1.2.2 編寫HTML文件的注意事項

在編寫HTML文件時，要注意以下幾點。

（1）“<”和“>”是任何標記的開始和結束。元素的標記要用尖括號括起來，并且在結束標記的前面加一個斜杠“/”，如<></>。

（2）在源代碼中不區分大小寫。

（3）任何回車和空格在源代碼中均不起作用。為了代碼的清晰，建議不同的標記之間用回車符進行換行。

（4）在HTML標記中可以放置各種屬性。

（5）要正確輸入標記。輸入標記時，不要輸入多余的空格，否則瀏覽器可能無法識別這個標記，導致無法正確顯示信息。

1.3 編寫簡單的HTML實例

HTML文件的編寫方法有兩種，一種是利用記事本編寫，另一種是在Dreamweaver中編寫HTML代碼。

1.3.1 使用記事本手工編寫HTML頁面

隨著Internet的日益普及，HTML網頁制作技術已經成為一種必要的技能。由于用HTML語言編寫的文件是ASCII文本文件，因此可以使用任意一個文本編輯器打開并編寫HTML文件，如Windows系統中自帶的“記事本”。

使用記事本編寫HTML文件的具體操作步驟如下。

（1）在Windows操作系統下，選擇“開始”→“所有程序”→“附件”→“記事本”命令，新建一個記事本，在記事本中輸入如圖1.2所示的代碼。

圖1.2 在記事本中輸入代碼

（2）當編輯完HTML文件后，選擇“文件”→“保存”命令，彈出“另存為”對話框，將它存為擴展名為.htm或.html的文件即可，如圖1.3所示。

圖1.3 “另存為”對話框

（3）單擊“保存”按鈕，這時該文本文件就保存成了HTML文件，在瀏覽器中瀏覽，效果如圖1.4所示。

圖1.4 瀏覽效果

1.3.2 使用Dreamweaver輔助編寫HTML頁面

Microsoft公司的FrontPage，Adobe公司的Dreamweaver、GoLive等軟件均能以可視化的方式進行網頁的編輯制作。使用Dreamweaver編寫HTML頁面的具體操作步驟如下。

（1）啟動Dreamweaver CS5，新建一個空白文檔，切換到代碼視圖，輸入以下代碼，如圖1.5所示。

圖1.5 輸入代碼

（2）輸入完代碼后，切換到設計視圖，效果如圖1.6所示。選擇“文件”→“保存”命令，保存文檔，即可完成HTML文件的編寫。

圖1.6 設計視圖

1.4 課后習題

1.填空題

（1）HTML是萬維網文檔發布和瀏覽的基本格式。它具有很多特點，如______、______，特別是______，這些特點使它成為萬維網較好的文檔格式。

（2）HTML文件的編寫方法有兩種，一種是利用______編寫，另一種是在______中編寫HTML代碼。

（3）HTML文檔以______為擴展名，將HTML源代碼輸入到記事本并保存之后，可以在瀏覽器中打開文檔以查看其效果。

2.操作題

使用記事本手工編寫一個簡單的HTML頁面。

官术网_书友最值得收藏!

HTML+CSS網頁開發技術精解