前言
这篇文章重点写了HTML标签、块元素和行内元素、转义符几个内容，详细讲解请看以下内容，听说点击右边目录查看，掌握知识会更快哦！
1. 标题标签
- title
- h1~h6 （h1的字体是最大的，以此类推，h6是最小）
1.1 title
title标签是定义网站标题的，一个网站只有一个标题
代码举例：
浏览器预览：
1.2 h1 ~ h6
h1 ~ h6标签是写在< body >< /body >内的，h1标签显示的内容是最大的，h6则显示的内容是最小的
代码举例：
浏览器预览：
2. 段落标签
2.1 < p >< /p >
p标签是显示一段文字内容，一篇文章会有很多段落，我们将段落分成一个个p标签
代码举例：
浏览器预览：
3. 换行标签
3.1 < br/ >
br 标签是一个单标签，只有一边的，br标签的作用是在文字任何一个位置进行换行操作。
代码举例：（没有加br标签前）
浏览器预览：（没有加br标签前）
代码举例：（加br标签后）
浏览器预览：（加br标签后）
4. 文本标签
4.1 粗体标签：strong、b
代码举例：
浏览器预览：
4.2 斜体标签：i、em、cite
代码举例：
浏览器预览：
4.3 上标标签：sup 和 下标标签：sub
使用方法：先将所有文字放在p标签中，然后把需要上标或者下标的文字，加上标签即可。
代码举例：
浏览器预览：
4.4 中划线标签：s
代码举例：
浏览器预览：
4.5 下划线标签：u
代码举例：
浏览器预览：
4.6 大字号标签：big 和 小字号标签：small
代码举例：
浏览器预览：
5. 水平线标签
5.1 粗体标签：< hr />
代码举例：
浏览器预览：
6. div标签
div标签作用是将一个个区域分成一个个div，后期再用CSS时可以更好的控制每个div区域。
代码举例：
浏览器预览：
7. 自闭合标签（单标签）
自闭合标签和普通标签的区别？
- 普通标签：有开始标签和结束标签的，里面可以放很多内容。例如：< div > </ div >
- 自闭合标签：只有一边标签,标签内不能放任何的内容。例如：< hr />
- 注意：普通标签和自闭合标签，结束标签 / 是不一样的，一般标签 / 是写在前面，例如 </ div > 。而自闭合标签是写在后面，例如 < br />
7.1 常见的自闭合标签
<br> 插入一个简单的换行符，标签是空标签（意味着它没有结束标签，因此这是错误的：<br></br>）。
<hr> 创建一条水平线，在HTML中，<hr> 没有结束标签。在XHTML中，<hr> 必须被正确地关闭，比如 <hr />。
<img> 插入一幅图像，在HTML中，<img> 没有结束标签。在XHTML中，<img> 必须被正确地关闭，比如 <img />。
<link>最常见的用途是链接样式表。在HTML中，<link> 没有结束标签。在XHTML中，<link> 必须被正确地关闭，比如 <link />
<base> 页面上的所有链接规定默认地址或默认目标，在HTML中，<base> 没有结束标签。在XHTML中，<base> 必须被正确地关闭，比如 <base />。
<area> 定义图像映射中的区域，在HTML中，<area> 没有结束标签。在XHTML中，<area> 必须正确地关闭，比如<area />。
<input> 输入框，在HTML中，<input> 没有结束标签。在XHTML中，<input> 必须被正确地关闭，比如 <input />。
<source> 标签为媒介元素（比如 <video> 和 <audio>）定义媒介资源。
<!--...--> 注释标签，注释标签用于在源代码中插入注释。注释不会显示在浏览器中。
<!DOCTYPE> 声明没有结束标签，必须是HTML文档的第一行，位于 <html> 标签之前。
注：这段来源于csdn：https://blog.csdn.net/lgysjfs/article/details/93027361
8. 块元素和行内元素
块元素和行内元素的区别？
- 块元素：独占一行，可以包含其他元素和行内元素。
- 行内元素：所有行内元素在一行显示，不能独占一行。
8.1 常见的块元素
- div：div元素
- p：段落元素
- ul：无序列表
- ol：有序列表
- h1-h6 标题元素
- hr：水平线
8.2 常见的行内元素
span ,a ,strong ,em ,b ,s ,i ,font…
8.3 常见的行内块元素
img ,input ,select ,textarea ,button ,label
8.4 不同元素转换方式
转换为块级元素： disaplay : block
转换为行内块元素：dispaly : inline-block
转换为行内元素 ： display : inline
9.特殊符号
很多的时候我们需要使用一些特殊符号，但是这些符号我们要怎么输入是一个问题，以下是一些特殊符号对应的代码，我们在需要从文字中插入特殊符号时，只用键入对应的代码到文字中就可以了。
更多符号
注意：本文复制符号代码后面要加上“；”，不然代码执行不了的
| 特殊符号 | 描述 | 符号代码 |
|---|---|---|
| < | 小于号 | < |
| > | 大于号 | > |
| ￥ | 人民币 | ¥ |
| & | "与"符号 | & |
| © | 版权 | © |
| • | 点 | &bull |
| × | 乘号 | × |
| ÷ | 除号 | ÷ |
| ® | 商标 | ® |
代码举例：
浏览器预览：
10.练习题
代码举例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>练习题</title>
</head>
<p>
<h3>英文翻译题目</h3>
<h4>第一句</h4>
<p>“嗨!”内德说，“我们很久没有爬悬崖了。”</p>
<p>"Hey!" said Ned. "We haven't climbed the cliff for a long while."</p>
<hr/>
<h4>第二句</h4>
<p>他们就朝一座悬崖飞跑而去。</p>
<p>And off they went, trotting and panting like a pack of stray dogs.</p>
<hr/>
<h3>菜市场蔬菜标价</h3>
<p>苹果 <s>原价：5.99元/斤</s> 现价：2.88元/斤</p>
<p>菠萝 <s>原价：10元/个</s> 现价：8元/个</p>
<h3>数学题</h3>
<p>a<sup>2</sup>+b<sup>4</sup>=(a<sup>1</sup>+b<sup>2</sup>+c<sup>3</sup>)</p>
</body>
</html>
浏览器预览：
10.1 代码分析：
- 整个练习题从上往下主要用到以下标签实现：
- h1-h6 标题标签
- p 段落标签
- hr 水平线
- s 中划线
- sup 上标标签
353
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
