曹丹

摘要：HTML是一種文本語言，可以滿足用來描述和制作網(wǎng)頁，執(zhí)行一般網(wǎng)頁制作工具所無法滿足的特殊需求，從而制作出一種特殊的網(wǎng)頁效果。該文將以HTML語言為基礎(chǔ)，對(duì)網(wǎng)頁制作的方法進(jìn)行一系列的介紹，總結(jié)并概括HTML語言網(wǎng)頁制作時(shí)特殊注意事項(xiàng)，希望可以為相關(guān)行業(yè)工作者或?qū)W習(xí)者提供有價(jià)值的參考。

關(guān)鍵詞：HTML;網(wǎng)頁設(shè)計(jì);制作方法

中圖分類號(hào)：TP37? ? ? 文獻(xiàn)標(biāo)識(shí)碼：A

文章編號(hào)：1009-3044（2021）36-0083-03

開放科學(xué)（資源服務(wù)）標(biāo)識(shí)碼（OSID）：

隨著網(wǎng)絡(luò)技術(shù)的不斷發(fā)展，人們的生活逐漸與網(wǎng)絡(luò)密不可分，現(xiàn)階段人們對(duì)互聯(lián)網(wǎng)資源的需求量越來越大，網(wǎng)頁成為人們學(xué)習(xí)知識(shí)和獲取信息的重要手段，如何設(shè)計(jì)和制作吸引人們眼球的網(wǎng)頁，成為現(xiàn)階段相關(guān)領(lǐng)域研究的重點(diǎn)課題。網(wǎng)絡(luò)與用戶之間的交互行為依賴于一個(gè)個(gè)單獨(dú)的網(wǎng)頁單元，現(xiàn)階段實(shí)現(xiàn)網(wǎng)頁制作的工具有許多，例如Dreamweaver、FrontPage等，但大部分網(wǎng)頁制作工具實(shí)現(xiàn)的功能都具有一定的相似性，從而導(dǎo)致制作出來的網(wǎng)頁千篇一律，無法滿足用戶的特殊需求，難以達(dá)到吸人眼球的目的。為了更好地開發(fā)和設(shè)計(jì)出與眾不同的網(wǎng)頁，實(shí)現(xiàn)網(wǎng)頁的特殊性，采用HTML語言進(jìn)行網(wǎng)頁的設(shè)計(jì)和制作，彌補(bǔ)一般網(wǎng)頁制作工具的缺陷和不足。

1 HTML概述

1.1 HTML的發(fā)展歷史

HTML即超文本標(biāo)記語言，是由Web的發(fā)明者Tim Berners Lee. 及其同事Daniel w. Connolly在1900年共同創(chuàng)建的，采用HTML語言編寫的超文本文檔一般被稱為HTML文檔，可以獨(dú)立應(yīng)用于各種操作平臺(tái)，通過專用的瀏覽器進(jìn)行內(nèi)容的識(shí)別和呈現(xiàn)，而且呈現(xiàn)出的結(jié)果也就是大家所熟悉的網(wǎng)頁。1900年以來，HTML語言得到了萬維網(wǎng)的廣泛的應(yīng)用，瀏覽器通過將語言的內(nèi)容以影像聲音、圖片、文字、動(dòng)畫等形式，呈現(xiàn)給瀏覽者，為人們提供所需要的服務(wù)。HTML是一種靜態(tài)的網(wǎng)頁文件，其所包含的指令代碼也僅僅為網(wǎng)頁中資料顯示位置和排版的位置標(biāo)記，簡單易懂，操作便捷，HTML是廣泛的一種應(yīng)用為超鏈接，用戶通過單擊頁面中的某一位置或內(nèi)容，即可跳轉(zhuǎn)到另一界面，在瀏覽器的運(yùn)行環(huán)境下，世界各地的文件達(dá)成了超文本傳輸協(xié)議，就可以實(shí)現(xiàn)網(wǎng)絡(luò)的網(wǎng)頁頁面的跳轉(zhuǎn)和內(nèi)容的搜索查詢。

1.2 HTML的定義

HTML超文本標(biāo)記語言不僅僅是一種應(yīng)用，更是一種范圍和標(biāo)準(zhǔn)。它通過標(biāo)簽等實(shí)現(xiàn)了網(wǎng)頁中內(nèi)容的標(biāo)記和鏈接，使頁面在瀏覽器運(yùn)行模式下可以相互鏈接和跳轉(zhuǎn)，瀏覽器在對(duì)網(wǎng)頁文件進(jìn)行閱讀的過程中是按照順序逐句閱讀的，根據(jù)其中的標(biāo)記進(jìn)行內(nèi)容的顯示，因此對(duì)書寫中存在的錯(cuò)誤標(biāo)記不能給予提示，亦不可停止其執(zhí)行的過程。用戶在進(jìn)行HTML環(huán)境下的網(wǎng)頁設(shè)計(jì)制作時(shí)只能通過頁面的顯示效果來分析語句中存在的問題和錯(cuò)誤部位，且在不同的瀏覽器中，同一標(biāo)記也可能有完全不同的解釋，因此出現(xiàn)顯示效果方面的差異。

1.3 HTML的版本

1989年Tim Berners Lee和他的團(tuán)隊(duì)開發(fā)出的HTML語言在一定程度上延續(xù)了古老的SGML語言定義，并在其基礎(chǔ)上進(jìn)行了一系列的語言簡化和功能的優(yōu)化，對(duì)瀏覽器在屏幕上顯示的數(shù)據(jù)展示功能進(jìn)行了優(yōu)化，得到了各個(gè)瀏覽器廠商的廣泛支持和應(yīng)用。

在歷史上，HTML有1.0、2.0、3.2等多個(gè)版本，值得一提的是HTML 5是現(xiàn)階段公認(rèn)的下一代Web語言，它在媒體內(nèi)容和應(yīng)用的方面有著極強(qiáng)的應(yīng)用能力，對(duì)于推動(dòng)互聯(lián)網(wǎng)發(fā)展有著重要的作用。

隨著電子商務(wù)行業(yè)的興起和發(fā)展，HTML的地位也得到了顯著提高，尤其在Web迅速發(fā)展的過程中起到了助推的作用。

1.4 HTML的特點(diǎn)

HTML語言的制作較為簡單，但其有著強(qiáng)大的功能，可以支持各種格式的數(shù)據(jù)文件在瀏覽器界面中的顯示，而這也就進(jìn)一步推動(dòng)了萬維網(wǎng)的發(fā)展和普遍應(yīng)用。下面，文章將對(duì)HTML的主要特點(diǎn)進(jìn)行簡述。

1） 簡易性。HTML超文本標(biāo)記語言，在版本升級(jí)的過程中采用的是超集方式，使得其應(yīng)用更加靈活和便捷。

2）可擴(kuò)展性。HTML在普及的過程中，逐漸對(duì)其自身進(jìn)行改進(jìn)，尤其在功能方面得到了極大的加強(qiáng)，通過增加了標(biāo)識(shí)符等要求，HTML在網(wǎng)頁設(shè)計(jì)的過程中，采用了子類元素的顯示和應(yīng)用方式，因此對(duì)系統(tǒng)擴(kuò)展提供了穩(wěn)固的保障。

3）平臺(tái)無關(guān)性?，F(xiàn)階段，雖然互聯(lián)網(wǎng)和網(wǎng)頁的應(yīng)用得到了極大的普及，個(gè)人計(jì)算機(jī)得到了廣泛的盛行，但在一些大型實(shí)驗(yàn)研究或其他有相關(guān)需求的機(jī)構(gòu)中Mac等機(jī)器的使用者仍大有人在。在此背景下，HTML超文本標(biāo)記語言有著更加廣泛的平臺(tái)服務(wù)能力，不受計(jì)算機(jī)種類的限制，不僅為自身的發(fā)展鋪設(shè)了長遠(yuǎn)的道路，更推動(dòng)了萬維網(wǎng)的普遍盛行。

4）通用性。HTML語言是網(wǎng)絡(luò)范圍內(nèi)一種通用的語言，它可以通過簡單的語言實(shí)現(xiàn)制作人與瀏覽器的信息傳遞，建立文本與圖片、視頻、音頻等相結(jié)合的復(fù)雜界面，并可以實(shí)現(xiàn)超鏈接的強(qiáng)大功能，而這些網(wǎng)絡(luò)頁面被上傳至網(wǎng)絡(luò)后，可以被其他人廣泛瀏覽和閱讀，不受電腦型號(hào)或?yàn)g覽器種類的限制，具有廣泛的通用性。

2 HTML語言的編輯方式

HTML實(shí)際上是文本文件在瀏覽器中的顯示，因此它的編輯實(shí)質(zhì)上是對(duì)語言文字內(nèi)容的編輯，現(xiàn)階段HTML常用的編輯器有以下幾種類型：

1）文本編輯是HTML語言編輯中最簡單的一種，它可以使用一般的文本編輯器或文檔編輯器。例如，微軟系統(tǒng)自帶的記事本或?qū)懽职寰梢赃M(jìn)行HTML語言的編輯，WPS或word亦可進(jìn)行，但在保存時(shí)，若想要制作出的文件為網(wǎng)頁文件，則需要將其擴(kuò)展名改為“.htm”或“.html”，只有這種類型的文件可以被瀏覽器識(shí)別和執(zhí)行，否則將顯示原有的文本文檔。

2）半所見即所得軟件，例如FCK-Editer等在線網(wǎng)頁編輯器。

3）所見即所得軟件是現(xiàn)階段最廣泛應(yīng)用的網(wǎng)頁編輯器，一般供對(duì)HTML的相關(guān)知識(shí)缺乏一定了解的用戶使用，雖然這種軟件與前面兩種相比具有更加簡便，且網(wǎng)頁制作效率更高，直觀表現(xiàn)性更強(qiáng)，但其生成代碼結(jié)構(gòu)復(fù)雜，在大型網(wǎng)站的多人協(xié)作和精準(zhǔn)定位等高級(jí)功能方面表現(xiàn)得極為無力。

HTML的字符集包含ASCII字符和漢字和大量的特殊字符，而特殊字符的使用一般現(xiàn)在網(wǎng)頁中特殊意義字符的顯示或鍵盤上不存在的字符，這些字符的表現(xiàn)一般是通過代碼來實(shí)現(xiàn)的，而代碼又包括字符代碼和數(shù)字代碼兩種不同的形式。

在HTML語言定義中，有許多種類型的元素內(nèi)容，例如腳本數(shù)據(jù)、樣式表中的數(shù)據(jù)、屬性值，如id、名稱、數(shù)字單位等，而上述所有的數(shù)字類型均隸屬于專業(yè)的字符數(shù)據(jù)。

3 HTML的整體結(jié)構(gòu)

通常情況下，一個(gè)網(wǎng)頁可能由多個(gè)HTML文件構(gòu)成，而每個(gè)HTML都具有一個(gè)基本的整體結(jié)構(gòu)，其中的標(biāo)記一般為成雙成對(duì)出現(xiàn)的，它們分別叫作開頭，標(biāo)記和結(jié)尾標(biāo)記。

<html>標(biāo)記是用來對(duì)文本形式進(jìn)行說明的標(biāo)記，表示該文件是采用超文本標(biāo)記語言進(jìn)行描述的，為瀏覽器識(shí)別和顯示文件做出提示，它可以被認(rèn)為是整個(gè)HTML文件的開頭。而對(duì)應(yīng)的，</html>則為文件的結(jié)尾標(biāo)記，它用于提示瀏覽器文件的結(jié)尾。

<head>和</head>標(biāo)記為頭部標(biāo)記的開頭標(biāo)記和結(jié)尾標(biāo)記，文件的頭部標(biāo)記是對(duì)整個(gè)頁面標(biāo)題的敘述和說明，并不作為頁面的主體內(nèi)容顯示。文件頭部一般包括標(biāo)題（<title>/</title>），序言、說明等，有時(shí)還包括鏈接的默認(rèn)地址（<base>/</base>）、文檔與外部資源之間的關(guān)系（<link/</link>）、文檔中的元數(shù)據(jù)（<meta>、</meta>）等。

<body>和</body>是對(duì)網(wǎng)頁主題內(nèi)容范圍界定的標(biāo)記，網(wǎng)頁中所包括的實(shí)際內(nèi)容即位于這兩個(gè)標(biāo)記所顯示的內(nèi)容之間，一般稱為“正文標(biāo)記”或“實(shí)體標(biāo)記”。

4 基于HTML語言的網(wǎng)頁制作方法

現(xiàn)階段常用于制作HTML語言網(wǎng)頁的軟件有許多，比較主要的是Dreamweaver、Frontpage等，為了豐富網(wǎng)頁的內(nèi)容和表現(xiàn)形式，經(jīng)常還使用Photoshop、Flash、Fireworks等軟件，進(jìn)行各種常規(guī)編輯、文字編輯、表格編輯等工作，使得設(shè)計(jì)出來的頁面可以包含大量文字、圖案、圖標(biāo)、影視、音頻等內(nèi)容，使其更具有交互性和實(shí)現(xiàn)各種強(qiáng)大的功能。

4.1 常規(guī)編輯

網(wǎng)頁的常規(guī)編輯就是利用HTML專用的標(biāo)記對(duì)網(wǎng)頁頁面的布局和展示進(jìn)行設(shè)計(jì)和規(guī)劃，通過將標(biāo)記置于特定的位置而進(jìn)行網(wǎng)頁內(nèi)容的布局。正如上文所提到的，絕大部分網(wǎng)頁的內(nèi)容都在<html>和</html>的字符之間，<head>和</head>之間則是文件的頭部內(nèi)容，包括標(biāo)題、網(wǎng)址等內(nèi)容，在<body>和</body>之間的則是文件的主體部分，也就是頁面中所顯示的內(nèi)容。若制作的網(wǎng)頁中包括視頻或音頻等內(nèi)容，可以通過<a>、</a>標(biāo)記對(duì)音頻或視頻文件的地址進(jìn)行標(biāo)記，以達(dá)到在網(wǎng)頁中插入相關(guān)文件的目的。

4.2 表格編輯

表格是網(wǎng)頁設(shè)計(jì)和開發(fā)中非常重要的一種元素，在HTML語言環(huán)境下將進(jìn)行網(wǎng)頁制作時(shí)，一般通過<table>、</table>兩個(gè)標(biāo)記來實(shí)現(xiàn)網(wǎng)頁區(qū)域的劃分。關(guān)于表格編輯，還可以通過<td>和</td>兩個(gè)標(biāo)記對(duì)其進(jìn)行參數(shù)的定義，以<th>、</th>實(shí)現(xiàn)對(duì)表頭的定義。

4.3 文字編輯

HTML語言環(huán)境下對(duì)網(wǎng)頁內(nèi)的文字內(nèi)容進(jìn)行編輯時(shí)，一般通過以下幾種源代碼實(shí)現(xiàn)內(nèi)容的定義和文字格式的定義：

1）<hn>、</hn>n=1～6是對(duì)內(nèi)容標(biāo)題等級(jí)的定義，類似于word文檔中的文字標(biāo)題等級(jí);

2）align是對(duì)文字對(duì)齊方式的定義，包括left、center、right三種對(duì)齊方式，例如，<h1 align = “center”所表示的內(nèi)容是一級(jí)標(biāo)題的居中對(duì)齊形式;

3）<p>和</p>是一對(duì)段落標(biāo)記，實(shí)現(xiàn)文字內(nèi)容以段落的方式進(jìn)行顯示，兩個(gè)標(biāo)記之間的內(nèi)容可以被認(rèn)為是一個(gè)自然段;

4）<br>和</br>是一對(duì)換行標(biāo)記，實(shí)現(xiàn)文字內(nèi)容以行的方式進(jìn)行顯示，兩個(gè)標(biāo)記之間的內(nèi)容為一行;

……

4.4 音頻編輯

在網(wǎng)頁制作的過程中，不可避免地會(huì)使用到音頻文件作為網(wǎng)頁的背景音樂，也就是我們俗稱的“BGM”，現(xiàn)階段常用的網(wǎng)頁音頻文件主要為mid格式的文件，這種格式的音頻文件占用的空間非常小，在網(wǎng)絡(luò)環(huán)境下可以縮短頁面加載的時(shí)間，提高網(wǎng)頁瀏覽的速度，有效避免了BGM卡頓現(xiàn)象的發(fā)生，從而提高了頁面設(shè)計(jì)的質(zhì)量。背景音樂在<body>中的應(yīng)用格式為：<bgsound src =”BGM文件路徑”loop =”BGM播放次數(shù)”>，有些設(shè)計(jì)師為了確保BGM在網(wǎng)頁中的循環(huán)播放會(huì)設(shè)計(jì)一個(gè)較大的循環(huán)值。

5 網(wǎng)頁制作的注意事項(xiàng)

網(wǎng)頁設(shè)計(jì)和制作工作是一個(gè)綜合性的網(wǎng)絡(luò)工程，包括了美工設(shè)計(jì)、后臺(tái)編程等多個(gè)領(lǐng)域的工作，網(wǎng)頁設(shè)計(jì)者在頁面的設(shè)計(jì)和開發(fā)時(shí)要充分考慮網(wǎng)頁制作的目的，明確受眾群體，有針對(duì)性地設(shè)計(jì)網(wǎng)頁的內(nèi)容。同時(shí)，在設(shè)計(jì)過程中，要確保頁面在干凈正切的前提下有自己的風(fēng)格，并具有一定的美觀性。此外，還要保證網(wǎng)頁中鏈接的便捷性和實(shí)用性，盡可能滿足廣大使用者的需求，減少?zèng)]必要的點(diǎn)擊次數(shù)。

6 總結(jié)

本文對(duì)HTML的發(fā)展歷史和特點(diǎn)進(jìn)行了一系列的概述，總結(jié)了HTML語言下的網(wǎng)頁制作基本方法和技巧。雖然網(wǎng)頁制作的入門較為簡單，但由于其在開發(fā)的過程中關(guān)聯(lián)了大量相關(guān)領(lǐng)域，在一些大型的、綜合性較強(qiáng)的網(wǎng)頁的開發(fā)和設(shè)計(jì)中，仍然需要大量的團(tuán)隊(duì)合作，對(duì)開發(fā)者的HTML語言技巧也有極大的需求，因此，為了開發(fā)制作出理想的網(wǎng)頁文件，仍需要對(duì)相關(guān)知識(shí)進(jìn)行進(jìn)一步的學(xué)習(xí)和總結(jié)。

參考文獻(xiàn)：

[1] 張麗霞.基于HTML語言的網(wǎng)頁制作方法[J].電子測試，2018（Z1）：86-87.

[2] 張鐵紅，邵波.淺談HTML語言的網(wǎng)頁制作方法與技巧[J].通訊世界，2016（1）：189.

[3] 柳汨.基于HTML語言的網(wǎng)頁制作淺析[J].中小企業(yè)管理與科技，2016（1）：258.

[4] 匡成寶.HTML語言的網(wǎng)頁制作方法與技巧探討[J].電腦迷，2017（3）：190-191.

[5] 青華.HTML語言的網(wǎng)頁制作技巧與方法[J].電腦知識(shí)與技術(shù)，2017，13（30）：209-210.

[6] 朱向富.HTML語言的網(wǎng)頁制作方法和技巧[J].電子技術(shù)與軟件工程，2016（19）：67.

[7] 茹先古麗·吾守爾，艾合買提·阿布拉.基于HTML語言的網(wǎng)頁制作方法[J].經(jīng)貿(mào)實(shí)踐，2015（9）：267.

[8] 王闖.HTML語言的網(wǎng)頁制作技巧與方法分析[J].無線互聯(lián)科技，2015（11）：38-39.

【通聯(lián)編輯：唐一東】