- HTML5+CSS3王者歸來
- 洪錦魁
- 1528字
- 2019-12-09 14:46:00
2-6 解析我的第一個HTML文件
為了方便解說，筆者將ch2_1.html文件的內容再列示一次：
從上面的程序可以知道，相較2-2節所述HTML文件結構而言，我們只增加了3行數據，分別是第4行、第5行和第8行。
2-6-1 <meta>元素
程序第4行筆者使用了<meta>元素，這個元素必須放在<head>標記內。有關<meta>的另一個規定是，必須寫在HTML文件前1024B之內。<meta>元素的主要目的是提供有關這份HTML文件的相關信息。例如編碼方式、作者信息、關鍵詞信息或重新導向網址以便將用戶導向至另一個網址等。由于有關<meta>的設定有很多，所以允許<head>標記內有多個<meta>元素存在。它的相關屬性設定如下：
□ charset
這是設定這份HTML文件的編碼方式，建議設定此屬性為“utf-8”。
UTF-8英文全名是8-bit Unicode Transformation Format，這是一種適合多語系的編碼規則，使用可變長度的方式存儲字符，以節省內存空間。例如，對于英文字母而言使用1B存儲即可，對于含有附加符號的希臘文、拉丁文或阿拉伯文等則用兩個字節空間存儲字符，漢字則是以3個字節空間存儲字符，只有極少數的平面輔助文字需要4個字節空間儲存字符。也就是說，這種編碼規則已經包含了全球所有語言的字符了，所以采用這種編碼方式設計網頁時，其他國家的瀏覽器只要支持UTF-8編碼規則即可正常顯示。例如，美國人即使使用英文版的Internet Explorer瀏覽器，也可以正常顯示漢字。
另外，有時我們在網絡世界瀏覽其他國家的網頁時，會發生顯示亂碼的情況，主要原因就是對方網頁設計師并沒有將charset屬性設置為“utf-8”。例如，早期簡體中文的編碼是GB2312，這種編碼方式是以2個字符的長度存儲一個簡體中文字，由于這種編碼方式不能用于多語系，無法在繁體中文Windows環境中使用，如果網頁設計師采用此編碼方式設計網頁，將造成港、澳和臺灣繁體中文Windows環境下的用戶在瀏覽此網頁時顯示亂碼。
□ name
這個屬性的值有：
author：文件的作者信息。
description：文件的描述，在此設定的內容會出現在搜索引擎的搜尋結果中。
keywords：文件相關的關鍵詞，方便搜索引擎使用。如果要輸入多個關鍵詞，彼此間用逗號隔開。
generator：制作此文件所使用的軟件。
revised：文件最新版本信息。
使用name屬性時，需搭配一個content屬性，這相當于將content的屬性值關聯到name的屬性值。
實例1：下面的語句提供作者的信息是“洪錦魁”。
<meta name="author" content="洪
錦魁">
實例2：下面的語句搜索引擎提供3個關鍵詞，分別是“洪錦魁”“深石”和“DeepStone”。
<meta name="keywords" content="洪錦
魁, 深石, DeepStone">
實例3：下面的語句是對HTML文件頁面的描述。
<meta name="description" content=
"HTML5+CSS3王者歸來書籍范例">
實例4：下面的語句列出了本文件最新版本的信息。
<meta name="revised" content="洪錦魁
2018/01/01">
□ http-equiv
這個屬性的值有：
content-type：在HTML4.01以前，可以使用此屬性值設定語言編碼信息，但是現在可以用charset屬性取代。
refresh：可以設定經過幾秒后重新讀取這個頁面，或是設定經過幾秒后重新導向至另一個網頁。
使用http-equiv屬性時，需搭配一個content屬性，這相當于將content的屬性值關聯到http-equiv的屬性值。
實例5：下面的語句是設定HTML文件語言編碼為臺灣繁體中文。
<meta http-equiv="content-language"
content="zh-tw">
實例6：下面的語句是設定HTML文件語言編碼為簡體中文。
<meta http-equiv="content-language"
content="zh-ch">
實例7：下面的語句是設定HTML文件語言編碼為“utf-8”。
<meta http-equiv="content-type"
content="text/html"; charset="utf-8">
注 其實上述實例是HTML老版本的實例，筆者此處只為列舉用法，HTML5的網頁設計師基本不再使用這些語法，而直接采用ch2_1.html第4行的語法。
實例8：下面的語句是設定HTML文件在經過5秒后自動重新讀取頁面。
<meta http-equiv="refresh"
content="5">
實例9：下面的語句是設定HTML文件在經過5秒后自動導向深石數字公司網頁。
<meta http-equiv="refresh"
content="：5;http://www.deepstone.con.
tw">
上述實例9的功能常用在網頁搬家時，可將用戶導向新網頁以避免客戶流失。
2-6-2 <title>元素
這個元素主要是設定文件標題，在<head>標記只能設定一次<title>。標題會出現在瀏覽器標題、瀏覽器標記列、瀏覽記錄及收藏列表中，所以在設定時要簡潔，同時含義最好可以完整表達整個網頁。以ch2_1.html而言，執行后將顯示下圖所示的文件標題。
上圖所示窗口中，左邊顯示的是ch2_1.html文件的地址，在真實網絡世界里這里顯示的是網頁的地址，可想成Internet地址，第4章會做更完整的說明；右邊的是使用<title>元素設定的標題。
2-6-3 文件主體
ch2_1.html文件的第8行內容是其主體，屬于<body> … </body>之間的內容將會呈現在網頁內。2-6-2節的執行結果圖即其在瀏覽器中輸出的內容。
- Learning Informatica PowerCenter 10.x（Second Edition）
- 編寫高質量代碼：改善C程序代碼的125個建議
- Linux環境編程：從應用到內核
- H5頁面設計：Mugeda版（微課版）
- Java：High-Performance Apps with Java 9
- ArcGIS for Desktop Cookbook
- Deep Learning for Natural Language Processing
- 快樂編程：青少年思維訓練
- ROS機器人編程實戰
- Wearable：Tech Projects with the Raspberry Pi Zero
- 程序員面試金典（第6版）
- Mastering Magento Theme Design
- 人件集：人性化的軟件開發
- Instant OpenCV for iOS
- Vue.js從入門到精通