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>

fieldset,legend元素在CSS布局中的应用

最新文章

热门文章