一.HTML结构分析
🤢一个完整的HTML包括包括哪几个部分？主要包括文档声明，html元素：head元素，body元素等，如下：
xml
<html>
<head></head>
<body>
<div>内容部分</div>
</body>
</html>🐲那么什么是文档声明？就是<!DOCTYPE html>它的作用如下；
- html文档的声明，告诉浏览器当前页面是HTML5页面
- 让浏览器用HTML5的标准去解析识别内容。
- 必须放在HTML文档的最前面，不能省略，省略了会出现兼容性问题
二.html元素
😳<html>元素表示一个HTML文档的根（顶级元素），所以它也被称为根元素。
- 所有其他元素必须是此元素的后代
- W3C标准建议为html元素增加
lang属性，作用是
- 帮助语音合成工具确定要使用的发音
- 帮助翻译工具确定要使用的翻译规则
- 比如常用的规则
lang="en"表示这个HTML文档的语言是英文。lang="zh-CN"表示这个HTML文档的语言是中文。
三.head元素
😬HTML head元素规定文档的相关配置(也称为元数据)，包括文档的标题，引用文档的标题，引用的文档样式和脚本等。
- 什么是元数据（meta data），是描述数据的数据。
- 这里我们可以理解为对整个网页的配置。
🐻❄️常见的设置有哪些哪？ 一般至少包含如下2个配置。
🐔网页的标题：title元素
🙈网页的编码：mata元素
- 可以用于设置网页的字符编码，让浏览器更加精准地显示每一个文字，不设置或者设置错误会导致
乱码 - 一般都使用
UTF-8编码，涵盖了几乎世界上所有的文字<meta charset="utf-8">
四.body元素
😈body元素里面的内容将是你在浏览器中看到的东西，也就是页面的具体内容和结构。
- 之后学习的大部分HTML元素都是在body中编写呈现的：
五.HTML元素
🐳HTML元素本身很多，但是常用的元素就那么几个。
- developer.mozilla.org/zh-CN/docs/...
- 我们只需要记住常用的，不常用的学会看文档即可。
🐲常用的元素（暂时掌握下面几个就够了，90%时间都在写这几个）
p元素，h元素；img元素，a元素，iframe元素；div元素，span元素；
👽下阶段学习的元素：
ulolli元素；buttoninput元素；tablethreadtbodythreadthtrtd
🐔HTML5新增元素（后续学习）
六.常见元素-h元素
🐸在一个页面通常会有一些比较重要的文字作为标题，这个时候我们可以使用h元素。
🐔<h1>--<h6>标题(Heading) 元素呈现了六个不同的级别的标题。
- Heading是头部的意思，通常会用来做标题。
<h1>级别最高，而<h6>级别最低。
🤢注意：h元素通常和SEO优化有关系(什么是SEO，后续再介绍)
七.常见的元素-p元素
😬如果我们表示一个段落，这个时候可以使用p元素。
😈HTML <p>元素（或者说HTML段落元素）表示文本的一个段落。
p元素是paragraph单词的缩写，是段落，分段的意思p元素多个段落之间会有一定的间距；
八.常见的元素-img元素
🐳我们应该如何告诉浏览器来显示一张图片哪？使用img元素。
🙈HTML 元素将一份图像嵌入文档。
img是image单词的所以，是图像，图像的意思。- 实际上img是一个可替换元素(replaced element)。
👽img有两个常见的属性：
src属性：source单词的缩写，表示源，是必须的，它包含了你想嵌入的图片的文件路径。alt属性：不是强制性的，有两个作用。作用一：当图片加载不成功(错误的地址或者图片资源不存在)，那么会显示这段文本。作用二：屏幕阅读器会将这些描述读给需要使用阅读器的使用听，让他们知道图像的含义
九.img元素-图片的路径
🐸设置img的src时候，需要给图片设置路径：
- 网络图片：一个URL地址（后续会专门讲URL），网络图片的设置非常简单，给一个地址即可。
- 本地图片：本地电脑上的图片，后续会和html一起部署到服务。
🐲本地图片的路径有两个方式：
- 方式一：绝对路径（几乎不用），从电脑的根路径开始一直找到资源的路径；
- 方式二：相对路径(常用)
- 相当于当前文件的一个路径；
.代表当前文件夹(1个)，可以省略..代表上级文件夹(2个.)
🤢对于网页来说，不管什么操作系统(Window，Mac，Linux)，路径分割线都是/而不是``
十.img元素-图片的格式
十一.常见元素-a元素
😬在网页中我们经常需要跳转到另外一个链接，这个时候我们使用a元素；
🐻❄️HTML a元素（或称锚元素）：定义超链接，用于打开新的URL；
👽a元素有两个常见属性：
- href：Hypertext Reference的简称：指定要打开的URL地址
- 也可以是一个本地地址
- target：该属性指定在何处显示链接的资源。
_self：默认值，在当前窗口打开URL；_blank: 在一个新的窗口中打开URL；
十二.a元素-锚点链接
😳锚点链接可以实现：跳转到网页中的具体位置
😈锚点链接有两个重要步骤：
- 在要跳到的元素上定义一个id属性；
- 定义a元素，并且a元素的href指向对应的id；
十三.a元素-图片链接
🐔在很多网站我们会发现图片也是可以点击进行跳转。
- img元素跟
a元素一起使用，可以实现图片链接。
🐳实现思路：
- a元素中不存放文字，而是存放一个img元素；
- 也就是img元素是a元素的内容；
十四.a元素-其他URL地址
🐸a元素一定是用来跳转网页的吗？
十五.iframe元素
🤢利用iframe元素可以实现：在一个HTML文档中嵌入其他HTML文档
- frameborder属性
- 用于规定是否显示边框
1:显示0:不显示
- a元素target的其他值
_parent：在父窗口中打开URL_top:在顶部窗口中打开URL
- 在项目中禁止使用iframe嵌套
X-Frame-Options:sameorigin就可以禁止非同源的页面。
十六.div元素，span元素的历史
😬在HTML中有两个特殊的元素div元素，span元素：
div元素：division，分开，分配的意思；span元素：跨域，涵盖的意思；
🙈这两个元素有什么作用哪？无所用，无所不用。
👽产生的历史：
- 网页的发展早期没有CSS，这个时候我们必须通过语义化元素来告知浏览器一段文字如何显示。
- 后来出现了CSS，结构和样式需要分离，这个时候html只需要负责结构即可。
- 比如
h1元素可以是一段普通的文本+CSS修饰样式； - 这个时候就出现了
div``span来编写HTML结构所有的结构，样式都交给CSS来处理。
😈所以，理论上说：
- 我们页面可以没有div，span；
- 我们的页面也可以全部都是div，span；
十七.div和span的区别
😳这个时候有一个问题：我全用一个不就可以了吗？
🐻❄️div元素和span元素都是纯粹的容器，也可以把他们理解成盒子，他们都是用来包裹内容的；
- div元素：多个div元素包裹的内容会在不同的行显示；
- 一般作为其他元素的父容器，他其他元素包住，代表一个整体。
- 用于把网页分割为多个独立的部分。
- span元素：多个span元素包裹的内容会在同一行显示；
- 默认情况下，跟普通文本几乎没有差别
- 用于区分特殊文本和普通文本，比如用来显示一些关键字；
十八.不常用元素
🐸strong元素：内容加粗，强调；
- 通常加粗会使用CSS样式来完成
- 开发中偶尔会使用一下
🐲i元素：内容倾斜
- 通常使用斜体会使用CSS样式来完成
- 开发中偶尔会用它来做字体图标(因为看起来像是icon的缩写)
🙈code元素：用来显示代码
- 偶尔会使用用来显示等宽的字体
🐔br元素：换行元素
- 开发中已经不使用了
🐳更多元素详解，查看MDN文档：developer.mozilla.org/zh-CN/docs/...
十九.HTML全局属性
😈我们会发现某些属性只能设置在特定的元素中：
- 比如img元素的src，a元素的
href
🤢也有一些属性是所有HTML都可以设置和拥有的，这样的属性我们称之为"全局属性"
👽常见的全局属性如下：
- id：定义唯一标识符，该标识符在这个文档中必须是唯一的，其目的是在链接，脚本或者样式时标识元素。
- class：一个以空格分隔的元素的类名列表，它允许css和javaScript通过类选择器或者DOM方法来选择和访问特定的元素。
- style：给元素添加内联样式；
- title：包含表示与其所属元素相关的信息文本，这些信息通常可以作为提示呈现给用户，但不是必须的。