沃梦达 / IT编程 / 前端开发 / 正文

VScode自动生成HTML的含义

我们在使用VScode想要生成HTML代码模板很简单,只需要输入!之后按TABVScode就会帮我们生成这样一段代码!DOCTYPE htmlhtml lang=enheadmeta charset=UTF-8meta http-equiv=X-UA-Compatible conten...

我们在使用VScode想要生成HTML代码模板很简单,只需要输入!之后按TAB

VScode就会帮我们生成这样一段代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

相较于最基本的HTML代码多了什么呢?

  1. doctype
  2. lang属性
  3. 三个meta标签

那他们有什么作用呢?下面就是分类型的解释

1. lang属性

lang属性规定元素内容的语言,用在此处则规定了HTML的全局语言属性

通俗的来说就是规定了主要语言,这里的en为英语,其他语言可以通过参考表查到

HTML 语言代码参考手册 (w3school.com.cn)

2. 文件兼容性

文件兼容性定义了让浏览器如何编译你的网页

效果是让你的网页在不同版本的浏览器都有一致的外观

2.1DOCTYPE

自IE6开始允许网页开发人员选择IE编译和显示他们网页的方式,想要使用这个增强功能,网页必须包含恰当的

<!DOCTYPE>指令

在这里DOCTYPE是用来声明文档类型和DTD规范的:具体来说就是告诉浏览器我这是什么类型的文档+文档的行文规范

常见的DOCTYPE

HTML5的简化

<DOCTYPE html>

HTML4的两种方式:Strict严格模式(不包含弃用元素),Transitional传统模式(包含弃用元素)

2.2 X-UA-Compatible

指定网站的文件兼容性模式,判断一个网页该使用的文件模式

这里的内容是使用IE=edge来指示IE8使用它支持的最高模式

3. 字符编码

charset属性规定了外部脚本文件中使用的字符编码

如果外部文件中的字符编码与主文件的编码不一致,就需要用charset来通用编码

另:默认的字符编码是ISO-8859-1

4. 视区Viewport

这里一个针对移动网页优化的标签

width控制viewport大小,而device-width为设备宽度,让这两者相等可以让页面不会出现显示太小的问题

而initial-scale则控制初始缩放比例,此次为1是定义加载的图片不允许缩放

本文标题为:VScode自动生成HTML的含义