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

Web语义化及实际应用

news 2026/1/31 22:26:31

你好同学，我是沐爸，欢迎点赞、收藏和关注！今天一起了解下Web语义化及其应用吧！

是什么？

使用合适的标签、属性，让页面能“说话“，让人和机器都能快速理解网页内容。

为什么？

  • 有利于被搜索引擎搜索
  • 有利于无障碍阅读
  • 增强代码的可读性、可维护性

怎么做

避免使用<div>或<span>标签来包裹所有内容，而是使用语义化的标签及属性。 例如，用<h1>表示主标题，用<h2>表示副标题，用<a>表示链接，用<img>表示图片并添加alt属性，用<ul>表示无序列表，用<p>表示段落，用<header>表示页眉，用<footer>表示页脚，用<nav>表示导航等等。

语义化标签

  1. <header>：表示一个页面或区域的页眉部分，通常包含导航链接、标志、搜索框等。
  2. <nav>：表示页面中的导航链接部分。
  3. <section>：表示文档中的一个独立的区段，通常包含一个标题（<h1>-<h6>）。
  4. <article>：表示一个独立的、完整的内容区块，如博客文章、新闻报道等。
  5. <aside>：表示与页面主要内容稍微独立的部分，如侧边栏或广告。
  6. <footer>：表示一个页面或区域的页脚部分，通常包含版权信息、作者信息、相关链接等。
  7. <h1> 到 <h6>：表示不同级别的标题，<h1> 是最高级别，<h6> 是最低级别。
  8. <main>：表示文档的主要内容区域，每个页面应该只有一个 <main> 元素。
  9. <figure> 和 <figcaption>：<figure> 表示图像、图表、代码段等独立内容，<figcaption> 表示 <figure> 的标题或说明。
  10. <address>：表示作者或拥有者的联系信息。
  11. <ul>：表示无序列表，列表项使用 <li> 标签。
  12. <ol>：表示有序列表，列表项使用 <li> 标签。
  13. <li>：表示列表项，用于 <ul> 或 <ol>。
  14. <table>：表示表格，用于展示行列数据。
  15. <thead>：表示表格的头部区域，通常包含列标题。
  16. <tbody>：表示表格的主体部分，包含实际数据。
  17. <tfoot>：表示表格的脚部区域，通常包含总结行或注释。
  18. <tr>：表示表格中的行。
  19. <th>：表示表格中的表头单元格。
  20. <td>：表示表格中的单元格。
  21. <caption>：表示表格的标题或说明。
  22. <form>：表示表单，用于收集用户输入。
  23. <fieldset>：表示表单中的一组相关控件。
  24. <legend>：表示 <fieldset> 的标题。
  25. <label>：表示表单控件的标签。
  26. <input>：表示输入控件，如文本框、复选框、单选按钮等。
  27. <textarea>：表示多行文本输入控件。
  28. <button>：表示按钮。
  29. <details> 和 <summary>：<details> 表示可以展开或折叠的内容区块，<summary> 表示 <details> 的标题。
  30. <menu> 和 <command>：<menu> 表示一组命令按钮，<command> 表示菜单中的一个命令项。

示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Figure Example</title>
</head>
<body><article><header><h1>Example of Figure and Figcaption</h1></header><section><h2>图片展示</h2><figure><img src="image.jpg" alt="海南三亚沙滩"><figcaption>这里对图片进行说明</figcaption></figure></section><section><h2>代码片段</h2><figure><pre><code>function example() {console.log("Hello, World!");}</code></pre><figcaption>一个执行打印的函数</figcaption></figure></section></article>
</body>
</html>

语义化属性

  1. alt：用于 <img> 标签，为图像提供替代文本，这对于视觉障碍用户和搜索引擎都是非常重要的。
  2. title：为元素提供额外的信息或解释，当鼠标悬停在元素上时显示。
  3. lang：用于 <html> 标签，指定文档的主要语言，有助于搜索引擎和翻译工具。
  4. dir：指定元素的文本方向，可以是 ltr（从左到右）或 rtl（从右到左）。
  5. id：为元素提供唯一的标识符，通常用于CSS和JavaScript中引用特定的元素。
  6. class：为元素提供类别名称，可以用于CSS中定义样式，也可以用于JavaScript中选择元素。
  7. role：用于ARIA（Accessible Rich Internet Applications）中，提供额外的辅助信息，帮助辅助技术理解元素的作用。
  8. aria-*：是一系列ARIA属性，用于增强网页的可访问性。例如：
    • aria-label：提供元素的文本标签。
    • aria-labelledby：通过ID引用来指定元素的标签。
    • aria-hidden：指示元素是否对辅助技术隐藏。
    • aria-live：指示元素是否具有动态内容，以及内容更新的紧急性。
  9. for：与 <label> 标签一起使用，指定与表单控件关联的元素。
  10. type：用于 <input> 标签，指定输入控件的类型，如 text, checkbox, radio 等。
  11. name：用于表单控件，如 <input> 和 <button>，指定控件的名称，这对于表单数据的提交非常重要。
  12. value：指定表单控件的值，如 <input> 的默认值或 <button> 的显示文本。
  13. placeholder：为 <input> 和 <textarea> 提供占位符文本，提示用户输入内容。
  14. pattern：用于 <input>，指定输入字段的正则表达式，用于验证输入值。
  15. required：表示表单控件是否必须填写。
  16. maxlength 和 minlength：分别用于限制 <input> 和 <textarea> 的最大和最小字符长度。
  17. multiple：用于 <input> 和 <select>，指示是否可以选择多个值。
  18. checked：用于 <input type="checkbox"> 或 <input type="radio">，表示控件是否被选中。
  19. selected：用于 <option> 标签，表示是否选中该选项。
  20. autofocus：用于 <input>, <textarea>, 和 <select>，页面加载时自动获得焦点。
  21. readonly：使表单控件为只读状态。
  22. disabled：禁用表单控件。
  23. tabindex：设置元素的Tab键顺序，用于控制元素的焦点顺序。
  24. data-*：自定义属性，用于存储页面或应用程序的私有数据。

示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Semantic Attributes Example</title>
</head>
<body><!-- 使用 alt 属性为图像提供替代文本 --><img src="image.jpg" alt="A description of the image content"><!-- 使用 title 属性为元素提供额外信息 --><p title="Hover over this text for more info">Some important information.</p><!-- 使用 lang 属性指定页面语言 --><html lang="zh-CN"><!-- 使用 dir 属性指定文本方向 --><div dir="rtl">这是一个从右到左的文本示例。</div><!-- 使用 id 和 class 属性为元素提供唯一标识符和类别 --><div id="unique-section" class="content-block"><!-- 内容 --></div><!-- 使用 role 属性增强可访问性 --><div role="navigation">...</div><!-- 使用 aria-label 属性为元素提供辅助技术可读的标签 --><button aria-label="Close dialog">X</button><!-- 使用 aria-labelledby 属性引用其他元素作为当前元素的标签 --><div id="description">Some descriptive text</div><button aria-labelledby="description">Click me</button><!-- 使用 for 属性与 label 标签一起使用 --><label for="user-input">Enter your name:</label><input type="text" id="user-input" name="username"><!-- 使用 type 属性指定 input 控件的类型 --><input type="email" name="useremail" placeholder="Enter your email"><!-- 使用 name 属性为表单控件指定名称 --><button type="submit" name="submit">Submit</button><!-- 使用 value 属性指定表单控件的值 --><input type="submit" value="Click to send"><!-- 使用 placeholder 属性为 input 提供占位符 --><input type="text" placeholder="Enter your search term"><!-- 使用 pattern 属性为 input 指定正则表达式验证 --><input type="text" pattern="[A-Za-z]{3}" title="Three letter abbreviation"><!-- 使用 required 属性表示表单控件必须填写 --><input type="text" required><!-- 使用 maxlength 和 minlength 属性限制输入长度 --><textarea maxlength="200" minlength="10"></textarea><!-- 使用 multiple 属性允许选择多个值 --><input type="file" multiple><!-- 使用 checked 属性表示复选框或单选按钮被选中 --><input type="checkbox" checked><!-- 使用 selected 属性表示选项被选中 --><select><option value="option1" selected>Option 1</option><option value="option2">Option 2</option></select><!-- 使用 autofocus 属性使元素在页面加载时自动获得焦点 --><input type="text" autofocus><!-- 使用 readonly 属性使表单控件为只读状态 --><input type="text" readonly value="Readonly value"><!-- 使用 disabled 属性禁用表单控件 --><button type="submit" disabled>Submit</button><!-- 使用 tabindex 属性设置元素的Tab键顺序 --><a href="https://example.com" tabindex="1">Visit Example.com</a><!-- 使用 data-* 属性存储私有数据 --><div data-user-id="123">Some content related to user 123</div></body>
</html>

希望对你有所帮助，顺便点个赞吧！

相关文章：

Web语义化及实际应用

你好同学&#xff0c;我是沐爸&#xff0c;欢迎点赞、收藏和关注&#xff01;今天一起了解下Web语义化及其应用吧&#xff01; 是什么&#xff1f; 使用合适的标签、属性&#xff0c;让页面能“说话“&#xff0c;让人和机器都能快速理解网页内容。 为什么&#xff1f; 有…...

编程日记 2024/8/15 2:59:48

Linux系统调试课：CPUFreq 中央处理器频率调节技术

文章目录 一、CPUFreq组成二、用户接口三、设备树配置沉淀、分享、成长，让自己和他人都能有所收获！😄 📢中央处理器频率调节（Central Processing Unit frequency，CPUFreq）技术可以降低ARM芯片的功耗，例如在系统对任务压力较小时，通过调整处理器工作频率与输入电压的…...

编程日记 2024/8/15 2:58:47

C++之模版初阶

目录 前言 1.泛型编程 2.函数模版 2.1函数模版概念 2.2函数模版格式 2.3函数模版的原理 2.4函数模版的实例化 2.5模版参数的匹配原则 3.类模版 3.1类模版的定义格式 3.2类模版的实例化 结束语 前言 前面我们学习了C的类与对象和内存管理&#xff0c;接下来我们继续学习…...

编程日记 2024/8/15 2:57:46

飞桨paddle API函数scatter详解

飞桨的scatter函数&#xff0c;是通过基于 updates 来更新选定索引 index 上的输入来获得输出&#xff0c;具体官网api文档见&#xff1a; scatter-API文档-PaddlePaddle深度学习平台 官网给的例子如下&#xff1a; >>> import paddle>>> x paddle.to_tens…...

编程日记 2024/8/15 2:55:44

RCE漏洞复现

PHP命令执行常用函数 回调函数必须是命令执行和代码执行的函数&#xff0c;有两个条件 必须是函数&#xff0c;而且需要有函数运行的参数 危害&#xff1a;可以直接删除文件&#xff0c;添加文件&#xff0c;甚至可以添加用户 system --执行外部程序&#xff0c;并且显示输…...

编程日记 2024/8/15 2:52:41

Qt QTabWidget之创建标签页的多页面切换

QTabWidget 用来分页显示 重要函数: 1.void setTabText(int, QString); //设置页面的名字. 2.void setTabToolTip(QString); //设置页面的提示信息. 3.void setTabEnabled(bool); //设置页面是否被激活. 4.void setTabPosition(QTabPosition::South); //设置页面名字的位置. 5.…...

编程日记 2024/8/15 2:50:39

【RISC-V设计-14】- RISC-V处理器设计K0A之打印输出

【RISC-V设计-14】- RISC-V处理器设计K0A之打印输出 文章目录 【RISC-V设计-14】- RISC-V处理器设计K0A之打印输出1.简介2.验证用例3.软件代码4.链接脚本5.编译脚本6.仿真结果6.1 复位结束6.2 运行成功6.3 终端打印 7.总结 1.简介 本文将详细阐述如何利用 printf 来打印字符串…...

编程日记 2024/8/15 2:45:35

时序预测|基于变分模态分解-时域卷积-双向长短期记忆-注意力机制多变量时间序列预测VMD-TCN-BiLSTM-Attention

时序预测|基于变分模态分解-时域卷积-双向长短期记忆-注意力机制多变量时间序列预测VMD-TCN-BiLSTM-Attention 文章目录 前言时序预测|基于变分模态分解-时域卷积-双向长短期记忆-注意力机制多变量时间序列预测VMD-TCN-BiLSTM-Attention 一、VMD-TCN-BiLSTM-Attention模型1. **…...

编程日记 2024/8/15 2:43:31

Python知识点：如何使用Godot与Python进行游戏脚本编写

在Godot中使用Python进行游戏脚本编写&#xff0c;你需要通过一个插件来实现&#xff0c;因为Godot原生支持的脚本语言是GDScript、VisualScript和C#。这个插件被称为Godot-Python&#xff0c;它允许你在Godot引擎中使用Python编写脚本。以下是详细的步骤指导你如何配置和使用G…...

编程日记 2024/8/15 2:42:30

Spring MVC数据绑定和响应学习笔记

学习视频:12001 数据绑定_哔哩哔哩_bilibili 目录 1.数据绑定 简单数据绑定 默认类型数据绑定 简单数据类型绑定的概念 参数别名的设置 PathVariable注解的两个常用属性 POJO绑定 自定义类型转换器 xml方式 注解方式 数组绑定 集合绑定 复杂POJO绑定 属性为对象类…...

编程日记 2024/8/15 2:41:29

Vulnhub JIS-CTF靶机详解

项目地址 https://www.vulnhub.com/entry/jis-ctf-vulnupload,228/https://www.vulnhub.com/entry/jis-ctf-vulnupload,228/ 修改靶机的网卡 开机时长按shift&#xff0c;进入此页面 选择root模式进入 将只读模式改为读写模式 mount -o remount,rw / 查看本机的网卡名称 …...

编程日记 2024/8/15 2:40:28

FPGA资源评估

FPGA资源评估 文章目录 FPGA资源评估前言一、资源评估1.1 资源有哪些1.2 资源统计 二、 FPGA 的基本结构三、 更为复杂的 FPGA 架构 前言 一、资源评估 大家在项目中一般会要遇到需要资源评估的情况&#xff0c;例如立了新项目&#xff0c;前期需要确定使用什么FPGA片子&…...

编程日记 2024/8/15 2:38:27

REST framework中Views API学习

REST framework提供了一个APIView类&#xff0c;它是Django的View类的子类。 APIView类和一般的View类有以下不同&#xff1a; 被传入到处理方法的请求不会是Django的HttpRequest类的实例&#xff0c;而是REST framework的Request类的实例。处理方法可以返回REST framework的…...

编程日记 2024/8/15 2:36:24

Vue（四）——总结

渐进式JavaScript框架 Vue.js是一套构建用户界面&#xff08;UI&#xff09;的渐进式JavaScript框架。 1、库和框架的区别&#xff1f; 库&#xff1a;库是提供给开发者的一个封装好的特定于某一方面的集合&#xff08;方法和函数&#xff09;&#xff0c;库没有控制权&…...

编程日记 2024/8/15 2:34:22

计算机毕业设计 招生宣传管理系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试

&#x1f34a;作者&#xff1a;计算机编程-吉哥 &#x1f34a;简介&#xff1a;专业从事JavaWeb程序开发&#xff0c;微信小程序开发&#xff0c;定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事&#xff0c;生活就是快乐的。 &#x1f34a;心愿&#xff1a;点…...

编程日记 2024/8/15 2:33:21

练习题PHP5.6+变长参数 ⇒ usort回调后门 ⇒ 任意代码执行

突破长度限制 使用usort上传后门 usort — 使用用户自定义的比较函数对数组中的值进行排序 paramusort(...$GET); ...为php设置可变长参数 在url地址栏中输入[]test&1[]phpinfo();&2assert 包含了phpiinfo&#xff08;&#xff09;命令执行 结合usort使用 assert…...

编程日记 2024/8/15 2:32:20

EPLAN关于PLC的输入输出模块绘制

EPLAN关于PLC的输入输出模块绘制 总览图上的PLC绘制原理图上的PLC绘制编辑IO注释显示总览界面IO注释自动关联总览IO地址 总览图上的PLC绘制 右键项目【新建】 页类型选择【总览】&#xff0c;描述可以自由编辑&#xff0c;之后确认即可。 由于我们需要绘制PLC的输入输出&#x…...

编程日记 2024/8/15 2:30:18

【Linux】sersync 实时同步

原理 rsync 是不支持实时同步的&#xff0c;通常我们借助于 inotify 这个软件来实时监控文件变化&#xff0c;一旦inotify 监控到文件变化&#xff0c;则立即调用 rsync 进行同步&#xff0c;推送到 rsync 服务端。 环境准备 步骤1&#xff1a;获取数据包 获取 sersync 的包…...

编程日记 2024/8/15 2:25:14

Unity 资源分享 之 恐龙Ceratosaurus资源模型携 82 个动画来袭

Unity 资源分享 之 恐龙Ceratosaurus资源模型携 82 个动画来袭 一、前言二&#xff0c;资源包内容三、免费获取资源包 一、前言 亲爱的 Unity 开发者和爱好者们&#xff0c;大家好&#xff01;今天要为大家分享一份超级酷炫的 Unity 资源——恐龙资源模型&#xff0c;而且它还…...

编程日记 2024/8/15 2:23:12

【AI绘画】 学习内容简介

AI绘画-学习内容简介 1. 效果展示 本次测试主要结果展示如下&#xff1a; 卡通手办定制1 卡通手办定制2 艺术写真定制 2. 主要目录 AI 绘画- 文生图&#xff0c;图生图及lora使用&#xff08;基于diffusers&#xff09; AI 绘画- 模型转换与快速生图&#xff08;基于diffus…...

编程日记 2024/8/15 2:22:11

React hook之useRef

React useRef 详解 useRef 是 React 提供的一个 Hook&#xff0c;用于在函数组件中创建可变的引用对象。它在 React 开发中有多种重要用途&#xff0c;下面我将全面详细地介绍它的特性和用法。 基本概念 1. 创建 ref const refContainer useRef(initialValue);initialValu…...

编程新知 2025/6/11 15:21:26

PHP和Node.js哪个更爽?

先说结论&#xff0c;rust完胜。 php&#xff1a;laravel&#xff0c;swoole&#xff0c;webman&#xff0c;最开始在苏宁的时候写了几年php&#xff0c;当时觉得php真的是世界上最好的语言&#xff0c;因为当初活在舒适圈里&#xff0c;不愿意跳出来&#xff0c;就好比当初活在…...

编程新知 2025/9/14 7:59:52

Day131 | 灵神 | 回溯算法 | 子集型 子集

Day131 | 灵神 | 回溯算法 | 子集型 子集 78.子集 78. 子集 - 力扣&#xff08;LeetCode&#xff09; 思路&#xff1a; 笔者写过很多次这道题了&#xff0c;不想写题解了&#xff0c;大家看灵神讲解吧 回溯算法套路①子集型回溯【基础算法精讲 14】_哔哩哔哩_bilibili 完…...

编程新知 2026/1/23 12:37:51

python/java环境配置

环境变量放一起 python&#xff1a; 1.首先下载Python Python下载地址&#xff1a;Download Python | Python.org downloads ---windows -- 64 2.安装Python 下面两个&#xff0c;然后自定义&#xff0c;全选 可以把前4个选上 3.环境配置 1&#xff09;搜高级系统设置 2…...

编程新知 2026/1/24 14:23:08

【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现（服务端执行命令请求的过程 - 初始化服务器）

服务端执行命令请求的过程 【专栏简介】【技术大纲】【专栏目标】【目标人群】1. Redis爱好者与社区成员2. 后端开发和系统架构师3. 计算机专业的本科生及研究生 初始化服务器1. 初始化服务器状态结构初始化RedisServer变量 2. 加载相关系统配置和用户配置参数定制化配置参数案…...

编程新知 2026/1/31 11:06:44

DIY｜Mac 搭建 ESP-IDF 开发环境及编译小智 AI

前一阵子在百度 AI 开发者大会上&#xff0c;看到基于小智 AI DIY 玩具的演示&#xff0c;感觉有点意思&#xff0c;想着自己也来试试。 如果只是想烧录现成的固件&#xff0c;乐鑫官方除了提供了 Windows 版本的 Flash 下载工具 之外&#xff0c;还提供了基于网页版的 ESP LA…...

编程新知 2026/1/30 9:02:43

UR 协作机器人「三剑客」：精密轻量担当（UR7e）、全能协作主力（UR12e）、重型任务专家（UR15）

UR协作机器人正以其卓越性能在现代制造业自动化中扮演重要角色。UR7e、UR12e和UR15通过创新技术和精准设计满足了不同行业的多样化需求。其中&#xff0c;UR15以其速度、精度及人工智能准备能力成为自动化领域的重要突破。UR7e和UR12e则在负载规格和市场定位上不断优化&#xf…...

编程新知 2026/1/15 5:21:57

CMake控制VS2022项目文件分组

我们可以通过 CMake 控制源文件的组织结构，使它们在 VS 解决方案资源管理器中以“组”（Filter）的形式进行分类展示。 🎯 目标 通过 CMake 脚本将 .cpp、.h 等源文件分组显示在 Visual Studio 2022 的解决方案资源管理器中。 ✅ 支持的方法汇总（共4种） 方法描述是否推荐…...

编程新知 2025/12/4 15:47:17

智能分布式爬虫的数据处理流水线优化：基于深度强化学习的数据质量控制

在数字化浪潮席卷全球的今天&#xff0c;数据已成为企业和研究机构的核心资产。智能分布式爬虫作为高效的数据采集工具&#xff0c;在大规模数据获取中发挥着关键作用。然而&#xff0c;传统的数据处理流水线在面对复杂多变的网络环境和海量异构数据时&#xff0c;常出现数据质…...

编程新知 2026/1/20 22:51:34

Java求职者面试指南：计算机基础与源码原理深度解析

Java求职者面试指南&#xff1a;计算机基础与源码原理深度解析 第一轮提问&#xff1a;基础概念问题 1. 请解释什么是进程和线程的区别&#xff1f; 面试官&#xff1a;进程是程序的一次执行过程&#xff0c;是系统进行资源分配和调度的基本单位&#xff1b;而线程是进程中的…...

编程新知 2025/12/9 14:22:07