当前位置: 首页 > 图文教程 > 网页制作 > HTML/XHTML教程 > Xhtml不常用却很有用的标签

HTML/XHTML教程
XHTML中不再使用HTML中的一些废弃元素
语义化的HTML结构怎么理解
Web 标准学习 理解结构和表现相分离
html5 标签
HTML5 新事件 小结
HTML5 b和i标记将被赋予真正的语义
HTML是网页制作者必须要学习掌握的
HTML DOCTYPE的缩写
Readonly和Disabled的区别
16进制颜色代码(完全)
H标记要在网页制作中合理使用
abbr标记和acronym标记
知名浏览器对DOCTYPE模式的选择机制
用标准dl,dt,dd标签抛弃table列表
html 标签ID可以是变量
iframe 自适应大小实现代码
HTML5 解析规则分析
HTML减肥 精简HTML标记制作网页
HTML5 File API改善网页上传功能
HTML 5 Reset Stylesheet

HTML/XHTML教程 中的 Xhtml不常用却很有用的标签


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-10-11   浏览: 76 ::
收藏到网摘: n/a

   Xhtml有很多不常用却很有用的标签。有的能事半功倍,有的能改进语义,有的则能提高易用性,我总结了一些,总结的原则是有用而且能用,就是大多数浏览器得支持,否则就不算“上上签”了。只能望“签”兴叹又有什么用呢?
<base>标签
    作用: 标签为页面中所有链接指定默认链接地址或链接目标。有时候我们需要让首页的链接全部在新窗口中打开,我们一般会这样写链接,而使用这个标签就能一下搞定了!
    属性:
        Href:链接地址
        target:目标,他的值可以是_blank,_parent,_self,_top,可以在除Strict模式下使用,这个用法我最先是在163.com上发现的。
    用法:
<head><!—写在head标签之间--> 
<base href="http://www.qq.com/" /> <!—将默认链接定义为http://www.qq.com/--> 
<base target="_blank" /> <!—将默认链接目标定义为新窗口中打开--> 
</head>


<caption>标签
    作用:caption标签用来定义表格的标题,给表格定义一个标题,来说明这个表格是干什么的,岂不是很有“语义”,caption应该写在table之后,默认的样式是居中显示在表格的顶部。你可以通过css来改变它的样式。
    用法:

<table width="200" border="1" > 
<caption> <!--caption应该写在table之后--> 
其实我是caption 
</caption> 
<tr> 
<td>&nbsp;</td> 
<td>&nbsp;</td> 
</tr> 
<tr> 
<td>&nbsp;</td> 
<td>&nbsp;</td> 
</tr> 
</table>


<thead>标签、<tbody>标签、<tfoot>标签
    作用:thead、tfoot 以及 tbody标签跟他们的名字那样,分别是表格的头部(很多人只是用th)、主题、和底部,他们能让表格更加语义化的同时,也能让我们更加方便的控制表格的表现。国外还有人用很变态地方法用这三个表其做出标题能跟随表格,或者tbody固定高度,多出的行数出现滚动条。有兴趣的可以搜素下或者是这做一下。
注意:如果您使用 thead、tfoot 以及 tbody 元素,您就必须使用全部的元素。它们的出现次序是:thead、tfoot、tbody,这样浏览器就可以在收到所有数据前呈现页脚了。
    用法:

<table border="1"> 
<thead> 
<tr> 
<th>科目</th> 
<th>分数</th> 
</tr> 
</thead> 
<tfoot> 
<tr> 
<td>总分</td> 
<td>159</td> 
</tr> 
</tfoot> 
 
<tbody> 
<tr> 
<td>语文</td> 
<td>99</td> 
</tr> 
<tr> 
<td>数学</td> 
<td>60</td> 
</tr> 
</tbody> 
</table>


<fieldset>标签和<legend>标签
    作用:<fieldset>元素用来分类表单中的元素,而<legend>则能给这个组定义一个标题。你一定见过类似下面domo的布局吧!他们也可以通过css定义样式。
    用法:

<form> 
<fieldset> 
<legend>基本信息</legend> 
姓名: <input type="text" /> 
性别: <input type="text" /> 
</fieldset> 
</form>


<sub> 标签和<sup> 标签
    作用:<sub> 标签和<sub> 标签分别是上标和下标,虽然他们在各个浏览器的表现不一样,你
同样可以使用css定义他们的样式。
    用法:

2<sup>我是上标</sup> 
2<sub>我是下标</sub>


<label>标签
    作用:label 标签的使用可以扩大表单的点击区域来改进表单的易用性。看看下面的用法:点击文字的时候相当于点击了单选控件,这样用户体验是不是会更好一些?
    用法:

<form> 
<label for="nan">先生</label> 
<input type="radio" name="sex" id="nan" /> 
<br /> 
<label for="nv">女士</label> 
<input type="radio" name="sex" id="nv" /> 
</form>

<optgroup> 标签
    作用: 标签可以给select中的option进行分组,这在下拉项目很多的时候很有用,配合label标签给每组命名。你也可以像淘宝那样给每组用css定义不同的颜色。
    用法:
<select> 
<optgroup label="自驾游"> <!--配合label标签给每组命名--> 
<option>省内</option> 
<option>省外</option> 
</optgroup> 
<optgroup label="旅行社"> 
<option>省内</option> 
<option>省外</option> 
<option>国外</option> 
</optgroup> 
</select>

    你如果对更多的xhtml标签感兴趣,可以考虑看一看《HTML和XHTML权威指南》这本书,你也能在网上找到电子版的。我看过英文影印版的,虽然是英文但也不是太难看懂。
    你要是知道其他很有用的标签告诉我们吧!