bird alone安卓下载

書名： HTML5 移動Web開發(fā)從入門到精通（微課精編版）
作者名：前端科技
本章字數(shù)： 3948字
更新時間： 2019-11-15 20:21:42

1.4　HTML5基本結(jié)構(gòu)

HTML是一種標記語言，不是編程語言。標記內(nèi)容需要用到元素，元素描述內(nèi)容是什么，而非內(nèi)容顯示效果。CSS才負責控制內(nèi)容的外觀（如字體、顏色、陰影等）。因此，不管用戶最后讓段落顯示為綠色，還是紅色，它們都是p元素，這是HTML唯一關心的焦點。在學習和創(chuàng)建HTML網(wǎng)頁時，應該始終牢記這一原則。

1.4.1　新建HTML5文檔

使用記事本新建一個文本文件，保存為index.html。注意，擴展名為.html，而不是.txt。然后輸入下面的代碼。

提示：如果使用專業(yè)網(wǎng)頁編輯器，如Dreamweaver等，新建網(wǎng)頁文件時，它會自動幫助完成上面代碼的輸入。

通過上面的代碼，可以看到每個網(wǎng)頁都由固定的結(jié)構(gòu)開始構(gòu)建。這段HTML代碼創(chuàng)建的網(wǎng)頁相當于一張白紙，因為訪問者看到的內(nèi)容位于主體部分（即<body>和</body>之間的部分），而這一部分現(xiàn)在是空的，如圖1.1所示。

圖1.1　空白頁面

每個網(wǎng)頁都包含DOCTYPE、html、head和body元素，它們是網(wǎng)頁的基礎。在這個頁面中，可以定制的內(nèi)容包括兩項：一是設置lang屬性的語言代碼，二是<title>和</title>之間的文字。HTML使用“<”和“>”字符包圍HTML標簽。開始標簽（如<head>）用于標記元素的開始，結(jié)束標簽（如</head>）用于標記元素的結(jié)束。有的元素沒有結(jié)束標簽，如meta。

【拓展】

完整的HTML文檔應該包含兩部分結(jié)構(gòu)：頭部信息（<head>）和主體內(nèi)容（<body>）。為了使網(wǎng)頁內(nèi)容更加清晰、明確，容易被他人閱讀，或者被瀏覽器以及各種設備所理解，新建HTML5文檔之后，需要完善這兩部分內(nèi)容，構(gòu)建基本的網(wǎng)頁框架。

一個網(wǎng)頁主要包括以下3個部分。

　文本內(nèi)容：在頁面上讓訪問者了解頁面內(nèi)容的純文字，如關于產(chǎn)品、資訊的內(nèi)容，以及其他任何內(nèi)容。
　外部引用：使用這些引用來加載圖像、音頻、視頻文件，以及樣式表（控制頁面的顯示效果）和JavaScript文件（為頁面添加行為）。這些引用還可以指向其他的HTML頁面和資源。
　標記：對文本內(nèi)容進行描述，并確保瀏覽器能夠正確顯示。提示，HTML一詞中的字母M就代表標記。

每一個HTML頁面的開頭部分，還會包含一些信息，主要用于瀏覽器和搜索引擎（如百度、Google等）的解析。瀏覽器不會將這些信息呈現(xiàn)給訪問者。

網(wǎng)頁內(nèi)容都由文本構(gòu)成，因此網(wǎng)頁可以保存為純文本格式，可以在任何平臺上使用任何瀏覽器查看，無論是臺式機、手機、平板電腦，還是其他平臺。這個特性也確保了用戶很容易創(chuàng)建HTML頁面。

提示：本書使用HTML泛指這門語言本身。如果需要突出HTML某一版本獨有的特殊屬性，則使用它們各自的名稱。例如，HTML5引入了一些新的元素，并重新定義或刪除了HTML4和XHTML 1.0中的某些元素。

1.4.2　網(wǎng)頁頂部和頭部

完整的HTML文檔應該包含以下兩部分結(jié)構(gòu)。

　頭部信息（head）
　主體內(nèi)容（body）

為了使網(wǎng)頁內(nèi)容更加清晰、明確，容易被他人閱讀，或者被瀏覽器，以及各種設備所理解，新建HTML5文檔之后，需要完善這兩部分內(nèi)容，構(gòu)建基本的網(wǎng)頁框架。

頁面內(nèi)容位于主體部分，<body>開始標簽以上的內(nèi)容都是為瀏覽器和搜索引擎準備的。<!DOCTYPE html>部分（簡稱為DOCTYPE）告訴瀏覽器這是一個HTML5頁面。DOCTYPE應該始終位于代碼的第一行，寫在HTML頁面的頂部。

html元素包著頁面的其余部分，即<html>開始標簽和</html>結(jié)束標簽（表示頁面的結(jié)尾）之間的內(nèi)容。

<head>和</head>標簽之間的區(qū)域表示網(wǎng)頁文檔的頭部。頭部代碼中，有一部分是瀏覽者可見的，即<title>和</title>之間的文本。這些文本會出現(xiàn)在瀏覽器標簽頁中。某些瀏覽器會在窗口的頂部顯示這些文本，作為網(wǎng)頁的標題顯示。此外，這些文本通常還是瀏覽器書簽的默認名稱，它們對搜索引擎來說也是非常重要的信息。

1.4.3　網(wǎng)頁主體

嘗試為頁面添加一些主體內(nèi)容。

在桌面瀏覽器中呈現(xiàn)這段HTML代碼效果，如圖1.2所示。這是頁面在IE中顯示的效果，在其他瀏覽器中的效果也是相似的。使用瀏覽器查看網(wǎng)頁時，不會顯示包圍文本內(nèi)容的標記，但是這些標記是非常有用的，我們使用它們來描述內(nèi)容，如<p>標記用于表示段落的開始。

圖1.2　添加主體內(nèi)容

整個頁面包含了3部分：文本內(nèi)容、外部文件的引用（圖像的src值和鏈接的href值）和標記。HTML提供了很多元素，上面的示例演示了6種最為常見的元素：a、article、em、h1、img和p。每個元素都有各自的含義，例如，h1是標題，a是鏈接，img是圖像。

注意：在代碼中行與行之間通過回車符分開，不過它不會影響頁面的呈現(xiàn)效果。對HTML進行代碼縮進顯示，與內(nèi)容在瀏覽器中的顯示效果沒有任何關系，但是pre元素是一個例外。習慣上，我們會對嵌套結(jié)構(gòu)的代碼進行縮進排版，這樣會更容易看出元素之間的層級關系。

1.4.4　認識標簽

標簽和元素是兩個不同的概念，一個標簽由3部分組成：元素名、屬性和值。

1. 元素

元素就是用來描述網(wǎng)頁不同部分的標簽名稱：這是一個標題，那是一個段落，而那一組鏈接是一個導航。有的元素可以包含一個或多個屬性，屬性用來進一步描述元素。

大多數(shù)標簽由開始標簽、包含內(nèi)容和結(jié)束標簽組成。開始標簽是放在一對尖括號中的元素名，以及可能包含的屬性，結(jié)束標簽是放在一對尖括號中的斜杠加元素名。例如：

    <em>小白</em>

　開始標簽：<em>
　內(nèi)容文本：小白
　結(jié)束標簽：</em>

這是一個典型的HTML元素。開始標簽、結(jié)束標簽，以及包含描述元素的文字。習慣上，標簽采用小寫字母。

還有一些元素是空元素，既不包含文本，也不包含其他元素。它們看起來像是開始標簽和結(jié)束標簽的結(jié)合，由左尖括號開頭，然后是元素的名稱和可能包含的屬性，接著是一個可選的空格和一個可選的斜杠，最后是必有的右尖括號。例如：

    <img src="images/xiaobai.jpg" width="50" alt="小白者，我也" />

img元素并不包含任何文本內(nèi)容。alt屬性中的文字是元素的一部分，并非顯示在網(wǎng)頁中的內(nèi)容?？赵刂挥幸粋€標簽，同時作為元素的開始標簽和結(jié)束標簽使用。

提示：在HTML5中，結(jié)尾處的空格和斜杠是可選的。不過，最后面的“>”是必需的。元素的名稱都用小寫字母。不過，HTML5對此未做要求，也可以使用大寫字母。除非特殊需要，否則不推薦使用大寫字母。

2. 屬性和值

屬性包含了元素的額外信息。在HTML5中，屬性值（參見1.3.2小節(jié)）兩邊的引號是可選的，但習慣上建議寫上。與元素的名稱一樣，盡量使用小寫字母編寫屬性的名稱。例如：

    <label  for="email">電子郵箱</label>

這是一個label元素（關聯(lián)文本標簽與表單字段）。屬性總是位于元素的開始標簽內(nèi)，屬性的值通常放在一對引號中。

元素（如a和img）可以有多個屬性，每個屬性都有各自的值。屬性的順序并不重要。不同的“屬性／值”對之間用空格隔開。例如：

    <a  rel="external" title="HTML5參考手冊">HTML5</a>

有的屬性可以接受任何值，有的屬性則有限制。最常見的是那些僅接受預定義值（即枚舉值）的屬性。此時，用戶必須從一個標準列表中選一個值，枚舉值一般用小寫字母編寫。例如：

    <link  rel="stylesheet"  media="screen" href="style.css"  />

用戶只能將link元素的media屬性設為all、screen、print等值中的一個，不能像href屬性和title屬性那樣可以輸入任意值。

有很多屬性的值需要設置為數(shù)值，特別是那些描述大小和長度的屬性。數(shù)值不需要包含單位，只需輸入數(shù)字本身。圖像和視頻的寬度和高度是有單位的，默認為像素。

有的屬性（如href和src）用于引用其他文件，它們只能包含URL形式的字符串值。

還有一種特殊的屬性稱為布爾屬性（參見1.3.2小節(jié)），這種屬性的值是可選的，因為只要這種屬性出現(xiàn)就表示其值為真。如果要包含一個值，可寫上屬性名本身。布爾屬性也是預定義好的，無法自創(chuàng)。例如：

    <input  type="email"  name="emailaddr"  required />

上面代碼提供了一個讓用戶輸入電子郵件地址的輸入框。布爾屬性required表示用戶必須填寫該輸入框。布爾屬性不需要屬性值，如果一定要加上屬性值，則可以編寫為required=“required”。

3. 父元素和子元素

如果一個元素包含另一個元素，它就是被包含元素的父元素，被包含元素稱為子元素。子元素中包含的任何元素都是外層的父元素的后代。這種類似家譜結(jié)構(gòu)是HTML代碼的結(jié)構(gòu)特性，它有助于在元素上添加樣式和應用JavaScript行為。

注意：當元素中包含其他元素時，每個元素都必須嵌套正確，也就是子元素必須完全被包含在父元素中，不能把子元素的結(jié)束標簽放在外面。例如：

在這段HTML代碼中，article元素是h1、img和p元素的父元素。反過來，h1、img和p元素是article元素的子元素（也是后代）。p元素是em和a元素的父元素。em和a元素是p元素的子元素，也是article元素的后代（但不是子元素）。反過來，article元素是它們的祖先元素。

1.4.5　網(wǎng)頁文本內(nèi)容

網(wǎng)頁中顯示的文本內(nèi)容，就是元素中包含的文本，它是網(wǎng)頁上最基本的構(gòu)成成分。在HTML早期版本中，只能使用ASCII字符集。

ASCII字符集僅包括英語字母、數(shù)字和少數(shù)幾個常用符號。開發(fā)人員必須用特殊的字符引用來創(chuàng)建很多日常符號。例如， 表示空格，©表示版權(quán)符號?，®表示注冊商標符號?等。完整列表請參考http://www.elizabethcastro.com/html/extras/entities.html。

注意：瀏覽器在呈現(xiàn)HTML頁面時，會把文本內(nèi)容中的多個空格或制表符壓縮成單個空格，把回車符和換行符轉(zhuǎn)換成單個空格，或者忽略。字符引用也替換成對應的符號，如把©顯示為?。Unicode字符集極大緩解了特殊字符的顯示問題。使用UTF-8對頁面進行編碼，并用同樣的編碼保存HTML文件已成為一種標準做法。推薦在網(wǎng)頁中將charset值指定為UTF-8。HTML5不區(qū)分大小寫，UTF-8和utf-8的結(jié)果是一樣的。

1.4.6　網(wǎng)頁非文本內(nèi)容

在網(wǎng)頁中除了大量的文本內(nèi)容外，還有很多非文本內(nèi)容，如圖像、鏈接、視頻、音頻等。從網(wǎng)頁外引用圖像和其他非文本內(nèi)容時，瀏覽器會將這些內(nèi)容與文本一起顯示。在默認情況下，鏈接文本的顏色與其他文本的顏色是不一樣的，而且還帶有下畫線。

外部文件（如圖像）實際上并沒有存儲在HTML文件中，而是單獨保存，頁面只是簡單地引用了這些文件。例如：

在基本HTML文檔中，有一個對圖像文件xiaobai.jpg的引用（img元素的src屬性），瀏覽器在加載頁面其他部分的同時，會請求、加載和顯示這個圖像。該頁面還包括一個指向關于HTML5參考頁面的鏈接（a元素的href屬性）。

瀏覽器可以處理圖像和鏈接，不過無法處理其他文件類型。例如，對于一般瀏覽器來說，要查看PDF格式的外部文件，就需要在系統(tǒng)中預先安裝好Adobe Reader；要查看電子表格，就需要預先安裝好Open Office等軟件。早期HTML沒有內(nèi)置的方法播放視頻和音頻文件，各軟件廠商都開發(fā)出相應的軟件，用戶可以下載并安裝這些軟件，從而彌補瀏覽器缺失的功能。這樣的軟件稱為插件。

在瀏覽器插件中，使用最為廣泛的是Flash。多年以來，F(xiàn)lash插件是播放網(wǎng)頁視頻必備的工具。不過，這個插件也有一些問題，如它會耗費較多的計算資源。HTML5新增加了audio和video元素，無需使用插件就可以播放視頻和音頻了。不過，現(xiàn)代瀏覽器也提供了內(nèi)置的媒體播放器，用戶仍然可以使用Flash播放器作為舊瀏覽器的備用工具。

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

HTML5 移動Web開發(fā)從入門到精通（微課精編版）

1.4 HTML5基本結(jié)構(gòu)

1.4.1 新建HTML5文檔

1.4.2 網(wǎng)頁頂部和頭部

1.4.3 網(wǎng)頁主體

1.4.4 認識標簽

1.4.5 網(wǎng)頁文本內(nèi)容

1.4.6 網(wǎng)頁非文本內(nèi)容