{{msg}}
这里有个示例 HTML example 展示了 HTML 骨架结构。
HTML 全称为 HyperText Markup Language，译为 超文本标记语言，诞生于李爵士（Tim-Berners-Lee）的一篇论文：Tags used in HTML (archive.org)，当时仅 18 个标签元素（如今约110个）。
HTML 文件名后缀为 .html ，在 html 文件里我们用“标签”来描述语义。整个 html 章节，我们需要学习很多“标签”，这些标签在浏览器页面上是无法直观看到的，所以把 html 称之为“超文本标记语言”。
HTML 不是编程语言，而是负责描述文档语义的标记语言。
关乎“语义”的更深刻理解，等接下来我们学习了各种标签，就明白了。
下面 1.1 和 1.2 小节详细介绍超文本、标记语言的含义，感兴趣可以看看，直接跳过也无妨。
所谓的超文本，有两层含义：
（1）图片、音频、视频、动画、多媒体等内容，成为超文本，因为它们 超出了文本的限制。
（2）不仅如此，它还可以从一个文件跳转到另一个文件，与世界各地主机的文件进行连接。即：超级链接文本。
HTML 不是一种编程语言，是一种描述性的 标记语言。这主要有两层含义：
（1）**标记语言是一套标记标签**。比如：标签<p>表示段落，标签<a>表示超链接、标签<img>表示图片、标签<h1>表示一级标题等等，它们都是属于 HTML 标签。
说的通俗一点就是：网页是由网页元素组成的，这些元素是由 HTML 标签描述出来，然后通过浏览器解析，就可以显示给用户看了。
（2）编程语言是有编译过程的，而 标记语言没有编译过程，HTML标签是直接由浏览器解析执行。
<p></p> 标签为例，<p>是开始标记 ，</p>是结束标记。<p>内容</p>。p 标签的一个属性。
javascript + css + html合起来的页面就是一个 DHTML。方式1：我们打开 VS Code 软件，新建一个文件，名叫test.html，保存到本地。
紧接着，在文件里，输入html:5，然后按一下键盘上的Tab键，就可以自动生成如下内容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
上面的内容，就是 html 页面的骨架。
方式2：在 Sublime Text 中安装 Emmet 插件。新建 html 文件，输入html:5，按Tab键后也会
自动生成以上代码。
我们在起手式的基础上，我们往 body 新增几个标签，完整代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h3>我是三级标题</h3>
<img src="" alt="">
<a href="https://www.jd.com">我是超链接，可以点击一下</a>
</body>
</html>
标签写完之后，我们用 chrome 浏览器打开上面这个test.html文件，看看页面效果（或者点击 redev 在线预览）。
到此，第一个简单的 HTML 页面就写完了。是不是很有成就感？
这里有个 HTML example，展示了 HTML 骨架结构。
HTML 标签通常是成对出现的（双边标记），比如<div> 和 </div>；也有少部分单标签（单边标记），如：<br />、<hr />和 <img src="images/1.jpg" /> 等。
属性与标记之间、各属性之间需要以空格隔开，属性值以双引号括起来。
现在，我们来分析以上代码的骨架结构：
| 标签名 | 定义 | 说明 |
|---|---|---|
DOCTYPE |
文档类型声明 | HTML5 能兼容 XHTML 规范，所以只需要`` |
html |
HTML标签 | 页面最外层标签，我们称为根标签 |
head |
文档的头部 | 注意在head标签中我们必须要设置的标签是title |
title |
文档的标题 | 让页面拥有一个属于自己的网页标题 |
body |
文档的主体 | 元素包含文档的所有内容，页面内容 基本都是放到body里面的 |
<!DOCTYPE html> ：html 文件的的第一行，用于文档类型声明。
原本 HTML 4.01 里规定了 普通 和 XHTML 两种大规范，不同规范采用不同的
DOCTYPE类型声明。其中 XHTML 这个体系比 HTML 更严格，比如规定标签必须是小写字母、必须严格闭合标签、必须使用引号包裹属性值等等。本文第5、第6章节会介绍两种规范的细节，感兴趣可以看看。但如今我们常用的是 HTML5，它能兼容 XHTML 规范，我们只需要统一声明
<!DOCTYPE html>，就可以同时使用 HTML4、XHTML 规范，极大地简化了 DTD。
网页的 head 标签里存放 页面的配置，主要使用的标签包括：
<meta> ：声明字符集、视口、作者信息、页面关键词、页面描述（浏览器SEO）等。<title>：定义页面标题，必须要有。<base>：为页面上的所有链接规定默认地址或默认目标。<link> ：引入外部资源。script：引入外部脚本文件。下面主要介绍 meta、link、script 标签。
是网页 head 区域的一个关键标签，meta 表示“元”配置，即页面的基本配置项目，HTML example 里使用 meta 配置网页的功能、简要信息。
下面详细介绍 meta 标签各个属性的功能：
（1）charset 属性规定 html 文档的字符集编码，即 网页的编码方式
<meta charset="UTF-8">
我们通常使用 utf-8（关于 utf-8 会在本文第七章介绍，感兴趣可以浏览一下）。
（2）name 属性自由定义一个名称，对应地 content 的值作为配置项信息关联到这个 name，比如：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
width=device-width：表示视口宽度等于屏幕宽度，initial-scale=1.0 表示视口初始规模为原网页的 1 倍。
我们做移动端开发的时候，可能会需要 禁止用户缩放网页，那么可以这么配置视口：
<meta name="viewport" content="width=device-width,initial-scale=1,
minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
<meta name="Keywords" content="技术博客、内容分享、程序员、编程" />
这些关键词，就是告诉搜索引擎，这个网页是干嘛的，能够提高搜索命中率，让别人能够搜索到你。
<meta name="description" content="掘金是面向全球中文开发者的技术内容分享与交流平台。我们通过技术文章、沸点、课程、直播等产品和服务，打造一个激发开发者创作灵感，激励开发者沉淀分享，陪伴开发者成长 …" />
只要设置 description 页面描述，那么搜索结果就能够显示这些语句，这个技术叫做SEO（search engine optimization，搜索引擎优化）。
效果如下：
（3）http-equiv 属性会在服务器返回的 http 响应头中附加一个字段，同理 content 的值关联到那个附加的字段
上面的几种
<meta>标签都不用记，但是另外还有一个<meta>标签是需要记住的：
<meta http-equiv="refresh" content="3;https://juejin.cn/">
这样，服务器返回给浏览器的响应头就包含：
refresh: 3;http://www.baidu.com
浏览器接收到这个字段，意思是说：3秒之后，自动跳转到百度页面。
注意只能放在 head 区域，先看一个例子：
<head>
<link rel="stylesheet" type="text/css" href="theme.css" />
</head>
rel：规定当前文档与被链接文档之间的关系，常用的有 stylesheet（样式表）、icon（图标），如上面表示引入的外部文件是个样式表。type：规定被连接文档的类型，如上面表示这是个 css 文件href：定义所引入的文件的位置（url），可以用网址、相对路径/绝对路径，如上面使用的其实是相对路径sizes：仅适用于 rel="icon"，定义被链接 icon 的尺寸media：规定被连接资源显示在什么设备上css 我们后续会学，css 样式可以在 .css 文件里声明，也可以在 .html 文件的 head 区域用 <style> 标签包裹。这里可以看一个案例：
<head>
<style type="text/css">
/* css 样式：设置 p 标签内文本的字体颜色为蓝色 */
p {color:blue}
</style>
</head>
不建议在 head 区域直接写 js 脚本，因为会阻塞 html 页面的渲染，造成页面卡顿。
不过，我们可以在 head 区域用 script 引入外部 js 脚本文件，src 即文件的路径：
<script type="text/javascript" src="1.js" defer></script>
最好加上 defer 属性，意思是先下载 1.js 脚本但不立即执行，而是等 html 下载渲染完成再执行这个 1.js，然后再加载图片资源、css 等。
具体可以看下一章节：HTML标签：script 标签
我们可以在 body 标签内填充网页的内容、操作 js 脚本。
具体 html 标签我们会在后续章节介绍，这里可以关注 body 的一些属性：
<body link="red" vlink="blue" alink="green">
<a href="#">点我点我</a>
<br>
呵呵
</body>
link 属性表示默认显示的颜色、alink 属性表示鼠标点击但是还没有松开时的颜色、vlink 属性表示点击完成之后显示的颜色。效果如下：
可以在 script 标签内书写 js 脚本，但最好放在 body 区域底部（
<body>
<!-- 这里省略一些 html 标签 -->
<!-- script 放在 body 区域的底部 -->
<script type="text/javascript">
</script>
</body>
也可以引入外部 js 脚本，同样要注意放在 body 区域底部（项目开发时，我们一般会有个 main.js 作为项目的入口，这个文件必须放在最底部，在所有 js 脚本的下面）
<script type="text/javascript" src="1.js"></script>
<script type="text/javascript" src="main.js"></script>
具体可以看下一章节：HTML标签：script 标签
<div></div>。全局属性，即代表每个 html 标签都拥有这些属性：
（1）class ：类选择器，用来标识一个标签（相当于给它取了外号），以 p 标签为例：
<p class="xxx"></p>
那么我们可以在 css 里为这个 p 标签写特定样式：
.xxx{ color: red; }
也可以在 js 代码中通过 .xxx 找到这个标签：
const xxx = document.querySelector('.xxx')
（2）id：当元素是 全页面唯一 时，id 选择器的用法同 class，但不唯一时也不会报错；
同样，通过 id 可以在 js 中调用属性设置样式，只需 html 中定义 id，比如取为 xxx
<header id="xxx">测试id</header>
那么 js 中即可通过 #xxx 找到这个标签
const xxx = document.getElementById('#xxx')
但要求元素 id 属性值 xxx 不能是 windows 默认声明的全局变量，如 parent、top、self 等；因此，新手应该尽量避免使用 id。
（3）contenteditable：声明后，该元素(标签)所包含的文本可由用户自主编辑，如：
<div class="middle" contenteditable>这个内容可由用户编辑</div>
（4）hidden：在标签里面加上，可以让标签里面的内容 被隐藏
（5）style：作为 html 属性时，用来声明标签的内联样式。
注意这里 style 指的是 html 标签上的属性，而不是
<style>标签
这里顺带提一下
<style>标签：假如想在 .html 文件写 css 样式，我们通常把<style>放 head 里面，但把<style>放进 body 里面也是可行的，区别是这样能让<style>也变得可以被编辑，用户就能自己更改 html 的样式；
style在作为html标签的属性的时候，效果的优先级比作为css的高，以下是它在html标签中作为属性来定义样式
<header id="xxx" style='border: 10px solid green;'>样式</header>
css、html、js 声明的样式同时存在时，以 js 的效果为最终结果。
（6）tabindex：使文本可以用 tab 键进行选中，用来控制 tab 选中时候的顺序。
值为正整数时，按下 tab，会从小到大的顺序切换栏目；
值为 0，表示最后切换到它；
值为-1，表示不可被切换到这个栏目。
（7）title：设置页面的标题，显示在浏览器标签页上，也作为收藏网页的描述文字。
注意这里的 title 指的是 html 标签上的属性，而不是
<title>标签
通过设置，可以在鼠标悬停时显示出写好的文档内容：
<style>
.xxx {
//这三行设置溢出的文本格式
white-space: nowrap; //禁止换行显示
overflow: hidden;
text-overflow: ellipsis; //当文本溢出，超出文本框时，以省略号隐藏溢出部分
}
</style>
//title定义鼠标悬停显示的内容
<header class="xxx" style='border: 10px solid red;' title="鼠标悬停显示隐藏的完整内容">
顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告
</header>
XHTML：Extensible Hypertext Markup Language，可扩展超文本标注语言，通俗地说是一种必须正确标记、且格式良好的标记语言，也可简称为 XML。
HTML 4.01 这个版本是 IE6 开始兼容的，而我们如今手机、移动端的网页所用的 HTML5 是 IE9 开始兼容的。
HTML 4.01 里面规定了 普通 **和 XHTML 两种大规范。原因是 HTML 当时觉得自己有一些规定不严谨，比如，标签是否可以用大写字母呢？当 HTML 的标记书写不规范，会造成其它的设备(ipad、手机、电视等)无法正常显示。
所以，根据一些更严格的规范标准，又制定了一个 XHTML1.0。XHTML 的字母 X，即表示“严格的”，这个体系规定：比如标签必须是小写字母、必须严格闭合标签、必须使用引号引用属性值，等等。XHTML的主要目的是为了 取代HTML，也可以理解为 HTML 的升级版。
XHTML与 HTML4.0 的标记基本上一样，只是多了部分限制：
（1）所有标记元素都要正确的嵌套，不能交叉嵌套。正确写法举例：<h1><font></font></h1>
（2）所有的标记都必须小写。
（3）所有的标签都必须闭合。
<span></span><br> 建议写成 <br /> <hr> 建议转成 <hr />，还有<img src=“URL” />（4）所有的属性值必须加引号。<font color="red"></font>
（5）所有的属性必须有值。<hr noshade="noshade">、<input type="radio" checked="checked" />
（6）XHTML文档开头必须要有 DTD 文档类型定义，只要在编辑器输入 html:xt，再按下 tab 就会生成：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
在HTML5中极大的简化了DTD，也就是说HTML5中就没有XHTML了。HTML5 的 DTD（文档声明头）如下：
<!DOCTYPE html>
**计算机不能直接存储文字，它存储的是编码。虽然说，开发中都用 UTF-8 编码，准没错。但还是有必要了解下计算机编码，在某些需求下使用其它编码可能更优。
计算机只能处理二进制的数据，其它数据，比如：0-9、a-z、A-Z，这些字符，我们可以定义一套规则来表示。下面简单介绍下编码方式的演变历史：
ASCII码： 美国发布的，用1个字节(8位二进制)来表示一个字符，共可以表示2^8=256个字符。 美国的国家语言是英语，ASCII 码也就只能表示0-9、a-z、A-Z、特殊符号。
ANSI编码： 每个国家为了显示本国的语言，都对ASCII码进行了扩展。例如： 中国 国标局 设计的 ANSI 编码是 GB2312(简体)，只支持中文简体，但无法识别生僻字。用2个字节(16位二进制)来表示一个汉字，共可以表示2^16＝65536个汉字。
GBK： K的含义就是“扩展”，意为“国标扩展”，是针对 GB2312 的扩展。可以同时支持汉字、日文、韩文，16位字符集 (最多容纳65536个字符)，即2个字节编码一个文字，还能显示罕见的、古汉语的汉字，现在已经收录了2.1万左右字符。
Unicode编码： 意为“统一码”，字符集可以简写为UCS（Unicode Character Set），收录了全世界13万多个字符，用4个字节(32位二进制)来表示一个字符，想法不错，但效率太低。例如，字母A用ASCII表示的话一个字节就够，可用Unicode编码的话，得用4个字节表示，造成了空间的极大浪费。且unicode不支持诸如盲文、蒙古语、古巴比伦楔形文字等，故衍生出 UTF 编码规则。
UTF-8(Unicode Transform Format)编码： 根据字符的不同，选择其编码的长度。比如：对于一个字符A，用1个字节表示；对于一个汉字，就用2个字节表示。 Unicode的编码方式有三种：UTF-8、UTF-16、UTF-32。由于 UTF-8 与字节序无关（无需BOM），同时兼容 ASCII 编码，使得 UTF-8 编码成为现今互联网信息编码标准而被广泛使用。
毫无疑问，开发中，都用UTF-8编码吧，准没错。
中文能够使用的字符集两种：
字库规模： UTF-8（字很全） > gb2312（只有汉字）
重点1：避免乱码
我们用meta标签声明的当前这个html文档的字库，一定要和保存的文件编码类型一样，否则乱码（重点）。
拿 sublime编辑器举例，当我们不设置的时候，sublime默认类型就是UTF-8。而一旦更改为gb2312的时候，就一定要记得设置一下sublime的保存类型： 文件→ set File Encoding to → Chinese Simplified(GBK)。VS Code 的道理一样。
重点2：UTF-8和gb2312的比较
保存大小：UTF-8（更臃肿、加载更慢） > gb2312 （更小巧，加载更快）
总结：
列出2个使用情形：
1） 你们公司是做日本动漫的，经常出现一些日语动漫的名字，网页要使用 UTF-8；如果用 GB2312 将无法显示日语。 2） 你们公司就是中文网页，极度的追求网页的显示速度，可以使用 GB2312，因为如果使用 UTF-8，那一个汉字每多一个byte，5000 个汉字也就多 5kb。
我们亲测：
我们是怎么查看网页的编码方式的呢？在浏览器中打开网页，右键，选择“查看网页源代码”，找到 <meta> 标签中的 charset 属性即可。