web标准知识——用途相似的标签_经验交流

在前面我们已经讲过了strong与em的区别。除了strong与em之外还有一些相似的标签比如q、cite、blockquote。这三个都属于引用一类,但是这里还是有一些区别的,首先来一一解释。

<q></q>,q的作用是引用非块元素,也就是引用不能形成段落的内容,可能是某人说的一句话,也可能是一句文档摘录等,特点很明显这里是“一句”。并且q本身并不会产生段落。q本身并没有什么样式,一般浏览器也不会给他设置一个默认样式使起突出。但是我们可以通过CSS去使之与一般内容区分开。在q标签中还有一个属性是非常重要的,那就是cite。在这个cite属性值中主要是注明引用内容的出自何处,或是给出在线的地址。

<q cite="http://andymao.com/andy/post/92.html">这次的内容会让你更进一步的了解到关于段落里的细节</q>
要特别注意不要把q写成p,这两个标签很容易弄错。

在上一篇中其实已经谈到了cite,在那篇文章中我写到“这个标签只表注出文献的标题与名称。这个标签有点类似于我们书籍后面的参考文献的目录内容,也有点像是脚注。”那么他与q之间的区别是什么呢?其实很容易理解,q是显示内容,而cite则是显示说这段内容的人名或是书名。cite与q常常混合起来使用。比如:

<cite>鲁迅</cite>先生说:<q>地上本来没有路,走得人多了,便有了路</q>。
那么blockquote与他们有什么区别呢?blockquote是块引用,XHTML允许其包含任何标签。而上面的q与cite则没有这么大的包容度。blockquote的使用是当需要引用一段或是多段内容时所采用的,浏览器一般默认处理会把引用内容缩进一些以与正常的段落文章区分开。当然我们可以通过CSS样式来改变区分的形式。

在blockquote中有一个cite属性,与q一样是用来注明引用来源的。可以把联机文档的URL注明在其中。

在XHTML标签中还有一个叫pre的标签,这个标签在Dreamweaver中被称为“格式化”,在以前使用Dreamweaver 的时候我一直不清楚这个东西是作什么用的。一直到现在才清楚pre通常用以显示源代码,并且不支持能使段落分开的标签比如<p>,显示内容如需换行只要在源文件中换行即可无需要代码实现。同时pre会保留注其中的所有空格并显示出来。

一般来讲pre目前是多用于显示源代码,这与code的用途是相似的,所不同的是pre是块级的,而code是内联的。简单说,pre可以包括多行内容,而code只包含短小的一句或几个字符。

这里讲述的并不能完全说清楚,这就需要在看完文档后动手操作尝试一下,自行去发现其中的特别之处。有朋友说希望看到有关于CSS方面的知识。这里我想传达我的编写意图。我希望一步步来,让一些还没从表格布局脱离出来的朋友可以先行使用一些并不会影响整体的形式切入进去。因为一涉及CSS就可能会有兼容性问题,所以这里先说文档,然后再加入一些不影响整体布局的CSS知识。一步步的深入,最终能让阅读者从表格布局自然过渡到标准势力中来。当然有朋友已经通过自学的方式完成了这一步,那么可以到我的“杂谈标准”一栏中与我交流。

时间: 2024-10-24 20:50:16

web标准知识——用途相似的标签_经验交流的相关文章

WEB标准网页布局中尽量不要使用的HTML标签_经验交流

Do not use these html elements in html pages. Presentational elements should not be used. Support for some elements has been (or will be) deprecated; they should not be used. Don't Use These Tags Presentational b big hr i small sub sup tt Deprecated

制作WEB在线编辑器-插入HTML标签_经验交流

以前认为WEB的在线编辑器无非就是对输入内容的替换以及快捷的插入HTML代码,但是做的时候却发现虽然原理是那样,但是实现方法并非我想的那么死板.由于很少做UI上的东西所以到现在才知道在document中有execCommand方法可以解决插入HTML标签的问题,这个方法可以在光标所在位置插入需要的HTML标签,并且要注意的是,如果在一个限制的范围内插入标签需要先让该范围获得焦点,例如: a.focus(); a.document.execCommand('insertButton','','bt

标准布局常见问题及解决办法_经验交流

CSS2.0盒模型层次平面示意图和3D示意图 3像素问题及解决办法 当使用float浮动容器后,在IE6下会产生3px的空隙,有意思的是右侧容器没设置高度时3px在右侧容器内部,当设定高度后又跑到容器的左侧了,所以对布局精度要求高的话,请参考例29.31的解决方法 上边容器浮动后,下边的容器跟着浮动,造成页面错乱 如以上例子中的footer必须要单独占一行,但当sidebar浮动后,content的高度小于sidebar的高度时,footer也跟着浮动到sidebar右侧了,造成页面错乱.解决办

CSS 浮动清理,不使用 clear:both标签_经验交流

例如:         <div style="background:#666;"> <!-- float container -->                 <div style="float:left; width:30%; height:40px;background:#EEE; ">Some Content</div>         </div> 此时预览此代码,我们会发现最外层的父元素f

web标准知识——从p开始,循序渐进_经验交流

很多朋友现在还在用Dreamweaver(下称DW),不可否认这是个非常优秀的软件,他基本上实现了所见即所得.当然也正是因为这样让很多网页制作人员对于(x)HTML标签变得一无所知.然而要学习WEB标准就必需要与标签打交道,你必需要了解他们的特点.就算你不打算自己打代码,继续使用DW来完成自己的工作也必需要知道DW生存的代码的作用.如果你希望减少冗余代码,提升网页的品质,那么你就更需要认知(x)HTML标签. 那么学习自然要循序渐进,当然要从最常用.最简单的入手.如果问在所有HTML标签中谁是最

层盖住下拉列表框问题解决方案_经验交流

IE6真的让人很郁闷.但是就目前而言,我们还是不能放弃对IE6的兼容.从下面的我的blog访问统计分析数据来看,使用IE6的还是占有绝对主流的.列表框问题解决方案_经验交流-下拉列表">本来想顺便说说web标准中这个"标准"到底是个什么东西,但是发现,还是明日另起一篇吧.因为这个不是"顺便说说"就能说清楚的.我们今天还是不如这个正题--如何让层盖住下拉列表框? 非常郁闷或者非常幸运的说一下:这个问题只会出现IE7之前那些对web标准支持不好的浏览器中

从p开始,循序渐进_经验交流

 很多朋友现在还在用Dreamweaver(下称DW),不可否认这是个非常优秀的软件,他基本上实现了所见即所得.当然也正是因为这样让很多网页制作人员对于(x)HTML标签变得一无所知.然而要学习WEB标准就必需要与标签打交道,你必需要了解他们的特点.就算你不打算自己打代码,继续使用DW来完成自己的工作也必需要知道DW生存的代码的作用.如果你希望减少冗余代码,提升网页的品质,那么你就更需要认知(x)HTML标签. 那么学习自然要循序渐进,当然要从最常用.最简单的入手.如果问在所有HTML标签中谁是

web标准知识——丰富段落里的标签_正则表达式

如果你已经开始跟着<WEB标准能有多难?>在自己的工作中循序渐进地运用WEB标准了,那么这次的内容会让你更进一步的了解到关于段落里的细节.要是你刚刚准备好开始没关系可以先看看<从p开始,循序渐进>,然后再看本文.  昨天晚上我决定了放弃在这个时候插入CSS内容,继续深入XHTML的内容.也许大家会觉XHTML远没有CSS有趣,是的,的确如此,CSS能变化出无数看得见的可能.而XHTML只不过是为了机器与程序准备的.但是事实上XHTML的重要性要比CSS重要得多.我们都知道网页本身的

web标准知识——丰富段落里的标签

如果你已经开始跟着<WEB标准能有多难?>在自己的工作中循序渐进地运用WEB标准了,那么这次的内容会让你更进一步的了解到关于段落里的细节.要是你刚刚准备好开始没关系可以先看看<从p开始,循序渐进>,然后再看本文.  昨天晚上我决定了放弃在这个时候插入CSS内容,继续深入XHTML的内容.也许大家会觉XHTML远没有CSS有趣,是的,的确如此,CSS能变化出无数看得见的可能.而XHTML只不过是为了机器与程序准备的.但是事实上XHTML的重要性要比CSS重要得多.我们都知道网页本身的