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

HTML5 标题

article 2026/4/9 20:38:04
HTML5 标题 (Headings) 学习笔记HTML5 中的标题元素用于定义文档的层级结构。它们对于文档结构、**SEO搜索引擎优化以及无障碍访问Accessibility**至关重要。一、标题元素概览HTML 提供了 6 个级别的标题从最重要到最不重要标签级别语义权重默认样式 (通常)h11最高 (主标题)最大字号加粗h22次高 (章节标题)较大字号加粗h33中等 (子章节)中等字号加粗h44较低较小字号加粗h55低更小字号加粗h66最低最小字号加粗基本语法h1这是主标题 (H1)/h1h2这是二级标题 (H2)/h2h3这是三级标题 (H3)/h3!-- ... 以此类推 --二、HTML5 中的关键变化大纲算法 (Outline Algorithm)在 HTML4 中标题层级完全由h1到h6的标签决定。在HTML5中引入了基于节Sectioning的大纲算法。这意味着标题的层级不仅取决于标签本身还取决于它所在的节Sectioning Content。1. 节元素 (Sectioning Elements)HTML5 引入了新的语义化标签来定义文档的节sectionarticleasidenav2. 新的层级逻辑在 HTML5 中每个节Section都可以有自己的h1。在文档根级别h1是主标题。在section或article内部h1是该节的标题其逻辑层级等同于外部的h2。在section内部的section中h1等同于外部的h3。示例bodyh1网站主标题/h1!-- 逻辑层级 1 --articleh1文章标题/h1!-- 逻辑层级 2 (相当于 h2) --p文章内容.../psectionh1小节标题/h1!-- 逻辑层级 3 (相当于 h3) --p小节内容.../p/section/article/body注意虽然浏览器和屏幕阅读器理论上支持这种逻辑但目前的浏览器渲染引擎和许多 SEO 工具仍然主要依赖标签本身h1-h6来判断层级。因此为了兼容性和最佳实践通常建议不要过度依赖 HTML5 的大纲算法而是显式地使用h2,h3等标签来反映视觉和逻辑层级。三、最佳实践与使用规范1. 每个页面只使用一个h1尽管 HTML5 允许每个节使用h1但最佳实践是每个页面只保留一个h1作为页面的主标题。使用h2到h6来构建子层级。这样做对 SEO 最友好且能避免屏幕阅读器用户的困惑。推荐结构bodyheaderh1我的博客技术学习笔记/h1!-- 页面唯一主标题 --/headermainarticleh2HTML5 标题详解/h2!-- 文章标题 --p介绍内容.../psectionh3什么是大纲算法/h3!-- 子章节 --p内容.../p/sectionsectionh3最佳实践/h3p内容.../p/section/article/main/body2. 不要为了样式而使用标题错误做法为了把文字变大加粗而使用h1即使它不是标题。正确做法使用 CSS 来控制字体大小和粗细。标题标签只用于定义语义结构。/* 错误用 h1 做样式 */h1 stylefont-size: 14px;这不是标题/h1/* 正确用 p 标签 CSS */p classhighlight这不是标题/p3. 保持层级顺序不要跳过应该从h1到h2再到h3。避免跳过层级例如从h1直接跳到h4这会破坏文档结构树影响屏幕阅读器用户。错误示例h1主标题/h1h4跳过了 h2 和 h3/h4!-- 不推荐 --正确示例h1主标题/h1h2二级标题/h2h3三级标题/h34. 标题中不要包含链接视情况而定虽然h1a href...标题/a/h1是合法的但在某些情况下如果标题本身就是链接如文章列表这可能导致屏幕阅读器读出重复信息。通常建议将链接包裹在标题内或者将标题作为链接的一部分具体取决于设计模式。四、标题与 SEO (搜索引擎优化)关键词权重搜索引擎认为h1中的关键词权重最高其次是h2以此类推。结构清晰清晰的标题层级有助于搜索引擎理解页面内容结构从而更好地索引。唯一性确保h1准确描述页面主题且每个页面唯一。五、标题与无障碍访问 (Accessibility)屏幕阅读器导航视障用户通常使用屏幕阅读器通过“标题导航”快速跳转页面不同部分。如果标题层级混乱他们将难以理解页面结构。ARIA 角色标题元素默认具有roleheading和aria-level属性。如果需要动态修改标题级别不推荐可以使用roleheading和aria-level2来模拟h2。divroleheadingaria-level2这是一个模拟的 h2/div六、总结特性说明标签h1到h6主要用途定义文档结构、语义化、SEO、无障碍导航HTML5 特性支持在section,article等节内使用h1作为该节标题最佳实践每页一个h1层级不跳过不用于纯样式CSS 控制字体大小、颜色、间距等应通过 CSS 控制而非标签选择核心口诀一个页面一个 H1层级顺序莫跳过。样式交给 CSS 管结构语义最重要。

相关文章：

HTML5 标题

HTML5 标题 (Headings) 学习笔记 HTML5 中的标题元素用于定义文档的层级结构。它们对于文档结构、**SEO（搜索引擎优化）以及无障碍访问（Accessibility）**至关重要。 一、标题元素概览 HTML 提供了 6 个级别的标题，从最…...

编程日记 2026/4/9 20:38:04

OpenTiny NEXT 从入门到精通·第 6 篇

OpenTiny NEXT 从入门到精通第 6 篇：架构篇——跨框架集成与微前端实战在企业级前端开发中，多技术栈共存、存量系统迁移、微前端集成是绕不开的三大难题。你可能正在维护一个 Vue 2 的老项目，新业务要用 Vue 3 开发，团队中还有 Re…...

编程日记 2026/4/9 20:36:03

RPA入门，看这篇就够了

一、基础定义：RPA究竟是什么？ 机器人流程自动化（Robotic Process Automation，简称RPA）是一种通过软件程序模拟人类在计算机上的操作行为，依据预设规则自动执行重复性、规则性任务的应用软件技术。简单来说&…...

编程日记 2026/4/9 20:36:03

OpenClaw自动化招聘工具：千问3.5-35B-A3B-FP8筛选简历截图并生成面试问题

OpenClaw自动化招聘工具：千问3.5-35B-A3B-FP8筛选简历截图并生成面试问题 1. 为什么需要自动化招聘工具 去年帮朋友公司处理校招季简历时，我深刻体会到人工筛选的痛点：连续三天熬夜翻阅800多份PDF简历，眼睛酸胀不说，…...

编程日记 2026/4/9 20:36:03

call、apply和bind的原理及使用场景

在JavaScript 中，call、apply 和 bind 是 Function 对象自带的三个方法，这三个方法的主要作用是改变函数中的 this 指向，从而可以达到接花移木的效果 原理： 1、call(thisArgs [,args...]) 该方法可以传递一个thisArgs参数和一个…...

编程日记 2026/4/9 20:36:03

Swoole vs RoadRunner vs PHP-PM：异步I/O配置参数对比表（含内存泄漏率、上下文切换耗时、FD复用率实测）

第一章：Swoole vs RoadRunner vs PHP-PM 异步I/O配置全景概览现代PHP高性能服务化方案中，Swoole、RoadRunner 和 PHP-PM 均通过常驻内存与异步I/O机制突破传统PHP-FPM的阻塞模型，但其实现路径、依赖模型与配置范式存在本质差异。三者均不依赖…...

编程日记 2026/4/9 20:36:03

AI Agent 安全养虾实战：从零基础到专家的阿里云全栈进阶指南

开篇 通关前置认知：为什么AI Agent时代，“安全养虾”是从业者的必修课？ 2024-2026年，AI Agent迎来产业级爆发拐点，“养虾”一跃成为横跨数字科技与实体农业两大赛道的全民热词，其背后是两大万亿级市场的核心…...

编程日记 2026/4/9 20:34:03

OPUS编解码器在audio DSP上的移植和应用吨

前言 在使用 kubectl get $KIND -o yaml 查看 k8s 资源时，输出结果中包含大量由集群自动生成的元数据（如 managedFields、resourceVersion、uid 等）。这些信息在实际复用 yaml 清单时需要手动清理，增加了额外的工作量。 使用 kube…...

编程日记 2026/4/9 20:34:03

C语言-------聚合数据类型

一、结构体1.结构体概念与创建结构体（Struct）是在编程中用于组合多个相关数据项的复合数据类型，它允许将不同类型的数据（如整数、字符、数组，甚至其他结构体）聚集在一起，形成一个逻辑上的整体&a…...

编程日记 2026/4/9 20:34:03

一款基于 .NET 开源、跨平台应用程序自动升级组件奈

基础示例：单工作表 Excel 转 TXT 以下是将一个 Excel 文件中的第一个工作表转换为 TXT 的完整步骤： 1. 加载并读取Excel文件 from spire.xls import * from spire.xls.common import * workbook Workbook() workbook.LoadFromFile("示例.xlsx"…...

编程日记 2026/4/9 20:34:03

不用装软件！这款MicroPython浏览器 IDE :让你在手机上也能调试树莓派 Pico亚

1、普通的insert into 如果（主键/唯一建）存在，则会报错 新需求：就算冲突也不报错，用其他处理逻辑 回到顶部 2、基本语法（INSERT INTO ... ON CONFLICT (...) DO (UPDATE SET ...)/(NOTHING)） 语…...

编程日记 2026/4/9 20:34:02

彻底搞懂词元（Token）！小白科普，看完再也不懵

不管是用ChatGPT、豆包这类AI工具，还是刷AI相关的科普内容，你一定绕不开一个词——词元（Token）。 “AI生成内容有词元（Token）限制”“付费按词元（Token）计价”“训练AI要先分词元&a…...

编程日记 2026/4/9 20:32:02

中设智控亮相陕西设备管理工作会议，AI赋能方案引领智能运维新变革

2026年3月25日-27日，2026年陕西省设备管理与装备制造工作会议在陕西省汉中市成功召开。本次会议聚焦装备制造业高质量发展与设备管理智能化升级，吸引了众多行业专家与企业代表参会。广东中设智控科技股份有限公司（以下简称 “中设智控”&…...

编程日记 2026/4/9 20:32:02

食品行业设备管理系统：筑牢合规追溯防线，规范清洁维护记录

食品行业的核心底线是“安全与合规”，而生产设备作为食品加工的核心载体，其清洁度、运行状态、维护记录直接决定食品质量，更是应对SC、HACCP、ISO22000等合规审计的关键。不同于其他行业，食品生产设备（如搅拌罐、灌装机…...

编程日记 2026/4/9 20:32:01

落地即能用！声振温监测部署全流程：设备在线状态监控搭建指南

设备在线状态监控的核心，是通过声振温三大核心数据，捕捉设备隐性故障前兆，实现“早发现、早预警、早处置”，避免非计划停机。而声振温监测的部署，并非简单的“装传感器、连系统”，需遵循科学流程&#xff0…...

编程日记 2026/4/9 20:31:56

ROS2核心概念与架构详解：从零开始机器人操作系统（1）

一、顶级架构一句话总结节点 → DDS通信 → 话题/服务/动作 → 参数 → 工具链 → 机器人应用ROS2（Robot Operating System 2）是新一代开源机器人操作系统，采用DDS作为通信中间件，去掉了ROS1的Master节点，提供更好的实…...

编程日记 2026/4/9 20:29:56

APA第7版参考文献格式：Microsoft Word用户的终极解决方案

APA第7版参考文献格式：Microsoft Word用户的终极解决方案 【免费下载链接】APA-7th-Edition Microsoft Word XSD for generating APA 7th edition references 项目地址: https://gitcode.com/gh_mirrors/ap/APA-7th-Edition 你是否曾在深夜为论文参考文献格式…...

编程日记 2026/4/9 20:29:56

3分钟搞定APA第7版：微软Word参考文献格式终极配置指南

3分钟搞定APA第7版：微软Word参考文献格式终极配置指南 【免费下载链接】APA-7th-Edition Microsoft Word XSD for generating APA 7th edition references 项目地址: https://gitcode.com/gh_mirrors/ap/APA-7th-Edition 你是否在为学术论文的参考文献格式而…...

编程日记 2026/4/9 20:29:56

HagiCode Soul 平台技术解析：从需求萌发到独立平台的演进之路烤

1 安装与初始化 # 全局安装 OpenSpec npm install -g fission-ai/openspeclatest # 在项目目录下初始化 cd /path/to/your-project openspec init 初始化时，OpenSpec 会提示你选择使用的 AI 工具（Claude Code、Cursor、Trae、Qoder 等）。 3 O…...

编程日记 2026/4/9 20:29:56

进程与线程的核心区别：一篇看懂，告别混淆

在编程学习中，尤其是接触 C 多线程、操作系统相关知识时，进程（Process）和线程（Thread）是两个绕不开的概念。很多新手会把二者混为一谈，甚至像之前我被问到的那样，疑惑“进程是不是线…...

编程日记 2026/4/9 20:29:55

C语言逆向学习基础课 第8课 函数原型与可变参数使用误区

文章目录C语言实战高频深度错误解析一、第8课 函数原型与可变参数使用误区1.1 课程目标1.2 核心知识点讲解1.2.1 函数原型的作用与高频陷阱1.2.2 可变参数函数的正确使用（重点误区）1.3 实战示例（综合错误排查）1.4 课后作业&#x…...

编程日记 2026/4/9 20:27:55

Java面试题知识图谱构建：利用PyTorch 2.8图神经网络（GNN）技术

Java面试题知识图谱构建：利用PyTorch 2.8图神经网络（GNN）技术 1. 引言：Java面试题的痛点与解决方案 对于准备Java面试的开发者来说，最大的挑战不是找不到学习资料，而是面对海量分散的知识点无从下手。JVM…...

编程日记 2026/4/9 20:27:55

Qwen3.5-9B-AWQ-4bit VMware虚拟机安装Ubuntu及GPU环境配置

Qwen3.5-9B-AWQ-4bit VMware虚拟机安装Ubuntu及GPU环境配置 1. 准备工作 在开始之前，我们需要确认几个关键事项： 主机硬件配置：确保你的物理机至少16GB内存（推荐32GB），并配备NVIDIA GPU（支持…...

编程日记 2026/4/9 20:27:55

LFM2.5-1.2B-Thinking-GGUF效果对比：Thinking中间过程vs后处理终版答案差异

LFM2.5-1.2B-Thinking-GGUF效果对比：Thinking中间过程vs后处理终版答案差异 1. 模型概述 LFM2.5-1.2B-Thinking-GGUF是Liquid AI推出的轻量级文本生成模型，特别适合在资源受限的环境中快速部署和使用。该模型采用GGUF格式，通过内置的llama.…...

编程日记 2026/4/9 20:27:55

Ostrakon-VL-8B多实例负载均衡部署：应对高并发访问的策略

Ostrakon-VL-8B多实例负载均衡部署：应对高并发访问的策略 1. 引言 你有没有遇到过这种情况？自己辛苦部署好的AI模型，平时用着挺顺，可一旦用户量突然上来，或者搞个线上活动，服务就卡得不行，甚至…...

编程日记 2026/4/9 20:27:55

G-Helper：华硕笔记本性能调校的终极解决方案

G-Helper：华硕笔记本性能调校的终极解决方案 【免费下载链接】g-helper Lightweight, open-source control tool for ASUS laptops and ROG Ally. Manage performance modes, fans, GPU, battery, and RGB lighting across Zephyrus, Flow, TUF, Strix, Scar, and o…...

编程日记 2026/4/9 20:25:55

大厂飞手技术栈拆解：从CAAC执照到无人机“机长”的技术成长路径

一、核心事件：大厂飞手成为“技术蓝领”新标杆2026年，低空经济正式进入规模化运营阶段。美团无人机单日配送突破10万单，京东物流无人机覆盖全国超2000个村镇。根据猎聘大数据研究院发布的《2026中国低空经济人才发展报告》，低空经…...

编程日记 2026/4/9 20:25:55

记一次综合型流量分析 | 添柴不加火游

核心摘要：这篇文章能帮你 ?? 1. 彻底搞懂条件分支与循环的适用场景，告别选择困难。 ?? 2. 掌握遍历DOM集合修改属性的标准姿势与性能窍门。 ?? 3. 识别流程控制中的常见“坑”，并学会如何优雅地绕过去。 ?? 主要内容脉络 ?? 一、痛…...

编程日记 2026/4/9 20:25:54

重构联盟营销合作伙伴 ROI：除了销售额，这 3 个指标才是增长晴雨表

在营销领域，你对各种指标早已习以为常：它们决定预算投放方向、验证活动成效、帮助你做更聪明的增长决策。但当这些理念切换到“合作伙伴营销”（Partner Marketing）或“渠道增长计划”时，许多团队却只盯着一个指标&…...

编程日记 2026/4/9 20:25:54

.NET源码生成器基于partial范式开发和nuget打包嚷

1 安装与初始化 # 全局安装 OpenSpec npm install -g fission-ai/openspeclatest # 在项目目录下初始化 cd /path/to/your-project openspec init 初始化时，OpenSpec 会提示你选择使用的 AI 工具（Claude Code、Cursor、Trae、Qoder 等）。 3 O…...

编程日记 2026/4/9 20:25:49