今天在群里,熊猫君提议整理一个帖子,一方面为初学者提供一个入门指南,另一方面也象借此和已经在从事这个行业进行一点交流。下面是我从事这个行当多年的一些经验总结,希望抛砖引玉,大家不吝赐教。
1、必备工具
其实web标准并不是很复杂的技术,实现web标准的工具也很简单,说白了,只要可以进行纯文本编辑的软件,都可以作为代码编写的gon工具。例如记事本、UltraEdit甚至CuteFTP的编辑器(象我这种懒人有时候就用那玩艺儿直接在线编辑,汗)。
而另一些较专业软件会提供高亮显示代码(前面提到的UltraEdit也具有此项功能)、代码提示、自动闭合标签等等功能,使用起来会大大提高工作效率。如DreamWeaver、MSExpression、EditPlus等等,这些编辑软件目前是绝对的主流,无论是初学者上手容易还是专业人士提高效率都是不错的选择。
再说说浏览器环境,目前一台机器同时装IE、Firefox、Opera、Safari已经不是难事,而IE7Standalone和MultipleIE的问世也让IE7和低版本IE并存成为可能。推荐浏览器环境——本机安装IE7、FF、Opera、Safari,同时安装MultipleIE。从我个人的使用经验,IE7Standalone存在一定的缺陷,有可能导致本机安装的IE6无法正常使用。
除了编辑器以外,还有就是必不可少的调试工具啦,首推当然是Firefox下的Firebug!IE下目前还没有与之相当的调试工具,比较好的有IEdevelopmenttoobar、IEDebugbar等等,不过和Firebug完全不是一个档次的东西,只能说勉强凑合用。
2、必备的HTML/XHTML基础
说到基础,其实正是我最想谈的。从论坛许多的帖子也可以看出来,大多数问题的产生是由于制作者本身基础的不牢固。而HTML/XHTML作为基础中的基础,更是许多人的薄弱环节。然而很多人还是喜欢一上来就问布局或者Hack这些技巧方面的问题,其实很多问题如果本人的基础牢固了,几乎不能被称之为问题。
web标准必备的HTML/XHTML基础,大致有几个方面:
1、每个标签的语义,这一点是网页标准的根本。而整个网页标准化几乎都是围绕着这一点而来的,明确了语义,才能选择合适的标签;明确了语义,才能构建可读性良好的结构。例如<h1>就是网站最高等级的标题,它不应该放在<h2>层级之下;例如<fieldset>和<legend>,主要用于表单元素分组,不应该因为它那个漂亮的边框就用来表现新闻列表。
2、每个标签的初始样式,现在有很多重置标签样式就是针对这一点,因为每个标签在不同浏览器下的初始样式是不同的,而重置样式是为了更好地实现网页兼容性。从我个人的角度来说,不推荐初学者一上来就了解如何重置样式,而应该从了解标签的初始样式入手,先了解了这些,才能明白每一行重置样式的代码的真正含义。
3、标签的正确嵌套规则,同时还必须了解的是哪些标签属于块元素,而哪些属于行内元素。这是即使是高手也会经常忽略的方面,例如本人(^_^)。今天看到http://bbs.blueidea.com/thread-2834342-1-1.html这个帖子的时候,才意识到,原来之前对dt、dd的嵌套规则理解有误,二者不能一视同仁。HTML/XHTML的嵌套规则并不算简单,常用的标签不过三十个上下,就有大约二十种不同的嵌套规则,稍不留神就会出错。虽然不严格遵循并不会影响页面的表现,但养成一个良好的习惯是很重要的,它往往能决定你在这条路上可以走多远。
4、标签的属性。这个又要分为两方面,一是符合标准的常用属性及对应的值,例如<table>的summary属性、<th><td>的scope属性、<label>的for属性等等;二是标准强制要求的属性,例如图片的alt属性、form的action属性、textfield的col属性和row属性等等。
HTML/XHTML基础,虽然可以分开成多个方面讲,但实际关于它们的知识往往是综合在一起的,大多数相关的手册几乎都有详尽的介绍。对于这方面知识的学习,除了看相关手册外,多把自己的网页拿去w3c做校验也是不错的方法。
3、必须了解的CSS知识
CSS是标准化最吸引人的地方,也是时下讨论最多的话题,市面上的相关书籍也在web标准类里占据压倒性的比重,甚至有些人(包括一些用人单位)认为CSS就是网页标准。这种过于夸大CSS作用的观点固然是错误的,但CSS对于网页标准的重要性却也可见一斑。
CSS相关的知识、技巧很多,从知识的必备性方面来讲,以下几个方面是我认为最重要的:
1、布局。布局是表现层技术的基础,任何表现层的东西都是基于布局之上的。利用CSS布局的方法有很多种,例如float、绝对定位、负margin等等。每一种布局都有着各自的优势和局限性,从适性最广来讲显然是float最佳,也最为常用,但清除浮动往往是让人头疼的问题。绝对定位的网页抗压性好,但自由度低,而且渲染效率最差。负margin是最不破坏文档流的办法,但在对负值支持不佳的IE下往往会有灵异表现。关于布局方面的知识,建议看一下webflash的《彻底弄懂CSS盒子模式》系列文章,个人认为相关知识的文章尚无出其右者。
2、IE下的Haslayout渲染模式。其实hack是许多标准工程师所深恶痛绝的东西,但在浏览器兼容性要求越来越高的今天,hack却往往是一种无奈之举。而深入了解IE的Haslayout渲染模式,就会明白许多hack的来由,以及许多兼容性问题的产生之源。推荐阅读——译文Onhavinglayout。然而HasLayout问题之多,绝非一两篇文章所能概括,通过阅读文章,了解其中的原理,再举一反三,很多问题就会迎刃而解了。
3、符合标准的CSS规则。关于这一点,我可以不负责任地说,数以千万计的网站,其CSS完全符合标准的,所占比重不会超过1%。这并不是一个悲观的估计,即使是w3c推荐的一些网站,例如ESPN,他们的CSS也时常会通不过校验。CSS的许多规则的确令CSSer们非常不适,例如background和color,这两个属性绝大多数人都是分开来使用的,而w3c标准却规定两者必须“生则同生,死则同死”。还有就是各个浏览器的专有属性,在实现一些效果时是最简单有效的。这种时候我们往往会选择放弃标准,但暂时的放弃不意味着无视。今天知道我们哪些行为是错误的,以及为什么要用错误的方法,明天改正起来就不会太难。
4、提高网站性能的技巧,如有助于SEO的以图代字、用尽量少和小容量的图片实现圆角表格、用background-position实现图片切换以提高渲染效率等等。从对网站的帮助角度来看,这些技巧远比浏览器hack更值得掌握。
5、了解一点js知识。这个和CSS关系不是那么密切,但经常看到很多人钻牛角尖,用js可以非常简单实现的效果,非要用CSS去勉强实现。例如将子菜单放在链接里,通过:hover触发。又比如多列等高布局的实现。这已经是行为层的范畴了,为什么还非要用表现层来实现呢?当然这里并不是说所有CSS不容易实现的都往js里扔,而是要了解一下双方的技术特点,合理地选用最佳方案。
4、必备的网站样式管理技巧
1、规范化的命名与合理的代码重用性,也就是ID和class。对不起,这里又要老生常谈一下,因为昨天刚刚又看到一个通篇没有用一个ID的网站。ID和class是属于结构层的,不过CSS的调用却几乎都要通过ID和class来实现。但是,ID和class不仅仅是为了调用CSS样式而存在的。恰恰相反,是良好的ID和class构建的结构给了CSS大展身手的舞台。搞反了彼此关系,其实还是表现主导结构的思路,也就和满屏幕的table没有本质区别。理清了ID、class和CSS的关系,再来谈命名,命名其实只有一个基本原则,就是结构化。当然,在结构化之余,body、框架、模块之间的命名如能以某种形式加以区别(我个人习惯是加不同前缀),会让代码更加清晰。
2、样式文件的管理,也就是如何存储网站的样式文件。如果是一个很小的网站,把所有样式存在一个文件中也是没有问题的。但大网站的CSS往往几十上百k,全部存在一个文件里不但影响网页加载,也不利于修改维护。如何分割CSS,需要事先做好规划,无论是按栏目按功能还是按层级,要根据自己网站的特点。
5、其他
期待大家继续补充……
1、必备工具
其实web标准并不是很复杂的技术,实现web标准的工具也很简单,说白了,只要可以进行纯文本编辑的软件,都可以作为代码编写的gon工具。例如记事本、UltraEdit甚至CuteFTP的编辑器(象我这种懒人有时候就用那玩艺儿直接在线编辑,汗)。
而另一些较专业软件会提供高亮显示代码(前面提到的UltraEdit也具有此项功能)、代码提示、自动闭合标签等等功能,使用起来会大大提高工作效率。如DreamWeaver、MSExpression、EditPlus等等,这些编辑软件目前是绝对的主流,无论是初学者上手容易还是专业人士提高效率都是不错的选择。
再说说浏览器环境,目前一台机器同时装IE、Firefox、Opera、Safari已经不是难事,而IE7Standalone和MultipleIE的问世也让IE7和低版本IE并存成为可能。推荐浏览器环境——本机安装IE7、FF、Opera、Safari,同时安装MultipleIE。从我个人的使用经验,IE7Standalone存在一定的缺陷,有可能导致本机安装的IE6无法正常使用。
除了编辑器以外,还有就是必不可少的调试工具啦,首推当然是Firefox下的Firebug!IE下目前还没有与之相当的调试工具,比较好的有IEdevelopmenttoobar、IEDebugbar等等,不过和Firebug完全不是一个档次的东西,只能说勉强凑合用。
2、必备的HTML/XHTML基础
说到基础,其实正是我最想谈的。从论坛许多的帖子也可以看出来,大多数问题的产生是由于制作者本身基础的不牢固。而HTML/XHTML作为基础中的基础,更是许多人的薄弱环节。然而很多人还是喜欢一上来就问布局或者Hack这些技巧方面的问题,其实很多问题如果本人的基础牢固了,几乎不能被称之为问题。
web标准必备的HTML/XHTML基础,大致有几个方面:
1、每个标签的语义,这一点是网页标准的根本。而整个网页标准化几乎都是围绕着这一点而来的,明确了语义,才能选择合适的标签;明确了语义,才能构建可读性良好的结构。例如<h1>就是网站最高等级的标题,它不应该放在<h2>层级之下;例如<fieldset>和<legend>,主要用于表单元素分组,不应该因为它那个漂亮的边框就用来表现新闻列表。
2、每个标签的初始样式,现在有很多重置标签样式就是针对这一点,因为每个标签在不同浏览器下的初始样式是不同的,而重置样式是为了更好地实现网页兼容性。从我个人的角度来说,不推荐初学者一上来就了解如何重置样式,而应该从了解标签的初始样式入手,先了解了这些,才能明白每一行重置样式的代码的真正含义。
3、标签的正确嵌套规则,同时还必须了解的是哪些标签属于块元素,而哪些属于行内元素。这是即使是高手也会经常忽略的方面,例如本人(^_^)。今天看到http://bbs.blueidea.com/thread-2834342-1-1.html这个帖子的时候,才意识到,原来之前对dt、dd的嵌套规则理解有误,二者不能一视同仁。HTML/XHTML的嵌套规则并不算简单,常用的标签不过三十个上下,就有大约二十种不同的嵌套规则,稍不留神就会出错。虽然不严格遵循并不会影响页面的表现,但养成一个良好的习惯是很重要的,它往往能决定你在这条路上可以走多远。
4、标签的属性。这个又要分为两方面,一是符合标准的常用属性及对应的值,例如<table>的summary属性、<th><td>的scope属性、<label>的for属性等等;二是标准强制要求的属性,例如图片的alt属性、form的action属性、textfield的col属性和row属性等等。
HTML/XHTML基础,虽然可以分开成多个方面讲,但实际关于它们的知识往往是综合在一起的,大多数相关的手册几乎都有详尽的介绍。对于这方面知识的学习,除了看相关手册外,多把自己的网页拿去w3c做校验也是不错的方法。
3、必须了解的CSS知识
CSS是标准化最吸引人的地方,也是时下讨论最多的话题,市面上的相关书籍也在web标准类里占据压倒性的比重,甚至有些人(包括一些用人单位)认为CSS就是网页标准。这种过于夸大CSS作用的观点固然是错误的,但CSS对于网页标准的重要性却也可见一斑。
CSS相关的知识、技巧很多,从知识的必备性方面来讲,以下几个方面是我认为最重要的:
1、布局。布局是表现层技术的基础,任何表现层的东西都是基于布局之上的。利用CSS布局的方法有很多种,例如float、绝对定位、负margin等等。每一种布局都有着各自的优势和局限性,从适性最广来讲显然是float最佳,也最为常用,但清除浮动往往是让人头疼的问题。绝对定位的网页抗压性好,但自由度低,而且渲染效率最差。负margin是最不破坏文档流的办法,但在对负值支持不佳的IE下往往会有灵异表现。关于布局方面的知识,建议看一下webflash的《彻底弄懂CSS盒子模式》系列文章,个人认为相关知识的文章尚无出其右者。
2、IE下的Haslayout渲染模式。其实hack是许多标准工程师所深恶痛绝的东西,但在浏览器兼容性要求越来越高的今天,hack却往往是一种无奈之举。而深入了解IE的Haslayout渲染模式,就会明白许多hack的来由,以及许多兼容性问题的产生之源。推荐阅读——译文Onhavinglayout。然而HasLayout问题之多,绝非一两篇文章所能概括,通过阅读文章,了解其中的原理,再举一反三,很多问题就会迎刃而解了。
3、符合标准的CSS规则。关于这一点,我可以不负责任地说,数以千万计的网站,其CSS完全符合标准的,所占比重不会超过1%。这并不是一个悲观的估计,即使是w3c推荐的一些网站,例如ESPN,他们的CSS也时常会通不过校验。CSS的许多规则的确令CSSer们非常不适,例如background和color,这两个属性绝大多数人都是分开来使用的,而w3c标准却规定两者必须“生则同生,死则同死”。还有就是各个浏览器的专有属性,在实现一些效果时是最简单有效的。这种时候我们往往会选择放弃标准,但暂时的放弃不意味着无视。今天知道我们哪些行为是错误的,以及为什么要用错误的方法,明天改正起来就不会太难。
4、提高网站性能的技巧,如有助于SEO的以图代字、用尽量少和小容量的图片实现圆角表格、用background-position实现图片切换以提高渲染效率等等。从对网站的帮助角度来看,这些技巧远比浏览器hack更值得掌握。
5、了解一点js知识。这个和CSS关系不是那么密切,但经常看到很多人钻牛角尖,用js可以非常简单实现的效果,非要用CSS去勉强实现。例如将子菜单放在链接里,通过:hover触发。又比如多列等高布局的实现。这已经是行为层的范畴了,为什么还非要用表现层来实现呢?当然这里并不是说所有CSS不容易实现的都往js里扔,而是要了解一下双方的技术特点,合理地选用最佳方案。
4、必备的网站样式管理技巧
1、规范化的命名与合理的代码重用性,也就是ID和class。对不起,这里又要老生常谈一下,因为昨天刚刚又看到一个通篇没有用一个ID的网站。ID和class是属于结构层的,不过CSS的调用却几乎都要通过ID和class来实现。但是,ID和class不仅仅是为了调用CSS样式而存在的。恰恰相反,是良好的ID和class构建的结构给了CSS大展身手的舞台。搞反了彼此关系,其实还是表现主导结构的思路,也就和满屏幕的table没有本质区别。理清了ID、class和CSS的关系,再来谈命名,命名其实只有一个基本原则,就是结构化。当然,在结构化之余,body、框架、模块之间的命名如能以某种形式加以区别(我个人习惯是加不同前缀),会让代码更加清晰。
2、样式文件的管理,也就是如何存储网站的样式文件。如果是一个很小的网站,把所有样式存在一个文件中也是没有问题的。但大网站的CSS往往几十上百k,全部存在一个文件里不但影响网页加载,也不利于修改维护。如何分割CSS,需要事先做好规划,无论是按栏目按功能还是按层级,要根据自己网站的特点。
5、其他
期待大家继续补充……
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
暂无“WEB标准学习经验总结”评论...
《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。
更新动态
20240901
20240901
- 《庄心妍 实力唱将 发烧音乐精选集》[WAV+CUE][380MB]
- [音展纪念碟]2006年《TAA台湾第十六届国际HI-ENDHI-FI音响展》2cd[WAV]
- 中国音乐地图之听见西藏山歌牧歌酒歌2020[WAV分轨]
- 王宏伟2017-永远的红飘带[太平洋影音][WAV+CUE]
- 费翔.1997-NOW现在【第一中国】【WAV+CUE】
- 新格合唱团.1981-我唱你和2辑(滚石新格民歌系列)【新格】【WAV+CUE】
- 陈柏宇.2011-QUINQUENNIUM【SONY】【WAV+CUE】
- 雨果唱片-《金唛系列-蔷薇依韵琼瑶》WAV
- 陈百强《凝望(2012华纳LPCD45限量版)[DMI]》[WAV整轨]
- 模拟之声慢刻CD《徐小凤45周年》[德国母带][低速原抓WAV+CUE]
- 《庄心妍 实力唱将 发烧音乐精选集》[WAV+CUE][380MB]
- 《王菲 单曲合集》[FlAC/分轨][520MB]
- 《费玉清 原味再现 水长流》[WAV+CUE][430MB]
- 群星.1992-畅销榜老歌金曲10CD【风格】【WAV+CUE】
- 孙悦.2024-时光音乐会【金蜂】【WAV+CUE】