注册本站  论坛  繁體中文

电脑技巧
手机 | MP3 | MP4 | 显卡 | 主板 | 显示器 | 光存储 | 笔记本 | 网络设备 | 移动存储 | 数码相机
键鼠 | CPU | 音箱 | GPS | 电视 | 服务器 | 投影机 | 机箱电源 | 品牌电脑 | 办公打印 |
| 网站首页 | Cisco | Windows | Linux | Java | Dotnet | Oracle | 网页设计 | 平面设计 | 安全 | 软件应用 | 电脑维修 | 办公维修 |
您现在的位置: 电脑技巧 >> 网页设计 >> CSS >> 网页设计正文

WEB标准教程:功能相似的标签的用法

文章来源:毅博客 作者 振之 作者:佚名 更新时间:2008-4-4 16:10:01 【 】 【加入收藏

在XHTML标签中有一些标签的作用是相似的,当然这里的相似是指语义相似,以至于很多人都不清楚这些相似的标签如何使用,那么今天的主题就是分解相似的标签,明确各个标签的用途。在前面我们已经讲过了strong与em的区别。除了strong与em之外还有一些相似的标签比如q、cite、blockquote。这三个都属于引用一类,但是这里还是有一些区别的,首先来一一解释。

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

<q cite="http://www.webjx.com/CSS/20080330/css_5013.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知识。一步步的深入,最终能让阅读者从表格布局自然过渡到标准势力中来。当然有朋友已经通过自学的方式完成了这一步,那么可以到我的“杂谈标准”一栏中与我交流。

  • 上一篇网页设计:

  • 下一篇网页设计:
  • 最 新 热 门
     Flash AS实例教程:简单的loading
     Flash实例教程:烛光动画特效
     Flash实例:打造佛光效果
     Fireworks教程:绘制精致的跑车
     Fireworks教程:不同切角效果
     Fireworks教程:制作韩国女包
     Fireworks教程:简单制作渐隐线
     Web标准应用之腾讯QQ首页改版
     比较文档位置
     32个典型的以分栏/网格为基础的网站
    最 新 推 荐
     WEB标准教程:链接和文本标签的应用
     WEB标准教程:功能相似的标签的用法
     网页表单在浏览器的表现实例
     CSS教程关于css框架网页设计
     符合WEB标准的网页图像的代码精简
     清除浮动clear:both的应用详解
     WEB标准教程:功能丰富的段落P标签
     看看网页高手怎么理解Web标准
     WEB标准教程:P标签的应用
     Web前端开发的Firefox插件
    相 关 文 章

    Web标准应用之腾讯QQ首页改版
    Wells Fargo提供在线存储服务
    WEB标准教程:链接和文本标签的应用
    符合WEB标准的网页图像的代码精简
    WEB标准教程:功能丰富的段落P标签
    看看网页高手怎么理解Web标准
    WEB标准教程:P标签的应用
    Web前端开发的Firefox插件
    Web标准:关于web标准的一些初学的知识
    Dreamweaver表格妙用线框制作

    | 设为首页 | 加入收藏 | 联系站长 | 友情链接 | 版权申明 | 网站公告

     

    Copyright 2006-2008 pcjx.com All Rights Reserved
    电脑技巧 版权所有 粤ICP备06059145号 地图
    本网站所有内容未经许可不得转载或做其他使用