- 小白實戰大前端：移動端與前端的互通之路
- 陳辰
- 603字
- 2022-06-28 16:19:32
2.1.2 HTML的常規配置
每個HTML頁面中都有一些自己常用的配置。我們先創建一個HTML文件來作為商品頁，然后加入一些常規頁面配置，具體如代碼清單2-1所示。
代碼清單2-1 常規HTML配置實例
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="description" content="電商">
<meta property="og:type" content="article">
<meta property="og:title" content="我是標題">
<meta property="og:url" content="https://www.xxxxx.com">
<meta property="og:description" content="我是內容">
</head>
<body>
我是商品頁
</body>
</html>
接下來我們詳細解釋一下代碼清單2-1中的代碼的含義。所有的HTML文檔都要以<html>標簽進行包裝，!doctype是聲明以HTML5的標準讓瀏覽器解析HTML文檔中出現的內容，<!doctype>聲明沒有結束標簽且對大小寫不敏感，所以也可以寫成<!DOCTYPE>。
HTML文檔的設置都是以<head>標簽包裹起來的，通過<meta>標簽來進行具體描述。
比如<meta charset="utf-8">，charset屬性是HTML5中的新屬性，它替換了之前的<meta http-equiv="Content-Type"content="text/html; charset=UTF-8">，也就是HTML4.01的老標準。它的主要功能是告知瀏覽器此頁面屬于什么字符編碼格式，charset="utf-8"配置則是建議瀏覽器以utf-8這種編碼方式進行解析。
name="viewport"主要是對瀏覽器解析文檔做了窗口和縮放的設置，width=device-width是告訴瀏覽器以設備寬度作為瀏覽器窗口寬度，initial-scale=1是告訴瀏覽器初始設置縮放比例為1，即不縮放。maximum-scale=1是告訴瀏覽器最大的縮放比例為1。user-scalable=no是告訴瀏覽器不允許用戶進行縮放。
除了這些，我們再看看meta的og屬性。這個屬性其實就是為了讓搜索引擎或者爬蟲軟件盡可能地獲取本頁面中的內容。
知識拓展
og是一種新的HTTP頭部標記，即Open Graph Protocol。這種協議可以讓網頁成為一個“富媒體對象”。
用了Meta Property=og標簽，就代表你同意自己的網頁內容可以被其他網站引用。使用Open Graph Protocol的好處：百度的搜索引擎能夠正確抓取內容，幫助內容更有效地在百度結構化展現。
為了方便我們更直觀地看到頁面，在代碼清單2-1中還加了“我是商品頁”。我們將在2.4節中展示各個頁面瀏覽器中的結果。