导航

毅博客

分享本身就是件快乐的事,我因别人得到帮助而感到幸福

« 以图换字的几个方法及思路怎样管理好样式 »

XHTML代码的基本应用

本作品采用知识共享署名-非商业性使用-相同方式共享 2.5 中国大陆许可协议进行许可。
请大家帮忙:行文措辞难免有错,请大家在阅读时发现错误通过评论方式告诉我。谢谢大家

注:下文中原来关于ALT与TITLE属性的解释是错误的,经OLD9提醒现在已经更正,感谢老九对本文的校正!

一段时间以来,发现有很多人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>

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

蓝色理想阅读:http://www.blueidea.com/tech/web/2006/4248.asp

作者 / 振之
网站 / 毅博客 http://andy.andymao.com/
电话 / (86)025 5890 9295
  • quote 2.greengnn
  • http://www.jluvip.com
  • 我的总结是,结构代码按照语义来解释是最明确不过了,
    <div><span>的语义就是切割文档,并不是因为他没有语义,这就是为什么用<div>来进行布局(切割文档),而是用<span>来切割内联(display:inline;)元素。
    如<a href="#nogo">green<span class="black">gnn</span></a>
  • 2006-10-31 16:41:47 回复该留言
  • quote 3.comfill
  • 基本上也就会用这几个,其他的都不熟
    还有一个<br />,哈哈
  • 2006-10-31 17:25:38 回复该留言
  • quote 4.etng
  • http://www.etng.net
  • 振之对<br />这个标签怎么看?有人说这个最好不要用,但我觉得换行的时候挺好的,php里面也专门有个nl2br的函数直接把换行转化为这个,我想你能够谈一谈。
    关于那个alt我一直以为只有图片有,title是a的专利,不知道是不是对的
  • 2006-11-1 9:37:08 回复该留言
  • quote 5.振之
  • http://www.jonmax.com/
  • 现在就不用<br />为时过早,我觉得用还是可以用的。不要太计较这些,在没有一个好的方案出来替换之前,不要去放弃什么。

    OLD9给我的校正是:ALT是图片的在IE中的一个BUG,TITLE在图片也是通中的!
  • 2006-11-1 10:13:40 回复该留言
  • quote 6.zxfly
  • 我觉得ol并不算鸡肋,的确ul通过css定义可以有ol的效果,但是在没有css定义下的纯文档,有序列表前的序号(ol默认有吧……)看起来也更清晰,更符合语义话,呵呵。
  • 2006-11-1 11:23:22 回复该留言
  • quote 7.old9
  • http://old9.blogsome.com
  • 我也觉得 <br> 用用也无妨,特别是段内的换行(软回车),没法不用 <br>。
    因为 <br> 是break的意思,属于表现层的标签,所以 W3C 才不推荐使用,但又没有别的语义化的标签代替,不像 <b> 还有个对应的 <strong > 可以用。
    以后 <br> 会被 <line> 替代,不过那是以后了,现在没法子还是要用用的。
  • 2006-11-1 12:55:04 回复该留言
  • quote 9.振之
  • http://www.jonmax.com/
  • 语义上不重复,DL是一种列表。只是形式特别罢了。H可以灵活应用,但是DT只能在DL里出现,各有司职,虽说H配合DIV也能做出DL的效果,但是从语议上来讲,重复的H与DIV组合之间是没有必然关系的,而DL里的重复DT DD侧表示同属一个列表。比如我们可以用在对话上:
    <dl>
    <dt>citywill 说:</dt>
    <dd>使用<dl><dt></dt><dd></dd></dl>还是……h系列在语义上是不是有些重复?</dd>
    <dt>毅 说:</dt>
    <dd>语义上不重复,DL是一种列表。只是形式特别罢了。</dd>
    </dl>

    如果是用H与DIV组合,那从语义上可能效果并不是这么好了!
  • 2006-11-2 10:03:40 回复该留言
  • quote 12.Fantasy
  • 你好,小毅。我在使用DIV+CSS布局网站碰到些怪问题,1文字图片水平居中与垂直居中,2xhtml1.0里百分比高度问题。我到网上找了很久都没有完美的正解。不知道你有什么好方法没?
  • 2006-11-13 17:42:12 回复该留言
  • quote 13.振之
  • http://www.jonmax.com
  • WEB标准并不只是规范了代码这么简单,WEB标准更大程度上是改变了原有的设计与制作思路,所以对于“垂直居中”这些固有的传统作业的效果需要加以审视!在WEB标准里没有那种表格布局中的垂直居中,需要这种效果,只能通过层的定位来实现。要知道垂直居中并不是父层的事,更多的垂直居中的物体自己的事。
  • 2006-11-13 18:19:09 回复该留言
  • quote 14.greengnn
  • http://www.jluvip.com
  • 段落p就可以搞定了,br感觉确实没什么用处,列表也有li存在,块级元素自然会占满一行的。

    引自 old9
    我也觉得 &lt;br&gt; 用用也无妨,特别是段内的换行(软回车),没法不用 &lt;br&gt;。
    因为 &lt;br&gt; 是break的意思,属于表现层的标签,所以 W3C 才不推荐使用,但又没有别的语义化的标签代替,不像 &lt;b&gt; 还有个对应的 &lt;strong &gt; 可以用。
    以后 &lt;br&gt; 会被 &lt;line&gt; 替代,不过那是以后了,现在没法子还是要用用的。

  • 2006-11-21 19:11:12 回复该留言
  • quote 16.jackyshe
  • http://www.flashshe.com
  • 很多xhtml标签都有title 这个属性,主要作用用来定义元素的的元信息,比如下面这个例子:
    <a href="Jakob.html" title="Author biography">Jakob Nielsen</a>'s Alertbox for January 11, 1998.
    上面代码意思是说:这个 a标签 是用来描述 Author biography(作者介绍) 的。

    img标签的 alt属性主要是当浏览器不能显示图形时的一种替代方式,当图片不能显示时,alt属性的值则显示出来。
  • 2006-12-7 16:54:10 回复该留言
  • quote 17.NMTuan
  • 无意中到此,发现这里不错..正在慢慢消化您的知识.谢谢.

    感觉16楼的朋友解释的不错.
    title是一个描述.大部分xhtml标签都有的属性.
    alt是img的一个替换,主要是当pic无法显示的时候,起到提示作用.
    还有个问题,个人感觉ol不是鸡肋.从语义上讲,li是无序列表,只起一个列举的作用.而ol是有序的,更能强调列表的顺序性,在实验步骤啥的地方,还是用ol好.
  • 2007-2-6 19:16:51 回复该留言
  • quote 18.iu99
  • http://www.zdser.com
  • 我好像记得在那里看到过说img标签中的结束部分在 ["] 和[/>] 之间要有空格。br标签最好也那样写。不知是不是那样?
    我想请教一个关于img的问题。
    如下代码:
    <img .../>
    <p>sth.</p>
    这样的话,在ie6中img和p之间就会有一行空格。
    但如果写成:
    <img. .../><p>
    就没有,我试过了,只要img后面紧跟一个标签,就不会产生空白。
    不知这个问题如何解决?

  • 2007-2-6 22:46:06 回复该留言
  • quote 19.振之
  • http://www.jonmax.com
  • 引自 iu99
    我好像记得在那里看到过说img标签中的结束部分在 ["] 和[/&gt;] 之间要有空格。br标签最好也那样写。不知是不是那样?
    我想请教一个关于img的问题。
    如下代码:
    &lt;img .../&gt;
    &lt;p&gt;sth.&lt;/p&gt;
    这样的话,在ie6中img和p之间就会有一行空格。
    但如果写成:
    &lt;img. .../&gt;&lt;p&gt;
    就没有,我试过了,只要img后面紧跟一个标签,就不会产生空白。
    不知这个问题如何解决?


    <img../>
    <p>
    这样的形式之所以会有一个空档,是因为<img../>是一个内联元素,而如果在代码结构中换了行,其效果与 <img../>空格<p>是一样的。意思就是一个文本流突然中断虽然不会显示另起一行,但是浏览器会把这个当作是一个空格来处理。
    不光是<img../> 还有<span><em>之类的内联元素都不要中断文本流,不然都会多出一个空格或是空隙!
  • 2007-2-6 23:20:22 回复该留言
  • quote 23.风流才子
  • http://www.54caizi.org
  • 其实本人有一点不同的看法,老兄说不建议使用ol标签,但我却建议充分的利用xhtml中各种不常用的但却又非常实用的标签,我们可以在CSS中直接定义标签选择符的样式来达到各种场合需要的样式,虽然ol也可以定义其li的list-style-type:decimal;达到ol的效果,但无形中却增加了xhtml和css的份量。
    本人写过一篇文章:巧妙的利用XHTML中不常用的标签元素,里面有谈到直接定义标签选择符的样式来有效利用xhtml中不常用的标签,有兴趣的可以去看看拍砖:
    http://www.54caizi.org/post/element-user.html
  • 2008-7-27 9:28:55 回复该留言

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

Powered By Z-Blog .Theme from Google黑板报 By Washun

Copyright 2005-2007 Jonmax.com. All Rights Reserved.

Search

最新评论及回复

最近发表

资助者链接