HTML代码是网页的基础，任何Web编程框架或其它高级Web语言终将在浏览器中被解释为HTML基础代码。因此了解HTML基础代码结构及其原理是非常有必要的。
标准HTML代码架构
这是一个通用的HTML架构，它没有任何内容，但包含所有常用的基础元素。
<!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">
<script src="test.js"></script>
<link rel="stylesheet" type="text/css" href="css/banner.css">
<title>Document</title>
<style>
</style>
<script>
</script>
</head>
<body>
</body>
</html>
框架解析
针对上文的基础代码框架，我们逐一解释其作用。
<!DOCTYPE html>
DOCTYPE即DocType，表示文档的类型（Document type）。位于HTML代码的最前位置，在<HTML>标签之前书写。用来声明HTML的版本类型，告知浏览器以何种方式解析、渲染本HTML代码。
常见的 DOCTYPE 声明
HTML 5
<!DOCTYPE html>
HTML 4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" http://www.w3/TR/html4/strict.dtd">
HTML 4.01 Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3/TR/html4/loose.dtd">
HTML 4.01 Frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3/TR/html4/frameset.dtd">
XHTML 1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0 Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML 1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" > "http://www.w3/TR/xhtml11/DTD/xhtml11.dtd">
<html lang="en">
该标签声明了本HTML代码所属语言环境。
其作用有2点：
1 告知搜索引擎，本文属于英文，在检索时如果用户是中文环境则不优先显示
2 告知浏览器，在渲染时如果发现用户环境与本HTML标记语言环境不同，提示用户是否需要翻译（需浏览器插件支持）
<head>
HTML的头部，包含本页面的外引JS代码、CSS代码、页面标题及部分声明。
<meta charset="UTF-8">
<meta>标签是辅助性标签，一般用来声明与本页面相关的信息，包括字符编码，如本例的<meta charset="UTF-8">，也可以声明搜索相关的关键词等。
charset="UTF-8"表示采用UTF-8的编码方式，可以显示中文内容。
| 编码 | 含义 |
|---|---|
| Unicode | 1、国际标准字符集，它将世界各种语言的每个字符定义一个唯一的编码，以满足跨语言、跨平台的文本信息转换。2、UTF8解决字符间分隔的方式是数二进制中最高位连续1的个数来决定这个字是几字节编码。0开头的属于单字节，和ASCII码重合，做到了兼容。 |
| UTF-8 | 将Unicode字符集的抽象代码位映射为8(16/32)位长整数(即代码位)进行数据存储或传输的序列。 |
| GB2312 | 1、GB全称GuoBiao国标，GBK全称GuoBiaoKuozhan国标扩展。GB18030编码兼容GBK，GBK兼容GB2312，这三种编码有着非常深厚的渊源。2、最早的简体中文汉字编码国家标准，采用双字节编码，收录7445个图形字符，其中包括6763个汉字。3、GB2312:全角->两个字节->是编译器不认识的。 |
| GBK | 是对GB2312编码的扩充，对汉字采用双字节编码。GBK字符集共收录21003个汉字，包含国家标准GB13000-1中的全部中日韩汉字，和BIG5编码中的所有汉字。 |
<meta http-equiv="X-UA-Compatible" content="IE=edge">
该声明专用于IE浏览器，告知IE系浏览器本界面使用哪种内核渲染。如，IE=edge表示使用edge内核渲染界面。在F12调试模式可以看到当前的渲染方式。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
该声明主要用于移动端兼容性。name的值viewport是苹果最先在safari中使用，后来其他移动端浏览器都效仿支持。
其width=device-width, initial-scale=1.0表示宽度默认使用设备的宽度，比例使用1.0。
| 名称 | 含义 |
|---|---|
| width | 设置layout viewport 的宽度，为一个正整数，或字符串"width-device" |
| initial-scale | 设置页面的初始缩放值，为一个数字，可以带小数 |
| minimum-scale | 允许用户的最小缩放值，为一个数字，可以带小数 |
| maximum-scale | 允许用户的最大缩放值，为一个数字，可以带小数 |
| height | 设置layout viewport 的高度，这个属性对我们并不重要，很少使用 |
| user-scalable | 是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许 |
<script src="test.js" ></script>
外引的js代码文件，告知浏览器在界面初始加载时需要引入的外部文件，为本页面内部js代码执行做准备。
<link rel="stylesheet" type="text/css" href="css/banner.css">
外引的css代码文件，告知浏览器在界面样式渲染前需要引入的外部文件，为本页面样式渲染做准备。
<title>Document</title>
本页面标题，一般显示在页面标签内，也会在保存本地快捷方式时作为标题内容。
<style>
专属于本页面内部的样式代码块。
<script>
专属于本页面内部的JS代码块。
<body>
HTML代码的内容主体，包含了各类元素标签，如：div，span，ul、p等。是HTML编程主要的工作区。
本文参考文献：
https://wwwblogs/tenWood/p/7934942.html
https://blog.csdn/ANNaScripter/article/details/118991159
https://www.runoob/tags/tag-doctype.html
更多推荐
标准HTML代码框架解析
发布评论