首页


1 2 下一页 (Page 1 of 2)



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 | | 评论(0)

    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 | | 评论(0)

    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 | | 评论(0)

    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 | | 评论(0)

    Apr 24, 2008

    优质网页小贴士 - 使用 h1 作为顶级标题

    使用 <h1> 作为顶级标题

    <h1> 在 HTML 元素中作为文档的第一级标题。

    • 如果该文档是独立的，比如 教你游览日内瓦，它的顶级标题就可以和文档名称相同。
    • 如果该文档是某个集子的一部分，例如，它是一个宠物集里面关于狗的部分，那么，顶级标题就应该包括一定的相关文字（如果只写 <h1>狗</h1> 就会显得意义不明）：狗 —— 您的宠物指南。

    不像 <title> 元素，该元素可以包含链接、强调，以及其他 HTML 短语元素。

    由于一些浏览器的默认字体大小问题，很多文档作者和编辑工具会选择 <h2> 元素代替 <h1>。这会导致一些支持页面标题层次结构的工具，例如 Amaya 的 TOC（导航目录）视图 发生混乱。因此，我们推荐使用 CSS（级联样式表），它能使网页文档作者分别设置 <h1>、<h2> 等元素的字体大小。

    延伸阅读

     

    Posted by ajax at 20:04 PM | | 评论(0)

    Apr 24, 2008

    scrollLeft,scrollWidth,clientWidth,offsetWidth详解

    scrollHeight: 获取对象的滚动高度。
    scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
    scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
    scrollWidth:获取对象的滚动宽度
    offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
    offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
    offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
    event.clientX:相对文档的水平座标
    event.clientY:相对文档的垂直座标

    event.offsetX:相对容器的水平坐标
    event.offsetY:相对容器的垂直坐标
    document.documentElement.scrollTop:垂直方向滚动的值
    event.clientX+document.documentElement.scrollTop:相对文档的水平座标+垂直方向滚动的量

    以上主要指IE之中，FireFox差异如下：
    IE6.0、FF1.06+：
    clientWidth = width + padding
    clientHeight = height + padding
    offsetWidth = width + padding + border
    offsetHeight = height + padding + border

    阅读全文 "scrollLeft,scrollWidth,clientWidth,offsetWidth详解" »

    Posted by ajax at 20:04 PM | | 评论(1)



    1 2 下一页 (Page 1 of 2)