基于HTML語言的網頁制作方法探析
2021-03-07 12:36:37曹丹
電腦知識與技術 2021年36期
曹丹
摘要：HTML是一種文本語言，可以滿足用來描述和制作網頁，執行一般網頁制作工具所無法滿足的特殊需求，從而制作出一種特殊的網頁效果。該文將以HTML語言為基礎，對網頁制作的方法進行一系列的介紹，總結并概括HTML語言網頁制作時特殊注意事項，希望可以為相關行業工作者或學習者提供有價值的參考。
關鍵詞：HTML;網頁設計;制作方法
中圖分類號：TP37? ? ? 文獻標識碼：A
文章編號：1009-3044（2021）36-0083-03
開放科學（資源服務）標識碼（OSID）：
隨著網絡技術的不斷發展，人們的生活逐漸與網絡密不可分，現階段人們對互聯網資源的需求量越來越大，網頁成為人們學習知識和獲取信息的重要手段，如何設計和制作吸引人們眼球的網頁，成為現階段相關領域研究的重點課題。網絡與用戶之間的交互行為依賴于一個個單獨的網頁單元，現階段實現網頁制作的工具有許多，例如Dreamweaver、FrontPage等，但大部分網頁制作工具實現的功能都具有一定的相似性，從而導致制作出來的網頁千篇一律，無法滿足用戶的特殊需求，難以達到吸人眼球的目的。為了更好地開發和設計出與眾不同的網頁，實現網頁的特殊性，采用HTML語言進行網頁的設計和制作，彌補一般網頁制作工具的缺陷和不足。
1 HTML概述
1.1 HTML的發展歷史
HTML即超文本標記語言，是由Web的發明者Tim Berners Lee. 及其同事Daniel w. Connolly在1900年共同創建的，采用HTML語言編寫的超文本文檔一般被稱為HTML文檔，可以獨立應用于各種操作平臺，通過專用的瀏覽器進行內容的識別和呈現，而且呈現出的結果也就是大家所熟悉的網頁。1900年以來，HTML語言得到了萬維網的廣泛的應用，瀏覽器通過將語言的內容以影像聲音、圖片、文字、動畫等形式，呈現給瀏覽者，為人們提供所需要的服務。HTML是一種靜態的網頁文件，其所包含的指令代碼也僅僅為網頁中資料顯示位置和排版的位置標記，簡單易懂，操作便捷，HTML是廣泛的一種應用為超鏈接，用戶通過單擊頁面中的某一位置或內容，即可跳轉到另一界面，在瀏覽器的運行環境下，世界各地的文件達成了超文本傳輸協議，就可以實現網絡的網頁頁面的跳轉和內容的搜索查詢。
1.2 HTML的定義
HTML超文本標記語言不僅僅是一種應用，更是一種范圍和標準。它通過標簽等實現了網頁中內容的標記和鏈接，使頁面在瀏覽器運行模式下可以相互鏈接和跳轉，瀏覽器在對網頁文件進行閱讀的過程中是按照順序逐句閱讀的，根據其中的標記進行內容的顯示，因此對書寫中存在的錯誤標記不能給予提示，亦不可停止其執行的過程。用戶在進行HTML環境下的網頁設計制作時只能通過頁面的顯示效果來分析語句中存在的問題和錯誤部位，且在不同的瀏覽器中，同一標記也可能有完全不同的解釋，因此出現顯示效果方面的差異。
1.3 HTML的版本
1989年Tim Berners Lee和他的團隊開發出的HTML語言在一定程度上延續了古老的SGML語言定義，并在其基礎上進行了一系列的語言簡化和功能的優化，對瀏覽器在屏幕上顯示的數據展示功能進行了優化，得到了各個瀏覽器廠商的廣泛支持和應用。
在歷史上，HTML有1.0、2.0、3.2等多個版本，值得一提的是HTML 5是現階段公認的下一代Web語言，它在媒體內容和應用的方面有著極強的應用能力，對于推動互聯網發展有著重要的作用。
隨著電子商務行業的興起和發展，HTML的地位也得到了顯著提高，尤其在Web迅速發展的過程中起到了助推的作用。
1.4 HTML的特點
HTML語言的制作較為簡單，但其有著強大的功能，可以支持各種格式的數據文件在瀏覽器界面中的顯示，而這也就進一步推動了萬維網的發展和普遍應用。下面，文章將對HTML的主要特點進行簡述。
1） 簡易性。HTML超文本標記語言，在版本升級的過程中采用的是超集方式，使得其應用更加靈活和便捷。
2）可擴展性。HTML在普及的過程中，逐漸對其自身進行改進，尤其在功能方面得到了極大的加強，通過增加了標識符等要求，HTML在網頁設計的過程中，采用了子類元素的顯示和應用方式，因此對系統擴展提供了穩固的保障。
3）平臺無關性。現階段，雖然互聯網和網頁的應用得到了極大的普及，個人計算機得到了廣泛的盛行，但在一些大型實驗研究或其他有相關需求的機構中Mac等機器的使用者仍大有人在。在此背景下，HTML超文本標記語言有著更加廣泛的平臺服務能力，不受計算機種類的限制，不僅為自身的發展鋪設了長遠的道路，更推動了萬維網的普遍盛行。
4）通用性。HTML語言是網絡范圍內一種通用的語言，它可以通過簡單的語言實現制作人與瀏覽器的信息傳遞，建立文本與圖片、視頻、音頻等相結合的復雜界面，并可以實現超鏈接的強大功能，而這些網絡頁面被上傳至網絡后，可以被其他人廣泛瀏覽和閱讀，不受電腦型號或瀏覽器種類的限制，具有廣泛的通用性。
2 HTML語言的編輯方式
HTML實際上是文本文件在瀏覽器中的顯示，因此它的編輯實質上是對語言文字內容的編輯，現階段HTML常用的編輯器有以下幾種類型：
1）文本編輯是HTML語言編輯中最簡單的一種，它可以使用一般的文本編輯器或文檔編輯器。例如，微軟系統自帶的記事本或寫字板均可以進行HTML語言的編輯，WPS或word亦可進行，但在保存時，若想要制作出的文件為網頁文件，則需要將其擴展名改為“.htm”或“.html”，只有這種類型的文件可以被瀏覽器識別和執行，否則將顯示原有的文本文檔。
2）半所見即所得軟件，例如FCK-Editer等在線網頁編輯器。
3）所見即所得軟件是現階段最廣泛應用的網頁編輯器，一般供對HTML的相關知識缺乏一定了解的用戶使用，雖然這種軟件與前面兩種相比具有更加簡便，且網頁制作效率更高，直觀表現性更強，但其生成代碼結構復雜，在大型網站的多人協作和精準定位等高級功能方面表現得極為無力。
HTML的字符集包含ASCII字符和漢字和大量的特殊字符，而特殊字符的使用一般現在網頁中特殊意義字符的顯示或鍵盤上不存在的字符，這些字符的表現一般是通過代碼來實現的，而代碼又包括字符代碼和數字代碼兩種不同的形式。
在HTML語言定義中，有許多種類型的元素內容，例如腳本數據、樣式表中的數據、屬性值，如id、名稱、數字單位等，而上述所有的數字類型均隸屬于專業的字符數據。
3 HTML的整體結構
通常情況下，一個網頁可能由多個HTML文件構成，而每個HTML都具有一個基本的整體結構，其中的標記一般為成雙成對出現的，它們分別叫作開頭，標記和結尾標記。
<html>標記是用來對文本形式進行說明的標記，表示該文件是采用超文本標記語言進行描述的，為瀏覽器識別和顯示文件做出提示，它可以被認為是整個HTML文件的開頭。而對應的，</html>則為文件的結尾標記，它用于提示瀏覽器文件的結尾。
<head>和</head>標記為頭部標記的開頭標記和結尾標記，文件的頭部標記是對整個頁面標題的敘述和說明，并不作為頁面的主體內容顯示。文件頭部一般包括標題（<title>/</title>），序言、說明等，有時還包括鏈接的默認地址（<base>/</base>）、文檔與外部資源之間的關系（<link/</link>）、文檔中的元數據（<meta>、</meta>）等。
<body>和</body>是對網頁主題內容范圍界定的標記，網頁中所包括的實際內容即位于這兩個標記所顯示的內容之間，一般稱為“正文標記”或“實體標記”。
4 基于HTML語言的網頁制作方法
現階段常用于制作HTML語言網頁的軟件有許多，比較主要的是Dreamweaver、Frontpage等，為了豐富網頁的內容和表現形式，經常還使用Photoshop、Flash、Fireworks等軟件，進行各種常規編輯、文字編輯、表格編輯等工作，使得設計出來的頁面可以包含大量文字、圖案、圖標、影視、音頻等內容，使其更具有交互性和實現各種強大的功能。
4.1 常規編輯
網頁的常規編輯就是利用HTML專用的標記對網頁頁面的布局和展示進行設計和規劃，通過將標記置于特定的位置而進行網頁內容的布局。正如上文所提到的，絕大部分網頁的內容都在<html>和</html>的字符之間，<head>和</head>之間則是文件的頭部內容，包括標題、網址等內容，在<body>和</body>之間的則是文件的主體部分，也就是頁面中所顯示的內容。若制作的網頁中包括視頻或音頻等內容，可以通過<a>、</a>標記對音頻或視頻文件的地址進行標記，以達到在網頁中插入相關文件的目的。
4.2 表格編輯
表格是網頁設計和開發中非常重要的一種元素，在HTML語言環境下將進行網頁制作時，一般通過<table>、</table>兩個標記來實現網頁區域的劃分。關于表格編輯，還可以通過<td>和</td>兩個標記對其進行參數的定義，以<th>、</th>實現對表頭的定義。
4.3 文字編輯
HTML語言環境下對網頁內的文字內容進行編輯時，一般通過以下幾種源代碼實現內容的定義和文字格式的定義：
1）<hn>、</hn>n=1～6是對內容標題等級的定義，類似于word文檔中的文字標題等級;
2）align是對文字對齊方式的定義，包括left、center、right三種對齊方式，例如，<h1 align = “center”所表示的內容是一級標題的居中對齊形式;
3）<p>和</p>是一對段落標記，實現文字內容以段落的方式進行顯示，兩個標記之間的內容可以被認為是一個自然段;
4）<br>和</br>是一對換行標記，實現文字內容以行的方式進行顯示，兩個標記之間的內容為一行;
……
4.4 音頻編輯
在網頁制作的過程中，不可避免地會使用到音頻文件作為網頁的背景音樂，也就是我們俗稱的“BGM”，現階段常用的網頁音頻文件主要為mid格式的文件，這種格式的音頻文件占用的空間非常小，在網絡環境下可以縮短頁面加載的時間，提高網頁瀏覽的速度，有效避免了BGM卡頓現象的發生，從而提高了頁面設計的質量。背景音樂在<body>中的應用格式為：<bgsound src =”BGM文件路徑”loop =”BGM播放次數”>，有些設計師為了確保BGM在網頁中的循環播放會設計一個較大的循環值。
5 網頁制作的注意事項
網頁設計和制作工作是一個綜合性的網絡工程，包括了美工設計、后臺編程等多個領域的工作，網頁設計者在頁面的設計和開發時要充分考慮網頁制作的目的，明確受眾群體，有針對性地設計網頁的內容。同時，在設計過程中，要確保頁面在干凈正切的前提下有自己的風格，并具有一定的美觀性。此外，還要保證網頁中鏈接的便捷性和實用性，盡可能滿足廣大使用者的需求，減少沒必要的點擊次數。
6 總結
本文對HTML的發展歷史和特點進行了一系列的概述，總結了HTML語言下的網頁制作基本方法和技巧。雖然網頁制作的入門較為簡單，但由于其在開發的過程中關聯了大量相關領域，在一些大型的、綜合性較強的網頁的開發和設計中，仍然需要大量的團隊合作，對開發者的HTML語言技巧也有極大的需求，因此，為了開發制作出理想的網頁文件，仍需要對相關知識進行進一步的學習和總結。
參考文獻：
[1] 張麗霞.基于HTML語言的網頁制作方法[J].電子測試，2018（Z1）：86-87.
[2] 張鐵紅，邵波.淺談HTML語言的網頁制作方法與技巧[J].通訊世界，2016（1）：189.
[3] 柳汨.基于HTML語言的網頁制作淺析[J].中小企業管理與科技，2016（1）：258.
[4] 匡成寶.HTML語言的網頁制作方法與技巧探討[J].電腦迷，2017（3）：190-191.
[5] 青華.HTML語言的網頁制作技巧與方法[J].電腦知識與技術，2017，13（30）：209-210.
[6] 朱向富.HTML語言的網頁制作方法和技巧[J].電子技術與軟件工程，2016（19）：67.
[7] 茹先古麗·吾守爾，艾合買提·阿布拉.基于HTML語言的網頁制作方法[J].經貿實踐，2015（9）：267.
[8] 王闖.HTML語言的網頁制作技巧與方法分析[J].無線互聯科技，2015（11）：38-39.
【通聯編輯：唐一東】
