做一个wiki页面是体验HTML语义的好方法
HTML语义:如何运用语义类标签来呈现Wiki网页
在上一篇文章中,我花了大量的篇幅和你解释了正确使用语义类标签的好处和一些场景。那么,哪些场景适合用到语义类标签呢,又如何运用语义类标签呢?
不知道你还记不记得在大学时代,你被导师逼着改毕业论文格式的情景,如果你回想一下,你在论文中使用的那些格式,你会发现其实它们都是可以用 HTML 里的语义标签来表示的。
这正是因为 HTML 最初的设计场景就是“超文本”,早期 HTML 工作组的专家都是出版界书籍排版的专家。
所以,在这一部分,我们找了个跟论文很像的案例:Wikipedia 文章,这种跟论文相似的网站比较适合用来学习语义类标签。通过分析一篇 Wiki 的文章用到的语义类标签,来进一步帮你理解语义的概念。
你可以在电脑上,打开这个页面:
https://en.wikipedia.org/wiki/World_Wide_Web
为了防止这个页面被修改,我们保存了一个副本:
http://static001.geekbang.org/static/time/quote/World_Wide_Web-Wikipedia.html
这是一篇我们选择的 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,所以代码可能是类似这样的:
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 标签。
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
OpenAI 发布安全指南,董事会有权推翻 CEO 决策
OpenAI 正在扩展其内部安全流程,发布了一个名为 Preparedness Framework (测试版) 的指导方针,旨在帮助跟踪、评估、预测和防范未来将存在的高级人工智能模型或前沿模型相关的风险。 该框架提出:对模型进行评估并开发持续更新的“记分卡”。评估结果将有助于评估风险并衡量缓解策略的有效性。记分卡可以衡量和跟踪潜在危害的各种指标,例如模型的功能、漏洞和影响;并在达到某些风险阈值时触发审查和干预措施。“我们的目标是探究不安全因素的具体边缘,以有效降低所揭示的风险。” 他们将风险划分为四个类别和四个级别。类别包括网络安全、CBRN(化学、生物、辐射、核威胁)、说服和模型自主,风险级别分为低、中、高和严重。只有缓解后得分在"中"或以下的模型才能部署,得分在"高"或以下的模型才能进一步开发针对高风险或临界(缓解前)风险级别的模型,则将实施额外的安全措施。 此外,OpenAI 还将创建一个专门的团队来实施该框架,监督技术工作和安全决策的运作结构。Preparedness 团队将开展技术工作,检查前沿模型的局限性,进行评估并综合报告;而跨职能的安全咨询小组,则负责审查所有报告并将其...
- 下一篇
开源不挣钱?这个项目上线半年月入超 30w
很兴奋的告诉大家,Sealos 自从 6 月份上线以来,仅半年时间注册用户已经突破 7万,月收入超过 30w,本文来向大家介绍我们是怎么做开源商业化的。每月平均增速超过 40%,而且这些收入大部分来自用户充值,或者是通过开源社区主动找到我们付费。 商业化的重要性 作为一家创业公司做开源,我们除了融资那点钱,没有别的收入来源,不像大厂可以有其它现金流来补开源这块,我们不考虑商业化那就会死,死了项目就无法维护和加大投入,最终就是用户和我们双输。 而有了能走通的商业模式,我们就能创造营收,有了营收就可以招更多的人,融更多的钱,加大更多的投入,发展更大的市场,客户多了边际成本就可以下降,每个用户也就能得到价格更便宜,质量更好的产品,是个良性循环,资金像血液一样驱动整个项目蓬勃向前发展,最终用户和我们都受益,双赢。 fake.js 作者因为没有好的商业模式而关停项目就实属可惜。 当然我也非常敬重那些非常有情怀只做免费开源视金钱如粪土的人,不过在我看来钱是工具,是杠杆,有这个可以让项目几十上百倍速度发展。 那为什么不闭源 既然要收钱干嘛还要开源?来搞伪开源嘛? 首先,我自己乃至我们整个团队都觉得开...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- SpringBoot2整合Thymeleaf,官方推荐html解决方案
- Docker使用Oracle官方镜像安装(12C,18C,19C)
- SpringBoot2配置默认Tomcat设置,开启更多高级功能
- SpringBoot2编写第一个Controller,响应你的http请求并返回结果
- CentOS8编译安装MySQL8.0.19
- SpringBoot2整合MyBatis,连接MySql数据库做增删改查操作
- CentOS7设置SWAP分区,小内存服务器的救世主
- Jdk安装(Linux,MacOS,Windows),包含三大操作系统的最全安装
- CentOS8安装MyCat,轻松搞定数据库的读写分离、垂直分库、水平分库
- CentOS7,CentOS8安装Elasticsearch6.8.6