首先从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> 本文由扑克分析仪整理发布