深山老林

2006-09-12[原]8月工作总结

忙了一个月，终于也有点东东出来了，算是我较为满意的一个作品，不算最好，但足以见到自己的进步。这个月里也体会到一些蛮重要的东西，像样式的书写顺序、文件的结构、兼容性的问题等等。

这个月有蛮多东东可以跟大家分享的，不过因为时间太少，没能一个个的给出例子。就说说在写样式文件的时候要注意的地方吧：

一、编码问题

有些时候你可能会发现网页加了样式表文件后显示不正常，而且样式表文件也并没有错，这时就得找找编码的问题的，因为如果用UE等文本编辑器保存文件的时候，有时会不小心存成UTF-8编码的文件，而网页如果使用的是GB-3212编码，就会出现网页显示不正常的问题。

二、书写顺序

很多人不注意样式属性的书写顺序，想到什么写什么，虽然这个影响小到你查觉不到，但在带宽很小的时候，这个影响就会被放大了。因为样式表文件也是按文件的读取顺序去执行的，将属性分类并以一定的顺序书写，不但可以提高可读性，对于文件执行的优化是有帮助的。

当然这顺序不是你想怎么写就怎么写，也得有些依据才行。我们可以把属性分成两大类，布局属性和表现属性。很容易理解，布局属性就是用于布局的属性，表现属性就是用于显示效果方面的。先执行布局再执行表现属性，可以让页面先把布局显示完整。按《Mozilla建议的CSS书写顺序 》中所提到的“显示属性”、“自身属性”、“文本属性”的顺序，我觉得是很不错的，你会发现这个顺序是布局的属性在上方，表现的属性在下面。我是把“自身属性”中的“border”之上的部分分为布局属性，其它的分为表现属性。从大的角度上，你可以把布局属性和表现属性分开，为“换肤”提供方便。

三、兼容问题

这个问题也是最让人头大的问题，为不同的浏览器写hack，已经成为很多用CSS布局的页面仔常做的事，但很少会有人去想怎么做hack才是“正确”的，我并不是说做“hack”是正确的，能不用还是不能的好。还是推荐使用IE条件注解。这里有个技巧，虽然不是我发现的，但的确是很有用：在网页代码的第一行加上
<?xml version="1.0" encoding="UTF-8"?>
让IE7以下的IE版本使用旧的盒模型，先对FF、IE7和OP写样式，再对IE7以下的版本做hack，这个hack可以放在IE条件注解里：
<!--[if lte IE 7]>样式文件<![endif]-->
<!--[if lt IE 7]>样式文件<![endif]-->
这样就只有IE7及以下的IE版本才会用到hack了。同时也是使用了正确的XHTML文件格式。

其它的一些目前还没有成功的、有效的实现，在这里就不多说了。

停了这么长的时间没有更新BLOG，但还能看到每天都会有固定的一些访问，真的很高兴，是你们的支持让我有动力去写BLOG，真的很感谢你们。(*~-~*)

2006-05-08[转]HTML标签参考

下面的包含了所有的属于最新的有效的Strict-XHTML标签资讯。
This section contains information about all of the valid tags belonging to the latest version of strict XHTML

结构
html  head  body  div  span

Meta信息
DOCTYPE  title  link  meta  style

文本
p  h1,  h2,  h3,  h4,  h5,  h6  strong  em  abbr  acronym  address  bdo  blockquote  cite  q  code  ins del  dfn  kbd  pre  samp  var  br

链接
a  base

图象和对象
img  area  map  object  param

列表
ul  ol  li  dl  dt  dd

表格
table  tr  td th  tbody  thead  tfoot  col colgroup  caption

表单
form  input  textarea  select  option  optgroup  button  label  fieldset  legend

Scripting
script  noscript

表现
b,  i,  tt,  sub,  sup,  big,  small,  hr

转自：HTML Dog

2006-05-08[转]符合Web标准的超链接

在HTML4.0Strict和XHTML1.0STRICT里不允许在<a>标签里使用target属性,这是一件令网页设计者懊恼的事.在过渡的规范里还是允许使用的.但通过一定的方法,我们可以解决这一问题。

HTMl4.0规范里拿掉了target属性.但它添加了另外一个属性:rel.这个属性是用来指定包含链接的文档和所链接文档之间的关系的。规范里定义了其属性值(如:next,previous,chapter,section),在这些属性里大多数是用来定义一个大文档里各个小部分之间的关系的.事实上.规范里允许开发人员自由的使用非标准属性值做特定的运用。

在这里,我们采用一个自定义值external用于rel属性来标记一个链接,用来新开一个窗口。
不符合最新Web标准的链接代码:
<ahref="document.html"target="_blank">externallink</a>
运用rel属性:
<ahref="document.html"rel="external">externallink</a>
现在我们构建了一个符合Web标准的新开窗口的链接,我们还需要运用JavaScript是其实现新开窗口.脚本要实现的工作是当网页加载时,找到文档里的所有那些我们定义为rel="external"的超链接。

首先我们要判断浏览器.
if(!document.getElementsByTagName)return;
getElementsByTagName是DOM1标准里一个容易使用的方法,且它被现在的大多数浏览器所支持,因为一些旧的浏览器如Netscape4和IE4不支持DOM1,所以我们必须通过判定这一方法是否存在来排除这些旧版本的浏览器.
下一步,我们通过getElementsByTagName方法取得文档里所有的<a>标签:
varanchors=document.getElementsByTagName("a");
anchors被赋值为包含各个<a>标签的数组,现在我们必须遍历各个<a>标签并且修改它:
for(vari=0;i<anchors.length;i++){
varanchor=anchors;
找到要实现新开窗口的<a>标签
if(anchor.getAttribute("href")&&
anchor.getAttribute("rel")=="external")
接下来.建立属性值target并赋值"_target":
anchor.target="new";

完整的代码:
------------------------

functionexternalLinks(){
if(!document.getElementsByTagName)return;
varanchors=document.getElementsByTagName("a");
for(vari=0;i<anchors.length;i++){
varanchor=anchors;
if(anchor.getAttribute("href")&&
anchor.getAttribute("rel")=="external")
anchor.target="new";
}
}
window.onload=externalLinks;

转自：中国SOHO网