当前位置：首页 > news >正文

HTML 标签

news 来源：原创 2025/6/10 5:47:50

1 HTML 定义

HTML 超文本标记语言一一 Hyper Text Markup Language。
超文本是什么？链接
标记是什么？ 标记也叫标签，带尖括号的文本

2 标签语法

标签成对出现，中间包裹内容
<>里面放英文字母（标签名）
结束标签比开始标签多 /
双标签：成对出现的标签
单标签只有开始标签，没有结束标签，比如：<br>：换行 <hr>：水平线

3 HTML 基本骨架

HTML 基本骨架是 网页模板

VSCode快速生成骨架：在HTML文件（.html）中，！(英文)配合Enter／Tab键

html：整个网页
head：网页头部，存放给浏览器看的代码，例如CSS
body：网页主体，存放给用户看的代码，例如图片、文字
title：网页标题

4 标签的关系

作用：明确代码的书写位置

父子关系（嵌套关系）
兄弟关系（并列关系）

比如外边的框和手机的图片就是父子关系；手机的图片和名字就是兄弟关系

5 标题标签

一般用在新闻标题、文章标题、网页区域名称、产品名称等等。

例子：

标签名：h1 - h6 双标签

<!DOCTYPE html>
<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><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5>五级标题</h5><h6>六级标题</h6>  
</body>
</html>

运行结果：

经验：h1标签在一个网页中 只能用一次，用来放 新闻标题 或 网页的logo

6 段落标签

一般用在新闻段落、文章段落、产品描述信息等等。

标签名：p （双标签）

显示特点：独占一行、段落之间存在间隙

<!DOCTYPE html>
<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><p>Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue也完全能够为复杂的单页应用（SPA）提供驱动。</p><p>Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue也完全能够为复杂的单页应用（SPA）提供驱动。</p><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5>五级标题</h5><h6>六级标题</h6>
</body>
</html>

效果：

7 换行和水平线标签单标签

换行：<br>
水平线：<hr>

<!DOCTYPE html>
<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>第一行内容<br><br>第二行内容<hr>
</body>
</html>

运行结果：

8 文本格式化标签

作用：为文本添加特殊格式，以突出重点。常见的文本格式：加粗、倾斜、下划线、删除线等。

<!DOCTYPE html>
<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><strong>strong 加粗</strong><em>em 倾斜</em><ins>ins 下划线</ins><del>del 删除线</del>
</body>
</html>

运行结果：
不会换行

9 图像标签

作用：在网页中插入图片

标签名：<img src="图片的 URL">

标签属性：

<!DOCTYPE html>
<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><img src="./20250609204549.jpg" alt="此图片无法显示" title="蓝蓝的天空">
</body>
</html>

10 路径

相对路径：从当前文件位置出发查找目标文件
绝对路径：从盘符出发查找目标文件

10.1 相对路径

/ 表示进入某个文件夹里面
．表示当前文件所在文件夹
../ 表示进入当前的上一级文件夹
../../ 表示进入当前文件夹的上上一级文件夹

<!DOCTYPE html>
<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><img src="./1.jpg" alt="此图片无法显示"><img src="./img/6.jpg" alt=""><!-- ../ 进入了上一级文件夹 --><img src="../HTML_img/4.jpg" alt="">
</body>
</html>

10.2 绝对路径

绝对路径的应用场景：友情链接

正反路径写法都可以

<!DOCTYPE html>
<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><img src="D:\Code\HTML_img\4.jpg" alt=""><img src="D:/Code/HTML_img/4.jpg" alt=""><!-- 可以复制网上在线的图片链接，不用下载图片 --><img src="https://csdnimg.cn/release/mpfev3/mp_v3/logo-dIbdY6cU.png" alt="">
</body>
</html>

运行结果

11 超链接

<a href="https://www.baidu.com">跳转到百度</a>

添加属性：target="_blank" 可以让跳转的页面在一个新的网页下打开

经验：开发初期，不知道超链接要跳转的地址，href 属性值写 #，它是空链接，不会跳转

<!DOCTYPE html>
<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><!-- target="_blank" 新窗口跳转页面 --><a href="https://blog.csdn.net/qq_56808981?type=blog" target="_blank">跳转到作者 CSDN 主页</a><a href="./1.jpg" target="_blank">跳转到本地的一张图片</a>
</body>
</html>

12 音频标签

<audio src="音频的URL"></audio>

在 HTML5 里面，如果属性名和属性值完全一样，可以简写为一个单词

13 视频标签

<video src="视频的URL"></video>

参考链接：

03-标签语法_哔哩哔哩_bilibili
04-HTML基本骨架_哔哩哔哩_bilibili
05-标签的关系_哔哩哔哩_bilibili
07-排版标签-标题和段落_哔哩哔哩_bilibili
09-文本格式化标签_哔哩哔哩_bilibili
10-图像标签_哔哩哔哩_bilibili
11-路径-相对和绝对_哔哩哔哩_bilibili
12-超链接标签_哔哩哔哩_bilibili
13-多媒体标签-音频和视频_哔哩哔哩_bilibili