电子版麻将游戏

書名：動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)與制作（HTML5+CSS3+JavaScript）（第3版）
作者名：吳以欣陳小寧
本章字?jǐn)?shù)： 3279字
更新時(shí)間： 2021-01-08 20:53:08

1.1 HTML簡介

1.1.1 網(wǎng)頁與HTML

當(dāng)通過瀏覽器瀏覽網(wǎng)頁時(shí)，用戶會(huì)看到文字信息、超鏈接、圖表、圖片等各種內(nèi)容，如圖1-1所示。瀏覽器是如何顯示這些網(wǎng)頁內(nèi)容的呢？通過瀏覽器查看這些網(wǎng)頁的源代碼，如圖1-2所示，可以發(fā)現(xiàn)這些源代碼就是瀏覽器可以“理解”的一種計(jì)算機(jī)語言—HTML。

圖1-1 網(wǎng)頁內(nèi)容

圖1-2 查看網(wǎng)頁源代碼

HTML是Hyper Text Markup Language的縮寫，中文翻譯為“超文本標(biāo)記語言”，是制作網(wǎng)頁的最基本語言，它的特點(diǎn)正如它的名稱，具體如下。

Hyper（超）:“超（Hyper）”是相對于“線性（Linear）”而言的，HTML 之前的計(jì)算機(jī)程序大多是線性的，即必須由上至下順序運(yùn)行，而用HTML制作的網(wǎng)頁可以通過其中的超鏈接從一個(gè)網(wǎng)頁“跳轉(zhuǎn)”至另一個(gè)網(wǎng)頁。

Text（文本）：不同于一些編譯性的程序語言，如C、C++或Java等，HTML是一種文本解釋性的程序語言，即它的源代碼不經(jīng)過編譯，在瀏覽器中運(yùn)行時(shí)直接被“翻譯”。

Markup（標(biāo)記）:HTML 的基本規(guī)則就是用“標(biāo)記語言”——成對尖括號組成的標(biāo)簽元素來描述網(wǎng)頁內(nèi)容的，進(jìn)而在瀏覽器中顯示。

HTML最早作為一種標(biāo)準(zhǔn)的網(wǎng)頁制作語言是在20世紀(jì)80年代末由科學(xué)家蒂姆·伯納斯李（Tim Berners-Lee）提出的，當(dāng)時(shí)他定義了22種標(biāo)簽元素。發(fā)展至1999年12月，由萬維網(wǎng)聯(lián)盟（W3C）出版的HTML 4.01規(guī)范中還保留著其中的13種標(biāo)簽元素。2000年5月，HTML已成為一項(xiàng)國際標(biāo)準(zhǔn)（ISO/IEC 15445:2000）。2014年10月，萬維網(wǎng)聯(lián)盟正式發(fā)布了HTML5規(guī)范的推薦版，包含大約107種標(biāo)簽元素，以滿足現(xiàn)代網(wǎng)絡(luò)發(fā)展的需要。目前，大多數(shù)最新版本的瀏覽器都已經(jīng)支持HTML5規(guī)范。

早期的HTML版本不僅用標(biāo)簽元素描述網(wǎng)頁的內(nèi)容結(jié)構(gòu)，而且還用標(biāo)簽元素描述網(wǎng)頁的排版布局。在網(wǎng)頁設(shè)計(jì)中，網(wǎng)頁的內(nèi)容結(jié)構(gòu)一般變化較小，但是網(wǎng)頁的排版布局可能千變?nèi)f化，當(dāng)需要改變網(wǎng)頁的布局時(shí)，就必須大量地修改HTML文檔，這給網(wǎng)頁的設(shè)計(jì)開發(fā)工作帶來了很多不便。從HTML 4.0開始，為了簡化程序的開發(fā)，HTML已經(jīng)盡量將“網(wǎng)頁的內(nèi)容結(jié)構(gòu)”與“網(wǎng)頁的排版布局”分開，它的主要原則如下。

（1）用標(biāo)簽元素描述網(wǎng)頁的內(nèi)容結(jié)構(gòu)。

（2）用CSS描述網(wǎng)頁的排版布局。

（3）用JavaScript描述網(wǎng)頁的事件處理，即通過鼠標(biāo)或鍵盤在網(wǎng)頁元素上進(jìn)行動(dòng)作（如單擊、雙擊、輸入）后執(zhí)行的程序。

本書將以HTML5規(guī)范為標(biāo)準(zhǔn)進(jìn)行講解，因此，本章將主要講述原則（1）的內(nèi)容，原則（2）的內(nèi)容將在第2章和第3章中講述，原則（3）的內(nèi)容將在第4～9章中講述。

1.1.2 編寫及顯示HTML文件

在計(jì)算機(jī)中，用HTML語言編寫程序，并保存為文件，然后在瀏覽器“地址欄”中輸入該文件名，包括文件所在的文件夾名，例如C:/project/ch1_01.html，如圖1-3所示，瀏覽器就會(huì)顯示出“翻譯”后的網(wǎng)頁效果。

圖1-3 在瀏覽器中查看計(jì)算機(jī)中的HTML文件

如果將該文件放在一個(gè)網(wǎng)頁服務(wù)器上，并在瀏覽器“地址”欄中輸入該服務(wù)器的地址或指向該服務(wù)器的域名及該文件名，如圖1-4所示，就可以通過Internet瀏覽這個(gè)網(wǎng)頁的內(nèi)容。這也就是當(dāng)初科學(xué)家蒂姆·伯納斯李發(fā)明HTML的目的—大家共享文件內(nèi)容。

圖1-4 在瀏覽器中查看網(wǎng)頁服務(wù)器上的HTML文件

HTML文件具有以下特點(diǎn)。

HTML文件是一種包含成對標(biāo)簽元素的普通文本文件。因此，可以用任意一種文本編輯器來編寫，如Windows中的記事本、寫字板等應(yīng)用軟件；也可以使用任何一種工具軟件編輯HTML文件，如Macromedia的Dreamweaver和Microsoft的FrontPage等。

HTML文件必須以.htm或.html作為擴(kuò)展名，兩者并沒有太大的區(qū)別。本書示例中統(tǒng)一使用.html作為擴(kuò)展名。

HTML文件可以在大多數(shù)流行的瀏覽器上顯示，例如Microsoft的Internet Explorer （以下簡稱IE）以及Google的Chrome（以下簡稱Chrome）等。本書將在Windows操作系統(tǒng)中使用Chrome瀏覽器顯示示例。如果計(jì)算機(jī)中沒有Chrome瀏覽器軟件，可以到Google網(wǎng)站下載。

示例1-1是一個(gè)最簡單的HTML程序，首先在文本編輯器中輸入該程序（注意，其中的行號用于本書的講解之便，程序中不要輸入行號），然后保存文件名為ch1_01.html。

示例1-1 第一個(gè)HTML程序。

目的：初步了解HTML程序。

程序文件名：ch1_01.html。

說明

（1）編寫HTML程序時(shí)，格式上沒有要求，例如，示例中的11行程序也可以寫成一行，這是因?yàn)闉g覽器“翻譯”HTML程序時(shí)是通過其中的標(biāo)簽內(nèi)容進(jìn)行識(shí)別的，與程序的格式無關(guān)。但是，為了便于程序的閱讀和維護(hù)，編程時(shí)應(yīng)該根據(jù)標(biāo)簽的結(jié)構(gòu)適時(shí)換行。

（2）HTML的文件名最好不要有空格，為了能符合大多數(shù)網(wǎng)頁服務(wù)器的要求，HTML的文件名最好只包含英文小寫字母和有效的字符，例如a～z、0～9以及下畫線（_）和減號（?），并且文件名的長度不要超過31個(gè)字符（包括擴(kuò)展名）。

（3）按下述方法進(jìn)行操作，就可以通過瀏覽器查看示例1-1所編寫的HTML程序效果。

① 打開瀏覽器Chrome，按【Ctrl+O】組合鍵。

② 在打開的對話框中單擊“瀏覽”按鈕，然后在打開的對話框中選擇示例1-1中保存的文件ch1_01.html。

③ 單擊“確定”按鈕，就會(huì)得到圖1-3右圖所示的效果。

（4）按下述方法進(jìn)行操作，可以調(diào)試HTML程序。

① 在計(jì)算機(jī)中同時(shí)打開文本編輯器和瀏覽器 Chrome，并且在文本編輯器中打開HTML程序，如ch1_01.html，然后按（3）介紹的內(nèi)容進(jìn)行操作，在瀏覽器中顯示該網(wǎng)頁內(nèi)容。

② 在文本編輯器中修改程序內(nèi)容，例如，將示例1-1中的“第一個(gè)”修改為“第二個(gè)”，并保存該文件，然后反復(fù)按【Alt+Tab】組合鍵直到切換到瀏覽器窗口，再按【F5】鍵或【Ctrl+R】組合鍵刷新瀏覽器窗口。

③ 不斷重復(fù)步驟②直到調(diào)試結(jié)束。

1.1.3 標(biāo)簽、元素和屬性

從示例1-1中可以看出，HTML文檔是由各種HTML元素組成的，如html（HTML文檔）元素、head（頭）元素、body（主體）元素、title（題目）元素和p（段落）元素等，這些元素都采用了尖括號組成的標(biāo)簽形式。實(shí)際上，HTML程序的內(nèi)容就是標(biāo)簽、元素和屬性。

1.標(biāo)簽

HTML標(biāo)簽是由一對尖括號< >及標(biāo)簽名稱組成的。標(biāo)簽分為“起始標(biāo)簽”和“結(jié)束標(biāo)簽”兩種，兩者的標(biāo)簽名稱是相同的，只是結(jié)束標(biāo)簽多了一個(gè)斜杠“/”。如圖1-5所示，為起始標(biāo)簽，為結(jié)束標(biāo)簽，它是英文bold（粗體）的縮寫。標(biāo)簽名稱對大小寫是不敏感的，即<html>…</html>和<HTML>…</HTML>的效果是一樣的，但是為了便于程序的閱讀和維護(hù)，萬維網(wǎng)聯(lián)盟推薦使用小寫字母書寫標(biāo)簽。

圖1-5 HTML標(biāo)簽

2.元素

HTML元素是組成HTML文檔的最基本的部件，它是用標(biāo)簽來表現(xiàn)的，一般情況下，“起始標(biāo)簽”表示元素的開始，“結(jié)束標(biāo)簽”表示元素的結(jié)束。

HTML元素分為“有內(nèi)容的元素”和“空元素”兩種。“有內(nèi)容的元素”是由起始標(biāo)簽、結(jié)束標(biāo)簽以及兩者之間的元素內(nèi)容組成的，其中，元素內(nèi)容既可以是需要顯示在網(wǎng)頁中的文字內(nèi)容，也可以是其他元素。例如，示例1-1中起始標(biāo)簽與結(jié)束標(biāo)簽組成的元素的內(nèi)容是文字“第一個(gè)”；而起始標(biāo)簽<head>與結(jié)束標(biāo)簽</head>組成的元素的內(nèi)容是另外一個(gè)元素—title元素。“空元素”則只有起始標(biāo)簽，而沒有結(jié)束標(biāo)簽和元素內(nèi)容，如示例1-1中的hr（分隔線）元素就是空元素。

HTML元素還可以分為“塊元素”和“行元素”。“塊元素”在網(wǎng)頁中的效果是該元素中的內(nèi)容相對于其前后元素的內(nèi)容另起一行，圖1-6左側(cè)所示的p元素就是塊元素，圖1-6右側(cè)所示為p元素的網(wǎng)頁顯示效果。而“行元素”的網(wǎng)頁效果則是，行元素中的內(nèi)容與其前后元素的內(nèi)容在同一行中，圖1-7左側(cè)所示的 a 元素就是行元素，圖1-7右側(cè)所示為 a元素的網(wǎng)頁顯示效果。

圖1-6 塊元素程序及其網(wǎng)頁顯示效果

圖1-7 行元素程序及其網(wǎng)頁顯示效果

3.屬性

在元素的起始標(biāo)簽中，還可以包含“屬性”，用來表示元素的其他特性，它的格式如下。

<標(biāo)簽名稱屬性名="屬性值">

例如，下述代碼中 img（圖像）元素中的 src="my_picture.jpg"就是 img 元素的屬性，表示“該圖像元素的圖像源文件是my_picture.jpg”。

像標(biāo)簽名稱一樣，屬性名對大小寫也是不敏感的，但是為了便于程序的閱讀和維護(hù)，編程時(shí)建議使用小寫字母。另外值得注意的是，雖然 HTML5并沒有要求屬性值一定要有雙引號，但是，為了養(yǎng)成良好的編程習(xí)慣，還是應(yīng)該統(tǒng)一地在屬性值外面加上雙引號（英文輸入模式下的雙引號）。

4.元素的嵌套性

除了HTML文檔元素html外，其他HTML元素都是被嵌套在另一個(gè)元素之內(nèi)的。例如示例1-1中，head元素和body元素是嵌套在html元素中的，而title元素是嵌套在head元素中的。值得注意的是，HTML中的元素可以多級嵌套，但是不可以互相交叉。

如下代碼為不正確的寫法，因?yàn)閜元素的起始標(biāo)簽在b元素的外層，而它的結(jié)束標(biāo)簽卻放在了b元素結(jié)束標(biāo)簽的里面。

這是我的第一個(gè)網(wǎng)頁。

如下代碼為正確的寫法。

這是我的第一個(gè)網(wǎng)頁。

由于元素的嵌套性，編寫HTML程序時(shí)一般先寫外層的一對標(biāo)簽，然后逐漸往里寫，這樣既不容易忘記結(jié)束標(biāo)簽，也可以減少交叉標(biāo)簽的錯(cuò)誤。例如，示例1-1應(yīng)該按下列步驟完成。

① 編寫最外層標(biāo)簽，示例如下。

<html>

</html>

② 添加內(nèi)層標(biāo)簽，示例如下。

<html>

<head>

</head>

<body>

</body>

</html>

③ 繼續(xù)添加內(nèi)層標(biāo)簽，示例如下。

<html>

<head>

</head>

<body>

</body>

</html>

④ 添加元素內(nèi)容，示例如下。

<html>

<head>

</head>

<body>

</body>

</html>

…

以此類推。

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

動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)與制作（HTML5+CSS3+JavaScript）（第3版）

1.1 HTML簡介

1.1.1 網(wǎng)頁與HTML

1.1.2 編寫及顯示HTML文件

1.1.3 標(biāo)簽、元素和屬性