HTML5基础——3、HTML标签

原创已于 2025-10-18 07:52:40 修改 · 8.4k 阅读

40 ·

CC 4.0 BY-SA版权

文章标签：

#html #html5 #前端 #标签

于 2025-10-14 10:00:00 首次发布

H5 专栏收录该内容

46 篇文章

订阅专栏

该文章已生成可运行项目，

大家好，我是阿赵。继续学习H5。这次来学习HTML的标签。

一、认识标签

先通过VSCode创建一个新的html文件，然后按感叹号生成一个html模版：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

可以看到，里面有很多由尖括号组成的标签，从上往下看看

1、 `<!DOCTYPE html>`

这个标签不是HTML标签，是文档类型声明标签，说明这个文档使用html语言写的。

2、 `<html lang="en">`

告诉浏览器，这是一个什么语言的网页。en代表英语。这里需要注意的是，写了lang=“en”，并不代表这个网页的所有内容都是英文的，你可以在网页里面写中文。这个标签不是给我们读者看的，是给浏览器看的，比如有些网页插件有翻译功能，就会显示：
在这里插入图片描述

这是因为他觉得你这个界面是英文的，有必要翻译成中文。
假如我改成，这样浏览器会认为这个网页是中文网页，就不会再弹出翻译选项了：
在这里插入图片描述

zh_CN是简体中文。

3、 `<meta charset=" UTF-8" />`

这是指定了网页的字符编码是UTF-8，以防出现不能显示的文字。

4、结构标签

接下来就是结构类型的标签了，比如在模版里面有这么一个结构：

<html>
<head>
<title></title>
</head>
<body>
</body>
</html>

html是整个文档的内容了，里面有2个组成结构：

1. head

一般是显示在网页的最上部分。
在head里面还有一个title，一般是用于显示标题

2. body

是网页的主体内容部分。

可以留意一下，这些标签的结构关系。
html和head、body是包含关系，html包括了它们，head和title也是包含关系。
head和body是并列关系。
接下来修改一下：

<!DOCTYPE html>
<html lang="zh_CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>我是标题</title>我是头
</head>

<body>
  我是身体
</body>

</html>

运行html文件，会看到
在这里插入图片描述

可以看出，文字内容是直接写在<>和</>标签中间的。
有些标签是有特殊的含义，比如title，一定是指定在最上面的标签页上的标题。
而写在head里面的文字，和写在body里面的文字，居然都显示在一起了。
其实习惯上是不会在head里面写文字内容的。如果写了，就会一直延伸到body，而由于没有写换行符，所以连个字符串会显示在同一行里面了。

从上面的例子可以看出，有些标签是成对出现的，比如，有开始就有结束，这种标签叫做“双标签”
也有些标签不是成对出现，只出现一个，比如类的标签，这种叫做“单标签”

二、各种常用标签

1、标题标签

标题标签就是 <h1> - <h6>
试试以下例子：

<body>
  <h1>我是一级标题</h1>
  <h2>我是二级标题</h2>
  <h3>我是三级标题</h3>
  <h4>我是四级标题</h4>
  <h5>我是五级标题</h5>
  <h6>我是六级标题</h6>
  <h7>我是七级标题</h7>
</body>

我是一级标题

我是二级标题

我是三级标题

我是四级标题

我是五级标题

我是六级标题

我是七级标题

可以看出，标题只有6级，h7是无效的。
这有点像我们在用word编辑文档的时候，也是有多级的标题可以选择。

2、段落和换行

首先是段落标签<p>

<body>
  <p>我是第一段落我是第一段落我是第一段落我是第一段落我是第一段落我是第一段落我是第一段落我是第一段落我是第一段落我是第一段落我是第一段落</p>
  <p>我是第二段落我是第二段落我是第二段落我是第二段落我是第二段落我是第二段落我是第二段落我是第二段落我是第二段落我是第二段落我是第二段落</p>
</body>

我是第一段落我是第一段落我是第一段落我是第一段落我是第一段落我是第一段落我是第一段落我是第一段落我是第一段落我是第一段落我是第一段落

我是第二段落我是第二段落我是第二段落我是第二段落我是第二段落我是第二段落我是第二段落我是第二段落我是第二段落我是第二段落我是第二段落

可以看出，在p标签中间的内容，会当做一个段落，而段落与段落之间会有间隙。

再来看看换行标签 <br /> ，它是一个单标签，不需要有头有尾。

<body>
  <p>我是第一段落<br />我是第一段落<br />我是第一段落<br />我是第一段落<br />我是第一段落</p>
  <p>我是第二段落<br />我是第二段落<br />我是第二段落<br />我是第二段落<br />我是第二段落</p>
</body>

我是第一段落
我是第一段落
我是第一段落
我是第一段落
我是第一段落

我是第二段落
我是第二段落
我是第二段落
我是第二段落
我是第二段落

其实就有点像\n换行符一样，插入在哪里，哪里就换行

3、格式化标签

<body>
  <strong>加粗1</strong><b>加粗2</b><br />
  <em>斜体1</em><i>斜体2</i><br />
  <strike>加删除线1</strike><del>加删除线2</del><s>加删除线3</s><br />
  <u>带下划线1</u><ins>带下划线2</ins><br />
  <big>大一号</big><br />
  <small>小一号</small><br />
  <sub>下标</sub><sup>上标</sup><br />
  <sub>脚注</sub><br />
  <mark>高亮显示</mark>
</body>

加粗1 加粗2
斜体1 斜体2
~~加删除线1~~ ~~加删除线2~~ ~~加删除线3~~
带下划线1 带下划线2
大一号
小一号
_下标 ^上标
_脚注
高亮显示

这里举例了多种风格化的标签：

1. 加粗

加粗可以用

<strong>加粗1</strong>

加粗1
或者

<b>加粗2</b>

加粗2

2. 斜体

斜体可以用

<em>斜体1</em>

斜体1
或者

<i>斜体2</i>

斜体2

3. 删除线

删除线可以用

<strike>加删除线1</strike>

~~加删除线1~~
或者

<del>加删除线2</del>

~~加删除线2~~
或者

<s>加删除线3</s>

~~加删除线3~~

4. 下划线

下划线可以用

<u>带下划线1</u>

带下划线1
或者

<ins>带下划线2</ins>

带下划线2

5. 大小号

<big>大一号</big>

大一号

<small>小一号</small>

小一号

6. 上下标

上标

<sup>上标</sup>

^上标
下标

<sub>下标</sub>

_下标

7. 脚注

<sub>脚注</sub>

8. 高亮

高亮显示

4、盒子标签

所谓的盒子标签，也叫做容器标签。它本身并没有什么显示效果，不过它可以作为一个容器，包含别的内容。

<body>
  <div>我是大盒子1</div>
  <div>我是大盒子2</div>
  <div>我是大盒子3</div>
  <div>我是大盒子4</div>
  <span>我是小盒子1</span>
  <span>我是小盒子2</span>
  <span>我是小盒子3</span>
  <span>我是小盒子4</span>
</body>

运行效果：
在这里插入图片描述

可以看出，div是大盒子，它的规则是一行只能有一个大盒子。
span是小盒子，一行里面可以由多个小盒子

5、图片标签

做网页肯定少不了各种图片的显示，所以图片标签是很重要的

<body>
  <img src="img/azhao.png">
</body>

在网页同级建立img文件夹，然后里面放一张azhao.png图片
在这里插入图片描述

显示效果：
在这里插入图片描述

img标签还有一些参数可以设置

<body>
  <img src="img/azhao.png" alt=" 这是1张图片" title="这是阿赵的头像" width="200px" height="100px" border="1px" />
</body>

运行的效果
在这里插入图片描述

参数说明：

1. src

图片的加载路径

2. alt

当图片加载不出来时显示的文本，比如我上面的头像假如加载不出来，会显示：
在这里插入图片描述

3. title

当鼠标在图片上悬浮是显示的文本
在这里插入图片描述

4. width和height

图片的宽高，注意要加单位，比如px就是像素

5. border

图片的边框，也是要加单位，px像素

6、超链接标签

网页经常有各种的跳转，比如

<body>
  <a href="https://www.baidu.com">点我去百度</a>
</body>

点我去百度

运行效果：
在这里插入图片描述

点一下，就打开了百度的网页：
在这里插入图片描述

超链接标签的格式是：

<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a>

跳转目标就是需要前往的网址了
目标窗口弹出方式，默认不填是_self，也就是当前网页打开，如果填_blank，则是在新窗口打开。

7、列表标签

1. 无序列表

<body>
  <ul>
    <li>选项1</li>
    <li>选项2</li>
    <li>选项3</li>
    <li>选项4</li>
    <li>选项5</li>
  </ul>
</body>

选项1
选项2
选项3
选项4
选项5

通过ul和li的配搭，可以做出无序列表，所谓无序就是li前面没有编号
2. 有序列表

<body>
  <ol>
    <li>选项1</li>
    <li>选项2</li>
    <li>选项3</li>
    <li>选项4</li>
    <li>选项5</li>
  </ol>
</body>

选项1
选项2
选项3
选项4
选项5

通过ol和li的配合，可以做出有序列表，所谓有序，就是li前面有编号

3. 自定义列表

<body>
  <dl>
    <dt>我是标题：</dt>
    <dd>我是描述内容1</dd>
    <dd>我是描述内容2</dd>
    <dd>我是描述内容3</dd>
    <dd>我是描述内容4</dd>
    <dd>我是描述内容5</dd>
  </dl>
</body>