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

HTML常用标签用法全解析：构建语义化网页的核心指南

article 2025/9/23 22:48:56

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">生日、预约时间选择

六、语义化最佳实践

  1. 少用<div>/<span>：优先选择<nav>、<article>等语义标签

  2. 标题层级有序：避免跳过层级（如h1直接接h3）

  3. ARIA角色补充：为复杂组件添加role属性增强可访问性

  4. 响应式图片：使用<picture>配合srcset适配不同设备

总结与资源

掌握HTML标签的语义化使用，是构建高性能、易维护网页的关键。建议通过以下方式深化学习：

  1. 验证工具：使用W3C Validator检查代码规范

  2. 实战项目：仿写主流网站结构（如新闻页、电商详情页）

  3. 扩展阅读：MDN Web Docs的HTML元素参考

通过合理运用标签，你的网页将更易被搜索引擎抓取，同时提升残障用户的访问体验。

相关文章：

HTML常用标签用法全解析：构建语义化网页的核心指南

HTML作为网页开发的基石&#xff0c;其标签的合理使用直接影响页面的可读性、SEO效果及维护性。本文系统梳理HTML核心标签的用法&#xff0c;结合语义化设计原则与实战示例&#xff0c;助你构建规范、高效的网页结构。 一、基础结构与排版标签 1.1 文档结构 <!DOCTYPE htm…...

编程日记 2025/6/13 2:01:43

大数据架构选型全景指南：核心架构对比与实战案例 解析

目录 大数据架构选型全景指南&#xff1a;核心架构对比与实战案例解析1. 主流架构全景概览1.1 核心架构类型1.2 关键选型维度 2. 架构对比与选型矩阵2.1 主流架构对比表2.2 选型决策树 3. 案例分析与实现案例1&#xff1a;电商实时推荐系统&#xff08;Lambda架构&#xff09;案…...

编程日记 2025/6/16 10:20:32

FPGA： XILINX Kintex 7系列器件的架构

本文将详细介绍Kintex-7系列FPGA器件的架构。以下内容将涵盖Kintex-7的核心架构特性、主要组成部分以及关键技术&#xff0c;尽量全面且结构化&#xff0c;同时用简洁的语言确保清晰易懂。 Kintex-7系列FPGA架构概述 Kintex-7是Xilinx 7系列FPGA中的中高端产品线&#xff0c;基…...

编程日记 2025/9/10 9:14:42

RK3568-鸿蒙5.1与原生固件-扇区对比分析

编译生成的固件目录地址 ../openharmony/out/rk3568/packages/phone/images鸿蒙OS RK3568固件分析 通过查看提供的信息&#xff0c;分析RK3568开发板固件的各个组件及其用途&#xff1a; 主要固件组件 根据终端输出的文件列表&#xff0c;RK3568固件包含以下关键组件&#x…...

编程日记 2025/9/23 2:51:54

常见激活函数——作用、意义、特点及实现

文章目录 激活函数的意义常见激活函数及其特点1. Sigmoid&#xff08;Logistic 函数、S型函数&#xff09;2. Tanh&#xff08;双曲正切函数&#xff09;3. ReLU&#xff08;Rectified Linear Unit修正线性单元&#xff09;4. Softmax5. Swish&#xff08;Google 提出&#xff…...

编程日记 2025/9/22 20:41:05

Spring模拟转账开发

完成转账代码的编写 service public class AccountServiceImpl implements AccountService {Autowiredprivate AccountDao accountDao;public void setAccountDao(AccountDao accountDao) {this.accountDao accountDao;}public void pay(String out, String in, Double money)…...

编程日记 2025/9/16 13:22:29

基于微信小程序的在线聊天功能实现：WebSocket通信实战

基于微信小程序的在线聊天功能实现&#xff1a;WebSocket通信实战 摘要 本文将详细介绍如何使用微信小程序结合WebSocket协议开发一个实时在线聊天功能。通过完整的代码示例和分步解析&#xff0c;涵盖界面布局、WebSocket连接管理、消息交互逻辑及服务端实现&#xff0c;适合…...

编程日记 2025/9/23 13:50:17

小波变换＋注意力机制成为nature收割机

小波变换作为一种新兴的信号分析工具&#xff0c;能够高效地提取信号的局部特征&#xff0c;为复杂数据的处理提供了有力支持。然而&#xff0c;它在捕捉数据中最为关键的部分时仍存在局限性。为了弥补这一不足&#xff0c;我们引入了注意力机制&#xff0c;借助其能够强化关注…...

编程日记 2025/9/22 18:04:20

【无标题】威灏光电哲讯科技MES项目启动会圆满举行

5月14日&#xff0c;威灏光电与哲讯科技MES项目启动会在威灏光电总部隆重举行。威灏光电董事长江轮、总经理刘明星、哲讯科技总经理崔新华、副总王子文及双方项目组成员共同出席&#xff0c;标志着两家企业在数字化领域的第二次深度合作正式启航。 强强联手&#xff0c;二度合作…...

编程日记 2025/9/23 4:25:54

腾讯云存储原理

我们来详细展开你提到的两个核心结构概念&#xff1a; 一、“基于分布式文件系统 对象存储技术” 是什么&#xff1f; 1. 分布式文件系统&#xff08;DFS&#xff09;基础 分布式文件系统是一种支持将数据分布在多个存储节点上、并对上层用户透明的文件系统。腾讯云COS虽然是…...

编程日记 2025/6/20 11:32:46

display:grid网格布局属性说明

网格父级 &#xff1a;display:grid&#xff08;块级网格&#xff09;/ inline-grid&#xff08;行内网格&#xff09; 注意&#xff1a;当设置网格布局&#xff0c;column、float、clear、vertical-align的属性是无效的。 HTML: <ul class"ls02 f18 mt50 sysmt30&…...

编程日记 2025/9/23 17:47:41

排序算法之高效排序:快速排序,归并排序,堆排序详解

排序算法之高效排序&#xff1a;快速排序、归并排序、堆排序详解 前言一、快速排序&#xff08;Quick Sort&#xff09;1.1 算法原理1.2 代码实现&#xff08;Python&#xff09;1.3 性能分析 二、归并排序&#xff08;Merge Sort&#xff09;2.1 算法原理2.2 代码实现&#xf…...

编程日记 2025/9/23 16:27:48

Java 并发编程归纳总结（可重入锁 | JMM | synchronized 实现原理）

1、锁的可重入 一个不可重入的锁&#xff0c;抢占该锁的方法递归调用自己&#xff0c;或者两个持有该锁的方法之间发生调用&#xff0c;都会发生死锁。以之前实现的显式独占锁为例&#xff0c;在递归调用时会发生死锁&#xff1a; public class MyLock implements Lock {/* 仅…...

编程日记 2025/9/23 11:43:29

基于对抗性后训练的快速文本到音频生成：stable-audio-open-small 模型论文速读

Fast Text-to-Audio Generation with Adversarial Post-Training 论文解析 一、引言与背景 文本到音频系统的局限性&#xff1a;当前文本到音频生成系统性能虽佳&#xff0c;但推理速度慢&#xff08;需数秒至数分钟&#xff09;&#xff0c;限制了其在创意领域的应用。 研究…...

编程日记 2025/9/23 6:33:37

BUFDS_GTE2，IBUFDS，BUFG缓冲的区别

1、IBUFDS_GTE2 这是 Xilinx FPGA 中专门为 高速收发器&#xff08;SerDes/GTX/GTH/GTY&#xff09;参考时钟设计的差分输入缓冲器。 主要功能是将外部的差分时钟信号&#xff08;如LVDS、LVPECL等&#xff09;转换为FPGA内部的单端时钟信号&#xff0c;并保证信号的完整性和高…...

编程日记 2025/7/10 20:36:18

ADC深入——SNR、SFDR、ENOB等概念

目录 SNR&#xff08;Spurious‑Free Dynamic Range 信噪比&#xff09; ENOB&#xff08;Effective Number Of Bits 有效位&#xff09; SFDR&#xff08;Spurious‑Free Dynamic Range&#xff09; 感觉SNR和SFDR差不多&#xff1f;看看下图 输入带宽 混叠 带通采样/欠…...

编程日记 2025/9/23 19:54:12

ThinkPad X250电池换电池芯（理论技术储备）

参考&#xff1a;笔记本电池换电芯的经验与心得分享 - 经典ThinkPad专区 - 专门网 换电池芯&#xff0c;需要克服以下问题&#xff1a; 1 拆电池。由于是超声波焊接&#xff0c;拆解比较费力&#xff0c;如果暴力撬&#xff0c;有可能导致电池壳变形... 2 替换电池芯的时候如…...

编程日记 2025/8/7 5:35:04

硬件厂商的MIB文档详解 | 如何查询OID? | MIB Browser实战指南-优雅草卓伊凡

硬件厂商的MIB文档详解 | 如何查询OID? | MIB Browser实战指南-优雅草卓伊凡 一、硬件厂商的MIB文档是什么&#xff1f; 1. MIB的本质&#xff1a;设备的”数据字典” MIB&#xff08;Management Information Base&#xff09; 是SNMP协议的核心数据库&#xff0c;定义了设备…...

编程日记 2025/9/22 10:14:26

阿里开源通义万相 Wan2.1-VACE，开启视频创作新时代

0.前言 阿里巴巴于2025年5月14日正式开源了其最新的AI视频生成与编辑模型——通义万相Wan2.1-VACE。这一模型是业界功能最全面的视频生成与编辑工具&#xff0c;能够同时支持多种视频生成和编辑任务&#xff0c;包括文生视频、图像参考视频生成、视频重绘、局部编辑、背景延展…...

编程日记 2025/9/11 21:57:49

小学数学题批量生成及检查工具

软件介绍 今天给大家介绍一款近期发现的小工具&#xff0c;它非常实用。 软件特点与出题功能 这款软件体积小巧&#xff0c;不足两兆&#xff0c;具备强大的功能&#xff0c;能够轻松实现批量出题。使用时&#xff0c;只需打开软件&#xff0c;输入最大数和最小数&#xff0c…...

编程日记 2025/9/23 10:33:56

5.13/14 linux安装centos及一些操作命令随记

一、环境准备 VMware Workstation版本选择建议 CentOS 7 ISO镜像下载指引 虚拟机硬件配置建议&#xff08;内存/处理器/磁盘空间&#xff09; 二、系统基础命令 一、环境准备 1.VMware Workstation版本选择建议 版本选择依据 选择VMware Workstation的版本时&#xff0c…...

编程日记 2025/9/23 12:54:34

OpenCV 背景建模详解：从原理到实战

在计算机视觉领域&#xff0c;背景建模是一项基础且重要的技术&#xff0c;它能够从视频流中分离出前景目标&#xff0c;广泛应用于运动目标检测、视频监控、人机交互等场景。OpenCV 作为计算机视觉领域最受欢迎的开源库之一&#xff0c;提供了多种高效的背景建模算法。本文将深…...

编程日记 2025/6/25 1:24:52

Transformer 模型与注意力机制

目录 Transformer 模型与注意力机制 一、Transformer 模型的诞生背景 二、Transformer 模型的核心架构 &#xff08;一&#xff09;编码器&#xff08;Encoder&#xff09; &#xff08;二&#xff09;解码器&#xff08;Decoder&#xff09; 三、注意力机制的深入剖析 …...

编程日记 2025/9/14 23:08:28

卡顿检测与 Choreographer 原理

一、卡顿检测的原理 卡顿的本质是主线程&#xff08;UI 线程&#xff09;未能及时完成某帧的渲染任务&#xff08;超过 16.6ms&#xff0c;以 60Hz 屏幕为例&#xff09;&#xff0c;导致丢帧&#xff08;Frame Drop&#xff09;。检测卡顿的核心思路是监控主线程任务的执行时…...

编程日记 2025/6/16 19:45:45

Baklib加速企业AI数据智理转型

Baklib智理AI数据资产 在AI技术深度渗透业务场景的背景下&#xff0c;Baklib通过构建企业级知识中台架构&#xff0c;重塑了数据资产的治理范式。该平台采用智能分类引擎与语义分析模型&#xff0c;将分散在邮件、文档、数据库中的非结构化数据转化为标准化的知识单元&#xf…...

编程日记 2025/9/23 10:55:51

基于协同过滤的文学推荐系统设计【源码+文档+部署】

基于协同过滤的文学推荐系统设计 摘要 随着信息技术的飞速发展和文学阅读需求的日益多样化&#xff0c;构建一个高效、精准的文学推荐系统变得尤为重要。本文采用Spring Boot框架&#xff0c;结合协同过滤算法&#xff0c;设计并实现了一个基于用户借阅行为和社交论坛互动的文学…...

编程日记 2025/9/22 21:18:21

在c/c++中，如何使用链表进行插入、删除和遍历功能。

首先&#xff0c;链表由节点组成&#xff0c;每个节点应该包含数据和指向下一个节点的指针。 结构体可以包含数据域和指针域。 比如&#xff0c;假设链表存储整数&#xff0c;那节点的结构体应该有一个int类型的数据和一个指向同样结构体的指针。结构体定义大概是这样的&…...

编程日记 2025/6/7 18:51:05

数据结构与算法——单链表（续）

单链表&#xff08;续&#xff09; 查找在指定位置之前插入结点在指定位置之后插入结点删除pos位置的结点删除pos位置之后的结点销毁 查找 遍历&#xff1a;pcur指向头结点&#xff0c;循环&#xff0c;当pucr不为空进入循环&#xff0c;pucr里面指向的数据为要查找的值的时候…...

编程日记 2025/9/23 12:18:14

全面且深度学习c++类和对象(上)

文章目录 过程和对象类的引入&#xff0c;类的定义类的访问限定符及封装类的访问限定符封装 类的实例化类大小内存对齐规则&#xff1a; this指针this特性 过程和对象 C语言面向过程设计&#xff0c;c面向对象设计&#xff0c; 举例&#xff1a;洗衣服 C语言&#xff1a;放衣服…...

编程日记 2025/9/16 21:25:17

开源情报如何成为信息攻防的关键资源

相比于传统情报&#xff0c;开源情报具有情报数量大、情报质量好、情报成本低、情报可用性强等优势。这是开源情报能够成为信息攻防关键资源的主要原因。 海量信息让开源情报具有更大潜力。一是开源情报体量巨大。信息化时代是信息爆炸的时代&#xff0c;网络上发布的各种信息…...

编程日记 2025/9/16 21:25:13