install/dedev57demo.txt
（开头部分） 1MB这里只显示每个文件的开头 60 行。登录后可以解锁完整代码。
INSERT INTO `#@__addonarticle` (`aid`, `typeid`, `body`, `redirecturl`, `templet`, `userip`) VALUES
(1, 2, '<p>HTML 4.0的新特性之一是使HTML事件触发浏览器中的行为，比方说当用户点击一个HTML元素时启动一段JavaScript。以下就是可被插入HTML标签以定义事件行为的一系列属性。</p><p>假如你希望学习如何使用这些事件进行编程，那么你应该学习我们的JavaScript教程和DHTML教程。</p><h3>窗口事件 (Window Events)</h3><p>仅在body和frameset元素中有效。</p><table width="100%"><tbody><tr><th width="25%">属性</th><th width="15%">值</th><th width="60%">描述</th></tr><tr><td>onload</td><td>脚本</td><td>当文档被载入时执行脚本</td></tr><tr><td>onunload</td><td>脚本</td><td>当文档被卸下时执行脚本</td></tr></tbody></table><h3>表单元素事件 (Form Element Events)</h3><p>仅在表单元素中有效。</p><table width="100%"><tbody><tr><th width="25%">属性</th><th width="15%">值</th><th width="60%">描述</th></tr><tr><td>onchange</td><td>脚本</td><td>当元素改变时执行脚本</td></tr><tr><td>onsubmit</td><td>脚本</td><td>当表单被提交时执行脚本</td></tr><tr><td>onreset</td><td>脚本</td><td>当表单被重置时执行脚本</td></tr><tr><td>onselect</td><td>脚本</td><td>当元素被选取时执行脚本</td></tr><tr><td>onblur</td><td>脚本</td><td>当元素失去焦点时执行脚本</td></tr><tr><td>onfocus</td><td>脚本</td><td>当元素获得焦点时执行脚本</td></tr></tbody></table><h3>键盘事件 (Keyboard Events)</h3><p>在下列元素中无效：base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, and title elements.</p><table width="100%"><tbody><tr><th width="25%">属性</th><th width="15%">值</th><th width="60%">描述</th></tr><tr><td>onkeydown</td><td>脚本</td><td>当键盘被按下时执行脚本</td></tr><tr><td>onkeypress</td><td>脚本</td><td>当键盘被按下后又松开时执行脚本</td></tr><tr><td>onkeyup</td><td>脚本</td><td>当键盘被松开时执行脚本</td></tr></tbody></table><h3>鼠标事件 (Keyboard Events)</h3><p>在下列元素中无效：base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, title elements.</p><table width="100%"><tbody><tr><th width="25%">属性</th><th width="15%">值</th><th width="60%">描述</th></tr><tr><td>onclick</td><td>脚本</td><td>当鼠标被单击时执行脚本</td></tr><tr><td>ondblclick</td><td>脚本</td><td>当鼠标被双击时执行脚本</td></tr><tr><td>onmousedown</td><td>脚本</td><td>当鼠标按钮被松开时执行脚本</td></tr><tr><td>onmousemove</td><td>脚本</td><td>当鼠标指针移动时执行脚本</td></tr><tr><td>onmouseout</td><td>脚本</td><td>当鼠标指针移出某元素时执行脚本</td></tr><tr><td>onmouseover</td><td>脚本</td><td>当鼠标指针悬停于某元素之上时执行脚本</td></tr><tr><td>onmouseup</td><td>脚本</td><td>当鼠标按钮被松开时执行脚本</td></tr></tbody></table>\r\n <p align="center"> </p>', '', '', ''),
(2, 2, ' 一段时间以来，发现有很多人XHTML都不会用，不光是普通的初学者，有的程序员都不是很清楚该怎么写这个XHTML，我这里呢算是把一些常见的应用问题做一个总结，也算能使得大家能在沟通，合作上能形成默契。<br /><br /> XHTML里有很多的标签，但是经常用到的也就是那么几个，也只要掌握这几个也就可以了。下面我们一一列举：div,p,span,ul,li,dl,dt,dd,a,img,h,strong,em<br /><br /> div 在我的脑子里我一直把他想作是一个瓶子或是箱子，我的感觉它挺硬的。这个div没有什么特性的意义，可以使用在很多地方，也就是说他可以装不同的东西。他的正确的写法是<div></div>必需要有封口。大家都用来做布局之用，也有用来作为存放文章形成段落，实际上，这个做法并不是很好，因为作为文章的分段自然有一个特定的标签来用。那就是下面要讲的<p></p>标签，不过用DIV来再整体的包住所有的段落。这是非常实用的。<br /><br /> p 这是一个有特定语义的标签，表示段落，是用来区分段落的。在大部分的浏览器中对P基本上都有一个上下的边距。但是没有行首缩进，因为行首缩进只是表示段落的方式但是不是一定或是必需的。所以在用P标签的时候如果需要可以针对P设定一下行首缩进，我是推荐在文章以外的地方不要使用P，因为P是有一定语义的，如果用在别的地方恐不合适。正确的写法是<p></p><br /><br /> span 这也是一个非常常用的标签，这个标签可以说与div很像，没有什么特定的意义，只是他是一个级联元素，不是块级元素。我一直把它看作是一个袋子，他不像箱子那样可以有自己的宽高，他的宽高只能随着内容的多少而定，所以很像是袋子。这个标签与div正好互补。<br /><br /> ul,li 这是一个列表，在列表中，除了UL还OL，不过我觉得OL有点像是鸡肋。因为UL通过CSS定义一样可以有OL的数字排序效果。所以一般我不推荐使用OL，有UL就可以了。UL是块级的，他的子级li也是块级标签。正确的写法是<ul><li>< /li></ul> LI标签是被UL标签包裹的，在UL标签里可以有无数个LI标签，LI标签不能独立使用。并且LI标签一定要封口，这不光是美观问题，对于后期的维护也很有好处。很多程序员都不喜欢把这个LI封口。UL列表的用处主要是列举出一维的，同一类型的数据。具体的比如使用在菜单上，文章中列数的一些条例等等。在列表中有一种特别的形式与UL是不一样的。那就是下面的DL<br /><br /> dl,dt,dd 这是一个很特别的三个标签的组合。这里的DT是指标题，DD是指内容。DL是包课他们的容器。正确的写法是<dl><dt>< /dt><dd></dd></dl>在DL里可以有很多组的DT，DD，当出现很多组的时候尽量是一个DT 配一个DD，如果DD中内容很多，可以在DD里加P标签配合使用。DL列表是一个非常好的列表形式，可以多加利用。<br /><br /> a 这表示链接，是一个特定属性的，也是网页中最为神奇的标签。因为它才让无数的网页都连在了一起。正确的写法是：<a href="" title=""> </a>其中的href是表示目标地址，TITLE是鼠标悬停提示文字，这是可有可无的。但是有必是利大于无。<br /><br /> img 这是图片标签，也是个特定属性的标签。正常写法是：<img src="" alt="" title=""/> 这里的src是目标地址， ALT与TITLE是替换文字，ALT是 IE特定的，TITLE是其它浏览器的通用的。不过记得后面的反斜线那是一定要有的。<br /><br /> H 这是一个系列的标签，从H1到H6，一共六个，有人说太少了，有人说正好用，有人说用不了这么多。反正我是觉得差不多。正确写法是：<h> </h>主要是用来存放标题，也有一些朋友用来作它用拿来作其它用处，个人觉得这个标签还是让他安生一点，就让他做标题的作用。这六个标签之间最好不要出现什么相互包含的事。<br /><br /> strong 这个意思是着重，这是有语义的，作用也很简单。至于样工，是加粗着重，还是用色彩表明着重，那都是自行选择。正确的写法是<strong></strong><br /><br /> em 这个与strong很像，是表示强调。一般浏览器的默认值是斜体。使用方式与strong一样。写法是：<em></em><br /><br /> 这里没有说表单，因为表单基本上没有什么变化，也没什么可特别说的。\r\n <p align="center"> </p>', '', '', ''),
(3, 2, '<p>你认为已经知道怎么制做表格了吧。当然，你已经了解 table、tr、td和th标签了，甚至还在你的口袋里装入了rowspan和colspan。你确实可以制做一个精美小巧的咖啡色三合板桌子（表格），但难道你不想做一个优雅稳固，上面有玻璃的，足以承受一头大笨象的宴会桌（表格）？</p><p><strong>列反罢工</strong></p><p>表格行简直使表格列看起来很愚蠢。同样的工作，表格由行与行构建，让列感到十分沮丧。</p><p>但是很幸运，colgroup和col标签来拯救热心的列了。</p><p>这两个标签允许你定义表格列和尽你所需地样式化它们，对于你需要把列排成行或不同着色特别有用，如果没有它们，你需要样式化每一个单独的单元格。</p><p>这是一个使用这些标签的例子：</p><p class="code"><table><br /><colgroup> <col /> <col class="alternate" /> <col /> </colgroup><br /><tr><br /><td>This</td><br /><td>That</td><br /><td>The other</td><br /></tr><br /><tr><br /><td>Ladybird</td><br /><td>Locust</td><br /><td>Lunch</td><br /></tr><br /></table> </p><p>alternate类的样式将被应用到第二列，或者说每一行的第二个单元格。</p><p>你当然可以在colgroup或者col上使用span属性，跟rowspan和colspan有相似的用途</p><p>colgroup一起使用可以定义属于列组的行数，比如<colgroup span="2"></colgroup>会组合头两列。当在colgroup使用span时，不应该再使用col标签。</p><p>在col里使用span是更明智的，可以，比如，应用在上述例子像这样：</p><p class="code"><table><br /><colgroup> <col /> <col span="2" class="alternate" /> </colgroup><br /> ... </p><p>这将把alternate类应用到最后两列。</p><p><strong>注意</strong></p><p>哦，但是可能有一个陷井，不是吗？那就是：你仅能样式化列的是边框、背景、宽度和可见性。</p><p>Internet Explorer在这方面看起来比其他浏览器表现更好因为它装载有漂亮的CSS属性比如 color，但是，正如结果一样，这是因为它疯狂古怪的行为而已。这种奇特的异常可以让Ian Hixie来解释。</p><p><strong>摘要和说明插曲</strong></p><p>一个简要和容易的提高易用性的思考是，总是为表格应用摘要和说明。</p><p>摘要可以在表格起始标签table中用summary属性应用到表格中。这不会显示，但可以辅助非可视化的表格表现。</p><p>caption标签在起始标签table后直接定义说明。它默认直接在表格顶端出现，但可以在CSS属性caption-side中设置top、right、bottom或者left值，尽管IE不会在意。</p><p class="code"><table summary="The mating habits of locust, showing how many use protection and how many have a cigarette afterwards"><br /><caption>Locust mating habits</caption><br />... </p><p><strong>表头、表注和滚动表格的探讨</strong></p><p>thead、tfoot和tbody允许你把表格分为表头、表注和表格主体。对于大表格尤其有用，在打印的时候，表头和表注应该会在每一页都出现。</p><p>这些元素必须按thead-tfoot-tbody的顺序定义，像这样：</p><p class="code"><table><br /><thead><br /><tr><br /><td>Header 1</td><br /><td>Header 2</td><br /><td>Header 3</td><br /></tr><br /></thead><br /><tfoot><br /><tr><br /><td>Footer 1</td><br /><td>Footer 2</td><br /><td>Footer 3</td><br /></tr><br /></tfoot><br /><tbody><br /><tr><br /><td>Cell 1</td><br /><td>Cell 2</td><br /><td>Cell 3</td><br /></tr><br /> ... <br /></tbody><br /></table> </p><p>你可以让表格主体tbody在基于Gecko的浏览器（Mozilla、Firefox和Netscape 6+等）滚动，通过应用overflow: auto; max-height: [whatever] 的样式。然后你可以看见表头和表注固定，而表的主体右边有滚动条。你应该谨慎使用max-height属性因为IE不认识，比较安全的做法是使用 height属性，IE将为它应用到每一行。</p><p>注意：说回浏览器的差异，目前IE遇到表头和表注时还是没有什么线索，尽管还是当作表格来处理，但打印的时候不会在哦每一页都出现表头和表注，只孤零零地传递滚动的表格。</p><p><strong>注意</strong></p><p>谨慎对待滚动表格。尽管它们提供十分有用的目的，大部分用户不习惯它们并且认为线性数据是唯一的。</p>\r\n <p align="center"> </p>', '', '', ''),
(4, 2, '<p><strong>结构</strong></p><p>＜html＞<br />＜head＞<br />＜title＞标题＜title＞<br />＜/head＞<br />＜body＞..........文件内容..........<br />＜/body＞<br />＜/html＞<br />1.文件标题<br />＜title＞..........＜/title＞<br />2.文件更新--＜meta＞<br /> 【1】10秒后自动更新一次<br /> ＜meta http-equiv="refresh" content=10＞<br /> 【2】10秒後自动连结到另一文件<br /> ＜meta http-equiv="refresh" content="10；URL=欲连结文件之URL"＞<br />3.查询用表单--＜isindex><br /> 若欲设定查询栏位前的提示文字：<br /> ＜isindex prompt="提示文字"＞<br />4.预设的基准路径--＜base><br /> ＜base href="放置文件的主机之URL"＞</p><p><strong>版面</strong></p><p>1.标题文字 ＜h#＞..........＜/h#＞ #=1~6；h1为最大字，h6为最小字<br />2.字体变化 ＜font＞..........＜/font＞ <br />【1】字体大小 ＜font size=#＞..........＜/font＞ #=1~7；数字愈大字也愈大 <br />【2】指定字型 ＜font face="字型名称"＞..........＜/font＞ <br />【3】文字颜色 ＜font color=#rrggbb＞..........＜/font＞ rr：表红色（red）色码 gg：表绿色（green）色码 bb：表蓝色（blue）色码<br />3.显示小字体 ＜small＞..........＜/small＞ <br />4.显示大字体 ＜big＞..........＜/big＞<br />5.粗体字 ＜b＞..........＜/b＞<br />6.斜体字 ＜i＞..........＜/i＞ <br />7.打字机字体 ＜tt＞..........＜/tt＞<br />8.底线 ＜u＞..........＜/u＞<br />9.删除线 ＜strike＞..........＜/strike＞<br />10.下标字 ＜sub＞..........＜/sub＞<br />11.上标字 ＜sup>..........＜/sup＞<br />12.文字闪烁效果 ＜blink＞..........＜/blink＞<br />13.换行 ＜br＞<br />14.分段 ＜p＞ <br />15. 文字的对齐方向 ＜p align="#"＞ #号可为 left：表向左对齐（预设值） center：表向中对齐 right：表向右对齐 P.S.＜p align="#"＞之後的文字都会以所设的对齐方式显示， 直到出现另一个＜p align="#"＞改变其对齐方向，或遇到＜hr＞?＜h#＞标签时会自动设回预设的向左对齐。<br />16.分隔线 ＜hr＞ <br />【1】分隔线的粗细 ＜hr size=点数＞ <br />【2】分隔线的宽度 ＜hr size=点数或百分比＞ <br />【3】分隔线对齐方向 ＜hr align="#"＞ #号可为 left：表向左对齐（预设值） center：表向中对齐 right：表向右对齐 <br />【4】分隔线的颜色 ＜hr color=#rrggbb＞ <br />【5】实心分隔线 ＜hr noshade＞<br />17.向中对齐 ＜center＞..........＜/center＞<br />18.依原始样式显示 ＜pre＞..........＜/pre＞<br />19.＜body＞指令的属性 <br />【1】背景颜色 -- bgcolor ＜body bgcolor=#rrggbb＞ <br />【2】背景图案 -- background ＜body background="图形文件名"＞ <br />【3】设定背景图案不会卷动 -- bgproperties ＜body bgproperties=fixed＞ <br />【4】文件内容文字的颜色 -- text ＜body text=#rrggbb＞ <br />【5】超连结文字颜色 -- link ＜body link=#rrggbb＞ <br />【6】正被选取的超连结文字颜色 -- vlink ＜body vlink=#rrggbb＞ <br />【7】已连结过的超连结文字颜色 -- alink ＜body alink=#rrggbb＞<br />20.注解 ＜!--..........--＞21.特殊字元表示法 <br />符 号 语 法 <br />＜ ＆ｌｔ <br />＞ ＆ｇｔ <br />& ＆ａｍｐ <br />" ＆ｑｕｏｔ <br />空白 ＆ｎｂｓｐ</p><p><strong>图片</strong></p><p>1.插入图片 ＜img src="图形文件名"＞<br />2.设定图框 -- border ＜img src="图形文件名" border=点数＞<br />3.设定图形大小 -- width?height ＜img src="图形文件名" width=宽度点数 height=高度点数＞<br />4.设定图形上下左右留空 -- vspace?hspace ＜img src="图形文件名" vspace=上下留空点数 hspace=左右留空点数＞<br />5.图形附注 ＜img src="图形文件名" alt="说明文字"＞<br />6.预载图片<br />＜img src="高解析度图形文件名" lowsrc="低解析度图形文件名"＞ P.S.两个图的图形大小最好一致<br />7.影像地图（Image Map） ＜img src="图形文件名" usemap="#图的名称"＞ ＜map name="图的名称"＞<br /> ＜area shape=形状 coords=区域座标列表 href="连结点之URL"＞<br /> ＜area shape=形状 coords=区域座标列表 href="连结点之URL"＞<br /> ＜area shape=形状 coords=区域座标列表 href="连结点之URL"＞<br /> ＜area shape=形状 coords=区域座标列表 href="连结点之URL"＞ ＜/map＞ <br />【1】定义形状 -- shape<br /> shape=rect：矩形 shape=circle：圆形 shape=poly：多边形 <br />【2】定义区域 -- coords<br />a.矩形：必须使用四个数字，前两个数字为左上角座标，后两个数字为右下角座标<br />例：＜area shape=rect coords=100,50,200,75 href="URL"＞<br />b.圆形：必须使用三个数字，前两个数字为圆心的座标，最后一个数字为半径长度<br />例：＜area shape=circle coords=85,155,30 href="URL"＞<br />c.任意图形（多边形）：将图形之每一转折点座标依序填入<br />例：＜area shape=poly coords=232,70,285,70,300,90,250,90,200,78 href="URL"＞</p><p><strong>表格</strong></p><p>1.定义表格 ＜table＞..........＜/table＞ <br />【1】设定边框的厚度 -- border<br />＜table border=点数＞ <br />【2】设定格线的宽度 -- cellspacing<br />＜table cellspacing=点数＞ <br />【3】设定资料与格线的距离 -- cellpadding<br />＜table cellpadding=点数＞ <br />【4】调整表格宽度 -- width<br />＜table width=点数或百分比＞ <br />【5】调整表格高度 -- height<br />＜table height=点数或百分比＞ <br />【6】设定表格背景色彩 -- bgcolor<br />＜table bgcolor=#rrggbb＞ <br />【7】设定表格边框色彩 -- bordercolor<br />＜table bordercolor=#rrggbb＞<br />2.显示格线 ＜table border＞<br />3.表格标题<br />＜caption＞..........＜/caption＞ <br />表格标题位置 -- align<br />＜caption align="#"＞ #号可为 top：表标题置于表格上方（预设值）<br />bottom：表标题置于表格下方<br />4.定义列 ＜tr＞<br />5.定义栏位 《1》＜td＞：靠左对齐<br />《2》＜th＞：靠中对齐?粗体 <br />【1】水平位置 -- align ＜th align="#"＞<br />#号可为 left：向左对齐<br />center：向中对齐 right：向右对齐<br />【2】垂直位置 -- align ＜th align="#"＞ #号可为<br />top：向上对齐 middle：向中对齐<br />bottom：向下对齐 <br />【3】栏位宽度 -- width<br />＜th width=点数或百分比＞ <br />【4】栏位垂直合并 -- rowspan<br />＜th rowspan=欲合并栏位数＞ <br />【5】栏位横向合并 -- colspan<br />＜th colspan=欲合并栏位数＞</p><p><strong>清单</strong></p><p>一、目录式清单 <br />＜dir＞ ＜li＞项目1 ＜li＞项目2 ＜li＞项目3 ＜/dir＞ P.S.目录式清单每一个项目不能超过20个字元（即10个中文字）<br />二、选项式清单 ＜menu＞ ＜li＞项目1 ＜li＞项目2 ＜li＞项目3 ＜/menu＞<br />三、有序号的清单 ＜ol＞ ＜li＞项目1 ＜li＞项目2 ＜li＞项目3 ＜/ol＞ <br />【1】序号形式 -- type ＜ol type=#＞或＜li type=#＞ #号可为 A：表以大写英文字母A?B?C?D...做为项目编号 a：表以小写英文字母a?b?c?d...做为项目编号 I：表以大写罗马数字做为项目编号 i：表以小写罗马数字做为项目编号 1：表以阿拉伯数字做为项目编号（预设值） <br />【2】起始数字 -- start ＜ol start=欲开始计数的序数＞ <br />【3】指定编号 -- value ＜li value=欲指定的序数＞<br />四、无序号的清单 ＜ul＞ ＜li＞项目1 ＜li＞项目2 ＜li＞项目3 ＜/ul＞ <br />【1】项目符号形式 -- type ＜ul type=#＞或＜li type=#＞ #号可为 disc：实心圆点（预设值） circle：空心圆点 square：实心方块 <br />【2】原始清单 -- plain ＜ul plain＞ <br />【3】清单排列方式 -- warp 《1》清单垂直排列 ＜ul warp = vert＞ 《2》清单水平排列 ＜ul warp = horiz＞<br />五、定义式清单 ＜dl＞ ＜dt＞项目1 ＜dd＞项目1说明 ＜dt＞项目2 ＜dd＞项目2说明 ＜dt＞项目3 ＜dd＞项目3说明 ＜/dl＞ <br />紧密排列 -- compact ＜dl compact＞ P.S.如此可使＜dt＞的内容与＜dd＞的内容在同一行，仅 以数格空白相隔而不换行，但若＜dt＞的文字超过一 定的长度后，compact的作用就消失了！</p><p><strong>表单</strong></p><p>一、基本架构 ＜form action="处理资料用的CGI程式之URL"或"mailto:电子信箱的URL" method="get或post"＞ .......... .......... .......... ＜/form＞ <br />二、输入文件型表单 ＜form action="URL" method="post"＞ ＜input＞ ＜input＞ .......... .......... ＜/form＞ <br />【1】栏位类型 -- type ＜input type=#＞ #号可为 text：文字输入 password：密码 checkbox：多选钮 radio：单选钮 submit：接受按钮 reset：重设按钮 image：图形钮 hidden：隐藏栏位 <br />【2】栏位名称 -- name ＜input name="资料栏名"＞ P.S.若type为submit?reset则name不必设定 <br />【3】文件上的预设值 -- value ＜input value="预设之字串"＞ <br />【4】设定栏位的宽度 -- size ＜input size=字元数＞ <br />【5】限制最大输入字串的长度 -- maxlength ＜input maxlength=字元数＞ <br />【6】预设checkbox或radio的初值 -- checked ＜input type=checkbox checked＞ ＜input type=radio checked＞ <br />【7】指定图形的URL -- src ＜input type=image src="图档名"＞ <br />【8】图文对齐 -- align ＜input type=image align="#"＞ #号可为 top：文字对齐图片之顶端 middle：文字对齐图片之中间 buttom：文字对齐图片之底部<br />三、选择式表单 ＜form action="URL" method="post"＞ ＜select＞ ＜option＞ ＜option＞ .......... .......... ＜/select＞ ＜/form＞ <br />A、＜select＞的属性 <br />【1】栏位名称 -- name ＜select name="资料栏位名"＞ <br />【2】设定显示的选项数 -- size ＜select size=个数＞ <br />【3】多重选项 -- multiple ＜select multiple＞ <br />B、＜option＞的属性 <br />【1】定义选项的传回值 -- value ＜option value="传回值"＞ <br />【2】预先选取的选项 -- selected ＜option selected＞<br />四、多列输入文字区表单 ＜form action="URL" method="post"＞ ＜textarea＞ .......... .......... ＜/textarea＞ ＜/form＞ <br />【1】文字区的变数名称 -- name ＜textarea name=变数名称＞ <br />【2】设定文字输入区宽度 -- cols ＜textarea cols=字元数＞ <br />【3】设定文字输入区高度 -- rows ＜textarea rows=列数＞ <br />【4】输入区设定预设字串 ＜textarea＞ 预设文字 ＜/textarea＞ <br />【5】自动换行与否 -- wrap ＜textarea wrap=#＞ #号可为 off：表输入的文字超过栏宽时，不会自动换行（预设值） virtual：表输入的文字在超过栏宽时会自动换行</p><p><strong>链接</strong></p><p>一、连结至其他文件 ＜a href="URL"＞说明文字或图片＜/a＞</p><p>二、连结至文件内之某一处（外部连结） </p><p>《1》起点<br />＜a href="档名#名称"＞..........＜/a＞ <br />《2》终点 ＜a name="名称"＞</p><p>三、frame的超连结 </p><p>【1】开启新的浏览器来显示连结文件 -- _blank ＜a href="URL" target=_blank＞<br />【2】显示连结文件於目前的frame -- _self ＜a href="URL" target=_self＞<br />【3】以上一层的分割视窗显示连结文件 -- _parent ＜a href="URL" target=_parent＞<br />【4】以全视窗显示连结文件 -- _top ＜a href="URL" target=_top＞ <br />【5】以特定视窗显示连结文件 --＜a href="URL" target="特定视窗名称"＞</p><p><strong>FRAME</strong></p><p>一、分割视窗指令 ＜frameset＞..........＜/frameset＞ <br />【1】垂直（上下）分割 -- rows<br />＜frameset rows=#＞ #号可为点数：如欲分割为100,200,300三个视窗，则<br />＜frameset rows=100,200,300＞；亦可以*号代表，如＜frameset rows=*,500,*＞<br />百分比：如＜frameset rows=30%,70%＞，各 项总和最好为100%<br />【2】水平（左右）分割 -- cols ＜frameset cols=点数或百分比＞<br />二?指定视窗内容 -- ＜frame＞<br />＜frameset cols=30%,70%＞ ＜frame＞ ＜frame＞ ＜/frameset＞<br />【1】指定视窗的文件名称 -- src ＜frame src=HTML档名＞ <br />【2】定义视窗的名称 -- name<br />＜frame name=视窗名称＞ <br />【3】设定文件与上下边框的距离 -- marginheight<br />＜frame marginheight=点数＞ <br />【4】设定文件与左右边框的距离 -- marginwidth<br />＜frame marginwidth=点数＞ <br />【5】设定分割视窗卷轴 -- scrolling<br />＜frame scrolling=#＞ #号可为 yes：固定出现卷轴<br />no：不出现卷轴 auto：自动判断文件大小需不需要卷轴（预设值）<br />【6】锁住分割视窗的大小 -- noresize ＜frame noresize＞</p>\r\n <p align="center"> </p>', '', '', ''),
(5, 2, '<p>说实话，无论是asp,php还是jsp进行网络编程的时候，都离不开和用户的交互。</p><p>而人机对话的平台，基本上是靠相应的文本、列表框进行输入，然后通过按钮提交送至数据库的。</p><p>所以学习网络编程就一定要了解这些输入平台相关的东西：表单（form）其基本格式如下：</p><p class="code"><form name="form1" action="xxx.asp" method="post"><br /><input type="text" name="yourname"><br /><select name="selectwhat"><br /> <option>aaa</option><br /> <option>aaa</option><br /></select><br /><textarea name="textinit" rows=5 cols=10></textarea><br /></form></p><p>可以总结出：表单即包括<form>...</form>之内的相关内容。</p><p>其中内部可以分三大类：input，select，textarea</p><p><strong>一，首先看<form>内部参数</strong></p><p>参数name：用来表示该表单的唯一名称，方便一个页面建立多个表单而不混淆，当然更是为了接受页面的确认关系。</p><p>参数action：显而易见，是表示当前的表单中所有内容将送交某个页面去处理。处理包括接受信息，数据库比较，添加，修改等。</p><p>参数method：即表单的提交方法，含两种方法：post和get。post是传输信息内容，get是传输url值，具体用法将会在下一节“内置对象request”中介绍到</p><p><strong>二，再来看Input相关</strong></p><p>Input表示Form表单中的一种输入对象，其又随Type类型的不同而分文本输入框，密码输入框，单选/复选框，提交/重置按钮等，下面一一介绍。</p><p>1，type=text</p><p>输入类型是text，这是我们见的最多也是使用最多的，比如登陆输入用户名，注册输入电话号码，电子邮件，家庭住址等等。当然这也是Input的默认类型。</p><p>参数name：同样是表示的该文本输入框名称。</p><p>参数size：输入框的长度大小。</p><p>参数maxlength：输入框中允许输入字符的最大数。</p><p>参数value：输入框中的默认值</p><p>特殊参数readonly：表示该框中只能显示，不能添加修改。</p><p class="code"><form><br />your name:<br /><input type="text" name="yourname" size="30" maxlength="20" value="输入框的长度为30，允许最大字符数为20"><br><br /><input type="text" name="yourname" size="30" maxlength="20" readonly value="你只能读不能修改"><br /></form></p><p>2，type=password</p><p>不用我说，一看就明白的密码输入框，最大的区别就是当在此输入框输入信息时显示为保密字符。</p><p>参数和“type=text”相类似。</p><p class="code"><form><br />your password:<br /><input type="password" name="yourpwd" size="20" maxlength="15" value="123456">密码长度小于15<br /></form></p><p>3，type=file</p><p>当你在BBS上传图片，在EMAIL中上传附件时一定少不了的东西：）</p><p>提供了一个文件目录输入的平台，参数有name，size。</p><p class="code"><form><br />your file:<br /><input type="file" name="yourfile" size="30"><br /></form></p><p>4，type=hidden</p><p>非常值得注意的一个，通常称为隐藏域：如果一个非常重要的信息需要被提交到下一页，但又不能或者无法明示的时候。</p><p>一句话，你在页面中是看不到hidden在哪里。最有用的是hidden的值。</p><p class="code"><form name="form1"><br />your hidden info here:<br /><input type="hidden" name="yourhiddeninfo" value="webjx.com"><br /></form><br /><script><br />alert("隐藏域的值是 "+document.form1.yourhiddeninfo.value)<br /></script></p><p>5，type=button</p><p>标准的一windows风格的按钮，当然要让按钮跳转到某个页面上还需要加入写JavaScript代码</p><p class="code"><form name="form1"><br />your button:<br /><input type="button" name="yourhiddeninfo" value="Go，Go，Go！" onclick="window.open(''http://www.webjx.com'')"><br /></form></p><p>6，type=checkbox</p><p>多选框，常见于注册时选择爱好、性格、等信息。参数有name,value及特别参数checked（表示默认选择）</p><p>其实最重要的还是value值，提交到处理页的也就是value。（附：name值可以不一样，但不推荐。）</p><p class="code"><form name="form1"><br />a:<input type="checkbox" name="checkit" value="a" checked><br><br />b:<input type="checkbox" name="checkit" value="b"><br><br />c:<input type="checkbox" name="checkit" value="c"><br><br /></form><br />name值可以不一样，但不推荐<br><br /><form name="form1"><br />a:<input type="checkbox" name="checkit1" value="a" checked><br><br />b:<input type="checkbox" name="checkit2" value="b"><br><br />c:<input type="checkbox" name="checkit3" value="c"><br><br /></form></p><p>7，type=radio</p><p>即单选框，出现在多选一的页面设定中。参数同样有name,value及特别参数checked.</p><p>不同于checkbox的是，name值一定要相同，否则就不能多选一。当然提交到处理页的也还是value值。</p><p class="code"><form name="form1"><br />a:<input type="radio" name="checkit" value="a" checked><br><br />b:<input type="radio" name="checkit" value="b"><br><br />c:<input type="radio" name="checkit" value="c"><br><br /></form><br />下面是name值不同的一个例子，就不能实现多选一的效果了<br><br /><form name="form1"><br />a:<input type="radio" name="checkit1" value="a" checked><br><br />b:<input type="radio" name="checkit2" value="b"><br><br />c:<input type="radio" name="checkit3" value="c"><br><br /></form></p><p>8，type=image</p><p>比较另类的一个，自己看看效果吧，可以作为提交式图片</p><p class="code"><form name="form1" action="xxx.asp"><br />your Imgsubmit:<br /><input type="image" src="../blog/images/face4.gif"><br /></form></p><p>9，type=submit and type=reset</p><p>分别是“提交”和“重置”两按钮</p><p>submit主要功能是将Form中所有内容进行提交action页处理，reset则起个快速清空所有填写内容的功能。</p><p class="code"><form name="form1" action="xxx.asp"><br /><input type="text" name="yourname"><br /><input type="submit" value="提交"><br /><input type="reset" value="重置"><br /></form></p><p>Input的Type总结下来有10个，还是不少的，呵呵</p><p><strong>三，接着再来看Select相关</strong></p><p>Select主要要来做下拉菜单，跳转菜单，（下拉）列表。</p><p>其本身有内嵌代码<option>...</option>，option参数value值为传递被处理的值，option还有参数selected，表示默认被选中的。</p><p>1，下拉菜单</p><p>只是菜单式显示。</p><p class="code"><form name="form1"><br /><select name="selectwhat"><br /> <option value="a">aaa</option><br /> <option value="b">bbb</option><br /> <option value="c" selected>ccc</option><br /></select><br /></form><br /><script><br />alert("菜单的默认选取值是 "+document.form1.selectwhat.value)<br /></script></p><p>2，跳转菜单</p><p>在下拉菜单基础上添加JavaScript成为跳转菜单。</p><p class="code"><select onChange="if(this.selectedIndex && this.selectedIndex!=0){window.open(this.value);}this.selectedIndex=0;"><br /><option selected>网站连接……</option><br /><option value="http://www.webjx.com/">Webjx.Com</option><br /><option value="http://www.sina.com.cn/">Sina.com.cn</option><br /><option value="http://www.163.com/">163.com</option><br /></seclect></p><p>3，下拉列表</p><p>和下拉菜单最大的区别就是select多了一个size值，该值并非长度大小，而是列表的上下高度。</p><p>当然还有更主要的是：菜单只能选一个，而列表可以选多个，该特殊参数为multiple size=1简直就是一个下拉菜单</p><p class="code"><form name="form1"><br /><select name="selectwhat" size=1><br /> <option value="a">aaa</option><br /> <option value="b">bbb</option><br /> <option value="c">ccc</option><br /></select><br /></form><br><br />size>1你会发现了大不同<br /><form name="form1"><br /><select name="selectwhat" size=3><br /> <option value="a">aaa</option><br /> <option value="b">bbb</option><br /> <option value="c">ccc</option><br /></select><br /></form><br><br />加入了multiple发现可以多个选择了，包括Shift进行快速全选及Ctrl进行点选<br /><form name="form1"><br /><select name="selectwhat" size=3 multiple><br /> <option value="a">aaa</option><br /> <option value="b">bbb</option><br /> <option value="c">ccc</option><br /></select><br /></form><br></p><p><strong>四，最后关注的Textarea</strong></p><p>可以将Textarea文本区域理解为扩大化了的文本输入框。</p><p>其参数没有value，默认值设定在<textarea>...</textarea>之间。</p><p>其它参数还有rows,表示文本区域的行数；参数cols，表示文本区域的列数。</p><p>还有参数warp，当warp=off表示该文本区域中的不自动换行，当然不写默认是自动换行的。</p><p class="code"><form name="form1"><br /><textarea name="textinit" rows="5" cols="20" wrap="off">5行20列，不自动换行</textarea><br /></form></p>\r\n <p align="center"> </p>', '', '', ''),
(6, 2, ' 我们经常会在一个技术性网站或BBS见到这三个东东：XHTML DHTML SHTML，它们到底是怎么回事呢？我们看下面的说明与讲解。<p><strong>XHTML：</strong> </p><p> HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言，看起来与HTML有些相象，只有一些小的但重要的区别，XHTML就是一个扮演着类似HTML的角色的XML，所以，本质上说，XHTML是一个过渡技术，结合了XML（有几分）的强大功能及HTML（大多数）的简单特性。 </p><p> 2000年底，国际W3C(World Wide Web Consortium)组织公布发行了XHTML 1.0版本。XHTML 1.0是一种在HTML 4.0基础上优化和改进的的新语言，目的是基于XML应用。XHTML是一种增强了的HTML,它的可扩展性和灵活性将适应未来网络应用更多的需求。下面是W3C的HTML工作组主席Steven Pemberton回答的关于XHTML的常见基础问题。 </p><p> （1）XHTML解决HTML语言所存在的严重制约其发展的问题。HTML发展到今天存在三个主要缺点：不能适应现在越多的网络设备和应用的需要，比如手机、PDA、信息家电都不能直接显示HTML；由于HTML代码不规范、臃肿，浏览器需要足够智能和庞大才能够正确显示HTML；数据与表现混杂，这样你的页面要改变显示，就必须重新制作HTML。因此HTML需要发展才能解决这个问题，于是W3C又制定了XHTML，XHTML是HTML向XML过度的一个桥梁。 </p><p> （2）XML是web发展的趋势，所以人们急切的希望加入XML的潮流中。XHTML是当前替代HTML4标记语言的标准，使用XHTML 1.0，只要你小心遵守一些简单规则，就可以设计出既适合XML系统，又适合当前大部分HTML浏览器的页面。这个意思就是说，你可以立刻设计使用XML，而不需要等到人们都使用支持XML的浏览器。这个指导方针可以使web平滑的过渡到XML。 </p><p> （3）使用XHTML的另一个优势是：它非常严密。当前网络上的HTML的糟糕情况让人震惊，早期的浏览器接受私有的HTML标签，所以人们在页面设计完毕后必须使用各种浏览器来检测页面，看是否兼容，往往会有许多莫名其妙的差异，人们不得不修改设计以便适应不同的浏览器。<br /> <br /> （4）XHTML是能与其它基于XML的标记语言、应用程序及协议进行良好的交互工作。<br /> <br /> （5）XHTML是Web标准家族的一部分，能很好在无线设备等其它用户代理上。 </p><p> （6）在网站设计方面，XHTML可助你去掉表现层代码的恶习，帮助你养成标记校验来测试页面工作的习惯。 </p><p><strong>DHTML：</strong> </p><p> DHTML只是一种制作网页的概念，实际上没有一个组织或机构推出过所谓的DHTML标准或技术规范之类的。DHTML不是一种技术、标准或规范，DHTML只是一种将目前已有的网页技术、语言标准整和运用，制作出能在下载后仍然能实时变换页面元素效果的网页的设计概念。 </p><p> DHTML大致包含以下网页技术、标准或规范： </p><p> HTML 4.0 没什么好说的，网页的基础语言标准。 </p><p> CSSL 注意！不是CSS，是CSSL，它是Clent-Side Scripting Language的缩写，译作“客户端脚本语言”，主要有JavaScript(JS)，VBScript(VBS)，JScript。Netscape主要支持JS，IE主要支持JS，VBS和JScript。 </p><p> DOM Document Object Model的缩写，译作“文档对象模型”，是W3C日前极力推广的web技术标准之一，它将网页中的内容抽象成对象，每个对象拥有各自的属性(Properties)、方法(Method)和事件(Events)，这些都可以通过上面讲到的CSSL来进行控制。IE和NS的对象模型都是以W3C的公布的DOM为基准，加上自己的Extended Object(扩展对象)来生成的。 </p><p> CSS 这才是Cascading Style Sheets(层叠样式表单)的缩写，也是本站52CSS.com的主题，它是HTML的辅助设计规范，用来弥补HTML在排版上的所受的限制导致的不足，它是DOM的一部分。理论上说通过CSSL动态地改变CSS属性可以做出任何你想要的页面视觉效果。 </p><p> 所以，简单地说，要实现DHTML，就是以HTML为基础，运用DOM将页面元素对象化，利用CSSL控制这些对象的CSS属性以达到网页的动态视觉效果。 </p><p><strong>SHTML：</strong> </p><p> 问起SHTML和HTML的区别,如果用一句话来解释就是：SHTML不是HTML而是一种服务器 API，shtml是服务器动态产成的html。 </p><p> 虽然两者都是超文本格式,但shtml是一种用于SSI技术的文件。 也就是Server Side Include--SSI 服务器端包含指令。 如果Web Server有SSI功能的话(大多数（尤其是基于Unix平台）的WEB服务器如Netscape Enterprise Server等均支持SSI命令)。 会对shtml文件特殊招待。 先扫一次shtml文件看没有特殊的SSI指令现在。 有就按Web Server设定规则解释SSI指令。 解释完后跟一般html一起掉去客户端。 </p><p> SHTML使用SSI(Server Side Include)的html文件扩展名，SSI（Server Side Include)，通常称为"服务器端嵌入"或者叫"服务器端包含"，是一种类似于ASP的基于服务器的技术。 </p><p> SSI工作原理： </p><p> 将内容发送到浏览器之前，可以使用“服务器端包含 (SSI)”指令将文本、图形或应用程序信息包含到网页中。例如，可以使用 SSI 包含时间/日期戳、版权声明或供客户填写并返回的表单。对于在多个文件中重复出现的文本或图形，使用包含文件是一种简便的方法。将内容存入一个包含文件中即可，而不必将内容输入所有文件。通过一个非常简单的语句即可调用包含文件，此语句指示 Web 服务器将内容插入适当网页。而且，使用包含文件时，对内容的所有更改只需在一个地方就能完成。 </p><p> 因为包含 SSI 指令的文件要求特殊处理，所以必须为所有 SSI 文件赋予 SSI 文件扩展名。默认扩展名是 .stm、.shtm 和 .shtml</p><p> Web 服务器在处理网页的同时处理 SSI 指令。当 Web 服务器遇到 SSI 指令时，直接将包含文件的内容插入 HTML 网页。如果“包含文件”中包含 SSI 指令，则同时插入此文件。除了用于包含文件的基本指令之外，还可以使用 SSI 指令插入文件的相关信息（如文件的大小）或者运行应用程序或 shell 命令。 </p><p> 网站维护常常碰到的一个问题是，网站的结构已经固定，却为了更新一点内容而不得不重做一大批网页。SSI提供了一种简单、有效的方法来解决这一问题，它将一个网站的基本结构放在几个简单的HTML文件中（模板），以后我们要做的只是将文本传到服务器，让程序按照模板自动生成网页，从而使管理大型网站变得容易。 </p><p> 所以,利用SHTML格式的页面目的和 ASP 差不多，但是因为是 API 所以运转速度更快，效率更高,比ASP快，比HTML慢，但由于可以使用服务器端包含，因此使页面更新容易（特别是批量更新banner，版权等）,想象一下吧,你有一段 HTML,要在中间穿插一些特殊的服务端脚本,比如插入其他 HTML 段落,你选择 ASP 来完成这个任务,但是如果任务更繁重，需要更多的时间，比如5s，这个时候你不用 ASP 而用 SHTML,或许处理时间就只用4s了. </p>\r\n <p align="center"> </p>', '', '', '');
INSERT INTO `#@__addonarticle` (`aid`, `typeid`, `body`, `redirecturl`, `templet`, `userip`) VALUES
(7, 2, '<strong>前言：</strong> <p> 现在都讲究标准建站，而标准建站使用的技术主要是XHTML+CSS，而现在我们普遍使用的是HTML代码，那么我该如何转换呢？以及HTML和XHTML有什么不同呢？在这个教程里，你将学到HTML和XHTML之间的不同，以及如何将HTML转换为XHTML。毕竟XHTML是发展的方向，所以我觉得该教程有必要在本站上发布。我感觉要是你想使用标准还是最好先学HTML，因为比较简单，然后再来看该教程。 </p><p> <strong>XHTML介绍：</strong> </p><p> XHTML是 EXtensible HyperText Markup Language(可扩展超文本标记语言) 的英文缩写，而HTML则是 HyperText Markup Language(超文本标记语言) ，这是名字的不同。其实我们说得标准应该是XML，那为什么要学习XHTML呢？因为现在的HTML代码烦琐，危机四伏，但是XML使用环境还不成熟，所以推出了一个过度的产品就是XHTML，它起着呈上起下的作用。也有人认为XHTML是HTML的一个升级版本，其实也是正确的，我的理解是XHTML把HTML做得更加规范的一个标记语言，使HTML变得功能强大，减少了代码的烦琐尤其是表格。 </p><p> XHTML是在2000年1月26日被国际标准组织机构W3C(World Wide web Consortium)定为一个标准的，认为是HTML的一个最新版本，并且将逐渐替换HTML。现在所有的浏览器都支持XHTML，XHTML兼容 HTML 4.0。也有人认为XHTML就是HTML4.01。如果你在学习过程中自己编写了一个符合标准的站，你可以通过W3C的验证，验证通过后你将会得到一个标志，通常是XHTML1.0认证和CSS验证。我也不清楚目前国内有多少个网站同时通过了这两个验证。大家可以去这个站点去验证你的站，如果符合那两个规则则会分别给我们两段代码加到你的网页上向别人展示说明你采用了标准建站啊，牛啊！</p><p> 为什么我们使用XHTML </p><p> XHTML是HTML升级为XML的过度产品，被定为一个标准，XHTML完全兼容HTML4.01，并且具有XML的语法。下面我们来看一个含有错误代码的HTML，如下： </p><p> <html> <br /> <head> <br /> <title>This is bad HTML</title> <br /> <body> <br /> <h1>Bad HTML <br /> </body> </p><p> 虽然含有错误代码，但是当我们在浏览器中浏览时还能正常显示。XML是一个标记语言，但是它要求在网页中出现的任何元素都应该被标记出来，XML是用来描述网页中的数据的，而HTML用来显示网页中的元素的。目前我们上网使用的各种浏览器技术，包括手提电脑、手机上网浏览等等，都要求浏览的一些内容都要被正确标记，如果有错误的标记可能会使显示特别混乱、甚至不能正常显示。 </p><p> 因此联合 HTML 和XML , 还有其他的一些技术，我们得到了一种现在有用的而且在将来也有用的语言 - XHTML。 </p><p> 当在将来都规范的时候我们就要用的 XHTML 正确格式的标记了,使所有的浏览器都能正确的执行，所以我们现在有必要开始学习XHTML了。 </p><p> <strong>XHTML和HTML之间的区别：</strong> </p><p> XHTML是一项新技术，在浏览器和一些其他的软件都支持它之前，我们应该有必要熟悉一下这项技术。为了我们更好的学习XHTML之前我们应该熟悉一下HTML4.0，我们可以去下载一个参考手册来熟悉一下。以便于我们学起XHTML来更简单，换句话说我们现在使用HTML编写代码时应该尽力少写错误代码，如：都要使用小写的字符来编写HTML，每个标记之后都要加上标记的结束如：<p>网页教学网欢迎您的光临</p> 结束一定要有，我们要保持这种规则。 </p><p> <strong>它们之间最大的区别在于：</strong> </p><p> 1.XHTML 元素一定要被正确的嵌套使用。 </p><p> 在HTML里一些元素可以不正确嵌套也能正常显示，如： </p><p> <b><i>This text is bold and italic</b></i> </p><p> 而在XHTML必须要正确嵌套之后才能正常使用，如： </p><p> <b><i>This text is bold and italic</i></b> </p><p> 注意：这个错误通常发生在当嵌套多层之后的标签里面。如： </p><p> <ul> <br /> <li>Coffee</li> <br /> <li>Tea <br /> <ul> <br /> <li>Black tea</li> <br /> <li>Green tea</li> <br /> </ul> <br /> <li>Milk</li> <br /> </ul> </p><p> 正确的应该是： </p><p> <ul> <br /> <li>Coffee</li> <br /> <li>Tea <br /> <ul> <br /> <li>Black tea</li> <br /> <li>Green tea</li> <br /> </ul> <br /> </li> <br /> <li>Milk</li> <br /> </ul> </p><p> 观察上述的两段代码我们可以看到正确的里面我们在 </ul>之后插入 </li> 标签。 </p><p> \r\n <p align="center"> </p>', '', '', ''),
(8, 2, '鉴于HTML初级教程的目的只是教授HTML的骨架元素，这个中级教程增加一些骨肉，它们不应该特别的难，但可以进一步增进我们对HTML的理解，使我们能多做一些更有用的事情。<br /><br />HTML只是赋予内容的手段，大部分HTML标签都有其意义（标签p创建段落，h1标签创建标题等等）的，然而span和div标签似乎没有任何内容上的意义，听起来就像一个泡沫做成的锤子一样无用。但实际上，与CSS结合起来后，它们被用得十分广泛。<br /><br />它们被用来组合一大块的HTML代码并赋予一定的信息，大部分用类属性class和标识属性id与元素联系起来，见CSS中级指南的类和id选择符。<br /><br />span和div的不同之处在于span是内联的，用在一小块的内联HTML中，而div（想想division是什么意思）元素是块级的（简单地说，它等同于其前后有断行），用于组合一大块的代码。<br /><br /><div id="scissors"><br /><p>This is <span class="paper">crazy</span></p><br /></div> <br />在实践中，div，特别是span不应该滥用，尽管有其他相左的意见。比如，你要强调单词“crazy”和加粗类“paper”，可能会用这样的代码：<br /><br /><div id="scissors"><br /><p>This is <strong class="paper">crazy</strong></p><br /></div> <br />这是做法比再加一个span比较好。<br /><br />对于类class和标识id没有线索？别担心，在CSS中级指南中会接触到它们。你所需要记住的是，span和div 是“无意义”的标签。但有新的说法说他们是有语义的。我们这里不再深入了。\r\n <p align="center"> </p>', '', '', ''),
(9, 2, '<strong>tabbing浏览<br /><br /></strong>不或不能使用指点设备的用户可以用快捷键tab键来打开连接，并且本身也要有逻辑tab顺序。尽管HTML是线性的，tabindex属性允许你定义它快捷键们的顺序，而且这些逻辑tab应该可以自动落入自己位置。<br /><br /><strong>快捷键</strong><br /><br />快捷键可以通过键盘的特定按键进行更方便的导航（当按住Alt键或者Ctrl键时获得焦点）。对于那些没有指点设备的用户，比起使用tab键操作连接更快捷，更方便。<br /><br />没有必要为每一个连接都设置快捷键，但为主要导航连接都设置是一个不错的主意。<br /><br /><p class="code"><a href="somepage.html" accesskey="s">Some page</a></p> <br /><strong>注意</strong><br /><br /><p class="code">快捷键的麻烦是，用户常常没有办法知道它们在哪里和到底是什么键（除非查看源代码）。虽然JAWS──一个可以大声读出快捷键的屏幕阅读器，但要掘尽其能，你还是得让快捷键更直白。<br />你可以使用像“跳过导航”的连接技术（下详），或者选择一个独立的页面来说明你网站的这些易用性相关功能，包括快捷键。一个越来越流行的办法是在一个与快捷键相一致的字母上加下划线，类似于Windows程序菜单中的方法。</p><br /><strong>连接的标题</strong><br /><br />为连接添加标题属性title是一个好主意，这会给用户所指向连接的予说明，所以能改进导航。<br /><br />假如这个连接是执行Javascript的，这也有利于为没有使用Javascript功能的用户解释什么将会（或不会）发生。<br /><br /><p class="code"><a href="#" onclick="opennastypopup()" onkeypress="opennastypopup()"<br />title="Open a nasty Javascript pop-up window">Monster</a></p><br /><strong>弹出窗口</strong><br /><br />说到Javascript弹出窗口，你要坚持使用的话，或者很多人（你的用户）告诉你要使用，你可以用onkeypress和onclick来使得页面更易用。并且，在功能上定义了返回false的弹出窗口，包含一个带有href属性指向普通页面的连接，对于一个没有使用Javascript功能的用户来说，可以以普通方式载入这个页面。<br /><br />比如：<br /><br /><p class="code"><script type="text/javascript"><br />function opennastypopup()<br />{ <br />window.open("monster.html", "", "toolbar=no,height=100,width=200"); <br />return false; <br />} <br /></script><br /> ... <br /><a href="monster.html" onclick="return opennastypopup()" onkeypress="return opennastypopup()">Monster</a></p> <br /><strong>相邻的连接</strong><br /><br />相邻的连接应该至少用空格隔开，以便为屏幕阅读器清晰辩明。<br />这也可以用字符来完成，连接之间的（比如竖线 |── 连接 | 连接），或者包围连接的（如中括号 [] ── [连接] [连接]）。把连接放在列表里面也是一个好主意。然后可以用CSS来样式化显示，甚至可以是并行的列表（用 display: in-line）。<br /><br /><strong>跳过导航</strong><br /><br />你应该让使用屏幕阅读器的用户一个跳过导航直接到内容的机会。这是因为，假设你的连接是固定的（应该是），用户不必经受每一页同样的信息，尤其是大量的。你可以设置一个连接，跳过导航直接跳到内容的连接。<br /><br />看起来像是这样的：<br /><br /><p class="code"><p id="header"><br /> <h1>The Heading</h1><br /> <a href="#content" accesskey="n">Skip navigation</a><br /></p><br /><p id="navigation"><br /><!--loads of navigation stuff --><br /></p><br /><p id="content"><br /><!--lovely content --><br /></p></p> <br />显然，你没有必要在可视化浏览器中显示它，所有你可以用CSS开隐藏它。<br /><br />注意<br /><br /><p class="code">这是虽然只是一个CSS的小技巧，但是“跳过导航”的特效药。这涉及到隐藏连接的方法。<br />最常见的办法可能是使用display: none，但有些浏览器看到但不理解这个连接，“跳过导航”的连接必须显示。<br />然而没有必要显示──没有理由显示给醒目的用户。所以坚持使用包含display: none的样式，还不如把元素宽和高设置为零（width: 0; height: 0; overflow: hidden;），这有相同的视觉效果，但可以使屏幕阅读器理解。</p>\r\n <p align="center"> </p>', '', '', ''),
(10, 2, '<table class="t" cellspacing="0" cellpadding="8" width="100%" border="0"><tbody><tr><td width="220"><table cellspacing="0" cellpadding="0" rules="cols" width="200" border="1"><tbody><tr align="center"><td>第</td><td>一</td><td>行</td></tr><tr align="center"><td>第</td><td>二</td><td>行</td></tr><tr align="center"><td>第</td><td>三</td><td>行</td></tr></tbody></table></td><td width="380">这个表格去掉了单元格之间的纵向分隔线</td></tr><tr><td><br /><table cellspacing="0" cellpadding="0" rules="rows" width="200" border="1"><tbody><tr align="center"><td>第</td><td>第</td><td>第</td></tr><tr align="center"><td>一</td><td>二</td><td>三</td></tr><tr align="center"><td>列</td><td>列</td><td>列</td></tr></tbody></table><br /></td><td>这个表格去掉了单元格之间的横向分隔线</td></tr><tr><td><table cellspacing="0" cellpadding="0" rules="none" width="200" border="1"><tbody><tr align="center"><td>横</td><td> </td><td>线</td></tr><tr align="center"><td>竖</td><td> </td><td>线</td></tr><tr align="center"><td>都</td><td>没</td><td>了</td></tr></tbody></table></td><td>这个表格去掉了单元格之间的纵向分隔线和横向分隔线</td></tr><tr><td colspan="2"><hr color="#000000" size="1" />其实上面的三个表格都有三行三列，隐藏分隔线的诀窍在于rules，察看这三个表格的源代码，我们可以看到<TABLE>标签中都有rules。 它有三个参数(cols,rows,none)，当rules=cols时，表格会隐藏纵向的分隔线，这样我们就只能看到表格的行；当rules=rows时，则 隐藏了横向的分隔线，这样我们只能看到表格的列；而当rules=none时，纵向分隔线和横向分隔线将全部隐藏。</td></tr></tbody></table>\r\n <p align="center"> </p>', '', '', ''),
(11, 2, '<p> 超级链接<a>标记代表一个链接点，是英文anchor（锚点）的简写。它的作用是把当前位置的文本或图片连接到其他的页面、文本或图像，这已是众所周知了，但关于它的语法结构可能有点鲜为人知，而要用活它则必须了解其语法结构。<a>标记的基本语法结构是： </p><p class="code"><a<br />class=type<br />id＝value<br />href＝reference<br />name＝value<br />rel=same|next|parent|previous<br />rev＝value<br />target＝window<br />style＝value<br />title=title<br />onclick＝function<br />onmouseout＝function<br />onMouseOver=function>连接</a><span class="web"></span></p><p> 从标记的语法结构可以看出，在设定一个超级链接时有很多参数可供选择，以实现不同的链接效果，这有点出乎意料吧？！<span class="web"></span></p><p> 其中class和id选项：用于设定链接点所属的类型和分配的ID号，通常不加以设定。最常用的两个参数是href和name。其中href是 hypertext reference的缩略词，用于设定链接地址。链接地址必须为url地址，如果没有给出具体路径，则默认路径和当前页的路径相同。链接到的文件也分为几种情况：如果为HTML文件，则在当前浏览器中直接打开；如果为可执行文件（.exe文件），则直接执行或下载，我们提供下载的文件就是用它的这种特性做的；如果为文本文件如word格式的文件，则在浏览器中打开此文件，并可以进行编辑加工。<span class="web"></span></p><p> rel：表示设定链接的关系：rel=same表示待链接的文件与此文件相同，rel=next表示待链接的文件为下一页，rel＝parent表示本文件为待链接文件的父文件，rel=previous则表示待链接的文件为上一页。<span class="web"></span></p><p> rev：则用于设定反向链接。</p><p> target：是在采用帧窗口的情况下设定链接到哪一个窗口，还有target="_bank"是表示新开一窗口打开网页。<span class="web"></span></p><p> title：用于设定链接点被选到时显示的标题。</p><p> onclick：对应于一个事件，当链接点被点击后将触发这个事件，执行对应的子程序。</p><p> onmouseover：与onclick类似，对应的事件在鼠标移到链接点上时被触发。<span class="web"></span><span class="web"></span></p><p> onmouseout：对应的事件在鼠标移出镇接点后被触发。 </p><p> 举几个例子：</p><p class="code"><a href="index.htm">回到主页</a> <br /><a href="sound.wav">播放语音文件</a><br /><a href="javascipt.open()">执行对应的程序</a><br /><a herf="document.doc">打开对应的文档进行加工</a></p><p> 应用技巧</p><p> 1、提供下载文件</p><p> 有不少网友来信问，提供下载的效果怎么做。实际上仍然是做一个超级链接，不过供下载的文件必须上传到网站上。例：有一个“网页技巧”的文件包供下载，文件名是“homepagejq.zip”且已上传到网站了，则这个链接的代码可以这样写：<a href="homepagejq.zip">点击这里下载“网页技巧”文件包</a>。</p><p> 2、在新窗口中打开链接的网页</p><p> 设定“target”的值为“_blank”。例：新开窗口打开网页“aboutme.htm”。产生该效果的代码是：<a href="aboutme.htm" target="_blank">关于我......</a>。</p><p> 3、鼠标移到链接，显示一行说明文字</p><p> 设定“title”参数值，即可获得这种效果。例：当鼠标移到“黄山村夫”这个链接上时，显示说明“这是一个介绍技巧的专业网站”。这个链接的代码是这样的：<a href="hscf.htm" title="这是一个介绍技巧的专业网站">黄山村夫</a>。</p><p> 4、鼠标移到一个链接上弹出一个窗口</p><p> 这是设定onmouseover参数获得的效果。例：当鼠标移到一个链接上，弹出一个窗口并在窗口中显示“鼠标悬停效果演示！”。这个链接的代码是这样的：<a href="其它网页.htm" onmouseover="alert(''鼠标悬停效果演示！'')">链接</a>。用类似的方法可以制作当鼠标按下后弹出提出示窗口、当鼠标离开时弹出提示窗口的效果。</p><p> 5、链接到本页的指定内容</p><p> 要实现链接到本页的某一部分内容上（也就是“文件内跳转”），必须用参数name指定链接点的名称。选定一块文本，可以用name参数为其命名，以备链接所用。所谓同一个文件内的跳转是指当读者在阅读一个很长的文件的时候，若只对某部分的内容感兴趣，可以采用跳跃式的阅读方式。其基本格式是：</p><p class="code"><a href＝"＃链接点名称">第二部分</a>第一部分内容......<br />...........................................<br /><a name＝"链接点名称"></a>第二部分实际内容......<br />........................................... </p><p> 这样当你点击“第二部分”这个超级链接后，就会自动转移到“第二部分实际内容”这个地方来。“name”参数所定义的链接点名称可以随意取，但链接的“href”参数中的链接点名称必须与其一致，不要忘记在前面加上“#”。</p><p> 6、链接到其它页面的指定内容位置</p><p> 方法与上例类似，但在“href”参数中的链接点名称前要加上网页的文件名。例：有两个网页page1.htm和page2.htm ，每页均有两部分内容，现要在page1.htm中制作一个超级链接，按下该链接后将转到page2.htm的第二部分内容上。那么我们可以这样做，首先在page2.htm第二部分内容开始的地方写上这样一句代码：<a name="链接点名称"></a>；在page1.htm中写上这样一个链接代码：<a href="pagw2.htm#链接点名称">page2 的第二部分内容</a>。</p><p> 7、链接到E_mail</p><p> 点击一个超级链接后，将启动客户机上的电子邮件管理软件给你写信。例这行代码：<a href="mailto:web@webjx.com">请给我写信</a>。一旦你点击了“请给我写信”这个链接，将自动启动电子邮件管理软件（如OE）的写信功能，并已把邮件地址加在了收信人的地址栏里了。</p><p> 链接不仅可以以文本作载体，也可以以图象作载体，而且可以以图片的某一部分作载体，且都能实现上述这些效果，方法也相同，所不同只是载体，也就是链接的两对方括号中间的那部分，所以不再另举例了。</p>\r\n <p align="center"> </p>', '', '', ''),
(12, 2, '<p> 活动字幕，也称为滚动看板、滚动字幕。活动字幕的使用使得整个网页更有动感，显得很有生气。现在的网站中也越来越多地使用活动字幕来加强网页的互动性。用Javascript编程可以实现活动字幕效果；用Dreamweaver的图层再用其时间线功能可以做出非常漂亮的滚动看板。而用HTML的<marquee>活动字幕标记所需的代码最少，确实能够以较少的下载时间换来较好的效果。该标记语法格式如下：</p><p><marquee<br />aligh=left|center|right|top|bottom<br />bgcolor=#n<br />direction=left|right|up|down<br />behavior=type<br />height＝n<br />hspace＝n<br />scrollamount=n<br />Scrolldelay=n<br />width=n<br />VSpace=n<br />loop＝n></p><p> 可以看出由于活动字幕的显示方式多种多样，可选的参数也很多。下面解释一下各参数的含义：<span class="web"></span></p><p> align：是设定活动字幕的位置，不过除了居左、居中、居右三种位置外，又增加靠上（align=top）和靠下（align=bottom）两种位置。</p><p> Bgcolor：用于设定活动字幕的背景颜色，一般是十六进制数。</p><p> Direction：用于设定活动字幕的滚动方向是向左、向右、向上、向下。</p><p> Behavior：用于设定滚动的方式，主要由三种方式：behavior="scroll"表示由一端滚动到另一端；behavior="slide":表示由一端快速滑动到另一端，且不再重复； behavior="alternate"表示在两端之间来回滚动。</p><p> Height：用于设定滚动字幕的高度。</p><p> Width：则设定滚动字幕的宽度。<span class="web"></span></p><p> Hspace和vspace：分别用于设定滚动字幕的左右边框和上下边框的宽度。<span class="web"></span></p><p> Scrollamount：用于设定活动字幕的滚动距离。</p><p> scrolldelay：用于设定滚动两次之间的延迟时间。</p><p> Loop：用于设定滚动的次数，当loop=-1表示一直滚动下去，直到页面更新。</p><p> <marquee>标记的默认情况是向左滚动无限次，字幕高度是文本高度，滚动范围：水平滚动的宽度是当前位置的宽度；垂直滚动的高度是当前位置的高度。</p><p> 应用技巧</p><p> 1、全取默认值，所用代码最少，请看下面的例子</p><p> 这个滚动字幕全取默认值，源代码：<marquee>这里写字幕内容</marquee>，代码是不是很少？</p><p> 2、垂直滚动</p><p> 只要加上diriction="up"就行了，如<marquee direction="up" >这里写字幕内容</marquee>。</p><p> 3、多行文本的活动字幕</p><p> 由于<mqrquee>标记只能作用于一段文本，因此多行活动字幕，分行时只能用<br>标记，不能用<p>标记。</p><p> 示例源代码：</p><p><marquee><br />活动字幕内容第一行<br><br />活动字幕内容第二行<br><br />活动字幕内容第三行<br><br /></marquee><span class="web"></span></p><p> 4、在字幕内容中加入图象<span class="web"></span></p><p> <marquee>虽是一个活动字幕标记，但它允许在其中加入图象。下面是一个加入了图片的代码： <marquee><img src="image/a2ball.gif" width="17" height="16">这是加入图象的活动字幕</marquee></p><p> 5、在Dreamweaver中使用<marquee>标记</p><p> Dreamweaver不能在编辑窗中直接加入marquee标记，但可在源代码检视器中加入<marquee>标记，然后在编辑窗中编辑活动字幕的内容即可。<span class="web"></span></p><p> <marquee>标记的参数较多，在应用中要把握一个原则，能用默认值就不要再设置参数值，用什么参数就设置该参数的值，其它参数就不要再设置，以把代码控制在最少的范围内。</p><p>(负责编辑：blank)</p>\r\n <p align="center"> </p>', '', '', ''),
(13, 2, '<p align="left"><strong>一、为什么要？</strong></p><p align="left"> <span class="web"></span> 近两年来，许多公司开发出了图形化的HTML开发工具，使得网页的制作变得非常简单。如微软公司推出的 Microsoft FrontPage， Adobe公司推出的 Adobe Pagemill， Micromedia公司推出的Dreamweaver等编辑工具，都被称为“所见即所得”的工具。这些图形化的开发工具可以直接处理网页，而不用书写费劲的标记。这使得用户在没有HTML语言基础的情况下，照样可以编写网页。这时，编写HTML文档的任务由开发工具替你完成了。 <span class="web"></span>这是网页图形编辑工具的最大成功之处，但也是它们的最大不足之处。受到图形编辑工具自身的约束，将产生大量的垃圾代码。原因很简单，我举一个简单的例子你就明白了。比如：在网页设计一个表格，若是每个单元格的宽度和高度让它根据其中的内容自动确定，HTML只要你告诉它是表格和单元格的排列顺序（也就是行列数）就行了，但因为图形化开发工具无法得知你的这种特殊要求，所以只能取一般要求，把每个单元格的宽度和高度都定义起来，从而增加了许多代码。所以一个明智的网页编写者应该在掌握图形编辑工具的基础上进一步学会HTML语言，从而知道那些是垃圾代码，这样，我们就可以利用图形化HTML开发工具快速成地做出网页，又会消除无用的代码，从而达到快速制作高质量网页的目的。<span class="web"></span></p><p> <strong>二、如何用HTML？</strong></p><p> HTML语言，又称超文本标记语言，是英文Hyper Text Markup Language的缩写。HTML语言作为一种标识性的语言，是由一些特定符号和语法组成的，所以理解和掌握都是十分容易的。可以说，HTML语言在所有的计算机编程语言中是最简单易学的。 组成HTML的文档都是ASCIlI档，所以创建HTML文件十分简单，只需一个普通的字符编辑器即可。如 Wndows中的记事本、写字板都可以使用。也可以采用专用的 HTML 编辑工具：如 CoffeeHTML、 Homesite、 HTMLedit Pro等工具，它们的特点是能够自动检查HTML文档中的语法错误并协助改正。由于有了图形化的HTML开发工具，使得我们更加容易，我们可以先用它制作好网页，再在它附带的HTML代码编辑器在删去那些无用的代码，利用它的所见即所得特性，从而使我们很快就能熟炼地掌握HTML。特别是 Micromedia 公司最近发布的Dreamweaver4，可以把源代码编辑器和网页编辑器放在同一个窗口中，真是方便极了。</p><p> <strong>三、HTML基本概念</strong></p><p> 1、标记<span class="web"></span></p><p> HTML用于描述功能的符号称为“标记”。如“HTML”、“BODY”、“TABLE”等。标记在使用是必须用方括号“<>”括起来，而且是成对出现，无斜杠的标记表示该标记的作用开始，有斜杠的标记表示该标记的作用结束。如<TABLE>表示一个表格的开始， </TABLE>表标一个表格的结束。在HTML中，标记的大小写作用相同，如<TABLE>和<table>都是表示一个表格的开始。</p><p> 标记可以包含标记，如：表格中包含表格或其它标记，如下面这样的HTML代码结构是正确的：</p><p class="code"><table width="50%" border="10" cellspacing="10" cellpadding="10"><br /><tr><br /><td><br /><table width="100%" border="1" cellspacing="1" cellpadding="1"><br /><tr><br /><td> </td><br /><td> </td><br /><td> </td><br /></tr><br /></table><br /></td><br /><td><br /><p> </p><br /><p>hjk</p><br /><p> </p><br /></td><br /><td> </td><br /></tr><br /></table></p><p> 但是标记不能交叉嵌套，如下面这样的代码是错误的： <span class="web"></span></p><p class="code"><div><span>这是不正确的代码</div></span></p><p> 2、特殊字符</p><p> 由于方括号和英文双引号被用来提示HTML的标记及参数值，那么在网页中要显示方括号和英文引号只能用其它的符号来代替，下面是常见特殊字符所代表的正常字符：</p><p class="code"><或<对应字符 <<br />>或>对应字符 ><br />"或"——对应字符 "<br />à——对应字符 A </p><p> 3、语法 <span class="web"></span></p><p> 一个标记，为了明确它的功能，往往用一些属性参数来描述，对这些属性参数的规定上就是所谓的语法，例如：段落标记<p>，它的语法格式是：</p><p class="code"><p align=left|center|right class=type><span class="web"></span></p><p> 这就说明<p>标记有两个属性参数，即“align”和“class”，其中“align”用于定义段的位置是靠左、靠右还是居中。默认值是靠左。而“class ”则是定义所属的类型。在实际应用时当然可以没有“align”和“class”参数，按照默认情况显示，这一点非常重要，这是我们判断无用代码的主要标准之一，假如在网页代码中有对默认值进行描述设置的语句代码，显然是无用的代码。另外，在设置标记的属性值时，若是取默认值不影响效果或影响很少，我们就尽量取默认值，这样可以不用设置，从而达到减少代码的目的。</p><p> 标记参数的具体的值都有要加西文引号，如：要使段落内容居中，正确的写法是这样的： <span class="web"></span></p><p class="code"><p align="center">段落内容居中示例</p> <span class="web"></span> </p><p> 学好用好HTML语言的关键是灵活应用标记的参数。特别是默认值的应用。</p>\r\n <p align="center"> </p>', '', '', ''),
(14, 2, '<p>我们制作的每一个HTML网页都应该有文档标题。那么到底如何设置标题呢？这个教程就作为网页初学者的入门吧！</p><p>给你的文档增加一个标题，按照下面改变你的代码：</p><p><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />""><br /><html><br /><head><br /><title>我的第一个网页</title><br /></head><br /><body><br />我的第一个网页<br /></body><br /></html></p><p>你可以看到，我们已经增加从<head>标签和<title>标签开始的两个新元素（看看他们是怎么关闭的）。</p><p>头元素（从起始标签<head>到闭合标签</head>之间的内容）出现在主体元素（从起始标签< body>到闭合标签</body>之间的内容）之前，包含将在主体元素信息之前装载的信息。这些信息不会出现在浏览器窗口中。</p><p>随着我们进一步学习，你会看到更多能够插入头元素的其它元素，但最重要的还是标题元素。</p><p>如果你从浏览器查看这个网页（像前面一样已经保存和刷新），你可以看到“这是我的第一个网页”出现在浏览器窗口的标题栏。你键入的位于标题（title）标签的文本已经变成了这个文档的标题，惊奇吧？假设把这个网页增添到你的收藏夹或者书签，你会看到标题也会出现在这里。<br /></p>\r\n <p align="center"> </p>', '', '', ''),
(15, 2, '<p>在制作网页时，文本内容是必不可少的！那么我们该如何对网页文本进行正确排版呢？</p><p>当段落标签p应该使用在段落的时候还有许多滥用换行标签br的情况，p用于表现段落是公认的。基于同样的逻辑，很多标签应该被用来定义确定的文本元素，比如引用，缩写和计算机代码等。</p><p>应该记住的是，尽管大部分浏览器用不同的方式处理这些标签，最重要的是记住，不是为了让元素看起来像什么，而是它赋予的含义是什么。</p><p>缩写和首字母组合词</p><p>缩写标签abbr和首字母组合词标签acronym分别用于缩写词语和首字母组合而成的缩写词。</p><p>缩写是一个惯用词组的缩短形式。很平常。然而，首字母缩写词则是组成词组的每个单词之首个字母（或者单词的部分）的组合缩写。所以CSS是一个正确的首字母缩写词，但HTML和XHTML却不是（如果Hypertxet markup language是一个首字母缩写词，它应该是HML，同理，XHTML 就是EHML了）。</p><p>为了优化易用性，缩写和首字母缩写词都应该使用标题属性title。<br /><p>This web site is about <abbr title="HyperText Markup Language">HTML</abbr><br />and <acronym title="Cascading Style Sheets">CSS</acronym>.<br /></p> </p><p>注意</p><p>有一些不可思议的理由，Internet Explorer，最常用的浏览器，竟然不支持abbr标签。十分幸运，一个叫Marek Prokop的小伙子为此开发了clever Javascript workaround。<br />有很多关于缩写和首字母缩写词元素的讨论，Lars Holst提供了可能是最具体的深入理解。</p><p>引用</p><p>blockquote，q和cite用在引用上。blockquote是块状的，用于大面积的引用语上，而q则是内联的，用于更小的词组。cite也是内联的，比起q来其本身的语义更可取，很可能在将来取代q。</p><p>又，标题属性title用于表明引用从何而来。</p><p>注意：q一般不改变内附文本的外观──你需要用CSS如果你需要为它指定一个样式。</p><p><p>So I asked Bob about quotations and he said <br /><cite>I know as much about quotations as I do about pigeon fancying</cite><br />. Luckily, I found HTML Dog and it said...<br /></p><br /> <blockquote title="From HTML Dog, "><br /> <p>blockquote, q and cite are used for quotations. blockquote is block-line and used for large or citations, whereas q is in-line and used for smaller phrases. cite is also in-line and preferable to q for its semantic nature and possible future deprecation of q.</p><br /> </blockquote> </p><p>代码</p><p>有少部分的标签，code和var用于计算机程序代码，pre和samp则，在实践中，也主要是用于代码。<br />code用于计算机程序代码。<br />var用于指明代码里的变量。</p><p><code><var>ronankeatingisbland</var> = true;</code> </p><p>samp与代码类似，但被认为是用于程序的代码输出样例。<br />pre是预格式化文本，在HTML标签中不常用，以防止大量空格的产生。它常用于代码块。</p><p><pre> <br /><div id="intro"> <br /><h1>Some heading<br /></h1> <p>Some paragraph paragraph thing thing thingy.<br /></p> </div><br /></pre> </p><p>定义术语</p><p>dfn是定义术语，用于高亮显示一个第一次使用的术语。像abbr和acronym ，标题属性title可以用来描述术语。</p><p><p>Bob''s <dfn title="Dog">canine</dfn> mother and <dfn title="Horse">equine</dfn><br /> father sat him down and carefully explained that he was an <br /><dfn title="A mutation that combines two or more sets of chromosomes from different species">allopolyploid</dfn><br />organism.</p></p><p>地址</p><p>address应该用于地址。</p><p><address> <br />HMTL Dog House<br /> <br />HTML Street<br /> <br />Dogsville<br /> <br />HT16 3ML </address></p><p>晦涩罕见的标签<br />有一些没有什么价值的标签，有很少的机会被使用只是因为十分特定的场合。<br />bdo可以用来反转文本的方向，可以用来显示从右向左读的文本。必需的属性dir的值可以是ltr（左向右）和rtl（右向左）。</p><p><bdo dir="rtl">god lmth</bdo><br /> <br />kbd用于表明应由用户键入的文本。</p><p><p>Now type <kbd>woo hoo</kbd></p> </p><p>ins和del分别用于显示编辑插入和删除的文本。它可以有时间属性datetime（用YYYYMMDD的格式）和cite属性（用于说明为什么插入或者删除理由的一个URL）。</p><p>ins元素一般显示下划线，而del元素则一般显示删除线。</p><p><p>This is some <del datetime="20030522">nonsense</del><br /><ins cite=" informative stuff</ins><br />that I''ve written.</p></p><p>表现（描述性）元素</p><p>b、 i、tt、sub、sup、big和small都是表现元素，因此，由于它们的精确性，不应该再使用当我们一再强调分离内容和表现。比如b定义粗体元素，没有任何意义──这些标签定义纯粹的可视化特征，应该是CSS的事。尽管他们是合法的标签，还有其他的（比如strong和em，是词组元素）可以实际地添加含义。如果你仅仅需要复制这些标签的样式，不需要任何相关的含义，你可以在span标签上应用CSS。</p>\r\n <p align="center"> </p>', '', '', ''),
(16, 2, '<p>我们曾经为本节撰写的标题是：“XHTML:简单的规则，容易的方针。”原因之一是，本节讨论的规则和方针是简单和容易的。原因之二是，一本简单和容易的WEB设计图书，就像超级市场的新式的免费商品一样，虽然常见却可以有效地吸引人的眼球，这样的东西可以刺激人的兴趣，并且鼓励人们尝试。</p><p>我确实希望本节的内容可以激发你的兴趣，并鼓励你去尝试。为什么这么说呢？因为一旦你掌握了本章包含的简单容易的理念，你就会重新思考网页运作的方式，并开始改变建造它们的方法。然而我并不希望你只是将代码重新改写一边。我希望你可以实实在在地以另一种方式思考和工作。</p><p>另一方面，重构才是XHTML真正的意义。</p><p>在本章，我们将研究结构化标记的机制和涵义。如果你正在将网站标准融入你的开发项目，你或许会觉得本章的内容有些熟悉。不过即便是这方面的老手，也会从本章发现意外的收获。</p><p>XHTML规则概要<br />将传统的HTML转换为XHTML 1.0是快捷且无痛的，只要你遵守一些简单的规则和容易的方针。不管是否使用过HTML，都不会妨碍你使用XHTML。</p><p>使用恰当的文档类型声明和命名空间。 <br />使用meta元素声明你的内容类型。 <br />使用小写字母书写所有的元素和属性。 <br />为所有的属性值加引号。 <br />为所有的属性分配值。 <br />关闭所有的标签。 <br />使用空格和斜线关闭空标签。 <br />不要在注释中写双下划线。 <br />确保小于号及和号为<和& <br />Unicode和其他字符集<br />XML、XHTML、和HTML 4.0文档的默认字符集是Unicode，一个由Unicode联盟定义的标准。Unicode是一套全面的字符集，它为每个字符提供了一个特定的唯一的数字，不论平台、程序和语言。Unicode也是我们拥有的最接近通用字母表的事物，尽管它并不是一个字母表，而是一套数字映射方案。</p><p>尽管Unicode是web文档默认的字符集，开发人员依然可以自由地选择更适合他们的其他字符集。比方说，美国和西欧的网站常常使用ISO-8859-1 (Latin-1)编码，而中华人民共和国的国家标准是gb2312。</p><p>为表达语义而标记文档，而不是为了样式<br />记住：请最大限度地使用CSS来进行布局。在web标准的世界里，XHTML标记与表现无关，它只与文档结构有关。</p><p>结构良好的文档可以向浏览器传达尽可能多的语义，不论是浏览器位于掌上电脑还是时髦的桌面图形浏览器。结构良好的文档都能向用户传达可视化的语义，即使是在老的浏览器，或是在被用户关闭了CSS的现代浏览器中。</p><p>不是每个站点都能立即抛弃HTML表格布局。CSS的发明者，W3C，直到2002年11月才将官方网站转换为CSS布局。然而，即使是顽固的唯标准主义者也不总是将表现从结构中完全分离处理，至少在XHTML 1中是做不到的。但是现在，我们可以向这个理想迈出重大的一步，通过将表现从结构中分离（或者说将数据从设计中），即使是混合的传统的布局也可从中受益。 </p><p>下面有一些提示，可以帮助你通过更结构化的方式进行思维：</p><p>提纲内的色彩<br />在语法学校，我们中的大部分人都被迫使用标准的提纲格式来写文章。现在，我们成为了设计师，可以多么自由地摆脱提纲的限制，然后大胆地投身于独特的个人表达的自由领域（也许我们的宣传册和商业站点还不是那么独特和个人化）。但是至少我们不会再受到提纲的困扰了。</p><p>实际上，依照HTML，我们应该将内容结构化为有组织的层级。在浏览器不支持CSS的时期，我们无法在交付可供销售的布局的同时做到这一点。但是今天，在将我们的设计不折不扣地实现的同时，我们有能力交付内在结构良好的文档。</p><p>当你将供网络使用的文本进行标记，或者当你将已有的文本文档转换为网页时，请使用传统提纲的这些条目进行思考。</p><p><h1>我的主题</h1><br /><p>介绍性文字</p><br /><h2>补充性的观点</h2><br /><p>相关文字</p></p><p>\r\n <p align="center"> </p>', '', '', '');
INSERT INTO `#@__addonarticle` (`aid`, `typeid`, `body`, `redirecturl`, `templet`, `userip`) VALUES
(17, 2, '<p>FRAME（框架）是Web上经常会看到的页面结构。使用可视Web开发工具（比如Dreamweaver或者Frontpage），虽然可以在 WYSIWYG环境中通过简单的鼠标托拽完成FRAME的构建，但是要实现真正细致甚至强大的功能，仔细理解FRAME的代码结构至关重要！你将发现， FRAME原来是这样的亲切易用。 </p><p> <strong>创建基本的FRAMESET</strong> </p><p> FRAMESET页面与普遍的Web页面有些不同。虽然仍旧以<HTML>和包含标题的<HEAD>标记以及其他脚本开始，但是其内容仅仅是表示的各个页面的版式设计。因此，不再需要有<BODY>元素，只需要<FRAMESET>标记。 </p><p> 通过<FRAMESET>标记的<rows>和<cols>属性，浏览器窗口被分割为一个个格子。 <rows>和<cols>的设置值可以是固定的像素值，可以是总空间的百分比值，还可以是用*以及一个数字相乘表示的分割剩余空间的比例值。比如说： </p><p>cols="80,20%,*" 分为3列，宽度分别为80像素，窗口宽度的20％，以及剩余宽度 <br />rows="25%,75%" 分为2列，宽度分别为窗口宽度的25％和75％ <br />rows="*,3*" 与上述第2个表示的一样，分为2列，但表示方法不同：第一列宽度为第二列的1/3 </p><p> 在<FRAMESET>和</FRAMESET>之间，用多个<FRAME>标记表示每个分割区。col 表示从左到右的列，row表示从上到下的行。每个<FRAME>有一个src属性，给出了这个FRAME的内容。它可以是浏览器能显示的任何一个合法URL，或者是另外一个FRAMESET。为预防递归现象，一个FRAME不能包含它本身所在的FRAMESET页面。要用name属性定义 FRAME的名字，这样就可以在代码或者脚本程序中引用它。 请看一段基本的FRAMESET代码： </p><p class="code"><HTML> <br /><HEAD> <br /><TITLE>Simple FRAMESET</TITLE> <br /></HEAD> <br /><FRAMESET cols="40%,60%" rows="2*,*"> <br /><FRAME name="TopLeft" src="red.htm"> <br /><FRAME name="TopRight" src="green.htm"> <br /><FRAME name="BotLeft" src="blue.htm"> <br /><FRAME name="BotRight" src="white.htm"> <br /></FRAMESET> <br /></HTML> <br /><FRAMESET rows="105,*"> <br /><FRAME name="adbanner" src="ad.html"> <br /><FRAMESET cols="40%,60%"> <br /><FRAME name="left" src="red.htm"> <br /><FRAMESET rows="*,*"> <br /><FRAME name="top" src="blue.htm"> <br /><FRAME name="bottom" src="white.htm"> <br /></FRAMESET> <br /></FRAMESET> <br /></FRAMESET> </p><p> <strong>FRAME间的链接</strong> </p><p> 一个FRAMESET结构的页面，新文档只转载进窗口的一部分中，而其他页面则保持静态不变。当用户点击FRAME中的链接时，新内容就在同一 FRAME内打开。要让新内容在其他FRAME中打开，可以设置<A>标记的target属性值为那个FRAME的name值。 </p><p> 而且，我们还可以设置打开目标为当前可见的任意一个FRAME，而不局限于本身的FRAMESET。目标可能是一个嵌套的FRAMESET中的 FRAME，也可能是其他窗口中的FRAME。但是如果目标FRAME不存在，就会产生一个带有目标FRAME名字的新窗口。 </p><p> 下面举个例子说明一下，假设有一个简单含2－FRAME的FRAMESET，文件名叫做home.html，代码如下： </p><p class="code"><HTML> <br /><HEAD><TITLE>FrommCo home page</TITLE></HEAD> <br /><FRAMESET cols="115,*"> <br /><FRAME src="menu.htm"> <br /><FRAME name="content" src="main.htm"> <br /></FRAMESET> <br /></HTML> </p><p> 文件menu.htm在左边的FRAME中，其中有一系列链接，点击它们后新内容将在右边的叫做content的FRAME中打开。下面是menu.html的代码： </p><p class="code"><HTML><HEAD></HEAD> <br /><BODY><P><BR> <br /><IMG src="Images/tmp_logo.gif" alt="FrommCo"><P> <br /><A href="main.htm" target="content">Main page</A><P> <br /><A href="mission.htm" target="content">Our mission</A><P> <br /><A href="staff.htm" target="content">Our staff</A><P> <br /><A href="splash.htm" target="_parent">FrommCo splash page</A> <br /></BODY></HTML> </p><p> 请注意最后一个链接中target的定义为_parent，这属于4个特殊的保留值。它们是： </p><p>_parent：在当前FRAMESET位置显示新href。 <br />_top：在当前整个窗口位置显示新href，比如本身FRAMESET位于另一个FRAMESET中。 <br />_self：强制在当前FRAME中显示新href。 <br />_blank：在新窗口中显示href。 </p><p> 表示客户端图形地图的<AREA>标记同样可以应用target属性，比如： </p><p class="code"> <AREA shape=circle coords="75,75,50" href="main.htm" target="content" alt="Main page"> </p><p> 还有一种经常的情况是：Web页面中的大部分或者全部链接都要求在一个特别的FRAME中打开。这时，可以在页面的<HEAD>代码区使用<BASE>标记设置默认的target，然后再分别定义特殊链接的target值。 </p><p> <strong>修饰FRAME</strong> </p><p> FRAMESET不仅在宽度、高度等方面具有可控制的数值，在美观方面也同样可以精确设置。 </p><p> 默认情况下，FRAMESET的FRAME间有一个凸起的边沿，表示分割效果。如果不喜欢这个，想营造“无缝连接”的效果，可以在< FRAME>标记中设置FRAMEborder=0来消除它。在3.0及高版本的Navigator和Internet Explorer中，如果在<FRAMESET>标记中设置FRAMEborder=0，那么除了设置为FRAMEborder=1的 FRAME外，所有其他FRAME的边沿都将消失。 </p><p> 虽然设置了FRAMEborder=0，有些浏览器仍旧会在FRAME间保留一些边沿的颜色痕迹。这时，可以在< FRAMESET>标记中添加FRAMEspacing=0（对Internet Explorer）或者border=0（对Navigator和Opera）实现真正的无缝连接。 </p><p> 请看下面的代码是如何使用这些属性的： </p><p class="code"><HTML> <br /><HEAD><TITLE>FrommCo home page</TITLE></HEAD> <br /><FRAMESET cols="115,*" FRAMEspacing=0 border=0> <br /><FRAME src="menu.htm" FRAMEborder=0 noresize scrolling=no> <br /><FRAME name="content" src="main.htm" FRAMEborder=0> <br /></FRAMESET> <br /></HTML> </p><p> 上面的代码中有2个新的属性：noresize表示锁住FRAME而不允许使用鼠标改变大小，scrolling=no表示屏蔽FRAME的滚动条，scrolling=yes表示允许，scrolling=auto表示根据显示内容需要自动显示滚动条。 </p><p> <strong>浮动FRAME </strong></p><p> 浮动FRAME是HTML4.0规范中的一个定义，目前的浏览器都支持它。 </p><p> 不象FRAMESET表示的分割区样子，一个浮动FRAME作为一个内置对象存在于Web页面上，其样式就象一个页面上的一个图形或者一个 applet。浮动FRAME使用<IFRAME>标记，它具有与<FRAME>相同的大多数属性设置，包括：name、 src、marginwidth、marginheight、FRAMEborder以及scrolling。同时，它还具有与图形或者applet一样的height、width和align属性。 </p><p> 而且，浮动FRAME遵循与普通FRAME一样的target原则：我们可以通过它的name来指向它。本原则适用于在任一类型FRAME中的浮动FRAME，反之易然。浮动FRAME中的没有traget的链接指向它本身，而_parent链接则指向包含<IFRAME>的文档所在的FRAME或者窗口。比如： </p><p class="code"><IFRAME name="floater" src="start.htm" width=150 height=200 hspace=10 align=left> <br /><IMG src="Images/noFRAME.gif" alt="You can''t see the floating FRAME" <br />width=150 height=200 hspace=10 align=right> <br /></IFRAME><BR> <br /><A href="one.htm" target="floater">Show one.htm</A><P> <br /><A href="two.htm" target="floater">Show two.htm</A><P> <br /><A href="start.htm" target="floater">Bring back start.htm</A> </p><p> 注意，对应支持<IFRAME>标记的浏览器，任何位于<IFRAME>和</IFRAME>间的内容都将忽略。反之，其中的内容将显示出来，这可以用作解释当前浏览器不支持<IFRAME>。 </p><p> <strong>何时使用FRAME</strong> </p><p> 我们知道，FRAMESET的基本用途就是分割浏览器窗口，使得窗口的一部分内容改变，而其他部分保持不变。利用这个特性，就可以实现工具栏导航功能，一个FRAME内放置静态菜单页面，用户点击其中的项目后，在另外的FRAME内显示相关的内容。这样就可以从整体上减少文件大小，因为不必在每个内容页面中再包含菜单项目。 </p><p> FRAME有2个明显的不足： </p><p> FRAME从另外的级别上增加了站点的管理，原因在于超级链接不仅仅要指向适当的页面，而且也会装载到相关的FRAME内。 </p><p> 另外，大多数浏览器在执行“添加书签”的操作时，只能记录下FRAMESET的初始位置。不管添加书签时是位于多么深的FRAMESET中，当再次选择这个书签时，就会返回到FRAMESET的初始页面。这就加大了访问者浏览指定内容的难度。 </p><p> 但是，如果好好地组织站点信息，使导航操作只有不深的几层，那么，使用FRAME就能很好地为访问者服务。记住：访问者都希望简洁的导航信息。 </p><p> 当然，导航并非是使用FRAME的唯一原因，也可以使用FRAME创建交换工具和交换页面。而且，FRAME的多文档框架结构非常适于被JavaScript应用程序所操作。 </p><p> <strong>用FRAME设计站点 </strong></p><p> 最常用的FRAME结构就是“菜单－内容”FRAMESET。一个FRAME内放置导航菜单，另一个FRAME内转载子菜单，每个子菜单的链接就指向本身。唯一的有target的链接都在菜单FRAME内。 请看下面的例程代码： </p><p class="code"><HTML><HEAD> <br /><TITLE>Welcome to my site!</TITLE> <br /></HEAD> <br /><FRAMESET cols="150,*"> <br /><FRAME name="menu" src="menu.htm"> <br /><FRAME name="content" src="intro.htm"> <br /></FRAMESET> <br /><BODY> <br /><!--如果是支持FRAME的浏览器，则不会显示下面的内容；否则，也显示出简单菜单页面--> <br />Welcome to my site.<P> <br /><A href="intro.htm">Introduction</A> <br /><A href="products.htm">Products</A> <br /><A href="reviews.htm">Reviews</A> <br /></BODY></HTML>\r\n <p align="center"> </p>', '', '', ''),
(18, 2, '近来，随着XHTML（可扩展HTML）标准的出现，<script/>标签也经历了一些改变。该标签不再用language特性，而用type特性声明内嵌代码或要加入的外部文件的mime类型，JavaScript的mime类型是"text/javascript"。例如：<p class="code"><html> <br /> <head> <br /> <title>Title of Page</title> <br /> <script type=”text/javascript”> <br /> var i = 0; <br /> </script> <br /> <script type=”text/javascript” src=”../scripts/external.js”></script> <br /> </head> <br /> <body> <br /> <!-- body goes here --> <br /> </body> <br /></html> </p><p> 即使许多浏览器不完全支持XHTML，但大多数开发者现在都用type特性，而不用language特性，以提供更好的XHTML支持。省略language特性不会带来任何问题，因为如前所述，所有浏览器都默认<script/>的该属性值为JavaScript。</p><p> XHTML的第二个改变是使用CDATA段。XML中的CDATA段用于声明不应被解析为标签的文本（XHTML也是如此），这样就可以使用特殊字符，如小于（<）、大于（>）、和号（&）和双引号（"），而不必使用它们的字符实体。考虑下面的代码：</p><p class="code"><SCRIPT type=”text/javascript”> <br /> function compare(a, b) { <br /> if (a < b) { <br /> alert(“A is less than B”); <br /> } else if (a > b) { <br /> alert(“A is greater than B”); <br /> } else { <br /> alert(“A is equal to B”); <br /> } <br />} <br /></SCRIPT> </p><p> 这个函数相当简单，它比较数字a和b，然后显示消息说明它们的关系。但是，在XHTML中，这段代码是无效的，因为它使用了三个特殊符号，即小于、大于和双引号。要修正这个问题，必须分别用这三个字符的XML实体<、>和"替换它们：</p><p class="code"><SCRIPT type=”text/javascript”> <br />function compare(a, b) { <br />if (a < b) { <br />alert("A is less than B"); <br />} else if (a > b) { <br />131 <br />JavaScript in the Browser <br />alert("A is greater than B"); <br />} else { <br />alert("A is equal to B"); <br />} <br />} <br /></SCRIPT> </p><p> 这段代码存在两个问题。首先，开发者不习惯用XML实体编写代码。这使代码很难读懂。其次，在JavaScript中，这种代码实际上将视为有语法错，因为解释程序不知道XML实体的意思。用CDATA段即可以以常规形式（即易读的语法）编写JavaScript代码。正式加入CDATA段的方法如下：</p><p class="code"><SCRIPT type=”text/javascript”><br /><![CDATA[ <br />function compare(a, b) { <br />if (a < b) { <br />alert(“A is less than B”); <br />} else if (a > b) { <br />alert(“A is greater than B”); <br />} else { <br />alert(“A is equal to B”); <br />} <br />} <br />]]><br /></SCRIPT></p><p> 虽然这是正式方式，但还要记住，大多数浏览器都不完全支持XHTML，这就带来主要问题，即这在JavaScript中是个语法错误，因为大多数浏览器还不认识CDATA段。</p><p> 当前使用的解决方案模仿了“对旧浏览器隐藏”代码的方法。使用单行的JavaScript注释，可在不影响代码语法的情况下嵌入CDATA段：</p><p class="code"><SCRIPT type=”text/javascript”> <br />//<![CDATA[ <br />function compare(a, b) { <br />if (a < b) { <br />alert(“A is less than B”); <br />} else if (a > b) { <br />alert(“A is greater than B”); <br />} else { <br />alert(“A is equal to B”); <br />} <br />} <br />//]]> <br /></SCRIPT></p>\r\n <p align="center"> </p>', '', '', ''),
(19, 2, '<p><strong>HTML标签拥有属性。每个标签的特殊属性均被列于每个标签描述之下。这里列出的属性是通用于每个标签的核心属性和语言属性（有个别例外）：</strong></p><h3>核心属性 (Core Attributes)</h3><p>以下标签不提供下面的属性：base、head、html、meta、param、script、style以及title元素。</p><table><tbody><tr><th class="xhtml_sa">属性</th><th class="xhtml_sv">值</th><th class="xhtml_sd">描述</th></tr><tr><td>class</td><td>class_rule or style_rule</td><td>元素的类(class)</td></tr><tr><td>id</td><td>id_name</td><td>元素的某个特定id。</td></tr><tr><td>style</td><td>样式定义</td><td>内联样式定义。</td></tr><tr><td>title</td><td>提示文本</td><td>显示于提示工具中的文本。</td></tr></tbody></table><h3>语言属性 (Language Attributes)</h3><p>以下标签不提供下面的属性：base、br、frame、frameset、hr、iframe、param以及script元素。</p><table><tbody><tr><th class="xhtml_sa">属性</th><th class="xhtml_sv">值</th><th class="xhtml_sd">描述</th></tr><tr><td>dir</td><td>ltr | rtl</td><td>设置文本的方向。</td></tr><tr><td>lang</td><td>语言代码</td><td>设置语言代码。</td></tr></tbody></table><h3>键盘属性 (Keyboard Attributes)</h3><table><tbody><tr><th class="xhtml_sa">属性</th><th class="xhtml_sv">值</th><th class="xhtml_sd">描述</th></tr><tr><td>accesskey</td><td>字符</td><td>设置访问某元素的键盘快捷键。</td></tr><tr><td>tabindex</td><td>数</td><td>设置某元素的Tab次序。</td></tr></tbody></table>\r\n <p align="center"> </p>', '', '', ''),
(20, 2, '<p><strong>HTML文档是由HTML元素构成的文本文件。</strong></p><p><strong>HTML元素是通过使用HTML标签进行定义的。</strong></p><dl><dt>HTML标签 </dt><dd><ul><li>HTML标签是用来<em>标记HTML元素</em>的。 </li><li>HTML标签<em>被<和>符号包围</em>。 </li><li>这些包围的符号叫作。 </li><li>HTML标签是<em>成对出现</em>的。例如<b>和</b>。 </li><li>位于<em>起始标签</em>和<em>终止标签</em>之间的文本是元素的内容。 </li><li>HTML标签<em>对大小写不敏感</em>，<b>和<B>的作用的相同的。 </li></ul></dd></dl><h3>HTML元素</h3><p>还记得上一节中的那个例子吗：</p><pre class="code"><html>\r\n<head>\r\n<title>页面的标题</title>\r\n</head>\r\n<body>\r\n<p>这是我的第一个页面。</p>\r\n<code><b>此文本是粗体的。</b></code>\r\n</body>\r\n</html></pre><p>这就是一个HTML元素：</p><pre class="code"><b>此文本是粗体的。</b></pre><p>这个HTML元素由<em>起始标签<b></em>开始。</p><p>这个元素的内容是：“此文本是粗体的。”。</p><p>这个HTML元素由<em>终止标签</b></em>结尾。</p><p><b>标签的作用是定义一个显示为粗体的HTML元素。</p><p>这也是一个HTML文档：</p><pre class="code"><body>\r\n<p>这是我的第一个页面。</p>\r\n<b>此文本是粗体的。</b>\r\n</body></pre><p>这个HTML元素开始于<body>标签，结束于</body>标签。</p><p><body>标签的作用是定义HTML文件中的容纳body的HTML元素。</p><h3>为什么我们要使用小写的标签？</h3><p>我们刚才讲到：HTML标签对大小写是不敏感的：<b>和<B>的作用的相同的。当您在网上冲浪时，您会发现大多数教程在他们的例子中都使用大写的HTML标签。而我们总是使用小写。原因何在呢？</p><p>如果您希望为使用下一代HTML而做好准备，您就应该使用小写标签。万维网协会(W3C)的标准是：建议在HTML 4中使用小写标签，而在XHTML（下一代HTML）中，必须使用小写标签。</p><h3>标签属性</h3><p>标签可以有属性。属性可以为您的页面中的HTML元素提供附加的信息。</p><p>如前所述，<body>标签用来定义页面的body元素。通过添加一个bgcolor属性，您可以告知浏览器将页面的背景颜色显示为红色，就像这样：<body bgcolor="red">。</p><p><table>用来定义一个HTML表格。通过添加一个border属性，您可以告知浏览器显示一个没有边框的表格：<table border="0">。</p><p>属性由属性名和值组成，就像这样：name="value"。</p><p>属性应该被添加到HTML元素的起始标签。</p><h3>单引号还是双引号？</h3><p>属性值应被置于引号之间。通常情况下应该使用双引号，不过使用单引号也没有问题。</p><p>但是在个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：</p><p>name=''John"ShotGun"Nelson''</p>\r\n <p align="center"> </p>', '', '', ''),
(21, 3, '<p>当然，每个人都可以编写CSS代码，甚至你现在已经让它为你的项目工作了。但是CSS还可以更好吗？开始用这5个Tips改进你的CSS吧！</p>\r\n<h3>1.重置</h3>\r\n<p>首先，很认真的告诉你，<strong>总是要重置某些分类</strong>。无论你是使用 、或者你自己编写的重置代码，只要使用就对了。</p>\r\n<p>它能很简单的移除所有元素的填充（padding）和边距（margin）：</p>\r\n<ol>\r\n <li>html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote,</li>\r\n <li>pre, form, fieldset, table, th, td { margin: 0; padding: 0; }</li>\r\n</ol>\r\n<p>Eric Meyer Reset和YUI Reset都是非常强大的，但是对于我而言，它们走的太远了。我觉得你最终需要重置一切，然后重新定义所有元素的属性。这就是为什么Eric Meyer推荐更有效的使用（重置样式表），而你不要只是使用他的重置样式表，将它拖放到你的项目中。调整它（的重置样式表），建立属于自己的重置样式 表。</p>\r\n<p>噢，请停止使用：</p>\r\n<p>* { margin: 0; padding: 0; }</p>\r\n<p>花更多的时间去制作它，当你移除了填充（padding）你认为单选按钮会发生什么变化？表单元素有时能够做些时髦的事情，所以最有效的方式就是将他们独立。</p>\r\n<h3>2.排序</h3>\r\n<p><strong>一个小的测试</strong><br />\r\n这个例子就是要让你思考如何更快的<strong>找到右边距属性</strong>？</p>\r\n<p><strong>Example#1</strong></p>\r\n<p><code><br />\r\ndiv#header h1 {<br />\r\nz-index: 101;<br />\r\ncolor: #000;<br />\r\nposition: relative;<br />\r\nline-height: 24px;<br />\r\nmargin-right: 48px;<br />\r\nborder-bottom: 1px solid #dedede;<br />\r\nfont-size: 18px;<br />\r\n}<br />\r\n</code></p>\r\n<p><strong>Example#2</strong></p>\r\n<p><code><br />\r\ndiv#header h1 {<br />\r\nborder-bottom: 1px solid #dedede;<br />\r\ncolor: #000;<br />\r\nfont-size: 18px;<br />\r\nline-height: 24px;<br />\r\nmargin-right: 48px;<br />\r\nposition: relative;<br />\r\nz-index: 101;<br />\r\n}<br />\r\n</code></p>\r\n<p>你不能告诉我Example#2不能更快的找到右边距属性。根据字母排序你的元素属性。一致的创建你的CSS，将帮助你节省花费在寻找一个特殊属性的时间。</p>\r\n<p>我知道一些人用这样的方法去组织代码，其他人又用另一种方法去组织，但是在我的公司，我们协商一致做出决定，所有的代码都将按照字母排序来组织。通过这样组织代码与其他人协同工作一定是有帮助的。当我碰到属性没有按照字母排序的层叠样式表我每一次都会退缩。</p>\r\n<h3>3.组织</h3>\r\n<p>你应该组织你的样式表以致相关的内容靠在一起，更简单的找到想要的。使用更有效的注解。举个例子，这是我如何构造我的层叠样式表：</p>\r\n<p>/*****Reset*****/<br />\r\n移除元素的填充（padding）和边距（margin）。<br />\r\n/*****Basic Elements*****/<br />\r\n定义基本元素的样式: body, h1-h6, ul, ol, a, p, 等.<br />\r\n/*****Generic Classes*****/<br />\r\n定义简单的风格，好像浮动的某一侧, 移除元素的下边距, 等当然，它们大部分都与我们希望的语义不相关,但是它们是高效处理代码所必须的。<br />\r\n/*****Basic Layout*****/<br />\r\n定义基本的模板: header, footer等. 帮助定义网页布局的基本元素<br />\r\n/*****Header*****/<br />\r\n定义所有Hearder元素<br />\r\n/*****Content*****/<br />\r\n定义所有内容框内的元素<br />\r\n/*****Footer*****/<br />\r\n定义所有Footer的元素<br />\r\n/*****Etc*****/<br />\r\n定义其他的选择器。通过注解和归类相似元素的分组，将更快的找到你想要的。</p>\r\n<h3>4.一致性</h3>\r\n<p>无论你决定使用什么方式去编写代码，保持一致。我已经对全部放在1行VS多行的CSS编写编写方式的争论感到乏味和疲倦。这是不需要争辩的。每个人都有自己的观点，所以选择一种你喜欢的工作方式，并在所有的样式表中保持一致。</p>\r\n<p>就我个人而言，我将使用两者结合的方式。如果一个选择器超过了3个属性，我将截断它采用多行的方式编写。</p>\r\n<p><code><br />\r\ndiv#header { float: left; width: 100%; }<br />\r\ndiv#header div.column {<br />\r\nborder-right: 1px solid #ccc;<br />\r\nfloat: rightright;<br />\r\nmargin-right: 50px;<br />\r\npadding: 10px;<br />\r\nwidth: 300px;<br />\r\n}<br />\r\ndiv#header h1 { float: left; position: relative; width: 250px; }<br />\r\n</code></p>\r\n<p>所以找到你喜欢的工作方式然后保持一致。</p>\r\n<h3>5.从正确的地方开始</h3>\r\n<p><strong>在完成标记语言之前不要去尝试靠近你的样式表。</strong></p>\r\n<p>当我准备分割一张网页的时候，创建CSS文件之前，我需要预览并且标记body开标签到body的闭合标签之间的所有文档。我不会增加额外的DIV ,ID,或者类选择器。我将会添加一些一般的DIV，就好像hearder、content、footer.因为我知道这些东西是现实存在的。</p>\r\n<p>通过先标记文档，你将不会碰到本已注定的divities1和classitis2麻烦!/*You only need to add in that stuff once you have begun to write the CSS and realize that you are going to need another hook to accomplish what you are trying to achieve.*/(原文未译）。</p>\r\n<p>利用CSS子选择器指定子元素；不要只是机械的给元素添加类或者ID选择器。记住：<strong>没有一个良好的格式化文档（或者标记结构）CSS是无价值的。</strong></p>\r\n<h3>总结</h3>\r\n<p>这些Tips能够帮助我更好的完成CSS代码的编写。但是这并不意味着这张列表的结束，接下来我将会去带来一些其他的与大家分享。</p>\r\n<strong>你有什么更好的Tips帮助我们完善CSS代码？</strong>\r\n <p align="center"> </p>', '', '', ''),
(22, 3, '<p>CSS? Isn''t that a multiplayer game?<br />\r\n第0级：CSS？那不是一个多人射击游戏吗？<br />\r\n有些人因为在找CS:S（Counter Strike: Source）这款游戏的资讯而进到#CSS网站。不必担心这些人，他们不可能制作太多网页，所以对网络也不会造成多大伤害。</p>\r\n<p>Yeah, I use it to remove underlines on links sometimes<br />\r\n第1级：是啊，我偶尔用它来移除连结的底线</p>\r\n<p>和第0级的人不同，这些人学过HTML，也制作过几个简单的网站。他们只有在无法使用HTML制作出某些效果时，才会使用CSS，例如移除连结的底线或者设定行高。这些人的网站通常规模不大也没什么访客，所以他们也不会对网络造成太大伤害。</p>\r\n<p>No, I don''t like divs; tables are much easier to work with<br />\r\n第2级：不，我不喜欢div元素；表格好用多了</p>\r\n<p>他们听过使用div元素来设计网页这件事，也花了些时间学习CSS。不过他们很快就放弃了，觉得CSS太难而且支持度不佳，还是宁可用表格排版。<br />\r\n注意！他们是危险人物！他们在这个领域已经待了一段时间，许多都是网站部门的主管。和他们接触是很重要的，提倡网络标准的人应该多多开导他们，这对网络的意义非同小可。</p>\r\n<p>Yes I''ve heard it''s good, but I can’t use it because of…<br />\r\n第3级：是啊，听说它挺好的，不过我没用它因为……</p>\r\n<p>这些人虽然知道CSS的优点，不过总是基于某些原因而无法使用它，例如他们可能有第2级的上司，或者他们必须考虑到Netscape 4的使用者。<br />\r\n旧 版的浏览器虽然不支持CSS，不过使用者还是可以看见完整的内容。而基于亲和力（accessibility）和易用性（usability）的好 处，CSS可以为网站带来更多访客。把这些优点告诉第3级的开发人员，即使他们不是决策者，或许多少能对第2级的上司发挥点影响力吧。</p>\r\n<p>CSS? Oh! Yes, I use divs for all my layouts<br />\r\n第4级：CSS？喔！没错，我用div元素来排版</p>\r\n<p>在 页面中使用过多的div元素反而是这群人的问题，他们会用#toprightredline或是#r5_c7（表示第5列第7栏）这样的方式设定div元 素的id。即使可以通过XHTML 1.1的验证，这种排版方式却无法发挥CSS的优势。荧幕朗读软体（screen readers，视障者使用的浏览器）很难解译这些网页，旧版浏览器也会有同样的问题，网页的内容无法完整显示。而不良的class与id命名方式，也对 于版面的修改造成极大不便。<br />\r\n虽然第4级的人制作的网站仍然很糟，不过由于他们很容易接受新的观念，因此对网络造成的伤害较小。许多所见即所得（WYSIWYG）的编辑器制作出充满div元素的原始码，可能也是误导这群人的原因。幸好这些编辑器已经逐渐改良了，希望这会有助于第4级的人继续往上提升。</p>\r\n<p>I use CSS for design, it''s better than tables because of…<br />\r\n第5级：我用CSS来设计，这比表格好多了，因为……</p>\r\n<p>第5级的人知道CSS的优点并乐于使用，虽然有时会遇到些问题，但并不严重。他们也能运用长期的CSS工作经验，与人辩论为什么要将网页的结构与设计分开。我猜这篇文章大部分的读者是这一级的CSS开发人员，我想我自己也是。不过这还不是最好的……</p>\r\n<p>What version of CSS? Yes, I do. Did you read my book about…<br />\r\n第6级：哪个版本的CSS？是的，我知道啊。你有读过我的书关于……</p>\r\n<p>第 6级的人致力于改良CSS，并且写了许多很棒的文章介绍它的新用法。其中有些人将W3C关于CSS的说明文件全部读完了，并且知道哪些功能在哪个版本的浏 览器才有支持。他们是CSS初学者的典范，并且运用他们的影响力使网络更加进步。其中有许多人组成了Web Standards Project，如果你在他们的网站上面发现任何错误，那一定是有理由的，向他们请教之后你必能获得满意的解答。</p>\r\n\r\n <p align="center"> </p>', '', '', ''),
(23, 3, '<p> 在进行页面的DIV+CSS排版时，遇到IE6（当然有时Firefox下也会偶遇）浏览器中的图片元素img下出现多余空白的问题绝对是常见的对於 该问题的解决方法也是「见机行事」，根据原因的不同要用不同的解决方法，这里把解决直接把解决image图片布局下边的多余空隙的BUG的常用方法归纳， 供大家参考。<br />\r\n<strong>1、将图片转换为块级对像</strong><br />\r\n即，设置img为：<br />\r\n<code>display:block;</code><br />\r\n在本例中添加一组CSS代码：<br />\r\n<code>#sub img {display:block;}</code><br />\r\n<strong>2、设置图片的垂直对齐方式</strong><br />\r\n即设置图片的vertical-align属性为「top，text-top，bottom，text-bottom」也可以解决。如本例中增加一组CSS代码：<br />\r\n<code>#sub img {vertical-align:top;}</code><br />\r\n<strong>3、设置父对象的文字大小为0px</strong><br />\r\n即，在#sub中添加一行：<br />\r\n<code>font-size:0;</code><br />\r\n可以解决问题。但这也引发了新的问题，在父对像中的文字都无法显示。就算文字部分被子对像括起来，设置子对像文字大小依然可以显示，但在CSS效验的时候会提示文字过小的错误。<br />\r\n<strong>4、改变父对象的属性</strong><br />\r\n如果父对象的宽、高固定，图片大小随父对像而定，那麽可以设置：<br />\r\n<code>overflow:hidden;</code><br />\r\n来解决。如本例中可以向#sub中添加以下代码：<br />\r\n<code>width:88px;height:31px;overflow:hidden;</code><br />\r\n<strong>5、设置图片的浮动属性</strong><br />\r\n即在本例中增加一行CSS代码：<br />\r\n<code>#sub img {float:left;}</code><br />\r\n如果要实现图文混排，这种方法是很好的选择。<br />\r\n<strong>6、取消图片标签和其父对象的最後一个结束标签之间的空格。</strong><br />\r\n这个方法要强调下，在实际开发中该方法可能会出乱子，因为在写代码的时候为了让代码更体现语义和层次清晰，难免要通过IDE提供代码缩进显示，这必然 会让标签和其他标签换行显示，比如说DW的「套用源格式」命令。所以说这个方法可以供我们了解出现BUG的一种情况，具体解决方案的还得各位见招拆招了。</p>\r\n <p align="center"> </p>', '', '', ''),
(24, 3, '副标题#e#\r\n <p> </p>\r\n\r\n<p><img height="400" width="300" alt="css-导航菜单-教程" src="http://www.dedecms.com/demoimg/uploads/allimg/c100407/12F603910L60-12363.jpg" title="css-导航菜单-教程" /></p>\r\n<p>在当今标准的Web设计中，CSS是最重要的组成部分。为了让大家更好的理解如何通过CSS来设计，彬Go为大家收集了30个基于CSS的导航菜单 和按钮的CSS设计教程，通过这些教程，您可以在您今后的项目中更方便的直接使用或参考，当然也可以用作平时的实践练习。希望大家能从中学到些什么。</p>\r\n<h3>CSS导航及菜单教程</h3>\r\n<p>01.<br />\r\n<img height="164" width="500" alt="CSS-导航-教程" src="http://www.dedecms.com/demoimg/uploads/allimg/c100407/12F603911I5P-2C22.jpg" /><br />\r\n02.<br />\r\n<img height="130" width="500" alt="CSS-导航-实例" src="http://www.dedecms.com/demoimg/uploads/allimg/c100407/12F60391230410-3F40.jpg" /><br />\r\n03.<br />\r\n<img height="150" width="500" alt="CSS-导航" src="http://www.dedecms.com/demoimg/uploads/allimg/c100407/12F603912JE0-4W09.jpg" /><br />\r\n04.<br />\r\n<img height="210" width="500" alt="CSS-导航-源代码" src="http://www.dedecms.com/demoimg/uploads/allimg/c100407/12F6039132K30-52a7.jpg" /><br />\r\n05.<br />\r\n<img height="102" width="500" alt="DIV-CSS-导航" src="http://www.dedecms.com/demoimg/uploads/allimg/c100407/12F603913UO0-62a9.jpg" /><br />\r\n06.<br />\r\n<img height="109" width="500" alt="CSS-导航-教程" src="http://www.dedecms.com/demoimg/uploads/allimg/c100407/12F60391423R0-L356.jpg" /><br />\r\n07.<br />\r\n<img height="137" width="500" alt="CSS-导航-实例" src="http://www.dedecms.com/demoimg/uploads/allimg/c100407/12F603914E350-W2a.jpg" /><br />\r\n08.<br />\r\n<img height="92" width="500" alt="CSS-导航" src="http://www.dedecms.com/demoimg/uploads/allimg/c100407/12F60391514S0-93P4.jpg" /><br />\r\n09.<br />\r\n<img height="127" width="500" alt="CSS-导航-源代码" src="http://www.dedecms.com/demoimg/uploads/allimg/c100407/12F60391563410-1040O.jpg" /><br />\r\n10.<br />\r\n<img height="131" width="500" alt="DIV-CSS-导航" src="http://www.dedecms.com/demoimg/uploads/allimg/c100407/12F60391601240-113Y5.jpg" /><br />\r\n11.<br />\r\n<img height="210" width="500" alt="CSS-导航-教程" src="http://www.dedecms.com/demoimg/uploads/allimg/c100407/12F603916440-12NY.jpg" /><br />\r\n12.<br />\r\n<img height="150" width="500" alt="CSS-导航-实例" src="http://www.dedecms.com/demoimg/uploads/allimg/c100407/12F60391E00P-13B47.jpg" /><br />\r\n13.<br />\r\n<img height="150" width="500" alt="CSS-导航" src="http://www.dedecms.com/demoimg/uploads/allimg/c100407/12F60391K3a0-149357.jpg" /><br />\r\n14. <br />\r\n<img height="191" width="500" alt="CSS-导航-源代码" src="http://www.dedecms.com/demoimg/uploads/allimg/c100407/12F60391PMF-15Z17.jpg" /><br />\r\n15.<br />\r\n<img height="210" width="500" alt="DIV-CSS-导航" src="http://www.dedecms.com/demoimg/uploads/allimg/c100407/12F60391VD20-1E627.jpg" /></p>\r\n<p>\r\n <p align="center"> </p>\r\n \r\n \r\n #p#副标题#e#</p>\r\n<h3>CSS按钮教程</h3>\r\n<p>16.<br />\r\n<img height="165" width="500" alt="CSS-按钮-源代码" src="http://www.dedecms.com/demoimg/uploads/allimg/c100407/12F60391915130-1ND5.jpg" /><br />\r\n17.<br />\r\n<img height="103" width="500" alt="CSS-按钮" src="http://www.dedecms.com/demoimg/uploads/allimg/c100407/12F60391a4Y0-1Sa3.jpg" /><br />\r\n18.<br />\r\n<img height="164" width="500" alt="CSS-按钮-教程" src="http://www.dedecms.com/demoimg/uploads/allimg/c100407/12F60392016450-194K3.jpg" /><br />\r\n19.<br />\r\n<img height="210" width="500" alt="CSS-按钮-实例" src="http://www.dedecms.com/demoimg/uploads/allimg/c100407/12F603920H920-20I17.jpg" /><br />\r\n20.<br />\r\n<img height="131" width="500" alt="CSS-教程" src="http://www.dedecms.com/demoimg/uploads/allimg/c100407/12F6039213010-21S04.jpg" /><br />\r\n21.<br />\r\n<img height="168" width="500" alt="CSS-按钮-源代码" src="http://www.dedecms.com/demoimg/uploads/allimg/c100407/12F603921L030-22DN.jpg" /><br />\r\n22.<br />\r\n<img height="121" width="500" alt="CSS-按钮" src="http://www.dedecms.com/demoimg/uploads/allimg/c100407/12F60392224a0-23XD.jpg" /><br />\r\n23.<br />\r\n<img height="123" width="500" alt="CSS-按钮-教程" src="http://www.dedecms.com/demoimg/uploads/allimg/c100407/12F603922J340-24DP.jpg" /><br />\r\n24.<br />\r\n<img height="104" width="500" alt="CSS-按钮-实例" src="http://www.dedecms.com/demoimg/uploads/allimg/c100407/12F6039233010-255611.jpg" /><br />\r\n25.<br />\r\n<img height="169" width="500" alt="CSS-教程" src="http://www.dedecms.com/demoimg/uploads/allimg/c100407/12F603923R060-2E521.jpg" /><br />\r\n26.<br />\r\n<img height="159" width="500" alt="CSS-按钮-源代码" src="http://www.dedecms.com/demoimg/uploads/allimg/c100407/12F60392430350-2J516.jpg" /><br />\r\n<br />\r\n<img height="210" width="500" alt="CSS-按钮" src="http://www.dedecms.com/demoimg/uploads/allimg/c100407/12F603924Q40-2Sa8.jpg" /><br />\r\n28.<br />\r\n<img height="140" width="500" alt="CSS-按钮-教程" src="http://www.dedecms.com/demoimg/uploads/allimg/c100407/12F6039252U60-293B6.jpg" /><br />\r\n29.<br />\r\n<img height="150" width="500" alt="CSS-按钮-实例" src="http://www.dedecms.com/demoimg/uploads/allimg/c100407/12F603925O340-30F38.jpg" /><br />\r\n30.<br />\r\n<img height="127" width="500" alt="CSS-教程" src="http://www.dedecms.com/demoimg/uploads/allimg/c100407/12F6039262L40-31W01.jpg" /></p>\r\n<p>英文原文:<br />\r\n翻译原文:(暴风彬彬)</p>\r\n\r\n <p align="center"> </p>', '', '', ''),
(25, 3, '副标题#e#\r\n <p>今天，我们为大家收集精选了<strong>30个使用纯CSS</strong>完成的强大实践的<strong>优秀CSS技术和实例</strong>，您将在这里发现很多与众不同的技术，比如:图片集、阴影效果、可扩展按钮、菜单等…这些实例都是使用纯CSS和HTML实现的。<br />\r\n单击每个实例的标题可以被转向到该技术实例的相关教程或说明页面(英文)，单击每个实例的图片截图可以直接跳转到相应实例的Demo页面。</p>\r\n<h3>1.</h3>\r\n<p>一个纯净的基于CSS的图片集，鼠标悬停缩略图就会显示放大效果。<br />\r\n</p>\r\n<h3>2.</h3>\r\n<p>一款很有创意且复杂的CSS导航方案。<br />\r\n</p>\r\n<h3>3.</h3>\r\n<p>手风琴效果的影集，悬停便可拉伸图片。<br />\r\n</p>\r\n<h3>4.</h3>\r\n<p>题为”“的文章中的一部分展示了如何使用CSS样式让图片变得更有意思。<br />\r\n</p>\r\n<h3>5.</h3>\r\n<p>在A List Apart上的一个关于图片效果Demo的讨论文章““.<br />\r\n</p>\r\n<h3>6.</h3>\r\n<p>悬停标签改变分类，悬停缩略图显示放大图。<br />\r\n</p>\r\n<h3>7.</h3>\r\n<p>使用简单的图片和background-position属性来进行调解。<br />\r\n</p>\r\n<h3>8.</h3>\r\n<p>模仿表格布局，但使用的是列表。图集是流式宽度。<br />\r\n</p>\r\n<h3>9.</h3>\r\n<p>仅使用了很少XHTML的静态页脚。<br />\r\n<img height="180" width="450" alt="CSS-实例" src="http://www.dedecms.com/demoimg/uploads/allimg/c100407/12F60392Q4550-321013.gif" /></p>\r\n<h3>10.</h3>\r\n<p>模仿Windows开始菜单的CSS导航菜单。<br />\r\n</p>\r\n<p>\r\n <p align="center"> </p>\r\n \r\n \r\n #p#副标题#e#</p>\r\n<h3>11.</h3>\r\n<p>使用div和:hover伪类的手风琴效果，这个效果可以垂直显示也可以水平显示。<br />\r\n</p>\r\n<h3>12.</h3>\r\n<p></p>\r\n<h3>13.</h3>\r\n<p>链接在不使用图片的情况下看起来像个按钮。<br />\r\n</p>\r\n<h3>14.</h3>\r\n<p>表格的标题被固定的优秀长表格。<br />\r\n</p>\r\n<h3>15.</h3>\r\n<p>当你悬停在图片上时，div容器会显示更多文字。<br />\r\n</p>\r\n<h3>16.</h3>\r\n<p>一个使用背景图片且非常漂亮，被语义化标记的表格。<br />\r\n</p>\r\n<h3>17.</h3>\r\n<p>另一种为图片添加圆角的方法。（圆角、边框、阴影）<br />\r\n</p>\r\n<h3>18.</h3>\r\n<p>关于为不同类型的链接添加图标的简单教程。<br />\r\n</p>\r\n<h3>19.</h3>\r\n<p>仅适用了一张图片和很少的几行代码及标记。<br />\r\n</p>\r\n<h3>20.</h3>\r\n<p>使用嵌套列表的树形导航，很适合网站地图页面。<br />\r\n</p>\r\n<p>\r\n <p align="center"> </p>\r\n \r\n #p#副标题#e#</p>\r\n<h3>21.</h3>\r\n<p>不使用JavaScript实现透明度技巧（但是以不符合XHTML验证为代价）<br />\r\n</p>\r\n<h3>22.</h3>\r\n<p>流式跨度和高度的圆角div。<br />\r\n</p>\r\n<h3>23.</h3>\r\n<p>条线图使用列表<li>。<br />\r\n</p>\r\n<h3>24.</h3>\r\n<p>3款柱状图实例:使用div和列表标签的”基本CSS柱状图”、”复杂CSS柱状图”、”垂直CSS柱状图”。<br />\r\n</p>\r\n<h3>25.</h3>\r\n<p>箭头会平滑的跟随鼠标移动，没有使用一丁点JavaScript和gif动画。<br />\r\n</p>\r\n<h3>26.</h3>\r\n<p></p>\r\n<h3>27.</h3>\r\n<p>使用了空白div来让文本能围绕背景图中的图像显示。<br />\r\n</p>\r\n<h3>28.</h3>\r\n<p>这个实例使用透明度设置和简单的图片逐渐在文字上方淡入图片。<br />\r\n</p>\r\n<h3>29.</h3>\r\n<p>一个在IE5(Mac)上也能正常工作的弹出技巧。<br />\r\n</p>\r\n<h3>30.</h3>\r\n<p>使用背景图片遮盖，和一个空的span标签，还有position: absolute声明来实现文本的渐变效果。<br />\r\n</p>\r\n<p>原文:<br />\r\n翻译:</p>\r\n <p align="center"> </p>', '', '', ''),
(26, 3, '<p>这是一位叫 的希腊 Web 设计师发表在 的一篇文章，讲述了黄金分割率在 CSS 中的应用。黄金分割率是一个应用广泛的数学常数，大约为 1.6180339887。黄金分割率用在 Web 设计中，可以为设计带来更多视觉上的和谐。</p>\r\n<p>在一个简单的两栏式页面布局中，使用两个容器，第一个容器用来显示主要内容，第二个容器显示侧条。比如，页面宽度为 960 px，使用黄金分割率，主内容容器的宽度应该为 960 / 1.62 = 593 px，而侧条的宽度为 960-593=367 px。<br />\r\n<img src="http://www.dedecms.com/demoimg/uploads/allimg/c100407/12F603930W50-12401.png" alt="" /><br />\r\n作者建议，在 Web 排版与布局中可以使用以下基本 CSS 设置</p>\r\n<ul>\r\n <li>line-height = font-size * 1.62</li>\r\n <li>paragraph margin = paragraph line-height * 1.62 / 2</li>\r\n <li>header’s margin-top = headers line-height * 1.62</li>\r\n</ul>\r\n<p>不过对中文而言，至少 font-size 和 line-height 之间使用黄金分割率是不适合的，假如中文字体使用 12px 的话，最佳行高是 22px，如果字体使用 14px 的话，行高应该使用 24px - 译者。<br />\r\n<img src="http://www.dedecms.com/demoimg/uploads/allimg/c100407/12F603931B510-23037.png" alt="" /><br />\r\n另一个例子，在表单中，输入框的宽度应该是标签文字的宽度乘以 1.62。而对于显示在 Web 上矩形来说，它的宽度应该是高度乘以 1.62。</p>\r\n<p>这样一来，Web 设计师同时需要很好的计算能力，至少要在旁边放一台计算器，为了节省时间，作者建议在设计中随时记住一个 62/38 原则，在任何需要分割的地方，都使用 62% 和 38% 作比例。<br />\r\n对于需要分割成三份的场合，可以先按 62%，38%原则分成两份，再将那份大的按 62% 和 38% 的比例分割。</p>\r\n <p align="center"> </p>', '', '', ''),
(27, 3, '<p>今天我将介绍一下如何使用CSS中的背景图片来设计你的搜索框。之前我使用别的方法来实现我的表单和搜索框，但是这种方法看起来会更容易些，所以我想将它与感兴趣的朋友分享。<br />\r\n</p>\r\n<h3>原始方式</h3>\r\n<p><img src="http://www.dedecms.com/demoimg/uploads/allimg/c100407/12F603932K20-31036.gif" alt="" /><br />\r\n首先来让我们看看我的原始的使用<input type=”image” src=”image_url” />的方法：<br />\r\n<font face="NSimsun"><code><form method="get" id="searchform" action="http://www.sohtanaka.com/"><br />\r\n<fieldset><br />\r\n<input type="text" value="" name="s" id="s" /><br />\r\n<input type="image" src="img_url" id="searchsubmit" value="Search" class="btn" /><br />\r\n</fieldset><br />\r\n</form></code><br />\r\n</font>这看起来挺不错的，但是它有一个不好的地方，这个图片按钮不会和搜索框对其，我必须使用一个负的margin-top属性来修正这个bug。</p>\r\n<h3>改良方法</h3>\r\n<p>在这个改良版的方法中，我决定不再使用 type=”image” ，而是使用<button>标签，然后用CSS添加背景。这允许文本输入框和按钮自动对齐。我同样添加了a <code><font face="NSimsun">:focus伪类</font></code>到最终效果(IE将不会支持这个，所以我添加了一个特殊的样式针对IE来隐藏这个效果)。 下面是这种方法的一些好处:</p>\r\n<ul>\r\n <li>很自然的对齐</li>\r\n <li>对按钮和输入框只使用了一张图片</li>\r\n <li>:focus 伪类支持它的浏览器</li>\r\n <li>添加hover 效果到按钮</li>\r\n</ul>\r\n<p><img src="http://www.dedecms.com/demoimg/uploads/allimg/c100407/12F60393325C0-45L1.gif" alt="" /><br />\r\n<strong>HTML</strong><br />\r\n<font face="NSimsun"><code><form method="get" id="searchform" action="http://www.sohtanaka.com/"><br />\r\n<fieldset class="search"><br />\r\n<input type="text" class="box" /><br />\r\n<button class="btn" title="Submit Search">Search</button><br />\r\n</fieldset><br />\r\n</form></code><br />\r\n</font><strong>CSS</strong><br />\r\n<font face="NSimsun"><code>fieldset.search {<br />\r\nborder: none;<br />\r\nwidth: 243px;<br />\r\nmargin: 0 auto;<br />\r\nbackground: #222;<br />\r\n}<br />\r\n.search input, .search button {<br />\r\nborder: none;<br />\r\nfloat: left;<br />\r\n}<br />\r\n.search input.box {<br />\r\ncolor: #fff;<br />\r\nfont-size: 1.2em;<br />\r\nwidth: 190px;<br />\r\nheight: 30px;<br />\r\npadding: 8px 5px 0;<br />\r\nbackground: #616161 url(search_bg.gif) no-repeat;<br />\r\nmargin-right: 5px;<br />\r\n}<br />\r\n.search input.box:focus {<br />\r\nbackground: #616161 url(search_bg.gif) no-repeat left -38px;<br />\r\noutline: none;<br />\r\n}<br />\r\n.search button.btn {<br />\r\nwidth: 38px;<br />\r\nheight: 38px;<br />\r\ncursor: pointer;<br />\r\ntext-indent: -9999px;<br />\r\nbackground: #fbc900 url(search_bg.gif) no-repeat top right;<br />\r\n}<br />\r\n.search button.btn:hover {<br />\r\nbackground: #fbc900 url(search_bg.gif) no-repeat bottom right;<br />\r\n}</code><br />\r\n</font><strong>IE特别注释</strong><br />\r\n<font face="NSimsun"><code><!--[if lte IE 7]><br />\r\n<link rel="stylesheet" type="text/css" href="ie.css" /><br />\r\n<![endif]--></code><br />\r\n</font><strong>IE 样式- ie.css</strong><br />\r\n朋友评论说如果输入文字过多IE6和IE7会水平滚动背景图片，所以我的方法是专门为IE使用一个单独的背景图片 ，而且不是让它左对齐，我翻转了它，通过让背景图片右对齐来修正这个。<br />\r\n<code><font face="NSimsun">.search input.box {<br />\r\nbackground: url(search_bg_ie.gif) no-repeat right bottom;<br />\r\n /* 专门为IE的独立背景图片，而且这个图篇必须是右对齐的。***/<br />\r\n}</font></code></p>\r\n<p></p>\r\n <p align="center"> </p>', '', '', '');
INSERT INTO `#@__addonarticle` (`aid`, `typeid`, `body`, `redirecturl`, `templet`, `userip`) VALUES
(28, 3, '<p><img alt="" src="http://www.dedecms.com/demoimg/uploads/allimg/c100407/12F60393415040-55N2.png" /><br />\r\n如果你曾经收藏过许多关于CSS的最佳实践但还没开始利用它们，那么这篇文章将帮助你制作一个很好且很有组织的CSS文件来应用于一些CSS最佳实践。在 这里我将为为我的下一个项目制作一个基本的CSS模板文件。使用标准的重设(Reset)方法，定义一些基本的方便的类，命名一些常见的页面区域等…</p>\r\n<p>在开始之前，创建一个新建文件夹并将它命名为”styles”(您也可以命名自己喜欢的名字)，然后在该文件夹下创建两个文件分别命名为“reset.css” 和 “style.css”。现在你的文件夹结构不出意外的话应该是这样的:</p>\r\n<blockquote>\r\n<p>–root<br />\r\n|<br />\r\nstyles<br />\r\n– reset.css<br />\r\n– style.css<br />\r\n|</p>\r\n</blockquote>\r\n<h3>1-单独使用一个全局CSS重设方法</h3>\r\n<p>我以Eric Meyer的重设为基础。只是去掉了其中的<strong>“ins”, “del”和 “table”</strong>，因为我实在是很少使用它们，因为某些原因又重新定义了<strong>“strong”</strong> 和 <strong>“em”</strong>，我知道您也许会有自己的方式，所以您也可以自由为自己的文件定义。写完CSS重设后，将其存储为”reset.css”。</p>\r\n<blockquote>\r\n<p>html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {<br />\r\nmargin: 0;<br />\r\npadding: 0;<br />\r\nborder: 0;<br />\r\noutline: 0;<br />\r\nfont-size: 100%;<br />\r\nvertical-align: baseline;<br />\r\nbackground: transparent;<br />\r\n}<br />\r\nol, ul {<br />\r\nlist-style: none;<br />\r\n}<br />\r\nblockquote, q {<br />\r\nquotes: none;<br />\r\n}<br />\r\nblockquote:before, blockquote:after, q:before, q:after {<br />\r\ncontent: ”;<br />\r\ncontent: none;<br />\r\n}<br />\r\n:focus {<br />\r\noutline: 0;<br />\r\n}<br />\r\ntable {<br />\r\nborder-collapse: collapse;<br />\r\nborder-spacing: 0;<br />\r\n}<br />\r\ncaption, th, td {<br />\r\ntext-align: left;<br />\r\nfont-weight: normal;<br />\r\n}<br />\r\nstrong {<br />\r\nfont-weight: bold;<br />\r\n}<br />\r\nem {<br />\r\nfont-style: italic;<br />\r\n}</p>\r\n</blockquote>\r\n<p>在这个重设文件里我去掉了<strong>“body”</strong>样式，因为通常我们在不同的项目中都会定义不同的”body”样式，所以我们将它放在style.css文件中。</p>\r\n<h3>2-在顶部为样式表添加描述注释</h3>\r\n<p>现在我们打开style.css来开始写一些基本的样式。在创建一个新样式文件(style.css)后，第一件事应该是在文件顶部写一些结构性的 注释，用来描述一些样式的细节，比如版本、作者、作者的详细联系方式等，这将帮助你和其他前端开发人员使用该文件。描述细节应当包括像作者姓名、版本和提 供更多信息的URL地址。我比较喜欢，因为它比较广泛。</p>\r\n<blockquote>\r\n<p>/*<br />\r\n主题名称: 玫瑰主题<br />\r\nURI: the-theme’s-homepage<br />\r\n描述: a-brief-description<br />\r\n作者: 您的姓名<br />\r\n作者 URI: 您的-URI<br />\r\n模板: 在这里可以提示它的父级模板<br />\r\n版本: 版本号<br />\r\n彬Go-集前端开发/网页设计/网站可用性/用户体验于一体的趣味互联网生活<br />\r\n网址:http://blog.bingo929.com/<br />\r\n*/</p>\r\n</blockquote>\r\n<h3>3-定义便于搜索的目录表</h3>\r\n<p>现在，我们来一起定义我们样式的目录表。定义TOC能帮助其他人甚至自己更容易与阅读和理解代码。也许您会觉得这个没什么必要，但请相信我！</p>\r\n<p>首先让我们看看它应当是什么样子的:</p>\r\n<blockquote>\r\n<p>[目录表]<br />\r\n0- Reset<br />\r\n1- Global<br />\r\n2- Links<br />\r\n3- Headings<br />\r\n4- Header<br />\r\n5- Navigation<br />\r\n6- Middle<br />\r\n7- Forms<br />\r\n8- Extras<br />\r\n9- Footer</p>\r\n</blockquote>\r\n<p>正如您看到的，我们将目录表从0到9分成10部分。</p>\r\n<ul>\r\n <li>TOC非常简单以至于它不会花费您超过1分钟的时间。</li>\r\n <li>您不用为每个项目定义不同的TOC。</li>\r\n <li>命名的使用非常普遍，所以可以适合模本的任何部分。</li>\r\n <li>不使用动态的#ID和.class。</li>\r\n <li>它并不大所以不会占用很多Kbytes。</li>\r\n <li>顺序的数字很有用，用途请往下看。</li>\r\n</ul>\r\n<h3>4-使用注释将每个部分隔开并使用一个=标记</h3>\r\n<p>请看一下样式，在0部分我将之前的重设样式表reset.css导入。</p>\r\n<blockquote>\r\n<p>/* =0 Reset<br />\r\n–––––––––––––––––––––––––––––––––––––––––––––––––––*/<br />\r\n@import url(’reset.css’);<br />\r\n/* =1 Global</p>\r\n<p>–––––––––––––––––––––––––––––––––––––––––––––––––––*/<br />\r\n/* =2 Links<br />\r\n–––––––––––––––––––––––––––––––––––––––––––––––––––*/<br />\r\n/* =3 Headings<br />\r\n–––––––––––––––––––––––––––––––––––––––––––––––––––*/<br />\r\n/* =4 Header<br />\r\n–––––––––––––––––––––––––––––––––––––––––––––––––––*/<br />\r\n/* =5 Navigation<br />\r\n–––––––––––––––––––––––––––––––––––––––––––––––––––*/<br />\r\n/* =6 Middle<br />\r\n–––––––––––––––––––––––––––––––––––––––––––––––––––*/<br />\r\n/* =7 Form<br />\r\n–––––––––––––––––––––––––––––––––––––––––––––––––––*/<br />\r\n/* =8 Extra<br />\r\n–––––––––––––––––––––––––––––––––––––––––––––––––––*/<br />\r\n/* =9 Footer<br />\r\n–––––––––––––––––––––––––––––––––––––––––––––––––––*/</p>\r\n</blockquote>\r\n<p>在每个部分的分区注释中使用=标记，可以帮助您和您的团队其他成员快速找到需要的代码。大家都知道，在CSS样式中的声明几乎是不会使用等号的，所 以我们可以使用等号来帮助搜索。比如你想寻找表单的相关样式代码，可以先查看目录表中表单对应的数字，然后搜索”=7″便可以快速跳转到表单的相关代码区 域。</p>\r\n<h3>5-定义最常用的类</h3>\r\n<p>其实有一些类是我们要经常使用的，那我们为什么不一次性把它们都定义好呢？现在正是时候！我添加了一些个人比较喜欢的，当然您也可以按照自己的喜好进行增删改。将它们定义在“=1 Global”下。<br />\r\n我还把body选择器定义在了Global中。<br />\r\n<span><strong>注:一下定义类仅仅是比较简单的一些。</strong></span></p>\r\n<blockquote>\r\n<p>/* =1 Global<br />\r\n–––––––––––––––––––––––––––––––––––––––––––––––––––*/<br />\r\nbody {<br />\r\nline-height: 1;<br />\r\nfont: normal 12px Arial, Helvetica, sans-serif;<br />\r\nvertical-align: top;<br />\r\nbackground: #fff;<br />\r\ncolor: #000;<br />\r\n}<br />\r\n.right {<br />\r\nfloat: right;<br />\r\n}<br />\r\n.left {<br />\r\nfloat: left;<br />\r\n}<br />\r\n.align-left {<br />\r\ntext-align: left;<br />\r\n}<br />\r\n.align-right {<br />\r\ntext-align: right;<br />\r\n}<br />\r\n.align-center {<br />\r\ntext-align:center;<br />\r\n}<br />\r\n.justify {<br />\r\ntext-align:justify;<br />\r\n}<br />\r\n.hide {<br />\r\ndisplay: none;<br />\r\n}<br />\r\n.clear {<br />\r\nclear: both;<br />\r\n}<br />\r\n.bold {<br />\r\nfont-weight:bold;<br />\r\n}<br />\r\n.italic {<br />\r\nfont-style:italic;<br />\r\n}<br />\r\n.underline {<br />\r\nborder-bottom:1px solid;<br />\r\n}<br />\r\n.highlight {<br />\r\nbackground:#ffc;<br />\r\n}<br />\r\nimg.centered {<br />\r\ndisplay: block;<br />\r\nmargin-left: auto;<br />\r\nmargin-right: auto;<br />\r\n}<br />\r\nimg.alignleft {<br />\r\nfloat:left;<br />\r\nmargin:4px 10px 4px 0;<br />\r\n}<br />\r\nimg.alignright {<br />\r\nfloat:right;<br />\r\nmargin:4px 0 4px 10px;<br />\r\n}<br />\r\n.clearfix:after {<br />\r\ncontent: “.”;<br />\r\ndisplay: block;<br />\r\nclear: both;<br />\r\nvisibility: hidden;<br />\r\nline-height: 0;<br />\r\nheight: 0;<br />\r\n}<br />\r\n.clearfix {<br />\r\ndisplay: block;<br />\r\n}<br />\r\nhtml[xmlns] .clearfix {<br />\r\ndisplay: block;<br />\r\n}<br />\r\n* html .clearfix {<br />\r\nheight: 1%;<br />\r\n}</p>\r\n</blockquote>\r\n<h3>6-为链接和标题定义样式</h3>\r\n<p>最后，我们来定义适当的链接和标题的样式，因为他们在任何项目中都是必需的。如果你在制作某个网页，你不可能不是用它们。</p>\r\n<blockquote>\r\n<p>/* =2 Links<br />\r\n––––––––––––––––––––––––––––––––––––––––––––––––––*/<br />\r\na:link, a:visited {<br />\r\ncolor: #333;<br />\r\n}<br />\r\na:hover {<br />\r\ncolor: #111;<br />\r\n}<br />\r\na:active {<br />\r\ncolor: #111;<br />\r\n}<br />\r\n/* =3 Headings<br />\r\n––––––––––––––––––––––––––––––––––––––––––––––––––*/<br />\r\nh1 {<br />\r\nfont: bold 2em “Times New Roman”, Times, serif;<br />\r\n}<br />\r\nh2 {<br />\r\nfont: bold 1.5em “Times New Roman”, Times, serif;<br />\r\n}<br />\r\nh3 {<br />\r\nfont: bold 1.2em Arial, Geneva, Helvetica, sans-serif;<br />\r\n}<br />\r\nh4 {<br />\r\nfont: bold 1em Arial, Geneva, Helvetica, sans-serif;<br />\r\n}<br />\r\nh5 {<br />\r\nfont: bold 0.9em Arial, Geneva, Helvetica, sans-serif;<br />\r\n}</p>\r\n</blockquote>\r\n<h3>style.css模板的最终代码</h3>\r\n<blockquote>\r\n<p>/*<br />\r\n主题名称: 玫瑰主题<br />\r\nURI: the-theme’s-homepage<br />\r\n描述: a-brief-description<br />\r\n作者: 您的姓名<br />\r\n作者 URI: 您的-URI<br />\r\n模板: 在这里可以提示它的父级模板</p>\r\n<p>[目录表]<br />\r\n0- Reset<br />\r\n1- Global<br />\r\n2- Links<br />\r\n3- Headings<br />\r\n4- Header<br />\r\n5- Navigation<br />\r\n6- Middle<br />\r\n7- Forms<br />\r\n8- Extras<br />\r\n9- Footer<br />\r\n*/<br />\r\n/* =0 Reset<br />\r\n–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/<br />\r\n@import url(’reset.css’);</p>\r\n<p>/* =1 Global<br />\r\n–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/<br />\r\nbody {<br />\r\nline-height: 1;<br />\r\nfont: normal 12px Arial, Helvetica, sans-serif;<br />\r\nvertical-align: top;<br />\r\nbackground: #fff;<br />\r\ncolor: #000;<br />\r\n}<br />\r\n.right {<br />\r\nfloat: right;<br />\r\n}<br />\r\n.left {<br />\r\nfloat: left;<br />\r\n}<br />\r\n.align-left {<br />\r\ntext-align: left;<br />\r\n}<br />\r\n.align-right {<br />\r\ntext-align: right;<br />\r\n}<br />\r\n.align-center {<br />\r\ntext-align:center;<br />\r\n}<br />\r\n.justify {<br />\r\ntext-align:justify;<br />\r\n}<br />\r\n.hide {<br />\r\ndisplay: none;<br />\r\n}<br />\r\n.clear {<br />\r\nclear: both;<br />\r\n}<br />\r\n.bold {<br />\r\nfont-weight:bold;<br />\r\n}<br />\r\n.italic {<br />\r\nfont-style:italic;<br />\r\n}<br />\r\n.underline {<br />\r\nborder-bottom:1px solid;<br />\r\n}<br />\r\n.highlight {<br />\r\nbackground:#ffc;<br />\r\n}<br />\r\nimg.centered {<br />\r\ndisplay: block;<br />\r\nmargin-left: auto;<br />\r\nmargin-right: auto;<br />\r\n}<br />\r\nimg.alignleft {<br />\r\nfloat:left;<br />\r\nmargin:4px 10px 4px 0;<br />\r\n}<br />\r\nimg.alignright {<br />\r\nfloat:right;<br />\r\nmargin:4px 0 4px 10px;<br />\r\n}<br />\r\n.clearfix:after {<br />\r\ncontent: “.”;<br />\r\ndisplay: block;<br />\r\nclear: both;<br />\r\nvisibility: hidden;<br />\r\nline-height: 0;<br />\r\nheight: 0;<br />\r\n}<br />\r\n.clearfix {<br />\r\ndisplay: block;<br />\r\n}<br />\r\nhtml[xmlns] .clearfix {<br />\r\ndisplay: block;<br />\r\n}<br />\r\n* html .clearfix {<br />\r\nheight: 1%;<br />\r\n}<br />\r\n/* =2 Links<br />\r\n–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/<br />\r\na:link, a:visited {<br />\r\ncolor: #333;<br />\r\n}<br />\r\na:hover {<br />\r\ncolor: #111;<br />\r\n}<br />\r\na:active {<br />\r\ncolor: #111;<br />\r\n}<br />\r\n/* =3 Headings<br />\r\n–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/<br />\r\nh1 {<br />\r\nfont: bold 2em “Times New Roman”, Times, serif;<br />\r\n}<br />\r\nh2 {<br />\r\nfont: bold 1.5em “Times New Roman”, Times, serif;<br />\r\n}<br />\r\nh3 {<br />\r\nfont: bold 1.2em Arial, Geneva, Helvetica, sans-serif;<br />\r\n}<br />\r\nh4 {<br />\r\nfont: bold 1em Arial, Geneva, Helvetica, sans-serif;<br />\r\n}<br />\r\nh5 {<br />\r\nfont: bold 0.9em Arial, Geneva, Helvetica, sans-serif;<br />\r\n}<br />\r\n/* =4 Header<br />\r\n–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/<br />\r\n/* =5 Navigation<br />\r\n–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/<br />\r\n/* =6 Middle<br />\r\n–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/<br />\r\n/* =7 Form<br />\r\n–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/<br />\r\n/* =8 Extra<br />\r\n–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/<br />\r\n/* =9 Footer<br />\r\n–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/</p>\r\n</blockquote>\r\n<h3>总结</h3>\r\n<p>感谢大家阅读本文，CSS最佳实践在某种意义上的确会对我们提供很大的帮助。它可以帮助我们节省更多的工作时间，显著提高工作效率。如果您有任何看法或建议，欢迎。</p>\r\n<h3>下载源文件</h3>\r\n<p></p>\r\n<p>来源: 翻译：</p>\r\n <p align="center"> </p>', '', '', ''),
(29, 3, '<p><img alt="" src="http://www.dedecms.com/demoimg/uploads/allimg/c100407/12F60393525250-A528.png" /><br />\r\n很多CSS爱好者不喜欢HTML表格，尤其是在制作表单的时候，虽然现在已经是XHTML+CSS的年代，但表单的设计大多还在采用table来布局。那 么，有没有更好的使用纯语义化XHTML+CSS设计表单方法呢？今天让我们一起来尝试这种更符合语义化的方法来代替Table嵌套的表单元素吧！</p>\r\n<p>在这里我要说，并不是要完全摒弃table的使用，它有它的语义化布局作用，尤其是在存储数据的时候。我在大多数情况下会使用纯CSS来设计表单， 但是，我也很喜欢表格，只要我们能在正确的地方使用正确的元素就可以了，不要太过追求所谓的DIV+CSS。直接使用table要比使用CSS来”模拟” (display:table;)表格更方便更快速。下面暴风彬彬将分享一种使用纯CSS代替HTML表格元素设计表单的方法。</p>\r\n<p>您可以下载源代码并使用在自己的网站项目中。<br />\r\n</p>\r\n<h3>第一步:HTML代码</h3>\r\n<p>创建一个新页面index.html，然后拷贝并粘贴以下代码到<body>标签内。</p>\r\n<blockquote>\r\n<p><div id=”stylized” class=”myform”><br />\r\n <form id=”form” name=”form” method=”post” action=”index.html”><br />\r\n <h1>Sign-up form</h1><br />\r\n <p>This is the basic look of my form without table</p><br />\r\n <label>Name<br />\r\n <span class=”small”>Add your name</span><br />\r\n </label><br />\r\n <input type=”text” name=”name” id=”name” /><br />\r\n <label>Email<br />\r\n <span class=”small”>Add a valid address</span><br />\r\n </label><br />\r\n <input type=”text” name=”email” id=”email” /><br />\r\n <label>Password<br />\r\n <span class=”small”>Min. size 6 chars</span><br />\r\n </label><br />\r\n <input type=”text” name=”password” id=”password” /><br />\r\n <button type=”submit”>Sign-up</button><br />\r\n <div class=”spacer”></div><br />\r\n </form><br />\r\n</div></p>\r\n</blockquote>\r\n<p> 通过上面的代码，你是否能看出它的视觉样式呢？下面是我们的CSS表单结构图示:<br />\r\n<img alt="" src="http://www.dedecms.com/demoimg/uploads/allimg/c100407/12F603935N10-H211.png" /><br />\r\n我为每个input元素使用了<label>标签，并使用<span>标签包含简短的描述。所有的label和input元素都是用了CSS的float属性，值为left。</p>\r\n<h3>第二步:CSS代码</h3>\r\n<p>复制并粘贴以下代码到你页面中的<head>标签中的<style type=”taxt/css”></style>内。(也可以单独存储到CSS文件中)</p>\r\n<blockquote>\r\n<p>body{<br />\r\n font-family:”Lucida Grande”, “Lucida Sans Unicode”, Verdana, Arial, Helvetica, sans-serif;<br />\r\n font-size:12px;<br />\r\n}<br />\r\np, h1, form, button{border:0; margin:0; padding:0;}<br />\r\n.spacer{clear:both; height:1px;}<br />\r\n/* ———– My Form ———– */<br />\r\n.myform{<br />\r\n margin:0 auto;<br />\r\n width:400px;<br />\r\n padding:14px;<br />\r\n}<br />\r\n/* ———– stylized ———– */<br />\r\n#stylized{<br />\r\n border:solid 2px #b7ddf2;<br />\r\n background:#ebf4fb;<br />\r\n}<br />\r\n#stylized h1 {<br />\r\n font-size:14px;<br />\r\n font-weight:bold;<br />\r\n margin-bottom:8px;<br />\r\n}<br />\r\n#stylized p{<br />\r\n font-size:11px;<br />\r\n color:#666666;<br />\r\n margin-bottom:20px;<br />\r\n border-bottom:solid 1px #b7ddf2;<br />\r\n padding-bottom:10px;<br />\r\n}<br />\r\n#stylized label{<br />\r\n display:block;<br />\r\n font-weight:bold;<br />\r\n text-align:right;<br />\r\n width:140px;<br />\r\n float:left;<br />\r\n}<br />\r\n#stylized .small{<br />\r\n color:#666666;<br />\r\n display:block;<br />\r\n font-size:11px;<br />\r\n font-weight:normal;<br />\r\n text-align:right;<br />\r\n width:140px;<br />\r\n}<br />\r\n#stylized input{<br />\r\n float:left;<br />\r\n font-size:12px;<br />\r\n padding:4px 2px;<br />\r\n border:solid 1px #aacfe4;<br />\r\n width:200px;<br />\r\n margin:2px 0 20px 10px;<br />\r\n}<br />\r\n#stylized button{<br />\r\n clear:both;<br />\r\n margin-left:150px;<br />\r\n width:125px;<br />\r\n height:31px;<br />\r\n background:#666666 url(img/button.png) no-repeat;<br />\r\n text-align:center;<br />\r\n line-height:31px;<br />\r\n color:#FFFFFF;<br />\r\n font-size:11px;<br />\r\n font-weight:bold;<br />\r\n}</p>\r\n</blockquote>\r\n<p>以上仅仅是表单布局的一种方式，您也可以按照您的喜好来修改源代码并重新使用它。<br />\r\n如果您对于CSS表单布局有其它不同的或更好的建议的话，欢迎在此留下您宝贵的评论.</p>\r\n<p></p>\r\n<p>原文：<br />\r\n翻译：</p>\r\n <p align="center"> </p>', '', '', ''),
(30, 3, '副标题#e#\r\n <p><strong>什么是css框架 </strong><br />\r\n实际上还是让我们从框架说起吧。<br />\r\n框架就是一个你可以用于你的网站项目的基本的概念上的结构体。<br />\r\n<strong>css框架通常只是一些css文件的集合，这些文件包括基本布局、表单样式、网格或简单结构、以及样式重置。比如：</strong></p>\r\n<ul>\r\n <li>typography.css 基本排版规则</li>\r\n <li>grid.css 基于网格的布局</li>\r\n <li>layout.css 通常的布局</li>\r\n <li>form.css for 表单样式</li>\r\n <li>general.css 更多通用规则</li>\r\n</ul>\r\n<p><strong>下面一起来了解一下各种不同的CSS框架吧:</strong></p>\r\n<h3>1.</h3>\r\n<p><br />\r\n960网格系统是一个通过提供通常使用的尺寸简化网站开发流程的努力的结果，基于960像素的页面宽度。它有两种类型，12和16列，他们可以独立使用或是协同使用。</p>\r\n<h3>2.</h3>\r\n<p><img alt="CSS-框架-WYMstyle" src="http://www.dedecms.com/demoimg/uploads/allimg/c100407/12F60393KXP-S429.gif" /><br />\r\n这个项目的目的是提供一组经过良好测试的模块化的CSS文件，能够用于网站的快速设计。WYMstyle是一组文件，你可以很容易的组合这些文件来快速的创建你的网站的布局。通过提供可靠的、经过良好测试的CSS模块，WYMstyle 力求让每个网站防止枯燥的跨浏览器兼容性测试。</p>\r\n<h3>3.</h3>\r\n<p><img alt="CSS-框架-YAML" src="http://www.dedecms.com/demoimg/uploads/allimg/c100407/12F60393NU60-95S2.gif" /><br />\r\nDirk Jesse的强大的(X)HTML/CSS框架为许多的简单或更复杂的网站项目提供完整的默认模板包。YAML基于网页标准并支持所有现代浏览器。所有的 Internet Explorer的主要渲染漏洞都被解决。YAML 完全支持从5.x到7.0的所有的IE版本。</p>\r\n<h3>4.</h3>\r\n<p><img alt="CSS-框架-YUI" src="http://www.dedecms.com/demoimg/uploads/allimg/c100407/12F60393R0C0-10W59.gif" /><br />\r\n基本的YUI网格CSS提供4种预设的页宽、6种预设模板和再分为2、3、4卷的区块的功能。 这个4KB的文件可提供超过1000中页面布局组合。<br />\r\n有国外作者曾指出YUI Grids CSS中最值得学习的网格布局CSS写法:</p>\r\n<ul>\r\n <li><strong>负Margin技术</strong></li>\r\n <li><strong>使用度量单位em</strong></li>\r\n <li><strong>清除布局的浮动</strong></li>\r\n</ul>\r\n<h3>5.</h3>\r\n<p><img alt="CSS-框架-logicss" src="http://www.dedecms.com/demoimg/uploads/allimg/c100407/12F60393V3940-113034.gif" /><br />\r\nLogic CSS 框架是用来减少开发符合web标准的xHTML布局的时间的一个由CSS文件和PHP程序组成的集合。通常跨浏览器表现行为(不是Meyer的reset 文件或是用“*”)，排版支持文本字体大小调整(使用EMs) 和垂直居中，符合可定义的灵活的布局网格利用。</p>\r\n<h3>6.</h3>\r\n<p><img alt="国外-CSS-框架" src="http://www.dedecms.com/demoimg/uploads/allimg/c100407/12F60393YN20-122140.gif" /><br />\r\nCleverCSS是一个用于css的受Python启发的小型的标记语言，它可用于以整洁的和结构化的方式创建一个样式表。在很多方面它都比CSS2整 洁和强大。与CSS最明显的区别是句法：它基于缩进而且不单调。虽然这显然违反了Python的规则，它依然是组织样式的很好的主意。</p>\r\n<h3>7.</h3>\r\n<p><img alt="CSS-框架-elements" src="http://www.dedecms.com/demoimg/uploads/allimg/c100407/12F60393929230-135c3.gif" /><br />\r\nElements 是一个实用的CSS框架。它是为了帮助设计师更快更高效的来写CSS而建立。Elements 已经超越了仅仅作为一个框架，它有自己的项目工作流。它拥有你完成项目所需的所有东西，这也让你和你的浏览者感到愉悦。阅读 了解更多。</p>\r\n<h3>8.</h3>\r\n<p><img alt="CSS-框架-blueprint" src="http://www.dedecms.com/demoimg/uploads/allimg/c100407/12F60393962160-143012.gif" /><br />\r\nBlueprint 是一个 <strong>CSS 框架</strong>，它的目的是减少你的css开发时间。它提供一个可靠的css基础去创建你的项目，BP由一个易用的网格、合理的布局和一个打印样式。</p>\r\n<p>\r\n <p align="center"> </p>\r\n \r\n \r\n #p#副标题#e#</p>\r\n<h3>9.</h3>\r\n<p><img alt="CSS-框架-schema" src="http://www.dedecms.com/demoimg/uploads/allimg/c100407/12F6039400RF-1511D.gif" /><br />\r\n<strong> Schema</strong> 是一个为了提供在重复的设计任务中必须的CSS和HTML标签而设计的表现层的网页框架设计。 与为每一个新的网站项目从零开始创建HTMl/CSS不同，Schema提供必要的基础来开始并立马让你的设计跑起来。</p>\r\n<h3>10.</h3>\r\n<p><img alt="CSS-框架-emastic" src="http://www.dedecms.com/demoimg/uploads/allimg/c100407/12F6039403N20-1B255.gif" /><br />\r\nEmastic 是一个CSS框架，它有连续的任务：探索陌生的新世界，寻找新生活和新的网站空间，大胆的去CSS框架尚未到达的领域。它是轻量的、在页面宽度上比较人性化，在网格中使用固定和不固定的列宽。 Elastic 用“em”布局。</p>\r\n<h3>11.</h3>\r\n<p><img alt="CSS-框架" src="http://www.dedecms.com/demoimg/uploads/allimg/c100407/12F603940635F-1K2Z.gif" /><br />\r\n* 只能调用单个样式文件<br />\r\n* 主样式需要取得CSS认证(WCAG 1.0)；<br />\r\n* 跨浏览器兼容性—包括Internet Explorer (IE) 5.x for Mac；<br />\r\n* IE Hacks使用独立文件；<br />\r\n* 快速创建模板；<br />\r\n* 少量注释/实例演示，可以节省时间来理解。</p>\r\n<h3>12.</h3>\r\n<p><img alt="CSS-框架-content" src="http://www.dedecms.com/demoimg/uploads/allimg/c100407/12F603940YH0-1U110.gif" /><br />\r\n下一个逻辑步骤就是将这个扩展为CSS框架，允许使用写好并通过测试的组件来快速开发网站。实际上所需的是搞定一套命名习惯和一个灵活的基本模板…</p>\r\n<h3>13.</h3>\r\n<p><img alt="CSS-框架-boilerplate" src="http://www.dedecms.com/demoimg/uploads/allimg/c100407/12F6039412F50-192200.gif" /></p>\r\n<h3>14.</h3>\r\n<p><img alt="CSS-框架-eswat" src="http://www.dedecms.com/demoimg/uploads/allimg/c100407/12F60394164C0-201M8.gif" /><br />\r\nESWAT正在重新整理。如果你是冲着我的网站框架来的，那么你就可以在这里下载。也许你也想看看我的其他项目gmachina、AppleSeed。</p>\r\n<h3>15.</h3>\r\n<p><img alt="CSS-框架-tripoli" src="http://www.dedecms.com/demoimg/uploads/allimg/c100407/12F603941T0-21V27.gif" /><br />\r\nTripoli是一个用于HTML表现的通用css规范。通过重设和重建浏览器标准，Tripoli 为你的网站项目提供了一个标准的、跨浏览器表现的基础。<br />\r\n彬Go会经常更新前端开发/网页设计等相关技术及教程文章，欢迎来及时浏览本博客的最新教程及资源。<br />\r\n英文原文:<br />\r\n翻译原文:</p>\r\n <p align="center"> </p>', '', '', ''),
(31, 3, '<p>今天我们将向大家分享一些为你平淡乏味的图片添加更多趣味情调的简单技巧。使用Photoshop为每个图片添加某种样式虽然可行，但会是相当乏味且困难的长久工作。下面要介绍的CSS技巧将帮助你从痛苦中解脱出来！如果你也有自己独到的CSS技巧，希望能一同分享。</p>\r\n<h3>阴影效果</h3>\r\n<p>通过使用带有一些padding之的背景图来添加阴影效果。</p>\r\n<p style="border: 1px solid rgb(56, 162, 227); padding: 10px 0pt; display: block; background-color: rgb(180, 227, 255); color: rgb(255, 255, 255); text-align: center;"></p>\r\n<p><strong>HTML</strong></p>\r\n<blockquote>\r\n<p><img class=”shadow” src=”sample.jpg” alt=”" /></p>\r\n</blockquote>\r\n<p><strong>CSS</strong></p>\r\n<blockquote>\r\n<p>img.shadow {<br />\r\n background: url(shadow-1000×1000.gif) no-repeat right bottom;<br />\r\n padding: 5px 10px 10px 5px;<br />\r\n}</p>\r\n</blockquote>\r\n<h3>双边框效果</h3>\r\n<p>这应该是目前最常见的技巧，我们通过以下方式创建说边框。</p>\r\n<p style="border: 1px solid rgb(56, 162, 227); padding: 10px 0pt; display: block; background-color: rgb(180, 227, 255); color: rgb(255, 255, 255); text-align: center;"></p>\r\n<p><strong>HTML</strong></p>\r\n<blockquote>\r\n<p><img class="double-border" src="sample.jpg" alt="" /></p>\r\n</blockquote>\r\n<p><strong>CSS</strong></p>\r\n<blockquote>\r\n<p>img.double-border {<br />\r\nborder: 5px solid #ddd;<br />\r\npadding: 5px; /*Inner border size*/<br />\r\nbackground: #fff; /*Inner border color*/<br />\r\n}</p>\r\n</blockquote>\r\n<h3>图片外框效果</h3>\r\n<p>上有最好的讲解，这个效果是基于在上面层叠一个有透明度的图片的技术。至于IE6的PNG透明度问题，可以参考。</p>\r\n<p style="border: 1px solid rgb(56, 162, 227); padding: 10px 0pt; display: block; background-color: rgb(180, 227, 255); color: rgb(255, 255, 255); text-align: center;"></p>\r\n<p><strong>HTML</strong></p>\r\n<blockquote>\r\n<p><div class="frame-block"><br />\r\n<span> </span></p>\r\n<p><img src="sample.jpg" alt="" /><br />\r\n</div></p>\r\n</blockquote>\r\n<p><strong>CSS</strong></p>\r\n<blockquote>\r\n<p>.frame-block {<br />\r\nposition: relative;<br />\r\ndisplay: block;<br />\r\nheight:335px;<br />\r\nwidth: 575px;<br />\r\n}<br />\r\n.frame-block span {<br />\r\nbackground: url(frame.png) no-repeat center top;<br />\r\nheight:335px;<br />\r\nwidth: 575px;<br />\r\ndisplay: block;<br />\r\nposition: absolute;<br />\r\n}</p>\r\n</blockquote>\r\n<h3>水印效果</h3>\r\n<p>你可以通过降低主图片的透明度来让背景图片透过来显示的方法添加水印</p>\r\n<p style="border: 1px solid rgb(56, 162, 227); padding: 10px 0pt; display: block; background-color: rgb(180, 227, 255); color: rgb(255, 255, 255); text-align: center;"></p>\r\n<p><strong>HTML</strong></p>\r\n<blockquote>\r\n<p><div class="transp-block"><br />\r\n<img class="transparent" src="sample.jpg" alt="" /><br />\r\n</div></p>\r\n</blockquote>\r\n<p><strong>CSS</strong></p>\r\n<blockquote>\r\n<p>.transp-block {<br />\r\nbackground: #000 url(watermark.jpg) no-repeat;<br />\r\nwidth: 575px;<br />\r\nheight: 335px;<br />\r\n}<br />\r\nimg.transparent {<br />\r\nfilter:alpha(opacity=75);<br />\r\nopacity:.75;<br />\r\n}</p>\r\n</blockquote>\r\n<h3>为图片添加说明文字</h3>\r\n<p>使用绝对定位和透明度的设置来添加灵活的说明。</p>\r\n<p style="border: 1px solid rgb(56, 162, 227); padding: 10px 0pt; display: block; background-color: rgb(180, 227, 255); color: rgb(255, 255, 255); text-align: center;"></p>\r\n<p><strong>HTML</strong></p>\r\n<blockquote>\r\n<p><div class="img-desc"><br />\r\n<img src="sample.jpg" alt="" /><br />\r\n<cite>Salone del mobile Milano, April 2008 - Peeta</cite><br />\r\n</div></p>\r\n</blockquote>\r\n<p><strong>CSS</strong></p>\r\n<blockquote>\r\n<p>.img-desc {<br />\r\nposition: relative;<br />\r\ndisplay: block;<br />\r\nheight:335px;<br />\r\nwidth: 575px;<br />\r\n}<br />\r\n.img-desc cite {<br />\r\nbackground: #111;<br />\r\nfilter:alpha(opacity=55);<br />\r\nopacity:.55;<br />\r\ncolor: #fff;<br />\r\nposition: absolute;<br />\r\nbottom: 0;<br />\r\nleft: 0;<br />\r\nwidth: 555px;<br />\r\npadding: 10px;<br />\r\nborder-top: 1px solid #999;<br />\r\n}</p>\r\n</blockquote>\r\n<p>原文:<br />\r\n翻译:</p>\r\n\r\n <p align="center"> </p>', '', '', ''),
(32, 3, '副标题#e#\r\n <p>CSS的学习过程既可以说简单又可以说是复杂。CSS的语法比较简单，但CSS的应用中有一些概念(一可以说是原理)还是很难掌握的。今天暴风彬彬 向你推荐20个出色的CSS技术类(英语)网站帮你更好的理解和掌握CSS，其中包括各种各样的网站，从博客到清单风格列表甚至网站，它们都侧重于研究同 一个主题，那就是CSS。</p>\r\n<h3>1. </h3>\r\n<p><img height="180" width="500" alt="alistapart-css教程" src="http://www.dedecms.com/demoimg/uploads/allimg/c100407/12F60394543310-14b8.png" title="alistapart-css教程" class="alignnone size-medium wp-image-1757" /><br />\r\nA List Apart，学习网页设计和最佳实践的首选网站。这个网站从1999年就开始发表关于CSS的文章，其中大部分文章都是面向那些更注重符合标准设计的中级到高级设计师。</p>\r\n<h3>2. </h3>\r\n<p><img height="180" width="500" alt="csshelppile-CSS技巧-教程" src="http://www.dedecms.com/demoimg/uploads/allimg/c100407/12F603945aK0-22b2.png" title="csshelppile-CSS技巧-教程" class="alignnone size-medium wp-image-1758" /><br />\r\nCSS Help Pile汇集了大量的CSS资源、技巧和教程。这个网站适合各种水平的设计师学习。网站专门有、和这样的分类。</p>\r\n<h3>3. </h3>\r\n<p><img height="180" width="500" alt="" src="http://www.dedecms.com/demoimg/uploads/allimg/c100407/12F60394F11Z-3H54.png" title="css-basics-CSS教程" class="alignnone size-medium wp-image-1759" /><br />\r\nCSS Basics可以当成一书来看，用了18个章节来传授基本的CSS概念，对初学者相当有帮助。还有就是所有18个章节，提供打印或PDF格式下载。</p>\r\n<h3>4. </h3>\r\n<p><img height="180" width="500" alt="CSS教程" src="http://www.dedecms.com/demoimg/uploads/allimg/c100407/12F60394J1110-43G1.jpg" title="CSS教程" class="alignnone size-medium wp-image-1760" /><br />\r\nHoly CSS Zeldman是关于基于标准的、工具、布局相关链接的收集。</p>\r\n<h3>5. </h3>\r\n<p><img height="180" width="500" alt="CSS-布局-教程" src="http://www.dedecms.com/demoimg/uploads/allimg/c100407/12F60394O5540-54293.jpg" title="CSS-布局-教程" class="alignnone size-medium wp-image-1761" /><br />\r\n这里主要是收集Eric Meyer (著名的开发者)的作品，在css/edge和CSS reference等页面可以找到一些相关的资源。</p>\r\n<h3>6. </h3>\r\n<p><img height="180" width="500" alt="CSS-技巧" src="http://www.dedecms.com/demoimg/uploads/allimg/c100407/12F60394T5H0-B551.jpg" title="CSS-技巧" class="alignnone size-medium wp-image-1762" /><br />\r\n456 Berea Street下有一个CSS分类，里面有超过300篇文章，这些文章有教如果放置图片，有些是说CSS技巧。</p>\r\n<h3>7. </h3>\r\n<p><img height="180" width="500" alt="position-is-everything" src="http://www.dedecms.com/demoimg/uploads/allimg/c100407/12F60394Z13Z-M562.jpg" title="position-is-everything" class="alignnone size-medium wp-image-1763" /><br />\r\n在Position Is Everything，你能学到大量CSS的高级应用技巧，Position Is Everything关注着如何解决各种浏览器兼容问题的Bug，并体重各种解决浏览器Bug的CSS解决方案。在这里，你能学到关于和。</p>\r\n<h3>8. </h3>\r\n<p><img height="180" width="500" alt="html-dog-CSS教程" src="http://www.dedecms.com/demoimg/uploads/allimg/c100407/12F603949505F-X111.png" title="html-dog-CSS教程" class="alignnone size-medium wp-image-1764" /><br />\r\nHTML Dog致力于教授最佳的XHTML与CSS布局，分为初级，中级，高级三个级别。英语不好的朋友可以看中文翻译版的.</p>\r\n<h3>9. </h3>\r\n<p><img height="180" width="500" alt="CSS-布局" src="http://www.dedecms.com/demoimg/uploads/allimg/c100407/12F60394b9640-94050.png" title="CSS-布局" class="alignnone size-medium wp-image-1765" /><br />\r\n如果使用CSS定位是一个棘手的问题，这里有10步，看能不能帮你解决。</p>\r\n<h3>10. </h3>\r\n<p><img height="180" width="500" alt="CSS-学习-网站" src="http://www.dedecms.com/demoimg/uploads/allimg/c100407/12F6039503C50-10G91.jpg" title="CSS-学习-网站" class="alignnone size-medium wp-image-1766" /><br />\r\nAndy Budd有着一系列CSS/web标准的有用链接，以帮助你找到有用的资料。</p>\r\n<p>\r\n <p align="center"> </p>\r\n \r\n \r\n #p#副标题#e#</p>\r\n<h3>11.</h3>\r\n<p><img height="180" width="500" alt="" src="http://www.dedecms.com/demoimg/uploads/allimg/c100407/12F60395104160-11W24.png" title="w3c标准-教程" class="alignnone size-medium wp-image-1767" /><br />\r\nW3CSchools有一个CSS部分，内容涵盖了初级到高级的CSS主题。</p>\r\n<h3>12.</h3>\r\n<p><img height="180" width="500" alt="CSS禅意花园" src="http://www.dedecms.com/demoimg/uploads/allimg/c100407/12F60395140240-125c9.jpg" title="css_zen_garden" class="alignnone size-medium wp-image-1768" /><br />\r\ncss Zen Garden给我们展示了CSS是怎样工作的，使用相同的HTML文件，设计师提交的外部样式来美化这个文件。用Web Developer Tool就可以检查CSS是如何进行布局工作的。这个网站在7个最好的网上CSS资源里也有介绍</p>\r\n<h3>13.</h3>\r\n<p><img height="180" width="500" alt="CSS-实例" src="http://www.dedecms.com/demoimg/uploads/allimg/c100407/12F603951N930-135T4.png" title="CSS-实例" class="alignnone size-medium wp-image-1769" /><br />\r\nMaxDesign拥有Russ Weakley的一套CSS精彩教程，在Listmatic里，教你使用CSS格式化列表，在Floatutorial里，介绍floating元素的知识。</p>\r\n<h3>14.</h3>\r\n<p><img height="180" width="500" alt="CSS-网站推荐" src="http://www.dedecms.com/demoimg/uploads/allimg/c100407/12F60395220J0-14U47.png" title="CSS-网站推荐" class="alignnone size-medium wp-image-1770" /><br />\r\nCSSEasy.com网站的口号是”学习CSS的时髦方法”，拥有丰富的经验及创意分享，让我们更好地了解CSS。这个网站的迟早也会派上用场。</p>\r\n<h3>15. </h3>\r\n<p><img height="180" width="500" alt="CSS-教程" src="http://www.dedecms.com/demoimg/uploads/allimg/c100407/12F603952EB0-154307.png" title="CSS-教程" class="alignnone size-medium wp-image-1771" /><br />\r\nCSS-Discuss是一个CSS爱好者社区，而 CSS-Discuss Wiki是关于CSS的应用收集。</p>\r\n<h3>16.</h3>\r\n<p><img height="180" width="500" alt="网页设计-CSS" src="http://www.dedecms.com/demoimg/uploads/allimg/c100407/12F60395332I0-164B4.png" title="网页设计-CSS" class="alignnone size-medium wp-image-1772" /><br />\r\nWeb Design from Scratch有一章节是关于CSS的，涵盖了CSS的基本概念。 其中的Introduction to CSS对初学者很有帮助。</p>\r\n<h3>17.</h3>\r\n<p><img height="180" width="500" alt="css_技巧" src="http://www.dedecms.com/demoimg/uploads/allimg/c100407/12F60395410150-1J327.jpg" title="css_技巧" class="alignnone size-medium wp-image-1773" /><br />\r\nCSS-Tricks是一个专注CSS的博客</p>\r\n<h3>18.</h3>\r\n<p><img height="180" width="500" alt="css" src="http://www.dedecms.com/demoimg/uploads/allimg/c100407/12F60395460230-1T253.png" title="css" class="alignnone size-medium wp-image-1774" /><br />\r\nThe CSS tag on Delicious是关于优秀CSS设计的链接收集，亮点就是让我们知道哪些好东西在被人看。</p>\r\n<h3>19. </h3>\r\n<p><img height="180" width="500" alt="css-教程" src="http://www.dedecms.com/demoimg/uploads/allimg/c100407/12F60395500T0-1c215.png" title="css-教程" class="alignnone size-medium wp-image-1775" /><br />\r\nSitePoint有一个CSS部分，专门讨论入门水平的CSS主题</p>\r\n<h3>20. </h3>\r\n<p><img height="180" width="500" alt="css_dog" src="http://www.dedecms.com/demoimg/uploads/allimg/c100407/12F6039554520-203041.png" title="css_dog" class="alignnone size-medium wp-image-1776" /><br />\r\nCSSDog有一部分为初学者与高级开发者设计的，其中的开发经验及参考，个人认为是最有价值的部分。</p>\r\n<p>英文原文：</p>\r\n <p align="center"> </p>', '', '', '');
INSERT INTO `#@__addonarticle` (`aid`, `typeid`, `body`, `redirecturl`, `templet`, `userip`) VALUES
(33, 3, '<p>CSS是众所周知且应用广泛的网站样式语言，在它的版本三(CSS3)计划中，新增了一些能够节省时间的特性。尽管只有当前最新了浏览器版本才能支持这些 效果，但了解它们还是必须且很有趣味性的。暴风彬彬将在这篇文章向大家展示CSS中的5个有趣的新技术:圆角、个别圆角、不透明度、阴影和调整元素大小。</p>\r\n<h3>1：基本标记</h3>\r\n<p><img height="387" width="500" src="http://www.dedecms.com/demoimg/uploads/allimg/c100407/12F60395AI60-21A37.png" alt="css3-教程" title="css3-教程" class="alignnone size-full wp-image-2156" /><br />\r\n在我们开始这个教程之前，先来创建整个教程都要使用的基本标记。<br />\r\n我们的xHTML需要一下div元素:</p>\r\n<ul>\r\n <li>#round, 使用CSS3代码实现圆角.</li>\r\n <li>#indie, 应用个别的几个圆角.</li>\r\n <li>#opacity, 展示新的CSS3实现不透明度的方式.</li>\r\n <li>#shadow,展示不使用的情况下，使用CSS3来实现阴影效果.</li>\r\n <li>#resize, 展示如何使用某种CSS来实现重设大小的效果.</li>\r\n</ul>\r\n<p>综上所述，我们的xHTML应该是这样的:</p>\r\n<blockquote>\r\n<p><!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”><br />\r\n<html xmlns=”http://www.w3.org/1999/xhtml”><br />\r\n<head><br />\r\n<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /><br />\r\n<title>An Introduction to CSS3; A Nettuts Tutorial</title><br />\r\n<link href=”style.css” rel=”stylesheet” type=”text/css” /><br />\r\n</head><br />\r\n<body><br />\r\n<div id=”wrapper”><br />\r\n<div id=”round”> </div><br />\r\n<div id=”indie”> </div><br />\r\n<div id=”opacity”> </div><br />\r\n<div id=”shadow”> </div><br />\r\n<div id=”resize”><br />\r\n<img src=”image.jpg” alt=”resizable image” width=”200″ height=”200″><br />\r\n</div><br />\r\n</div><br />\r\n</body><br />\r\n</html></p>\r\n</blockquote>\r\n<p>下面来创建基本CSS文件:</p>\r\n<blockquote>\r\n<p>body {<br />\r\nbackground-color: #fff;<br />\r\n}<br />\r\n#wrapper {<br />\r\nwidth: 100%;<br />\r\nheight: 100%;<br />\r\n}<br />\r\ndiv {<br />\r\nwidth: 300px;<br />\r\nheight: 300px;<br />\r\nmargin: 10px;<br />\r\nfloat: left;<br />\r\n}</p>\r\n</blockquote>\r\n<p>正如你上面看到的，我们给每个div元素300px的宽和高，并让它们向左浮动，整个页面的div都留给我们在后面的工作中添加样式。</p>\r\n<h3>2:圆角</h3>\r\n<p><img height="249" width="498" src="http://www.dedecms.com/demoimg/uploads/allimg/c100407/12F60395J4210-2225Z.png" alt="css3-特性" title="css3-特性" class="alignnone size-full wp-image-2157" /><br />\r\n目前而言，创建圆角的方法有很多，但都很麻烦。最常用的方法:首先，你要创建圆角的图片；然后，你要创建很多html元素并使用背景图像的方式显示圆角。具体流程你我都很清楚。</p>\r\n<p>这个问题将在CSS3中很简单的解决掉，那就是叫做“border-radius”的属性。我们先创建一个黑色的div元素并给他设置黑色的边框。边框就是要实现“border-radius”属性效果的前提。<br />\r\n像这样:</p>\r\n<blockquote>\r\n<p>#round {<br />\r\nbackground-color: #000;<br />\r\nborder: 1px solid #000;<br />\r\n}</p>\r\n</blockquote>\r\n<p>现在你已经创建了div元素，它看起来和你预期的样子一样，300px款和高有楞有角且是黑色的。下面我们来添加实现圆角的代码，它是如此的简洁，仅仅需要两行代码。</p>\r\n<blockquote>\r\n<p>#round {<br />\r\nbackground-color: #000;<br />\r\nborder: 1px solid #000;<br />\r\n-moz-border-radius: 10px;<br />\r\n-webkit-border-radius: 10px;<br />\r\n}</p>\r\n</blockquote>\r\n<p>在这里，我们添加了两行类似的代码，-moz-适用于Firefox浏览器，而-webkit-则是用于Safari/Chrome浏览器。<br />\r\n注:目前为止IE浏览器不支持border-radius属性，所以如果想让IE也有圆角效果，那么就要单独添加圆角了。<br />\r\nborder-radius这个属性直译过来是边框半径的意思，就如同一样，它的值越大，圆角也就越大。</p>\r\n<h3>3:个别的圆角</h3>\r\n<p><img height="250" width="500" src="http://www.dedecms.com/demoimg/uploads/allimg/c100407/12F60395Ma20-231438.png" alt="css3-技巧" title="css3-技巧" class="alignnone size-full wp-image-2158" /><br />\r\n如果按照过去的习惯做法，会浪费你很多时间，现在CSS3能快速解决!<br />\r\n我们现在只想让div的右上和右下是圆角，那么仅需稍作修改:</p>\r\n<blockquote>\r\n<p>#indie {<br />\r\nbackground-color: #000;<br />\r\nborder: 1px solid #000;<br />\r\n-moz-border-radius-topright: 10px;<br />\r\n-moz-border-radius-bottomright: 10px;<br />\r\n-webkit-border-top-left-radius: 10px;<br />\r\n-webkit-border-bottom-left-radius: 10px;<br />\r\n}</p>\r\n</blockquote>\r\n<p>试想一下这种做法会用在网页中的什么元素呢？对！就是标签式的导航按钮！</p>\r\n<h3>4:以CSS3的方式修改不透明度</h3>\r\n<p><img height="250" width="500" src="http://www.dedecms.com/demoimg/uploads/allimg/c100407/12F60395T4530-24O38.png" alt="css3-教程" title="css3-教程" class="alignnone size-full wp-image-2159" /><br />\r\n现在你可以按惯例编写几行代码来实现不透明度的效果(hack)。不过CSS3简化了这个流程。<br />\r\n这行代码很好记，仅仅是 “opacity: value;”:</p>\r\n<blockquote>\r\n<p>#opacity {<br />\r\nbackground-color: #000;<br />\r\nopacity: 0.3;<br />\r\n}</p>\r\n</blockquote>\r\n<h3>5:阴影效果</h3>\r\n<p><img height="250" width="500" src="http://www.dedecms.com/demoimg/uploads/allimg/c100407/12F60395Y9D0-255107.png" alt="css3-教程" title="css3-教程" class="alignnone size-full wp-image-2160" /><br />\r\n实现阴影也有很多方法，最常用的就是使用制作成阴影图片，然后应用到背景属性中。但CSS3让你的工作更有效率，不幸的是，目前只有Safari和Chrome支持这个新特性。<br />\r\n仅仅需要一行代码，不过它有4个不同的值:</p>\r\n<blockquote>\r\n<p>-webkit-box-shadow: 3px 5px 10px #ccc;</p>\r\n</blockquote>\r\n<p>下 面我来解释一下这四个值都代表什么，第一个3px是指定阴影与div元素之间的水平(横向)距离，第二个5px指的是阴影与div之间的垂直(纵向)距 离，第三个10px指的是阴影的模糊度(类似于photoshop中的羽化)，值越大越细腻。最后的值不说大家也知道，就是阴影的颜色。<br />\r\n我们最终阴影效果代码；</p>\r\n<blockquote>\r\n<p>#shadow {<br />\r\nbackground-color: #fff;<br />\r\nborder: 1px solid #000;<br />\r\n-webkit-box-shadow: 3px 5px 10px #ccc;<br />\r\n}</p>\r\n</blockquote>\r\n<p>正如你看到的，我们个这个div设置了白色的背景，黑色的边框和亮灰色的阴影。</p>\r\n<h3>6:调整大小</h3>\r\n<p><img height="250" width="500" src="http://www.dedecms.com/demoimg/uploads/allimg/c100407/12F6039595410-262108.png" alt="css3-教程" title="css3-教程" class="alignnone size-full wp-image-2161" /><br />\r\n在最新版本的CSS中，调整元素的尺寸已经成为可能（不过目前仅Safari支持）</p>\r\n<p>使 用这个代码以后，我们的元素的右下角会出现一个小三角以提示用户这个元素是可以调整尺寸的。代码依然很简单，可以说仅需要一行代码，当然你还可以配合使用 一些曾经使用过的属性，比如”max-width”, “max-height”, “min-width”和 “min-height”.</p>\r\n<blockquote>\r\n<p>#resize {<br />\r\nbackground-color: #fff;<br />\r\nborder: 1px solid #000;<br />\r\nresize: both;<br />\r\noverflow: auto;<br />\r\n}</p>\r\n</blockquote>\r\n<p>在这里主要说一下resize和overflow属性，resize:both;的意思就是所有边都可以调整尺寸，它的值还有<strong>horizontal</strong>和<strong>vertical</strong>，顾名思义，就是横向和纵向。而overflow是为了配合resize工作的，在这里使用auto.</p>\r\n<h3>总结</h3>\r\n<p><img height="387" width="500" src="http://www.dedecms.com/demoimg/uploads/allimg/c100407/12F60395AI60-21A37.png" alt="css3-教程" title="css3-教程" class="alignnone size-full wp-image-2156" /><br />\r\n怎 么样，你在这篇文章中有没有什么收获呢？虽然现在仅有很少数的浏览器支持CSS3，但不可否认的是CSS3的确会为我们的工作节省更多的时间。如果你对渐 进增强有所了解和认识的话，我想你会欣然接受CSS3这个强大的新版本的。不要再把你的时间都花在IE6上了，那样你只能会是过时的前端开发工程师。</p>\r\n<p>英文原文:<br />\r\n翻译原文:</p>\r\n <p align="center"> </p>', '', '', ''),
(34, 4, '<p>关于英文的写作有一本十分著名的书，（风格要素），编写程序也有一本（编程风格要素）。证明了在某种程度上，编写程序其实就是语文写作，清晰的风格对程序的质量有着重要的影响。草率含混的风格会隐蔽程序真性。</p><p>作为JavaScript Guru, 提出了自己对JavaScript风格的创见（，）。</p><p>第一部分主要讨论JavaScript语言本身，包括：</p><ul><li><strong>淘汰过时的构建。</strong> <p>讨论了在HTML页面引入JavaScript的方式。经典的写法是：</p><pre><code><script language=javascript><!--\r\n--></script></code></pre><p><code><font face="NSimsun">language</font></code>并不是W3C所认同的标准，建议使用的是<code><font face="NSimsun">type</font></code>, 但作为<code><font face="NSimsun">type</font></code>值的MIME type并没有标准化（有时是<code><font face="NSimsun">text/javascript</font></code>, 有时是application/ecmascript），但目前所有的浏览器都是使用JavaScript作为默认的脚本语言，因此仅仅些<font face="NSimsun"><code><script>就是安全的。随着NetScape 3的淘汰，</code><code><-- --></code></font>也不是必要的了。</p><p>（注：这个东西Web标准社区也有自己的看法，并认为应该写<code><font face="NSimsun">type="text/javascript"</font></code>，我也赞成。） </p></li><li><strong>在结构中始终使用区块。</strong> <p>莫偷懒，省略区块（即<code><font face="NSimsun">{ }</font></code>）会引发不经意的错误和麻烦。即使只有一句，也老老实实写上：</p><pre><code>if (expression) { ... }</code></pre></li><li><strong>避免在表达式中进行赋值。</strong>虽然可以使代码紧凑，但会让控制流程难于理解。 </li><li><strong>使用对象扩充。</strong>在不需要构造函数的对象中，不如先创建一个空对象，然后扩充它。 </li><li><strong>使用通用库。</strong>注意提高代码的重用。 </li></ul><p>第二部分主要讲的是一些使程序更清晰和简洁的习惯用法：</p><ul><li><strong>使用<code><font face="NSimsun">==</font></code>得当心强类型。</strong><code><font face="NSimsun">1 == true</font></code>是真，但<code><font face="NSimsun">1 === true</font></code>却为假。 </li><li><strong>使用<code><font face="NSimsun">?:</font></code>运算符选择两值之一。</strong>在这种操作中，三元运算符为此而生。 </li><li><strong>永远不要使用隐含的全局变量。</strong>请记得声明变量时加上<code><font face="NSimsun">var</font></code>. </li><li><strong>不要使用<code><font face="NSimsun">?:</font></code>来选择两种行为的其一。</strong>写作<code><font face="NSimsun">p.style.backgroundColor = z ? ''#fff'' : ''#989898'';</font></code>而不是<code><font face="NSimsun">(z == 0) ? p.style.backgroundColor = ''#fff'' : p.style.backgroundColor = ''#989898'';</font></code>。 </li><li><strong>使用<code><font face="NSimsun">||</font></code>来指定一个默认值。</strong>最典型的莫过于处理事件参数了：<code><font face="NSimsun">var e = e || event;</font></code>。 </li><li><strong>全局变量是邪恶的。</strong> </li><li><strong>使用内部函数来避免全局变量。</strong> </li></ul><p>这些风格是Crock在2005年提出的，现在有些已经深入人心（如不要使用全局变量），因而也没有必要多做解释了。如果你有所疑惑，不如详细看看这两篇风格文章，里面有大量的代码来举证这些风格的重要性。</p><p><strong>更新：</strong>也不错。 </p>\r\n <p align="center"> </p>', '', '', ''),
(35, 4, '<p>软件开发中一个比较棘手的内容是使用时间和日期值；似乎每种语言或者每种平台都有自己的格式。在Web开发过程中，你可以使用服务器端的代码来操控日期，你也可以使用JavaScript的日期（Date）对象来实现同样的目的。在今天的专栏里，我们将仔细看看这个对象。</p><p><strong>使用日期</strong></p><p>在JavaScript里使用时间和日期值非常简单。这要从创建日期对象的一个实例开始：</p>var d = new Date(); <p>这会使用当前的日期和时间在变量d里返回一个日期对象的实例。这个日期对象包括多个用于访问和操控其值的方法和属性。下面的列表列出了用于访问日期值的方法：</p><ul><li><strong>getDate()</strong>：返回月份里的日期。 </li><li><strong>getDay()</strong><strong>：</strong>返回星期几。每周从星期六开始（0－6）。 </li><li><strong>getFullYear()</strong>：返回四位数的年份。 </li><li><strong>getMonth()</strong>：返回月份。 </li><li><strong>getYear()</strong>：返回两位数的年份。 </li><li><strong>getUTCDate()</strong>：根据协调世界时（UTC）返回月份里的日期。 </li><li><strong>getUTCMonth()</strong>：根据协调世界时（0－11）返回月份。 </li><li><strong>getUTCFullYear()</strong>：根据协调世界时返回四位数的年份。 </li></ul><p><strong>注：</strong>维基百科全书（Wikipedia）将协调世界时定义为一种高精度的原子时间标准，它大约相当于世界时（UT）。</p><p>关于JavaScript和日期需要注意的一点是，它使用从1970年1月1日午夜起的毫秒数来保存日期。这叫做历元（epoch），任何在这个日期之前的日期和时间都是不被允许的。</p><p>正如<strong>Listing A</strong>里说明的，使用前面一个列表里的方法是很简单明了的。你需要注意的是日期和星期中的天的值是从零开始的，所以需要向它们添加一个值以显示它们真正的值。你可以很容易就使用一个数组来显示星期几。<strong>列表B</strong>里是JavaScript代码。</p><p>你没有被限制只使用当前的日期。日期对象可以用传递给它的值初始化，就像下面这样：</p><p>var d = new Date("date value");</p><p>利用这种方式，我们可以修改前面的例子来使用特定的日期。<strong>列表C</strong>代表了一种发现给定值的周日期的简单方法。代码会生成下面的结果：</p><p>Today is: Wednesday 4/15/1979<br />UTC is: Wednesday 4/15/1979 </p><p>事实上，创建日期对象实例的方式有四种：</p><p>var d = new Date();<br />var d = new Date(''July 4, 1976'');<br />var d = new Date(7, 4, 1976);<br />var d = new Date(7, 4, 1976, 12,00,00); </p><p>我们已经讲了前两个（要注意的是可能会用到单引号或者圆括号）。最后两个按照下面的格式使用了单独的整数参数（时间是可选的）：</p><p>var d = new Date(month, day, year, hour, minutes, seconds); </p><p>填充日期对象的另外一种方式是利用setDate方法。它提供了一种重置日期对象的值或者初始化它的方式，但是这要求有一个真正的JavaScript日期对象：</p><p>Var d1 = new Date();<br />var d2 = new Date("7/4/1976");<br />d1.setDate(d2.getDate()); </p><p>填充日期对象的各种属性的固定方法还有很多，但是在讨论它们之前我们先来看看时间吧。</p><p>除了日期组件，日期对象也保存了时间信息。下面的方法能够访问到日期对象的时间信息：</p><ul><li><strong>getHours()</strong>：返回时间的小时部分。 </li><li><strong>getMinutes()</strong>：返回时间的分钟部分。 </li><li><strong>getSeconds()</strong>：返回时间的秒部分。 </li><li><strong>getMilliseconds()</strong>：返回时间的毫秒部分。 </li><li><strong>getTime()</strong>：返回自从1970年1月1日午夜以来的毫秒数。 </li><li><strong>getTimezoneOffset()</strong>：返回本地时间与格里尼治标准时间（GMT）之间的分钟差。 </li><li><strong>getUTCHours()</strong>：根据协调世界时返回时间的小时部分。 </li><li><strong>getUTCMinutes()</strong>：根据协调世界时返回时间的分钟部分。 </li><li><strong>getUTCSeconds()</strong>：根据协调世界时返回时间的秒部分。 </li><li><strong>getUTCMilliseconds()</strong>：根据协调世界时返回时间的毫秒部分。 </li></ul><p>\r\n <p align="center"> </p>', '', '', ''),
(36, 4, '<p>像JSP、ASP.NET、ColdFusion这样的Web开发平台提供了大量强大服务器端开发选项。但是，它们并没有否定用JavaScript进行客户端的Web开发。</p><p>JavaScript同时提供了逻辑和用户接口功能，减轻了服务器端处理的负载。尽管我们已经使用它有多年了，但是它的开发工具还是有点落后。现在就让我们仔细看看JavaScript的开发和调试选项。</p><p><strong>开发工具</strong></p><p>如果你习惯使用诸如Visual Studio或者NetBeans这样的集成开发环境（IDE），那么你就一定很熟悉各种调试选项，包括代码单步调试、设置断点，以及监视变量等。在监视代码执行或者追踪错误时，这些都是不可或缺的工具。不幸的是，这些工具在JavaScript开发人员中并不是十分普及。</p><p><strong>调试</strong></p><p>应用程序开发中的一个重要步骤是追踪脚本或者代码中的错误。这包括隔离代码段，一行一行地分析它们。在使用JavaScript的时候，你可以使用在开发工具大发展之前用过的方法。</p><p>在这种情况下，最常用的一种JavaScript函数是警报信息框。你可以用它来检查保存在变量／对象里的值，并与循环一起使用来查看对象的内容。</p><p>举个例子，<strong>列表A</strong>里的HTML代码没有按照预期的效果执行：</p><html><head><br /><title>JS Test</title><br /><script language="JavaScript"><br />function validate() {<br />var doc = document.forms[0];<br />var flag = true;<br />if (doc.fullName.value = '''')<br />flag = false;<br />if (doc.contactNumber.value = '''')<br />flag = false;<br />if (flag) doc.submit()<br />else alert(''Enter values before submitting.'');<br />}<br /></script></head><br /><body><br /><form id="frmTest"><br />Name: <input name="fullName" type="text" /><br /><br />Address: <input name="contactNumber" type="text" /><br /><br /><input type="button" value="Submit" onclick="validate();" /><br /></form></body></html> <p>按理说，它会在表单被真的提交之前验证在两个文本字段里输入的值。</p><p>这个表单总是不管输入的值是什么就被提交，所以我们可以使用警报语句在脚本执行期间检查值的内容。<strong>列表B</strong>里的脚本就使用了警报语句来监视变量的值：</p><p><html><head><br /><title>JS Test</title><br /><script language="JavaScript"><br />function validate() {<br />var doc = document.forms[0];<br />var flag = true;<br />alert(''Script starting, flag = '' + flag);<br />alert(''Script starting, Full name = '' + doc.fullName.value);<br />alert(''Script starting, Contact number = '' + doc.contactNumber.value);<br />if (doc.fullName.value = '''') {<br />alert(''First check, Full Name is empty.'');<br />flag = false;<br />}<br />if (doc.contactNumber.value = '''') {<br />alert(''Second check, Contact Number is empty.'');<br />flag = false;<br />}<br />if (flag) {<br />alert(''Validation successful, document will be submitted.'');<br />doc.submit()<br />} else {<br />alert(''Enter values before submitting.'');<br />} }<br /></script></head><br /><body><form id="frmTest"><br />Name: <input name="fullName" type="text" /><br /><br />Address: <input name="contactNumber" type="text" /><br /><br /><input type="button" value="Submit" onclick="validate();" /><br /></form></body></html> </p><p>\r\n <p align="center"> </p>', '', '', ''),
(37, 4, ' 使用AJAX的十大理由： <br /><br /> 10、XAML,XUL,XForms...等等。 <br /><br /> 9、服务端技术的不确定性。 <br /><br /> 8、Web2.0。 <br /><br /> 7、被软件工业领袖们强势采用。 <br /><br /> 6、和Flex和Flash等技术的很好的集成。 <br /><br /> 5、边际成本低。 <br /><br /> 4、能使常规的Web应用受益。 <br /><br /> 3、跨浏览器和跨平台。 <br /><br /> 2、以可用性和用户体验为王。 <br /><br /> 1、基于公开标准。 <br /><br /> 十大理由第一名：公开标准 <br /><br /> 让我们从第一条开始，AJAX技术是基于被各大浏览器和平台都支持的公开标准的技术。这意味着该技术不怕技术提供商的技术封锁。组成AJAX技术的大多数技术都能放心的使用很多年，而那些不是热点的、最新的和未经考验的技术只能使用一段时间。现在，对于绝大多数的用户和企业来说，浏览器是一个可信任的应用平台，这在五年前就不是个问题了。对于AJAX来说，FIREFOX浏览器的基础Mozilla1.0的发布并且支持XMLHTTPRequest对象是一个转折点。这种允许异步数据交换的技术好多年前就被IE浏览器支持了。这种支持和FIREFOX浏览器的大量被采用真正的使人们理解了跨浏览器的富Internet应用成为了可能。 <br /><br /> 1)JavaScriptorECMAScript(StandardECMA-262)：一个有趣的事情是，Javascript是经过长时间后才成为被人们接受的技术，长时间以来，很多公司采用非Javascript技术的方针，幸运的是，这种状况被迅速的改变。 <br /><br /> http://www.ecma-international.org/publications/standards/Ecma-262.htm <br /><br /> 2)XML：是一个来自W3C的、被广泛应用的标准。 <br /><br /> http://www.w3.org/XML/ <br /><br /> 3)HTML：http://www.w3.org/MarkUp/ <br /><br /> 4)CSS：http://www.w3.org/Style/CSS/ <br /><br /> 5)XMLHTTPRequestObject：被InternetExplorer、Mozilla-based、Safari和Opera浏览器支持。 <br /><br /> 十大理由第二名：可用性 <br /><br /> 开发人员和设计人员开始认识到不仅大型的用户体验在市场上是成功的，而且也认识到这样体验是怎么来影响用户的开销的。基于AJAX技术的google地图比传统的选择MapQuest更成功，证明了提供更好的用户体验的产品的成功。AJAX技术是使网络应用有更好的可用性的一个领导性的技术。它允许从服务器端请求少量的信息，而不是整个网页。它增加了页面数据的更新但同时减少了页面的刷新和刷新等待，这些问题从网络已诞生就折磨着Web应用。 <br /><br /> 人们已经知道他们需要一个优秀的用户界面并且有对该界面的投资意愿。前提条件是：用户能够快速的取得信息不管数据是一个内部网的应用还是一个广域网的服务。 <br /><br /> 十大理由第三名：跨浏览器和跨平台的兼容性 <br /><br /> IE和基于Mozilla的FIREFOX是占据市场分额最大的两个浏览器，并且它们都支持在浏览器上轻松创建基于AJAX的WEB应用。现在开发运行在更为先进的WEB浏览器上的基于AJAX的富WEB应用成为了可能。这是为什么AJAX应用变得如此流行的一个最重要的原因。其实很多开发人员多年前就意识到AJAX技术流行的可能，但一直没有流行是因为浏览器厂商的原因。感谢Mozilla和FIREFOX。 <br /><br /> 十大理由第四名：使常规的WEB应用受益 <br /><br /> AJAX技术是当今WEB应用的门面——WEB应用获得的利益超过了桌面应用。这些利益包括部署应用的低投入、维护方便、缩短开发时间和不需要安装。这些都是促使商业和用户自从上世纪九十年代以来采用WEB应用的优点。AJAX技术不但能使WEB应用获得益处，而且使最终用户受益。 <br /><br /> 十大理由第五名：促使技能、工具和技术的升级 <br /><br /> 由于AJAX基于这些年一直使用的一些公开标准，很多的开发人员就会有新的技术方面的要求以便能够开发AJAX应用。但这并不意味着开发团队从基于HTML和FORM的应用转移到富AJAX型应用需要很高的学习曲线。同时，这意味着开发WEB应用的开发团体需要加速将他们的用户接口升级到AJAX，但并不需要一个大规模的升级和重写他们的WEB应用。自从上世纪九十年代以来，在开发基于浏览器应用方法花了大量投资的那些系统强烈的希望能在现有的应用的基础上增加用户体验。 <br /><br /> 十大理由第六名：能和Flex和Flash等技术的很好的集成 <br /><br /> 大多数的开发社区都不再支持FlashvsAJAX的火热讨论，这两种技术都在不同的场合拥有各自的优点和缺点，但是它们有大量的机会可以集成到一起工作。很多的开发人员和技术提供商意识到这一点，并且开发出了伟大的产品来集成Flex和AJAX协调使用。我们也热切的期望看到两者能在Macromedia里一起工作。 <br /><br /> 十大理由第七名：采用率 <br /><br /> AJAX被业内领袖广泛采用证明了市场的欢迎程度和该技术组的正确。每一个该技术的使用者都成为了胜利者：包括google、yahoo、Amazon和微软等等。是google地图吸引了WEB开发人员的目光，当人们开始调查是什么原因使得google有着如此惊人的用户体验的时候，人们揭开了罩在AJAX头上的面纱。 <br /><br /> 当然，仅仅是google使用AJAX是不够使得这项技术跨越从支流到主流的鸿沟的。但是，如果你看一看使用AJAX技术的客户如eBusinessApplications(www.ebusinessapps.com)orTibco(http://www.tibco.com)等的表单时，你就会发现财富500强包括主要的金融机构、政府机构、航空公司和其他主要商业机构采用AJAX，并且在AJAX成为硬通货之前很早就开始使用了。 <br /><br /> 十大理由第八名：WEB2.0 <br /><br /> 喜欢也好，厌恶也罢。WEB2.0运行吸引了开发人员、风险投资商、市场和最终用户等所有的目光。这些明确的促进了AJAX的早期应用。当大肆的宣传过去以后，我们将会看到什么呢?从BackPack到google地图，AJAX界面是WEB2.0应用的主要的组成。大量的宣传有助于加速采用AJAX，而在可用性上的获益会使得该技术被广发应用。WEB2.0的一个主要原则是使用WEB作为一个应用开发的平台，而不仅仅是一个网页。高的可用性和交互能力的用户界面是一切应用平台的主要组成部分。 <br /><br /> 十大理由第九名：AJAX基于服务器技术的不确定性 <br /><br /> 和AJAX技术的浏览器的独立性相同，该技术也兼容所有的标准型的服务器和服务端语言，如PHP,ASP.ASP.Net,Perl,JSP,ColdFusion等等，选择属于你的那种然后开始。这使得AJAX开发独立，因为所有的开发人员都能使用并且一起讨论相同的表现层。 <br /><br /> 十大理由第十名：基于WEB的下一代RIA技术还没有出现 <br /><br /> 今天就使用XUL技术开发应用的人是伟大的，因为现在90%的浏览器还不支持这种技术，对于大多数的实际应用来说，使用这种技术不切合实际。然而，AJAX开发人员应该给出一部分的注意力在这些技术，如XAML和XUL上。毫无疑问，这些技术将使开发富WEB应用变得简单。但是它们可能相互不兼容并且拥有不同的市场需求或动力。 <br /><br /> 在今后一段时间，AJAX技术将极大的提高WEB应用的可用性。AJAX技术并不完美，不是“火箭科学”许多的开发人员和技术公司始终在尝试RIA的其他更好的技术。而实际的问题是AJAX技术现在已经存在并且应用的很好，它跨浏览器、跨平台，而且不管是用户还是开发人员都喜欢它的作用。特征鲜明的AJAX应用如google地图已经成为了本领域的领导者(还有人使用MapQuest吗?)同样的，领先的财富500强使用AJAX技术并且贡献了开发工具给社区了。一般来说，业内在使用AJAX技术上取得了一致并且正在使用它。再强调一次，RIA应用和WEB应用使用了AJAX获得的一个主要的优势不仅仅是开发人员的一个工具，而是一个现象：它改变了我们开发WEB应用的方式。没人能说得清楚在RIA应用方面，哪一种技术会取代它，会在什么时候取代它;但是很多因素都支持AJAX应用应该持续好多年。 <br /><br /> 关于作者 <br /><br /> AndreCharland从事Internet软件开始超过十年之久，他是eBusinessApplications(www.ebusinessapps.com)公司的主席和创建者之一。他和DaveJohnson在1998年创建了该公司。他主要的经验在可用性、市场、项目管理和基于构件的软件开发。所受教育包括：在Vancouver,BC的SimonFraserUniversity，他在那里读计算机科学和工商管理。他作为开发者、管理者和架构师等不同身份有上百个Internet项目的经验。\r\n <p align="center"> </p>', '', '', ''),
(38, 4, '<p> Ajax 由 HTML、Javascript™ 技术、DHTML 和 DOM 组成，这一杰出的方法可以将笨拙的 Web 界面转化成交互性的 Ajax 应用程序。本系列的作者是一位 Ajax 专家，他演示了这些技术如何协同工作 —— 从总体概述到细节的讨论 —— 使高效的 Web 开发成为现实。他还揭开了 Ajax 核心概念的神秘面纱，包括 XMLHttpRequest 对象。</p><p> 五年前，如果不知道 XML，您就是一只无人重视的丑小鸭。十八个月前，Ruby 成了关注的中心，不知道 Ruby 的程序员只能坐冷板凳了。今天，如果想跟上最新的技术时尚，那您的目标就是 Ajax。</p><p> 但是，Ajax 不仅仅 是一种时尚，它是一种构建网站的强大方法，而且不像学习一种全新的语言那样困难。</p><p> 在详细探讨 Ajax 是什么之前，先让我们花几分钟了解 Ajax 做 什么。目前，编写应用程序时有两种基本的选择：</p><p> <strong> 桌面应用程序</strong></p><p><strong> Web 应用程序</strong></p><p> 两者是类似的，桌面应用程序通常以 CD 为介质(有时候可从网站下载)并完全安装到您的计算机上。桌面应用程序可能使用互联网下载更新，但运行这些应用程序的代码在桌面计算机上。Web 应用程序运行在某处的 Web 服务器上 —— 毫不奇怪，要通过 Web 浏览器访问这种应用程序。</p><p> 不过，比这些应用程序的运行代码放在何处更重要的是，应用程序如何运转以及如何与其进行交互。桌面应用程序一般很快(就在您的计算机上运行，不用等待互联网连接)，具有漂亮的用户界面(通常和操作系统有关)和非凡的动态性。可以单击、选择、输入、打开菜单和子菜单、到处巡游，基本上不需要等待。</p><p> 另一方面，Web 应用程序是最新的潮流，它们提供了在桌面上不能实现的服务(比如 Amazon.com 和 eBay)。但是，伴随着 Web 的强大而出现的是等待，等待服务器响应，等待屏幕刷新，等待请求返回和生成新的页面。</p><p> 显然这样说过于简略了，但基本的概念就是如此。您可能已经猜到，Ajax 尝试建立桌面应用程序的功能和交互性，与不断更新的 Web 应用程序之间的桥梁。可以使用像桌面应用程序中常见的动态用户界面和漂亮的控件，不过是在 Web 应用程序中。</p><p> 我们来看看 Ajax 如何将笨拙的 Web 界面转化成能迅速响应的 Ajax 应用程序吧。</p><p> <strong>老技术，新技巧</strong></p><p> 在谈到 Ajax 时，实际上涉及到多种技术，要灵活地运用它必须深入了解这些不同的技术(本系列的头几篇文章将分别讨论这些技术)。好消息是您可能已经非常熟悉其中的大部分技术，更好的是这些技术都很容易学习，并不像完整的编程语言(如 Java 或 Ruby)那样困难。</p><p> <strong>Ajax 的定义</strong></p><p><strong> Ajax 是 Asynchronous Javascript and XML(以及 DHTML 等)的缩写。这个短语是 Adaptive Path 的 Jesse James Garrett 发明的(请参阅 参考资料)，按照 Jesse 的解释，这不是 个首字母缩写词。</strong></p><p> 下面是 Ajax 应用程序所用到的基本技术：</p><p> <strong>HTML 用于建立 Web 表单并确定应用程序其他部分使用的字段。</strong></p><p><strong> Javascript 代码是运行 Ajax 应用程序的核心代码，帮助改进与服务器应用程序的通信。</strong></p><p><strong> DHTML 或 Dynamic HTML，用于动态更新表单。我们将使用 div、span 和其他动态 HTML 元素来标记 HTML。</strong></p><p><strong> 文档对象模型 DOM 用于(通过 Javascript 代码)处理 HTML 结构和(某些情况下)服务器返回的 XML。</strong></p><p> 我们来进一步分析这些技术的职责。以后的文章中我将深入讨论这些技术，目前只要熟悉这些组件和技术就可以了。对这些代码越熟悉，就越容易从对这些技术的零散了解转变到真正把握这些技术(同时也真正打开了 Web 应用程序开发的大门)。</p><p>\r\n <p align="center"> </p>', '', '', ''),
(39, 4, '<p>JavaScript包含的Ajax是Web2.0应用的一个重要组成部分。该部分的进化发展使网络变成了超级平台。该转变同时也催生了新品种的病毒和蠕虫，比如Yamanner,Samy 以及Spaceflash等等。Google,Netflix,Yahoo 以及MySpace等门户网站在过去的几个月里都因为新的漏洞而蒙受一定损失。黑客们可以利用这些漏洞进行钓鱼，跨站点脚本(XSS)以及跨站点伪造(XSRF)请求等攻击。 </p><p>Ajax中没有固有的安全漏洞，但是对该技术向量的适配显著地改变了网络应用的开发途径以及方法论。以前，DCOM和CORBA组成核心中间件层的时候，将数据和对象序列化非常困难。Ajax使用简单的GET,POST或者SOAP调用，来转换XML,HTML,JS Array,JSON,JS Objects以及其他定制的对象；全部这些操作都不需要调用中间件层。Ajax的这种综合能力使应用服务器与浏览器之间的数据交换非常流畅。从服务器端传来的信息动态地被注入到当前的DOM相关环境，然后浏览器的DOM状态重置。在讲安全漏洞之前，我们先来看看促成Web2.0漏洞的关键因素。 </p><p>多重分散的终端点以及隐藏调用——Web2.0应用与Web1.0的主要区别就是信息访问机制的区别。比起它的前身Web1.0, Web2.0应用有数个Ajax终点。潜在的Ajax调用分散于整个浏览器页面，并且能够被各个事件分别调用。开发者恨难应付Ajax调用的这种分散性，并且由于这些调用是隐藏的，不那么明显，它还可能导致代码不规范。 </p><p>认证混乱——输入和输出内容认证是应用的重要因素之一。Web2.0应用使用桥，mashups,还有反馈等等。很多情况下，它假定“另一方”（读取服务器端或者客户端代码）已经实现了认证，这种混乱就导致了双方都没有实现适当的认证控制。 </p><p>不受信任的信息来源——Web2.0应用从很多不受信任的来源比如反馈，博客，搜索结果中获得信息。这些内容在提供给终端浏览器之前从来没有被认证，这就有可能引发跨站点攻击。黑客还有可能在浏览器中加载JavaScript，以便迫使浏览器发出跨域的调用并打开安全漏洞。那样的话，这些致命的漏洞就能被病毒和蠕虫利用。 </p><p>数据序列化——浏览器可以调用Ajax来实施数据序列化。它可以获取JS array,Objects,Feeds,XML文件，HTML 块以及JSON。如果这些序列块中的某一个被解析并修改了，黑客们就可以强迫浏览器执行恶意脚本。不受信任信息与数据序列化的结合，对终端用户的安全是致命的。 </p><p>动态脚本构成和执行——Ajax会建立一个后端通道，从服务器获取数据，然后将它传送给DOM。实现这一点的必要条件就是动态地执行JavaScripts，以便随时更新DOM或者浏览器页面缓存的状态。Ajax通过调用定制的功能或者eval()功能。未经认证的内容或者使用不安全的调用，轻则导致会话内容泄露，重则迫使浏览器执行恶意内容等各种后果。 </p><p>Web2.0应用可能因为上面提到的1个或多个失误而变得易受攻击。如果开发者不够审慎，没有花心思在安全管理上的话，那么服务器和浏览器端都会出现安全问题。以下是10个可能的安全漏洞的简要说明。 </p><p><strong>（1）畸形的JS对象序列</strong> </p><p>JavaScript支持面向对象编程(OOP)技术。它有很多不同的内置对象，也允许用户自己创建对象。使用者可以用new object() 或者自己编辑如下代码来创建新的对象。 </p><p /><span class="code"><pre>message = {\r\nfrom : "john@example.com",\r\nto : "jerry@victim.com",\r\nsubject : "I am fine",\r\nbody : "Long message here",\r\nshowsubject : function(){document.write(this.subject)}\r\n};</pre></span><p>这是一个简单的消息对象，其中有2个字段需要电子邮件地址。我们可以使用Ajax来将该对象序列化并用JavaScript代码编译。程序员可以将它赋值到变量或者eval()。如果攻击者发送嵌入了脚本的恶意“主题”，那么读者就将成为跨站点脚本攻击的受害者。JS对象既包含数据也包含方法。对JS对象序列的不当使用将产生可以被诡计多端的注入代码利用的安全漏洞。 </p><p><strong>(2)JSON对注入</strong> </p><p>JavaScript对象符号(JSON)是一个简单而有效的少量数据交换格式，它包含对象，数组，Hash表，向量以及列表数据结构。JavaScript, Python, C, C++, C# 和Perl languages都支持JSON。JSON序列在Web2.0应用中是个非常有效的交换机制。开发者频繁使用Ajax和JSON，获取并传送必要的信息给DOM。下面是个简单的带有不同的name值对的JSON对象：“bookmarks”对象。 </p><p /><span class="code"><pre>{"bookmarks":[{"Link":"www.example.com","Desc":"Interesting link"}]}</pre></span><p>黑客们可以在Link或者Desc中注入恶意脚本。如果DOM和可执行程序被注入了，XSS目录也会被注入。这是使终端用户感染恶意内容的另一种方法。 </p><p><strong>(3)JS数组中毒</strong> </p><p>JS数组是另一个比较普遍的序列化对象。人们可以很容易地跨平台移植它，并且它在使用不同语言的结构中也很有效。感染一个JS数组可以扰乱整个DOM环境。黑客们可以在浏览器中使用简单的跨站点脚本攻击JS数组。下面是一个JS数组的例子： </p><p /><span class="code"><pre>new Array(“Laptop”, “Thinkpad”, “T60”, “Used”, “900$”, “It \r\nis great and I have used it for 2 years”)</pre></span><p>该数组是从一个拍卖二手笔记本的网站传出来的。如果这个数组对象在服务器端没有被仔细处理，黑客就可以在最后字段中注入脚本。这种注入将危及浏览器安全并被攻击者利用。 </p><p><strong>(4)被修改的XML数据流</strong> </p><p>Ajax调用接受来自多个地址的XML。这些XML块来自运行在SOAP,REST或者XML-RPC的网络服务。这些网络服务是由从第三方的代理桥那里接收过来的。如果这些第三方XML数据流被攻击者修改过，那么攻击者就可能向其中注入恶意内容。 </p><p>浏览器从它自带的XML解析器接收该数据流。该解析器容易受不同的XML炸弹的攻击。人们也可以在该数据流中注入脚本，这样就可以导致跨站点脚本攻击(XSS)。浏览器接收未经认证的XML数据流的话，这就会危及终端客户端的安全。 </p><p><strong>(5)DOM中脚本注入</strong> </p><p>前四个漏洞都是由于序列化问题引起的。一旦浏览器收到序列化的对象数据流，开发者会发出某种调用来访问DOM。这种调用的目的是将新内容“重写”或者“重填”入DOM中，可以调用eval()这个定制功能，也可以使用document.write()。如果这些调用是在不受信任信息流上进行的，浏览器就有可能由于DOM的操作漏洞而受攻击。攻击者可以用很多document.*()调用来向DOM环境中注入XSS。 </p><p>例如，这段JavaScript代码：Document.write(product-review)。 </p><p>在这里，“Product-review”是从第三方blog上获得的变量。如果它含有JavaScript会怎样？答案很明显。这个JavaScript就会被浏览器运行。 </p><p><strong>（6）跨域访问和回调</strong> </p><p>Ajax不能从浏览器跨域访问。所有比较流行的浏览器都有个安全特性，那就是拦截跨域访问。一些网站服务为对象序列提供回调功能。开发者可以使用这个功能来把网站服务整合到浏览器本身。人们可以把该功能名传回，这样浏览器一找到回调对象数据流，它就会被浏览器中早已有的特殊功能名执行。 </p><p>这个回调对使用浏览器内认证的开发者来说是个额外负担。如果输入的对象数据流未经浏览器认证那么终端客户端就会成为跨域攻击的目标。不管是有意还是无意的，跨域服务可以向浏览器中注入恶意内容。该跨域调用在当前DOM环境中运行，于是导致当前对话也易受攻击。在实现应用之前，人们需要仔细检查整个跨域功能。 </p><p><strong>（7）RSS和Atom注入</strong> </p><p>联合的反馈，RSS以及Atom,是最普遍的一种将站点更新信息传到网络上的方法。许多新闻，博客，门户站点等等，都在网络上共享多个反馈。反馈是标准的XML文档，并且可以被任何程序接收。Web2.0应用使用窗口小部件或者浏览器内部元件整合了联合反馈。这些组件调用Ajax来访问反馈。 </p><p>这些反馈可以被终端用户方便地选择。一旦用户选择了它们，这些反馈就会被解析并注入到DOM中。那么如果这个反馈在注入之前没有被适当地认证过，就会出现一些安全问题。人们可以往浏览器中注入恶意链接或者JavaScript代码。注入之后，就大事不妙了，最终结果是XSS和对话被黑客拦截。 </p><p><strong>（8）单击炸弹</strong> </p><p>Web2.0应用可能不会很简单地就被黑客攻下，但他们可以对它进行基于事件的注入。人们可以将带有"onclick"字样的恶意链接用JavaScript注入。这样，浏览器就带着个随时等待终端用户右键点击来触发的炸弹。一旦用户点击了链接或按钮，能够启动炸弹的那个事件被启动了，那么攻击就成功了。此类攻击会导致对话被恶意代码拦截。 </p><p>这也是由于人们从那些没有经过正确验证的不受信任源处获得的信息，所导致的安全漏洞。为了利用该安全漏洞，它需要终端客户端触发一个事件。这个事件也许是诸如点击按钮或者链接的这种无害事件，但是点击后就使会用户损失惨重。它可能引起某个恶意事件，将当前对话信息发送给目标，又或者在当前浏览器环境中执行一系列脚本攻击。 </p><p><strong>(9) 基于Flash的跨域访问</strong> </p><p>黑客们可以使用Flash插件的Ajax接口，从而用浏览器中的JavaScritps发出GET和POST请求。这个接口使黑客们能进行跨域调用。为了避免安全问题，该Flash插件实现了根据策略访问其他域的功能。该策略可以通过在域的根部放置crossdomain.xml文件来配置。如果放置的文件配置不当——很普遍的现象——它就可能允许跨域访问。下面是一个配置不当的XML文档： </p><p>现在可以从浏览器自身发出跨域调用了。这个结构还有一些其他安全问题。基于Flash的丰富网络应用(RIA)如果配置错误的话，很容易由于Ajax的跨域访问Bug而被攻击。 </p><p><strong>(10) XSRF</strong> </p><p>跨域伪造请求(XSRF)是个老牌的攻击向量了，它迫使浏览器向不同的域发出HTTP GET或者POST请求；这些请求可以跨域在运行的应用逻辑中启动某种事件。它可能请求修改密码或者电子邮件地址等。浏览器调用它后，它重放cookie并获得身份认证。这就是该请求的关键部分。如果某个应用只根据cookie来判识身份，那么该攻击就会成功。 </p><p>Web2.0中Ajax是就XML-RPC,SOAP或者REST与后端网络服务进行对话的，通过GET和POST可以进行这些调用。换句话说，人们可以对这些网络服务进行跨站点调用，从而危及受害者与网络服务接口的身份信息。XSRF这个攻击向量很有趣，它在这个新界定的端点情况中创造了新的层次。这些终点可能是为Ajax或者网络服务而准备的，但它们也有可能被跨域请求所激活。 </p><p><strong>对安全漏洞的攻击以及相应对策</strong> </p><p>Web2.0应用有多个终端点；每个点都是威胁的侵入点。为了保证安全，我们应当保护好所有这些点。在将第三方信息发送给客户端之前要对其进行彻底处理。 </p><p>为了处理Ajax序列，必须在它们到达DOM之前对输入数据流进行验证。XML解析以及跨域安全问题也需要额外重视，并实施更好的安全管理措施。我们应当遵循那个最简单最笨拙的原则：不让未经认证的跨域信息进入浏览器。有趣的是，到目前为止，安全专家们都不主张使用客户端脚本来进行输入验证，因为这很容易被规避掉。 </p><p>Web2.0促成了很多浏览器安全相关的新的漏洞。利用这些安全漏洞很难但不是不可能。安全问题以及促成因素结合起来将严重影响那些大的网络团体，比如能被攻击者蠕虫和病毒利用的那些组织。最终将导致身份信息的泄漏。 </p><p><strong>结论</strong> </p><p>本文简单地讲了一些可能出现的关于Ajax漏洞。还有很多其他潜在的漏洞，比如利用跨域代理来在浏览器中建立单项通道或者存储变量。 </p><p>Web2.0中很多逻辑都转到了客户端。这会将整个应用暴露给一些严重的威胁。对整合来自多方的、不受信源的数据的迫切要求也将全面增加风险向量：XSS,XSRF,跨域问题以及客户端上的序列，还有不安全的网站服务，服务器端的XML-RPC和REST访问。相反地，Ajax可被用来构造优美的无缝数据整合。但是，任一不安全的调用或者信息流都会使其产事与愿违的效果，从而促成可被利用的安全漏洞。 </p><p>这些新技术向量很有前景，令很多人兴奋不已，但是攻击者，病毒和蠕虫作者对它更感兴趣。为了保障安全，开发者应当在这些细节方面格外小心。 </p><p /><p>============================================= </p><p>原文链接：http://www.net-security.org/article.php?id=956&p=1 </p><p>原文作者：Shreeraj Shah </p><p>原文来源：net square </p>\r\n <p align="center"> </p>', '', '', '');
INSERT INTO `#@__addonarticle` (`aid`, `typeid`, `body`, `redirecturl`, `templet`, `userip`) VALUES
(40, 4, '<p>原文：</p><p>真是五个很quick的小提示：</p><h2>只在<code><font face="NSimsun"><form></font></code>元素上使用<code><font face="NSimsun">submit</font></code>事件</h2><p>如果要在form中绑定事件处理程序时，应该只在<code><font face="NSimsun"><form></font></code>元素上绑定<code><font face="NSimsun">submit</font></code>事件，而不是给提交按钮绑定<code><font face="NSimsun">click</font></code>事件。<br /><strong>March：</strong>这个方式固然很好，但是，公司开发时使用了Web Flow，一个页面就一个大form，而里面可能有若干个提交按钮，所以不得不把部分事件处理程序绑定在了提交按钮的<code><font face="NSimsun">click</font></code>事件上。</p><h2>可点击的都应该是链接</h2><p>不要给除锚元素（<code><font face="NSimsun"><a></font></code>）以外的元素绑定<code><font face="NSimsun">click</font></code>事件。这一点对于键盘用户很重要，因为他们在仅通过键盘获取元素焦点时会遇到困难。<br /><strong>March：</strong>不过个人感觉锚元素还是应该只用作链接，而一些功能性的操作（比如Google Reader的Mark all as new），最好还是用<span>来标注，accessibility的问题可以通过快捷键等方式解决。这样做可以更好的还原HTML元素的语义。</p><h2>简单的for循环优化</h2><p>在你写一个for循环时，有个很简单的技巧能够提高性能。<br /><font face="NSimsun"><code class="blockcode">for ( var i = 0; i < elements.length; ++i )</code><br /></font>使用下面的语句代替上面的：<br /><font face="NSimsun"><code class="blockcode">for ( var i = 0, j = elements.length; i < j; ++i )</code><br /></font>这样可以把元素的个数（<code><font face="NSimsun">elements.length</font></code>的值）储存在一个变量<code><font face="NSimsun">j</font></code>中，这样就不必在每次循环时都计算一遍元素的个数。</p><h2>用匿名函数来作为事件处理程序</h2><p>尤其是对于短小的函数，创建一个匿名函数会比使用一个命名函数的引用更具可读性。<br /><font face="NSimsun"><code class="blockcode">anchor.onclick = function() { map.goToPosition( home ); return false; }</code><br /></font><strong>March：</strong>在较复杂的JavaScript开发时还是使用命名函数效率更高。</p><h2>使用<code><font face="NSimsun">Array.join</font></code>代替字符串连接（concatenating strings）</h2><p>在将很多字符串、变量等连接成一个很长的字符串时，将所有字符串和变量放入一个数组，然后用<code><font face="NSimsun">join</font></code>方法将他们组成一个长字符串，这样无论从代码可读性还是从性能上都更胜于字符串连接。<br /><code class="blockcode"><font face="NSimsun">var text = ''There are'' + elements.length + ''members in the elements array.'';<br />var text = [''There are'', elements.length, ''members in the elements array.''].join('' '');</font></code></p><p><code class="blockcode"><font face="新宋体">来源：</font></code></p>\r\n <p align="center"> </p>', '', '', ''),
(41, 4, '<p>, 亦称为 Mocha、LiveScript，也叫做JScript ECMAScript，是世界上流行的编程语言之一。事实上世界上差不多每台个人电脑都至少安装了一个JavaScript解释器。JavaScript的流行完全在于它作为WWW的脚本语言的角色。</p><p>不管它有多么流行，极少有人了解JavaScript是一个十分动态的通用面向对象编程语言。这怎能成为一个秘密呢？为什么这个语言如此被误解？</p><h2>关于名字</h2><p>这个<em>Java-</em>前缀暗示了JavaScript和Java的关系，也就是JavaScipt是Java的一个子集也就是不如Java强大。看上去这个名称就故意制造混乱，然后随之而来的是误解。JavaScript并不是解释型的Java语言。Java是解释型的Java，JavaScript是另一种语言。</p><p>JavaScript和Java的语法很相似，就象Java和C的语法相似一样。但它也不是Java的子集就像Java也不是C的子集一样。在应用上，Java要远比原先设想的好得多（Java原称Oak）。</p><p>JavaScript并不是由Sun公司──Java的老家──开发的。JavaScript是由Netscape公司开发。它本来叫做LiveScript，这个名字并不是那样容易混淆。 </p><p>这个<em>-Script</em> 后缀暗示了它不是一个真正的编程语言──脚本语言好象不是真正的编程语言。但其实这是一个专长的问题。相对C而言，JavaScript牺牲性能但带来更强的表达力和动态性。</p><h2>披着C外衣的Lisp</h2><p>JavaScript的C风格的语法，包括大括号和复杂的for 语句，让它看起来好象是一个普通的过程式语言。这是一个误导因为JavaScript和函数式语言如Lisp和Scheme有更多的共同之处。它用数组代替了列表，用对象代替了属性列表。函数是第一型的。而且有闭包。你不需要平衡那些括号就可以用lambda算子。</p><h2>思维定势</h2><p>JavaScript是原被设计在Netscape Navigator 中运行的。它的成功让它成为几乎所有浏览器的标准配置。这导致了思维定势。JavaScript简直就是程序语言中的 （一位曾扮演超人的演员，但后来死于枪杀，被官方认为自杀，细节不详──译注）。其实，JavaScript也适合很多和Web无关的应用程序。</p><h2>不断改变的目标</h2><p>JavaScript的第一个版本功能十分弱。它缺少异常处理、内部函数和继承。而它的现在的形态，它已经是一套完整的面向对象语言。但很多看法都是基于认为它的形式不成熟。</p><p>管理这个语言的ECMA委员正在开发扩展 ，原意是很好，而这样却会加剧这个语言最严重的问题：版本太多了。这也造成了混淆。</p><h2>设计错误</h2><p>没有什么编程语言是完美的，JavaScript也有它的设计上的错误，如的重载同时表示加和带类型转换的串连接，和有错误倾向的 with 语句应该避免使用。保留字策略过于严格。分号的加入是一个很大的错误，正则表达式的记号也是。这些错误会导致编程错误，并把语言的设计作为整个叫做问题。幸运的是，这些问题可以用一个很好</p><p>这个语言的设计从整体上看还是十分健全的。但很令人惊讶的是， ECMAScript委员会好象根本不想修正这些错误。也许他们对重新制作一个更感兴趣。</p><h2>肮脏的实现</h2><p>JavaScript早期实现错误百出。这对该语言带来了很恶劣的影响。更糟糕的是，这些实现还被嵌入的更错误百出的浏览器中。</p><h2>拙劣的书籍</h2><p>几乎所有的书籍都十分恐怖。里面到处是错误、蹩脚的例子还自创一套拙劣的惯例。语言中重要的特性却常常解释不好，或者干脆完全不写。我翻阅了几十本JavaScript的书，我只推荐两本： by David Flanagan and by Danny Goodman. 都来自于 .</p><h2>不够标准的标准</h2><p>该语言的官方标准规格说明书由ECMA发布。该规格书也是质量奇差。它难以阅读也难以理解。它也对拙劣书籍的问题作出了自己的一份“贡献”，因为作者无法使用这个标准文档来增加他们对语言的认识。ECMA和TC39委员会应该为此感到深深的羞愧。</p><h2>业余爱好者</h2><p>大部分写JavaScript的人都不是程序员。他们缺乏训练写好程序的修养。JavaScript有如此丰富的表达能力，他们可以任意用它来写代码，以任何形式。这给JavaScript带来了一个名声──它是专门为外行设计的，不适合专业的程序员。这显然不是事实。</p><h2>面向对象</h2><p>JavaScript是不是面向对象的？它拥有对象，可以包含数据和处理数据的方法。对象可以包含其它对象。它没有类，但它却有构造器可以做类能做的事，包括扮演类变量和方法的容器的角色。它没有基于类的继承，但它有基于原型的继承。</p><p>两个建立对象系统的方法是通过继承（是一个……）和通过聚合（有一个……）。JavaScript两个都有，但它的动态性质让它可以在聚合上超越。</p><p>一些批评说JavaScript不是真正面向对象的因为它不能提供信息的隐藏。也就是，对象不能有私有变量和私有方法：所有的成员都是公共的。S</p><p>。当然，极少有人认识到，因为JavaScript是世界是最受误解的程序嘛！</p><p>另外还有批评说JavaScript不能提供继承，。</p><p align="left">原文地址： </p><p align="left">翻译： </p>\r\n <p align="center"> </p>', '', '', ''),
(42, 4, '<p>已经读了《JavaScript DOM 编程艺术》的前几章基础部分，现在凭着记忆，将JavaScript的基础知识总结一下。</p><p><strong>一、声明变量</strong></p><p>JavaScript中，对变量的要求非常宽松，属于弱类型语言。尽管可以不申请变量而直接使用，但是为了程序的可读性和安全性，还是尽量把要使用的变量声明一下。格式如下：</p><p><em>var 变量一,变量二,…,变量N;</em></p><p>也可以直接在申请变量的同时进行赋值：</p><p><em>var 变量 = 变量值;</em></p><p>如果是数组变量，可以这样声明：</p><p><em>var 数组名 = Array(数组元素个数);</em></p><p><strong>二、条件语句</strong></p><p>JavaScript条件语句的格式如下：</p><p><em>if (返回值为布尔型的条件语句) {<br />如果条件成立执行的语句;<br />} else {<br />如果条件不成立执行的语句;<br />}</em></p><p>如果只要执行单个语句，也可以省略成如下形式：</p><p><em>if (条件判断) 条件成立后执行的语句;</em></p><p><strong>三、循环语句</strong></p><p>循环语句有三种，第一种是先判断后执行的while语句：</p><p><em>while (循环条件) {<br />循环的语句;<br />}</em></p><p>第二种，先执行后判断的while语句：</p><p><em>do {<br />循环的语句;<br />} while(循环条件);</em></p><p>第三种，for语句：</p><p><em>for (初始赋值;循环条件;条件变化) {<br />循环的语句;<br />}</em></p><p><strong>四、函数</strong></p><p>JavaScript中的函数用起来也很简单，与C语言和Java中的函数没多大差别。函数的定义：</p><p><em>function 函数名(形式参数一;形式参数二) {<br />函数里的语句;<br />return 函数返回值;<br />}</em></p><p><strong>五、对象</strong></p><p>JavaScript中，对象可以通过属性和方法两种方式访问：</p><p><em>对象.属性<br />对象.方法()</em></p><p>重点：</p><blockquote><p>属性是隶属于某个特定对象的变量；<br />方法是只有某个特定对象才能调用的函数。</p></blockquote><p>可以根据一个对象创建一个新的实例，这个实例可以使用对象所拥有的属性和方法：</p><p><em>var 实例名 = new 对象名;</em></p><p><strong>六、注释</strong></p><p>在程序设计中，注释始终是非常重要的。</p><p>JavaScript中，使用“//注释内容”来做单行注释；使用“/*注释内容*/”来进行多行注释。类似于HTML的那种注释方式，不推荐使用。</p><p>OK，将JavaScript的基本语法就回忆到这儿，关于DOM的知识我下次结合实例再谈。</p><p>来源：</p>\r\n <p align="center"> </p>', '', '', ''),
(43, 4, '<p>来自, 以下是JavaScript容易犯错的九个陷阱。虽然不是什么很高深的技术问题，但注意一下，会使您的编程轻松些，即所谓make life easier. 笔者对某些陷阱会混杂一些评点。</p><ol><li><h2>最后一个逗号</h2><p>如这段代码，注意最后一个逗号，按语言学角度来说应该是不错的（python的类似数据类型辞典dictionary就允许如此）。IE会报语法错误，但语焉不详，你只能用人眼从几千行代码中扫描。</p><pre><code><script>\r\n var theObj = {\r\n city : "Boston",\r\n state : "MA",\r\n }\r\n</script> </code></pre></li><li><h2><span><font face="NSimsun">this</font></span>的引用会改变</h2><p>如这段代码：</p><pre><code><input type="button" value="Gotcha!" id="MyButton" >\r\n<script>\r\nvar MyObject = function () {\r\n this.alertMessage = "Javascript rules";\r\n this.ClickHandler = function() {\r\n <strong style="COLOR: red">alert(this.alertMessage );</strong>\r\n }\r\n}();\r\ndocument.getElementById(”theText”).onclick = MyObject.ClickHandler\r\n</script></code></pre><p>并不如你所愿，答案并不是”JavaScript rules”。在执行<span><font face="NSimsun">MyObject.ClickHandler</font></span>时，代码中红色这行，<span><font face="NSimsun">this</font></span>的引用实际上指向的是<span><font face="NSimsun">document.getElementById("theText")</font></span>的引用。可以这么解决：</p><pre><code><input type="button" value="Gotcha!" id="theText" >\r\n<script>\r\nvar MyObject = function () {\r\n <strong style="COLOR: red">var self = this;</strong></span />\r\n this.alertMessage = “Javascript rules”;\r\n this.OnClick = function() {\r\n alert(self.value);\r\n }\r\n}();\r\ndocument.getElementById(”theText”).onclick = MyObject.OnClick\r\n</script></code></pre><p>实质上，这就是。如果你看过，你会发现解决方案不止一种。</p></li><li><h2>标识盗贼</h2><p>在JavaScript中不要使用跟HTML的id一样的变量名。如下代码：</p><pre><code><input type="button" id="TheButton">\r\n<script>\r\n TheButton = get("TheButton");\r\n</script></code></pre><p>IE会报对象未定义的错误。我只能说：IE sucks.</p></li><li><h2>字符串只替换第一个匹配</h2><p>如下代码：</p><pre><code><script>\r\n var fileName = "This is a title".replace(" ","_");\r\n</script></code></pre><p>而实际上，结果是”<span><font face="NSimsun">This_is a title</font></span>“. 在JavaScript中，<span><font face="NSimsun">String.replace</font></span>的第一个参数应该是正则表达式。所以，正确的做法是这样：</p><pre><code>var fileName = "This is a title".replace(/ /g,"_");</code></pre></li><li><h2>mouseout意味着mousein</h2><p>事实上，这是由于事件冒泡导致的。IE中有<span><font face="NSimsun">mouseenter</font></span>和<span><font face="NSimsun">mouseleave</font></span>，但不是标准的。作者在此建议大家使用库比如YUI来解决问题。</p></li><li><h2><span><font face="NSimsun">parseInt</font></span>是基于进制体系的</h2><p>这个是常识，可是很多人给忽略了<span><font face="NSimsun">parseInt</font></span>还有第二个参数，用以指明进制。比如，<span><font face="NSimsun">parseInt("09")</font></span>，如果你认为答案是9，那就错了。因为，在此，字符串以0开头，<span><font face="NSimsun">parseInt</font></span>以八进制来处理它，在八进制中，<span><font face="NSimsun">09</font></span>是非法，返回<span><font face="NSimsun">false</font></span>，布尔值<span><font face="NSimsun">false</font></span>转化成数值就是0. 因此，正确的做法是<span><font face="NSimsun">parseInt("09", 10)</font></span>. </p></li><li><h2><span><font face="NSimsun">for...in...</font></span>会遍历所有的东西</h2><p>有一段这样的代码：</p><pre><code>var arr = [5,10,15]\r\nvar total = 1;\r\nfor ( var x in arr) {\r\n total = total * arr[x];\r\n}</code></pre><p>运行得好好的，不是吗？但是有一天它不干了，给我返回的值变成了<span><font face="NSimsun">NaN</font></span>, 晕。我只不过引入了一个库而已啊。原来是这个库改写了<span><font face="NSimsun">Array</font></span>的<span><font face="NSimsun">prototype</font></span>，这样，我们的<span><font face="NSimsun">arr</font></span>平白无过多出了一个属性（方法），而<span><font face="NSimsun">for...in...</font></span>会把它给遍历出来。所以这样做才是比较安全的：</p><pre><code>for ( var x = 0; x < arr.length; x++) {\r\n total = total * arr[x];\r\n}</code></pre><p>其实，这也是污染基本类的<span><font face="NSimsun">prototype</font></span>会带来危害的一个例证。</p></li><li><h2>事件处理器的陷阱</h2><p>这其实只会存在使用作为对象属性的事件处理器才会存在的问题。比如<font face="NSimsun"><span>window.onclick = MyOnClickMethod</span><span>这样的代码，这会复写掉之前的</span><span>window.onclick</span></font>事件，还可能导致IE的内容泄露（sucks again）。在IE还没有支持DOM 2的事件注册之前，作者建议使用库来解决问题，比如使用YUI:</p><pre><code>YAHOO.util.Event.addListener(window, "click", MyOnClickMethod);</code></pre><p>这应该也属于常识问题，但新手可能容易犯错。</p></li><li><h2>Focus Pocus</h2><p>新建一个<span><font face="NSimsun">input</font></span>文本元素，然后把焦点挪到它上面，按理说，这样的代码应该很自然：</p><pre><code>var newInput = document.createElement("input");\r\ndocument.body.appendChild(newInput);\r\nnewInput.focus();\r\nnewInput.select();</code></pre><p>但是IE会报错（sucks again and again）。理由可能是当你执行<span><font face="NSimsun">fouce()</font></span>的时候，元素尚未可用。因此，我们可以延迟执行：</p><pre><code>var newInput = document.createElement("input");\r\nnewInput.id = "TheNewInput";\r\ndocument.body.appendChild(newInput);\r\nsetTimeout(function(){ //这里我使用闭包改写过，若有兴趣可以对比原文\r\n document.getElementById(''TheNewInput'').focus();\r\n document.getElementById(''TheNewInput'').select();}, 10);</code></pre></li></ol><p>在实践中，JavaScript的陷阱还有很多很多，大多是由于解析器的实现不到位而引起。这些东西一般都不会在教科书中出现，只能靠开发者之间的经验分享。谢天谢地，我们生活在网络时代，很多碰到的问题，一般都可以在Google中找到答案。 </p><p>来源:</p>\r\n <p align="center"> </p>', '', '', ''),
(44, 4, ' <strong>JavaScript技术</strong>可以实现交互式页面，在建立动态页面方面有着其他工具不可比拟的优点。Javascript 在网页<font face="Verdana">设计中,大部分都是用来实现功能,特效的.. 本文列举了一些中常用的JavaScript技术：<br /><br /> </font><font face="Verdana"><strong>事件源对象 <br /></strong><br /></font><table style="BORDER-RIGHT: #cccccc 1px dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellspacing="0" cellpadding="6" width="95%" align="center" border="0"><tbody><tr><td style="WORD-WRAP: break-word" bgcolor="#f3f3f3"><font style="FONT-WEIGHT: bold; COLOR: #990000">以下是引用片段：</font><br />event.srcElement.tagName <br />event.srcElement.type </td></tr></tbody></table><br /> <strong>捕获释放 <br /></strong><br /><table style="BORDER-RIGHT: #cccccc 1px dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellspacing="0" cellpadding="6" width="95%" align="center" border="0"><tbody><tr><td style="WORD-WRAP: break-word" bgcolor="#f3f3f3"><font style="FONT-WEIGHT: bold; COLOR: #990000">以下是引用片段：</font><br />event.srcElement.setCapture(); <br />event.srcElement.releaseCapture(); </td></tr></tbody></table><br /> <strong> 事件按键</strong> <br /><br /><table style="BORDER-RIGHT: #cccccc 1px dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellspacing="0" cellpadding="6" width="95%" align="center" border="0"><tbody><tr><td style="WORD-WRAP: break-word" bgcolor="#f3f3f3"><font style="FONT-WEIGHT: bold; COLOR: #990000">以下是引用片段：</font><br />event.keyCode <br />event.shiftKey <br />event.altKey <br />event.ctrlKey </td></tr></tbody></table><br /> <strong>事件返回值</strong> <br /><br /><table style="BORDER-RIGHT: #cccccc 1px dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellspacing="0" cellpadding="6" width="95%" align="center" border="0"><tbody><tr><td style="WORD-WRAP: break-word" bgcolor="#f3f3f3"><font style="FONT-WEIGHT: bold; COLOR: #990000">以下是引用片段：</font><br />event.returnValue </td></tr></tbody></table><br /> <strong>位置</strong> <br /><br /><table style="BORDER-RIGHT: #cccccc 1px dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellspacing="0" cellpadding="6" width="95%" align="center" border="0"><tbody><tr><td style="WORD-WRAP: break-word" bgcolor="#f3f3f3"><font style="FONT-WEIGHT: bold; COLOR: #990000">以下是引用片段：</font><br />event.x <br />event.y </td></tr></tbody></table><br /> <strong>窗体活动元素 <br /></strong><br /><table style="BORDER-RIGHT: #cccccc 1px dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellspacing="0" cellpadding="6" width="95%" align="center" border="0"><tbody><tr><td style="WORD-WRAP: break-word" bgcolor="#f3f3f3"><font style="FONT-WEIGHT: bold; COLOR: #990000">以下是引用片段：</font><br />document.activeElement </td></tr></tbody></table><br /> <strong>绑定事件</strong> <br /><br /><table style="BORDER-RIGHT: #cccccc 1px dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellspacing="0" cellpadding="6" width="95%" align="center" border="0"><tbody><tr><td style="WORD-WRAP: break-word" bgcolor="#f3f3f3"><font style="FONT-WEIGHT: bold; COLOR: #990000">以下是引用片段：</font><br />document.captureEvents(Event.KEYDOWN); </td></tr></tbody></table><br /> <strong>访问窗体元素</strong> <br /><br /><table style="BORDER-RIGHT: #cccccc 1px dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellspacing="0" cellpadding="6" width="95%" align="center" border="0"><tbody><tr><td style="WORD-WRAP: break-word" bgcolor="#f3f3f3"><font style="FONT-WEIGHT: bold; COLOR: #990000">以下是引用片段：</font><br />document.all("txt").focus(); <br />document.all("txt").select(); </td></tr></tbody></table><br /> <strong>窗体命令</strong> <br /><br /><table style="BORDER-RIGHT: #cccccc 1px dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellspacing="0" cellpadding="6" width="95%" align="center" border="0"><tbody><tr><td style="WORD-WRAP: break-word" bgcolor="#f3f3f3"><font style="FONT-WEIGHT: bold; COLOR: #990000">以下是引用片段：</font><br />document.execCommand </td></tr></tbody></table><br /> 窗体COOKIE <br /><br /><table style="BORDER-RIGHT: #cccccc 1px dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellspacing="0" cellpadding="6" width="95%" align="center" border="0"><tbody><tr><td style="WORD-WRAP: break-word" bgcolor="#f3f3f3"><font style="FONT-WEIGHT: bold; COLOR: #990000">以下是引用片段：</font><br />document.cookie </td></tr></tbody></table><br /> 菜单事件 <br /><br /><table style="BORDER-RIGHT: #cccccc 1px dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellspacing="0" cellpadding="6" width="95%" align="center" border="0"><tbody><tr><td style="WORD-WRAP: break-word" bgcolor="#f3f3f3"><font style="FONT-WEIGHT: bold; COLOR: #990000">以下是引用片段：</font><br />document.oncontextmenu </td></tr></tbody></table><br /> 创建元素 <br /><br /><table style="BORDER-RIGHT: #cccccc 1px dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellspacing="0" cellpadding="6" width="95%" align="center" border="0"><tbody><tr><td style="WORD-WRAP: break-word" bgcolor="#f3f3f3"><font style="FONT-WEIGHT: bold; COLOR: #990000">以下是引用片段：</font><br />document.createElement("SPAN"); </td></tr></tbody></table><br /> 根据鼠标获得元素： <br /><br /><table style="BORDER-RIGHT: #cccccc 1px dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellspacing="0" cellpadding="6" width="95%" align="center" border="0"><tbody><tr><td style="WORD-WRAP: break-word" bgcolor="#f3f3f3"><font style="FONT-WEIGHT: bold; COLOR: #990000">以下是引用片段：</font><br />document.elementFromPoint(event.x,event.y).tagName=="TD <br />document.elementFromPoint(event.x,event.y).appendChild(ms) </td></tr></tbody></table><br /> 窗体 <br /><br /><table style="BORDER-RIGHT: #cccccc 1px dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellspacing="0" cellpadding="6" width="95%" align="center" border="0"><tbody><tr><td style="WORD-WRAP: break-word" bgcolor="#f3f3f3"><font style="FONT-WEIGHT: bold; COLOR: #990000">以下是引用片段：</font><br />document.images[索引]</td></tr></tbody></table> <br /> 窗体事件绑定 <br /><br /><table style="BORDER-RIGHT: #cccccc 1px dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellspacing="0" cellpadding="6" width="95%" align="center" border="0"><tbody><tr><td style="WORD-WRAP: break-word" bgcolor="#f3f3f3"><font style="FONT-WEIGHT: bold; COLOR: #990000">以下是引用片段：</font><br />document.onmousedown=scrollwindow; </td></tr></tbody></table><br /> 元素 <br /><table style="BORDER-RIGHT: #cccccc 1px dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellspacing="0" cellpadding="6" width="95%" align="center" border="0"><tbody><tr><td style="WORD-WRAP: break-word" bgcolor="#f3f3f3"><font style="FONT-WEIGHT: bold; COLOR: #990000">以下是引用片段：</font><br />document.窗体.elements[索引] </td></tr></tbody></table><br /> 对象绑定事件 <br /><br /><table style="BORDER-RIGHT: #cccccc 1px dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellspacing="0" cellpadding="6" width="95%" align="center" border="0"><tbody><tr><td style="WORD-WRAP: break-word" bgcolor="#f3f3f3"><font style="FONT-WEIGHT: bold; COLOR: #990000">以下是引用片段：</font><br />document.all.xxx.detachEvent(''onclick'',a); </td></tr></tbody></table><br /> 插件数目 <br /><br /><table style="BORDER-RIGHT: #cccccc 1px dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellspacing="0" cellpadding="6" width="95%" align="center" border="0"><tbody><tr><td style="WORD-WRAP: break-word" bgcolor="#f3f3f3"><font style="FONT-WEIGHT: bold; COLOR: #990000">以下是引用片段：</font><br />navigator.plugins </td></tr></tbody></table><br /> 取变量类型 <br /><br /><table style="BORDER-RIGHT: #cccccc 1px dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellspacing="0" cellpadding="6" width="95%" align="center" border="0"><tbody><tr><td style="WORD-WRAP: break-word" bgcolor="#f3f3f3"><font style="FONT-WEIGHT: bold; COLOR: #990000">以下是引用片段：</font><br />typeof(js_libpath) == "undefined"</td></tr></tbody></table> <br /> 下拉框 <br /><br /><table style="BORDER-RIGHT: #cccccc 1px dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellspacing="0" cellpadding="6" width="95%" align="center" border="0"><tbody><tr><td style="WORD-WRAP: break-word" bgcolor="#f3f3f3"><font style="FONT-WEIGHT: bold; COLOR: #990000">以下是引用片段：</font><br />下拉框.options[索引] <br />下拉框.options.length </td></tr></tbody></table><br /> 查找对象 <br /><br /><table style="BORDER-RIGHT: #cccccc 1px dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellspacing="0" cellpadding="6" width="95%" align="center" border="0"><tbody><tr><td style="WORD-WRAP: break-word" bgcolor="#f3f3f3"><font style="FONT-WEIGHT: bold; COLOR: #990000">以下是引用片段：</font><br />document.getElementsByName("r1"); <br />document.getElementById(id);</td></tr></tbody></table> <br /> 定时 <br /><br /><table style="BORDER-RIGHT: #cccccc 1px dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellspacing="0" cellpadding="6" width="95%" align="center" border="0"><tbody><tr><td style="WORD-WRAP: break-word" bgcolor="#f3f3f3"><font style="FONT-WEIGHT: bold; COLOR: #990000">以下是引用片段：</font><br />timer=setInterval(''scrollwindow()'',delay); <br />clearInterval(timer);</td></tr></tbody></table> <br /> 上一网页源 <br /><br /><table style="BORDER-RIGHT: #cccccc 1px dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellspacing="0" cellpadding="6" width="95%" align="center" border="0"><tbody><tr><td style="WORD-WRAP: break-word" bgcolor="#f3f3f3"><font style="FONT-WEIGHT: bold; COLOR: #990000">以下是引用片段：</font><br />asp: <br />request.servervariables("HTTP_REFERER") <br />javascript： <br />document.referrer </td></tr></tbody></table><br /> 释放 <br /><br /><table style="BORDER-RIGHT: #cccccc 1px dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellspacing="0" cellpadding="6" width="95%" align="center" border="0"><tbody><tr><td style="WORD-WRAP: break-word" bgcolor="#f3f3f3"><font style="FONT-WEIGHT: bold; COLOR: #990000">以下是引用片段：</font><br />CollectGarbage(); </td></tr></tbody></table><br /> 禁止右键 <br /><br /><table style="BORDER-RIGHT: #cccccc 1px dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellspacing="0" cellpadding="6" width="95%" align="center" border="0"><tbody><tr><td style="WORD-WRAP: break-word" bgcolor="#f3f3f3"><font style="FONT-WEIGHT: bold; COLOR: #990000">以下是引用片段：</font><br />document.oncontextmenu = function() { return false;} </td></tr></tbody></table><br /> 禁止保存 <br /><br /><table style="BORDER-RIGHT: #cccccc 1px dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellspacing="0" cellpadding="6" width="95%" align="center" border="0"><tbody><tr><td style="WORD-WRAP: break-word" bgcolor="#f3f3f3"><font style="FONT-WEIGHT: bold; COLOR: #990000">以下是引用片段：</font><br /><noscript><iframe src="*.htm"></iframe></noscript> </td></tr></tbody></table><br /> 禁止选取<br /><br /><table style="BORDER-RIGHT: #cccccc 1px dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellspacing="0" cellpadding="6" width="95%" align="center" border="0"><tbody><tr><td style="WORD-WRAP: break-word" bgcolor="#f3f3f3"><font style="FONT-WEIGHT: bold; COLOR: #990000">以下是引用片段：</font><br /><body oncontextmenu="return false" ondragstart="return false" onselectstart ="return false" onselect="document.selection.empty()" oncopy="document.selection.empty()" onbeforecopy="return false"onmouseup="document.selection.empty()> </td></tr></tbody></table><br /> 禁止粘贴 <br /><br /><table style="BORDER-RIGHT: #cccccc 1px dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellspacing="0" cellpadding="6" width="95%" align="center" border="0"><tbody><tr><td style="WORD-WRAP: break-word" bgcolor="#f3f3f3"><font style="FONT-WEIGHT: bold; COLOR: #990000">以下是引用片段：</font><br /><input type=text onpaste="return false"> </td></tr></tbody></table><br /> 地址栏图标 <br /><br /><table style="BORDER-RIGHT: #cccccc 1px dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellspacing="0" cellpadding="6" width="95%" align="center" border="0"><tbody><tr><td style="WORD-WRAP: break-word" bgcolor="#f3f3f3"><font style="FONT-WEIGHT: bold; COLOR: #990000">以下是引用片段：</font><br /><link rel="Shortcut Icon" href="favicon.ico"> <br />favicon.ico 名字最好不变16*16的16色,放虚拟目录根目录下 </td></tr></tbody></table><br /> 收藏栏图标 <br /><br /><table style="BORDER-RIGHT: #cccccc 1px dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellspacing="0" cellpadding="6" width="95%" align="center" border="0"><tbody><tr><td style="WORD-WRAP: break-word" bgcolor="#f3f3f3"><font style="FONT-WEIGHT: bold; COLOR: #990000">以下是引用片段：</font><br /><link rel="Bookmark" href="favicon.ico"> </td></tr></tbody></table><br /> 查看<br /> <br /><table style="BORDER-RIGHT: #cccccc 1px dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellspacing="0" cellpadding="6" width="95%" align="center" border="0"><tbody><tr><td style="WORD-WRAP: break-word" bgcolor="#f3f3f3"><font style="FONT-WEIGHT: bold; COLOR: #990000">以下是引用片段：</font><br /><input type=button value=查看网页源代码 onclick="window.location = ''view-source:'' ''http://www.aaa.com/''"> </td></tr></tbody></table><br /> 关闭输入法 <br /><br /><table style="BORDER-RIGHT: #cccccc 1px dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellspacing="0" cellpadding="6" width="95%" align="center" border="0"><tbody><tr><td style="WORD-WRAP: break-word" bgcolor="#f3f3f3"><font style="FONT-WEIGHT: bold; COLOR: #990000">以下是引用片段：</font><br /><input style="ime-mode:disabled"> </td></tr></tbody></table><br /> 自动全选 <br /><br /><table style="BORDER-RIGHT: #cccccc 1px dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellspacing="0" cellpadding="6" width="95%" align="center" border="0"><tbody><tr><td style="WORD-WRAP: break-word" bgcolor="#f3f3f3"><font style="FONT-WEIGHT: bold; COLOR: #990000">以下是引用片段：</font><br /><input type=text name=text1 value="123" onfocus="this.select()"> </td></tr></tbody></table>\r\n <p align="center"> </p>', '', '', ''),
(45, 4, '<p>首先，与其他语言不同，JS的效率很大程度是取决于JS engine的效率。除了引擎实现的优劣外，引擎自己也会为一些特殊的代码模式采取一些优化的策略。例如FF、Opera和Safari的JS引擎，都对字符串的拼接运算（+）做了特别优化。显然，要获得最大效率，就必须要了解引擎的脾气，尽量迎合引擎的口味。所以对于不同的引擎，所作的优化极有可能是背道而驰的。<br /><br />而如果做跨浏览器的web编程，则最大的问题是在于IE6（JScript 5.6）！因为在不打hotfix的情况下，JScript引擎的垃圾回收的bug，会导致其在真实应用中的performance跟其他浏览器根本不在一个数量级上。因此在这种场合做优化，实际上就是为JScript做优化！<br /><br />所以第一原则就是只需要为IE6（未打补丁的JScript 5.6或更早版本）做优化！<br /><br />如果你的程序已经优化到在IE6下可以接受的性能，那基本上在其他浏览器上性能就完全没有问题。<br /><br />因此，注意我下面讲的许多问题在其他引擎上可能完全不同，例如在循环中进行字符串拼接，通常认为需要用Array.join的方式，但是由于 SpiderMonkey等引擎对字符串的“+”运算做了优化，结果使用Array.join的效率反而不如直接用“+”！但是如果考虑IE6，则其他浏览器上的这种效率的差别根本不值一提。<br /><br />JS优化与其他语言的优化也仍然有相同之处。比如说，不要一上来就急吼吼的做优化，那样毫无意义。优化的关键，仍然是要把精力放在最关键的地方，也就是瓶颈上。一般来说，瓶颈总是出现在大规模循环的地方。这倒不是说循环本身有性能问题，而是循环会
24 小时内免费解锁 3 个项目，之后 1 算力/个。 规则说明
AI 解读 AI
登录后可用，每次 10 算力，解读结果公开显示在下面。
还没有人解读过这个文件。
微信安全登录