标准化你的网页

Web标准是越来越突出了，现在建站都讲究个符合标准，通过W3C的XHTML和CSS验证，那么怎样才能做出一个符合标准的站点呢，下面是我在BLOG重构和制作OSdev Resource过程中的一些经验^_^。

去网页设计师看一些有关Web标准方面的文章

虽然w3.org更权威，但对于母语是中文的我们来说，这个更容易看懂：）个人觉得比去w3.org看那些满屏的E文舒服。可以在这里找到很多有关XTHML，DIV+CSS布局，CSS技巧等的文章。还有站长阿捷写的《循序渐进》的教程，介绍了怎么一步一步来制作一个符合标准的网站。

丢掉table，采用div+css布局

这似乎是设计一个符合标准的网页首先应该做到的了：），DIV+CSS布局也是一种趋势。用DIV+CSS布局可以参考w3cn.org的文章：CSS基本布局16例，典型的三行二列居中高度自适应布局。

关闭标签

在以前，可能我们并不注意关闭标签这个问题，例如img，p等，在用这些标签时往往只用了开头，而没有正确的关闭它。通常情况，我们是这样用img的：

<img src="sample.gif">

但是在XHTML中，不允许这样的情况存在，而是应该关闭它：

<img src="sample.gif" />

再者如段落标记<p>，以前用它都是直接一个<p>，而没有想过在段落结束时加上</p>，这在XHTML也是不允许的。

正确嵌套标签

浏览器的容错性使得我们在编写了一个不符合规则的网页也能得到正确的显示效果，如用

<p><b>sample</p><b>

并没有什么问题，同样的，这在XHTML中是不被允许的。XHTML从XML而来，而XML必须具有结构性，所以嵌套标签时，必须一层一层嵌套，而不能交错。

正确设置字符集

似乎没有什么大关系，但设置好字符集更有利于浏览器对文档的解析。

图片的对齐

在XHTML中，align属性只能是left、middle、right或者top、middle、bottom这三个值中的一个，而很多时候我们需要图片与文本绝对中间对齐，即用absmiddle。使用XHTML之后，就要丢掉这个属性了，解决方法？我也不知道，不过网页设计师里有文章有提到这个问题，我在BLOG重构时，把图片对齐一律设为top，显示效果也还过得去。

处理链接中的&

动态网站中在用GET方法传参时，如果有多个参数，就会用到&来连接各个参数，但在XHTML中如果有&就意味之后是一个实体，但是应该没有人会把参数名取nbsp、lt、gt这样的吧。在XHTML中规定所有不是实体的&必须转换成&，如果不进行转换的话，在进行W3C校验时就会报错找不到实体。

其实个人感觉按照标准来制作网站比按传统方式来制作网站轻松很多，因为结构与内容分离，在改变显示效果时不需要整个页面重新做过，只需要在CSS中重写样式就行了。而且方便以后改版什么的，再者如Fdream的FBS，无刷新换肤，不错的东东～～

赞 (0)

相关推荐

  • 标准化你的网页

    Web标准是越来越突出了,现在建站都讲究个符合标准,通过W3C的XHTML和CSS验证,那么怎样才能做出一个符合标准的站点呢,下面是我在BLOG重构和制作OSdev Resource过程中的一些经验^_^. 去网页设计师看一些有关Web标准方面的文章 虽然w3.org更权威,但对于母语是中文的我们来说,这个更容易看懂:)个人觉得比去w3.org看那些满屏的E文舒服.可以在这里找到很多有关XTHML,DIV+CSS布局,CSS技巧等的文章.还有站长阿捷写的<循序渐进>的教程,介绍了怎么一步一步来

  • UTF-8、Unicode 标准化表单、BOM

    UTF-8、Unicode 标准化表单、BOM

    在"关于Dreamweaver制作UTF-8编码网页的测试 "中提及的疑惑http://www.cnbruce.com/blog/showlog.asp?cat_id=27&log_id=999 "阿韩"朋友一语解惑:即勾选上"包括 Unicode 签名(BOM)" 为详细了解,以下内容摘自帮助文档: 若要设置文档编码,请使用"默认编码"弹出式菜单. "默认编码"指定在创建新页面时要使用的编码,以及

  • 符合W3C网页标准的iframe标签的使用方法

    网站想改版,其中有一种广告的问题,以前每投放一个广告我都要把全站的文章都要更新一遍,这样既不便又不好!把网站以前推荐的一些文章都改成现在推荐的几个了!而且还浪费了我的时间.所以想使用Iframe来实现,但是直接使用iframe又不符合标准,那么该如何使用才能符合W3C的标准呢? 直接使用"IFRAME"不符合"W3C网页标准" 用JS来实现iframe 的标准化. 一.建立一个JS文件,代码如下: 复制代码 代码如下: function ifr(url,w,h){d

  • JavaScript驾驭网页－DOM

    JavaScript驾驭网页－DOM

    一.DOM全称 文档对象模型(Document Object Model) 二.DOM是什么 DOM就是一个编程接口,就是一套API. DOM是针对HTML文档.XML等文档的一套API.就类似于JDBC是针对数据库的一套API一样. 三.DOM的用途 DOM 是用来访问或操作HTML文档.XHTML文档.XML文档中的节点元素. 现在基本上所有的浏览器都都执行了W3C发布的DOM规范,所以在浏览器上就可以用DOM的这些API. DOM提供对脚本友善的网页结构与内容的视图 DOM把网页视为节点构

  • python使用xslt提取网页数据的方法

    python使用xslt提取网页数据的方法

    1.引言 在Python网络爬虫内容提取器一文我们详细讲解了核心部件:可插拔的内容提取器类gsExtractor.本文记录了确定gsExtractor的技术路线过程中所做的编程实验.这是第一部分,实验了用xslt方式一次性提取静态网页内容并转换成xml格式. 2.用lxml库实现网页内容提取 lxml是python的一个库,可以迅速.灵活地处理 XML.它支持 XML Path Language (XPath) 和 Extensible Stylesheet Language Transform

  • JQuery模拟实现网页中自定义鼠标右键菜单功能

    JQuery模拟实现网页中自定义鼠标右键菜单功能

    前言 题外话.......最近在开发一个网站项目的时候,需要用到网页自定义右键菜单,在网上看了各路前辈大神的操作,头晕目眩,为了达到目的,突然灵机一动,于是便有了这篇文章. 先放个效果图(沾沾自喜,大神勿喷): 废话不多说,进入正题: 1.首先 我们要禁用掉原网页中右键菜单 //JQuery代码 $(selector).on('contextmenu', function () { return false; }) 这样目标区域的右键菜单就无法使用了 demo1: <!DOCTYPE html>

  • 网页在线视频播放代码大全

    使用说明:把代码中的视频路径换成与自己的相对路径或绝对路径,播放器的窗口大小,根据需要修改高和宽的参数. 1.avi格式 复制代码 代码如下: <object id="video" width="400" height="200" border="0" classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA"><param name=&quo

  • 网页播放器Object使用详解

    一.代码 复制代码 代码如下: <object ID="javademo" CLASSID="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" HEIGHT="280" WIDTH="200"> <param name="AUTOSTART" value="0"> <param name="SHUFFLE&qu

  • jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例

    jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例

    本文实例讲述了jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能.分享给大家供大家参考,具体如下: 弹出层:两种方式 一是打开网页就自动弹出层 二是点击弹出 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="htt

  • cmd批量打开网页和关闭网页的批处理代码

    如果浏览器的安装路径中有空格,可以用" "代替,如下: C:\Program Files\Mozilla Firefox\firefox.exe 可以替换为C:\Program" "Files\Mozilla" "Firefox\firefox.exe 1.用IE浏览器打开网页的批处理代码:start c:\progra~1\Intern~1\iexplore.exe 网址 例子: @echo off title 打开网页 start c:\pr

随机推荐