标签归档:Xhtml

详解rel=”nofollow”的用法与意义

近年来在网站的链接中我们经常会看到类似rel=”nofollow”rel=”external nofollow”的属性定义,有很多朋友并不明白它们的语义,今天园子就详细给大家分析一下rel 这个属性在网页中的用法。

rel 属性是用来说明链接和包含此链接页面的关系,以及链接打开的目标。它有许多的属性值,比如next、previous,、chapter、section等等。我们现在比较长见的是rel=”external nofollow”与rel=”nofollow”两种参数的应用。
继续阅读

网页中表单的使用技巧

本文园子总结了在网页常用布局中表单的一些使用技巧,可以帮助你更灵活的控制表单,使页面更加人性化。

1、表单文本输入的移动选择

在文本输入栏中,如果加入了提示,来访者往往要用鼠标选取后删除,再输入有用的信息。其实只要加入onMouseOver=”this.focus()” onFocus=”this.select()” 代码到 <textarea> 中,一切就会变得简单多了,如:

<textarea name=textarea wrap=virtual rows=2 cols=22 onMouseOver=”this.focus()” onFocus=”this.select()”>Input English..</textarea>

类似的,可以加入代码到<input>。
继续阅读

语义化表单里的标签

表单是用户提交信息的重要渠道,是(X)HTML的一个重要部分。表单主要用于采集和提交用户输入的信息,我们经常会用到表单,那么你明白表单里的每个标签的正确语义吗?今天园子给大家分享一下表单里一些常用标签的使用方法。

form标签的使用

form是用于申明表单,定义采集数据的范围,也就是<form>和</form>里面包含的数据将被提交到服务器或者电子邮件里。
继续阅读

丰富表格里的标签

表格,一个在网页设计中比较经典的工具。曾经,表格是网页设计人最重要的布局排版手段,但是它的存在其实并不是为了布局,在Web标准中的表格更不应该用来布局(想了解DIV布局和表格布局的区别的话,请看我以前写的文章:DIV布局和table布局的区别)。相反,对于多维数据,你应该使用table。为了使数据表格有更强的访问性,了解和使用各种构造表格的组件就很重要了。例如表格标题(< caption >)、摘要(summary 属性)和表格头部单元格(<th>)等。今天园子给大家分享的是在表格里经常用到的一些标签的用法。
继续阅读

定义列表dl,dt,dd的用法

上篇文章给大家分享了无序列表和有序列表的用法,其实一般我们在做列表的时候通常只会用到ul和li标签,至于dl,dt,dd一般都很少用到,这三个标签就是属于定义列表类的标签,下面园子给大家说一下大概的用法。先来分解一下这个列表的代码:

< !–Definition List (定义列表)–>
< !–Definition Term (定义项)–>
< !–Definition Description (定义描述)–>

继续阅读

h1~h6的使用原则

在遵循网页标准制作网页的时候,为了使得设计更具有语义化,我们经常会在页面中用到h1~h6的标题属性。我们都知道标题几乎是所有文章都会有的要素,也是我们用以识实与索引文章的重要元素。我们通过标题去感知文章内的核心。那么你知道吗?合理使用标题标签会让你的文章更受关注。

我们都知道XHTML给我们提供了h1~h6,六个标题标签,那么我们如何分配这六个标题标签的使用呢?下面园子给出一些建议:
继续阅读

以图换字方法和思路

不知道您在做网站时有没有遇到过这样的问题:想保留链接的背景,但又要链接里的文字消失!可是弄了半天一直没办法把这个文字去掉。我想很多学标准的朋友都遇到过这个问题,这里园子把常用的几个方法写出来,把思路也讲一下,希望能帮助刚开始学习的朋友。

“以图换字”就是用图片替换文字表现。我们都知道,文字在浏览器里的表现形式是很差的,会有锯齿,没办法圆润还有没办法做很多效果。一般情况下网页的内容部分是不需要做效果的,但是在WEB标准中对于LOGO、标题,常常需要用到这些。用表格来做的话我们只是在某个地方帖上一张图,这样的方式比较简单,但是不利于搜索。所以我们需要采用标准方式来做,保证网页处于一种良好的状态而有利于搜索。通常以图显示消失:(display:none;) 这不只是让容器内的内容消失而是包括容器本身都消失。所以我们必需在容器内再做一个容器来保证内消失部分之后,容器内的背景可以正常显示。例 :
继续阅读

abbr和acronym标签的使用

很多人都喜欢使用缩略词来表述特定的事物或是事件,这样做的好处是方便快递地传达信息,而不用每次都去打那么长的文字,特别是对于重复出现的词汇。例如XFN,如果知道的人自然会明白是XHTML Friends Network,可是还有很多没听过的人呢?这种情况下就要用到园子介绍的两个标签——abbracronym
继续阅读

ins和del标签的使用

我们在写博客或者发布文章时当网页里的内容有错别字或少字时,一般选择的做法就是直接去修改网页,这表面看来似乎没有什么问题。但是,如果是已经发布的技术文档或者学术论文呢?我们可能就不能像铅笔写字一样,擦掉改掉就行。这个时候我们需要告诉读者这段是被删除的但是又能让读者看到表达不合理的地方。那么删除标签的作用就产生了。以前我们会使用<s></s>或是<strike></strike>来得到一个删除线的效果。但是这仅表是一个删除线的效果,语义上没有del来得更为明确,所以园子要告诉大家放弃以前的方式,采用<del></del>这个标签。同样能表达我们需要的效果,并且意义更为直接明确。例如:
继续阅读

a标签的使用

我们天天在网络的海洋中漫游,也都知道网页的最大特性是“链接”,就是的这个在我们现在看起来习以为常的东西,让我们的生活发生了巨大的变化,是这个小小的标签成就了这个世界上无数的互联网天才。那么你清楚“链接”的用法吗?

首先让我们看看这个标签的真面目:

我是链接

继续阅读

XHTML详解

XHTML概述

XHTML是当前HTML版的继承者。HTML语法要求比较松散,这样对网页编写者来说,比较方便,但对于机器来说,语言的语法越松散,处理起来就越困难,对于传统的计算机来说,还有能力兼容松散语法,但对于许多其他设备,比如手机,难度就比较大。因此产生了由DTD定义规则,语法要求更加严格的XHTML。

大部分常见的浏览器都可以正确地解析XHTML,即使老一点的浏览器,XHTML作为HTML的一个子集,许多也可以解析。也就是说,几乎所有的网页浏览器在正确解析HTML的同时,可兼容XHTML。当然,从HTML完全转移到XHTML,还需要一个过程。
继续阅读

wbr和nobr标签的应用

首先请原谅园子会告诉你wbr这标签,一个已经不再Web标准中存在的标签,虽然很多设计师(比如Google)还在用着它,因为它有个作用是CSS无法达到的。

如果你在网页上显示很长的英文单词或者网址时,我们并没有很好的办法在所有的浏览器中用CSS控制它换行,但是这个标签可以做到,作用于不会自动换行的区域中时,它会根据实际情况决定是否换行。假如:


继续阅读