【前端基础】3、HTML的常用元素（h、p、img、a、iframe、div、span）、不常用元素（strong、i、code、br）
HTML结构
一个HTML包含以下部分：
- 文档类型声明
- html元素
- head元素
- body元素
例（CSDN）：
一、文档类型声明
HTML最一方的文档称为：文档类型声明，用于声明文档类型。即：<!DOCTYPE html>
<!DOCTYPE html> 的作用：
- HTML文档声明，用于告诉浏览器是HTML5页面。
- 让浏览器用HTML5的标准去解析。
- 必须放在最最前面，不可以省略。否则可能有兼容性问题。
二、html元素
1、 <html>元素
表示一个HTML 文档的根（顶级元素），也成为根元素。
其他元素必须是这个元素的后代。
2、一般都会加一个 lang属性
lang属性的作用：
- 定义当前HTML文档的语言
- 帮助语音合成工具确定要使用的发音。
- 帮助翻译工具确定要使用的翻译规则。
常用lang属性的规则：
lang="zh-CN"：表示这个HTML文档的语言是中文。lang="en"：表示这个HTML文档的语言是英文。
例（CSDN）：
三、head元素
1、 <head>元素
规定文档的配置信息（也成为元数据），包括文档的标题，引用的文档样式、脚本信息等等。
- 元数据：描述数据的数据，可以理解为整个页面的配置。
常见的设置：
title元素
设置网页的标题。meta元素
设置网页的编码。即：<meta charset=utf-8">，一般都是utf-8编码。
⭐meta元素是用来让机器识别元数据的。
⭐有各种元素类型。例如name & content可以指定元数据的名称（这部分对 SEO 非常有用）等等。
例（CSDN）：
四、body元素
body元素里面的内容是 在浏览器窗口中看到的东西，也就是网页的具体内容和结果。
五、常用元素
h元素
h：即heading，标题。
作用：将一些重要文字作为标题。<h1>到<h6>：六种不同级别。
<h1>级别最高，<h6>级别最低。
h元素通常和SEO优化有关。
p元素
p：即paragraph，段落。
作用：表示文本的一个段落的时候使用。- 多个段落之间会存在间距。
img元素
-
作用：将图片嵌入文档。告诉浏览器显示图片。
-
<img>常见的两个属性：-
src属性：
是必须的。
包含你想嵌入图片的路径。 -
alt属性
不是强制的。有两个作用：
①如果图片加载失败（图片地址错误或者图片不存在），那么会显示这段文本。
②屏幕阅读器会都这段文字给使用者，指导这张图的含义。 -
其他属性也都可以，例如：
width属性
-
-
图片的路径
src- 网络图片：给一个网络的URL就行。很简单。
- 本地图片：己电脑上的图片。
本地图片的地址分两种：
①绝对路径（几乎不用）
从电脑的本目录开始一直找到资源路径。
②相对路径
对于当前文件而言的一个路径。
.：代表当前文件夹，可省略。
..：代表上一层的文件夹，可省略。 - 注意路径分割都是
/。
<img src="./../images/test.jpg" alt="">
img支持的图片格式
a元素
-
作用：需要跳转到某个链接的时候使用
a元素。 -
<a>元素：定义超链接，用于打开新的URL。 -
<a>元素两个，常见的属性：href属性
指定要打开的URL。
也可以是一个本地地址。target属性
指定在何处显示链接的资源。
①_self：在当前窗口打开。
②_blank：在新的窗口打开。
③_parent：在父窗口打开。（单独使用没效果，需要和iframe元素配合使用。）
④_top：在最顶层窗口打开。（单独使用没效果，需要和iframe元素配合使用。）
-
a元素：设置锚点链接- 作用：跳到网页的某个位置。（例如：目录跳转）
- 具体步骤：
①在要跳的的元素上定义一个id属性
②定义a元素，让他的href指向对应的id。
-
a元素：设置图片链接- 作用：点击某个图片，跳转到指定链接。
- 具体步骤：
①定义a元素，它的内容放一个img元素。（也就是img元素就是a元素的内容。）
②指定href，设置想跳转的地址。
iframe元素
在一个HTML文档中嵌入另一个HTML文档。
div元素
div元素：就是一个容器，或者说盒子。用来包裹内容。- 作用：
①div包裹的内容在不同行显示。包裹的这部分是一个整体。
②把网页分割成多个独立的部分。
span元素
span元素：就是一个容器，或者说盒子。用来包裹内容。- 作用：
①span包裹的内容在同一行显示。包裹的这部分和普通文本没区别。
②用于区分特殊文本和普通文本，主要用来显示关键字。
六、不常用元素
strong元素
- 作用：内容加粗，强调。
通常都是用css来完成。
i元素
- 作用：内容倾斜。
通常都是用css来完成。
code元素
- 作用：用于显示代码
br元素
- 作用：换行
