web标准化学习指南:如何学习网页标准

web|web标准|网页

如何学习网页标准

很多经典论坛网页标准化版的版友问这个问题,我想每一个刚刚接触web标准的人都会问这样的问题,我就根据自己的经验总结。

Step 1.不要一味使用DW等工具设计网页,去熟悉(X)HTML语言和CSS语言

因为web标准对代码的要求提高了,没有对xhtml代码没有一定的了解是无法通过校检的。DW工具也可以使用,但是要看着代码写网页了。
首先是xhtml代码,不是很多,知道他们如何使用,怎么正确书写,而且要记得封闭tag。如<img/><br/>。建议看看一些html参考手册,毕竟xhtml是从html升级来的,很多tag还在在继续使用。

Step 2.建立标准化的声明(DOCTYPE)和head

以前的网页,甚至大型的门户网站也连个声明也没有,就仅仅是<html>,现在要做的就是给你的网页加上声明,规范head区域,让搜索引擎和喜欢你的网站。
推荐写法

<!–(1)过渡型(Transitional )–>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<!–(2)严格型(Strict )–>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<!–(3)框架型(Frameset )–>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>
<!–设定一个名字空间(Namespace)lang=”zh-CN”/–>
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”zh-CN”>
<head>
<!–声明你的编码语言:GB2312/UTF-8/Unicode/ISO-8859-1–>
<meta http-equiv=”Content-Type” content=”text/html; charset=GB2312″ />
<meta http-equiv=”Content-Language” content=”zh-CN” />
<!–为搜索引擎准备的内容–>
<!–允许搜索机器人搜索站内所有链接。如果你想某些页面不被搜索,推荐采用robots.txt方法–>
<meta content=”all” name=”robots” />
<!–设置站点作者信息–>
<meta name=”author” content=”ajie@netease.com,阿捷” />
<!–设置站点版权信息–>
<meta name=”Copyright” content=”www.w3cn.org,自由版权,任意转载” />
<!–站点的简要介绍(推荐)–>
<meta name=”description” content=”新网页设计师。web标准的教程站点,推动web标准在中国的应用” />
<!–站点的关键词(推荐)–>
<meta content=”designing, with, web, standards, xhtml, css, graphic, design, layout, usability, ccessibility, w3c, w3, w3cn, ajie” name=”keywords” />
<!–收藏夹小图标–>
<link rel=”icon” href=”/favicon.ico” type=”image/x-icon” />
<link rel=”shortcut icon” href=”/favicon.ico” type=”image/x-icon” />
<title>网页标题</title>
<!–连接样式表–>
<link rel=”stylesheet” rev=”stylesheet” href=”css/style.css” type=”text/css” media=”all” />
<style type=”text/css” media=”all”>@import url( css/style01.css );</style>
<!–RSS–>
<link rel=”alternate” type=”application/rss+xml” title=”greengnn's space” href=”http://www.jluvip.com/blog/feed.asp” />
<!–JS–>
<script src=”js/common.js” type=”text/javascript” language=”javascript” “></script>
</head>
<body></body>
</html>

Step 3.学习div配合CSS进行网页布局

使用<div>配合CSS为你的网页布局,而不要使用table了,这样的文章很多,实例也很多,推荐你去bluediea.com,div布局的好处很多,就提级几个实用的:
1.代码冗余小,网页打开速度快。
2.结构和表现分离了,你可以只通过css改变你的布局,而信息不变,这样维护和升级的成本降低了。

Step 4.学习web标准理论,语义化,CSS,结构和表现分离思想

web标准的提出其实只是为了达到,tag的语义化,结构和表现分离,网站本土化向国际化过度,向后兼容和设备无关性,让你的网页在互联网上畅行无阻。
这个阶段,你已经能够使用css布局你的网页,制作出能通过W3C校检的网页,你可以了解什么是web标准,web标准的框架和作用,结构和表现分离的思想和优势,CSS的更深层次的理论,xhtml tag的语义,亲和力理论,跨平台性,让你的网页适合多种浏览器和多种设备。

Step 5.应用web标准制作网页,建立自己的web标准代码规范,提高开发效率

web标准现在还是在推广之中,没有一个成熟的模式,毕竟需要手写代码,你这时就可以根据自己的经验提出一些提高自己开发效率的方法,可以把一些常用的代码片段,习惯的css命名,和一些能够重复使用的功能模块作成代码剪辑提高代码的复用性!

时间: 2024-10-03 14:54:01

web标准化学习指南:如何学习网页标准的相关文章

推荐10个很棒的AngularJS学习指南

AngularJS 是非常棒的JS框架,能够创建功能强大,动态功能的Web app.AngularJS自2009发布以来,已经广泛应用于Web 开发中.但是对想要学习Angular JS 的人而言,只有官方文档,那是万万不够的.大多数人更愿意看一些入门视频,或者是更易于理解学习的Demo程序.因此本文推荐了10个AngularJS学习指南,助你一臂之力.     1. Year of Moo 超级赞的AngularJS学习指南,是由Year of Moo 创建的,包含AngularJS基本知识以

重新认识一下网页标准

译自:What are web standards?中文:什么是网页标准?原作者:Nicholas C. Zakas请尊重版权,转载请注明出处! 译序:现在HTML5如日中天,各大浏览器都声称支持或者将支持HTML的特性,好像HTML5能够让互联网更美好,能让网站开发人员解放一样.或许大家被压抑太久,或许大家太乐观,或许标准真的已经深入人心了.看着火辣辣的HTML5,想想XHTML标准的尴尬,或许这个时候看看这篇写于2008年底文章会让我们更理解到底什么才是标准,标准能做什么,而我们应该做些什么

Web网页标准学习:从“div+css”说起谈结构的重要性

css|web|标准|网页 大家都知道,web标准在中国传播初期,人们使用"div+css"描述web标准,似乎有点道理,根据国内网页设计师的编码水平,看似就是使用div配合css来替代table布局. 可是学过一段时间web标准的人士,都知道这是误解,那么有人提出,摒弃div+css的说法,提倡XHTML+CSS的说法,因为要使用两门语言来架构网页,但是这种称呼也不准确,不完整,因为只提到了XHTML1.0标准和CSS2.0(CSS2.1)规范. 其实web标准就是web标准,叫别的

学习网页标准不是为了打倒IE

标准|网页 网页标准,这正是我等喜闻乐见的.但是,在学习时却总还要不断的去大骂IE,当然我也骂过.看着IE本为W3C的成员之一却带头不按标准行事确实让人很不能理解.特别是在宽度计算的方式上.但是现在我越来越觉得我们不要总是骂IE不是东西,难到Firefox与Opera就没有让人受不了的地方吗,同样也有,并且还很严重,作为一个显示网页的浏览器其使命就是正确与完美显示网页.而这两个浏览器的容错性很明显让人不能认同.我们是设计师是做WEB设计的,我们可能为我们手下的WEB来说话.但是从普通用户的角度来

《Cisco VoIP(CVOICE)学习指南(第三版)》一1.1 VoIP基础

1.1 VoIP基础 Cisco VoIP(CVOICE)学习指南(第三版) IP语音也就是人们通常所说的VoIP,不过它还有一种称谓叫做IP电话通讯(IP Telephony).其实这两个术语指的都是穿越IP网络发送语音信息,而它们的主要区别在于各自所使用的终端类型.比如说在VoIP网络中,传统的模拟或数字线路通常是通过某种网关连入到IP网络中的:而在IP电话通讯环境中,终端本身就可以直接利用IP进行通信.需要注意的是,包括本书在内,在很多关于这个问题的文献中,这两个术语都有可能交替使用. 由

《实施Cisco统一通信VoIP和QoS(CVOICE)学习指南(第4版)》一1.1 网关角色

1.1 网关角色 实施Cisco统一通信VoIP和QoS(CVOICE)学习指南(第4版) 本节描述了语音网关的运作模式,并说明了如何使其融入不同的Cisco UC架构中:本节介绍了语音网关在各个Cisco UC部署模型中的作用,并说明了每种运作模式所涉及的呼叫线路. 1.1.1 传统电话通讯网络 传统电话通讯网络中常涉及下列功能元素,如图1-1所示. 电话:模拟电话是传统电话通讯网络中最常见的电话类型.模拟电话与PSTN(公共交换电话网,Public Switched Telephone Ne

《CCNP SWITCH (642-813 )学习指南》一1.1 企业园区网设计概述

1.1 企业园区网设计概述 CCNP SWITCH (642-813 )学习指南 1.1 企业园区网设计概述 Cisco拥有多种企业园区网的设计模型,这些设计模型都是对各类企业网络的抽象与浓缩.不过,本书在介绍企业网络时,会将它们分为以下部分. 核心骨干网. 园区网. 数据中心. 分支机构/WAN. Internet边缘. 图1-1所示为一个高度概括的企业网示例. 园区网是企业网的一部分,是计算机架构的组成部分.一般来说,园区网的作用可以理解为:使终端用户能够从某一个地理位置访问网络通信服务和网

《CCNP SWITCH (642-813 )学习指南》一1.1 复杂的企业网络框架、架构和模型

1.1 复杂的企业网络框架.架构和模型 CCNP ROUTE (642-902)学习指南 本节介绍融合网络(converged network)及其中的各种数据流.为满足这种网络的需求,Cisco制定了智能信息网(Intelligent Information Network,IIN)策略,并开发了面向服务的网络架构(Service-Oriented Network Architecture,SONA)以引导企业网转向IIN.本节将介绍这两个主题. 本节还将概述Cisco企业级架构,并介绍传统的

《写给PHP开发者的Node.js学习指南》一1.3 Eclipse PDT

1.3 Eclipse PDT 写给PHP开发者的Node.js学习指南学会如何分析堆栈追踪信息是PHP到Node.js成功转换的一个重要技能.堆栈追踪是查找代码错误的一个诊断工具,就像医生用X光来检查病人一样.从某种观点来看,PHP到Node.js的转换可以类似于一个复杂的外科手术.你要对PHP和Node.js代码进行手术.像手术过程一样,转换需要技巧和耐性,但是一个好的环境也有很大帮助.就像手术室中使用X光一样,堆栈追踪就是转换过程中开发环境中的工具.下一步,我们会讨论集成开发环境,为转换过