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

【HTML5】语义化标签记录

news 2025/7/9 0:02:09

前言

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

CentOS下的分布式内存计算Spark环境部署

一、Spark 核心架构与应用场景 1.1 分布式计算引擎的核心优势 Spark 是基于内存的分布式计算框架&#xff0c;相比 MapReduce 具有以下核心优势&#xff1a; 内存计算&#xff1a;数据可常驻内存&#xff0c;迭代计算性能提升 10-100 倍&#xff08;文档段落&#xff1a;3-79…...

编程新知 2025/7/5 15:17:53

376. Wiggle Subsequence

376. Wiggle Subsequence 代码 class Solution { public:int wiggleMaxLength(vector<int>& nums) {int n nums.size();int res 1;int prediff 0;int curdiff 0;for(int i 0;i < n-1;i){curdiff nums[i1] - nums[i];if( (prediff > 0 && curdif…...

编程新知 2025/7/6 18:51:28

苍穹外卖--缓存菜品

1.问题说明 用户端小程序展示的菜品数据都是通过查询数据库获得&#xff0c;如果用户端访问量比较大&#xff0c;数据库访问压力随之增大 2.实现思路 通过Redis来缓存菜品数据&#xff0c;减少数据库查询操作。 缓存逻辑分析&#xff1a; ①每个分类下的菜品保持一份缓存数据…...

编程新知 2025/7/8 6:05:27

【RockeMQ】第2节｜RocketMQ快速实战以及核⼼概念详解（二）

升级Dledger高可用集群 一、主从架构的不足与Dledger的定位 主从架构缺陷 数据备份依赖Slave节点&#xff0c;但无自动故障转移能力&#xff0c;Master宕机后需人工切换&#xff0c;期间消息可能无法读取。Slave仅存储数据&#xff0c;无法主动升级为Master响应请求&#xff…...

编程新知 2025/6/18 22:53:06

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

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

编程新知 2025/7/7 19:02:49

华为云Flexus+DeepSeek征文｜DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建

华为云FlexusDeepSeek征文&#xff5c;DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建 前言 如今大模型其性能出色&#xff0c;华为云 ModelArts Studio_MaaS大模型即服务平台华为云内置了大模型&#xff0c;能助力我们轻松驾驭 DeepSeek-V3/R1&#xff0c;本文中将分享如何…...

编程新知 2025/7/8 0:45:29

代理篇12|深入理解 Vite中的Proxy接口代理配置

在前端开发中，常常会遇到 跨域请求接口 的情况。为了解决这个问题，Vite 和 Webpack 都提供了 proxy 代理功能，用于将本地开发请求转发到后端服务器。 什么是代理（proxy）？ 代理是在开发过程中，前端项目通过开发服务器，将指定的请求“转发”到真实的后端服务器，从而绕…...

编程新知 2025/6/17 5:18:28

Kubernetes 网络模型深度解析：Pod IP 与 Service 的负载均衡机制，Service到底是什么？

Pod IP 的本质与特性 Pod IP 的定位 纯端点地址&#xff1a;Pod IP 是分配给 Pod 网络命名空间的真实 IP 地址&#xff08;如 10.244.1.2&#xff09;无特殊名称&#xff1a;在 Kubernetes 中&#xff0c;它通常被称为 “Pod IP” 或 “容器 IP”生命周期&#xff1a;与 Pod …...

编程新知 2025/7/7 15:20:50

vue3 daterange正则踩坑

<el-form-item label"空置时间" prop"vacantTime"> <el-date-picker v-model"form.vacantTime" type"daterange" start-placeholder"开始日期" end-placeholder"结束日期" clearable :editable"fal…...

编程新知 2025/7/7 0:35:57

32单片机——基本定时器

STM32F103有众多的定时器&#xff0c;其中包括2个基本定时器&#xff08;TIM6和TIM7&#xff09;、4个通用定时器&#xff08;TIM2~TIM5&#xff09;、2个高级控制定时器&#xff08;TIM1和TIM8&#xff09;&#xff0c;这些定时器彼此完全独立&#xff0c;不共享任何资源 1、定…...

编程新知 2025/7/7 21:36:41