(X)HTML Strict 下的嵌套规则

2009-03-24 10:19  |  分类：前端技术

下面是一份在 HTML 4 Strict 和 XHTML 1.0 Strict 下必须遵守的标签嵌套规则，比如你不能在 <a> 里面再嵌入一个 <a> 这样的约定。

说明：

  • 为了方便读者阅读，本文中的标签使用了大写（根据 XHTML 的规则，元素名必须小写，比如 <html> 而不应是 <HTML>）
  • 小写的单词表明一组或一系列 HTML 标签
  • 每一项条目（标签）后都跟随一组标签列表，如果没有这个列表，那么表明该条目（标签）内部不允许包含任何标签。这意味着该条目内部只能包含纯文本内容（#PCDATA，见下文）。如果注明 (empty)，这意味着该条目内部不允许包含任何形式的内容。对于 flow，inline，block，OBJECT 和 BODY，其内部允许包含的内容在文中会单独给出。
  • #PCDATA 的意思是“parsed character data”，即纯文本内容（不包括任何 HTML 标签，但是转义内容可以存在，比如 &auml; 和 &#228;）
  • CDATA 的意思是“character data”，这意味着不包括转义内容的纯文本内容，详细内容可以参考CDATA Confusion
  • excluding … 意即不得直接或者间接的包含所列的元素

Allowed Nesting of elements in (X)HTML Strict

注1. 以上内容基于 [HTML 4.01 Specification] 的 Strict DTD。JunChen 翻译自 Allowed nesting of elements in HTML 4 Strict (and XHTML 1.0 Strict)

注2. 对于 XHTML 1.0，基本上一致，不同点如下：

  • 对于 <script> 和 <style> 的内容，在 HTML 4 里是 CDATA 而在 XHTML 里是 #PCDATA
  • 在 XHTML 中，<table> 标签后可以紧跟一个 <tr>，而在 HTML 4.01 里，不允许这样，不过 <tbody> 标签又是可以省略的。意思就是说，如果代码中的 <table> 后紧跟 <tr>，对于 HTML 4.01，会隐性的生成一个 <tbody> 标签，而在 XHTML 里面就没有。这会影响到样式表使用 tbody 作为选择器。
标签：、 297 views  |  3 条评论

CSS 外边距合并

2009-03-16 16:25  |  分类：前端技术

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。

合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

外边距合并

外边距合并（叠加）是一个相当简单的概念。但是，在实践中对网页进行布局是，它会造成许多混淆。

简单地说，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

 

当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。请看下图：

CSS 外边距合并实例 1

全文阅读 »

标签： 343 views  |  1条评论

可重用滑动式Tab标签

2009-02-23 21:40  |  分类：前端技术

与其他的tab标签效果类似，一般的同一页面可多次应用的Tab标签都是点击式的，稍作改造，可重用，比较简单。

HTML代码：

  1. <div class="tabs">
  2.     <div class="tabs_menu">
  3.         <ul id="menu1" class="menu">
  4.             <li class="hover" onmouseover="setTab(1,0)">新闻1</li>
  5.             <li onmouseover="setTab(1,1)">评论1</li>
  6.         </ul>
  7.     </div>
  8.     <div class="tabs_content">
  9.         <div id="main1" class="content">
  10.             <ul class="block"><li>新闻列表1</li></ul>
  11.             <ul><li>评论列表1</li></ul>
  12.         </div>
  13.     </div>
  14. </div>
  15.  
  16. <div class="tabs">
  17.     <div class="tabs_menu">
  18.         <ul id="menu2" class="menu">
  19.             <li class="hover" onmouseover="setTab(2,0)">新闻2</li>
  20.             <li onmouseover="setTab(2,1)">评论2</li>
  21.         </ul>
  22.     </div>
  23.     <div class="tabs_content">
  24.         <div id="main2" class="content">
  25.             <ul class="block"><li>新闻列表2</li></ul>
  26.             <ul><li>评论列表2</li></ul>
  27.         </div>
  28.     </div>
  29. </div>

CSS代码：

  1. .tabs{text-align:left;width:auto;}
  2. .tabs ul{margin:0; padding:0;}
  3. .tabs ul li{list-style-type:none;}
  4. .tabs_menu{position:relative;overflow:hidden;height:22px;width:auto;text-align:left;}
  5. .menu{position:absolute;z-index:1;}
  6. .menu li{cursor:pointer;width:100px;line-height:21px;height:21px;color:#CCCCCC;float:left;display:block;}
  7. .menu li.hover{color:#0066CC; border-left:3px #0066CC solid;}
  8. .tabs_content{height:181px;width:auto; border-top:3px #0099CC solid; clear:both; }
  9. .content ul{display: none;}
  10. .content ul.block{display: block;}

JS代码：

  1. function setTab(m,n){
  2.  var tli=document.getElementById("menu"+m).getElementsByTagName("li");
  3.  var mli=document.getElementById("main"+m).getElementsByTagName("ul");
  4.  for(i=0;i<tli.length;i++){
  5.   tli[i].className=i==n?"hover":"";
  6.   mli[i].style.display=i==n?"block":"none";
  7.  }
  8. }
标签： 574 views  |  6 条评论

一种横向产品列表

2009-02-06 20:22  |  分类：前端技术

效果：
横向产品列表

HTML部分：

  1. <div>
  2.     <ul>
  3.         <li>
  4.             <img src="pic1.gif" alt="pic1" />
  5.             <span>11111</span>
  6.             <span class="text">aaaaaaaaaaaaaaa</span>
  7.             <a href="#"></a>
  8.         </li>
  9.         <li>
  10.             <img src="pic2.gif" alt="pic2" />
  11.             <span>22222</span>
  12.             <span class="text">bbbbbbbbbbbbbbb</span>
  13.             <a href="#"></a>
  14.         </li>
  15.         <li>
  16.             <img src="pic3.gif" alt="pic3" />
  17.             <span>33333</span>
  18.             <span class="text">ccccccccccccccc</span>
  19.             <a href="#"></a>
  20.         </li>
  21.         <li>
  22.             <img src="pic4.gif" alt="pic4" />
  23.             <span>44444</span>
  24.             <span class="text">ddddddddddddddd</span>
  25.             <a href="#"></a>
  26.         </li>
  27.     </ul>
  28. </div>

全文阅读 »

标签： 680 views  |  6 条评论

一个CSS导航实例

2009-02-02 13:48  |  分类：前端技术

效果：

CSS导航一例

XHTML部分：

  1. <div class="warp">
  2.     <div class="nav">
  3.         <a href="#" class="on">首页</a>
  4.         <a href="#">首页</a>
  5.         <a href="#">首页</a>
  6.         <a href="#">首页</a>
  7.         <a href="#">首页</a>
  8.         <a href="#">首页</a>
  9.         <a href="#">首页</a>
  10.         <a href="#">首页</a>
  11.     </div>
  12. </div>

CSS部分：

  1. a {
  2. display:block;
  3. width:107px;
  4. height:44px;
  5. background:url(nav_button_np.gif) no-repeat;
  6. line-height:44px;
  7. text-align:center;
  8. color:#FFF;
  9. font-size:12px;
  10. font-weight:700;
  11. text-decoration:none;
  12. float:left;
  13. }
  14.  
  15. a:hover {
  16. background:url(nav_button_pr.gif) no-repeat;
  17. text-decoration:underline;
  18. }
  19.  
  20. .on {
  21. background:url(nav_button_on.gif) no-repeat;
  22. }

—>点击查看最终效果<—

标签：、 633 views  |  3 条评论

无图片CSS圆角的实现

2009-02-01 19:50  |  分类：前端技术

XHTML部分：

  1. <div>
  2.     <b class="t1"></b>
  3.     <b class="t2"></b>
  4.     <b class="t3"></b>
  5.     <b class="t4"></b>
  6.     <div class="cont">CSS圆角</div>
  7.     <b class="b4"></b>
  8.     <b class="b3"></b>
  9.     <b class="b2"></b>
  10.     <b class="b1"></b>
  11. </div>

CSS部分：

  1. .t1,.t2,.t3,.t4,.b1,.b2,.b3,.b4{overflow:hidden; display:block;}
  2. .t1,.t2,.t3,.b1,.b2,.b3{height:1px;}
  3. .t2,.t3,.t4,.b2,.b3,.b4,.cont{border-left:1px solid #666666; border-right:1px solid #666666;}
  4. .t1,.b1{margin:0 5px; background-color:#666666;}
  5. .t2,.b2{margin:0 3px; border-width:2px;}
  6. .t3,.b3{margin:0 2px;}
  7. .t4,.b4{margin:0 1px; height:2px;}
  8. .cont{height:20px;}

—>点击查看最终效果<—

标签：、、 657 views  |  4 条评论

改变世界的Web前端开发

2009-01-13 11:58  |  分类：前端技术

乔布斯说：“活着就是为了改变世界，难道还有其它原因吗？” 2008年，在Web前端开发界，无论国外还是国内，都发生了不少事情，有哪些是改变世界或即将改变世界的大事件呢？

JavaScript游戏

2008年4月9日，Dion Almaer发现了一款非常经典的JavaScript游戏：Super Mario. 这款游戏由Jacob Seidelin开发，大小仅14k.
mario
(Super Mario JavaScript版本： http://jsmario.com.ar/)

不少Web开发者们大跌眼镜：这真的是用JavaScript开发出来的？答案是肯定的。这款游戏利用了Canvas元素（IE中用HTML模拟），图像存储在加密的字符串中，还用base64存储了MIDI背景音乐。除了这些技巧，其它代码就是我们熟悉的HTML、CSS和JavaScript.

Super Mario JavaScript版本的横空出世（之前也出现过用JavaScript写的游戏，但没有像Super Mario一样引起大家的关注），激起了一股用JavaScript编写游戏的热潮：

许多经典的游戏都有了JavaScript版本：Pac-Man（经典的吃豆子游戏）， Space Invaders（太空入侵者），Spacius（百玩不厌的雷电）等等。

甚至还出现了一些比较复杂的角色扮演游戏：Andrew Wooldridge创造的Tombs of Asciiroth 和 CanvasQuest，Pierre Chassaing创造的ProtoRPG等。

伴随JavaScript游戏的热潮，还出现了不少专门用于游戏开发的JavaScript库。最突出的是GameJS（基于Canvas的一个2D游戏开发库） 和 GameQuery（这是jQuery的一个插件）。

除了用Canvas构建2D游戏，用JavaScript还可以构建3D游戏，还出现了非常出色的Processing.js，以及JavaScript PlotTool绘图工具等等。

感慨：JavaScript游戏一段时间内将还只是开发者们的“玩物”，要真正转换为商业应用，可能还有一段漫长的路要走。但是，当Super Mario跳跃在Web网页上时，这昭示着JavaScript的时代已经到来了。JavaScript能做什么？2008年的答案是：JavaScript连游戏都能做！

全文阅读 »

标签： 612 views  |  3 条评论

只需三招讓你的系統速度提高三倍

2009-01-06 11:38  |  分类：其他内容

只需三招讓你的系統速度提高三倍
1、减少开机磁盘扫描等待时间，开始→运行，键入：chkntfs /t:0

2、删除系统备份文件:
在各种软硬件安装妥当之后，其实XP需要更新文件的时候就很少了。开始→运行，敲入：sfc.exe /purgecache 然后回车即可,近3xxMb。

3、压缩文件夹
这是一个相当好的优化，Windows XP内置了对.ZIP文件的，我们可以把zip文件当成文件夹浏览。不过，系统要使用部分资源来实现 这一功能，因此禁用这一功能可以提升系统性能。实现方法非常简单，只需取消zipfldr.dll的注册就可以了，点击开始——运行，敲入： regsvr32 /u zipfldr.dll。然后回车即可。

转自http://blog.hxsd.com.cn/blog/3509/

标签： 407 views  |  2 条评论

合理使用target=”_blank”

2009-01-03 11:51  |  分类：前端技术

         target=”_blank”的作用是在新窗口中打开页面，也是我们经常使用的方法，在过渡类型（Transitional）的DTD，这种做法没有问题，是允许的，但是在严格型（Strict）的DTD下就是不允许的了，不过可以通过JS来变相的实现在新窗口中打开页面，或者用shift+鼠标左键来在新窗口中打开页面。在用户体验来说，每个人的使用习惯是不同的，并不是所有的人都知道用shift来打开新页面，就算知道也不一定就经常去使用。一切还是要从实际出发。

         现在有很多人都不提倡打开新窗口或者去追随标准，甚至直接抛弃。经常看到有的文章在用国内的门户网站和国外的门户网站进行对比，甚至去批评国内的门户，说国内的门户到处都是打开新窗口，都是强加给用户，而国外则都是在原窗口打开，让用户自己去选择等等…任何事物都是有两面性的，谁能肯定的说target=”_blank”就会让所有的人都讨厌，都反感，没有一点亲和力？要知道，标准本来也是不标准的，它只是代表了一部分人而不是所有人的行为习惯，说句不靠谱的话，WEB标准是老外定出来的东西，中国人的习惯和外国人是有很大的不同的，作为一个WEB开发者，合理而不是盲目的去遵循标准，根据不同的用户群体去做用户体验，才是比较正确的做法。毕竟一个刚刚接触电脑的人和一个计算机专业的工程师肯定是不一样的。一个白领和一个在网吧打游戏的学生也会有天壤之别。

         拿target=”_blank”来说，我个人认为，target=”_blank”是一个很方便的东西，比起写一大段的JS，还有我们不熟悉的rel属性（rel，这个属性用来说明链接和包含此链接页面的关系，以及链接打开的目标。），都要方便的多，真不明白为什么W3C会取消掉。我也遇到过一些站，几乎所有的链接都是在新窗口打开，这确实很烦人。关键是target=”_blank”不要滥用，我的做法一般是类似于新闻列表的文章内容页面的链接、搜索结果列表的链接、广告链接、以及外部链接，这些链接大部分在看完的时候就会关闭了，关闭以后不会影响原有内容的呈现。作为一个WEB开发者，如何将最好的内容、最简单方便的使用、最舒适的视觉享受提供给用户才是重点。

标签：、 602 views  |  2 条评论

DIV + CSS 神话

2008-12-26 21:17  |  分类：前端技术

在网上看到这样一篇文章，名字很吸引人，所以摘了下来

作为一个身处 2008 年末的 Web 设计师，你是否好意思承认自己的代码中使用了 Table，如果是，你是一个有勇气的人，Web 设计是个奇怪的行业，你可以将自己的网站设计得像晚报的分类广告，或者楼道里的开锁广告，但千万别让人知道你使用了 Table，在你的源代码中发现 Table 就像一个销售被人掀起裤脚发现穿了白袜子一样。

Table 是如此丑陋，臃肿，哪怕只显示一段简单的内容，你也需要 <table><tr><td> 这三个基本的标签，每个标签里面还要加上一堆乱七八糟的属性，不像<div>，既简单，又整洁，又时尚，它和 CSS 珠联璧合，琴瑟和谐，它们构成最完美的 Box 模型，他们象现实中的箱子，你把东西放进去，然后，很自由地对他们进行排列，厌烦了一种布局，没关系，简单地改动一下 CSS 定义，一种全新的布局便诞生了；不象 Table，Table 像食堂里的餐具柜，一排排，一列列，土里土气，油腻腻的，象我们的父辈，邋遢，什么都往家里拿，胡乱堆在角落里，如果 Div 是小资，Table 就是老三届，他们不属于这个时代。

也就是近几年的事，至多不过三五年，W3C是一个人人都认为重要但人人都不喜欢的组织，他们的官方网站十分丑陋，我敢说平生没见过这么丑陋的网站，但他们的网站是为数不多的可以通过全部W3C标准验证的网站，这意味着，他们的网站在语法上，在结构上，在可访问性上是完美的，虽然依旧十分丑陋。不过这是笑谈，W3C非常重要，否则微软会把全体 Web 开发工程师带到万劫不复的境地，还好，Netscape 死后，涅磐出 Firefox，而 Opera 在 Firefox 横空出世之后虽然没得到任何好处，至少得到了精神上的支持，看到没，终于有大哥出来收拾你。乔布斯复出后，苹果重返昔日的光芒，这时人们才知道世界上还有一个叫做 Safari 的浏览器，所有这一切加在一起，让 W3C 真正有了存在的必要。

W3C 说，Table 可以用来容纳文字，格式文字，图片，链接，表单，以及其它 Table … 但是，Table 不应该单纯用来做网页布局（Tables should not be used purely as a means to layout document content），理由是，当 Web 被非可视化设备渲染的时候，Table 会出现问题，他们指定是屏幕阅读器以及盲文浏览器，另外，Table 在大型显示设备上会强迫用户左右滚动，因此，Web 设计者应该使用 CSS 而不是 Table。参见 W3C HTML 4.01 关于 Table 的定义。 W3C 说这段话的时候，是1999年12月24日，那时尽管 CSS 早已诞生，但并没有多少人使用，最初的 Web 像一个在线版的文档，并没有成为现在这样的平台，不需要过多过多地考虑布局问题，随着互联网第一次泡沫的形成，涌现出大量的门户网站，门户网站是 Table 布局的始作俑者，因为他们的首页比一整份报纸的所有版面拼接在一起还复杂，Table 在这方面十分顺手，结合 colspan 和 rolspan，你几乎能够实现任何复杂的版面。

全文阅读 »

标签：、、 547 views  |  5 条评论
Pages: 1 2 3 4 5 6 7 Next

©2008 EasyQ设计开发团队 All Rights Reservied 冀ICP备08104232号

Powered by WordPress. Theme by Prower