5个你不知道确怕问的XHTML标记

介绍:
    根据经验,使用ASP.NET进行开发,我注意到一些重要XHTML标记,它们很少被网页开发者使用,甚至一次都没有过,所以我考虑些了本文介绍它们。
    大多数提到的标记是HTML兼容的,但是它们全部都是XHTML兼容的。我已经测试了这些标记在IE6和Firefor1.5。我已经确认Demo工程在XHTML1.1和XHTML1.0转换在W3C验证器。
    这些标记是optgroup,label,fieldset/legend,col/colgroup和acronym.在本文中,我指出了在IE和Firefor中显示的不同,此外,我也展示了它们与ASP.NET的关系。接下来是对每个元素的简单介绍:
1、optgroup
   


optgroup sample

<label for="county">County</label>
<select id="county">
<optgroup label="England">
<option>Surrey</option>
<option>Kent</option>
</optgroup>
<optgroup label="Scotland">
<option>Orkney</option>
</optgroup>
</select>

<label for="languages">Languages</label>
<select size="6" multiple="multiple" id="languages">
<optgroup label="Classical">
<option>C#</option>
<option>C++</option>
<option>Java</option>
</optgroup>
<optgroup label="Web">
<option>ASP.NET</option>
<option>PHP</option>
</optgroup>
</select>

optgroup代表着选项组,它是一个标记用来对一组元素进行分组,在select标记内和标记它们。它是一个州/城市,国家/州以及其他类似分组项的完美显示
不幸的是,这个标记不会被ASP.NET服务器控件产生,但是,我相信你能容易的从DropDownList,ListBox或者Item控件容易的继承并进行必要的修改来生成它。
2、lable

label sample

<label for="FirstName">Full&nbsp;Name</label>
<input id="FirstName" type="text" />
Gender:&nbsp;
<label for="male">Male</label>
<input id="male" type="radio" name="gender" />
<label for="female">Female</label>
<input id="female" type="radio" name="gender" />

label元素为一个form元素提供了一个标题。它的主要属性是for属性,这个属性指向你想要提供标题的元素。
另外为一个元素提供一个标题,label将容易的选中联合的元素;所以通过点击标题,你将为联合元素设置焦点,好像它让标题文字作为量和元素的一部分。在提供的Demo中,试试点击Full Name文字,那么那个文本框接下来就会被选中;当然,当你点Male的时候,单选按钮将被选中。
ASP.NET通过RadioBurron和CheckBox的服务器控件的Text属性声称这个标记。这里解释党点击文本就会把焦点移到控件上的秘密。在ASP.NET2.0种,Label服务器控件也有一个新属性 AssociatedControlID,这个属性是用来回发最为一个label控件联合指定元素通过重写为一个span元素。
3 fieldset/legend

fieldset sample

<fieldset>
CP is a good place to publish XHTML related articles.
</fieldset>

<fieldset>
<legend>Personal Information</legend>
<label for="FirstName">Full&nbsp;Name</label>
<input id="FirstName" type="text" />
Gender:&nbsp;
<label for="male">Male</label>
<input id="male" type="radio" name="gender" />
<label for="female">Female</label>
<input id="female" type="radio" name="gender" />
</fieldset>

fieldset是一个标记,用来创建一个frame, legend是一个选择性的标记,用来创建这个frame的标题
在ASP.NET2.0种,Panel网页服务器控件有一个新属性GroupingText,它把它重写成一个legeng和fieldset。但是,ASP.NET没有仍和标准的web控件生成这个元素。

4 col/colgroup

optgroup sample

<table border="1">
<colgroup>
<col width="150px" />
<col width="10px" />
<col width="220p" />
</colgroup>

<tr>
<td valign="top">1</td>
<td>&nbsp;</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>&nbsp;</td>
<td>4</td>
</tr>
</table>

colgroup标记是一个table的标记,它唯一的子标记是col标记。每个col标记影响表中的一个列。你能指定属性属性应用也所有的列在colgroup标记,通过col元素的指定每个列的属性。你也能省略colgroup标记,保留col标记。
使用col元素的优点是你只需要一次指定一个标记而不需要添加添加同样属性访问每个td标记,结果是少属性并且易于进行代码管理。
对于跨浏览器的的问题,使用width属性知识关于colgroup和col标记,因为我注意到Firefox不支持colgroup和col的所有属性。
很令人失望,ASP.NET的Table和GridView服务器控件不能生成这些标记。

5 acronym

acronym sample

<acronym title="Code Project">CP</acronym> is a good place to publish 
<acronym title="Extensible HyperText Markup Language">XHTML</acronym>
related articles.

acronym标记提供了通过title属性定义一个界限。通过使用这个标记,你正在帮助对本文不熟悉的读者,为搜索引擎和支持访问 更好的完善你的网页。
默认的 IE6在这个标记环绕的文字周围不显示任何标记;但是,Firefox显示一个下划线。两个浏览器都在你把光标停留在上面的时候显示全部的意思。
如果你喜欢这个标记,看一下abbr(abbreviation)标记,它有些相似的角色。

总结
我已经指出了一些我认为需要额外重视的标记;但是还跟多的标记如th,tf,base,addresss,bdo,blockquote,code,dl,dt,dd,以及dfn元素。
本位只是对这些元素的开篇;关于这些元素的列表和使用,参见wr schools,htmldog.com,你总能放回到专业的文档在world wide web consortium.

关于作者:

New
technology addict and C# fan. Started developing commercial
applications in 2000 with VB6 and MFC then moved to VB.NET, landed on
C# and ASP.NET and never looked back.
Currently focusing on enterprise architecture, design patterns, web controls and web services.
In his free time, he likes playing chess, going to gym and discovering new places with his lovely wife.
Lives in Guildford, UK and works at IPREO.C



原文地址:http://www.codeproject.com/html/FiveXhtmlElements.asp
Demo地址:http://www.codeproject.com/html/FiveXhtmlElements/FiveXhtmlElements_demo.zip

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值