HTML常用标签用法全解析：构建语义化网页的核心指南
HTML作为网页开发的基石，其标签的合理使用直接影响页面的可读性、SEO效果及维护性。本文系统梳理HTML核心标签的用法，结合语义化设计原则与实战示例，助你构建规范、高效的网页结构。
一、基础结构与排版标签
1.1 文档结构
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>页面标题</title>
</head>
<body><!-- 页面内容 -->
</body>
</html>-
<!DOCTYPE html>：声明HTML5文档类型 -
<html>：根元素，lang属性指定语言（如zh-CN支持中文SEO优化） -
<head>：存放元数据，如CSS/JS链接、视口设置
1.2 标题与段落
| 标签 | 说明 | 示例 |
|---|---|---|
<h1> | 最高级标题，一个页面仅一个 | <h1>主标题</h1> |
<p> | 段落文本，自动添加上下间距 | <p>这是一个段落</p> |
<br> | 换行（非段落结束），如地址分行显示 | 地址：<br>北京市 |
<hr> | 水平分隔线，用于内容区块分隔 | <hr> |
注意：
-
h1到h6层级递减，字体大小与语义权重同步降低 -
多个空格/回车在HTML中仅显示为一个空格，需用
<br>或<pre>保留格式
二、文本格式化与语义标签
2.1 强调与样式
| 标签 | 语义说明 | 示例 |
|---|---|---|
<strong> | 重要内容（屏幕阅读器强调） | <strong>警告！</strong> |
<em> | 强调语气（斜体） | <em>请注意</em> |
<del> | 删除文本（原价显示） | <del>￥999</del> |
<sub>/<sup> | 下标/上标（化学公式、注释） | H<sub>2</sub>O |
<pre> | 保留空格与换行（代码展示） | <pre>console.log("Hello");</pre> |
对比：
-
<b>仅加粗样式，<strong>强调语义 -
<i>为斜体样式，<em>表示强调语气
2.2 容器标签
| 标签 | 用途 | 特性 |
|---|---|---|
<div> | 通用块级容器，用于布局划分 | 无默认样式，需CSS修饰 |
<span> | 行内容器，包裹短文本或图标 | 与<p>不同，不自动换行 |
<header> | 页面/区块头部（Logo、导航） | 语义化替代<div class="header"> |
<footer> | 页脚（版权信息、联系方式） | 提升SEO可读性 |
三、超链接与媒体嵌入
3.1 超链接（<a>）
<a href="https://example.com" target="_blank" title="示例网站">访问</a>-
属性：
-
target="_blank"：新标签页打开 -
href="#section1"：页内锚点跳转（需配合id） -
download：强制下载资源（如PDF文件）
-
3.2 图像（<img>）
<img src="image.jpg" alt="图片描述" width="400" loading="lazy">-
关键属性：
-
alt：图片加载失败时的替代文本（SEO必备） -
loading="lazy"：延迟加载提升性能
-
3.3 音视频（HTML5新增）
<video controls muted autoplay><source src="video.mp4" type="video/mp4">
</video>
<audio src="audio.mp3" controls></audio>-
controls：显示播放控件 -
autoplay muted：自动播放需静音（浏览器策略）
四、列表与表格
4.1 列表类型
| 类型 | 标签结构 | 适用场景 |
|---|---|---|
| 无序列表 | <ul><li>项目</li></ul> | 导航菜单、商品特征 |
| 有序列表 | <ol><li>步骤1</li></ol> | 操作流程、排名展示 |
| 自定义列表 | <dl><dt>术语</dt><dd>解释</dd></dl> | 词汇表、参数说明 |
4.2 表格构建
<table border="1"><thead><tr><th>姓名</th><th>年龄</th></tr></thead><tbody><tr><td>张三</td><td>25</td></tr></tbody>
</table>-
合并单元格：
-
colspan="2"：跨列合并 -
rowspan="2"：跨行合并
-
-
语义化结构：
<thead>、<tbody>、<tfoot>分割表格区域
五、表单交互元素
5.1 基础表单
<form action="/submit" method="POST"><label for="name">姓名：</label><input type="text" id="name" name="username" required><label>性别：<input type="radio" name="gender" value="male">男<input type="radio" name="gender" value="female">女</label><input type="submit" value="提交">
</form>-
输入类型：
-
type="email"：邮箱格式验证 -
type="password"：掩码输入 -
type="file"：文件上传
-
5.2 高级控件
| 控件 | 标签 | 功能 |
|---|---|---|
| 下拉选择 | <select><option>选项</option> | 省市区选择、分类筛选 |
| 多行文本 | <textarea rows="4"></textarea> | 用户评论、长文本输入 |
| 日期选择 | <input type="date"> | 生日、预约时间选择 |
六、语义化最佳实践
-
少用
<div>/<span>：优先选择<nav>、<article>等语义标签 -
标题层级有序：避免跳过层级（如h1直接接h3）
-
ARIA角色补充：为复杂组件添加
role属性增强可访问性 -
响应式图片：使用
<picture>配合srcset适配不同设备
总结与资源
掌握HTML标签的语义化使用，是构建高性能、易维护网页的关键。建议通过以下方式深化学习：
-
验证工具：使用W3C Validator检查代码规范
-
实战项目：仿写主流网站结构（如新闻页、电商详情页）
-
扩展阅读：MDN Web Docs的HTML元素参考
通过合理运用标签，你的网页将更易被搜索引擎抓取，同时提升残障用户的访问体验。
相关文章：
HTML常用标签用法全解析：构建语义化网页的核心指南
HTML作为网页开发的基石，其标签的合理使用直接影响页面的可读性、SEO效果及维护性。本文系统梳理HTML核心标签的用法，结合语义化设计原则与实战示例，助你构建规范、高效的网页结构。 一、基础结构与排版标签 1.1 文档结构 <!DOCTYPE htm…...
【Linux】动静态库链接原理
📝前言： 这篇文章我们来讲讲Linux——动静态库链接原理 🎬个人简介：努力学习ing 📋个人专栏：Linux 🎀CSDN主页 愚润求学 🌄其他专栏：C学习笔记，C语言入门基础…...
Axure设计的“广东省网络信息化大数据平台”数据可视化大屏
在数据驱动决策的时代，数据可视化大屏成为了展示数据、洞察趋势的重要工具。今天，让我们一同深入了解由Axure设计的“广东省网络信息化大数据平台”数据可视化大屏，看看它如何通过精心的布局和丰富的图表类型，将复杂的数据以直观易…...
linux安装宝塔面板到数据盘
操作很简单，假如数据盘挂载在cipan1，在数据盘新建目录www，为了方便对应。 执行一下命令，创建软连接 ln -s /cipan1/www www 此时，根目录就出现了www文件夹 下面正常安装宝塔即可...
数学实验（Matlab编程基础）
一、函数文件 Matlab编程基础 Matlab作为一种广泛应用于科学计算的工具软件，不仅具有强大的数值计算、符号计算、矩阵运算能力和丰富的绘图功能，同时也具有和C、FORTRAN等高级语言一样进行程序设计 利用Matlab的程序控制功能，可以将有关Ma…...
不同坐标系下MATLAB绘制阵列的方向图
不同坐标系下MATLAB绘制阵列的方向图 球坐标系，极坐标系、直角坐标系 文章目录 前言一、极坐标系二、球坐标系三、直角坐标系总结 前言 \;\;\;\;\; 在阵列信号处理和天线设计中，方向图（Pattern）是描述波束形成性能的关键工具&…...
python可视化：北方省市人口流动与春运数据综合分析5
python可视化：北方省市人口流动与春运数据综合分析5 一、北方省市常住人口数据及变化趋势（2023-2024第一季度） 1. 主要城市常住人口数据（按城市等级分类） 城市类型2023Q1常住人口(万)2024Q1常住人口(万)变化量(万)变…...
Java并发编程-线程池（四）
文章目录 线程池实现原理WorkerWorker 核心设计总结 runWorker(Worker w)总结 线程池实现原理 上一篇我们看了 addWork 方法，那接下来就让我们详细看看内部类Worker。 Worker private final class Workerextends AbstractQueuedSynchronizerimplements Runnable …...
力扣热题——最长相邻不相等子序列 |
题目要求从字符串数组 words 中选出一个最长的子序列，使得该子序列中相邻字符串对应的 groups 数组中的值不同。通过贪心算法，可以高效地解决该问题。具体步骤为：初始化一个结果列表，遍历 words 数组，检查当前字符串的…...
筑牢信息安全防线：涉密计算机与互联网隔离的理论实践与风险防控
在数字化时代，信息安全已成为国家安全体系的重要组成部分。涉密计算机作为承载敏感信息的核心载体，其安全防护工作直接关系到国家利益与社会稳定。违规连接互联网这一行为，如同在严密的防护体系中打开一扇危险的"暗门"，…...
sqli-labs靶场29-31关（http参数污染）
目录 前言 less29（单引号http参数污染） less30（双引号http参数污染） less31(双引号括号http参数污染) 前言 在JSP中，使用request.getParameter("id")获取请求参数时，如果存在多个同名参数&a…...
基于Linux环境实现Oracle goldengate远程抽取MySQL同步数据到MySQL
基于Linux环境实现Oracle goldengate远程抽取MySQL同步数据到MySQL 场景说明： 先有项目需要读取生产库数据，但是不能直接读取生产库数据，需要把生产数据同步到一个中间库，下游系统从中间库读取数据。 生产库mysql - OGG - 中间库…...
linux,我启动一个springboot项目， 用java -jar xxx.jar ,但是没多久这个java进程就会自动关掉
当使用 java -jar xxx.jar & 启动 Spring Boot 项目后进程自动关闭时，可能由多种原因导致。以下是常见排查步骤和解决方案： 一、查看日志定位原因 进程异常关闭通常会在控制台或日志中留下线索，建议先获取完整日志： 1. 查看…...
pytorch 14.3 Batch Normalization综合调参实践
文章目录 一、Batch Normalization与Batch_size综合调参二、复杂模型上的Batch_normalization表现1、BN对复杂模型（sigmoid）的影响2、模型复杂度对模型效果的影响3、BN对复杂模型（tanh）的影响 三、包含BN层的神经网络的学习率优化…...
供应链安全检测系列技术规范介绍之一|软件成分分析
软件成分分析的概念及意义 软件成分分析Software Compostition Analysis（SCA）是一种用于管理开源组件应用安全的方法。软件成分分析系统可以快速跟踪和分析应用软件的开源组件，发现相关组件、支持库以及它们之间直接和间接依赖关系࿰…...
pytorch 15.1 学习率调度基本概念与手动实现方法
文章目录 一、学习率对模型训练影响 二、学习率调度基本概念与手动实现方法1.模型调度基本概念2.手动实现学习率调度3.常用学习率调度思路 从本节开始，我们将介绍深度学习中学习率优化方法。学习率作为模型优化的重要超参数，在此前的学习中，我…...
c++ 类的语法4
测试析构函数、虚函数、纯虚函数： void testClass5() {class Parent {public:Parent(int x) { cout << "Parent构造: " << x << endl; }~Parent() {cout << "调用Parent析构函数" << endl;}virtual string toSt…...
品铂科技在UWB行业地位综述（2025年更新）
一、行业领先地位 国内UWB领域头部企业 在2025年中国UWB企业综合实力排行榜中位列第一，技术研发、市场份额及行业影响力均处于领先地位。连续多年获评中国物联网产业联盟“中国最有影响力物联网定位企业”。 2.全球技术竞争力 .2016年IPSN微软国际室内…...
muduo库EventLoop模块详解
muduo库EventLoop模块深度解析 EventLoop是muduo网络库实现Reactor模型的核心调度中枢，负责驱动整个事件循环机制，协调Poller、Channel、TimerQueue等组件的工作。其设计遵循"One Loop Per Thread"原则。 一、核心职责与设计思想 1. 核心职责…...
循环导入（Circular Import） 错误
ImportError: cannot import name event_type_data_tree from partially initialized module routers.ticket (most likely due to a circular import) (E:\ai12345\backend\app\routers\ticket.py) 这是什么错，中文回答 这个错误是 循环导入（Circular …...
基于大数据的租房信息可视化系统的设计与实现【源码+文档+部署】
课题名称 基于大数据的租房信息可视化系统的设计与实现 学 院 专 业 计算机科学与技术 学生姓名 指导教师 一、课题来源及意义 租房市场一直是社会关注的热点问题。随着城市化进程的加速，大量人口涌入城市，导致租房需求激增。传统的租…...
奥运数据可视化：探索数据讲述奥运故事
在数据可视化的世界里，体育数据因其丰富的历史和文化意义，常常成为最有吸引力的主题之一。今天我要分享一个令人着迷的奥运数据可视化项目，它巧妙地利用交互式图表和动态动画，展现了自1896年至今奥运会的发展历程和各国奥运成就的…...
linux环境下 安装svn并且创建svn版本库详细教程
一、安装SVN 通过yum安装Subversion 在Linux系统中执行以下命令安装： yum install subversion -y 安装完成后，验证版本： svnserve --version 二、创建版本库 选择存储路径并创建目录 通常将版本库放在/var/svn或/usr/local/…...
STM32控制电机
初始化时钟：在 STM32 的程序中，初始化系统时钟，一般会使用 RCC（Reset and Clock Control）相关函数来配置时钟。例如，对于 STM32F103 系列，可能会使用 RCC_APB2PeriphClockCmd 函数来使能 GPIO 和…...
Ubuntu 更改 Nginx 版本
将 1.25 降为 1.18 先卸载干净 # 1. 完全卸载当前Nginx sudo apt purge nginx nginx-common nginx-core# 2. 清理残留配置 sudo apt autoremove sudo rm -rf /etc/apt/sources.list.d/nginx*.list修改仓库地址 # 添加仓库（通用稳定版仓库） codename$(…...
微服务初步学习
系统架构演变过程 一、单体架构 前后端都在一个项目中，包括我们现在的前后端分离开发，都可以看作是一个单体项目。 二、集群架构 把一个服务部署多次，可以解决服务不够的问题，但是有些不必要的功能也跟着部署多次。 三、垂直架…...
旧 docker 版本通过 nvkind 搭建虚拟多节点 gpu 集群的坑
踩坑 参考nvkind教程安装到Setup这一步，由于docker版本较旧，–cdi.enabled 和 config 参数执行不了 手动修改 /etc/docker/daemon.json 配置文件 "features": {"cdi": true}手动修改 /etc/nvidia-container-runtime/config.toml 配…...
Fabric 服务端插件开发简述与聊天事件监听转发
原文链接：Fabric 服务端插件开发简述与聊天事件监听转发 < Ping通途说 0. 引言 以前写过Spigot的插件，非常简单，仅需调用官方封装好的Event类即可。但Fabric这边在开发时由于官方文档和现有互联网资料来看，可能会具有一定的误…...
Wise Disk Cleaner：免费系统清理工具，释放空间，提升性能
Wise Disk Cleaner是一款功能强大且完全免费的系统清理工具，专为帮助用户清理系统中的无用文件和垃圾文件而设计。它能够有效释放磁盘空间，提高系统运行速度，确保电脑始终保持最佳性能。无论是日常维护还是深度清理，Wise Disk Cle…...
排序算法之高效排序:快速排序,归并排序,堆排序详解
排序算法之高效排序：快速排序、归并排序、堆排序详解 前言一、快速排序（Quick Sort）1.1 算法原理1.2 代码实现（Python）1.3 性能分析 二、归并排序（Merge Sort）2.1 算法原理2.2 代码实现…...
主打「反激进」的一汽丰田，靠稳扎稳打的技术实现突围
文/王俣祺 导语：今年的上海车展，当新势力都在用“1000TOPS算力”“激光雷达矩阵”等参数堆砌着一个个技术神话的时候，一汽丰田却选择了一条不同的路——用“反激进”的技术哲学，在电动化和智能化的大风向中，构建独特的…...
变量赋值和数据类型
对象 Python是面相对象的编程语言，在Python一些都是对象，对象由标识、类型、值三部分组成，本质上来讲，系统分配一块内存，这块内存中存储了特定了的值，还支持特定类型的相关操作。 标识：即对象…...
【笔记】cri-docker.service和containerd
cri-docker.service 和 containerd 都是 Kubernetes 支持的容器运行时组件，但它们的架构、功能定位及与 Docker 的关系有显著差异。以下是它们的核心区别和关联： 1. 功能定位 组件核心角色是否直接支持 CRIcontainerd轻量级容器运行时，直接管…...
技术文章：解决汇川MD500系列变频器干扰问题——GRJ9000S EMC滤波器的应用
1. 引言 汇川MD500系列变频器（Variable Frequency Drive, VFD）以其高性能、宽功率范围（0.4kW-500kW）和灵活的控制方式，广泛应用于工业自动化领域，如风机、水泵、传送带和压缩机等。然而，MD500系…...
频域中的反射-信号完整性分析
频域中的反射: 频域与时域的桥梁是傅里叶变换，一个周期信号可以拆分为许多个正弦波。所谓从频域中看信号，看到的可以是很多个频域中的点，也可以是许多个正弦波。 所以在大家眼中看到的信号如图4-13所示。我们可以将该信号分解为图4-14所示信号。 让我们来思考下面这个问题：…...
window nvidia-smi命令 Failed to initialize NVML: Unknown Error
如果驱动目录下的可以执行，那可能版本原因 "C:\Program Files\NVIDIA Corporation\NVSMI\nvidia-smi"复制"C:\Program Files\NVIDIA Corporation\NVSMI\nvidia-smi.exe"替换 C:\Windows\System32\nvidia-smi.exe 或者 把C:\Windows\System3…...
ubuntu 20.04 更改国内镜像源-阿里源 确保可用
镜像源是跟linux版本一一对应的,查询自己系统的版本号： 命令：lsb_release -a macw:~$ lsb_release -a No LSB modules are available. Distributor ID: Ubuntu Description: Ubuntu 20.04.6 LTS Release: 20.04 Codename: focal macw:~$…...
Elasticsearch 学习（一）如何在Linux 系统中下载、安装
目录 一、Elasticsearch 下载二、使用 yum、dnf、zypper 命令下载安装三、使用 Docker 本地快速启动安装（ESKibana）【测试推荐】3.1 介绍3.2 下载、安装、启动3.3 访问3.4 修改配置，支持ip访问 官网地址： https://www.elastic.co/…...
PYTHON训练营DAY27
装饰器 编写一个装饰器 logger，在函数执行前后打印日志信息（如函数名、参数、返回值） logger def multiply(a, b):return a * bmultiply(2, 3) # 输出: # 开始执行函数 multiply，参数: (2, 3), {} # 函数 multiply 执行完毕&a…...
Shell脚本日志输出完整指南（AI）
一、基础日志输出方法 1. 标准输出与错误重定向 在Shell脚本中，可以使用重定向操作符将命令输出记录到日志文件： >：覆盖写入文件>>：追加写入文件2>：重定向错误输出&>：同时重定向标准…...
 - 创建文件、打开文件、写入数据、追加数据、读取数据、创建目录、删除目录)
node.js文件系统(fs) - 创建文件、打开文件、写入数据、追加数据、读取数据、创建目录、删除目录
注意：以下所有示例均是异步语法！ 注意：以下所有示例均是异步语法！ 创建文件 node.js 允许我们在计算机本地创建文件，例如创建一个 word 文件： // 引入核心模块(fs) var fs require(fs)// API fs.writeF…...
关于如何本地启动xxl-job，并且整合SpringBoot
1. 本地安装xxl-job并启动 拉取xxl-job的代码 git clone gitgithub.com:xuxueli/xxl-job.git配置xxl-job数据库 拉取代码后，代码的doc/db目录下有官方配置好的sql脚本，执行里面的sql脚本至本地数据库 3. 修改xxl-job默认的数据库配置 spring.dataso…...
基于Unity的简单2D游戏开发
基于Unity的简单2D游戏开发 摘要 本文围绕基于Unity的简单2D游戏开发进行深入探讨，旨在分析其开发过程中的技术架构与实现策略。通过文献综述与市场分析，研究发现，近年来Unity引擎因其优秀的跨平台特性及可视化编程理念，成为2D游戏开发的主要工具。文章首先梳理了游戏开发的…...
_cat: /usr/include/cudnn_version.h: 没有那个文件或目录)
在服务器上安装AlphaFold2遇到的问题(3)_cat: /usr/include/cudnn_version.h: 没有那个文件或目录
[rootlocalhost ~]# cat /usr/include/cudnn_version.h cat: /usr/include/cudnn_version.h: 没有那个文件或目录这个错误表明系统找不到 cudnn_version.h 头文件，说明 cuDNN 的开发文件（头文件）没有正确安装。以下是完整的解决方案ÿ…...
Java生产环境设限参数教学
哈哈，这个问题问得好！咱们用开餐厅的比喻来理解生产环境的四大必须设限参数，保证你听完再也不会忘！（搓手手） 1. 堆内存上限：-Xmx（厨房的最大容量） 问题：想象…...
武汉火影数字全息剧秀制作：科技与艺术的梦幻联动
全息剧秀是通过全息投影技术、多媒体互动技术、舞台表演艺术等元素深度融合的新型演出形式。 随着科技的不断进步，投影技术的更加成熟，全息剧秀作为演艺行业的创新力量，正以其独特的魅力和无限的潜力，为观众带来全新的视听盛宴。 …...
MySQL锁机制详解与加锁流程全解析
一、MySQL锁机制全景图 1.1 锁类型体系 #mermaid-svg-czUB6iJgmHuOPdN1 {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-czUB6iJgmHuOPdN1 .error-icon{fill:#552222;}#mermaid-svg-czUB6iJgmHuOPdN1 .error-text{f…...
云轴科技ZStack官网上线Support AI，智能助手助力高效技术支持
5月16日，云轴科技ZStack在官网（www.zstack.io）正式上线ZStack Support AI智能助手。该系统是ZStack应用人工智能于技术支持服务领域的重要创新，基于自研ZStack AIOS平台智塔及LLMOPS技术打造。 ZStack Support AI定位为智能客服&…...
)
深度学习笔记23-LSTM实现火灾预测(Tensorflow)
🍨 本文为🔗365天深度学习训练营中的学习记录博客🍖 原作者： 一、前期准备 1.导入数据 import pandas as pd import numpy as npdf_1 pd.read_csv("D:\TensorFlow1\woodpine2.csv") df_1import matplotlib.pyplot as…...
单例模式（Singleton Pattern）详解
单例模式（Singleton Pattern）详解 1. 定义与核心目标 单例模式是一种创建型设计模式，确保一个类只有一个实例，并提供全局访问点。核心目标： 控制实例数量：防止重复创建对象，节省资源。统一管理共享资源：如配置管理、数据库连接池、日志处理器等。2. 实现方式及对比 (…...