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

大白话html语义化标签优势与应用场景

news 2025/7/5 6:26:05

大白话html语义化标签优势与应用场景

大白话解释

语义化标签就是那些名字能让人一看就大概知道它是用来做什么的标签。以前我们经常用<div>来做各种布局，但是<div>本身没有什么实际的含义，就像一个没有名字的盒子。而语义化标签就像是有名字的盒子，比如<header>就知道是用来放网页头部内容的，<footer>是放网页底部内容的。

优势
  • 代码可读性强：就像给每个盒子都贴上了标签，开发人员一看代码就知道每个部分是做什么的，方便后续的开发和维护。
  • 有利于搜索引擎优化（SEO）：搜索引擎能更好地理解网页的结构和内容，知道哪些是重要的信息，从而提高网页在搜索结果中的排名。
  • 方便屏幕阅读器等辅助设备理解：对于视力有障碍的用户，屏幕阅读器可以根据语义化标签更准确地解读网页内容。
应用场景
  • <header>：用于网页的头部，通常包含网站的 logo、导航栏等。
  • <nav>：专门用来放导航链接的。
  • <main>：放网页的主要内容。
  • <article>：用于独立的、可以自成一体的内容，比如一篇文章。
  • <section>：表示文档中的一个章节，比如文章的不同部分。
  • <aside>：用于和主要内容相关的侧边栏等。
  • <footer>：用于网页的底部，通常包含版权信息、联系方式等。
代码示例
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>语义化标签示例</title>
</head><body><!-- 网页头部，包含网站标题和导航栏 --><header><h1>我的网站</h1><!-- 导航栏 --><nav><ul><li><a href="#">首页</a></li><li><a href="#">关于我们</a></li><li><a href="#">联系我们</a></li></ul></nav></header><!-- 网页主要内容 --><main><!-- 一篇文章 --><article><h2>文章标题</h2><p>这是文章的内容。这是文章的内容。这是文章的内容。</p></article><!-- 另一个章节 --><section><h2>章节标题</h2><p>这是章节的内容。这是章节的内容。这是章节的内容。</p></section></main><!-- 侧边栏 --><aside><h3>相关链接</h3><ul><li><a href="#">链接1</a></li><li><a href="#">链接2</a></li></ul></aside><!-- 网页底部，包含版权信息 --><footer><p>&copy; 2025 我的网站 版权所有</p></footer>
</body></html>

通过上面的代码可以看到，使用语义化标签后，网页的结构一目了然，每个部分的作用都很清晰。

相关文章：

大白话html语义化标签优势与应用场景

大白话html语义化标签优势与应用场景 大白话解释 语义化标签就是那些名字能让人一看就大概知道它是用来做什么的标签。以前我们经常用<div>来做各种布局&#xff0c;但是<div>本身没有什么实际的含义&#xff0c;就像一个没有名字的盒子。而语义化标签就像是有名…...

编程日记 2025/3/8 6:36:03

恶劣天候三维目标检测论文列表整理

恶劣天候三维目标检测论文列表 图摘自Kradar &#x1f3e0; 介绍 Hi&#xff0c;这是有关恶劣天气下三维目标检测的论文列表。主要是来源于近3年研究过程中认为有意义的文章。希望能为新入门的研究者提供一些帮助。 可能比较简陋&#xff0c;存在一定的遗漏&#xff0c;欢迎…...

编程日记 2025/3/8 6:35:02

conda的环境起的jupyter用不了已经安装的包如何解决

当你在使用Conda环境中的Jupyter Notebook时遇到无法读取某些库或模块的问题&#xff0c;通常是由以下几个原因引起的&#xff1a; 环境未激活&#xff1a;确保你已经在正确的Conda环境中激活了Jupyter Notebook。 库未安装&#xff1a;可能你需要的库没有在当前的Conda环境中…...

编程日记 2025/3/8 6:34:01

蓝桥杯题型

蓝桥杯题型分类 二分 123 传送门 1. 小区间的构成 假设数列的构成是如下形式&#xff1a; 第 1 个区间包含 1 个元素&#xff08;1&#xff09;。第 2 个区间包含 2 个元素&#xff08;1 2&#xff09;。第 3 个区间包含 3 个元素&#xff08;1 2 3&#xff09;。第 4 个区…...

编程日记 2025/3/8 6:33:00

STM32-I2C通信协议

一&#xff1a;I2C通信协议 就是在串口通信上满足四个要求 要求1&#xff1a;删掉一根通信线&#xff0c;防止资源浪费&#xff0c;只能在同一根线上进行发送和接收要求2&#xff1a;需要一个应答机制&#xff0c;没发送一个字节都有一次应答要求3&#xff1a;一根线上能同时…...

编程日记 2025/3/8 6:31:59

taosd 写入与查询场景下压缩解压及加密解密的 CPU 占用分析

在当今大数据时代&#xff0c;时序数据库的应用越来越广泛&#xff0c;尤其是在物联网、工业监控、金融分析等领域。TDengine 作为一款高性能的时序数据库&#xff0c;凭借独特的存储架构和高效的压缩算法&#xff0c;在存储和查询效率上表现出色。然而&#xff0c;随着数据规模…...

编程日记 2025/3/8 6:30:58

uniapp微信小程序vue3自定义tabbar

在App.vue隐藏原生tabbar&#xff0c;也可以在pages.json中配置 二选一就好了 创建 CustomTabBar 公共组件 <template><view class"custom-tab-bar" :style"{paddingBottom: safeAreaHeight px}"><view class"tab-bar-item" :…...

编程日记 2025/3/8 6:29:56

BUUCTF——[GYCTF2020]FlaskApp1 SSTI模板注入/PIN学习

目录 一、网页功能探索 二、SSTI注入 三、方法一 四、方法二 使用PIN码 &#xff08;1&#xff09;服务器运行flask登录所需的用户名 &#xff08;2&#xff09;modename &#xff08;3&#xff09;flask库下app.py的绝对路径 &#xff08;4&#xff09;当前网络的mac地…...

编程日记 2025/3/8 6:27:54

如何用Kimi生成PPT？秒出PPT更高效！

做PPT是不是总是让你头疼&#xff1f;&#x1f629; 快速制作出专业的PPT&#xff0c;今天我们要推荐两款超级好用的AI工具——Kimi 和 秒出PPT&#xff01;我们来看看哪一款更适合你吧&#xff01;&#x1f680; &#x1f947; Kimi&#xff1a;让PPT制作更轻松 Kimi的生成效…...

编程日记 2025/3/8 6:25:52

数据结构（回顾）

数据结构&#xff08;回顾&#xff09; 回顾 不同点顺序表链表存储空间上物理上一定连续逻辑上连续&#xff0c;物理上不一定连续随机访问支持&#xff0c;时间复杂度O(1)不支持&#xff0c;时间复杂度O(N)任意位置插入或者删除元素可能需要挪动元素&#xff0c;效率低&#…...

编程日记 2025/3/8 6:23:50

全国产！瑞芯微3562Mini（2GHz四核A53 NPU）工业开发板规格书

评估板简介 创龙科技 TL3562-MiniEVM 是一款基于瑞芯微 RK3562J/RK3562 处理器设计的四核 AR M Cortex-A53 单核 ARM Cortex-M0 国产工业评估板&#xff0c;主频高达 2.0GHz。评估板由核心板和评估底板组成&#xff0c;核心板 CPU、ROM、RAM、电源、晶振等所有元器件均采用国…...

编程日记 2025/3/8 6:22:48

鸿蒙HarmonyOS评论功能小demo

评论页面小demo 效果展示 1.拆解组件&#xff0c;分层搭建 我们将整个评论页面拆解为三个组件&#xff0c;分别是头部导航&#xff0c;评论项&#xff0c;回复三个部分&#xff0c;然后统一在index界面导入 2.头部导航界面搭建 Preview Component struct HmNavBar {// 属性&a…...

编程日记 2025/3/8 6:21:46

异常(6)

今天我们继续来讲异常的内容,关于异常的捕获和声明,也是在处理异常的的重要方式,话不多说,来看. 异常的捕获 异常的捕获,也就是异常,的具体处理方式,主要有两种,主要有两种&#xff1a;异常声明throws以及try-catch捕获处理. 3.1异常声明throws. 处在方法声明时参数列表之后…...

编程日记 2025/3/8 6:20:45

精选一百道备赛蓝桥杯——2.K倍区间

解题思路 任何两个前缀区间的和对k取模的值相等&#xff0c;则由大的前缀区间减掉小的前缀区间所形成的区间的必定是K倍区间。因此我们可以对具有区间和%k值相等任何两个区间进行组合&#xff0c;再将这些值加起来就得到结果&#xff01;证明&#xff1a; 假设一个数列为a1,a2…...

编程日记 2025/3/8 6:19:44

编译Telegram Desktop

目录 一、前言 二、环境准备 2.1 2.2 2.3 2.4 2.5 2.6 2.7 2.8 三、编译 四、总结和学习 一、前言 Telegram 是一款全球广泛使用的即时通讯软件&#xff0c;以其强大的隐私保护、跨平台同步和丰富的功能而闻名。它支持一对一聊天、群组&#xff08;最多20万成员&am…...

编程日记 2025/3/8 6:17:42

玩转python: 掌握Python数据结构之链表

链表是计算机科学中最基础的数据结构之一&#xff0c;也是许多高级数据结构和算法的基础。本文将带你从零开始&#xff0c;逐步掌握链表的概念、实现和应用。通过丰富的案例和通俗易懂的解释&#xff0c;你将能够轻松理解并应用链表。 什么是链表&#xff1f; 链表是一种线性…...

编程日记 2025/3/8 6:16:41

upload-labs详解（1-12）文件上传分析

目录 uploa-labs-main upload-labs-main第一关 前端防御 绕过前端防御 禁用js Burpsuite抓包改包 upload-labs-main第二关 上传测试 错误类型 upload-labs-env upload-labs-env第三关 上传测试 查看源码 解决方法 重命名&#xff0c;上传 upload-labs-env第四关…...

编程日记 2025/3/8 6:15:40

RAG系统（检索增强生成）的优化策略

RAG（检索增强生成）系统的优化可以从多个方面入手，主要包括数据、查询、检索、生成、框架和评估等几个重要环节。本文将详细介绍这些优化策略，并为每个环节提供具体的操作方法。 一、数据优化 1. 数据清洗和增强 数据质量直接影响检索和生成的效果，因此需要进行细致的数据…...

编程日记 2025/3/8 6:14:38

写毕业论文用哪个AI好？这6款AIGC论文工具给你答案

撰写毕业论文是一项艰巨的任务&#xff0c;AIGC 论文工具的出现为同学们提供了有力支持。以下 6 款工具在功能、适用场景等方面各有优势&#xff0c;助你高效完成毕业论文。 文赋 AI 论文 文赋 AI 论文堪称毕业论文写作的得力助手。它的生成速度令人惊叹&#xff0c;短短 5 分…...

编程日记 2025/3/8 6:13:37

loadingcache优化

问题分析 通过当前现场的火焰图进行分析 原本的loadingcache public LoadingCache<Integer, Student> map Caffeine.newBuilder().refreshAfterWrite(CONTRACT_CACHE_HOURS, TimeUnit.HOURS).maximumSize(CONTRACT_CONFIG_CACHE_SIZE).recordStats().build(key -> …...

编程日记 2025/3/8 6:12:36

【Linux】shell脚本忽略错误继续执行

在 shell 脚本中&#xff0c;可以使用 set -e 命令来设置脚本在遇到错误时退出执行。如果你希望脚本忽略错误并继续执行&#xff0c;可以在脚本开头添加 set e 命令来取消该设置。 举例1 #!/bin/bash# 取消 set -e 的设置 set e# 执行命令&#xff0c;并忽略错误 rm somefile…...

编程新知 2025/6/21 16:23:04

AI Agent与Agentic AI：原理、应用、挑战与未来展望

文章目录 一、引言二、AI Agent与Agentic AI的兴起2.1 技术契机与生态成熟2.2 Agent的定义与特征2.3 Agent的发展历程 三、AI Agent的核心技术栈解密3.1 感知模块代码示例&#xff1a;使用Python和OpenCV进行图像识别 3.2 认知与决策模块代码示例&#xff1a;使用OpenAI GPT-3进…...

编程新知 2025/7/4 11:41:54

通过Wrangler CLI在worker中创建数据库和表

官方使用文档&#xff1a;Getting started Cloudflare D1 docs 创建数据库 在命令行中执行完成之后&#xff0c;会在本地和远程创建数据库&#xff1a; npx wranglerlatest d1 create prod-d1-tutorial 在cf中就可以看到数据库&#xff1a; 现在&#xff0c;您的Cloudfla…...

编程新知 2025/7/5 0:21:39

在HarmonyOS ArkTS ArkUI-X 5.0及以上版本中，手势开发全攻略：

在 HarmonyOS 应用开发中&#xff0c;手势交互是连接用户与设备的核心纽带。ArkTS 框架提供了丰富的手势处理能力&#xff0c;既支持点击、长按、拖拽等基础单一手势的精细控制&#xff0c;也能通过多种绑定策略解决父子组件的手势竞争问题。本文将结合官方开发文档&#xff0c…...

编程新知 2025/6/20 18:20:46

如何在看板中体现优先级变化

在看板中有效体现优先级变化的关键措施包括&#xff1a;采用颜色或标签标识优先级、设置任务排序规则、使用独立的优先级列或泳道、结合自动化规则同步优先级变化、建立定期的优先级审查流程。其中&#xff0c;设置任务排序规则尤其重要&#xff0c;因为它让看板视觉上直观地体…...

编程新知 2025/7/4 16:49:43

STM32+rt-thread判断是否联网

一、根据NETDEV_FLAG_INTERNET_UP位判断 static bool is_conncected(void) {struct netdev *dev RT_NULL;dev netdev_get_first_by_flags(NETDEV_FLAG_INTERNET_UP);if (dev RT_NULL){printf("wait netdev internet up...");return false;}else{printf("loc…...

编程新知 2025/6/25 2:07:42

ESP32读取DHT11温湿度数据

芯片&#xff1a;ESP32 环境&#xff1a;Arduino 一、安装DHT11传感器库 红框的库&#xff0c;别安装错了 二、代码 注意&#xff0c;DATA口要连接在D15上 #include "DHT.h" // 包含DHT库#define DHTPIN 15 // 定义DHT11数据引脚连接到ESP32的GPIO15 #define D…...

编程新知 2025/7/4 4:03:45

cf2117E

原题链接&#xff1a;https://codeforces.com/contest/2117/problem/E 题目背景&#xff1a; 给定两个数组a,b&#xff0c;可以执行多次以下操作&#xff1a;选择 i (1 < i < n - 1)&#xff0c;并设置 或&#xff0c;也可以在执行上述操作前执行一次删除任意 和 。求…...

编程新知 2025/7/4 5:01:42

《通信之道——从微积分到 5G》读书总结

第1章 绪 论 1.1 这是一本什么样的书 通信技术&#xff0c;说到底就是数学。 那些最基础、最本质的部分。 1.2 什么是通信 通信 发送方 接收方 承载信息的信号 解调出其中承载的信息 信息在发送方那里被加工成信号&#xff08;调制&#xff09; 把信息从信号中抽取出来&am…...

编程新知 2025/7/4 16:33:32

2025 后端自学UNIAPP【项目实战：旅游项目】6、我的收藏页面

代码框架视图 1、先添加一个获取收藏景点的列表请求 【在文件my_api.js文件中添加】 // 引入公共的请求封装 import http from ./my_http.js// 登录接口&#xff08;适配服务端返回 Token&#xff09; export const login async (code, avatar) > {const res await http…...

编程新知 2025/7/4 6:55:45