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

【HTML5】语义化标签记录

news 2025/12/27 15:21:25

前言

防止一个页面中全部都是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

Cursor实现用excel数据填充word模版的方法

cursor主页&#xff1a;https://www.cursor.com/ 任务目标&#xff1a;把excel格式的数据里的单元格&#xff0c;按照某一个固定模版填充到word中 文章目录 注意事项逐步生成程序1. 确定格式2. 调试程序 注意事项 直接给一个excel文件和最终呈现的word文件的示例&#xff0c;…...

编程新知 2025/8/23 5:46:26

PPT|230页| 制造集团企业供应链端到端的数字化解决方案：从需求到结算的全链路业务闭环构建

制造业采购供应链管理是企业运营的核心环节&#xff0c;供应链协同管理在供应链上下游企业之间建立紧密的合作关系&#xff0c;通过信息共享、资源整合、业务协同等方式&#xff0c;实现供应链的全面管理和优化&#xff0c;提高供应链的效率和透明度&#xff0c;降低供应链的成…...

编程新知 2025/12/22 8:47:09

高频面试之3Zookeeper

高频面试之3Zookeeper 文章目录 高频面试之3Zookeeper3.1 常用命令3.2 选举机制3.3 Zookeeper符合法则中哪两个&#xff1f;3.4 Zookeeper脑裂3.5 Zookeeper用来干嘛了 3.1 常用命令 ls、get、create、delete、deleteall3.2 选举机制 半数机制&#xff08;过半机制&#xff0…...

编程新知 2025/12/19 10:26:07

相机从app启动流程

一、流程框架图 二、具体流程分析 1、得到cameralist和对应的静态信息 目录如下： 重点代码分析： 启动相机前，先要通过getCameraIdList获取camera的个数以及id，然后可以通过getCameraCharacteristics获取对应id camera的capabilities（静态信息）进行一些openCamera前的…...

编程新知 2025/12/19 0:56:54

新能源汽车智慧充电桩管理方案：新能源充电桩散热问题及消防安全监管方案

随着新能源汽车的快速普及&#xff0c;充电桩作为核心配套设施&#xff0c;其安全性与可靠性备受关注。然而&#xff0c;在高温、高负荷运行环境下&#xff0c;充电桩的散热问题与消防安全隐患日益凸显&#xff0c;成为制约行业发展的关键瓶颈。 如何通过智慧化管理手段优化散…...

编程新知 2025/12/23 17:55:20

均衡后的SNRSINR

本文主要摘自参考文献中的前两篇&#xff0c;相关文献中经常会出现MIMO检测后的SINR不过一直没有找到相关数学推到过程&#xff0c;其中文献[1]中给出了相关原理在此仅做记录。 1. 系统模型 复信道模型 n t n_t nt​ 根发送天线&#xff0c; n r n_r nr​ 根接收天线的 MIMO 系…...

编程新知 2025/12/9 19:30:18

Fabric V2.5 通用溯源系统——增加图片上传与下载功能

fabric-trace项目在发布一年后，部署量已突破1000次，为支持更多场景，现新增支持图片信息上链，本文对图片上传、下载功能代码进行梳理，包含智能合约、后端、前端部分。 一、智能合约修改 为了增加图片信息上链溯源，需要对底层数据结构进行修改，在此对智能合约中的农产品数…...

编程新知 2025/9/27 12:03:43

安全突围：重塑内生安全体系：齐向东在2025年BCS大会的演讲

文章目录 前言第一部分&#xff1a;体系力量是突围之钥第一重困境是体系思想落地不畅。第二重困境是大小体系融合瓶颈。第三重困境是“小体系”运营梗阻。 第二部分&#xff1a;体系矛盾是突围之障一是数据孤岛的障碍。二是投入不足的障碍。三是新旧兼容难的障碍。 第三部分&am…...

编程新知 2025/12/17 19:15:03

LCTF液晶可调谐滤波器在多光谱相机捕捉无人机目标检测中的作用

中达瑞和自2005年成立以来&#xff0c;一直在光谱成像领域深度钻研和发展&#xff0c;始终致力于研发高性能、高可靠性的光谱成像相机&#xff0c;为科研院校提供更优的产品和服务。在《低空背景下无人机目标的光谱特征研究及目标检测应用》这篇论文中提到中达瑞和 LCTF 作为多…...

编程新知 2025/11/1 12:32:15

Django RBAC项目后端实战 - 03 DRF权限控制实现

项目背景 在上一篇文章中&#xff0c;我们完成了JWT认证系统的集成。本篇文章将实现基于Redis的RBAC权限控制系统&#xff0c;为系统提供细粒度的权限控制。 开发目标 实现基于Redis的权限缓存机制开发DRF权限控制类实现权限管理API配置权限白名单 前置配置 在开始开发权限…...

编程新知 2025/10/1 4:57:11