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

做一个wiki页面是体验HTML语义的好方法

news 2025/7/4 13:51:24

HTML语义：如何运用语义类标签来呈现Wiki网页

在上一篇文章中，我花了大量的篇幅和你解释了正确使用语义类标签的好处和一些场景。那么，哪些场景适合用到语义类标签呢，又如何运用语义类标签呢？

不知道你还记不记得在大学时代，你被导师逼着改毕业论文格式的情景，如果你回想一下，你在论文中使用的那些格式，你会发现其实它们都是可以用 HTML 里的语义标签来表示的。

这正是因为 HTML 最初的设计场景就是“超文本”，早期 HTML 工作组的专家都是出版界书籍排版的专家。

所以，在这一部分，我们找了个跟论文很像的案例：Wikipedia 文章，这种跟论文相似的网站比较适合用来学习语义类标签。通过分析一篇 Wiki 的文章用到的语义类标签，来进一步帮你理解语义的概念。

你可以在电脑上，打开这个页面：

https://en.wikipedia.org/wiki/World_Wide_Web

为了防止这个页面被修改，我们保存了一个副本：

World Wide Web - Wikipedia

这是一篇我们选择的 Wiki 文章，虽然在原本的 Wikipedia 网站中，也是大量使用了 div 和 span 来完成功能。在这里，我们来尝试分析一下，应该如何用语义类标签来呈现这样的一个页面 / 文章。

我们看一下这个页面。

aside

首先我们来看下，左侧侧边栏，根据上一篇文章中提到的语义定义，这里属于 aside 内容。是导航性质的工具内容。

article

我们来到文章主体部分，因为主体部分具有明确的独立性，所以可以用 article 来包裹。

hgroup, h1, h2

在语义的上一篇文章中，我们介绍过 hgroup 和 h1-h6 的作用，hgroup 是标题组，h1 是一级标题，h2 是二级标题。这里，World Wide Web 是文章的大标题，适合 h1 元素。

接下来出现了一个副标题。From Wikipedia, the free encyclopedia。这个地方适合使用 h2，跟 h1 组成一个 hgroup，所以代码可能是类似这样的:

<hgroup><h1>World Wide Web </h1><h2>From Wikipedia, the free encyclopedia</h2></hgroup>

hr

学会发现，在 Wiki 的界面中，出现了一条很长的横线，大家都知道 hr 标签表示横向分隔线，那么这个地方是不是应该用 hr 呢？ 答案是不用。我们读一下标准的定义就知道了，hr 表示故事走向的转变或者话题的转变，显然此处两个标题并非这种关系，所以我们应该使用 CSS 的 border 来把它当作纯视觉效果来实现，所以这里是不需要用 hr 的。

p

接下来一段，我们看到了三段“note”，也就是注记。它在文章中用作额外注释。

“WWW” and “The Web” redirect here. For other uses of WWW, see WWW (disambiguation). For other uses of web, see Web (disambiguation). For the first web software, see WorldWideWeb. Not to be confused with the Internet.

HTML 中并没有 note 相关的语义，所以，我们用普通的 p 标签，加上class="note"来实现。后面的多数自然段都是普通的段落，我们用 p 标签来实现。

strong

注意，这里 “World Wide Web (WWW)” 和 “the Web” 使用了黑体呈现，从上下文来看，这里表示这个词很重要，所以我们使用 strong 标签。

<p> A global map of the web index for countries in 2014<strong>The World Wide Web (WWW)</strong>, also called <strong>the Web</strong>,
......

blockquote, q, cite

接下来我们看到了一个论文中很常见的用法“引述”。

interlinked by hypertext links, and accessible via the Internet.[1]

注意看这里的[1]，当我们把鼠标放上去的时候，出现了引述的相关信息：

“What is the difference between the Web and the Internet?”. W3C Help and FAQ. W3C. 2009. Archived from the original on 9 July 2015. Retrieved 16 July 2015.

在 HTML 中，有三个跟引述相关的标签 blockquote 表示段落级引述内容，q 表示行内的引述内容，cite 表示引述的作品名。

这里的作品名称 “What is the difference between the Web and the Internet?”，应当使用 cite 标签。

<cite>"What is the difference between the Web and the Internet?"</cite>. W3C Help and FAQ. W3C. 2009. Archived from the original on 9 July 2015. Retrieved 16 July 2015.

在文章的结尾处，有对应的 References 一节，这一节中所有的作品名称也应该加入 cite 标签。

这里我们看看引用的原文就可以知道，Wiki 文章中的信息并非直接引用，如果是直接引用的内容，那么，我们还应该加上 blockquote 或者 q 标签。

此外，还有time、figure, figcaption、dfn、nav, ol, ul、pre, samp, code的解释，请移步：

开发者网站--做一个wiki页面是体验HTML语义的好方法

相关文章：

做一个wiki页面是体验HTML语义的好方法

HTML语义&#xff1a;如何运用语义类标签来呈现Wiki网页 在上一篇文章中&#xff0c;我花了大量的篇幅和你解释了正确使用语义类标签的好处和一些场景。那么&#xff0c;哪些场景适合用到语义类标签呢&#xff0c;又如何运用语义类标签呢&#xff1f; 不知道你还记不记得在大…...

编程日记 2023/12/23 2:19:22

金融CRM有用吗？金融行业CRM有哪些功能

市场形式波诡云谲&#xff0c;金融行业也面临着资源体系分散、竞争力后继不足、未知风险无法规避等问题。金融企业该如何解决这些问题&#xff0c;或许可以了解一下CRM管理系统&#xff0c;和其提供的金融行业CRM解决方案。 金融行业是银行业、保险业、信托业、证券业和租赁业…...

编程日记 2023/12/23 2:17:20

@XmlAccessorType+@XmlElement完美解决Java类到XML映射问题

前言&#xff1a; 最近项目在做静态代码扫描的时候&#xff0c;出现Java类中成员变量命名的问题&#xff0c;开头字母必须小写&#xff0c;但是这个类成员是对接其他公司的字段&#xff0c;对方提供的请求格式是XML&#xff0c;必须将Java类转化为XML的格式&#xff0c;而且这…...

编程日记 2023/12/23 2:16:19

软件渗透测试有哪些测试流程?权威安全测试报告的重要性

软件渗透测试也是安全测试的一种&#xff0c;是通过模拟恶意黑客的攻击方法&#xff0c;来评估计算机网络系统安全的一种评估方法。作为网络安全防范的一种新技术&#xff0c;对于网络安全组织具有实际应用价值。 一、软件渗透测试的过程 　　软件渗透测试的过程通常包括四个主…...

编程日记 2023/12/23 2:15:18

安防视频融合云平台/智慧监控平台EasyCVR如何添加验证码调用接口？

安防视频监控/视频集中存储/云存储/磁盘阵列EasyCVR平台可拓展性强、视频能力灵活、部署轻快&#xff0c;可支持的主流标准协议有国标GB28181、RTSP/Onvif、RTMP等&#xff0c;以及支持厂家私有协议与SDK接入&#xff0c;包括海康Ehome、海大宇等设备的SDK等。平台既具备传统安…...

编程日记 2023/12/23 2:14:18

浏览器输入一个url,它的解析过程

URL解析&#xff1a; 浏览器首先解析URL&#xff0c;提取其中的协议&#xff08;例如&#xff0c;HTTP、HTTPS&#xff09;、域名和路径等信息。这个过程被称为URL解析。 DNS解析&#xff1a; 浏览器会检查域名的IP地址是否已经缓存。如果没有缓存或者缓存已经过期&#xff0c;…...

编程日记 2023/12/23 2:13:17

第29节: Vue3 列表渲染

在UniApp中使用Vue3框架时&#xff0c;你可以使用列表渲染语法来动态地渲染一个列表。下面是一个示例&#xff0c;演示了如何在UniApp中使用Vue3框架使用列表渲染&#xff1a; <template> <view> <button click"addItem">Add Item</button&g…...

编程日记 2023/12/23 2:11:15

CloudPulse：一款针对AWS云环境的SSL证书搜索与分析引擎

关于CloudPulse CloudPulse是一款针对AWS云环境的SSL证书搜索与分析引擎&#xff0c;广大研究人员可以使用该工具简化并增强针对SSL证书数据的检索和分析过程。 在网络侦查阶段&#xff0c;我们往往需要收集与目标相关的信息&#xff0c;并为目标创建一个专用文档&#xff0c…...

编程日记 2023/12/23 2:10:14

【网络安全】学习Web安全必须知道的一本书

【文末送书】今天推荐一本网络安全领域优质书籍。 目录 正文实战案例1&#xff1a;使用Docker搭建LAMP环境实战案例2&#xff1a;使用Docker搭建LAMP环境文末送书 正文 学习Web安全离不开Web&#xff0c;那么&#xff0c;需要先来学习网站的搭建。搭建网站是每一个Web安全学习…...

编程日记 2023/12/23 2:09:10

千帆 AppBuilder 初体验，不仅解决解决了我筛选简历的痛苦，更是让提效10倍！

文章目录 &#x1f31f; 前言&#x1f31f; 什么是百度智能云千帆 AppBuilder&#x1f31f; 百度智能云千帆 AppBuilder 初体验&#x1f31f; 利用千帆AppBuilder搭建简历小助手&#x1f31f; 让人眼前一亮的神兵利器 - 超级助理 &#x1f31f; 前言 前两天朋友 三掌柜 去北京…...

编程日记 2023/12/23 2:08:09

Ubuntu 常用命令之 cal 命令用法介绍

&#x1f4d1;Linux/Ubuntu 常用命令归类整理 cal命令在Ubuntu系统下用于显示日历。它可以显示任何特定月份或整个年份的日历。 cal命令的参数如下 -1&#xff1a;只显示当前月份的日历。-3&#xff1a;显示前一个月、当前月和下一个月的日历。-s&#xff1a;指定日历的开始…...

编程日记 2023/12/23 2:06:08

项目中webpack优化配置（1）

项目中webpack优化配置 一. 开发效率&#xff0c; 体验 1. DLL&#xff08;开发过程中减少构建时间和增加应用程序的性能&#xff09; 使用 DllPlugin 进行分包&#xff0c;使用 DllReferencePlugin(索引链接) 对 manifest.json 引用&#xff0c;让一些基本不会改动的代码先…...

编程日记 2023/12/23 2:03:03

【Qt之Quick模块】5. QML基本类型及示例用法

QML格式 QML基本类型 在 QML 中&#xff0c;有以下基本类型&#xff1a; int&#xff1a;整数类型。 Rectangle {function myFunction() {// 输出 debug 信息console.log("11 " (11));}Component.onCompleted: {myFunction();} }结果&#xff1a; 2. real&…...

编程日记 2023/12/23 2:00:01

MySQL运维实战（1.2）安装部署：使用二进制安装部署

作者&#xff1a;俊达 引言 上一篇我们使用了RPM进行安装部署&#xff0c;这是一种安装快速、简化部署和管理过程、与操作系统提供的包管理工具紧密集成的部署方法。此外&#xff0c;当你需要更高的灵活性和自定义性&#xff0c;并且愿意承担一些额外的手动配置和管理工作&am…...

编程日记 2023/12/23 1:57:59

ChatGPT一周年：开源语言大模型的冲击

自2022年末发布后&#xff0c;ChatGPT给人工智能的研究和商业领域带来了巨大变革。通过有监督微调和人类反馈的强化学习&#xff0c;模型可以回答人类问题&#xff0c;并在广泛的任务范围内遵循指令。在获得这一成功之后&#xff0c;人们对LLM的兴趣不断增加&#xff0c;新的LL…...

编程日记 2023/12/23 1:56:58

C++ Qt开发：Charts绘图组件概述

Qt 是一个跨平台C图形界面开发库&#xff0c;利用Qt可以快速开发跨平台窗体应用程序&#xff0c;在Qt中我们可以通过拖拽的方式将不同组件放到指定的位置&#xff0c;实现图形化开发极大的方便了开发效率&#xff0c;本章将重点介绍QCharts二维绘图组件的常用方法及灵活运用。 …...

编程日记 2023/12/23 1:54:56

基于Java+SpringBoot实现人脸识别搜索

基于JavaSpringBoot实现人脸识别搜索 引言 背景介绍 结合人脸识别技术&#xff0c;在工厂、学校、商场、餐厅等人流密集的场所进行监控&#xff0c;对人流进行自动统计、识别和追踪&#xff0c;同时标记存在安全隐患的行为及区域&#xff0c;并发出告警提醒&#xff0c;加强…...

编程日记 2023/12/23 1:50:52

【论文阅读】FreeU: Free Lunch in Diffusion U-Net

FreeU: 无需训练直接提升扩散模型生成效果。 paper&#xff1a;https://arxiv.org/abs/2309.11497 code&#xff1a;GitHub - ChenyangSi/FreeU: FreeU: Free Lunch in Diffusion U-Net 1. 介绍 贡献&#xff1a; •研究并揭示了U-Net架构在扩散模型中去噪的潜力&#xff0…...

编程日记 2023/12/23 1:48:51

TypeScript实战——ChatGPT前端自适应手机端，PC端

前言 「作者主页」&#xff1a;雪碧有白泡泡 「个人网站」&#xff1a;雪碧的个人网站 可以在线体验哦&#xff1a;体验地址 文章目录 前言引言先看效果PC端手机端 实现原理解释 包的架构目录 引言 ChatGPT是由OpenAI开发的一种基于语言模型的对话系统。它是GPT&#xff08;…...

编程日记 2023/12/23 1:46:49

自定义ORM(mybatis)源码(六)-类型处理器

自定义ORM(mybatis)源码(六)-类型处理器 模仿mybatis 用于处理 sql 设置参数类型和 执行 sql 后响应字段的类型处理 TypeHandler public interface TypeHandler<T> {/*** sql 设置参数值* param pstmt* param i* param value* throws SQLException*/void setParamete…...

编程日记 2023/12/23 1:43:47

基于算法竞赛的c++编程（28）结构体的进阶应用

结构体的嵌套与复杂数据组织 在C中&#xff0c;结构体可以嵌套使用&#xff0c;形成更复杂的数据结构。例如&#xff0c;可以通过嵌套结构体描述多层级数据关系&#xff1a; struct Address {string city;string street;int zipCode; };struct Employee {string name;int id;…...

编程新知 2025/6/17 5:30:27

黑马Mybatis

Mybatis 表现层&#xff1a;页面展示 业务层&#xff1a;逻辑处理 持久层&#xff1a;持久数据化保存 在这里插入图片描述 Mybatis快速入门 ![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/6501c2109c4442118ceb6014725e48e4.png //logback.xml <?xml ver…...

编程新知 2025/7/2 16:56:57

【WiFi帧结构】

文章目录 帧结构MAC头部管理帧 帧结构 Wi-Fi的帧分为三部分组成&#xff1a;MAC头部frame bodyFCS&#xff0c;其中MAC是固定格式的&#xff0c;frame body是可变长度。 MAC头部有frame control&#xff0c;duration&#xff0c;address1&#xff0c;address2&#xff0c;addre…...

编程新知 2025/7/4 9:50:55

抖音增长新引擎：品融电商，一站式全案代运营领跑者

抖音增长新引擎&#xff1a;品融电商&#xff0c;一站式全案代运营领跑者 在抖音这个日活超7亿的流量汪洋中&#xff0c;品牌如何破浪前行&#xff1f;自建团队成本高、效果难控&#xff1b;碎片化运营又难成合力——这正是许多企业面临的增长困局。品融电商以「抖音全案代运营…...

编程新知 2025/7/4 5:46:22

对WWDC 2025 Keynote 内容的预测

借助我们以往对苹果公司发展路径的深入研究经验&#xff0c;以及大语言模型的分析能力&#xff0c;我们系统梳理了多年来苹果 WWDC 主题演讲的规律。在 WWDC 2025 即将揭幕之际&#xff0c;我们让 ChatGPT 对今年的 Keynote 内容进行了一个初步预测&#xff0c;聊作存档。等到明…...

编程新知 2025/7/3 3:03:05

汇编常见指令

汇编常见指令 一、数据传送指令 指令功能示例说明MOV数据传送MOV EAX, 10将立即数 10 送入 EAXMOV [EBX], EAX将 EAX 值存入 EBX 指向的内存LEA加载有效地址LEA EAX, [EBX4]将 EBX4 的地址存入 EAX&#xff08;不访问内存&#xff09;XCHG交换数据XCHG EAX, EBX交换 EAX 和 EB…...

编程新知 2025/7/4 10:27:56

USB Over IP专用硬件的5个特点

USB over IP技术通过将USB协议数据封装在标准TCP/IP网络数据包中&#xff0c;从根本上改变了USB连接。这允许客户端通过局域网或广域网远程访问和控制物理连接到服务器的USB设备&#xff08;如专用硬件设备&#xff09;&#xff0c;从而消除了直接物理连接的需要。USB over IP的…...

编程新知 2025/6/27 4:05:02

uniapp 字符包含的相关方法

在uniapp中&#xff0c;如果你想检查一个字符串是否包含另一个子字符串&#xff0c;你可以使用JavaScript中的includes()方法或者indexOf()方法。这两种方法都可以达到目的&#xff0c;但它们在处理方式和返回值上有所不同。 使用includes()方法 includes()方法用于判断一个字…...

编程新知 2025/6/16 22:10:11

为什么要创建 Vue 实例

核心原因：Vue 需要一个「控制中心」来驱动整个应用 你可以把 Vue 实例想象成你应用的**「大脑」或「引擎」。它负责协调模板、数据、逻辑和行为，将它们变成一个活的、可交互的应用**。没有这个实例，你的代码只是一堆静态的 HTML、JavaScript 变量和函数，无法「活」起来。 …...

编程新知 2025/6/21 2:36:09

django blank 与 null的区别

1.blank blank控制表单验证时是否允许字段为空 2.null null控制数据库层面是否为空 但是&#xff0c;要注意以下几点&#xff1a; Django的表单验证与null无关&#xff1a;null参数控制的是数据库层面字段是否可以为NULL&#xff0c;而blank参数控制的是Django表单验证时字…...

编程新知 2025/6/16 18:14:24