1. 首先一个HTML文档要有一个“文档声明”，叫做document type，简写为DOCTYPE，它用来告诉浏览器，这是一个html类型的文档。
eg：<!DOCTYPE html>
2. 之后是一个html标签，它是一个双标签（具体的单、双标签定义及类型放在之后的文章中介绍），告诉浏览器html文档的起始和终止位置。前一个html标签中有个属性“lang”，它是language的简写，因此它用来告诉浏览器，这个html文档应识别为哪个语言，当浏览器的默认设置语言与该处不同时，浏览器将会发出通知，是否需要翻译打开的网页，例如：Chrome浏览器。英文使用“en”，中文使用“zh-cn”。
eg：<html lang="en">
...
</html>
3. 在html标签中，有head和body标签。浏览器通过识别head标签，可以解析html的各种设置，从而按开发者需求来显示。
3.1 在head中，有meta标签，使用下方格式，可以给网页添加描述，一个好的description可以帮助网页提升搜索效率，更好地推广该网页。
<meta name="description" content="这是描述性语句">
3.2 在meta标签中，同样可以使用下方格式为网页添加关键词，当用户使用关键词查找网页的时候，能够更好地匹配用户的需求。
<meta name="keywords" content="这是关键词">
3.3 在meta标签中，title标签一定不可少，如果你忘记了上面两点，那这个千万不要忘了加，它是你网页的标题，打开后会显示在浏览器该页面的标题栏上。
<title>这里是标题</title>
除了添加文字，这里也可以添加图片，rel 属性规定当前文档与被链接文档之间的关系，href用来指出图片的地址，可以是本地地址也可以链接到其他网页，href路径不做详细介绍。
<link rel="shortcut icon" href="...">
以上3点做好了将有利于网页的SEO优化，提高网页的质量，它们相当于一篇论文的题目、摘要和关键字部分，能够增加网页被点击和浏览的机会，而流量则是网页能够吸引资金的密码。
3.4 meta标签中，还有个charset属性，通常中文使用“UTF-8”，它会告诉浏览器解码当前文字使用的字符集，否则可能会出现乱码。
3.5 在head中，还可以放置style标签，我们叫它内联样式表，关于CSS的样式可以放在这里，但通常情况下，我们会将CSS与HTML分开放置，以方便修改和整理，后面会描述如何引入外联样式并对CSS做详细介绍。
除以上属性外，head中还有其他属性，后面再一一介绍。
4. 下面就到了最核心的部分，body标签，这里放着你要展示给viewer听、读、看以及交互的主要内容，它相当于一篇论文的主体，这里你可以按照自己的需求进行排版，编辑将要展示的内容，引入音视频，制作动画效果等等。下面一节我们将主要介绍body标签中的内容。
这里使用VScode的同学可以偷个懒，创建好文档后在页面开头打出一个“！”再按空格，便能自动生成网页模板，这个模板可以自己设置，打开方式和设置方法自行查阅相关文档，是不是很方便。
关于HTML的演变和定义，需要读者自行查找，这里仅介绍HTML的要点部分，个别细节之后提到的时候会详细介绍。
2451
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
