Web语义化及实际应用
你好同学,我是沐爸,欢迎点赞、收藏和关注!今天一起了解下Web语义化及其应用吧!
是什么?
使用合适的标签、属性,让页面能“说话“,让人和机器都能快速理解网页内容。
为什么?
- 有利于被搜索引擎搜索
- 有利于无障碍阅读
- 增强代码的可读性、可维护性
怎么做
避免使用<div>
或<span>
标签来包裹所有内容,而是使用语义化的标签及属性。 例如,用<h1>
表示主标题,用<h2>
表示副标题,用<a>
表示链接,用<img>
表示图片并添加alt
属性,用<ul>
表示无序列表,用<p>
表示段落,用<header>
表示页眉,用<footer>
表示页脚,用<nav>
表示导航等等。
语义化标签
<header>
:表示一个页面或区域的页眉部分,通常包含导航链接、标志、搜索框等。<nav>
:表示页面中的导航链接部分。<section>
:表示文档中的一个独立的区段,通常包含一个标题(<h1>
-<h6>
)。<article>
:表示一个独立的、完整的内容区块,如博客文章、新闻报道等。<aside>
:表示与页面主要内容稍微独立的部分,如侧边栏或广告。<footer>
:表示一个页面或区域的页脚部分,通常包含版权信息、作者信息、相关链接等。<h1>
到<h6>
:表示不同级别的标题,<h1>
是最高级别,<h6>
是最低级别。<main>
:表示文档的主要内容区域,每个页面应该只有一个<main>
元素。<figure>
和<figcaption>
:<figure>
表示图像、图表、代码段等独立内容,<figcaption>
表示<figure>
的标题或说明。<address>
:表示作者或拥有者的联系信息。<ul>
:表示无序列表,列表项使用<li>
标签。<ol>
:表示有序列表,列表项使用<li>
标签。<li>
:表示列表项,用于<ul>
或<ol>
。<table>
:表示表格,用于展示行列数据。<thead>
:表示表格的头部区域,通常包含列标题。<tbody>
:表示表格的主体部分,包含实际数据。<tfoot>
:表示表格的脚部区域,通常包含总结行或注释。<tr>
:表示表格中的行。<th>
:表示表格中的表头单元格。<td>
:表示表格中的单元格。<caption>
:表示表格的标题或说明。<form>
:表示表单,用于收集用户输入。<fieldset>
:表示表单中的一组相关控件。<legend>
:表示<fieldset>
的标题。<label>
:表示表单控件的标签。<input>
:表示输入控件,如文本框、复选框、单选按钮等。<textarea>
:表示多行文本输入控件。<button>
:表示按钮。<details>
和<summary>
:<details>
表示可以展开或折叠的内容区块,<summary>
表示<details>
的标题。<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>
语义化属性
alt
:用于<img>
标签,为图像提供替代文本,这对于视觉障碍用户和搜索引擎都是非常重要的。title
:为元素提供额外的信息或解释,当鼠标悬停在元素上时显示。lang
:用于<html>
标签,指定文档的主要语言,有助于搜索引擎和翻译工具。dir
:指定元素的文本方向,可以是ltr
(从左到右)或rtl
(从右到左)。id
:为元素提供唯一的标识符,通常用于CSS和JavaScript中引用特定的元素。class
:为元素提供类别名称,可以用于CSS中定义样式,也可以用于JavaScript中选择元素。role
:用于ARIA(Accessible Rich Internet Applications)中,提供额外的辅助信息,帮助辅助技术理解元素的作用。aria-*
:是一系列ARIA属性,用于增强网页的可访问性。例如:aria-label
:提供元素的文本标签。aria-labelledby
:通过ID引用来指定元素的标签。aria-hidden
:指示元素是否对辅助技术隐藏。aria-live
:指示元素是否具有动态内容,以及内容更新的紧急性。
for
:与<label>
标签一起使用,指定与表单控件关联的元素。type
:用于<input>
标签,指定输入控件的类型,如text
,checkbox
,radio
等。name
:用于表单控件,如<input>
和<button>
,指定控件的名称,这对于表单数据的提交非常重要。value
:指定表单控件的值,如<input>
的默认值或<button>
的显示文本。placeholder
:为<input>
和<textarea>
提供占位符文本,提示用户输入内容。pattern
:用于<input>
,指定输入字段的正则表达式,用于验证输入值。required
:表示表单控件是否必须填写。maxlength
和minlength
:分别用于限制<input>
和<textarea>
的最大和最小字符长度。multiple
:用于<input>
和<select>
,指示是否可以选择多个值。checked
:用于<input type="checkbox">
或<input type="radio">
,表示控件是否被选中。selected
:用于<option>
标签,表示是否选中该选项。autofocus
:用于<input>
,<textarea>
, 和<select>
,页面加载时自动获得焦点。readonly
:使表单控件为只读状态。disabled
:禁用表单控件。tabindex
:设置元素的Tab键顺序,用于控制元素的焦点顺序。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语义化及实际应用
你好同学,我是沐爸,欢迎点赞、收藏和关注!今天一起了解下Web语义化及其应用吧! 是什么? 使用合适的标签、属性,让页面能“说话“,让人和机器都能快速理解网页内容。 为什么? 有…...

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

C++之模版初阶
目录 前言 1.泛型编程 2.函数模版 2.1函数模版概念 2.2函数模版格式 2.3函数模版的原理 2.4函数模版的实例化 2.5模版参数的匹配原则 3.类模版 3.1类模版的定义格式 3.2类模版的实例化 结束语 前言 前面我们学习了C的类与对象和内存管理,接下来我们继续学习…...
飞桨paddle API函数scatter详解
飞桨的scatter函数,是通过基于 updates 来更新选定索引 index 上的输入来获得输出,具体官网api文档见: scatter-API文档-PaddlePaddle深度学习平台 官网给的例子如下: >>> import paddle>>> x paddle.to_tens…...

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

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

【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 来打印字符串…...

时序预测|基于变分模态分解-时域卷积-双向长短期记忆-注意力机制多变量时间序列预测VMD-TCN-BiLSTM-Attention
时序预测|基于变分模态分解-时域卷积-双向长短期记忆-注意力机制多变量时间序列预测VMD-TCN-BiLSTM-Attention 文章目录 前言时序预测|基于变分模态分解-时域卷积-双向长短期记忆-注意力机制多变量时间序列预测VMD-TCN-BiLSTM-Attention 一、VMD-TCN-BiLSTM-Attention模型1. **…...
Python知识点:如何使用Godot与Python进行游戏脚本编写
在Godot中使用Python进行游戏脚本编写,你需要通过一个插件来实现,因为Godot原生支持的脚本语言是GDScript、VisualScript和C#。这个插件被称为Godot-Python,它允许你在Godot引擎中使用Python编写脚本。以下是详细的步骤指导你如何配置和使用G…...

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

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

FPGA资源评估
FPGA资源评估 文章目录 FPGA资源评估前言一、资源评估1.1 资源有哪些1.2 资源统计 二、 FPGA 的基本结构三、 更为复杂的 FPGA 架构 前言 一、资源评估 大家在项目中一般会要遇到需要资源评估的情况,例如立了新项目,前期需要确定使用什么FPGA片子&…...
REST framework中Views API学习
REST framework提供了一个APIView类,它是Django的View类的子类。 APIView类和一般的View类有以下不同: 被传入到处理方法的请求不会是Django的HttpRequest类的实例,而是REST framework的Request类的实例。处理方法可以返回REST framework的…...
Vue(四)——总结
渐进式JavaScript框架 Vue.js是一套构建用户界面(UI)的渐进式JavaScript框架。 1、库和框架的区别? 库:库是提供给开发者的一个封装好的特定于某一方面的集合(方法和函数),库没有控制权&…...

计算机毕业设计 招生宣传管理系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试
🍊作者:计算机编程-吉哥 🍊简介:专业从事JavaWeb程序开发,微信小程序开发,定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事,生活就是快乐的。 🍊心愿:点…...

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

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

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

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

【AI绘画】 学习内容简介
AI绘画-学习内容简介 1. 效果展示 本次测试主要结果展示如下: 卡通手办定制1 卡通手办定制2 艺术写真定制 2. 主要目录 AI 绘画- 文生图,图生图及lora使用(基于diffusers) AI 绘画- 模型转换与快速生图(基于diffus…...
web vue 项目 Docker化部署
Web 项目 Docker 化部署详细教程 目录 Web 项目 Docker 化部署概述Dockerfile 详解 构建阶段生产阶段 构建和运行 Docker 镜像 1. Web 项目 Docker 化部署概述 Docker 化部署的主要步骤分为以下几个阶段: 构建阶段(Build Stage):…...

2025年能源电力系统与流体力学国际会议 (EPSFD 2025)
2025年能源电力系统与流体力学国际会议(EPSFD 2025)将于本年度在美丽的杭州盛大召开。作为全球能源、电力系统以及流体力学领域的顶级盛会,EPSFD 2025旨在为来自世界各地的科学家、工程师和研究人员提供一个展示最新研究成果、分享实践经验及…...

SpringBoot+uniapp 的 Champion 俱乐部微信小程序设计与实现,论文初版实现
摘要 本论文旨在设计并实现基于 SpringBoot 和 uniapp 的 Champion 俱乐部微信小程序,以满足俱乐部线上活动推广、会员管理、社交互动等需求。通过 SpringBoot 搭建后端服务,提供稳定高效的数据处理与业务逻辑支持;利用 uniapp 实现跨平台前…...
css的定位(position)详解:相对定位 绝对定位 固定定位
在 CSS 中,元素的定位通过 position 属性控制,共有 5 种定位模式:static(静态定位)、relative(相对定位)、absolute(绝对定位)、fixed(固定定位)和…...

3-11单元格区域边界定位(End属性)学习笔记
返回一个Range 对象,只读。该对象代表包含源区域的区域上端下端左端右端的最后一个单元格。等同于按键 End 向上键(End(xlUp))、End向下键(End(xlDown))、End向左键(End(xlToLeft)End向右键(End(xlToRight)) 注意:它移动的位置必须是相连的有内容的单元格…...

GC1808高性能24位立体声音频ADC芯片解析
1. 芯片概述 GC1808是一款24位立体声音频模数转换器(ADC),支持8kHz~96kHz采样率,集成Δ-Σ调制器、数字抗混叠滤波器和高通滤波器,适用于高保真音频采集场景。 2. 核心特性 高精度:24位分辨率,…...

论文阅读笔记——Muffin: Testing Deep Learning Libraries via Neural Architecture Fuzzing
Muffin 论文 现有方法 CRADLE 和 LEMON,依赖模型推理阶段输出进行差分测试,但在训练阶段是不可行的,因为训练阶段直到最后才有固定输出,中间过程是不断变化的。API 库覆盖低,因为各个 API 都是在各种具体场景下使用。…...
Modbus RTU与Modbus TCP详解指南
目录 1. Modbus协议基础 1.1 什么是Modbus? 1.2 Modbus协议历史 1.3 Modbus协议族 1.4 Modbus通信模型 🎭 主从架构 🔄 请求响应模式 2. Modbus RTU详解 2.1 RTU是什么? 2.2 RTU物理层 🔌 连接方式 ⚡ 通信参数 2.3 RTU数据帧格式 📦 帧结构详解 🔍…...
深入浅出WebGL:在浏览器中解锁3D世界的魔法钥匙
WebGL:在浏览器中解锁3D世界的魔法钥匙 引言:网页的边界正在消失 在数字化浪潮的推动下,网页早已不再是静态信息的展示窗口。如今,我们可以在浏览器中体验逼真的3D游戏、交互式数据可视化、虚拟实验室,甚至沉浸式的V…...
电脑桌面太单调,用Python写一个桌面小宠物应用。
下面是一个使用Python创建的简单桌面小宠物应用。这个小宠物会在桌面上游荡,可以响应鼠标点击,并且有简单的动画效果。 import tkinter as tk import random import time from PIL import Image, ImageTk import os import sysclass DesktopPet:def __i…...