支持戳这里看视频学习 →→→ HTML标签学习【一】
HTML标签学习【二】-行内元素学习
HTML标签学习【三】-代码注释以及块状元素学习-上
HTML标签学习【四】-块状元素学习-下
戳这里可看全系列内容 →→→ 戳我戳我戳我
文章目录
一、前言
我们前面了解了很多软件开发的前置知识，以及编辑器的使用，包括HTML的结构，今天我们就来学习一下HTML的标签
二、元素类型分类
根据CSS显示分类，XHTML元素被分为三种类型：
1.块状元素
块状元素在网页中就是以块的形式显示，所谓块状就是元素显示为矩形区域，常用的块状元素包括div、dl、dt、dd、ol、ul、h1-h6、p、form、hr、table、tr、td等；
默认情况下，块状元素都会占据一行，通俗地说，俩个相邻块元素不会出现并列显示的现象；默认情况下，块状元素会按顺序自上而下排列。
块状元素都可以定义自己的宽度和高度。
块状元素一般都作为其他元素的容器，它可以容纳其他内联元素和其他块状元素，我们可以把这种容器比喻为一个盒子。
2.内联元素（也叫行内元素）
常见的内联元素如：a、span、i、em、strong、b等
内联元素的表现形式是始终以行内逐个进行显示；
内联元素没有自己的形状，不能定义他的宽和高，它显示的高度和宽度只能根据所包含内容的高度和宽度来确定，它的最小内容单元也会呈现矩形形状；
内联元素也会遵循盒模型基本规则，如可以定义padding、border、margin、background等属性，但个别属性值不能正确显示；
3.行内块元素
内联块状元素（inline-block）就是同时具备内联元素，块状元素的特点，<img>、<input>、<textarea>标签就是这种内联块状标签。
和其他元素都在一行上。
元素的高度、宽度、行高以及顶和底边距都可设置
4.可变元素
需要根据上下文关系来确定元素是块元素或者内联元素
三、行内元素【也叫内联元素】
1.锚点元素
可能很多同学会对这个锚点有点蒙，其实大家可以把它理解为电梯按钮，或者地铁站你选择去哪个站。我们定义的锚点元素就是鼠标点击之后就跳转到你代码设置的那个地点。
超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。
在标签<a> 中使用了href属性来描述链接的地址。
默认情况下，链接将以以下形式出现在浏览器中：
一个未访问过的链接显示为蓝色字体并带有下划线。
访问过的链接显示为紫色并带有下划线。
点击链接时，链接显示为红色并带有下划线。
2.普通元素
span
3.加粗元素
b 和 strong 都是加粗元素，但是通常用strong代替b。因为strong意味着你要呈现的文本是重要的，所以要突出显示。
4.斜体元素
i 和 em 都是斜体元素，但是通常用 em 代替 i。因为em意味着你要呈现的文本是重要的，所以要突出显示。
5.换行元素
br虽然他让元素换行了，但是他本身是行内元素，所以不属于块元素，还是属于行内元素的~
6.行内元素全部代码
<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>前端吴小迪</title>
</head>
<body>
<h1>我是h1标签</h1>
<h2>我是h2标签</h2>
<h3>我是h3标签</h3>
<h4>我是h4标签</h4>
<h5>我是h5标签</h5>
<h6>我是h6标签</h6>
<div>我是div标签</div>
<p>我是p标签</p>
<span>我是span标签</span>
<b>我是b标签</b>
<strong>我是strong标签</strong>
<i>我是i标签</i>
<em>我是em标签</em>
</body>
</html>
四、块状元素
1.普通块状元素
div、p
这俩个标签可能大部分前端开发同学都是没怎么区分他们的，但是他们其实使用场景以及样式还是有区别的。
上方的图片笔者只对p标签以及div标签进行了背景色和边框的样式添加，其他的样式都是元素本身自带的。
所以这里我们可以看出来div和p的样式区别：p是自带边距的【边距的多少取决于line-height属性】
在一个区别就是一般p标签用来包住文章的段落的。比如我们以前上学时候课文的段落，一个段落用一个p标签包裹住。
div标签一般是用来当做一个容器使用。用它作为一个盒子包裹其他的内容。
2.标题元素
标题标签一共分为六级
对应的样式分别是这样的：
我们以肉眼可见的区分他们的话就只是文字大小的不同而已。但是其实在深究一下的话它们对于网络爬虫来讲权重值也是不一样的，对于标题标签来讲字体越大的权重级越高。
应该将 h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推。
3.分割线元素
<hr> 标签在 HTML 页面中创建水平线。
hr 元素可用于分隔内容。
显示情况如下：
4.无序列表与有序列表
分隔线上方的是无序列表。
分割线下方的是有序列表。
对于样式来讲的区别就是上方的无序列表前面是小黑点开头，下方的有序列表会根据我们的 li 标签的个数去一 一排序。
<!-- 无序列表组合 -->
<ul>
<li>我们需要组合使用哦~</li>
<li>我们需要组合使用哦~</li>
</ul>
<hr />
<!-- 有序列表组合 -->
<ol>
<li>我们需要组合使用哦~</li>
<li>我们需要组合使用哦~</li>
<li>我们需要组合使用哦~</li>
<li>我们需要组合使用哦~</li>
</ol>
5.表格
6.iframe
iframe标签可以嵌套一个其他网址到我们的页面当中，可以嵌套一个自己的网站里面的相对地址，也可以嵌套一个其他网站的绝对地址。
a.相对地址嵌套示范
b.绝对地址嵌套示范
<!-- 嵌套百度到我们的页面上 -->
<iframe src="https://www.baidu.com/"></iframe>
7.块状元素全部代码
<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>前端吴小迪</title>
<style>
p {
background: red;
border: 1px solid black;
}
div {
background: orange;
border: 1px solid black;
}
</style>
</head>
<body>
<!-- 标题标签 -->
<h1>我是h1标签</h1>
<h2>我是h2标签</h2>
<h3>我是h3标签</h3>
<!-- 普通的段落标签 -->
<p>我是p标签</p>
<p>我是p标签</p>
<p>我是p标签</p>
<p>我是p标签</p>
<!-- 布局标签 -> 一般用作于布局当盒子使用 -->
<div>我是div标签</div>
<div>我是div标签</div>
<div>我是div标签</div>
<div>我是div标签</div>
<hr />
<!-- 无序列表组合 -->
<ul>
<li>我们需要组合使用哦~</li>
<li>我们需要组合使用哦~</li>
</ul>
<hr />
<!-- 有序列表组合 -->
<ol>
<li>我们需要组合使用哦~</li>
<li>我们需要组合使用哦~</li>
<li>我们需要组合使用哦~</li>
<li>我们需要组合使用哦~</li>
</ol>
<hr />
<!-- 表格 -->
<table border="1">
<tr>
<th>01</th>
<th>02</th>
<th>03</th>
<th>04</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>11</td>
<td>22</td>
<td>33</td>
<td>44</td>
</tr>
</table>
<hr />
<!-- 外嵌网站 -->
<iframe src="https://www.baidu.com/"></iframe>
</body>
</html>
五、行内块元素
暂无…待更新
结语
1.HTML书写注意事项
a.不要忘记结束标签
即使您忘记了使用结束标签，大多数浏览器也会正确地显示 HTML：
<p>这是一个段落
<p>这是一个段落
以上实例在浏览器中也能正常显示，因为关闭标签是可选的。
但不要依赖这种做法。忘记使用结束标签会产生不可预料的结果或错误。
b.HTML 空元素书写方式
没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。
<br>和<hr> 这种类型的就是没有关闭标签的空元素（<br> 标签定义换行，<hr>标签定义分割线）。
在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。
在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。
即使 <br> 在所有浏览器中都是有效的，但使用 <br /> 其实是更长远的保障。
c.使用小写标签
HTML 标签对大小写不敏感：<P> 等同于 <p>。许多网站都使用大写的 HTML 标签。
推荐全部使用小写标签，因为万维网联盟（W3C）在 HTML 4 中推荐使用小写，而在后续HTML 版本中将强制使用小写。
d.HTML 注释
合理的运用代码注释可以让你的程序更容易让人理解，非常利于后续的维护工作。
<!-- 这是一个注释 -->
PS: 浏览器会忽略注释，不会显示它们。
e.HTML 提示 - 如何查看源代码
你是否看过一些网页然后惊叹它是如何实现的。
如果您想找到其中的奥秘，只需要单击右键，然后选择"查看源文件"（IE）或"查看页面源代码"（Firefox），其他浏览器的做法也是类似的。这么做会打开一个包含页面 HTML 代码的窗口。