为什么要HTML？
最初的设计目的：
李爵士需要同事电脑里数据，但是它们来自不同国家、不同电脑、不同种类的文档类型。于是他决定把标准化的文档放在一起，点击就能跳转文档。
实现方式：
1.超文本（hypertext）：点击跳转网页
2.标记（markup）：注明文本、图片和其他内容
示例：
<!DOCTYPE html>
<html>
<head>
<title>This is a title</title>
</head>
<body>
<p>Hello world!</p>
</body>
</html>
谁实现了超文本？（hypertext）
<a>标签，点击就能跳转另一个html文档。
示例：
<a href="https://developer.mozilla.org/en-US/">MDN官网</a>
效果：
谁实现了标记？（markup）
标签（tag）
示例：
<p>为美好的网站<i>献上</i>祝福</p>
效果：
为美好的网站献上祝福
不想跳转怎么办？
跳转html文档很麻烦，我想在当前页面就能看另一个html文档怎么办？
<iframe>
示例：
<iframe id="inlineFrameExample" title="Inline Frame Example" width="300" height="200"
src="https://www.openstreetmap.org/export/embed.html?bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861898606&layer=mapnik">
</iframe>
效果：
语义化 结构化
让html页面像一篇文章一样，有头有尾，有标题，有段落，有章节，让人类可读可写，让计算机知道怎么处理页面内容。
<body>
<header>页眉</header>
<main>
<article>
<h1>文章标题</h1>
<p>文章内容</p>
</article>
</main>
<footer>页尾</footer>
</body>
如果不语义化结构化的话
<body>
<span>结构化语义化就跟写文章一样，有头有尾有主体，有文章，有章节，有标题有段落。</span>
<hr>
<div>不语义化结构化会怎样？人类看着乱，计算机看着也乱。</div>
<div>div和span使劲怼</div>
<span>你说乱不乱。</span>
<span>不乱？别光看网页啊<br>看html源码你就知道这写的都是什么乱七八糟的东西了。</span>
</body>