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

首頁 >

HTML5+ CSS3+JavaScript 網(wǎng)頁設(shè)計(jì)實(shí)戰(zhàn)（視頻教學(xué)版）

1.3　HTML網(wǎng)頁的組成

HTML網(wǎng)頁，就是我們常說的超文本標(biāo)簽語言網(wǎng)頁。所謂“超文本”，就是指頁面內(nèi)可以包含圖片、鏈接，甚至音樂、程序等非文字元素。

1.3.1　HTML網(wǎng)頁結(jié)構(gòu)

通常，HTML網(wǎng)頁由一個<html>標(biāo)簽來開始，再由一個</html>標(biāo)簽來結(jié)束。在HTML網(wǎng)頁內(nèi)部由“頭”（Head）和“主體”（Body）兩部分所組成。其中，“頭”部由一個<head>標(biāo)簽來開始，再由一個</head>標(biāo)簽來結(jié)束，用于提供關(guān)于網(wǎng)頁的信息。“主體”部分由一個<body>標(biāo)簽來開始，再由一個</body>標(biāo)簽來結(jié)束，用于提供網(wǎng)頁的具體內(nèi)容。

下面是一個HTML網(wǎng)頁的標(biāo)準(zhǔn)結(jié)構(gòu)（源代碼ch01/ch01-html-structure.html文件）。

【代碼1-1】

【代碼解析】

第01行代碼中的<!DOCTYPE>表示文檔類型，一個文檔類型標(biāo)記是一種標(biāo)準(zhǔn)通用標(biāo)記語言的文檔類型聲明，其目的是要告訴標(biāo)準(zhǔn)通用標(biāo)記語言解析器，應(yīng)該使用什么樣的文檔類型定義（DTD）來解析文檔。

第02行代碼使用<html>標(biāo)簽來開始一個HTML，相對應(yīng)的在第09行代碼使用</html>標(biāo)簽來結(jié)束該HTML網(wǎng)頁。

第03～05行代碼為網(wǎng)頁頭部，使用<head>標(biāo)簽來開始，</head>標(biāo)簽來結(jié)束。

第06～08行代碼為網(wǎng)頁主體，使用<body>標(biāo)簽來開始，</body>標(biāo)簽來結(jié)束。

網(wǎng)頁中沒有定義任何文本或其他內(nèi)容，僅僅是一個網(wǎng)頁的框架結(jié)構(gòu)，但也能在瀏覽器中運(yùn)行，只不過會顯示一個空白頁面，如圖1.2所示。

圖1.2　HTML網(wǎng)頁結(jié)構(gòu)

1.3.2　HTML網(wǎng)頁頭部

HTML網(wǎng)頁頭部由<head></head>這2個標(biāo)簽來表示開始和結(jié)尾。一般來講，網(wǎng)頁頭部中包含的標(biāo)簽是頁面的標(biāo)題、序言、說明等內(nèi)容，它本身不作為內(nèi)容來顯示，但影響網(wǎng)頁顯示的效果。

在HTML網(wǎng)頁頭部中最常用的標(biāo)簽是標(biāo)題標(biāo)簽和meta標(biāo)簽，其中標(biāo)題標(biāo)簽用于定義網(wǎng)頁的標(biāo)題，其內(nèi)容顯示在網(wǎng)頁窗口的標(biāo)題欄中。而meta標(biāo)簽可以被瀏覽器用作書簽和收藏的清單。

另外，還可以在HTML網(wǎng)頁頭部設(shè)置文檔標(biāo)題和其他在網(wǎng)頁中不顯示的信息，例如：方向（direction）、語言代碼（Language Code）、指定字典中的元信息，等等。

下面是HTML網(wǎng)頁的頭部定義（詳見源代碼ch01/ch01-html-head.html文件）。

【代碼1-2】

【代碼解析】

第04～11行代碼為網(wǎng)頁頭部，使用<head>標(biāo)簽來開始，</head>標(biāo)簽來結(jié)束。

第05行代碼中，使用<meta>標(biāo)簽定義了網(wǎng)頁字符集（charset="UTF-8"）。

第06行代碼中，使用<meta>標(biāo)簽定義了網(wǎng)頁生成工具（content="WebStorm"）。

第07行代碼中，使用<meta>標(biāo)簽定義了網(wǎng)頁作者（content="KING"）。

第08行代碼中，使用<meta>標(biāo)簽定義了網(wǎng)頁關(guān)鍵字。

第09行代碼中，使用<meta>標(biāo)簽定義了網(wǎng)頁描述信息。

第10行代碼中，使用<title></title>定義了網(wǎng)頁窗口標(biāo)題欄的標(biāo)題。

網(wǎng)頁運(yùn)行后的效果如圖1.3所示。

圖1.3　HTML網(wǎng)頁頭部

1.3.3　HTML網(wǎng)頁主體

HTML網(wǎng)頁主體由<body></body>這2個標(biāo)簽來表示開始和結(jié)尾。一般來講，網(wǎng)頁主體部分用于顯示網(wǎng)站的具體內(nèi)容，其包含的HTML標(biāo)簽也很多。

下面是HTML網(wǎng)頁主體部分的定義（詳見源代碼ch01/ch01-html-body.html文件）。

【代碼1-3】

【代碼解析】

第12～15行代碼為網(wǎng)頁主體，使用<body>標(biāo)簽來開始，</body>標(biāo)簽來結(jié)束。

第13～14行代碼定義了網(wǎng)頁主體中的內(nèi)容，這些內(nèi)容將會顯示在瀏覽器頁面中。

網(wǎng)頁運(yùn)行后的效果如圖1.4所示。

圖1.4　HTML網(wǎng)頁主體

1.3.4　HTML網(wǎng)頁要求

這里簡單介紹在編輯HTML網(wǎng)頁和使用有關(guān)標(biāo)簽時(shí)，需要遵循的一些約定或默認(rèn)要求。

  • HTML網(wǎng)頁的文件擴(kuò)展名默認(rèn)使用.htm或.html（英文縮寫擴(kuò)展名），這樣操作系統(tǒng)或程序才可以有效識別。另外，如果使用文本編輯器創(chuàng)建或修改HTML網(wǎng)頁時(shí)，注意將默認(rèn)的.txt擴(kuò)展名修改為.htm或.html擴(kuò)展名，這一點(diǎn)經(jīng)常會被初學(xué)者忽略，而導(dǎo)致不必要的錯誤。
  • HTML網(wǎng)頁本質(zhì)上也是文本文件，其列寬不受限制，多個標(biāo)簽也可寫成一行，甚至整個源代碼也可寫成一行。習(xí)慣上，源代碼要按照層次關(guān)系寫成多行，此時(shí)瀏覽器會忽略文件中的回車符（但指定回車標(biāo)簽除外）。此外，對源代碼中的空格通常也不按源程序中的效果進(jìn)行顯示，完整的空格可使用特殊符號（實(shí)體符）“&nbsp;（注意此字母必須小寫，方可空格）”表示非換行空格。表示文件路徑時(shí)使用符號“/”分隔，文件名及路徑描述可用雙引號也可不用引號括起。
  • 標(biāo)簽中的標(biāo)簽元素必須用尖括號括起來，帶斜杠的元素表示該標(biāo)簽說明結(jié)束。大多數(shù)的標(biāo)簽必須成對使用，以表示作用的起始和結(jié)束。標(biāo)簽元素忽略大小寫，即其作用相同。許多標(biāo)簽元素具有屬性說明，可用參數(shù)對元素做進(jìn)一步的限定，多個參數(shù)或?qū)傩皂?xiàng)說明次序不限，其間用空格分隔即可。另外，一個標(biāo)簽元素的內(nèi)容可以寫成多行。
  • 標(biāo)簽符號，包括尖括號、標(biāo)簽元素、屬性項(xiàng)等必須使用半角的西文字符，而不能使用全角字符。
  • HTML網(wǎng)頁中常用的圖像文件的擴(kuò)展名為gif、jpg和png。
  • HTML網(wǎng)頁中注釋由符號"<!--"表示開始，由符號"-->"表示結(jié)束，例如：<!--注釋內(nèi)容-->。注釋內(nèi)容可插入在文本中任何位置。任何標(biāo)簽若在其最前插入驚嘆號，即被標(biāo)識為注釋，瀏覽器中將不予顯示。

1.3.5　HTML網(wǎng)頁標(biāo)簽

HTML網(wǎng)頁中定義了非常多的標(biāo)簽用于表示類型元素和類型屬性，這些元素和屬性可以呈現(xiàn)出非常豐富的網(wǎng)頁內(nèi)容。

1．類型描述

為了說明文檔使用的超文本標(biāo)簽語言標(biāo)準(zhǔn)，所有超文本標(biāo)簽語言文檔應(yīng)該以“文件類型聲明”（外語全稱加縮寫<!DOCTYPE>）開頭，引用一個文件類型描述或者必要情況下自定義一個文件類型描述。舉例來說：

這個聲明說明文檔服從超文本標(biāo)簽語言4.01版本，且是必須要嚴(yán)格遵循的文件類型描述，這個標(biāo)準(zhǔn)是嚴(yán)格結(jié)構(gòu)化的，使用層疊樣式表（外語縮寫：CSS）來做格式化。有時(shí)是否存在一個合適的文件類型描述會影響一個瀏覽器顯示網(wǎng)頁的方式。

除了超文本標(biāo)簽語言4.01版本的嚴(yán)格文件類型描述之外，超文本標(biāo)簽語言4.01版本也提供“過渡”和“框架集”文件類型描述。

  • 過渡文件類型描述是向嚴(yán)格的文件類型描述過渡的緩沖。
  • 框架集文件類型描述則針對包含框架元素的網(wǎng)頁。
2．標(biāo)簽元素

下面羅列一些常見的HTML標(biāo)簽元素：

  • <html></html>表示創(chuàng)建一個超文本標(biāo)簽語言文檔。
  • <head></head>（頭）用來設(shè)置文檔標(biāo)題和其他在網(wǎng)頁中不顯示的信息。
  • <base>表示文檔中不能被該站點(diǎn)辨識的其他所有鏈接源的URL（統(tǒng)一資源定位器）。
  • <meta>表示可以被瀏覽器用作書簽和收藏的清單。
  • <link>定義一個鏈接和源文件之間的相互關(guān)系，比如：引用一個層疊樣式表（英文縮寫：css）。
  • <script></script>是用于定義腳本語句的標(biāo)簽，比如：引用一個JavaScript腳本文件。
  • <title></title>用于設(shè)置網(wǎng)頁文檔的標(biāo)題。
  • <body></body>表示網(wǎng)頁文檔主體，即網(wǎng)頁文檔的可見部分。
  • <h1></h1>表示最大的標(biāo)題（一號標(biāo)題），以此類推，還包括二、三、四、五、六號標(biāo)題。
  • <pre></pre>表示預(yù)先格式化文本（英文全稱：preformatted）。
  • <u></u>表示下劃線（英文全稱：underline）。
  • <b></b>表示加黑體字（英文全稱：bold）。
  • <i></i>表示斜體字（英文全稱：italics）。
  • <tt></tt>表示打字機(jī)風(fēng)格的字體。
  • <cite></cite>表示引用，通常是斜體。
  • <em></em>表示強(qiáng)調(diào)文本（通常是斜體加黑體、英文全稱：emphasize）。
  • <strong></strong>表示加重文本（通常是斜體加黑體）。
  • <font size="" color=""></font>設(shè)置字體大小從1到7，顏色使用名字或RGB格式的十六進(jìn)制值。
  • <font style ='font-size:100px'></font>表示字體樣式大小等于100像素。
  • <BASEFONT></BASEFONT>表示基準(zhǔn)字體。
  • <big></big>表示字體加大。
  • <small></small>表示字體縮小。
  • <del></del>表示字體加刪除線。
  • <CODE></CODE>表示程式碼。
  • <KBD></KBD>表示鍵盤字（英文全稱：KeyBoard）。
  • <samp></samp>表示范例（英文全稱：sample）。
  • <var></var>表示變量（英文全稱：variable）。
  • <BLOCKQUOTE></BLOCKQUOTE>表示向右縮排（向右縮進(jìn)、塊引用）。
  • <dfn></dfn>述語定義（英文全稱：define）。
  • <address></address>表示地址標(biāo)簽。
  • <sup></sup>表示上標(biāo)字（英文全稱：superscript）。
  • <sub></sub>表示下標(biāo)字（英文全稱：subscript）。
  • <xmp></xmp>表示固定寬度字體（在文件中空白、換行、定位功能中有效）。
  • <plaintext></plaintext>同樣表示固定寬度字體，但不執(zhí)行標(biāo)簽符號。
  • <listing></listing>表示固定寬度小字體。
  • <p></p>表示創(chuàng)建一個段落（英文全稱：paragraphs）。
  • <p align="">表示將段落按左（left）、中（center）、右（right）對齊。
  • <br/>表示定義新行。
  • <dl></dl>定義列表（英文全稱：DefinitionList）。
  • <dt>表示放在每個定義術(shù)語詞前（定義術(shù)語、英文全稱：DefinitionTerm）。
  • <dd>表示放在每個定義之前（定義說明、英文全稱：DefinitionDescription）。
  • <ol></ol>表示創(chuàng)建一個標(biāo)有序的列表，默認(rèn)前面有數(shù)字，從數(shù)字“1”開始計(jì)數(shù)，依次疊加，也可以設(shè)置為字母或從任何自然數(shù)開始計(jì)數(shù)的列表項(xiàng)（英文全稱：OrderedList）。
  • <ul></ul>表示創(chuàng)建一個無序的列表，默認(rèn)前面標(biāo)有圓點(diǎn)，也可以自己設(shè)置為none或者其他形狀，如空心圓、方塊等（英文全稱：UnorderedLists）。
  • <li></li>表示放在每個列表項(xiàng)之前，若在<ol></ol>之間則每個列表項(xiàng)加上一個數(shù)字，若在<ul></ul>之間則每個列表項(xiàng)加上一個圓點(diǎn)。
  • <div></div>表示用來排版大塊的HTML段落，也可以成為“層”。div標(biāo)簽非常重要，很多前端框架都是以該標(biāo)簽為基礎(chǔ)而設(shè)計(jì)的。
  • <MENU>表示選項(xiàng)清單。
  • <DIR>表示目錄清單。
  • <nobr></nobr>表示強(qiáng)行不換行（英文全稱：nobreaking）。
  • <hr size='9' width='80%' color='ff0000'>表示水平線（英文全稱：horizontal rule），可以設(shè)定大小、寬度和顏色。
  • <center></center>表示水平居中。
  • <table></table>表示表格標(biāo)簽。
  • <a></a>表示超鏈接標(biāo)簽。

此外，還有一些標(biāo)簽不是很常用，在此就不再一一列舉，感興趣的讀者可以參考w3c的官方文檔去了解。

1.3.6　HTML與XHTML

介紹了這么多關(guān)于HTML的內(nèi)容，讀者可能還聽說過XHTML，那么二者之間有什么區(qū)別呢？

XHTML指擴(kuò)展超文本標(biāo)簽語言（Extensible Hyper-Text Markup Language），是更嚴(yán)格更純凈的HTML版本。嚴(yán)格來講，XHTML是一種基于XML的標(biāo)簽語言，與HTML很相像，但也有細(xì)微的差別。具體如下：

  • 文檔聲明簡化
  • html標(biāo)簽上不需要聲明命名空間
  • 字符集編碼聲明簡化
  • Style和Script標(biāo)簽type屬性簡化
  • Link標(biāo)簽連接ICON圖片時(shí)可指定尺寸

除此以外，HTML沒有XHTML那樣嚴(yán)格要求標(biāo)簽閉合問題。對XHTML不建議使用的b和i等標(biāo)簽進(jìn)行重定義，使其擁有語義的特征，具體如下：

  • b元素現(xiàn)在描述為在普通文章中僅從文體上突出的不包含任何額外的重要性的一段文本。
  • i元素現(xiàn)在描述為在普通文章中突出不同意見或語氣或其他的一段文本。
  • u元素現(xiàn)在描述為在普通文章中僅從文體上突出有語法問題或是中文專用名稱的一段文本。
主站蜘蛛池模板： 枣强县| 鄂尔多斯市| 金溪县| 华容县| 东辽县| 中江县| 天长市| 香格里拉县| 咸丰县| 临江市| 建湖县| 应城市| 开鲁县| 沙坪坝区| 德清县| 米脂县| 寿阳县| 老河口市| 涿州市| 乐陵市| 太康县| 布拖县| 息烽县| 宜良县| 徐水县| 望江县| 高唐县| 庐江县| 清水河县| 土默特左旗| 海城市| 深州市| 静海县| 白银市| 延庆县| 凤翔县| 西畴县| 驻马店市| 谷城县| 张家口市| 瑞昌市|