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

【HTML5】语义化标签记录

news 2025/12/27 14:06:20

前言

防止一个页面中全部都是div，或者ul li，在html5推出了很多语义化标签

提示：以下是本篇文章正文内容，下面案例可供参考

常用语义化案例

一般我用的多的是header，main，footer
这些标签不难理解，你只要理解为，他们都是div的性质就好了，只为了在页面上区分模块内容，让浏览器理解，你这一段div（footer），是底部信息。

你这段div（header）是头部栏内容，这样理解就好很多了。

他们本身没有任何附加样式，跟div没有任何区别，所以在开发中，遇到相对应的情况，用对应的语义化标签。

<!DOCTYPE html>
<html>
<head><title>HTML5语义化标签示例</title>
</head>
<body><header><h1>网页标题</h1><nav><!-- 导航链接 --></nav></header><main><section><h2>第一部分</h2><p>这是第一部分的内容...</p><time>2023年9月5日16:22:51</time></section><section><h2>第二部分</h2><article><h3>重要文章</h3><p>这是一篇重要的文章，使用了&lt;article&gt;标签包裹。</p><footer>作者：John Doe</footer></article></section></main><aside><h2>侧边栏</h2><!-- 侧边栏内容 --></aside><footer><p>&copy; 2023 网页作者</p></footer><section><h2>示例标记</h2><p>在这个段落中，<mark>这里的文字被标记为重要</mark>，以突出显示。</p></section><figure><img src="example.jpg" alt="示例图片"><figcaption>这是示例图片的说明</figcaption></figure><section><h2>可折叠内容</h2><details><summary>点击展开/折叠内容</summary><p>这是可折叠的内容...</p></details></section>
</body>
</html>

通过一些帖子的学习，发现了很多没用过的语义化标签，案例如下

1、b和strong加粗

<!-- 非语义化 -->
<p>This is <b>bold</b> text.</p><!-- 语义化 -->
<p>This is <strong>important</strong> text.</p>

2、i与em斜体

<!-- 非语义化 -->
<p>This is <i>italic</i> text.</p><!-- 语义化 -->
<p>This is <em>emphasized</em> text.</p>

3、u和ins下划线

<!-- 非语义化 -->
<p>This is <u>underlined</u> text.</p><!-- 语义化 -->
<p>This is <ins>underlined</ins> text.</p>

4、s和del删除线

<!-- 非语义化 -->
<p>This is <s>deleted</s> text.</p><!-- 语义化 -->
<p>This is <del>deleted</del> text.</p>

另外一些案例

5、mark标签

<p>这是一段包含<mark>重要信息</mark>的文本。</p>

在这里插入图片描述

6、details 和 summary

<details><summary>点击展开/折叠内容</summary><p>这是可折叠的内容...</p>
</details>

在这里插入图片描述

7、figure 和 figcaption

figure用于包含与文档内容相关的媒体元素，figcaption用于为媒体元素添加标题。例如，一张图片可以用这两个标签包裹：

  <figure><img src="example.jpg" alt="示例图片"><figcaption>这是示例图片的说明</figcaption></figure>

样式就是图片在上，文字在下，不贴图了，基本不会用到

相关文章：

【HTML5】语义化标签记录

前言 防止一个页面中全部都是div&#xff0c;或者ul li&#xff0c;在html5推出了很多语义化标签 提示&#xff1a;以下是本篇文章正文内容&#xff0c;下面案例可供参考 常用语义化案例 一般我用的多的是header&#xff0c;main&#xff0c;footer 这些标签不难理解&#x…...

编程日记 2023/10/11 19:03:36

数据结构———— 堆

（一）基础补充 满二叉树是每一层节点都放满的二叉树。 完全二叉树是只有最后一层节点右边不放满的二叉树。 满二叉树（Perfect Binary Tree） 如果二叉树中除了叶子结点，每个结点的度都为 2，则此二叉树称为满二叉树。另一种说法：一个深度为k(>=-1)且有2^(k+1) - 1个结…...

编程日记 2023/10/11 19:01:34

如何选择专业的游戏开发公司？

如果你想找一家专业的游戏开发公司&#xff0c;你可以采取以下步骤来寻找合适的合作伙伴&#xff1a; 定义项目需求&#xff1a;首先&#xff0c;明确你的游戏开发项目的需求和目标。确定你需要什么类型的游戏&#xff08;移动游戏、PC游戏、主机游戏等&#xff09;、游戏类型…...

编程日记 2023/10/11 19:00:32

Unity基础课程之物理引擎3-碰撞检测案例-吃金币并加分显在UI文本框上

业务逻辑&#x1f4bc;&#xff1a; 这个脚本的主要功能是用于显示和更新主角的得分。在游戏中&#xff0c;玩家需要吃到金币来增加分数&#xff0c;而这个脚本就是负责将得分的变化实时显示在屏幕上的。 程序逻辑&#x1f4bb;&#xff1a; 1️⃣首先&#xff0c;在脚本的开始…...

编程日记 2023/10/11 18:59:31

DAPLink V2 STLink V2 JLink V9.7 串口四合一仿真调试下载器

作者 风陵&#xff1a; github:https://github.com/ForlingTec CSDN:https://blog.csdn.net/weixin_42518229 化作尘&#xff1a; https://blog.csdn.net/mbs520 一、产品介绍 该产品是一款基于USB2.0接口支持多个公司及多种内核的仿真器/编程器&#xff0c;板载了USB H…...

编程日记 2023/10/11 18:58:30

使用PyTorch处理多维特征输入的完美指南

&#x1f497;&#x1f497;&#x1f497;欢迎来到我的博客&#xff0c;你将找到有关如何使用技术解决问题的文章&#xff0c;也会找到某个技术的学习路线。无论你是何种职业&#xff0c;我都希望我的博客对你有所帮助。最后不要忘记订阅我的博客以获取最新文章&#xff0c;也欢…...

编程日记 2023/10/11 18:57:29

萝卜刀玩具上架亚马逊CPC认证测试标准

含铅或含铅涂料儿童产品的要求 分阶段限制儿童产品所有部件的铅含量&#xff0c;要求在3年内将产品任何可接触部件的铅含量限制从不超过重量的600ppm&#xff08;0.06%&#xff09;降至不超过重量的100ppm&#xff08;0.01%&#xff09;。 铅含量限值&#xff08;总铅含量占重…...

编程日记 2023/10/11 18:56:28

阶段六-Day03-MyBatis

一、框架介绍 1. 框架的作用 将许多项目封装起来,形成了框架 2. 框架的优缺点 1. 优点 1.1 更好用 框架都是对Java原生内容进行的封装&#xff0c;对于企业级项目开发来说&#xff0c;使用框架比使用原生Java更好用&#xff0c;写起来更简单。 1.2 更强大 框架封装过程…...

编程日记 2023/10/11 18:55:27

探索RPA流程自动化在不同行业的应用案例

随着数字化的推进&#xff0c;企业建设了大量的业务系统&#xff0c;跨系统的业务流程越发复杂&#xff0c;业务孤岛、 流程孤岛、数据孤岛也随之出现&#xff0c;产生了大量需要人工执行的重复性系统操作流程。而使用RPA能将员工从大量的、重复的、高耗时的工作中解放出来&…...

编程日记 2023/10/11 18:54:26

解决gpedit.msc命令无法打开的问题

【win11家庭版】解决gpedit.msc命令无法打开的问题 本地组策略编辑器 echo offpushd "%~dp0"dir /b %systemroot%\Windows\servicing\Packages\Microsoft-Windows-GroupPolicy-ClientExtensions-Package~3*.mum >gp.txtdir /b %systemroot%\servicing\Packages\…...

编程日记 2023/10/11 18:53:25

一大突破！清华大学研制出首颗忆阻器存算一体芯片

这几天清华大学又火出圈了。但这次并不是因为招生抢人和饭堂&#xff0c;而是清华大学的芯片研发团队研制出全球首颗全系统集成的存算一体芯片。这是我国、乃至全世界对半导体行业的又一重大突破。 这个芯片由清华大学集成电路学院教授吴华强副教授高滨团队基于存算一体计算范…...

编程日记 2023/10/11 18:51:23

JUC的线程池架构

&#x1f648;作者简介&#xff1a;练习时长两年半的Java up主 &#x1f649;个人主页&#xff1a;程序员老茶 &#x1f64a; ps:点赞&#x1f44d;是免费的&#xff0c;却可以让写博客的作者开心好久好久&#x1f60e; &#x1f4da;系列专栏&#xff1a;Java全栈&#xff0c;…...

编程日记 2023/10/11 18:50:23

PostgreSQL limit 语法

PostgreSQL limit 语法 LIMIT 是 PostgreSQL 中用于限制查询结果数量的关键字。其语法如下&#xff1a; SELECT column1, column2, ... FROM table_name LIMIT number_of_rows;其中&#xff0c;SELECT 语句用于指定要查询的列和数据表&#xff0c;LIMIT 用于指定查询结果的行…...

编程日记 2023/10/11 18:49:20

CUDA C编程权威指南：2.1-CUDA编程模型

本文主要通过例子介绍了CUDA异构编程模型&#xff0c;需要说明的是Grid、Block和Thread都是逻辑结构&#xff0c;不是物理结构。实现例子代码参考文献[2]&#xff0c;只需要把相应章节对应的CMakeLists.txt文件拷贝到CMake项目根目录下面即可运行。 1.Grid、Block和Thread间的…...

编程日记 2023/10/11 18:48:19

两条记录合并成一条记录

两条记录合并成一条记录 两条记录 val4,type_idlevel 和 val6,type_idtypeId 合并成一条记录 level4,typeId6 可以使用 条件聚合语句 CASE WHEN … 和 MAX 函数来实现。假设有以下 my_table 表&#xff1a; --------------------- | id | val | type_id | --------------…...

编程日记 2023/10/11 18:47:18

vue3 + typescript + vite + naive ui + tailwindcss + jsx 仿苹果桌面系统

基于 vue3.x typescript vite naive ui tailwindcss jsx vue-router pinia&#xff0c;项目使用 tsx 作为模版输出&#xff0c;全程没有使用vue提供的SFC&#xff0c; 仿macos桌面前端项目&#xff0c;开源免费模版&#xff0c;希望减少工作量和学习新技术&#xff0c;希…...

编程日记 2023/10/11 18:46:17

揭秘，用软件一秒识别纸质表格数字，找到你想要的一串数字

要将纸质表格的数字快速用软件识别并找出特定的一串数字&#xff0c;以下是三种常用的方案&#xff1a; 方案一&#xff1a;使用OCR软件识别和搜索功能 1. 扫描纸质表格并保存为图像或PDF格式。 2. 使用OCR&#xff08;光学字符识别&#xff09;软件&#xff0c;如金鸣表格文字…...

编程日记 2023/10/11 18:45:15

解析图片文件格式

图片文件幻数 关于JPEG格式 二进制形式打开文件&#xff0c;文件开始字节为FF D8&#xff0c;文件结束两字节为FF D9 JPEG 文件有两种不同的元数据格式&#xff1a;JFIF 和 EXIF。 JFIF 以 ff d8 ff e0 开头&#xff0c;EXIF 以 ff d8 ff e1 开头。 代码示例 private static…...

编程日记 2023/10/11 18:44:14

新的“HTTP/2 快速重置”零日攻击打破了 DDoS 记录

自 8 月份以来&#xff0c;一种名为“HTTP/2 快速重置”的新 DDoS&#xff08;分布式拒绝服务&#xff09;技术已被作为零日漏洞积极利用&#xff0c;其规模打破了之前的所有记录。 Amazon Web Services、Cloudflare 和 Google 今天联合发布了有关零日技术的消息&#xff0c;他…...

编程日记 2023/10/11 18:43:12

现代化战机之路：美国空军U-2侦察机基于Jenkins和k8s的CI/CD架构演进

▲ 点击上方"DevOps和k8s全栈技术"关注公众 华为北京研究所Q27大楼 随着技术的不断进步&#xff0c;军事领域也在积极采纳现代化工具来提高战备水平和效率。美国空军的U-2侦察机项目是一个鲜明的例子&#xff0c;它成功地借助Jenkins和Kubernetes&#xff08;k8s&…...

编程日记 2023/10/11 18:42:11

SkyWalking 10.2.0 SWCK 配置过程

SkyWalking 10.2.0 & SWCK 配置过程 skywalking oap-server & ui 使用Docker安装在K8S集群以外&#xff0c;K8S集群中的微服务使用initContainer按命名空间将skywalking-java-agent注入到业务容器中。 SWCK有整套的解决方案&#xff0c;全安装在K8S群集中。 具体可参…...

编程新知 2025/8/23 5:51:08

MFC内存泄露

1、泄露代码示例 void X::SetApplicationBtn() {CMFCRibbonApplicationButton* pBtn GetApplicationButton();// 获取 Ribbon Bar 指针// 创建自定义按钮CCustomRibbonAppButton* pCustomButton new CCustomRibbonAppButton();pCustomButton->SetImage(IDB_BITMAP_Jdp26)…...

编程新知 2025/12/19 1:30:36

Debian系统简介

目录 Debian系统介绍 Debian版本介绍 Debian软件源介绍 软件包管理工具dpkg dpkg核心指令详解 安装软件包 卸载软件包 查询软件包状态 验证软件包完整性 手动处理依赖关系 dpkg vs apt Debian系统介绍 Debian 和 Ubuntu 都是基于 Debian内核 的 Linux 发行版&#xff…...

编程新知 2025/12/24 23:13:19

【项目实战】通过多模态+LangGraph实现PPT生成助手

PPT自动生成系统 基于LangGraph的PPT自动生成系统&#xff0c;可以将Markdown文档自动转换为PPT演示文稿。 功能特点 Markdown解析&#xff1a;自动解析Markdown文档结构PPT模板分析&#xff1a;分析PPT模板的布局和风格智能布局决策&#xff1a;匹配内容与合适的PPT布局自动…...

编程新知 2025/12/25 11:17:39

Springcloud：Eureka 高可用集群搭建实战（服务注册与发现的底层原理与避坑指南）

引言&#xff1a;为什么 Eureka 依然是存量系统的核心&#xff1f; 尽管 Nacos 等新注册中心崛起&#xff0c;但金融、电力等保守行业仍有大量系统运行在 Eureka 上。理解其高可用设计与自我保护机制&#xff0c;是保障分布式系统稳定的必修课。本文将手把手带你搭建生产级 Eur…...

编程新知 2025/12/23 23:07:51

NLP学习路线图（二十三）：长短期记忆网络（LSTM）

在自然语言处理（NLP）领域，我们时刻面临着处理序列数据的核心挑战。无论是理解句子的结构、分析文本的情感，还是实现语言的翻译，都需要模型能够捕捉词语之间依时序产生的复杂依赖关系。传统的神经网络结构在处理这种序列依赖时显得力不从心，而循环神经网络（RNN） 曾被视为…...

编程新知 2025/12/11 21:25:46

QT： `long long` 类型转换为 `QString` 2025.6.5

在 Qt 中&#xff0c;将 long long 类型转换为 QString 可以通过以下两种常用方法实现&#xff1a; 方法 1&#xff1a;使用 QString::number() 直接调用 QString 的静态方法 number()&#xff0c;将数值转换为字符串&#xff1a; long long value 1234567890123456789LL; …...

编程新知 2025/12/14 4:20:34

C++ Visual Studio 2017厂商给的源码没有.sln文件 易兆微芯片下载工具加开机动画下载。

1.先用Visual Studio 2017打开Yichip YC31xx loader.vcxproj&#xff0c;再用Visual Studio 2022打开。再保侟就有.sln文件了。 易兆微芯片下载工具加开机动画下载 ExtraDownloadFile1Info.\logo.bin|0|0|10D2000|0 MFC应用兼容CMD 在BOOL CYichipYC31xxloaderDlg::OnIni…...

编程新知 2025/12/22 9:06:24

C# 表达式和运算符(求值顺序)

求值顺序 表达式可以由许多嵌套的子表达式构成。子表达式的求值顺序可以使表达式的最终值发生 变化。 例如&#xff0c;已知表达式3*52&#xff0c;依照子表达式的求值顺序&#xff0c;有两种可能的结果&#xff0c;如图9-3所示。 如果乘法先执行&#xff0c;结果是17。如果5…...

编程新知 2025/12/13 23:39:33

SQL Server 触发器调用存储过程实现发送 HTTP 请求

文章目录 需求分析解决第 1 步：前置条件，启用 OLE 自动化方式 1：使用 SQL 实现启用 OLE 自动化方式 2：Sql Server 2005启动OLE自动化方式 3：Sql Server 2008启动OLE自动化第 2 步：创建存储过程第 3 步：创建触发器扩展 - 如何调试？第 1 步：登录 SQL Server 2008第 2 步…...

编程新知 2025/9/11 6:56:11