html语义化 -------<fieldset>和<legend>
为什么HTML代码要语义化,除了代码可读性好以外,SEO有帮助外,最主要的还是对一些屏幕阅读设备或者其他辅助阅读设备友好,
可以让用户在条件受限的条件下依然可以正常使用我们的产品,比方说鼠标坏了,又或者说视力有障碍的用户等等。
fieldset,legend元素在CSS布局中的应用
<fieldset>
<legend>标题</legend>
</fieldset>
效果如下(实时):
会看到,有一个方框框,但是这个框不是完全闭合的,有个开口,这个开口上面的就是<legend>
里面的文字。注意,这里有2个非常重要的点,第1个就是开口,也就是线并没有从文字下面穿过去,这个文字的背景看上去是白色的,实际上,咳咳,是透明的,再说一遍是透明的。类似这种效果,如果你想使用其他标签和CSS模拟,一般想到的就是用个背景色覆盖,使用背景色的问题在于,如果换了个背景,这个覆盖就穿帮了。而透明没有这种担忧,各种背景各个模块都可以自如地飞起来;第2个就是文字是压在线上的,传统的标签我们写个border
属性,里面的文字肯定是在border
里面的,但是,<legend>
偏不,直接压在线上,天然的,你还别说,如果用CSS来模拟这种效果,还真要下点成本的。
基本上,各个浏览器下都是这种框框开口标题文字的效果,我大致看了下,Firefox浏览器的最有质感(设一个深色背景,如下截图),IE就是个浅边框,在白色背景下效果不错,而Chrome浏览器的边框类型是groove
(沟槽)。
每个浏览器中对filedset和legend的效果都有差别
如果你有文字压线的效果,使用<fieldset>
和<legend>
布局是成本最低的,
标题想居中,使用align="center"
这个HTML属性,如果是实色边框,
无论是solid
或者double
都可以自如使用,没有兼容性问题,但如果是虚线边框,则要考虑IE浏览器穿透的问题。
demo:
fieldset {
border:0;
border-top:1px dashed #aaa;
}
legend {
color: #999;
/* for IE */
background-color: #fff;
}
<fieldset>
<legend align="center">标题</legend>
</fieldset>
参考来自:http://www.zhangxinxu.com/wordpress/2016/11/html-fieldset-legend-element-css-layout/
html语义化 -------<fieldset>和<legend>的更多相关文章
- 理解HTML语义化
1.什么是HTML语义化? <基本上都是围绕着几个主要的标签,像标题(H1~H6).列表(li).强调(strong em)等等> 根据内容的结构化(内容语义化),选择合适的标签(代码语义 ...
- 浅谈web语义化
在前端的编程道路上,是否听过html的结构语义化? 是否觉得自己前端嘛,只要做出炫酷的效果,编写出牛逼的JavaScript代码就ok啦.div+css所向无敌,干嘛要用其他标签呢. 是啊,正如上面所 ...
- Html技巧 语义化你的代码
首先是关于语义(Semantics)和默认样式的区别,默认样式是浏览器设定的一些常用tag的表现形式,语义化的主要目的就是让大家直观的认识标签(markup)和属性(attribute)的用途和作用. ...
- 语义化HTML
一.怎样语义化html结构 语义化是指用合理HTML标签以及其特有的属性去格式化文档内容. 正确语义化----结构(html)才是重点,样式(css)是用来修饰结构的.所以要先确定html,确定标签, ...
- [转载]理解HTML语义化
声明: 本文转载于:freeyiyi1993博客. 原文地址:http://www.cnblogs.com/freeyiyi1993/p/3615179.html 1.什么是HTML语义化? < ...
- [html] HTML结构的语义化
原文链接:http://www.cnblogs.com/freeyiyi1993/p/3615179.html 1.什么是html语义化 选择合适的html标签,便于开发者阅读和写出更优雅的代码的同时 ...
- THML结构语义化之table/form
以table/form标签语义化,做为博客首贴 应用场景1-table表格 <table> <caption> <thead> <th colspan=&qu ...
- 为什么要html语义化?
1.什么是HTML语义化? <基本上都是围绕着几个主要的标签,像标题(H1~H6).列表(li).强调(strong em)等等> 根据内容的结构化(内容语义化),选择合适的标签(代码语义 ...
- HTML的语义化,你需要深入了解
有关HTML的一些基础课程,很多网站都有讲,于我而言,真正实践起来,我只要求我能够让它表现出我所想要的结果即可.然而,这种要求,对于后期的维护与测试,真的是......想起日前我们所做的这个项目,那里 ...
随机推荐
- 某考试 T1 line
状压dp+矩阵转移,据说正解是dfs出的合法状态,,但难道不是三个for就行了吗2333 #include<iostream> #include<cmath> #include ...
- VirtualBox虚拟机出现被召者 RC: E_NOINTERFACE (0x80004002)
选中VirtualBox右键 就可以正常运行了
- Java的不定参数(eg:Object...)(转)
第一个例子: public class VariArgs { public static void main(String[] args) { test(); test("aaa" ...
- java消息队列怎么用
消息队列的使用场景是怎样的? 经常听到诸如rebbitmq,activemq,请教一下各位前辈消息队列的使用场景是怎样的,什么时候会用到它 校验用户名等信息,如果没问题会在数据库中添加一个用户记录 ...
- scrapy的自动限速(AutoThrottle)扩展
该扩展能根据Scrapy服务器及您爬取的网站的负载自动限制爬取速度. 设计目标 更友好的对待网站,而不使用默认的下载延迟0. 自动调整scrapy来优化下载速度,使得用户不用调节下载延迟及并发请求数来 ...
- hadoop-mapreduce中reducetask执行分析
ReduceTask的执行 Reduce处理程序中须要运行三个类型的处理, 1.copy,从各map中copy数据过来 2.sort,对数据进行排序操作. 3.reduce,运行业务逻辑的处理. Re ...
- mysqldbcopy 数据库复制工具
命令参考 mysqldbcopy --source=root:'xxxxxxx'@database s --destination=root:'^%xxxxxz'@databases orange:o ...
- PHP内核探索:内存管理开篇
内存是计算机非常关键的部件之一,是暂时存储程序以及数据的空间,CPU只有有限的寄存器可以用于存储计算数据,而大部分的数据都是存储在内存中的,程序运行都是在内存中进行的.和CPU计算能力一样, 内存也是 ...
- CloudStack系统虚拟机启动但不在Host表中
有网友问到这个问题,CloudStack中,系统虚拟机正常启动,Running状态. 可是在host表中没有对应项,上传下载模板等功能也不正常. 原因:系统虚拟机启动之后,会通过管理网段主动连接man ...
- 【linux驱动分析】之dm9000驱动分析(三):sk_buff结构分析
[linux驱动分析]之dm9000驱动分析(一):dm9000原理及硬件分析 [linux驱动分析]之dm9000驱动分析(二):定义在板文件里的资源和设备以及几个宏 [linux驱动分析]之dm9 ...