在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解构，下期在分享了，这篇就讲到这里，希望对大家有所帮助。(*￣︶￣)！