《Javascript從入門到精通》第2章——HTML基礎

時間 2019-11-07

標籤 javascript 入門精通 html 基礎欄目 JavaScript 简体版

原文原文鏈接

2.1 HTML語言概述
HTML 和網絡是緊密鏈接的，它應網絡傳輸的需求而開發，配合文檔顯示而發展。HTML 是1989
年由Timonthy Berners-Lee所制定出來的，隨後，由NCSA 推出的Mosaic 瀏覽器將HTML 語言推廣並
獲得愈來愈多用戶的歡迎。可是因爲多種瀏覽器同時流行於世界各地，它們支持 HTML 語言的標準也
不相同，這樣限制了 HTML 標記語言自己的發展。逐漸，W3C（World Wide Web Consortium）網絡標
準化組織聯手一些較爲流行的瀏覽器開發商一同定義了HTML 標準，而且力推瀏覽器解釋語言和顯示
方法的統一，這也在另外一方面爲HTML 標準的統一塊兒到了推進做用。
2.1.1 HTML 概述
HTML 語言是一種標記語言，它不須要編譯，能夠直接由瀏覽器執行。在標準網頁設計中HTML
負責填充網頁的內容，HTML 編寫的超文本文檔（文件）稱爲HTML 文檔（網頁），它包含了一些
HTML 元素，使用.html 或.htm 爲文件名後綴，能獨立於各類操做系統平臺，如UNIX、Windows 等。
HTML 文檔是普通的文本文檔（ASCII），任何文字編輯器均可以編輯，只要能將文件另存成ASCII
純文字格式便可。可使用普通的文本編輯器，如 Windows 中的記事本、寫字板，也能夠採用專用的
HTML 編輯工具，如 Eclipse 、Dreamweaver、Homesite 等。專用的 HTML 編輯工具在編寫過程當中可以
提示標籤和標籤屬性，並可以自動檢查HTML 文檔中的語法錯誤並協助改正。
HTML 文本包含頁面自己的文本和表示頁面元素、結構、格式及其餘超文本連接的 HTML 標籤兩
種信息。HTML 標籤規定了 HTML 文本的邏輯結構，而且控制其顯示格式，也就是說，設計者能夠用
標籤訂義HTML 文本的邏輯結構，可是文本的實際顯示內容則由瀏覽器來負責解釋。可使用 HTML
標籤來設置連接、標題、段落、列表和字符等區域。
大部分的HTML 標籤是以「< 標籤名> 相應內容</ 標籤名> 」形式出現的，標籤的名字用尖括號括
起來。HTML 標籤通常有起始標籤和結束標籤兩種，分別放在它起做用的文本兩邊。起始標籤與結束
標籤很類似，只是結束標籤在「< 」號後面多了一個斜槓「/」。在後面的章節中還會看到，某些 HTML
元素只有起始標籤而沒有相應的結束標籤，還有一些元素的結束標籤是能夠省略的，標籤名不區分大
小寫。另外，在起始標籤中能夠包含屬性（attribute），其位置是從標籤名以後空一格的地方開始的，
在結束符「> 」處結束。屬性的做用是向客戶端提供關於頁面元素內容以及如何處理的附加信息，用戶
能夠在這個區域對文本中的一些具體屬性，如大小、顏色、字體等信息進行設置。
2.1.2 HTML 文檔結構
標準的HTML 文檔由標籤和要顯示在網頁上的內容組成。HTML 用於描述功能的符號稱爲「標籤」，
如<html> 、<body>、<table>等。HTML 標籤規定了HTML 文檔的邏輯結構，而且控制文檔的顯示格式，
而後由瀏覽器來負責解釋並顯示頁面。經過使用標籤能夠區分文本文件的各個組成部分，還能夠對網
頁上的文字、表格、圖片等多媒體數據所出現的位置、形式、順序及網頁間的超級連接關係進行設定。

下面先以例子來了解HTML 語言的基本結構，具體代碼以下：
<html> //HTML 文檔開始
<head> //HTML 文檔的頭部分
<title>我的資料</title> //文檔標題
</head>
<body text="red">  //HTML文檔的主體
<h3> 姓名：張三</h3>
<h3> 生日：1978年10月4 日</h3>
<h3> 電子郵箱：zhangsan@163.com</h3>
</body>
</html> //HTML 文檔結束
該HTML 文件通過瀏覽器解釋後，顯示
的網頁內容如圖2-1 所示。
從上面的例子能夠看出，HTML 文檔由許
多成對出現的控制標記組成，也能夠稱爲標
籤，如<html> 與</html>、<body>與</body>等。
在後面的章節中將介紹在HTML 文檔中組成
文檔架構的幾個主要的HTML 標籤。
2.2 HTML標籤
標籤都封裝在一對尖括號「<…>」之中。標籤只改變網頁的顯示方式，自己不會顯示在窗口中。
HTML 文檔中最早出現的標籤是<html> 標籤。<html> 標籤是文檔標識符，它是成對出現的，首標籤
<html> 和尾標籤</html>分別位於文檔的最前面和最後面，明確地表示文檔是由超文本標記語言
（HTML ）編寫的。該標籤不帶任何屬性。
事實上，如今經常使用的Web 瀏覽器（Netscape 和IE ）均可以自動識別HTML 文檔，並不要求有<html>
標籤，也不對該標籤作任何操做。可是，爲了提升文檔的適用性，使編寫的 HTML 文檔都能適應日新
月異的Web 瀏覽器的變化，仍是應該養成使用這個標籤的習慣。
在<html>...</html> 之間主要包括如下幾個部分。
2.2.1 頭部標籤<head>…</head>
Head是英文「頭」的意思。習慣上用戶把HTML 文檔分爲文檔頭和文檔主體兩部分。文檔主體部
分就是在Web 瀏器窗口的用戶區內看到的內容，而文檔頭部分用來規定該文檔的標題（出如今 Web
瀏覽器窗口的標題欄中）和文檔的一些屬性。<head>標籤對的做用就是控制文檔的頭部信息。此標籤
中間可使用<title>…</title> 、<script>…</script> 標籤對，在此標籤對中間能夠放置用戶編寫的
JavaScript 代碼。
HTML 文檔的標籤是能夠嵌套的，即在一對標籤中能夠嵌入另外一對子標籤，用來規定母標籤所含

圖2-1 運行結果圖

範圍的屬性或其中某一部分的內容，嵌套在<head>…</head>標籤對中使用的主要有<title> 標籤和
<isindex>標籤。
2.2.2 標題標籤<title>…</title>
<title> 標籤是成對出現的，用以規定HTML 文檔的標題。在<title> 和</title> 之間的內容將顯示在
Web 瀏覽器窗口的標題欄中。另外，<title>…</title> 標籤對只能放在<head>…</head>標籤對之間，而
且其內部不能包含其餘標籤。
從圖2-1 中能夠看到，代碼段「<title> 我的資料</title> 」控制顯示了網頁的標題，「我的資料」4
個字出如今IE 瀏覽器的左上方。
2.2.3 索引標籤<isindex>
<isindex>是一個單獨標籤，不須要成對出現，它用來規定文檔的屬性，說明該文檔是能夠按關鍵
字索引的。下面經過一個簡單的例子來講明該標籤的做用，具體代碼以下：
<html>
<head>
<title> 這是一個「ISINDEX」標籤的範例程序。</title>
<ISINDEX>
</head>
<body>
HTML 和網絡是緊密鏈接的，它應網絡傳輸的需求而開發，配合文檔顯示而發展。HTML 是在1989 年由
Timonthy Berners-Lee 所制定出來的，隨後，由NCSA 推出Mosaic瀏覽器，將HTML 語言推廣並獲得愈來愈多
用戶的歡迎。可是因爲多種瀏覽器同時流行於世界各地，它們支持HTML 語言的標準也不相同，這樣限制了HTML
標記語言自己的發展。逐漸，W3C（World Wide Web Consortium）網絡標準化組織聯手一些較爲流行的瀏覽器
開發商一同定義HTML 標準，而且力推瀏覽器解釋語言和顯示方法的統一，這也在另外一方面爲 HTML 標準的統一
起到了關鍵做用。
</body>
</html> 瀏覽器

運行該代碼，在IE 6.0 中顯示結果如圖2-2 所示。

圖2-2 使用<isindex>標籤的運行結果
網絡

2.2.4 主體標籤<body>…</body>
<body>標籤是成對出現的。在<body>…</body>標籤對之間的內容，將顯示在Web 瀏覽器窗口的
用戶區內，它是 HTML 文檔的主體部分。能夠把 HTML 文檔的主體區域簡單地理解成標題之外的全部
部分，該部分能夠包含<table>、<font> 、<img> 、<div>等標籤。結束標籤</body>用來指明主體區域的
結尾。在<body>標籤中能夠規定整個文檔的一些基本屬性。
bgcolor：指定HTML 文檔的背景色。
text ：指定HTML 文檔中文字的顏色。
link ：指定HTML 文檔中待鏈接超連接對象的顏色。
alink：指定HTML 文檔中鏈接中超連接對象的顏色。
vlink：指定HTML 文檔中已鏈接超連接對象的顏色。
background ：指定HTML 文檔的背景文件。
在指定對象的顏色時，可使用該顏色的代碼，或直接使用該顏色對應的英文單詞，例如，指定
HTML 文檔的背景色爲綠色，能夠表示爲「<body bgcolor="green">」，也能夠表示爲「<body
bgcolor="#0080000"> 」。爲了便於記憶，建議讀者直接用相應的英文單詞指定顏色。能夠經過下面的
實例來看<body>標籤對中各類屬性的使用狀況。
爲網頁設計一個背景顏色，而且在網頁上輸入一段文字，具體代碼以下：
<html >
<head>
<title>HTML 基本源文件</title>
</head>
<body text="#000033" bgcolor="yellow">
<center>
<h1 >HTML文檔中BODY 標籤的使用</h1>
<p align="left">
<font size="+2" face=" 新宋體" color="#0000FF">
BODY 標籤之間顯示的即爲瀏覽器上看到的網站內容，頁面上顯示的任何東西都包含在這兩個標籤之中。能夠
把HTML 文檔的主體區域簡單地理解成標題之外的全部部分
</font>
</p>
</center>
</body>
</html>
運行該段代碼的結果如圖2-3 所示。

圖2-3 使用<body>標籤的運行結果
架構

2.2.5 特殊字符
在HTML 中有不少特殊的符號是須要特別處理的，例如，「< 」、「> 」這兩個符號是用來表示標
籤的開始和結束的，沒有辦法經過直接按鍵來輸入，必須用輸入編碼表示法"<" 來輸入。
一般狀況下，HTML 會自動截去多餘的空格。無論加多少空格，都被看做一個空格。若是要顯示
空格中的多個空格，可使用「  」表示空格。經常使用的特殊字符及顯示結果如表2-1 所示。
表2-1 經常使用的特殊字符及顯示結果
編輯器

閱讀全文：http://wenku.it168.com/d_000513923.shtml ide

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。