园子博客

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

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

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

form标签的使用

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

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

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

1
2
3
4

<dl>< !–Definition List (定义列表)–>
 <dt></dt>< !–Definition Term （定义项）–>
 <dd></dd>< !–Definition Description （定义描述）–>
</dl>

阅读全文…

首先先来看个截图：

这种以列表形式来显示的内容在网页中称为列表，相信大家都经常见到，在Word里也有，很多文档编辑里也都有。在HTML中的列表则有三种类型：无序列表、有序列表、定义列表。
阅读全文…

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

我们都知道XHTML给我们提供了h1~h6，六个标题标签，那么我们如何分配这六个标题标签的使用呢？下面园子给出一些建议：
阅读全文…

在我们的实际应用中，还有一些XHTML标签是不太常用的，今天园子把使用频率较少但又有些代表性的几个标签给大家分享一下。
阅读全文…

前面的文章里园子给大家介绍过：strong和em标签的应用，大家知道这两个标签有一些相似之处。其实在XHTML里面还有很多用途比较相似的标签，比如q、cite、blockquote。这三个都属于引用一类，但是这里还是有一些区别的，首先来一一解释。
阅读全文…

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

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

<p>这里有个<del>借</del><ins>错</ins>别字。</p>
阅读全文…

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

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

<a href=”URL” mce_href=”URL” >我是链接</a>

阅读全文…

XHTML概述

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

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

经常听说dhtml，那么你了解dhtml吗？

首先我们看一看微软中国站点中的一个重要界面特性——当浏览者将鼠标指针移动到页面导航条上时，会动态地弹出一个菜单，在该菜单中移动鼠标，所指向的菜单项变为红色显示；如果将鼠标指针移出菜单所在范围，则菜单自动隐藏：如果将鼠标指针移动到导航条上另外一个区域，则会弹出另外一个菜单.这种效果非常类似于Windows应用程序的特性，即通过图形化的界面为用户提供尽可能多的功能。实际上，采用这种方式可以使同一个页面上包含更多的信息，对于微软中国这样庞大的站点来说十分有用。
阅读全文…

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

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

1
2
3
4
5
6

<ul>
<li><a href=”#” mce_href=”#”title=”妈妈说就算你注册的域名再长google都能搜索出来”>
http://www.mamashuojiusuannizhucedeyumingzaichanggoogledounengsousuochulai.cn/</a></li>
<li><a href=”#” mce_href=”#” title=”妈妈说就算你注册的域名再长google都能搜索出来”>
http://www.<wbr />mama<wbr />shuo<wbr />jiusuan<wbr />ni<wbr />zhucede<wbr />yuming<wbr />zaichang<wbr />google<wbr />douneng<wbr />sousuo<wbr />chulai<wbr />.cn/</a></li>
</ul>

阅读全文…

<strong>与<em>相信大家一定不会陌生，园子为什么一次要介绍两个标签呢？因为这两个标签都有强调的意思。同是强调那么为什么要用两个标签这么浪费呢？虽然都有强调的意思，但是强调的力度却有所不同。个人认为strong要比em力度更大一点。如果说em是中国词汇中的“强调”、“注意”，那么strong就是“再三强调”、“特别注意”。当然在文本中不能滥用强调标签，合理使用会让文章中的重点内容得到突出。那么一般性的强调用em即可，如果是需要特别重点的再用strong，这两个元素都是内嵌元素，可以包含在任意元素中。
阅读全文…