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

HTML/XHTML教程
一些不太常用的XHTML标签用法以及实例
网页中图片的设置涉及的三个问题
商业HTML邮件的制作建议
HTML Marquee 字符片段滚动
DOCTYPE 文档类型声明(网页爱好者必看)
纯HTML标签你熟悉多少?
HTML元素的ID和Name属性的区别
HTML meta的大作用
HTML标签tbody的用法与说明
HTML 特殊字符转换表
HTML基础 HTML的组成结构
HTML基础之HTML内容细则
Shtml 精简教程
浅谈html table 标签
html Frame、Iframe、Frameset 的区别
HTML 网页页面切换的各种变换效果
HTML的10个表格相关标记
让IE8启动IE7兼容模式的代码
HTML 结构化实现方法
xhtml的块级标记小结

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-10-11   浏览: 39 ::
收藏到网摘: 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权威指南》这本书,你也能在网上找到电子版的。我看过英文影印版的,虽然是英文但也不是太难看懂。
    你要是知道其他很有用的标签告诉我们吧!