学习用Xhtml+CSS2构建网页

简介: 第一篇:喜新厌旧,逐步习惯Xhtml+CSS2的布局方式 近来有很多网站用Xhtml1.0标准将站点重构,其中包括yahoo,163,CSDN等这些大站。近来一段时间Xhtml+CSS2的热潮更是一浪高过一浪,所以偶也开始学起了,慢慢的就爱上她们了,页面构建技术就是若干MM,我们也要来个喜新厌旧。

第一篇:喜新厌旧,逐步习惯Xhtml+CSS2的布局方式

近来有很多网站用Xhtml1.0标准将站点重构,其中包括yahoo,163,CSDN等这些大站。近来一段时间Xhtml+CSS2的热潮更是一浪高过一浪,所以偶也开始学起了,慢慢的就爱上她们了,页面构建技术就是若干MM,我们也要来个喜新厌旧。

一、为什么要学Xhtml+CSS2

  首先,标准的代码便于网页在各种浏览器中的顺利显示。
  一些不规范代码的网页在IE下能正常显示的,在Firefox和Opera上可能就无法正常显示。在这一点上我们不得不说IE相比之下更有包容之心,虽然现在浏览器的主流是IE以及以IE为内核的各种浏览器,但我们同样无法忽视Firefox、Opera等浏览器在逐渐增大的用户群,而这些人群多是对计算机较为精通的老鸟,被他们骂自己网站太垃圾的话我想滋味应该不好受,呵呵。
  当然这也不是说使用table等做的网页就不符合标准(使用table带来的一些弊端下面也要谈到),只是当前不少人习惯用先用Photoshop(以下简写为PS)设计平面图,之后用Fireworks(以下简写为FW)或Imageready(以下简写为IR)做切割,之后在Dreamweaver(以下简写为DW)或是Forntpage(以下简写为FP)来生成html,这些可视化的软件固然方便,但由此带来的问题也是多多,这些软件多多少少会自动增减一些代码,如果没有查看代码的习惯,很容易导致一些不规范代码的产生。,由于使用FW或IR做出的切片一般对图片的特征无法做出直观的描述,所以这样做出的html给以后的维护也带来了麻烦。

  其次,Xhtml + CSS2使页面布局更加简单
  假如之前对页面进行布局或设置了一些相对复杂效果的话,通常的做法是采用大量的表格嵌套对一个页面进行布局,用单元格来描述区域,这样在WYSIWYG等软件中倒是比较直观,但这样影响的有几个方面,首先影响下载速度,因为table的显示不像DIV一样,table在浏览器中的显示是需要全部下载之后才能显示,所以会影响下载速度;其次对于手写代码来讲,这样的结构非常不直观,大堆的表格嵌套可能让习惯手写代码的设计师感觉头晕;另外,还可能牵扯到一个地方就是单元格的合并,假如你不小心搞错了一个colspan=”?”,那么整个页面的布局将面目全非。
  而用CSS做布局,就像是在PS中对图层进行操作一样,利用CSS中相对和绝对的概念,整个页面的布局就轻松和方便多了

  此外,Xhtml可以减小网页文件体积
  使用Xhtml+CSS2构建网页其实一个很重要的目的就是提高浏览速度,虽说现在网速越来越大了,但谁不想自己的站点速度更快呢,有人还曾经说“世上最远的距离不是地球到太阳,而是中国电信到中国网通”,如果你在电信服务器上的站点被网通线路的用户浏览,网页文件大小势必也会影响浏览者的感受。而采用Xhtml来构建网页则利于你解决这个问题,经过笔者测试,实现同样的效果图,使用Xhtml构建的网页比使用传统table方式构建的页面体积减小1/2左右。相信很多人会喜欢身材苗条的MM,呵呵

  二、不同层次的学习者如何快速入门

  感受了以上几点,我开始逐渐习惯使用Xhtml+CSS2来构建网站,那么谈了这么多,究竟从哪里入门呢?这里,对于不同的人群,我建议以下几种方法快速入门:

  对于html及css完全不了解的新手:首先建议你还是学习以下html,因为它当对简单一些,更易于入门,熟悉了一些html的基本语法之后,开始学习Xhtml的一些规范写法,这里推荐一些学习资料:
  Xhtml中文参考:
  http://www.standme.com/Xhtml.htm
  HTML和XHTML常见问答:
  http://www.transwiki.org/cn/xhtmlfaq.htm
  有英文基础的可以查看这些页面:
  XHTML™ basic:
  http://www.w3.org/TR/xhtml-basic/
  XHTML™ 1.0 The Extensible HyperText Markup Language (Second Edition):
  http://www.w3.org/TR/xhtml1/
  XHTML™ 1.1 - Module-based XHTML:
  http://www.w3.org/TR/xhtml11/
  XHTML™ 2.0:
  http://www.w3.org/TR/xhtml2/

  对于有html基础的朋友,推荐这篇阿捷写的文章:
  循序渐进学习Xhtml+CSS2:
  http://www.w3cn.org/article/step/index.html
  通过一步步的逐渐由不够规范的html转变到Xhtml

  对于有html及PHP语言基础的朋友,这里推荐一个快速搞定Xhtml的方法:
  安装一个Wordpress,官方站点:www.wordpress.org,当前最新版本是1.5.2,之后用最短的时间熟悉wordpress的模板系统,改动以下wordpress的模板算是熟悉一下DIV和CSS2的感觉,之后找一个不错的页面,将wordpress的模板改成与之相同的。最后一步则是按照自己所学到的Xhtml+CSS2的知识做一套wordpress的模板出来,经过这三步,我想你的Xhtml+CSS2算是真正入门了。

目录
相关文章
|
8天前
|
编解码 前端开发 容器
CSS Flex布局实战案例:构建响应式卡片组件
【7月更文挑战第17天】通过上述步骤,我们成功地使用CSS Flex布局构建了一个响应式的卡片组件。Flexbox不仅简化了布局代码,还让我们能够轻松实现复杂的布局效果,如响应式设计。在实战中,掌握Flexbox将大大提高前端开发的效率和网页布局的质量。希望这个案例能够帮助你更好地理解和应用Flexbox布局。
|
10天前
|
前端开发
学习css的clip-path属性
【7月更文挑战第1天】了解CSS `clip-path`属性,用于定义元素显示区域的裁剪形状,如圆形、椭圆、多边形、矩形及SVG路径。通过配合过渡和动画,可创建动态交互效果。例如,`clip-path: circle(radius at center);`用于创建圆形裁剪,`polygon`用于自定义多边形。还可以使用`path()`引用SVG路径数据。[资源推荐:bennettfeely.com/clippy/](https://bennettfeely.com/clippy/),提供交互式工具测试不同形状。
28 0
学习css的clip-path属性
|
22天前
|
前端开发 JavaScript
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
|
24天前
|
前端开发 JavaScript 开发者
学习CSS动画的高级技巧
【7月更文挑战第1天】学习CSS动画的高级技巧
19 2
|
24天前
|
前端开发 JavaScript 开发者
如何学习CSS动画?
【7月更文挑战第1天】如何学习CSS动画?
15 1
|
29天前
|
移动开发 前端开发 JavaScript
HTML5+CSS3+JavaScript网页实战
HTML5+CSS3+JavaScript网页实战
|
24天前
|
JavaScript 前端开发 Java
前端网页开发学习(HTML+CSS+JS)有这一篇就够!(二)
前端网页开发学习(HTML+CSS+JS)有这一篇就够!(二)
|
24天前
|
前端开发 数据安全/隐私保护
前端网页开发学习(HTML+CSS+JS)有这一篇就够!(一)
前端网页开发学习(HTML+CSS+JS)有这一篇就够!(一)
|
1月前
|
移动开发 前端开发 搜索推荐
CSS3 字体艺术:为你的网页增添一抹色彩!
CSS3 字体艺术:为你的网页增添一抹色彩!
|
Web App开发 前端开发
CSS入门级学习
css入门学习1:认识CSS  1.1:css简介,css全称是层叠样式表,Cascading style sheets   1.2:css的作用,主要是用于定义html内容在浏览器内的显示样式,如文字大小,颜色,字体加粗等     使用css样式的一个好处是通过定义某个样式,可以让不同的网页位置的字体有着统一的字体,字号或者颜色等   1.
1274 0