资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

Web前端开发如何编写高质量代码

这篇文章将为大家详细讲解有关Web前端开发如何编写高质量代码,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

创新互联公司专注于天柱网站建设服务及定制,我们拥有丰富的企业做网站经验。 热诚为您提供天柱营销型网站建设,天柱网站制作、天柱网页设计、天柱网站官网定制、重庆小程序开发服务,打造天柱网络公司原创品牌,更为您提供天柱网站排名全网营销落地服务。

(P4)
Web标准由一系列标准组合而成,其核心理念是将网页的结构、样式和行为分离开来,所以它可以分为三大部分:结构标准、样式标准和行为标准。
样式标准 —— XML标准、XHTML标准、HTML标准;
样式标准 —— CSS标准;
行为标准 —— DOM标准和 ECMAscript 标准;

(P23)CSS布局也就是俗称的 Div + CSS 布局,或者是 (X)HTML + CSS 布局。其核心思想就是用 CSS 来控制网页中元素的样式,包括位置、大小、颜色等;

(P26)
CSS布局只是Web标准的一部分。在HTML、CSS、Javascript 这三大元素中,HTML才是最重要的,结构才是重点,样式是用来修饰结构的;

先确定 HTML ,确定语义的标准,再来选用合适的 CSS;

(P27) 浏览器会根据标签的语义给定一个默认的样式;

(P29) Web Developer —— 网页调试插件

(P43) 在语义不明显,既可以用

也可以用

的地方,尽量用

,因为

默认情况下有上下间隔,去样式后的可读性更好,对兼容特殊终端有利;

(P46)
如果漏写 DTD 声明, Firefox 仍然会按照标准样式来解析网页,但在 IE 中(包括 IE6、IE7、IE8)就会触发怪异模式;

一种组织 CSS 的方法 —— base.css + common.css + page.css

(P58) 模块与模块之间尽量不要包含相同的部分,如果有相同部分,应将它们提取出来,拆成一个独立的模块;

(P60) 模块应在保证数量尽可能少的原则下,做到尽可能简单,以提高重用性;

(P71) HTML 标准的 class 属性和 id 属性不同,id 只能挂一个,而 class 可以挂多个,用空格分隔;

(P81) 如果不确定模块的上下 margin 特别稳定,最好不要将它写到模块的类里,而是使用类的组合,单独为上下 margin 挂用于边框的原子类;

(P81) 权重的规则是这样的 —— HTML标签的权重是1,class 的权重是10,id 权重是100;

(P82) 如果 CSS 选择符权重相同,那么样式会遵循就近原则,哪个选择符最后定义,就采用哪个选择符的样式 —— “就近原则”指的是选择符定义的先后顺序,而不是 class 名的先后顺序;

(P84) 为了保证样式容易被覆盖,提高可维护性,CSS选择符需保证权重尽可能低;

(P85) 少使用子选择器,就需要多添加 class ;

(P87) CSS Sprite “图片翻转技术” —— 将多张图片合并为一张,然后利用 background-position 属性来展示需要的部分;

(P88) 是否使用 CSS Sprite 主要取决于网站流量;

(P89) 一般情况下,建议尽量使用 class ,少用 id ;

(P93)
CSS hack ——
1. IE条件注释法