夸克轻站点是不是html5,聊一点你可能不知道的HTML

HTML(HyperText Markup Language)是构建Web的最基础部分之一,也可以说是构建Web世界的一砖一瓦。它定义了Web页面或应用的内容的含义和结构。HTML中包含了很多种不同的标签元素,用来更好的帮助你构建Web能让客户端更好的理解,更正确的显示,也能更好的帮助搜索引擎理解页面,还可以更好的利于屏幕阅读技术。但不幸的是,很多开发者都认为HTML仅是一种由元素标签构建成的标签性语言,太过于简单,没有什么可以值得去研究和思考的。如果你也是这么想的,那么接下来的内容可能对你会没有任何的意义;如果不是的话,那么你可以继续往下阅读。

接下来在这篇文章中和大家聊一点你可能对HTML不太熟悉的东西。

你可能不知道的HTML标签

在现代Web开发中,特别是依赖于JavaScript的框架(比如React、Vue等),很多开发者构建的Web页面中能看到的标签元素屈指可数,甚至全文或者整个项目只有 div标签元素。这样做不能说是错的,但对于一位专业的Web开发者来说,是不好的。因为这样构建出来的页面,在可读性、可访问性方面是不友好的。为什么这么说不在这里讨论,如果你想知道原因,可以阅读A11Y系列中的《编写HTML时要考虑可访问性》一文。这里只想和大家聊几个有用但不多见的HTML标签元素。

元素经历了一段坎坷的路程。它早在2009年就补引入到HTML5规范,不过在2011年被所取代,同年晚些时候该元素又重新回到HTML5规范,并且还得到了一定的改进,允许新的date/time格式。

HTML的元素可以用来表示机器可读的日期、时间或持续时间。它可以用于创建事件调度、归档和其他基于时间的函数。最为常见的使用场景,比如博客文章创建或发布的时间:

3ee9d2b4653fd2bb002d35ad3ca40c2b.png

元素常用来表示公历中的日期或时间。

元素和一样也是一个内联元素,并且必须有一个结束标记。当以最简单的形式使用时,元素的内容必须是有效的日期或时间字符串。

2020-05-23

23th May

starting at 8pm

8pm on my birthday

如果给定的日期不是正常日期或者在公历中最早的日期之前,请不要使用此元素。

简单地说呢,你可以在之间放置任何内容 —— 这是人类可读的部分。然后,与datetime属性一起使用,它能帮助搜索引擎生成更智能的结果,并帮助浏览器识别日期,浏览器可能会将日期用于向日历添加事件等特殊功能。

用来定义从文档中删除的文本,而是定义插入的文本。比如我们平时在Github上提交的代码时,有删除的,有插入的,比如:

c7673d384dc22fd5c266cf54e3a1dc6d.png

针对这样的场景,使用标签就非常贴合使用场景,或者说更符合语义化。

这两个元素除了支持所有的全局属性之外,还支持cite和datetime属性:

cite:该属性的值指向一个文档的URL,该文档解释了文本被删除或插入的原因

datetime:该属性指示的文档修改发生的时间和日期,并且该属性的值必须是一个有效的日期或者时间字符串。如果该值不能被解析为日期或者时间,则该元素不具有相关联的时间标记

但有些场景,看上去是像插入或删除的意义,但使用的时候还是需要仔细斟酌,比如:

d601a4345f8d813786e34c1a97f13d53.png

如果从UI样式上来看,有点符合,但从语义描述上来说有点牵强。但对于一些电子阅读产品,特别是能提供做笔记的阅读产品来说,就特符合,比如下面这个示例:

在HTML中还有另一个标签元素,样式上它和非常相似,而且也是一个语义标签,只不过标签已从HTML

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值