网页中代码的顺序是不可忽略的细节

标签: 互联网 | 发表时间:2012-11-15 21:43 | 作者:潜行者m
出处:http://fairyfish.net

仿佛奇怪的问题总是喜欢找上那些初学者。当我在学习制作网页的时候,经常遇到一些很特别的问题。例如:刚刚添加的样式不起作用、jQuery 的代码老是不起作用等等,这些问题往往是不关注细节导致的。而今天我要谈的这个细节,就是关于网页中代码的顺序。没错,代码也是有顺序的,顺序不对有可能会出现一些意外的情况。

HTML 相关的代码顺序

下面先来介绍 HTML 中的代码顺序。

HTML 代码的排序原理

排序原理很简单,因为当浏览器访问一个网页的时候,要下载这个网页。现在的网速,对于一个几百K的网页来说,很快就能下载完。但是如果网页比较大或者网速比较卡,网页下载就会需要一定的时间。这样的话,浏览器显示网页的过程就很明显了。从 HTML 代码的上到下,依次下载。 重要的内容要优先加载,所以就产生了 HTML 代码排序的问题。

head 里面的元素排序

HTML 中的 head 元素里面,通常放置着文档的描述信息。一般有:网页编码、title 标题、meta 描述网页关键字、link 引入 CSS 文件、script 引入 Javascript 文件等等。下面就这几个内容进行一个讨论(以 HTML5 为例):

首先,先是标准的 DOCTYPE 声明、HTML 结构那一套。

  
<!DOCTYPE html>
<html>
<head></head>
<body></body>
</html>

其次,编写网页编码,我个人认为编码是网页中最重要的,因为它决定浏览器采用什么编码来解析你的网页,如果编码没有设置好的话,网页显示出来就是一整个乱码。关于网页编码的更详细的文章,可以看一下 潜行者m 写的 网页编码就是那点事 。编码写完之后,应该让浏览器立刻显示出网页的标题,这时候就应该写出 title 标题了。

  
<meta charset="utf-8" />
<title>标题</title>

接下来,就应该是声明文档的各种信息,例如 关键词、描述、作者等等信息。之后就要加载 CSS 样式表。让浏览器先下载好 CSS 样式表,之后下载的网页内容,就会立刻加上 CSS 的样式效果,谁也不希望打开网页的时候,是没有样式的,然后加载完内容之后才出现正常的页面。这也就是为什么 CSS 引用要写在 head 里面。

  
<meta name="keywords" content="我爱水煮鱼" />
<meta name="description" content="我爱水煮鱼是一个关注 WordPress 开源博客平台应用和互联网的 IT 博客。" />
<link rel="stylesheet" type="text/css" media="screen" href="style.css"/>

关于 JavaScript 的位置一直比较有争议。因为 JavaScript 比较灵活,可以添加在页面的任何位置。通常推荐的是加在页面的最底部。因为JavaScript 文件通常比较大,浏览器下载比较费时间,由于 JavaScript 可能会影响到当前页面的结构内容,所以浏览器通常会先下载完 JavaScript 代码,“运行” 之后,再下载网页的正文内容。这就导致了加载速度比较慢,因为要先加载 JavaScript 代码才会显示网页内容。所以要放在页面底部。这样浏览器会先下载网页的内容显示出来,然后再下载 JavaScript 对当前的网页进行处理。

body 主体内容的排序

前面说过浏览器先依次下载网页然后显示,那么网页主体内容的排版布局就很明显了: 重要的内容排在前面

例如一个博客类型的网页,最重要的内容肯定是 文章 。所以文章的内容要尽量放在网页的顶部。虽然它可能要显示在下面,但是也要放在代码的上面,然后通过 CSS 布局等放在下面。当网速很卡的时候,排版合理的博客很明显就可以看到,先显示出来头部、文章主体内容,之后再显示 边栏、底部 内容。这就是为了让用户最快的看到他们想要看的内容,即使网速很卡下载很慢,内容出来了边栏等都下载不下来,用户也会得到他需要的内容。这就是 body 元素里面的代码排序原则。

CSS 代码的排序

CSS中有很多排序的小细节需要注意,不注意的话很有可能就出现一些意外情况。

顺序解决样式冲突问题

当你对一个元素赋予了 background-color 属性,你在其他地方,忘了之前的设置,又对这个元素赋予了一个属性值与之前不同的 background-color 属性。那么浏览器究竟会对这个元素渲染哪一个背景颜色呢?答案是代码排在后面的属性值。冲突的内容,后面的属性值就会覆盖前面的属性值。

因此要注意,一些 CSS reset 等要先加载,然后在后面加载自己写的属性值。例如:CSS reset 通常会取消 strong 的加粗,但有时我们的网页作品中,要 strong 显示成加粗效果,所以我们要设置 strong{font-weight:bold;} 这样的样式。但如果 CSS reset 代码放在后面,它之前对 strong 的取消加粗属性就会覆盖掉你的 加粗效果。所以无论刷新网页多少遍,你的 strong 标签里面的内容,还没有加粗。

如果有时候,你真的无法修改加载文件的顺序,那么面对这种情况,你可以使用 CSS 中的 !important 语法,告诉浏览器要使用这个属性解决冲突。

链接的交互排序

一个超链接,默认是蓝色的,当我们把鼠标移动上去,会变色,点击的过程也会变色,访问过后回来一看,通常也不会是原来的蓝色了。控制这些颜色的,分别是 CSS 中的 :link 、:visited 、:hover、:active 这四个伪类选择器,从名称就可以看出,控制的状态分别是:默认显示、访问过后、鼠标移动上去、点击激活。有时候会出现一些意外情况,例如:同时设置了 :visited 和 :hover 的样式,但一旦超链接访问后,hover 的样式就不出现了等。这是因为,这四个伪类选择器对 a 元素定义的时候,是有一个顺序的。如果不按照这个顺序,就会出现一些意外情况。

这个顺序有一个很好记的方法,那就是:love hate,即 l(link)ov(visited)e h(hover )a(active)te。

  
a:link{color:#666666; text-decoration:none;}
a:visited{color:#666666; text-decoration:none;}
a:hover{color:#666666; text-decoration:underline;}
a:active{color:#666666; text-decoration:none;}

属性值的顺序

CSS 中,有的属性既可以分开写,也可以合并起来写。例如 margin 属性,你可以分别制定 margin-left 、margin-right、margin-top、margin-bottom 的值,也可以直接写成 margin:top right bottom left; 也可以写两个参数,分别代表上下和左右的外边距。这样的写法简练而且灵活,但是对不熟练的新手来说,比较容易搞混。当类似 margin 、 padding 这样的属性,写四个参数的时候,以 top 开始,顺时针旋转。

除此之外,还有类似 font、background 这样的属性,它的属性值也要有顺序(虽然对顺序要求不严格),它们的参数有缺省值,所以不需要全部定义,只需要定义自己需要的样式即可。但是 border 这样的属性,就必须严格的按照语法编写属性值的顺序。例如:border :1px solid #ccc;如果 1px solid #ccc 这三个值的顺序出问题了,那么浏览器就可能无法解读这段 CSS 的样式。

JavaScript 代码的顺序

JavaScript 文件加载顺序

jQuery 是一个比较常用的 JavaScript 库,通常我们还要配合它强大的插件使用。对于新手来说,经常会遇到没有产生相应效果的问题。就是说,代码没有检查出问题,但就是没有执行显示应有的效果。原因就出在加载顺序上面。你编写的 JavaScript 代码以及调用的 jQuery 插件,都需要基于 jQuery 库,所以应该在所有 JavaScript 代码之前,先引入 jQuery 库。浏览器先把库下载完了,才会识别后面的依赖这个库的代码实现相应的功能。同样的,激活使用某个插件的代码,也需要放在插件的后面才会有效。

  
<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery/jquery.lazyload.js"></script>
<script type="text/javascript" src="jquery/插件.js"></script>
<script type="text/javascript" src="自己编写的js/js.js"></script>

>>> 继续阅读全文 ...


欢迎关注我们关于 WordPress 技巧的微博: WordPress JAM 新浪微博 新浪微博       WordPress JAM 腾讯微博 腾讯微博

© 我爱水煮鱼 / 收藏本文 / 0条评论 / RSS 订阅 / 长期承接 WordPress 项目 / 主机域名优惠码 / 新浪微博

相关日志

相关 [网页 代码] 推荐:

Zen Coding – 超快地写网页代码

- - haohtml's blog
上次在北京看到善用佳软的 xBeta 演示 VIM 的时候,@ sfufoet 我就被强烈震撼到了. VIM 的确是个强大的编辑器,它可以折腾出很多种强大的功能. 今天看到这个叫  Zen Coding 的东西,我强烈推荐给经常和 HTML CSS 打交道的朋友. 下面的动态演示图,只是它强大功能的一部分而已.

网页中代码的顺序是不可忽略的细节

- - 我爱水煮鱼
仿佛奇怪的问题总是喜欢找上那些初学者. 当我在学习制作网页的时候,经常遇到一些很特别的问题. 例如:刚刚添加的样式不起作用、jQuery 的代码老是不起作用等等,这些问题往往是不关注细节导致的. 而今天我要谈的这个细节,就是关于网页中代码的顺序. 没错,代码也是有顺序的,顺序不对有可能会出现一些意外的情况.

Google开发新服务 重写网页代码提高渲染速度

- Haides - cnBeta.COM
北京时间7月28日晚间消息,谷歌将于今天推出一种名为Page Speed Service(页面速度服务)的新服务这种服务可帮助提升网页速度. 当用户将其网站的DNS入口指向谷歌时,Page Speed Service将可从用户网站的服务器获取内容、重写网页并通过谷歌自身的全球服务器来为用户网站提供服务.

Google发布Chrome官方扩展DOM Snitch 可发现网页代码漏洞

- 小老虎 - cnBeta.COM
Google今天发布了一个名为DOM Snitch的Chrome官方扩展,它可以让开发者和安全人士在浏览网站时自动识别出不安全的代码,这种扩展的灵感其实是来自于5周之前一家安全公司Mind Security在Firefox上的作品DOMinator,使用这种工具用户可以轻易发现例如XSS、数据泄漏等问题,并指出问题所在的代码段,帮助用户规避以及厂商发现后修补.

干货!专为网页设计师提供设计元素和代码片段的Bootsnipp

- - 优设(UISDC)
Bootsnipp 上面有许多人分享的UI资源和交互代码,赶紧去探寻宝藏吧. 在这个页面组件画廊里,为网页设计师和网站开发人员提供了各种各样的网页设计元素,如果您不会编写代码也没关系,可以预览您喜欢的特效,然后下载使用,修改相关字段即可. 如果您有一定编码基础,那更好了,这绝对是学习网页特效的宝库,你会觉得这是饕餮盛宴、海天盛筵.

代码重构

- - ITeye博客
随着程序的演化,我们有必要重新思考早先的决策,并重写部分代码. 代码需要演化;它不是静态的事物. 重写、重做和重新架构代码合起来,称为重构.    当你遇到绊脚石  ---  代码不在合适,你注意到有两样东西其实应该合并或是其他任何对你来说是"错误"的东西  -------- . 如果代码具备以下特征,你都应该考虑重构代码:.

代码小比较

- Tim - 斯巴达第二季
判断上百万个4k的buffer是否为全0,我最先想到的办法是:zero_buffer = malloc(4096);. /* 循环百万次读取buffer */.         /* 全0 */. 由于好奇,看看shell工具cp的代码,它的解决办法是:. /* 循环百万次读取buffer */.         /* 全0 */.

两行 JavaScript 代码

- MessyCS - Dreamer&#39;s Blog
最近看到了两行 JavaScript 代码,很受启发. 在 JavaScript 中,我们可以获取HTML元素的属性值,例如 element.id. 但是,因为 for 和 class 是 JavaScript 中的关键字,所以在 JavaScript 中这两个属性名称分别用 htmlFor 和 className 代替,于是在封装的时候需要先对这两个属性进行特殊判断.

Netty代码分析

- LightingMan - 淘宝JAVA中间件团队博客
Netty提供异步的、事件驱动的网络应用程序框架和工具,用以快速开发高性能、高可靠性的网络服务器和客户端程序[官方定义],整体来看其包含了以下内容:1.提供了丰富的协议编解码支持,2.实现自有的buffer系统,减少复制所带来的消耗,3.整套channel的实现,4.基于事件的过程流转以及完整的网络事件响应与扩展,5.丰富的example.

python代码调试

- - 阿里古古
【转自: http://blog.csdn.net/luckeryin/article/details/4477233】. 本文讨论在没有方便的IDE工具可用的情况下,使用pdb调试python程序. 例如,有模拟税收计算的程序:. debug_demo函数计算4500的入账所需的税收. 在需要插入断点的地方,加入红色部分代码:如果_DEBUG值为True,则在该处开始调试(加入_DEBUG的原因是为了方便打开/关闭调试).