HTML 常用的标签

最新推荐文章于 2026-04-24 14:35:38 发布

原创最新推荐文章于 2026-04-24 14:35:38 发布 · 3.7k 阅读

51 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#开发语言 #vscode #html5

前端专栏收录该内容

35 篇文章

订阅专栏

HTML 常用的标签

一、HTML 基本结构
二、标题：h1 ~ h6 标签
三、段落：p 标签
四、换行：br 标签
五、文本格式化
六、盒子标签
- 1. div 标签
- 2. span 标签
七、图像：img 标签
八、超链接：a 标签
九、常用的特殊字符

一、HTML 基本结构

<html> </html> ：页面中最大的标签，也称根标签
<head> </head> ：文档的头部，在 head 标签中必须设置 title (标题)
<title> </title> ：文档的标题，让网页拥有一个标题
<body> </body> ：文档的主体，所有内容基本都放在 body 里

二、标题：h1 ~ h6 标签

作为标题使用，并根据重要性递减。（一级标题字体最大，重要性最大）

特点：
（1）加了标题的文字会变得加粗，字号也会依次变大
（2）一个标题独占一行

<h1> </h1> ：一级标题
<h2> </h2> ：二级标题
<h3> </h3> ：三级标题
<h4> </h4> ：四级标题
<h5> </h5> ：五级标题
<h6> </h6> ：六级标题

三、段落：p 标签

<p> </p> ：生成一个段落

特点：
（1）文本在一个段落中会根据浏览器窗口大小自动换行
（2）段落和段落之间保持空隙

四、换行：br 标签

<br/> ：break 的缩写，强制换行

特点：
（1）<br/> 是一个单标签
（2）<br/> 只是简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的空隙

五、文本格式化

<strong> </strong> 或 <b> </b> ：加粗
<em> </em> 或 <i> </i> ：倾斜
<del> </del> 或 <s> </s> ：删除线
<ins> </ins> 或 <u></u> ：下划线

六、盒子标签

1. div 标签

div 是 division 的缩写，标识分割、分区
<div> </div> 标签用来布局，但是一行只能放一个 div 标签
div 是块级盒子标签

2. span 标签

span 意为跨度、跨距
<span> </span> 标签用来布局，但是一行可以放多个 span 标签
div 是行级盒子标签

七、图像：img 标签

标签格式：<img src="图像URL"/>
src ：是 <img> 标签的必须属性，用于指定图像文件路径和文件名
alt ：替换文本，图像不能显示时（没网络加载不出来）显示的文本
title ：提示文本，鼠标放在图像上，显示的文字
width ：设置图像的宽度
height ：设置图像的高度
border ：设置图像边框粗细

八、超链接：a 标签

标签格式：<a href="跳转目标" target="目标窗口弹出方式">文本或图像</a>
href ：用于指定连接目标的 URL 地址，是必须属性
target ：用于指定链接页面的打开方式，常用的两种方式：
（1）_self ：为默认值，当前窗口打开
（2）_blank ：新窗口中打开

链接分类：

（1）外部链接：如<a href="www.baidu.com">百度</a>
（2）内部链接：网页内部页面之间的相对连接，直接连接内部页面名（网站内的另一个页面）
（3）空链接：如<a href="#">空链接</a>
（4）下载链接：如果 href 里的地址是一个文件或压缩包，会下载这个文件
（5）网页元素链接：网页内的各种元素都可以添加超链接，如图片链接：
<a href="www.baidu.com"> <img src="img.png"> </a>
（6）锚点链接：点击链接可以快速定位到页面的某个位置：
第一步：在链接文本的 href 中，设置属性值为#name 的形式，如：
<a href="#two">第二集</a>
第二步：找到目标位置标签，里面添加一个 id 属性等于刚才的名字，如：
<h3 id="two">第二集介绍</h3>