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

【HTML-2】HTML 标题标签：构建网页结构的基础

news 来源：原创 2025/7/18 21:22:23

在网页开发中，标题标签(<h1>到<h6>)是构建内容层次结构和语义化标记的基础元素。这些标签不仅影响内容的视觉呈现，更对网页的可访问性和SEO有着深远影响。

1. 标题标签的基本用法

HTML提供了六个级别的标题标签：

<h1>这是最重要的标题</h1>
<h2>这是次级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是六级标题</h6>

每个标题标签默认具有不同的字体大小和粗细，从<h1>(最大)到<h6>(最小)。

2. 标题标签的语义重要性

2.1 内容结构组织

标题标签为文档创建了清晰的大纲结构，帮助用户快速浏览和理解内容组织方式。

2.2 SEO优化

搜索引擎使用标题标签来理解页面内容的层次结构和重要性。合理使用标题标签可以显著提升页面在搜索结果中的排名。

2.3 可访问性

屏幕阅读器等辅助技术依赖标题标签为用户提供内容导航。正确的标题层次结构可以极大改善残障用户的浏览体验。

3. 最佳实践指南

3.1 合理的层次结构

每个页面应该只有一个<h1>标签，通常用于页面主标题
按顺序使用标题标签，不要跳过级别(如从<h2>直接跳到<h4>)
保持层次结构的一致性

<!-- 正确的结构示例 -->
<h1>网页设计基础</h1><h2>HTML简介</h2><h3>HTML元素</h3><h3>HTML属性</h3><h2>CSS基础</h2><h3>选择器</h3><h3>盒模型</h3>

3.2 长度控制

保持标题简洁明了，通常不超过一行
避免在标题中使用过多关键词(关键词堆砌)

3.3 样式处理

使用CSS而非标题标签来控制文本大小和外观
不要为了视觉效果而错误使用标题标签(如使用<h3>只是因为它的默认大小合适)

/* 通过CSS调整标题样式 */
h1 {font-size: 2.5rem;color: #333;margin-bottom: 1.5rem;
}

4. 常见错误与解决方案

4.1 错误1：多个`<h1>`标签

问题：早期HTML规范允许每个区块使用独立的<h1>，但这对SEO和可访问性不利。

解决方案：每个页面保持一个<h1>，用于页面主标题。

4.2 错误2：跳过标题级别

问题：从<h2>直接跳到<h4>会破坏文档大纲。

解决方案：保持顺序的标题层次结构。

4.3 错误3：使用标题标签实现视觉效果

问题：仅因为喜欢某个标题的默认样式而使用它，不考虑语义。

解决方案：使用CSS实现视觉需求，选择正确的语义标签。

5. HTML5中的标题标签

HTML5引入了区块元素(<article>, <section>, <nav>等)，改变了标题的上下文关系。在HTML5中：

每个区块可以有自己的标题层次
大纲算法会根据区块元素重新计算

<article><h1>文章标题</h1><section><h2>章节标题</h2><p>内容...</p></section>
</article>

6. 响应式设计中的标题

在移动设备上，可能需要调整标题大小：

/* 响应式标题大小 */
h1 {font-size: 2rem;
}@media (max-width: 768px) {h1 {font-size: 1.5rem;}
}

7. 结论

标题标签是HTML文档结构的支柱，正确使用它们可以：

改善用户体验和内容可读性
增强搜索引擎优化效果
提高网站的可访问性
创建清晰、有组织的文档结构

记住，标题标签首先是语义工具，其次才是视觉元素。通过遵循最佳实践，您可以创建结构良好、易于维护且对搜索引擎友好的网页内容。

【HTML-2】HTML 标题标签：构建网页结构的基础

在网页开发中，标题标签(<h1>到<h6>)是构建内容层次结构和语义化标记的基础元素。这些标签不仅影响内容的视觉呈现，更对网页的可访问性和SEO有着深远影响。 1. 标题标签的基本用法 HTML提供了六个级别的标题标签： <h1>这…...

编程日记 2025/7/18 21:22:23

vue3前端后端地址可配置方案

在开发vue3项目过程中，需要切换不同的服务器部署，代码中配置的服务需要可灵活配置，不随着run npm build把网址打包到代码资源中，不然每次切换都需要重新run npm build。需要一个配置文件可以修改服务地址，而打包的代码…...

编程日记 2025/7/18 21:12:42

HTML应用指南：利用POST请求获取全国申通快递服务网点位置信息

申通快递（STO Express）作为中国领先的综合物流服务商，自1993年创立以来，始终秉持“正道经营、长期主义”的发展理念，深耕快递物流领域，开创了行业加盟制先河。经过30余年的发展，申通已成长为国家…...

编程日记 2025/7/18 21:15:11

《医院运营管理典型应用数据资源建设指南2025》全面分析

引言：医院数据资源建设的时代背景与意义医院运营管理数据资源建设正迎来前所未有的发展机遇与挑战。在深化支付改革与公立医院高质量发展政策驱动下，医院亟需建立智慧化运营管理体系，而数据资源作为关键要素，其建设水平直接关系到医院管理的科学性与效率。《医院运营管理…...

编程日记 2025/7/14 11:38:23

.NET外挂系列：3. 了解 harmony 中灵活的纯手工注入方式

一：背景 1. 讲故事上一篇我们讲到了注解特性，harmony 在内部提供了 20个 HarmonyPatch 重载方法尽可能的让大家满足业务开发，那时候我也说了，特性虽然简单粗暴，但只能解决 95% 的问题，言外之意还有一些…...

编程日记 2025/7/13 18:05:08

taro 小程序 CoverImage Image src无法显示图片的问题

目录一、问题描述二、解决方案一、问题描述使用taro开发的微信小程序图片无法正常显示，并报如下错误： [渲染层网络层错误] Failed to load local image resource /assets/icon/message.png the server responded with a status of 500 (HTTP/1.…...

编程日记 2025/7/18 21:20:07

05_核支持向量机

描述核支持向量机（通常简称为SVM）可以推广到更复杂模型的扩展，这些模型无法被输入空间的超平面定义。 SVM 的核心思想是找到一个最优的超平面，将不同类别的数据分开。这个超平面不仅要能够正确分类数据，还要使得两个…...

编程日记 2025/7/18 21:10:27

[解决方案] Word转PDF

背景： 之前做过一些pdf导出， 客户提了一个特别急的需求， 要求根据一个模版跟一个csv的数据源， 批量生成PDF， 因为之前用过FOP， 知道调整样式需要特别长的时间， 这个需求又特别急， 所…...

编程日记 2025/7/18 21:21:14

Oracle 11g post PSU Oct18 设置ssl连接（使用wallets）

说明 oracle 11g 从PSU 2018Oct（含）及之后的补丁不支持MD5. 要使用JDBC SSL要使用TSL1.2. 有两种方法，一种使用wallet, 一种使用JKS. 本文档使用wallets. 1. 为什么用TSL 1.2 https://blogs.oracle.com/developers/post/ssl-connection-to…...

编程日记 2025/7/15 0:11:34

linux关闭某端口暂用的进程

查看是哪个端口暂用 sudo netstat -tulpn | grep :80根据图片显示 80端口暂用的进程id是 3002 结束进程id为3002的进程 sudo kill -9 3002...

编程日记 2025/7/12 17:40:36

web开发全过程总结

目录利用pnpm创建vue3的文件使用pnpm创建项目项目配置在idea中创建Spring Boot项目配置基础项目架构(三层架构) 利用pnpm创建vue3的文件 1.打开cmd,以管理员的身份运行 2.切换到自己想要建立项目的文件的目录下或者直接在文件中以cmd的形式打开输入指令安装pnpm n…...

编程日记 2025/7/14 12:36:24

经典Java面试题的答案——Java 基础

大家好，我是九神。这是互联网技术岗的分享专题，废话少说，进入正题： 1.JDK 和 JRE 有什么区别？ JDK：Java Development Kit 的简称，java 开发工具包，提供了 java 的开发环境和运行环境…...

编程日记 2025/7/18 21:16:10

Fiddler 指定链接断点

问题背景在使用Fiddler进行抓包和mock数据时，由于前端页面通常依赖多个前置接口（如JS、CSS、登录态等），导致抓包过程中难以精准定位到目标接口。这种复杂性增加了调试和mock数据的难度。常见挑战前置接口过多：页…...

编程日记 2025/7/18 20:56:09

C# 语法篇：字段的定义和运算

对于字段来说，是在对象创建时就被初始化了；而构造函数的运行是在这之后。因此，不能对字段进行需要用到“构造函数赋值的变量”的运算，因为此时这些变量的值都为0或者随机值，编译器不允许这时候做运算。因此&#xf…...

编程日记 2025/7/18 20:57:26

音频应用的MediaSession冲突

前提条件系统级应用，使用了sharedUserId 应用在AndroidManifest.xml中声明了系统级UID：android:sharedUserId"android.uid.system"该配置使应用具有系统级权限，可以访问系统级API和资源使用MediaSession框架应用通过MediaSessi…...

编程日记 2025/7/18 21:17:05

【QT】类A接收TCP数据并通过信号通知类B解析

以下是基于Qt的完整示例代码，包含类A接收TCP数据并通过信号通知类B解析的实现： ------------------ ClassA.h 网络数据接收类 ------------------ #pragma once#include <QTcpServer> #include <QTcpSocket> #include <QObject>class…...

编程日记 2025/7/16 12:18:21

【Jitsi Meet】(腾讯会议的平替)Docker安装Jitsi Meet指南-使用内网IP访问

Docker安装Jitsi Meet指南-使用内网IP访问下载官方代码配置环境变量复制示例环境文件并修改配置：编辑 .env 文件： 修改 docker-compose.yml 文件生成自签名证书启动服务最终验证腾讯会议的平替。我们是每天开早晚会的，都是使用腾讯会议。腾…...

编程日记 2025/7/12 21:12:39

微服务架构中的多进程通信--内存池、共享内存、socket

目录 1 引言 2 整体架构简介 3 疑问 3.1 我们的共享内存消息机制是用的posix还是system V 3.2 rmmt中，不同线程之间的比如访问同一个内存，用的什么锁控制的 3.3 疑问：假如一个进程发送给了另外两个进程，然后另外两个进程都同…...

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

使用 adb 命令截取 Android 设备的屏幕截图

使用 adb 命令截取 Android 设备的屏幕截图。以下是两种常见的方法： 方法一：截屏后保存到电脑 adb shell screencap -p /sdcard/screenshot.png adb pull /sdcard/screenshot.png解释： adb shell screencap -p /sdcard/screenshot.png&…...

编程日记 2025/7/12 15:09:59

Jenkins服务器配置密钥对

1. 在 Jenkins 服务器上执行以下命令 # 生成 SSH 密钥对 ssh-keygen -t rsa -b 2048 -f ~/.ssh/id_rsa -N ""# 查看公钥内容 cat ~/.ssh/id_rsa.pub 2. 将显示的公钥内容复制，然后在目标服务器上执行 # 在目标服务器上执行 mkdir -p /root/.ssh chmod …...

编程日记 2025/7/18 1:08:15

Docker中部署Alertmanager

在 Docker 中部署 Alertmanager（通常与 Prometheus 告警系统配合使用）的步骤如下： 一、拉取镜像prom/alertmanager docker pull prom/alertmanager二、创建 Alertmanager 配置文件首先准备Alertmanager的配置文件 alertmanager.yml(如存…...

编程日记 2025/7/12 11:48:09

Keil软件中STM32(ARM)与C51兼容方法

推荐其他UP主：Keil5安装教程（包含C51与MDK共存） - Kojull - 博客园我已经实现了！...

编程日记 2025/7/16 14:12:18

青少年编程与数学 02-019 Rust 编程基础 19课题、项目发布

青少年编程与数学 02-019 Rust 编程基础 19课题、项目发布一、准备工作1. 创建和配置项目2. 编写代码和测试3. 文档注释二、构建发布版本1. 构建优化后的可执行文件2. 静态链接（可选） 三、发布到 crates.io1. Crates.io核心功能使用方法特点最新动态 2…...

编程日记 2025/7/14 11:12:01

一洽小程序接入说明

接入说明文档以微信小程序作为示例介绍，其他小程序接入操作与此类似 1、添加校验文件开发者使用微信小程序提供的 webview 组件可以实现打开一洽的H5对话小程序的“域名配置”中添加一洽的对话域名地址，需要获取校验文件提供给一洽放在域名根目录下…...

编程日记 2025/7/13 14:35:30

RabbitMQ的基本使用

RabbitMQ 是一个非常流行的消息中间件，用于实现生产者与消费者之间的异步通信。它基于 AMQP 协议（高级消息队列协议），支持多种编程语言和平台。以下是 RabbitMQ 的基本使用说明，包括安装、核心概念、基本操作和 Pyth…...

编程日记 2025/7/17 8:01:23

CSS专题之常见布局

前言石匠敲击石头的第 13 次作为一名前端开发，在日常开发中，写页面是必不可少的工作，但有时候发现很多的页面结构都是类似的，所以打算写一篇文章来梳理一下日常开发中常见的布局，如果哪里写的有问题欢迎指出。单列…...

编程日记 2025/7/12 19:46:27

CentOS 7连接公司网络配置指南

在物理主机上安装了一个CentOS 7，需要连接公司的网络，但是公司的网络需要输入用户名密码才能连接解决方案需要同时设置 wifi-sec.key-mgmt 和 802-1x 参数。以下是分步操作： 1. 创建基础 Wi-Fi 连接 sudo nmcli con add con-name &quo…...

编程日记 2025/7/17 11:58:23

一、需开放端口 TCP: 21115, 21116, 21117, 21118, 21119 UDP: 21116 二、安装docker 1.使用 root 权限登录 CentOS。确保 yum 包更新到最新 yum update 2. 卸载旧版本 yum remove docker 3. 安装 Docker 所需依赖 yum -y install yum-utils device-mapper-persistent-d…...

编程日记 2025/7/13 6:01:50

CentOS 7上部署BIND9 DNS服务器指南

场景假设： 我们要为内部网络 192.168.1.0/24 搭建一个权威 DNS 服务器。域名：mylab.localDNS 服务器 IP：192.168.1.10我们将配置正向解析 (hostname -> IP) 和反向解析 (IP -> hostname)。一、安装 BIND9 更新系统并安装 BIND 及工…...

编程日记 2025/7/13 19:31:19

面试突击：消息中间件之RabbitMQ

一：你们项目中哪里用到了RabbitMQ ? 难易程度：☆☆☆ 出现频率：☆☆☆☆ 我们项目中很多地方都使用了RabbitMQ , RabbitMQ 是我们项目中服务通信的主要方式之一 , 我们项目中服务通信主要有两种方式实现 : 通过Feign实现服务调用通过MQ实现服…...

编程日记 2025/7/14 8:52:42

基于 ESP32 与 AWS 全托管服务的 IoT 架构：MQTT + WebSocket 实现设备-云-APP 高效互联

目录一、总体架构图二、设备端（ESP32）低功耗设计（适配 AWS IoT） 1.MQTT 设置（ESP32 连接 AWS IoT Core） 2.低功耗策略总结（ESP32）三、云端架构（基于 AWS Serverless + IoT Core） 1.AWS IoT Core 接入 2.云端 → APP：WebSocket 推送方案流程： 3.数据存…...

编程日记 2025/7/15 23:18:14

将 /dev/vdb1 的空间全部合并到 /dev/mapper/centos-root（即扩展 CentOS 的根分区）

要将 /dev/vdb1 的 1TB 空间合并到 /dev/mapper/centos-root（即扩展 CentOS 的根分区），可以采用 LVM（逻辑卷管理） 的方式。以下是详细步骤： 步骤 1：检查当前磁盘和 LVM 情况 1.1 确认 /dev/vdb…...

编程日记 2025/7/15 4:46:07

CentOS Stream安装MinIO教程

1. 下载 MinIO 二进制文件 # 进入 MinIO 安装目录 sudo cd /usr/local/bin/# 下载 MinIO 二进制文件（替换为最新版本链接） wget https://dl.min.io/server/minio/release/linux-amd64/minio chmod x minio2. 创建专用用户和存储目录 # 创建 minio 用户…...

编程日记 2025/6/28 22:04:44

游戏引擎学习第299天:改进排序键第二部分

回顾并为当天内容做准备我们会现场编写完整的游戏代码。回顾上周发现自己对游戏中正确的排序规则并没有清晰的理解。主要原因是我们更擅长三维游戏开发，缺乏二维游戏和二维游戏技术的经验，对于二维精灵排序、模拟三维效果的最佳方案等没有太多技巧和经…...

编程日记 2025/7/18 9:25:12

设计模式----软考中级软件设计师（自用学习笔记）

目录 1、设计模式的要素 2、设计模式的分类 3、简单工厂模式 4、工厂方法 5、抽象工厂 6、生成器 7、原型 8、单例模式 9、适配器 10、桥接 11、组合模式 12、装饰 13、外观 14、享元 15、代理 16、责任链 17、命令 18、解释器 19、迭代器 20、中介者 21、…...

编程日记 2025/7/12 21:12:58

uniapp如何设置uni.request可变请求ip地址

文章目录简介方法一：直接在请求URL中嵌入变量方法二：使用全局变量方法三：使用环境变量方法四：服务端配置方法五：使用配置文件（如config.js）:总结简介在uni-app中，uni.request 用…...

编程日记 2025/7/17 15:59:17

Centos上搭建 OpenResty

一、OpenResty简介 OpenResty 是基于 Nginx 的扩展平台，完全兼容 Nginx 的核心功能（如 HTTP 服务和反向代理），同时通过内嵌 LuaJIT 支持，允许开发者用 Lua 脚本灵活扩展业务逻辑。它简化了动态逻辑的实现。二、安装…...

编程日记 2025/7/13 4:50:36

Kotlin与物联网（IoT）：Android Things开发探索

在物联网（IoT）领域，Kotlin 凭借其简洁性、安全性和与 Java 生态的无缝兼容性，逐渐成为 Android Things 开发的有力工具。尽管 Google 已于 2022 年宣布停止对 Android Things 的官方支持，但其技术思想仍值得探索&#…...

编程日记 2025/7/14 21:01:51

WIFI信号状态信息 CSI 深度学习篇之CNN（Python）

本博客是一篇非新手导向的CNN处理CSI图像帧的教程，基于tensorflow框架构建CNN模型进行训练，训练对象依然是前述博客中所提到的CSI图像帧（500 x 90 x 1）。代码里用到了深度可分离卷积，这种结构在减少计算量和参数数量方…...

编程日记 2025/7/13 19:12:18

深度学习实战 04：卷积神经网络之 VGG16 复现三（训练）

在后续的系列文章中，我们将逐步深入探讨 VGG16 相关的核心内容，具体涵盖以下几个方面： 卷积原理篇：详细剖析 VGG 的 “堆叠小卷积核” 设计理念，深入解读为何 332 卷积操作等效于 55 卷积，以及 333 卷积操作…...

编程日记 2025/7/16 18:34:02

欧拉系统离线部署docker

https://www.cnblogs.com/hsh96/p/18150538 Docker 离线安装指南本文介绍了如何在 Linux 系统上进行 Docker 的离线安装。首先，确保欧拉系统安装的是server版本，否则没有tar工具。您需要下载 Docker 的离线安装包。您可以从以下链接获取所需的安装包&a…...

编程日记 2025/7/13 22:23:14

Java 中 final 与 static 的区别

Java 中 final 与 static 的区别在 Java 中，final 和 static 是两个不同的关键字，它们的核心作用和不可变性特性有本质区别： 一、final 的核心作用 1. 变量（不可变引用） 不可重新赋值：final 修饰的变量…...

编程日记 2025/7/15 1:31:11

多模态实时交互边界的高效语音语言模型 VITA-Audio 介绍

介绍 VITA-Audio是由Zuwei Long等研究者提出的端到端大型语音语言模型，其核心目标是通过跨模态令牌生成技术，解决传统语音交互系统中首音频令牌生成延迟高的问题。该模型的创新点主要体现在： 低延迟：VITA-Audio 是首个能够在初次…...

编程日记 2025/7/13 7:07:38

LLM | 论文精读 | NAACL 2025 | Clarify When Necessary：教语言模型何时该“问一句”再答！

🔍 解读 NAACL 2025 重磅论文《Clarify When Necessary》：教语言模型何时该“问一句”再答！ 🧩 一、现实问题：大模型“看不懂装懂”有多危险？ 我们每天用的 ChatGPT、Claude 等大型语言模型（LL…...

编程日记 2025/7/14 8:53:40

MySQL 8.0 OCP 英文题库解析（七）

Oracle 为庆祝 MySQL 30 周年，截止到 2025.07.31 之前。所有人均可以免费考取原价245美元的MySQL OCP 认证。从今天开始，将英文题库免费公布出来，并进行解析，帮助大家在一个月之内轻松通过OCP认证。本期公布试题51~60 试题51:…...

编程日记 2025/7/14 12:46:37

深度解析Vue项目Webpack打包分包策略从基础配置到高级优化，全面掌握性能优化核心技巧

深度解析Vue项目Webpack打包分包策略从基础配置到高级优化，全面掌握性能优化核心技巧一、分包核心价值与基本原理 1.1 为什么需要分包首屏加载优化：减少主包体积，提升TTI（Time to Interactive）缓存利用率提升&am…...

编程日记 2025/6/29 0:30:00

MySQL——基本查询内置函数

目录 CRUD Create Retrieve where order by limit Update Delete 去重操作聚合函数聚合统计内置函数日期函数字符函数数学函数其它函数实战OJ 批量插入数据找出所有员工当前薪水salary情况查找最晚入职员工的所有信息查找入职员工时间升序排…...

编程日记 2025/7/14 14:18:21

实现图片自动压缩算法，canvas压缩图片方法

背景： 在使用某些支持webgl的图形库（eg：PIXI.js，fabric.js）场景中，如果加载的纹理超过webgl可处理的最大纹理限制，会导致渲染的纹理缺失，甚至无法显示。方案实现图片自动压缩算…...

编程日记 2025/7/14 3:57:05

零基础设计模式——创建型模式 - 单例模式

第二部分：创建型模式 - 单例模式 (Singleton Pattern) 欢迎来到创建型模式的第一站——单例模式！这是最简单也最常用的设计模式之一。核心思想：关注对象的创建过程，将对象的创建与使用分离，降低系统的耦合度。单例…...

编程日记 2025/7/15 5:54:12

数据挖掘：从数据堆里“淘金”，你的数据价值被挖掘了吗？

数据挖掘：从数据堆里“淘金”，你的数据价值被挖掘了吗？ 在这个数据爆炸的时代，我们每天都在产生海量信息：社交媒体上的点赞、网购时的浏览记录，甚至是健身手环记录下的步数。这些数据本身可能看似杂乱无章…...

编程日记 2025/7/13 8:46:29