xhtml中使用的结构标签

来源:互联网 发布:淘宝退货预约快递上门 编辑:程序博客网 时间:2024/06/04 04:46

今天看到《xhtml中使用的结构标签》时有好多标签,而有些标签我也不熟悉,借此机会来整理一下.

结构: body, head, html, title

说下title吧:下面是dhtml手册上的.

TITLE 元素仅可在 HEAD 元素内使用。位于 TITLE 开闭标签之内的文本都会在浏览器的标题栏和 Microsoft Windows® 的任务栏上显示。对于 Web 页,“Internet Explorer”会被自动追加到标题后。而在 HTML 应用程序(HTA)中,仅会显示指定的标题。
要使用脚本在程序中设置标题,请使用 document.title 而不是设置 title 对象的 innerHTML 属性。有关更多信息,请参看 Q296113: 脚本无法更改 Web 页的文档标题。
此元素在 Microsoft® Internet Explorer 3.0 的 HTML 中可用,在 Internet Explorer 4.0 的脚本中可用。
此元素是块元素。
此元素需要关闭标签

文本

abbr, acronym, address, blockquote, br, cite, code, dfn, div, em, h1, h2, h3, h4, h5, h6, kbd, p, pre, q, samp, span, strong, var 

<abbr>标签

一个词或短语的简称(如“HTML”)。通常同时使用title属性来指出原词或原短语。
简称不一定是缩写,但缩写同时也是简称。注:Internet Explorer还不支持abbr。
<abbr>标记是用来标注一个缩写的,例子:

<abbr title="Hyper Text Marked Language">HTML</abbr><abbr title="Cascading Style Sheets">CSS</abbr><abbr title="Document Object Model">DOM</abbr>

IE中的替代用法:

<abbr title="Cascading Style Sheets"><span class="abbr" title="Cascading Style Sheets">CSS</span></abbr>

显示的效果: ,你把鼠标移到css上去看看.看到我的邮箱了吧,这个功能还不错.

注意:此元素只能放置在body中,而且使用在文字的行内。

对于ie中的替代用法,参看:在《IE中为abbr标签加样式》

<acronym>标签

标明缩写词。

此元素在 Microsoft® Internet Explorer 4.0 的 HTML 和脚本中可用。

此元素是内嵌元素。

此元素需要关闭标签。

<acronym>元素允许作者清楚地标识一个组成缩略语的字符序列(如: "WWW", "FNAC", "IRS", 等等). 标识缩略语的能力对于拼写检查, 语音系统, 其它的用户代理器工具来说是有用的。

例子:

<ACRONYM TITLE="Federal Bureau of Investigation">FBI</ACRONYM>

演示:把鼠标移到FBI上面
FBI

与abbr的区别:

<abbr>是用来为web页面上的简称(译者注:这里把简称和缩写分开而论,简称范围比缩写大,取首字母的缩写用<acronym>标签)添加适当标注的XHTML标签,Windows的IE浏览器暂不支持<abbr>标签。 在IE里,你可以应用CSS给<acronym>但是不能应用给<abbr>标签,IE会为<acronym>标签的title属性显示提示,但是会忽略<abbr>标签。

<address>标签

特定信息,如地址、签名、作者、此文档的原创者。

Microsoft® Internet Explorer 将 ADDRESS 元素的内容以斜体显示。

此元素在 Microsoft® Internet Explorer 3.0 的 HTML 中可用,在 Internet Explorer 4.0 的脚本中可用。

此元素是一个块元素。

此元素需要关闭标签。

示例

下面的例子使用了 ADDRESS 元素来对文本加上斜体的样式。

<ADDRESS>此文本将以斜体显示。</ADDRESS>

演示:

Http://blog.csdn.net/greenerycn

 

BLOCKQUOTE 元素 | blockQuote 对象

设置文本中的一段引语。

注释

此元素在 Microsoft® Internet Explorer 3.0 的 HTML 中可用,在 Internet Explorer 4.0 的脚本中可用。

此元素是块元素。

此元素需要关闭标签。

示例

下面的例子使用了 BLOCKQUOTE 元素将文本设置为引语,效果是缩进显示。

<P>他说,<BLOCKQUOTE>“你好!”</BLOCKQUOTE>


演示:

greenerycn

 

 

BR 元素 | br 对象


插入一个换行符。

就不说了.地球人都知道.csdn编辑器里是ctrl+enter产生,enter产生的是<p>

CITE 元素 | cite 对象


用斜体显示标明引言。

注释

所谓引言,就是对一本书、一篇报告或其它出版的来源资料的引用。

此元素在 Microsoft® Internet Explorer 3.0 的 HTML 中可用,在 Internet Explorer 4.0 的脚本中可用。

此元素是内嵌元素。

此元素需要关闭标签。

示例

下面的例子使用了 CITE 元素将引言以斜体显示。

<CITE>书的标题。</CITE>

演示:书的标题

CODE 元素 | code 对象


指定代码范例。 

注释

此元素在 Microsoft® Internet Explorer 3.0 的 HTML 中可用,在 Internet Explorer 4.0 的脚本中可用。

此元素是内嵌元素。

此元素需要关闭标签。

示例

下面的例子使用了 CODe 元素将文本以展现计算机代码的字体显示,如值和变量名。

<CODE>这里是以小型固定宽度字体显示的文本。</CODE>

演示:int i=5;

 

DFN 元素 | dfn 对象


表明术语的定义实例。

注释

此元素在 Microsoft® Internet Explorer 3.0 的 HTML 中可用,在 Internet Explorer 4.0 的脚本中可用。

此元素是一个块元素。

此元素需要关闭标签。

示例

下面的例子使用了 DFN 元素来标明术语定义。

<DFN>HTML 代表超文本标记语言。</DFN>

演示:HTML 代表超文本标记语言。

EM 元素 | em 对象


强调文本,通常以斜体渲染。

注释

此元素在 Microsoft® Internet Explorer 3.0 的 HTML 中可用,在 Internet Explorer 4.0 的脚本中可用。

此元素是内嵌元素。

此元素需要关闭标签。

示例

下面的例子使用了 EM 元素来强调文本。

<EM>此文本将以某种方式强调(最可能为斜体)。</EM>

演示:此文本将以某种方式强调(最可能为斜体)。

KBD 元素 | kbd 对象


以固定宽度字体渲染文本。

注释

此元素在 Microsoft® Internet Explorer 3.0 的 HTML 中可用,在 Internet Explorer 4.0 的脚本中可用。

此元素是内嵌元素。

此元素需要关闭标签。

示例

下面的例子使用了 KBD 元素将文本以固定宽度字体渲染。

<KBD>此文本将以固定宽度字体渲染。</KBD>

演示:aabbccdd

无聊,一个定义格式的标签

PRE 元素 | pre 对象


以固定宽度字体渲染文本。

注释

PRE 元素内的文字是已经格式化的。空格和回车都是预留的。

此元素在 Microsoft® Internet Explorer 3.0 的 HTML 中可用,在 Internet Explorer 4.0 的脚本中可用。

此元素是块元素。

此元素需要关闭标签。

示例

下面的例子使用了 PRE 元素格式化文本,以便渲染时与输入时相同。

<PRE>此文本的格式化效果与输入时完全相同。</PRE>

演示: 每行都有一个回车

greenerycn

 这个可以用来格式化输出,不用打<br>

Q 元素 | q 对象


分离文本中的引语。

注释

此元素在 Microsoft® Internet Explorer 4.0 的 HTML 和脚本中可用。

此元素是内嵌元素。

此元素需要关闭标签。

示例

下面的例子使用了 Q 元素分离文本中的引语。

<P>他说,<Q>“你好!”</Q>

演示:

he said: “hello!”

搞不懂这个干什么用???

SAMP 元素 | samp 对象


指定代码范例。

这个和code一样,看不出区别.

VAR 元素 | var 对象


定义编程变量。通常以斜体渲染。

注释

VAR 元素实际的格式化效果由浏览器决定。Internet Explorer 将 VAR 元素以斜体渲染。

又是一个定义样式的标签.要这个干什么?和结构有关?

有篇文章讲了这些标签的用处 控制文本 Mastering Text

剩下的都是常用的.

链接 



列表

dl, dt, dd, ol, ul, li 

表单

form, input, label, select, option, textarea 

表格

caption, table, td, th, tr 

图片

img 

对象

object, param 

meta

外部调用

link 

接着转载一篇文章来解释上面的东西,我就不费话          常用XHTML标签使用说明 了:

 

XHTML里有很多的标签,但是经常用到的也就是那么几个,也只要掌握这几个也就可以了。下面我们一一列举:div,p,span,ul,li,dl,dt,dd,a,img,h,strong,em

一段时间以来,发现有很多人XHTML都不会用,不光是普通的初学者,有的程序员都不是很清楚该怎么写这个XHTML,我这里呢算是把一些常见的应用问题做一个总结,也算能使得大家能在沟通,合作上能形成默契。

XHTML里有很多的标签,但是经常用到的也就是那么几个,也只要掌握这几个也就可以了。下面我们一一列举:div,p,span,ul,li,dl,dt,dd,a,img,h,strong,em

div 在我的脑子里我一直把他想作是一个瓶子或是箱子,我的感觉它挺硬的。这个div没有什么特性的意义,可以使用在很多地方,也就是说他可以装不同的东西。他的正确的写法是
<div></div>必需要有封口。大家都用来做布局之用,也有用来作为存放文章形成段落,实际上,这个做法并不是很好,因为作为文章的分段自然有一个特定的标签来用。那就是下面要讲的<p></p>标签,不过用DIV来再整体的包住所有的段落。这是非常实用的。

p 这是一个有特定语义的标签,表示段落,是用来区分段落的。在大部分的浏览器中对P基本上都有一个上下的边距。但是没有行首缩进,因为行首缩进只是表示段落的方式但是不是一定或是必需的。所以在用P标签的时候如果需要可以针对P设定一下行首缩进,我是推荐在文章以外的地方不要使用P,因为P是有一定语义的,如果用在别的地方恐不合适。正确的写法是
<p></p>

span 这也是一个非常常用的标签,这个标签可以说与div很像,没有什么特定的意义,只是他是一个级联元素,不是块级元素。我一直把它看作是一个袋子,他不像箱子那样可以有自己的宽高,他的宽高只能随着内容的多少而定,所以很像是袋子。这个标签与div正好互补。

ul,li 这是一个列表,在列表中,除了UL还OL,不过我觉得OL有点像是鸡肋。因为UL通过CSS定义一样可以有OL的数字排序效果。所以一般我不推荐使用 OL,有UL就可以了。UL是块级的,他的子级li也是块级标签。正确的写法是
<ul><li></li>< /ul> LI标签是被UL标签包裹的,在UL标签里可以有无数个LI标签,LI标签不能独立使用。并且LI标签一定要封口,这不光是美观问题,对于后期的维护也很有好处。很多程序员都不喜欢把这个LI封口。UL列表的用处主要是列举出一维的,同一类型的数据。具体的比如使用在菜单上,文章中列数的一些条例等等。在列表中有一种特别的形式与UL是不一样的。那就是下面的DL

dl,dt,dd 这是一个很特别的三个标签的组合。这里的DT是指标题,DD是指内容。DL是包课他们的容器。正确的写法是
<dl><dt> </dt><dd></dd></dl>在DL里可以有很多组的DT,DD,当出现很多组的时候尽量是一个DT配一个DD,如果DD中内容很多,可以在DD里加P标签配合使用。DL列表是一个非常好的列表形式,可以多加利用。

a  这表示链接,是一个特定属性的,也是网页中最为神奇的标签。因为它才让无数的网页都连在了一起。正确的写法是:
<a href="" title=""></a>其中的href是表示目标地址,TITLE是鼠标悬停提示文字,这是可有可无的。但是有必是利大于无。

img 这是图片标签,也是个特定属性的标签。正常写法是:
<img src="" alt="" title=""/> 这里的src是目标地址,ALT与TITLE是替换文字,ALT是 IE特定的,TITLE是其它浏览器的通用的。不过记得后面的反斜线那是一定要有的。

H 这是一个系列的标签,从H1到H6,一共六个,有人说太少了,有人说正好用,有人说用不了这么多。反正我是觉得差不多。正确写法是:
<h> </h>主要是用来存放标题,也有一些朋友用来作它用,个人觉得这个标签还是让他安生一点,就让他做标题的作用。这六个标签之间最好不要出现什么相互包含的事。

strong 这个意思是着重,这是有语义的,作用也很简单。至于样工,是加粗着重,还是用色彩表明着重,那都是自行选择。正确的写法是
<strong></strong>

em 这个与strong很像,是表示强调。一般浏览器的默认值是斜体。使用方式与strong一样。写法是:
<em></em>

这里没有说表单,因为表单基本上没有什么变化,也没什么可特别说的。

     今日google 
<dt>的用法突然找到了小毅的博客,感觉这篇文章讲的很好。很多初学的朋友喜欢把所有的任务都交给 DIV,另外span和p也经常滥用。这篇文章给了DIV和SPAN一个很好的解释:“箱子”和“袋子”。

 

最后再说下Label:

LABEL 元素 | label 对象


为页面上的其它元素指定标签。

注释

要将 LABEL 绑定到其它的控件,请将 LABEL 元素的 FOR 属性设置为与该控件的 ID 相同。将 LABEL 绑定到控件的 NAME 属性毫无用处。但是,要提交表单,你必须为将 LABEL 元素所绑定到的控件指定 NAME

如果用户单击 LABEL,则会先触发 LABEL 上的 onclick 事件,然后触发由 htmlFor 属性所指定的控件上的 onclick 事件。按下 LABEL 设定的快捷键将设置焦点但并不触发 onclick 事件。

标签不允许嵌套。

此元素在 Microsoft® Internet Explorer 4.0 的 HTML 和脚本中可用。

此元素是内嵌元素。

此元素需要关闭标签。

主要用for属性

功能:表示label标签要绑定的html元素,你点击这个标签的时候,所绑定的元素将获取焦点。
用法:<label for="inputbox">姓名</label><input id="inputbox" type="text">

实现Delphi中group效果的标签

FIELDSET 元素 | fieldSet 对象


在字段集包含的文本和其它元素外面绘制一个方框。

<FIELDSET>元素帮助表单设计者技术性地把控件成组.成组控件使用户更容易明白它们的意图,同时也可以帮助可视用户代理器和面向语音的语音导航用户代理器.这些元素的适当使用使得有残疾的人们更易于操作.
示例:

<FIELDSET ID="fld1" STYLE="width:250">
<LEGEND ALIGN="left">Choose a topic</LEGEND>    //设置方框显示的字
</FIELDSET>

演示:

Greenerycn//设置方框显示的字 我是greenerycn!

BASE 元素 | base 对象


指定一个显式 URL 用于解析对于外部源的链接和引用,如图像和样式表。

示例:

下面的例子设置了文档的基础 URL 到一个引用文件夹。Internet Explorer 使用 BASE 元素来解析指向 http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/href_2.html 的链接。

<HTML><HEAD><BASE HREF="http://msdn.microsoft.com/workshop/author/dhtml/reference/"/></HEAD><BODY>单击<A href="../properties/href_2.html">此处</A>查看关于 href 属性的内容。</BODY></HTML>
这个用来设置路径用..


参看文档:

了解不常用的HTML标签用法 http://www.webdn.com/web_file/html/H0607111/

在IE中为abbr标签加样式 http://www.knowsky.com/301379.html

初步认识label标签 {for 、accesskey}  http://www.maxo.cn/blog/article.asp?id=37

控制文本 Mastering Text http://www.codecoke.com/Tech/web-design/mastering-text.htm

网页制作完全手册 Microsoft MSDN Library

原创粉丝点击