• ---> 收藏到书签 

May 12, 2008

优质网页小贴士 - 在你的文档中使用 link

LINK 元素
HTML 和 XHTML 有种机制能让网页作者添加与一份 HTML 文档相关的额外信息。这些额外的资源可以是样式信息（CSS）、浏览导航帮助、信息的另一种格式（RSS）、联系方式等。

LINK 元素（<link>）被用作在文档前端的 HEAD 元素中添加这些信息。

一个例子
我们来看一个很实用的例子。这是某个天文学网站上的一个页面，内容是描述太阳系的章节中关于地球的那部分。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
 <title>Earth - Astronomy Weblog</title>

这是一份 HTML 文档的经典开头代码。

<link rel="Start" href="/solar-system/" />
<link rel="Prev"  href="/solar-system/venus/" />
<link rel="Next"  href="/solar-system/mars/" />

这些 link 能够帮助某些用户代理（浏览器）进行浏览导航。

  • Start 指向本章节的开始处
  • Prev 指向前一项，本例中是金星（Venus）
  • Next 指向后一项，本例中为火星（Mars）
<link rel="Contents" href="/solar-system/contents.html" />

Contents 指向本章节的索引

<link rel="Help" href="/website-help.html" />
Help 能够链接到一个为访客提供网站使用帮助的页面。

<link rel="alternate" type="application/rss+xml" title="RSS" href="/updates.rdf" />
它为 RSS 阅读器找到网站更新的订阅地址提供了可能。请注意，在本文写作时， mime 类型application/rss+xml 仍然是一份草稿“The application/rss+xml Media Type”，而且还没有被 IETF 认可。

<link rel="meta" type="application/rdf+xml" title="FOAF" href="http://astro.example.org/foaf.xrdf" />
它为 FOAF 阅读器找到文档中的元数据（metadata）提供了可能。它可以是作者。请注意，在本文写作时，mime 类型 application/rdf+xml 还没有被 IETF 认可，而且自从上次提议过之后没有更进一步的研究。

<link href="mailto:webmaster@example.org" rev="made" />

这是联系网站作者的一种方法。

<link rel="stylesheet" type="text/css" media="screen" href="/style/astro.css" />

定义你的网站所使用的 CSS 样式表。本例中，我们将该样式表定义为用作屏幕绘制。我们可以为其他媒体定义额外的样式表。

<link rel="alternate" href="/solar-system/earth.fr" hreflang="fr" title="French Translation" />
它使你能够访问该文档的另一种语言的翻译版，本例中是法语版。

</head>
<body>
.... Here the rest of the page.
该代码承上启下，关闭了 head 部分，开启了 body 部分。

这些 link 是为用户代理（浏览器）和其他工具准备的，它们能帮助他人使用你的网站。

延伸阅读

  • HTML 4.01: Description of the LINK element (The semantics of the element is the same for XHTML 1.0)
  • HTML 3.2: LINK element
  • Description of the link types
  • Dive into accessibility: Provide additional navigation aids

    •  

    Posted by ajax at 00:05 AM | Permalink | 评论(0) | HTML

    May 12, 2008

    优质网页小贴士 - 不要忘记添加 doctype

    添加什么？
    HTML 的种类可不止一种，实际上有 HTML 4.01 Strict、HTML 4.01 Transitional、XHTML 1.0 Strict 等等。HTML 的种类由其各自的 W3C 规范定义，同时，它们也由一种机读语言规范定义了每种 HTML 合法的结构、元素，以及属性。

    上述定义被称作“文档类型定义（Document Type Definition）”，简称 DTD。

    用于处理 HTML 文档的工具，比如网页浏览器，需要知道一个 (X)HTML 文档实际使用的是哪种 DTD：这就是为什么每个 (X)HTML 文档需要在起始处有一个 DTD 声明，就像这样：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    鉴于其语法，DTD 声明常被简称作“Doctype”。

    为什么？
    为什么要指定 doctype？因为它定义了你的文档实际使用的是哪个版本的 (X)HTML，并且这也是浏览器或其他文档处理工具所需的关键信息。

    例如，指定了文档的 doctype 后，你就可以使用 Markup Validator 等工具来检查其 (X)HTML 语法正确性（并找出可能导致你的页面在不同浏览器下无法正常显示的错误）。如果上述工具不知道你使用的文档种类，那么它们将无法工作。

    最重要的是，对大多数的浏览器来说，一个简单的 doctype 声明能减少许多不必要的猜测行为，并能触发“标准”解析模式，这就意味着不仅浏览器对文档的理解（对访客来说就是网页显示的速度）能变快，而且它符合规范，不会出现未定义 doctype 的文档常有的错误。

    延伸阅读

     

    Posted by ajax at 00:05 AM | Permalink | 评论(0) | HTML

    May 03, 2008

    优质网页小贴士 - 使用 alt 属性描述每幅图像

    alt 属性有什么用？

    alt 属性可以在一系列标签中使用（如 img，area 和 input 以及 applet），它能为该对象提供一个替代文本。

    替代文本在下列常见的情况下，能为你的网站和访客提供一些好处：
    • 现在，各种不同平台都有功能不一的网页浏览器，有些根本无法显示图像，或只能显示特定的几种图像；有些能够设定为不载入图像。如果你的图像代码中包含 alt 属性，在这种情况下，绝大多数的浏览器都能显示该属性的内容来代替缺失的图像
    • 你的一些访客无法看清图像，比如他们患有弱视、色盲，或近视，alt 属性对他们的帮助就很大了。他们可以根据该属性中的内容来了解你页面中的信息
    • 搜索引擎机器人就属于上述两种类型：如果你想让你的网站被完整收录到搜索引擎中，使用 alt 属性可以保证搜索引擎机器人不会错过你页面中的重要部分。
    我应该在 alt 属性中放置什么？

    alt 属性内容的一般规则是：使用与图片具有相同功能的文字。

    一些更具体的规则：
    • 如果该图片用于配合少量文字，则将这些文字放置到 alt 属性中
    • 如果该图片用于列表符、水平线等类似的装饰效果，alt 属性可以留空（例如 alt=""），但如果能在 CSS 中使用 list-style-image 则更好
    • 如果该图片代表许多重要信息，则最好能概括出一小行文字放入 alt 属性中，然后添加一个 longdesc 链接，指向更详细的描述
    延伸阅读

    Posted by ajax at 01:05 AM | Permalink | 评论(0) | HTML

    Apr 30, 2008

    _blank开新窗口不符合标准?

    我们要在新窗口中打开链接通常的做法是在链接后面加target="_blank"，我们采用过渡型的DOCTYPE(xh tml1-transitional. dtd)时没有问题，但是当我们使用严格的DOCTYPE(xhtml1-strict.dtd)时，这个方法将通不过W3C的校验，会出现如下错误提示：
    "there is no attribute target for this element(in this HTML version)"
    原来在HTML4.01/XHTML1.0/XHTML1.1严格DOCTYPE下，target="_blank"、target="_self"等等语法都是无效的，我们只能通过JavaScript来变通实现。

    有朋友问为什么不允许使用target="_blank"？这个属性很方便啊。呵呵，不知道W3C的专家们是怎么想的，据我所知，主要是“易用性、友好性”的问题，因为老外觉得不经过用户同意，没有明确提示就打开一个新窗口是不礼貌的。先不管这个取消是否合理，我们来看看解决办法。

    rel属性

    HTML4.0增加了一个新属性：rel，这个属性用来说明链接和包含此链接页面的关系，以及链接打开的目标。rel有许多的属性值，比如next、previous,、chapter、section等等。我们要使用的就是rel="external"属性。原来这样写的代码：
    <a href="document.html" target="_blank"> 打开一个新窗口</a>
    现在要写成这样：
    <a href="document.html" rel="external">打开一个新窗口</a>
    这是符合strict标准的方法。当然还必须配合一个javascript才有效。
    1. function externallinks() {  
    2.     if (!document.getElementsByTagName) return;  
    3.     var anchors = document.getElementsByTagName("a");  
    4.     for (var i = 0; i < anchors.length; i++) {  
    5.         var anchor = anchors[i];  
    6.         if (anchor.getAttribute("href") && anchor.getAttribute("rel") == "external") {  
    7.             anchor.target = "_blank";  
    8.         }  
    9.     }  
    10. }  
    11. window.onload = externallinks; 
    你可以把它保存成一个.js文件(比如external.js)，然后通过外部联接方法调用：
    <script type="text/javascript" src="external.js"></script>
    就是这样。

    最后补充一句，采用的target="new"在过渡型DOCTYPE下是允许的，但也不符合strict标准。

    Posted by ajax at 13:04 PM | Permalink | 评论(0) | HTML

    Apr 25, 2008

    CSS语法

    基本语法

    一个样式(Style)的语法由三部分构成：Selector(中文叫选择器有点怪怪的，就用英文吧)，属性(Property)，属性值(Value)。
    selector {property: value}
    举个例子，下面的代码p就是selector，color就是属性，blue就是属性值。
    p {color:blue}
    HTML中所有的Tag都可以作为selector

    注：如果你想为Style加多个属性，在两个属性之间要用分号加以分隔。下面的Style就包含2个属性，一个是对齐方式居中，一个字体颜色为红，当中用分号分隔开。
    1. p {text-align:center;color:red} 
    为了提高Style代码的可读性，你也可以分行写：
    1. p {  
    2.     text-align: center;  
    3.     color: black;  
    4.     font-family: arial  
    5. }  
    组合(Grouping)
    你也可以将相同的属性和属性值赋予多个Selector。Selector之间用逗号分隔。

    阅读全文 "CSS语法" »

    Posted by ajax at 10:04 AM | Permalink | 评论(0) | CSS

    最近收到的评注

    联系方式|Contact Me(eMail|Gtalk): @gmail.com | 用 GTalk 联系我



    4nyth1n9 th4t c4n 90 wr0n9 wi11 9o wr0ng

    站内搜索|Search

     

    最近发布|Recent Articles

    最被关注|Hot articles

    文章总数: | 评论数量:
    Started@
    本 Blog 文章均为原创
    本站版权: 创作共用 CC
    署名-非商业性-相同方式分享

    Powered by TT

    Blog 模版 由 Fenng 设计

    Host by DreamHost

    文章分类|Categories

    订阅更新|Feed

    RSS
    抓虾
    google reader
    bloglines
    鲜果

    站点链接|Blogroll

    • Blogger