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节中展示各个页面浏览器中的结果。