HTML骨架解析

在VSCode中按下“！”感叹号便可得到如下的html骨架，没有这些骨架浏览器便不能正常渲染，但是这些骨架分别代表什么含义呢？不急，我们一行一行的看。

 1 <!DOCTYPE html>

 2 <html lang="en">

 3 <head>

 4     <meta charset="UTF-8">

 5     <meta http-equiv="X-UA-Compatible" content="IE=edge">

 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">

 7     <title>Document</title>

 8 </head>

 9 <body>

10

11 </body>

12 </html>

1、<!DOCTYPE html> 声明文档类型　

　　第一行<!DOCTYPE html>是Document Type Definition，简称DTD，表示的是文档类型声明，它必须写在第一行，告诉浏览器这个文件是个什么类型的文件，应该按照什么版本进行渲染。
不同的版本有不同的DTD写法，如下表所示，目前流行的就是HTML5。如果文档不加DTD声明浏览器就会按照Quirks模式进行解析，可能会出现兼容性的问题，导致不同的浏览器渲染的画面不一致。
所以一定要加声明哦，前面的感叹号起的就是强调的作用。

HTML5	<!DOCTYPE html>
HTML 4.01 Strict	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Frameset	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
XHTML 1.0 Strict	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Transitional	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0 Frameset	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML 1.1	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

2、<html lang="en"></html> 根部标签，语言类型设置

<html>是页面中最大的标签——根部标签。其中lang属性表示的是文档内容是用什么样的语言进行渲染。“en”表示的是英文，“zh-CN”表示的是中文，lang属性的作用如下所示：

设定不同语言的css样式或者字体
方便搜索引擎做精确的识别
让语法检查程序做语言识别
帮助翻译工具做识别
帮助网页阅读程序做识别

3、<head></head> 头部标签

　　<head>头部标签主要是对网页的内容进行配置：

　　（1）<meta charset="UTF-8">------设定字符编码的格式

　　meta元素可以提供有关页面的原信息，比如针对搜索引擎和更新频度的描述和关键字。其中的charset属性用来设置文档的字符编码格式，浏览器根据编码去解码对应的html的内容，以防止出现乱码的情况。常见的编码格式主要有ASCII码、GBK、Unicode、UTF-8、GB18030 / DBCS。前端常用的就是GBK和UTF-8。

　　（2）<meta http-equiv="X-UA-Compatible" content="IE=edge">-------设定浏览器的渲染模式

　　meta标签的http-equiv属性相当于文件头的作用，它向浏览器传递一些信息使界面能正确渲染，而X-UA-Compatible参数是IE8新加的一个设置，用来让IE8浏览器按照content设置的内核渲染方式进行界面渲染，从而解决部分兼容性的问题。IE=edge表示使用最高版本的IE内核进行渲染，比如你的电脑里有IE 6/7/8/9内核浏览器，它会强制使用IE9的内核进行渲染。关于X-UA-Compatible的用法详情可参考https://blog.csdn.net/weixin_30589127/article/details/84444776，https://blog.csdn.net/ccfxue/article/details/70739646这两篇文章。

　　http-equiv的语法格式是：<meta http-equiv="参数"content="参数变量值">；其中有以下几种参数：

content-Type：用来设置网页字符集，这个是html4的用法，所以不推荐使用
Expires（期限）：用于设置网页到期时间，一旦网页过期，必须到服务器上重新传输。用法：<metahttp-equiv="expires"content="Fri,12Jan200118:18:18GMT">，注意必须使用GMT的时间格式
Pragma（Cache模式）：用于禁止浏览器从本地的缓存中调阅页面内容，设定后一旦离开网页就无法从cache中在调出。用法：<metahttp-equiv="Pragma"content="no-cache">
Refresh（刷新）：自动刷新页面并指向新的页面。用法：<metahttp-equiv="Refresh"content="2;URL=https://www.jb51.net">（2表示的是秒数）
cache-control：请求和响应遵循的缓存机制，也就是清除缓存（在访问这个网站要重新下载）。在请求消息或响应消息中设置Cache-Control并不会修改另一个消息处理过程中的缓存处理过程。请求时的缓存指令包括no-cache、no-store、max-age、max-stale、min-fresh、only-if-cached。响应消息中的指令包括public、private、no-cache、no-store、no-transform、must-revalidate、proxy-revalidate、max-age。这些指定的含义如下：

Public	指示响应可被任何缓存区缓存
Private	指示对于单个用户的整个或部分响应消息，不能被共享缓存处理。这允许服务器仅仅描述当用户的部分响应消息，此响应消息对于其他用户的请求无效
no-cache	指示请求或响应消息不能缓存
no-store	用于防止重要的信息被无意的发布。在请求消息中发送将使得请求和响应消息都不使用缓存。
max-age	指示客户机可以接收生存期不大于指定时间（以秒为单位）的响应
min-fresh	指示客户机可以接收响应时间小于当前时间加上指定时间的响应
max-stale	指示客户机可以接收超出超时期间的响应消息。如果指定max-stale消息的值，那么客户机可以接收超出超时期指定值之内的响应消息。

　　（3）<meta name="viewport" content="width=device-width, initial-scale=1.0">---------视窗、视口大小设置

　　viewport就是设备的屏幕上用来显示我们的网页的那一块区域，只不过PC端和移动端的视口设置不同，PC端视口是浏览器窗口区域，而在移动端有三个不同的视口概念：布局视口、视觉视口、理想视口。详情可查看这篇文章关于这三个视口的总结如下:

layout viewport（布局视口）：PC端上的布局视口就是浏览器的宽度，而在移动端上为了让PC端设计的网页内容完全显示在屏幕中，此时的布局视口要远远大于移动设备屏幕的尺寸，不然内容会挤成一团出现错乱。
visual viewport（视觉视口）：用户正在看到的网页的区域，可通过缩放来查看网页内容。如果用户缩小网站，我们看到的网站区域将变大，此时视觉视口也会变大。同理，用户放大网站，我们能看到的网站区域将缩小，此时视觉视口也变小了。注意，不管用户如何缩放，都不会影响到布局视口的宽度。
ideal viewport（理想视口）：布局视口的一个理想尺寸，只有当布局视口的尺寸等于设备屏幕的尺寸时，才是理想视口。

width=device-width表示viewport的宽度等于设备的宽度，如果不这么设定那内容就会按照viewport的默认大小显示，可能就会出现滚动条。initial-scale表示设置web页面的初始缩放比例。设置为1.0表示显示未经缩放的web页面。

maximum-scale和minimum-scale用于设置用户对web页面缩放比例的限制。值的范围为0.25~10.0之间。user-scalable指定用户是否可以缩放视区，即缩放web页面的视图。值为yes时允许用户进行缩放，值为no时不允许缩放。

　　除此之外name属性还有其他的参数值，比如：

keywords(关键字) 告诉搜索引擎，该网页的关键字
description(网站内容描述) 用于告诉搜索引擎，你网站的主要内容。
robots(定义搜索引擎爬虫的索引方式) robots用来告诉爬虫哪些页面需要索引，哪些页面不需要索引
author(作者)
generator(网页制作软件）
copyright(版权)

　　（4）<title>Document</title>-----------定义文档的标题

　　浏览器会以特殊的方式来使用标题，并且通常把它放置在浏览器窗口的标题栏或状态栏上。同样，当把文档加入用户的链接列表或者收藏夹或书签列表时，标题将成为该文档链接的默认名称。一个好的标题对文档来说非常重要，最好起一个描述性强、实用性高，与上下问独立的标题，这样更吸引目标读者。

4、<body></body> 文档主体

　　body元素定义文档的主体，包含了文档的所有内容（文本、超链接、图像、列表等），这部分内容是用户可以看到的，是设计的核心部分。关于如何设计web解构，下期在分享了，这篇就讲到这里，希望对大家有所帮助。(*￣︶￣)！