财神捕鱼技巧打法教程

書名： HTML5+CSS3網站設計基礎教程
作者名：傳智播客高教產品研發部編著
本章字數： 4623字
更新時間： 2019-09-04 09:38:34

1.2 HTML5基礎

HTML5是新的HTML標準，是對HTML及XHTML的繼承與發展，越來越多的網站開發者開始使用HTML5構建網站。學習HTML5首先需要了解HTML5的語法基礎。本節將針對HTML5文檔基本格式、HTML5語法、HTML標記及其屬性、HTML5文檔頭部相關標記進行講解。

1.2.1 HTML5文檔基本格式

學習任何一門語言，都要首先掌握它的基本格式，就像寫信需要符合書信的格式要求一樣。HTML5標記語言也不例外，同樣需要遵從一定的規范。接下來將具體講解HTML5文檔的基本格式。

使用Dreamweaver新建HTML5默認文檔時，會自帶一些源代碼，如例1-2所示。

例1-2 example02.html

    1   <! doctype html>
    2   <html>
    3   <head>
    4   <meta charset="utf-8">
    5   <title>無標題文檔</title>
    6   </head>
    7   <body>
    8   </body>
    9   </html>

這些自帶的源代碼構成了HTML5文檔的基本格式，主要包括<! doctype>文檔類型聲明、<html>根標記、<head>頭部標記、<body>主體標記，具體介紹如下。

1.<! doctype>標記

<! doctype>標記標記位于文檔的最前面，用于向瀏覽器說明當前文檔使用哪種HTML標準規范，HTML5文檔中的DOCTYPE聲明非常簡單，代碼如下：

    <! doctype html>

只有在開頭處使用<! doctype>聲明，瀏覽器才能將該網頁作為有效的HTML文檔，并按指定的文檔類型進行解析。使用HTML5的DOCTYPE聲明，會觸發瀏覽器以標準兼容模式來顯示頁面。

2.<html>標記

<html>標記位于<! doctype>標記之后，也稱為根標記，用于告知瀏覽器其自身是一個HTML文檔，<html>標記標志著HTML文檔的開始，</html>標記標志著HTML文檔的結束，在它們之間的是文檔的頭部和主體內容。

3.<head>標記

<head>標記用于定義HTML文檔的頭部信息，也稱為頭部標記，緊跟在<html>標記之后，主要用來封裝其他位于文檔頭部的標記，例如<title>、<meta>、<link>及<style>等，用來描述文檔的標題、作者，以及與其他文檔的關系等。

一個HTML文檔只能含有一對<head>標記，絕大多數文檔頭部包含的數據都不會真正作為內容顯示在頁面中。

4.<body>標記

<body>標記用于定義HTML文檔所要顯示的內容，也稱為主體標記。瀏覽器中顯示的所有文本、圖像、音頻和視頻等信息都必須位于<body>標記內，<body>標記中的信息才是最終展示給用戶看的。

一個HTML文檔只能含有一對<body>標記，且<body>標記必須在<html>標記內，位于<head>頭部標記之后，與<head>標記是并列關系。

1.2.2 HTML5語法

為了兼容各個瀏覽器，HTML5采用寬松的語法格式，在設計和語法方面做了一些變化。具體如下。

1．標簽不區分大小寫

HTML5采用寬松的語法格式，標簽可以不區分大小寫，這是HTML5語法變化的重要體現。例如：

    <p>這里的p標簽大小寫不一致</P>

在上面的代碼中，雖然p標記的開始標記與結束標記大小寫并不匹配，但是在HTML5語法中是完全合法的。

2．允許屬性值不使用引號

在HTML5語法中，屬性值不放在引號中也是正確的。例如：

    <input checked=a type=checkbox/>
    <input readonly=readonly type=text />

以上代碼都是完全符合HTML5規范的，等價于：

    <input checked="a" type="checkbox"/>
    <input readonly="readonly" type="text" />

3．允許部分屬性值的屬性省略

在HTML5中，部分標志性屬性的屬性值可以省略。例如：

    <input checked="checked" type="checkbox"/>
    <input readonly="readonly" type="text" />

可以省略為：

    <input checked type="checkbox"/>
    <input readonly type="text" />

從上述代碼可以看出，checked="checked"可以省略為checked，而readonly="readonly"可以省略為readonly。

在HTML5中，可以省略屬性值的屬性如表1-1所示。

表1-1 HTML5可以省略屬性值的屬性

注意：

雖然HTML5采用比較寬松的語法格式，簡化了代碼。但是為了代碼的完整性及嚴謹性，建議網站開發人員采用嚴謹的代碼編寫模式，這樣更有利于團隊合作及后期代碼的維護。

1.2.3 HTML標記

在HTML頁面中，帶有“< >”符號的元素被稱為HTML標記，如上面提到的<html>、<head>、<body>都是HTML標記。所謂標記就是放在“< >”標記符中表示某個功能的編碼命令，也稱為HTML標簽或HTML元素，本書統一稱作HTML標記。

1．單標記和雙標記

為了方便學習和理解，通常將HTML標記分為兩大類，分別是“雙標記”與“單標記”。對它們的具體介紹如下。

（1）雙標記

雙標記是指由開始和結束兩個標記符組成的標記。其基本語法格式為：

    <標記名>內容</標記名>

該語法中“<標記名>”表示該標記的作用開始，一般稱為“開始標記”，“</標記名>”表示該標記的作用結束，一般稱為“結束標記”。和開始標記相比，結束標記只是在前面加了一個關閉符“/”。

例如：

    <h2>傳智播客網頁平面設計免費公開課</h2>

其中<h2>表示一個標題標記的開始，而</h2>表示一個標題標記的結束，在它們之間是標題內容。

（2）單標記

單標記也稱空標記，是指用一個標記符號即可完整地描述某個功能的標記。其基本語法格式為：

    < 標記名 />

例如：

    <hr />

其中<hr />為單標記，用于定義一條水平線。

通過上面的學習，已經了解HTML文檔中的單標記和雙標記。下面通過一個案例進一步演示HTML標記的使用，如例1-3所示。

例1-3 example03.html

    1   <! doctype html>
    2   <html>
    3   <head>
    4   <meta charset="utf-8">
    5   <title>傳智播客云課堂</title>
    6   </head>
    7   <body>
    8   <h2>傳智播客云課堂上線了</h2>
    9   <p>更新時間：2015年07月28日14時08分 來源：傳智播客</p>
    10  <hr/>
    11  <p>傳智云課堂是傳智播客在線教育平臺，可以實現晚上在家學習、在線直播教學、實
  時互動輔導等多種功能，專注于網頁、平面、UI設計以及Web前端的培訓。</p>
    12  </body>
    13  </html>

在例1-3中，使用了不同的標記來定義網頁，如標題標記<h2>、水平線標記<hr />、段落標記<p>。

運行例1-3，效果如圖1-7所示。

圖1-7 標記的使用

2．注釋標記

在HTML中還有一種特殊的標記—注釋標記。如果需要在HTML文檔中添加一些便于閱讀和理解但又不需要顯示在頁面中的注釋文字，就需要使用注釋標記。其基本語法格式為：

    <! -- 注釋語句 -->

例如，下面為<p>標記添加一段注釋：

    <p>這是一段普通的段落。</p>    <! --這是一段注釋，不會在瀏覽器中顯示。-->

需要說明的是，注釋內容不會顯示在瀏覽器窗口中，但是作為HTML文檔內容的一部分，可以被下載到用戶的計算機上，查看源代碼時就可以看到。

1.2.4 標記的屬性

使用HTML制作網頁時，如果想讓HTML標記提供更多的信息，例如，希望標題文本的字體為“微軟雅黑”且居中顯示，段落文本中的某些名詞顯示為其他顏色加以突出。此時僅僅依靠HTML標記的默認顯示樣式已經不能滿足要求，需要使用HTML標記的屬性加以設置。其基本語法格式為：

    <標記名 屬性1="屬性值1" 屬性2="屬性值2" ?> 內容 </標記名>

在上面的語法中，標記可以擁有多個屬性，必須寫在開始標記中，位于標記名后面。屬性之間不分先后順序，標記名與屬性、屬性與屬性之間均以空格分開。任何標記的屬性都有默認值，省略該屬性則取默認值。例如：

    <h1 align="center">標題文本<h1>

其中align為屬性名，center為屬性值，表示標題文本居中對齊，對于標題標記還可以設置文本左對齊或右對齊，對應的屬性值分別為left和right。如果省略align屬性，標題文本則按默認值左對齊顯示，也就是說<h1></h1>等價于<h1 align="left"></h1>。

了解了標記的屬性，下面在例1-3的基礎上通過標記的屬性對網頁進一步修飾，如例1-4所示。

例1-4 example04.html

    1   <! doctype html>
    2   <html>
    3   <head>
    4   <meta charset="utf-8">
    5   <title>傳智播客云課堂</title>
    6   </head>
    7   <body>
    8   <h2 align="center">傳智播客云課堂上線了</h2>
    9   <p align="center">更新時間：2015年07月28日14時08分 來源：傳智播客</p>
    10  <hr size="2"color="#CCCCCC"/>
    11  <p>傳智云課堂是<strong>傳智播客</strong>在線教育平臺，可以實現晚上在家學習、在
  線直播教學、實時互動輔導等多種功能，專注于網頁、平面、UI設計以及Web前端的培訓。</p>
    12  </body>
    13  </html>

在例1-4的第8行代碼，將標題標記<h2>的align屬性設置為center，使標題文本居中對齊，第9行代碼中同樣使用align屬性使段落文本居中對齊。另外，第10行代碼使用水平線標記的size和color屬性設置水平線為特定的粗細和顏色。

運行例1-4，效果如圖1-8所示。

圖1-8 使用標記的屬性

通過例1-4可以看出，在頁面中使用標記時，想控制哪部分內容，就用相應的標記選擇它，然后利用標記的屬性進行設置。

書寫HTML頁面時，經常會在一對標記之間再定義其他的標記，如例1-4中的第11行代碼，在<p>標記中包含了<strong>標記。在HTML中，把這種標記間的包含關系稱為標記的嵌套。例1-4中第11行代碼的嵌套結構為：

    <p>傳智云課堂是
      <strong>傳智播客</strong>
      在線教育平臺，可以實現晚上在家學習、在線直播教學、實時互動輔導等多種功能，
專注于網頁、平面、UI設計以及Web前端的培訓。
    </p>

需要注意的是，在標記的嵌套過程中，必須先結束最靠近內容的標記，再按照由內及外的順序依次關閉標記。例如要想使段落文本加粗傾斜，可以將加粗標記<strong>和傾斜標記<em>嵌套在段落標記<p>中，示例如下。

    <p><strong><em>我們正在學習標記的嵌套。</strong></em></p>   <! --錯誤的嵌套順
序-->
    <p><em><strong>我們正在學習標記的嵌套。</strong></em></p>   <! --正確的嵌套順
序-->

需要說明的是，不合理的嵌套可能在一個甚至所有瀏覽器中通過，但是如果瀏覽器升級，新的版本不再允許這種違反標準的做法，那么修改源代碼就會非常煩瑣。

注意：

本書在描述標記時，經常會用到“嵌套”一詞，所謂標記的嵌套其實就是一種包含關系。其實網頁中所顯示的內容都嵌套在<body></body>標記中，而<body></body>又嵌套在<html></html>標記中。

多學一招：何為鍵值對？

在HTML開始標記中，可以通過“屬性="屬性值"”的方式為標記添加屬性，其中“屬性”和“屬性值”是以“鍵值對”的形式出現的。

所謂“鍵值對”，簡單地說即為對“屬性”設置“值”。它有多種表現形式，如color="red" 、width:200px；等，其中color和width即為“鍵值對”中的“鍵”（英文key）, red和200px為“鍵值對”中的“值”（英文value）。

“鍵值對”廣泛地應用于編程中，HTML屬性的定義形式“屬性="屬性值"”只是“鍵值對”中的一種。

1.2.5 HTML5文檔頭部相關標記

制作網頁時，經常需要設置頁面的基本信息，如頁面的標題、作者和其他文檔的關系等。為此HTML提供了一系列的標記，這些標記通常都寫在head標記內，因此被稱為頭部相關標記。接下來將具體介紹常用的頭部相關標記。

1．設置頁面標題標記<title>

<title>標記用于定義HTML頁面的標題，即給網頁取一個名字，必須位于<head>標記之內。一個HTML文檔只能包含一對<title></title>標記，<title></title>之間的內容將顯示在瀏覽器窗口的標題欄中。其基本語法格式為：

    <title>網頁標題名稱</title>

了解了頁面標題標記<title>，下面通過一個簡單的案例來演示<title>標記的用法，如例1-5所示。

例1-5 example05.html

    1   <! doctype html>
    2   <html>
    3   <head>
    4   <meta charset="utf-8">
    5   <title>標題標記title</title>
    6   </head>
    7   <body>
    8   <p>標題標記title用于顯示網頁標題名稱，HTML文檔的標題將顯示在瀏覽器的標題欄
  里。</p>
    9   </body>
    10  </html>

在例1-5的第5行代碼中，使用<title>標記設置HTML5頁面的標題。

運行例1-5，效果如圖1-9所示。

圖1-9 設置頁面標題標記<title>

在圖1-9中，線框內顯示的文本即為標題標記里的內容。

2．定義頁面元信息標記<meta />

下面介紹<meta />標記常用的幾組設置，具體如下。

（1）<meta name="名稱" content="值" />

在<meta>標記中使用name/content屬性可以為搜索引擎提供信息，其中name屬性提供搜索內容名稱，content屬性提供對應的搜索內容值。具體應用如下。

● 設置網頁關鍵字，如傳智播客官網關鍵字的設置：

    <meta name="keywords"content="Java培訓，.NET培訓，PHP培訓，C/C++培訓，iOS培訓，網頁
設計培訓，平面設計培訓，UI設計培訓"/>

其中name屬性的值為keywords，用于定義搜索內容名稱為網頁關鍵字，content屬性的值用于定義關鍵字的具體內容，多個關鍵字內容之間可以用“, ”分隔。

● 設置網頁描述，如傳智播客官網描述信息的設置：

    <meta name="description"content="IT培訓的龍頭老大，口碑最好的Java培訓、.NET培訓、
PHP培訓、C/C++培訓，iOS培訓，網頁設計培訓，平面設計培訓，UI設計培訓機構，問天下
Java培訓、.NET培訓、PHP培訓、C/C++培訓，iOS培訓，網頁設計培訓，平面設計培訓，
UI設計培訓機構誰與爭鋒？"/>

其中name屬性的值為description，用于定義搜索內容名稱為網頁描述，content屬性的值用于定義描述的具體內容。需要注意的是網頁描述的文字不必過多。

● 設置網頁作者，如可以為傳智播客官網增加作者信息：

    <meta name="author" content="傳智播客網絡部" />

其中name屬性的值為author，用于定義搜索內容名稱為網頁作者，content屬性的值用于定義具體的作者信息。

（2）<meta http-equiv="名稱" content="值" />

在<meta>標記中使用http-equiv/content屬性可以設置服務器發送給瀏覽器的HTTP頭部信息，為瀏覽器顯示該頁面提供相關的參數。其中，http-equiv屬性提供參數類型，content屬性提供對應的參數值。默認會發送<meta http-equiv="Content-Type" content="text/html" />，通知瀏覽器發送的文件類型是HTML，具體應用如下。

● 設置字符集，如傳智播客官網字符集的設置：

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

其中http-equiv屬性的值為Content-Type, content屬性的值為text/html和charset=utf-8，中間用“; ”隔開，用于說明當前文檔類型為HTML，字符集為utf-8 (國際化編碼)。

utf-8是目前最常用的字符集編碼方式，常用的字符集編碼方式還有gbk和gb2312。

● 設置頁面自動刷新與跳轉，如定義某個頁面10秒后跳轉至傳智播客官網：

    <meta http-equiv="refresh" content="10; url=http://www.itcast.cn" />

其中http-equiv屬性的值為refresh, content屬性的值為數值和url地址，中間用“; ”隔開，用于指定在特定的時間后跳轉至目標頁面，該時間默認以秒為單位。

3．引用外部文件標記<link>

一個頁面往往需要多個外部文件的配合，在<head>中使用<link>標記可引用外部文件，一個頁面允許使用多個<link>標記引用多個外部文件。其基本語法格式為：

    <link屬性="屬性值" />

該語法中，<link>標記的幾個常用屬性如表1-2所示。

表1-2 link標記的常用屬性

例如，使用<link>標記引用外部CSS樣式表：

    <link rel="stylesheet" type="text/css" href="style.css" />

上面的代碼，表示引用當前HTML頁面所在文件夾中，文件名為“style.css”的CSS樣式表文件。

4．內嵌樣式標記<style>

    <style屬性="屬性值">樣式內容</style>

在HTML中使用style標記時，常常定義其屬性為type，相應的屬性值為text/css，表示使用內嵌式的CSS樣式。

下面通過一個案例來演示<style>標記的用法，如例1-6所示。

例1-6 example06.html

    1   <! doctype html>
    2   <html>
    3   <head>
    4   <meta charset="utf-8">
    5   <title>style標記的使用</title>
    6   <style type="text/css">
    7   h2{color:red; }
    8   p{color:blue; }
    9   </style>
    10  </head>
    11  <body>
    12  <h2>設置h2標題為紅色字體</h2>
    13  <p>設置p段落為藍色字體</p>
    14  </body>
    15  </html>

在例1-6中，使用style標記定義內嵌式的CSS樣式，控制網頁中文本的顏色。

運行例1-6，效果如圖1-10所示。

圖1-10 內嵌標記style的應用

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