HTML 标签学习之 fieldset

 现在提 HTML 标签，貌似有些老生常谈了，都说要合理地运用相应语义的标签，不过 HTML 标签那么多，在写代码的时候用到最多的要算是div,span,a,p,br,h1,h2,h3,ul,ol,li,dl,dt,dd,table系列,input系列,select,del,pre,code等标签，其他标签真的是很少用的到。没事的时候再回顾下稀有标签，也算是温故而知新吧~~

参考文献：HTML 4.01 / XHTML 1.0 Reference

<fieldset> 是常常被人们遗忘的最有用标签之一，本意是“域集合”，用于包含表单域元素，如 <input> ，效果是用细线表现出表单域。告诉浏览器这一块是表单集合。<legend> 标签用于给这个域加上标题。

示例：

 
<form> 
<fieldset> 
<legend>用户登录</legend> 
姓名：<input type="text" size="20" /> 
密码：<input type="password" size="20" /> 
<input type="button" value="登录" /> 
</fieldset> 
</form> 

效果：

因为有上面默认的线框和标题样式，fieldset 标签经常被用来实现标题文字覆盖着边线的效果。如

用户登录

姓名：   密码：   

 

 
<style> 
.ex_fieldset{border:1px dashed #390;padding:10px;} 
.ex_legend{padding:2px 15px;background:#f1f1f1;border:1px dashed #390;font:bold 12px/1.5 arial;color:#390;} 
</style> 
<fieldset class="ex_fieldset"> 
<legend class="ex_legend">列表标题</legend> 
<ul> 
<li>一些文字</li> 
<li>一些文字</li> 
<li>一些文字</li> 
<li>一些文字</li> 
</ul> 
</fieldset> 
 

列表标题

• 一些文字
• 一些文字
• 一些文字
• 一些文字

加上自定义样式之后往往可以起到事半功倍的作用。不过从标签语义角度考虑，并不是很建议这样去做，因为上例中 fieldset 元素内部并不代表一个表单域。