1. 论坛系统升级为Xenforo,欢迎大家测试!
    排除公告

如何将Web标准进行到底

本帖由 乐伯2011-12-02 发布。版面名称:前端开发

  1. 乐伯

    乐伯 New Member

    注册:
    2011-06-08
    帖子:
    183
    赞:
    0
    首先从XHTML说起(网上搜集的知道的可以直接跳过看第二点)

    XHTML 是什么?

    * XHTML 指可扩展超文本标签语言(EXtensible HyperText Markup Language)。
    * XHTML 的目标是取代 HTML。
    * XHTML 与 HTML 4.01 几乎是相同的。
    * XHTML 是更严格更纯净的 HTML 版本。
    * XHTML 是作为一种 XML 应用被重新定义的 HTML。
    * XHTML 是一个 W3C 标准。

    也需要了解一下HTML

    什么是 HTML 文件?

    * HTML 指超文本标签语言。
    * HTML 文件是包含一些标签的文本文件。
    * 这些标签告诉 WEB 浏览器如何显示页面。
    * HTML 文件必须使用 htm 或者 html 作为文件扩展名。
    * HTML 文件可以通过简单的文本编辑器来创建。

    XHTML 是一个 W3C 标准

    XHTML 于2000年的1月26日成为 W3C 标准。

    W3C 将 XHTML 定义为最新的HTML版本。XHTML 将逐渐取代 HTML。

    通过使用 W3C 教程 ,你将与最新的 web 标准保持同步。

    XML 是一种标记化语言,其中所有的东西都要被正确的标记,以产生形式良好的文档。

    XML 用来描述数据,而 HTML 则用来显示数据。

    今天的市场中存在着不同的浏览器技术,某些浏览器运行在计算机中,某些浏览器则运行在移动电话和手持设备上。而后者没有能力和手段来解释糟糕的标记语言。

    因此,通过把 HTML 和 XML 各自的长处加以结合,我们得到了在现在和未来都能派上用场的标记语言 - XHTML。

    XHTML 可以被所有的支持 XML 的设备读取,同时在其余的浏览器升级至支持 XML 之前,XHTML 使我们有能力编写出拥有良好结构的文档,这些文档可以很好地工作于所有的浏览器,并且可以向后兼容。

    为表达语义而标记文档,而不是为了样式

    Semantics(语义):富有意义的部分

    1. p标记代表:paragraph 段落

    2. h1,h2,h3,h4,h5,h6 h标记代表heading 标题

    3. blockquote标记代表:引用或引述

    4. address标记代表:地址

    5. ul标记代表:unorder list 无序列表

    6. ol标记代表:order list 有序列表

    7. li标记代表:list 列表

    8. dl,dt,dd标记代表:define list 一组定义列表

    9. strong标记代表:重点强调,体现为粗体

    10. em标记代表:emphasis一般强调,体现为斜体

    其次,如何实现web标准?

    一、先从<!DOCTYPE> 讲起。
    <!DOCTYPE>声明位于文档中的最前面的位置,处于 <html> 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。具体说明可以看看http://www.w3school.com.cn/tags/tag_doctype.asp。平时我们通过Dreamweaver软件创建一个网页的时候就会出现,如下显示
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    二、<html>标签
    一般大家写的代码是<html>或是软件默认生成<html xmlns="http://www.w3.org/1999/xhtml">,一般如果我们的网站是gb2312编码的话,使用<html xmlns="http://www.w3.org/1999/xhtml">就很好,要是我们的网站是UTF-8版本呢,搜索引擎一开始就不是很清楚我们的这个站是怎么语言,我们这里有一个技巧来使用即<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">,简单介绍一下里面的几个属性:dir="ltr" 是告诉浏览器或搜索引擎 这个页面的文本是从左到右显示的;xmlns="http://www.w3.org/1999/xhtml" 定义 XML namespace 属性;xml:lang="" 设置 XHTML 文档中元素内容的语言代码;lang=""设置元素中内容的语言代码。我们的网站是中文的话就写<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">,是英文的话就可以写<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">,就介绍这么多其他语言以此类推。

    三、<head>标签里面的元素
    1、<title>标签。w3c里面说 提示:<title> 标签是 <head> 标签中唯一要求包含的东西。看见title标签是多么的重要,在搜索引擎优化上也能有所体现

    2.<meta>标签
    meta 里面的keyword和description:我们做优化对它们 一定不会陌生,在此就不多说了。

    meta里面还有一个一般大家不知道的,可以定义语言的属性的东东即 <meta name="content-Language" content="zh-CN"/> name="content-Language" 固定不变,content里面的值和第2点里面的东西一样自己变换。

    3.<base>基准标签。
    <base>基准标签定义页面中所有链接的默认地址或默认目标。

    base标签在网站中的妙用:减少页面代码 具体参考w3c的例子:http://www.w3school.com.cn/tags/tag_base.asp
    base标签还有一个用处:具体可以看看各大搜索引擎的快照源码中,都可以发现它们的身影,该什么做你懂的。

    4.<link>标签。
    <link>标签一般是引用样式的多。最新发现wordpress的一个用法<link rel="index" title="你的网站名" href="http://www.domain.com" />,不知道对整站的URL标准化起到作用不,正在试验中.....。

    四、<body>里面的标签 尽量做到语义化
    1.<h1> 到 <h6> 标签,看合适的用
    2.address标记代表:地址
    3.<label> 标签为 input 元素定义标注(标记)。例子参考:http://www.w3school.com.cn/tags/tag_label.asp

    看看文章上面我所列的10个标签:富有意义的部分 可以通过http://www.w3school.com.cn来学习使用,这里我就不多说了。

    还有一个就是CSS样式:CSS样式的ID和CLASS语义化,可以在网上搜索一下。

    五、最后看一看你写的代码是否符合W3C标准

    可以验证html和css,还可以检查网站的死链接

    html验证地址:http://validator.w3.org/
    CSS验证地址:http://jigsaw.w3.org/css-validator/
    检查网站的死链接地址http://validator.w3.org/checklink

    去验证一下你的网站吧。。

    附上自己写的一个列子:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html dir="ltr" xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="content-Language" content="zh-CN"/>
    <base href="当前文档URL地址" />
    <title>如何将Web标准进行到底</title>
    <meta name="description" content="如何将Web标准进行到底" />
    <meta name="keywords" content="如何将Web标准进行到底" />
    <meta name="author" content="蓝建松 网名:蓝水" />
    <link rel="index" title="你的网站名" href="你的域名地址" />
    </head>
    <body>
    <div id="page">
    <div id="header">
    <div id="navbar">
    <ul>
    <li><a href="index.html" title="首页">首页</a></li>
    <li><a href="daohang.html" title="导航">导航</a></li>
    </ul>
    </div>
    </div>
    <div class="content">
    <h1>如何将Web标准进行到底</h1>
    <h2>文章副标题</h2>
    <p>网站主要内容段落1<strong>如何将Web标准进行到底</strong></p>
    <h4>内容小标题</h4>
    <p>网站主要内容段落2<em>如何将Web标准进行到底</em></p>
    <h4>文章引用</h4>
    <blockquote>文章引用内容</blockquote>


    <h3>表单提交</h3>
    <form name="demo" id="demo" action="">
    <label>姓名:</label><input type="text" name="name" value="" />
    <input type="submit" name="submit" value="submit" />
    </form>
    </div>
    <div id="leftSibar">左边内容</div>

    <div id="rightSibar">右边边内容</div>
    <div id="footer">网站底部:<address>地址:杭州市xxx路xxx号<br />电话:0571-12345678</address></div>
    </div>
    </body>
    </html>


    本文由扑克分析仪整理发布
     
  2. xiaoxue168

    xiaoxue168 New Member

    注册:
    2011-06-29
    帖子:
    1,383
    赞:
    0
    学习一下,还可以了.