一个完整的HTML结构包括：
文档声明
html元素
head元素
body元素
html元素
<html> 元素 表示一个 HTML 文档的 根 （顶级元素），所以它也被称为 根元素 。
所有其他元素必须是 此元素的后代 。
W3C标准建议为html元素增加一个 lang属性 ，作用是
帮助 语音合成工具 确定要使用的发音;
帮助 翻译工具 确定要使用的翻译规则;
比如常用的规则：
lang=“en” 表示这个HTML文档的语言是英文；
lang=“zh-CN” 表示这个HTML文档的语言是中文；
head元素
HTML head 元素 规定文档相关的 配置信息（也称之为元数据）， 包括 文档的标题 ， 引用的文档样式 和 脚本 等。
什么是元数据（ meta data ），是描述数据的数据；
这里我们可以理解成对 整个页面的配置
网页的标题： title元素
网页的编码： meta元素
可以用于设置网页的 字符编码 ，让浏览器更精准地显示每一个文字， 不设置或者设置错误会导致乱码 ；
一般都使用 utf-8编码 ，涵盖了世界上几乎所有的文字；
body元素
body元素里面的内容将是你 在浏览器窗口中看到的东西 ，也就是 网页的具体内容和结构 。
HTML元素
HTML元素本身很多，但是 常用的元素就是那么几个 。
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element
我们只需要记住 常用的 ，不常用的学会查看文档即可；
常用的元素 （暂时掌握下面几个就够了，90%时间都在写这几个）：
p元素、h元素；
img元素、a元素、iframe元素；
div元素、span元素；
ul、ol、li元素；
button元素、input元素；
table、thead、tbody、thead、th、tr、td；
常见元素 – h元素
<h1>–<h6> 标题 (Heading) 元素 呈现了六个不同的级别的标题
Heading是头部的意思，通常会用来做标题
<h1> 级别最高，而 <h6> 级别最低
<!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>
<!-- h元素 h1~h6 -->
<h1>我是h1标题</h1>
<h2>我是h2标题</h2>
<h3>我是h3标题</h3>
<h4>我是h4标题</h4>
<h5>我是h5标题</h5>
<h6>我是h6标题</h6>
</body>
</html>常见元素 – p元素
如果我们想 表示一个 段落 ，这个时候可以使用 p 元素。
HTML <p> 元素（或者说 HTML 段落元素）表示 文本的一个段落 。
p 元素 是 paragraph 单词的缩写，是 段落、分段 的意思；
p 元素 多个段落之间会有一定的间距；
<!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>
<p>
最后一个是国王，他是小王子在离开自己的星球后拜访的第一个小星球325上仅有的居民。这个国王称自己统治所有一切，他的统治必须被尊敬和不容忤逆;然而，事实上他只是徒有虚名，他只能让别人去做别人自己想做的事。
</p>
<p>
这些都是光遇里的小王子季节留下的一个独立的小星球，这里包括了小王子遇到的很多人，每个人都是独立的一个小星球，虽然小王子遇到他们虽然不理解，但是他们都是独立的人格，每个人都是自己独立的星球。
</p>
</body>
</html>常见元素 - img元素
HTML <img> 元素 将 一份图像嵌入文档 。
img是image单词的所以，是 图像、图像 的意思；
事实上img是一个 可替换元素（ replaced element ） ；
<!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>
<p>哈哈哈哈</p>
<!-- src -> source(源) -->
<img width="300" src="https://p6.toutiagin/tos-cn-i-qvj2lq49k0/ec7d03634695464cab47abfe2a00efb0?from=pc" alt="小王子图片">
<p>呵呵呵呵</p>
</body>
</html>常见元素 – a元素
HTML <a> 元素 （或称锚（anchor）元素）：
定义 超链接 ，用于 打开新的URL ；
<!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>
<!-- http://www.baidu.com -> 百度的服务器 -> index.html文件 -->
<a href="http://www.baidu.com" target="_blank">百度一下</a>
<a href="https://www.toutiao.com/amos_land_page/?category_name=topic_innerflow&event_type=hot_board&log_pb=%7B%22category_name%22%3A%22topic_innerflow%22%2C%22cluster_type%22%3A%222%22%2C%22enter_from%22%3A%22click_category%22%2C%22entrance_hotspot%22%3A%22outside%22%2C%22event_type%22%3A%22hot_board%22%2C%22hot_board_cluster_id%22%3A%227078044780403359777%22%2C%22hot_board_impr_id%22%3A%22202203251152380102112151401FC722C2%22%2C%22jump_page%22%3A%22hot_board_page%22%2C%22location%22%3A%22news_hot_card%22%2C%22page_location%22%3A%22hot_board_page%22%2C%22rank%22%3A%223%22%2C%22source%22%3A%22trending_tab%22%2C%22style_id%22%3A%2240132%22%2C%22title%22%3A%22%E4%BB%A5%E7%A7%91%E6%8A%80%E5%88%9B%E6%96%B0%E6%8E%A8%E5%8A%A8%E9%AB%98%E8%B4%A8%E9%87%8F%E5%8F%91%E5%B1%95%22%7D&rank=3&style_id=40132&topic_id=7078044780403359777">以科技创新推动高质量发展</a>
</body>
</html>iframe元素
利用iframe元素可以实现：在一个HTML文档中嵌入其他HTML文档
frameborder属性
用于规定是否显示边框
1：显示
0：不显示
<!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>
<h1>哈哈哈</h1>
<p>呵呵呵呵呵呵</p>
<iframe src="http://www.taobao.com" width="800" height="600" frameborder="0"></iframe>
<iframe src="http://www.mi.com" width="800" height="600" frameborder="0"></iframe>
<iframe src="http://www.baidu.com" width="800" height="600" frameborder="0"></iframe>
<iframe src="http://www.jd.com" width="800" height="600" frameborder="0"></iframe>
</body>
</html>div元素、span元素的区别
div元素和span元素都是 “纯粹的” 容器 ，也可以把他们理解成 “盒子” ，它们都是用来 包裹内容 的；
div元素： 多个div元素包裹的内容会在 不同的行 显示；
一般作为其他元素的父容器，把其他元素包住，代表一个整体
用于把网页分割为多个独立的部分
span元素： 多个span元素包裹的内容会 在同一行 显示；
默认情况下，跟普通文本几乎没差别
用于区分特殊文本和普通文本，比如用来显示一些关键字
不常用元素
strong元素 ：内容加粗、强调；
通常加粗会使用css样式来完成；
开发中很偶尔会使用一下；
i元素： 内容倾斜；
通常斜体会使用css样式来完成；
开发中偶尔会用它来做字体图标（因为看起来像是icon的缩写）；
code元素： 用于显示代码
偶尔会使用用来显示等宽字体；
HTML全局属性
◼ 常见的全局属性如下：
id ：定义唯一标识符（ID），该标识符在整个文档中必须是唯一的。其目的是在链接（使用片段标识符），脚本或样
式（使用 CSS）时标识元素。
class ：一个以空格分隔的元素的类名（classes ）列表，它允许 CSS 和 Javascript 通过类选择器或者DOM方法来选
择和访问特定的元素；
style ：给元素添加内联样式；
title ：包含表示与其所属元素相关信息的文本。 这些信息通常可以作为提示呈现给用户，但不是必须的。
