html5中的 hr定位,被大家遗忘的 hr 标签元素
我们在 UI 还原的过程中,难免会碰到水平或垂直方向的分隔线。在现代 Web 的开发中,大部分前端开发者首先的方案是使用非
标签元素,通过 CSS 或 SVG 来制作分隔线,即使在使用 React 或 Vue 构建 Separator (或 Divier)组件,也是采用非
标签。可以说,时至今日,
标签元素已被大部分开发者给遗忘了。既然如此,为什么我要用一篇文章的篇幅来聊
元素呢?这主要是出于 Web 的可读性(无障碍)出发点。希望阅读文这篇文章之后,你会有一个更好的选择。
UI 中的分隔线
在 Web 中,分隔线又被称之为“分离器”,主要用于两个区块之间的分隔,让用户从视觉上就能立马知道,分隔线的上下(或左右)两部分内容是有所区别的。另外,根据 UI 美感的需求,特别是在当下,分隔线的 UI 效果是非常有个性的,比如:
甚至还有一些更具艺术效果的分隔线 UI:
或许正因为上图这样的分隔线的效果,开发者很多时候更多的是采用 或 div 这样的 HTML 元素使用 background-image 来实现具有浓厚艺术氛围的分隔线 UI 效果。
不过,我们今天这篇文章主要目的并不是聊怎么使用 CSS 实现不同分隔线 UI 的效果,而更多的是 Web 的开发中,碰到分隔线的场景时,应该不应该使用
元素。
换句话说,我们怎么让有障碍的用户(比如,视障群体)在访问 Web 页面时,碰到分隔线,能很好的告诉这些用户。简单地说,使用
除了保持语义和可访问性之外,也能让其适应各种上下文。
HTML 中的
元素
HTML 的
标签元素最初所表示的含义是 段落元素之间的主题转换,例如,一个故事中的场景的改变,或一个章节的主题的改变。在 HTML 的早期版本中,它是一条水平线,即使是在现在,它在浏览器的渲染也是一条水平线,但目前被定义为语义上的,而不是表现层面上。
HTML 的
元素可以使用以下几个属性来设置其最初的表现形式:
align :设置对齐方式,默认值为left
color :设置颜色
noshade :去除阴影
width :使用像素或者百分比设置宽度
默认情况之下,客户端(浏览器)会
有一个默认渲染,比如说,就一个纯
时,浏览器给其默认的样式如下:
/* Chrome 版本 89.0.4389.90(正式版本) (x86_64) macOS Big Sur 11.2.3版本的系统 */
hr {
display: block;
unicode-bidi: isolate;
margin-block-start: 0.5em;
margin-block-end: 0.5em;
margin-inline-start: auto;
margin-inline-end: auto;
overflow: hidden;
border-style: inset;
border-width: 1px;
}
以下所示的都是 Chrome 89的渲染效果。
如果在
上显式设置不同的属性值,渲染的结果:
如果
元素上显式设置了一个非负值的 size 属性,那么浏览器将使用解析值(size 的值)除以 2 作为元素上 height 的值,且 border-width 的值为 1px
如果
元素上未显式设置 size 属性,那么浏览器不会渲染 height 值,只会渲染 border-width 的值为 1px
如果
元素上未显式设置 color 或 noshade 值,该元素的border-style将会渲染为inset,否则会渲染为 solid
注意,上面描述是仅针对于 Chrome 客户端的渲染结果进行的描述,具体效果如下:
为此,为了满足所有浏览器下的渲染效果能更一致,不建议在
标签上使用 color、align、noshade 和 size 来定义其渲染效果,而更趋向于使用 CSS 来设置其样式风格,比如:
hr {
color: gray;
border-style: inset;
border-width: 1px;
margin-block-start: 0.5em;
margin-inline-end: auto;
margin-block-end: 0.5em;
margin-inline-start: auto;
overflow: hidden;
}
而且最好是重置默认 hr 的样式:
/* CSS Normalizing */
hr {
box-sizing: content-box;
height: 0;
overflow: visible;
}
或者像下面这样重置 hr 的样式:
hr {
background-color: currentColor;
border: none 0;
height: 1px;
width: 100%;
color: inherit;
overflow: visible
}
这样一来,我们就可以使用 CSS 给 hr 添加不同的样式风格。这里暂且不表,后面会和大家一起聊聊,CSS 怎么来设置 hr 样式。
HTML 的语义化和 Web 可访问性
前面提到过,HTML 的
元素不仅仅表述的是视觉上的水平分隔线。它是具有一定语义的,并在其周围内容的上下文中发挥着有意义的作用。
HTML 的
元素表示段落级的主题分隔,例如故事中的场景变化,或参考书中某一章节的另一个主题的过渡。
简单地说,
元素具有 隐含的分隔符 的作用。
因此,
能被屏幕阅读器理解并朗读出来。比如说,
在 iOS(或macOS)上会被朗读成“分割线”:
如果是在 macOS的旁白(VoiceVoer)会朗读成“水平分离器”
也会被屏幕阅读器这样的ATs技术模式显示为一条“水平线”,这种情况之下,CSS 通常会被剥离出来,而 HTML 语义会被屏幕阅读器决定其样式。
有趣的是,
绘制的直线具有一个隐含 role 角色,其值是 separator,正如前面所看到的,如果不使用其他 CSS 来调整其布局方向,它默认情况之下是水平的。但我们在实际使用的时候,除了会用到水平的分隔线之外,还有可能会在垂直的方向用一条直线来分隔内容。比如下面这个示例:
The Article Contents element
The Article Contents element
The Article Contents element
The Article Contents element
html5中的 hr定位,被大家遗忘的 hr 标签元素相关推荐
- linux脚本获取经纬度,我想在命令行上获得linux设备的精确经纬度。就像HTML5中的地理定位。我的眉毛没法接触...
我想从我的Linux设备发送当前Lat Long的电子邮件.我试过在HTML5浏览器中进行地理定位,效果很好.但我希望它在命令行上.我尝试了很多选项,比如curl,geoip,通过IP访问一些网站,但 ...
- java中常用的定位方式有哪些_java-selenium八种元素定位方式
一.ID定位 一般情况下页面元素的id属性在当前网页中是唯一的所以使用ID定位可以保证定位的唯一性,不会像其他定位方式一样可能定位到多个页面元素.但有的网页页面元素没有id属性值,导致无法使用ID定位 ...
- html5 lang作用,HTML5中的lang属性,zh
先提供资源.如果我弄错了什么,请以这些文档为准: W3C文档.IANA已登记的子标签.BCP 47.RFC 5646. 二.格式简介 先上一张图片: 一个Language Tags,由①到⑦一共四个子 ...
- css中的position定位详解
css中的position定位详解 position属性指定了元素的定位类型. position属性的5个值:static,relative,fixed,absolute,sticky; 元素可以使用 ...
- html5中hr是什么意思,【hr是什么意思】hr的意思_hr指的是什么_亲亲宝贝网
hr的其他意思 生活中,hr最常见的用法就是人力资源了,但除了人力资源外,hr还有很多其他的意思. 1.化妆品牌 hr赫莲娜是欧莱雅集团旗下的顶极奢华美容品牌,也是现代美容行业的奠基品牌之一.hr赫莲 ...
- HTML5学习之二:HTML5中的表单2
(本内容部分节选自<HTML 5从入门到精通>) 对表单的验证 -------------------------------------------------------- •1.re ...
- html5中的dom中的各种节点的层次关系是怎样的
html5中的dom中的各种节点的层次关系是怎样的 一.总结 一句话总结:Node节点是所有节点的基类,所以都继承它的方法 1.dom提供在js中动态修改html标签的作用 比如增加修改标签等,并且是 ...
- HTML5中常用的标签(及标签的属性和作用)
1.标签:<!DOCTYPE> 作用:声明是文档中的第一成分,位于<html>标签之前. 2.标签:<html> 作用:此元素可告知浏览器其自身是一个HTML文档. ...
- html5中的图片的location,HTML5中的History和Location对象
今天发现原来HTML5对History和Location对象进行了改进,提供了几个新的API.我觉得,这用来结合Ajax来使用,弥补Ajax技术更新内容但不产生历史记录的问题,十分有用. 我很久之前就 ...
- HTML5中本地数据库(SQLLite)的基础
在html5中,可以像访问本地文件那样轻松的对内置数据库进行直接访问. html5中内置了两种数据库,一种为SQLLite,另一种为indexedDB. 在js中使用SQLLite数据库的步骤: 1. ...
最新文章
- 如何优雅的处理 Java 异常,可以参考这些建议
- python字典(dict)+常用方法操作+列表、元组、集合、字典的互相转换
- 使用 GNU profiler 来提高代码运行速度
- Spark UDF变长参数的二三事儿
- ITK:两个图像的像素分割
- Silverlight 2 DispatcherTimer和通过XAML创建UI元素
- SQL Server 数据库的维护(四)__游标(cursor)
- 道路交通安全违法行为记分管理办法的重大调整(2022版)
- 前端学习(628):数字类型
- 使用C#代码部署SharePoint 2013开发包简单总结(一)
- 雷军晒十多年前的手机:支持无线充电、内置8GB存储
- 浏览器渲染页面的原理及流程---------重绘与重排(回流)--优化
- 【自然框架】稳定版的Demo —— 三:主从表的维护方式
- python turtle画彩虹简单_Python基础实例——绘制彩虹(turtle库的应用)
- 聆听音乐-推荐好听的歌曲
- 【Linux】特别篇--sqlite3数据库的使用
- android如何使用ios14组件,iOS14如何添加和删除小组件 iOS14添加和删除小组件的方法...
- LTE学习-PSS主同步信号
- Overview Screen-Android 6.0开发者文档
- PostgreSQL与2020 PGConf.aisa数据库大会值得关注!