读书笔记 HTML+CSS基础教程 之HTML篇
2009年8月24日
最近将这本html和css的基础教程电子书看完了，都是些基础的东西，之前没有接触过这方面的书，看的过程中觉得自己还是有些小细节不知道的。笔记记在txt文件中了，这个是直接复制的，可能有些错位，你可以直接到本文的末尾下载txt文件！
基本概念
############################################################
1. WWW：World Wide Web的缩写，简称Web、万维网。在1989年由欧洲核子物理研究中心研制。
2. Internet包括：WWW、FTP及BBS等其他服务。
3. Web协议：超文本传输协议（Hyper Text Transfer Protocol，http）
4. WWW结构：服务端（Server，web服务器），客户端（Client，浏览器）
5 .超链接（Hyper link）、统一资源定位器（URL）、网站（Web Site）、网页（Web pages）、主页（Home page）
6. 动态HTML（DHTML）：包括JavaScript，VBScript，Document Model（文件目标模块），Layers及Cascading Style Sheets（CSS，层叠样式表，简称样式表）。主要是HTML规范、Script语言（JavaScript和VBScript）和CSS。
7. HTML语言：从1.0发展到4.0，元素名和URL不区分大小写。
8. <元素名称 属性1="值1" 属性2="值2">要控制的元素 ，其中的“”可省略。
HTML基础
############################################################
基本结构
····················································
文件开始标签
文件头部标签
文件标题标签
<br />
文件主体标签<body> <!--<body bgcolor=值1 background=值2 text=值3 link-值4 vlink="值5" alink="值6">……</body> 即网页内容的背景颜色、背景图片、字体颜色、链接颜色、已访问链接的颜色和正访问链接的颜色–></p>
<p>文字排版<br />
···················································<br />
换行标签<br /> <!--仅用<br />–><br />
强制不换行<nobr> <!--不管文本有多长，总是放在一行中显示。--><br />
自动换行<wbr> <!--根据屏幕宽度自动换行，当文本内容长度小于屏幕宽度时没有效果。--><br />
分段控制
<p> <!--将文章内容分段，可带align对齐属性。--><br />
原样显示文字
<pre> <!--达到无标记自动排版效果。--><br />
居中对齐<center><br />
引文<br />
<blockquote> <!--引用内容自动右移几格。--><br />
水平分割线<br />
<hr /> <!--有size(粗细，默认2)、width(宽度，默认100%)、align(对齐，默认center)、color(颜色，默认black)、noshade(显示3D阴影效果)--><br />
署名<br />
<address> <!--显示效果：居中、斜体。--></p>
<p>特殊字符<br />
···················································<br />
特殊或专用字符 数字代码 字符代码<br />
空格 <br />
© © ©<br />
® ® ®</p>
<p>注释标签<br />
···················································<br />
<!--注释的内容--><br />
<! 注释的内容></p>
<p>文字属性<br />
···················································<br />
标题文字<hn> <!--标题文字标签分为六级，从<br />
<h1>到<br />
<h6>文字越来越小越来越细。而标签本身具有换行作用。--><br />
文字格式控制<font> <!--<font face=值1 size=值2 color=值3>文字</font>即分别控制文字字体、大小和颜色。--><br />
特定文字标签<b> <!--加粗，与<strong>一样--><br />
<i> <!--斜体，与<em>一样--><br />
<u> <!--下划线--><br />
<code> <!--显示代码，不显示标签的效果。--></p>
<p>A标记的几个属性<br />
··················································<br />
网页内跳转：定义<a name="1">跳转到这里</a>，则用<a href="#1">点击这里跳转</a> 实现网页内跳转。<br />
发送邮件链接：<a href="mailto:email地址 subject="邮件主题">点击发送邮件</a><br />
目标属性：_blank：新窗口、_self：当前窗口、_parent：目前子窗口，若没有子窗口则当前窗口、_top：上层子窗口。</p>
<p>图片属性<br />
··················································<br />
基础知识：速度：GIF>JPEG>BMP 大小：BMP>JEPG>GIF GIF只能使用8位颜色（256种颜色），JPEG可使用24位<br />
<img>标签： <!--<img src="路径" alt="标注" height="" width="" align="" border="边框" vspace="图像与文本上下间距" hspace="图像与文本左右间距"--><br />
特殊用法：当文本没有填满图片周围空间，想在图像下重新开始一行文本用<br />不能达到效果，用<br clear="参数">参数可取left、right和all，一般用all即可！</p>
<p>列表项目<br />
·················································<br />
无序列表
<ul> <!--
<ul type="值">
<li>导航1</li>
<li>导航2</li>
<li>导航3</li>
</ul>
<p>自动换行显示，type值可取dise（实心圆）circle（空心圆）square（实心方形），值可在CSS中格外设置--><br />
有序列表
<ol> <!--
<ol type="值1" start="值2">
<li>导航1</li>
<li>导航2</li>
<li>导航3</li>
</ol>
<p>自动换行显示，值1取1表示1、2、3等序列，取A表示A、B、C等序列，取a表示a、b、c等序列。值2为序列开始值。--><br />
嵌套列表 <!--将一个列表镶嵌到另一个列表中，
<ul>
<li>导航</li>
<ol>
<li>子导航</li>
</ol>
</ul>
<p>--><br />
描述性列表
<dl>/
<dt>/
<dd>
<p>表格<br />
················································<br />
基本概念：由<br />
<table>、<br />
<tr>、
<th>和
<td>四个标签构成。<br />
<tr>为横行，
<td>为单元格，
<th>为表头单元格。<br />
属性<br />
边框尺寸 border<br />
边框颜色/边框颜色亮度 bordercolor/bordercolorhlight <!--bordercolor属性<br />
<table>标签、
<th>标签和<br />
<tr>标签都可用。--><br />
表格尺寸 width/height <!--有数字和百分比两种参数，数字是表格所占的像素，百分比是表格占浏览器大小的百分比。--><br />
表格位置 align <!--该属性为水平对齐方式，设置行内文字垂直方向对齐方式：<br />
<tr valign="参数">，参数有：top、middle和bottom，默认为middle。--><br />
表格背景色 bgcolor/background <!--<br />
<table>标签、
<th>标签和<br />
<tr>标签都可用。--><br />
表格框线密度 cellspacing<br />
框与内容间隙 cellpadding<br />
表格边框显示状态 frame <!--控制表格的最外部四个框线显示，参数有：box(显示整个边框)、void(不显示整个边框)、hsides(显示上下)、vsides(显示左右)、above(显示上)、below(显示下)、lhs(显示左)、rhs(显示右)--><br />
分割线显示状态 rules <!--控制表格中的分割线显示，参数有：all(显示所有)、groups(显示组与组：表头与其他)、rows(显示行与行)、cols(显示列与列)、none(都不显示)--><br />
表格标题<br />
<caption> <!--标签应放在<br />
<table>与<br />
<tr>之间。标签有两个属性：align和valign，其中valign没有middle属性。--><br />
单元格控制<br />
跨多行/跨多列 rowspan/colspan <!--表示该行/列所跨的行数/列数，默认为1--><br />
单元格内文字对齐 align/valign<br />
表格分组<br />
行分组
<thead>/<br />
<tbody>/<br />
<tfoot> <!--将表格按行分组，可分表头、表格主体和尾注三部分组成。--><br />
列分组<br />
<colgroup> <!--将表格按列分组，<br />
<colgroup span="数值" align="参数">，span表示改组包含的列数，align表示该组中所有数据在水平方向上的对齐方式。--></p>
<p>窗口框架<br />
···············································<br />
框架设置<frameset> <!--使用该标签代替<body>标签，结构如下：<frameset><frame name="frame1" src="url"><frame name="frame2" src="url"></frameset>，frameset中属性有：rows（水平分割，数字：数字、百分比：%、剩余值：*，默认为0）、cols（垂直分割，数字：数字、百分比：%、剩余值：*，默认为0）、border（边框大小）、bordercolor（边框颜色）、frameborder（是否显示边框，0不显示、1显示，默认1。）、--><br />
子窗口设置<frame> <!--主要属性：name（定义窗口名称）、src（该窗口地址）、marginwidth（显示内容与窗口左右边缘距离）、marginheight（显示内容与窗口上下边缘距离）、scrolling（该窗口是否有滚动条，yes有、no没有、auto自动，默认自动。）、noresize（无取值，只是一个标志，有这个属性则窗口不能调整大小，默认可调整。）--><br />
浮动窗口<iframe> <!--在一个页面中直接引用另一个页面：<iframe src="子窗口路径" name="自定义名称"></iframe>--></p>
<p>表单设计<br />
···············································<br />
建立表单<br />
<form> <!--语法格式：<br />
<form action="" method="">
<input>……<select>……</select>……<textarea>……</textarea></from>，action为存放位置，method为运行方式：post（没有长度限制）、get（小于255个字符）--><br />
定义输入项<br />
<input> <!--一个单标签，没有结束标签。五个属性：type（浏览者输入的值的九种类型：text：单行文本框、password：密码框、radio：单选框、checkbox：复选框、submit：提交按钮、reset：重置按钮、image：图像按钮、hidden：隐含框、file：文件选择输入框）、name（变量名）、size（文本框的长度）、value（预先出现的内容）、maxlength（允许输入的最大字符数），type和name是必需的。--><br />
下拉菜单<select>/<br />
<option> <!--<select name="" size=""><br />
<option>下拉选项1</option>
<option>下拉选项2</option>
<p></select><br />
多行文本框<textarea> <!--多行文本框，属性：name（输入框的名字）、rows（输入框的宽度）、cols（输入框的高度）--></p>
<p>动态效果<br />
···············································<br />
网页特效<br />
<meta>标签 <!--放在<head>标签内，数量没有限制。用以说明HTML文件，如文件所有权、所采用的字符集等。--><br />
<!--<meta name="generator" content="FrontPage">用以说明该网页是用FrontPage做的--><br />
<!--<meta http-equiv="content-type" content="text/html;charset=gb2312">用以说明该HTML文件所采用的字符集标准。--><br />
<!--<meta http-equiv="refresh" content="秒数;url=文件名称或网址">用以实现网页跳转功能。--><br />
插入多媒体<br />
插入型<embed>标签 <!--<embed src="多媒体文件的地址" width=宽度 height=高度 loop=循环次数> loop值可以使true(无限次循环)、no(仅播放一次，为默认)。--><br />
嵌入型<bgsound>标签 <!--<bgsound src="声音文件的地址" loop=次数> 支持wav、midi和mp3文件。循环次数可以是infinite(无限循环)---><br />
<img>标签 <!--<img src="图像文件的地址" dynsrc="视频文件" start=开始播放时间 loop=播放次数> <img>标签中可嵌入视频，仅支持avi格式文件。src为视频的封面。start属性：fileopen(打开网页开始播放，默认)和mouseover(鼠标移动到视频上开始播放)--><br />
滚动的文字<br />
<marquee>标签 <!--<marquee direction=移动方向 behavior=滚动方式 loop=循环次数 scrollamount=移动速度 scrolldelay=移动延迟 align=对齐方式 bgcolor="颜色" height=高度 width=宽度 hspace=左右边距 vspace=上下边距>要滚动的文字</marquee> behavior值，scroll(滚动播出)、slide(滚动到一方后停止)、alternate(来回滚动)--></p>
<p>读书笔记 HTML+<span class='wp_keywordlink_affiliate'><a href="http://www.coolwinds.cn/article/tag/css" title="查看 CSS 中的全部文章" target="_blank">CSS</a></span>基础教程 之HTML篇 TXT文件<br />
下载地址：<a target="_blank" href="http://www.qiannao.com/space/show/coolwinds/上传分享/HTML_CSS1.txt/.page">点击进入下载页面</a></p>
<!-- AD START -->
<!-- AD END -->
<div id="share-bottom" class="bookmark clearfix"></div>
<div id="announce" class="msg-info">
<strong>声明:</strong> 本文采用 <a href="http://creativecommons.org/licenses/by-nc-sa/3.0/" rel="nofollow external"><abbr title="署名-非商业性使用-相同方式共享">BY-NC-SA</abbr></a> 协议进行授权. 转载请注明转自: <a class="title" href="http://www.coolwinds.cn/article/life/211.htm">读书笔记 HTML+CSS基础教程 之HTML篇</a>
</div>
</div>
</div>
<div id="posts" class="clearfix">
<div id="related-posts"><div class="caption">More Articles about <h2><a href="http://www.coolwinds.cn/article/tag/css" rel="tag">CSS</a></h2></div><ul class="related_post"><li><a href="http://www.coolwinds.cn/article/design/1314.htm" title="教你在首页调用ecshop指定分类下的商品">教你在首页调用ecshop指定分类下的商品</a></li><li><a href="http://www.coolwinds.cn/article/design/120.htm" title="悼念5.12，以及网站灰色CSS代码">悼念5.12，以及网站灰色CSS代码</a></li><li><a href="http://www.coolwinds.cn/article/design/13.htm" title="Div+CSS布局入门教程">Div+CSS布局入门教程</a></li></ul></div></div>
<div id="comments">
<div id="cmtswitcher" class="clearfix">
<a id="commenttab" class="curtab" href="javascript:void(0);" rel="nofollow">评论 (0)</a>
<a id="trackbacktab" class="tab" href="javascript:void(0);" rel="nofollow">Trackbacks (0)</a>
<span class="addcomment"><a rel="nofollow" href="#respond">发表评论</a></span>
<span class="addtrackback"><a href="http://www.coolwinds.cn/article/life/211.htm/trackback" rel="nofollow">Make a trackback</a></span>
</div>
<!-- comments START -->
<ol id="thecomments" class="commentlist">
<li class="messagebox">
本文目前尚无任何评论.</li>
</ol>
<!-- comments END -->
<!-- trackbacks START -->
<ol id="thetrackbacks" class="trackbacklist">
<li class="messagebox">
本文目前尚无任何 trackbacks 和 pingbacks.</li>
</ol>
<div class="fixed"></div>
<!-- trackbacks END -->
</div>
<form action="http://www.coolwinds.cn/wp-comments-post.php" method="post" id="commentform">
<div id="respond">
<div id="author_info">
<div class="row">
<input type="text" name="author" id="author" class="textfield" value="" size="24" tabindex="1" />
<label for="author" class="small">昵称 (必填)</label>
</div>
<div class="row">
<input type="text" name="email" id="email" class="textfield" value="" size="24" tabindex="2" />
<label for="email" class="small">电子邮箱 (我们会为您保密) (必填)</label>
</div>
<div class="row">
<input type="text" name="url" id="url" class="textfield" value="" size="24" tabindex="3" />
<label for="url" class="small">网址</label>
</div>
</div>
<!-- comment input -->
<div class="row">
<textarea name="comment" id="comment" tabindex="4" rows="8" cols="50"></textarea>
</div>
<!-- comment submit and rss -->
<div id="submitbox" class="clearfix">
<a rel="nofollow" class="feed" href="http://www.coolwinds.cn/comments/feed" >订阅评论</a>
<div class="submitbutton">
<input name="submit" type="submit" id="cmt-submit" class="button" tabindex="5" value="提交评论" />
</div>
<input type="hidden" name="comment_post_ID" value="211" />
</div>
</div>
<p style="display: none;"><input type="hidden" id="akismet_comment_nonce" name="akismet_comment_nonce" value="4b151046a8" /></p>
<!-- Custom Smilies - Version 2.9.1 -->
<style type="text/css">
img.wp-smiley-select {cursor: pointer;}
</style>
<script type="text/javascript">
function grin(tag) {
if (typeof tinyMCE != 'undefined') {
grin_tinymcecomments(tag);
} else {
grin_plain(tag);
}
}
function grin_tinymcecomments(tag) {
tinyMCE.execCommand('mceInsertContent', false, ' ' + tag + ' ');
}
function grin_plain(tag) {
var myField;
var myCommentTextarea = "comment";
tag = ' ' + tag + ' ';
if (document.getElementById(myCommentTextarea) && document.getElementById(myCommentTextarea).type == 'textarea') {
myField = document.getElementById(myCommentTextarea);
} else {
return false;
}
if (document.selection) {
myField.focus();
sel = document.selection.createRange();
sel.text = tag;
myField.focus();
}
else if (myField.selectionStart || myField.selectionStart == '0') {
var startPos = myField.selectionStart;
var endPos = myField.selectionEnd;
var cursorPos = endPos;
myField.value = myField.value.substring(0, startPos)
+ tag
+ myField.value.substring(endPos, myField.value.length);
cursorPos += tag.length;
myField.focus();
myField.selectionStart = cursorPos;
myField.selectionEnd = cursorPos;
}
else {
myField.value += tag;
myField.focus();
}
}
function moreSmilies() {
document.getElementById('wp-smiley-more').style.display = 'inline';
document.getElementById('wp-smiley-toggle').innerHTML = '<a href="javascript:lessSmilies()">« less</a></span>';
}
function lessSmilies() {
document.getElementById('wp-smiley-more').style.display = 'none';
document.getElementById('wp-smiley-toggle').innerHTML = '<a href="javascript:moreSmilies()">more »</a>';
}
</script>
<img src='http://www.coolwinds.cn/wp-includes/images/smilies/zwj12.gif' alt=':9:' onclick='grin(":9:")' class='wp-smiley-select' /> <img src='http://www.coolwinds.cn/wp-includes/images/smilies/zwj45.gif' alt=':8:' onclick='grin(":8:")' class='wp-smiley-select' /> <img src='http://www.coolwinds.cn/wp-includes/images/smilies/zwj37.gif' alt=':7:' onclick='grin(":7:")' class='wp-smiley-select' /> <img src='http://www.coolwinds.cn/wp-includes/images/smilies/zwj18.gif' alt=':6:' onclick='grin(":6:")' class='wp-smiley-select' /> <img src='http://www.coolwinds.cn/wp-includes/images/smilies/zwj41.gif' alt=':5:' onclick='grin(":5:")' class='wp-smiley-select' /> <img src='http://www.coolwinds.cn/wp-includes/images/smilies/zwj08.gif' alt=':4:' onclick='grin(":4:")' class='wp-smiley-select' /> <img src='http://www.coolwinds.cn/wp-includes/images/smilies/zwj24.gif' alt=':3:' onclick='grin(":3:")' class='wp-smiley-select' /> <img src='http://www.coolwinds.cn/wp-includes/images/smilies/zwj17.gif' alt=':2:' onclick='grin(":2:")' class='wp-smiley-select' /> <img src='http://www.coolwinds.cn/wp-includes/images/smilies/zwj27.gif' alt=':1:' onclick='grin(":1:")' class='wp-smiley-select' /> <img src='http://www.coolwinds.cn/wp-includes/images/smilies/zwj07.gif' alt=':18:' onclick='grin(":18:")' class='wp-smiley-select' /> <img src='http://www.coolwinds.cn/wp-includes/images/smilies/zwj38.gif' alt=':17:' onclick='grin(":17:")' class='wp-smiley-select' /> <img src='http://www.coolwinds.cn/wp-includes/images/smilies/zwj43.gif' alt=':16:' onclick='grin(":16:")' class='wp-smiley-select' /> <img src='http://www.coolwinds.cn/wp-includes/images/smilies/zwj04.gif' alt=':15:' onclick='grin(":15:")' class='wp-smiley-select' /> <img src='http://www.coolwinds.cn/wp-includes/images/smilies/zwj11.gif' alt=':14:' onclick='grin(":14:")' class='wp-smiley-select' /> <img src='http://www.coolwinds.cn/wp-includes/images/smilies/zwj05.gif' alt=':13:' onclick='grin(":13:")' class='wp-smiley-select' /> <img src='http://www.coolwinds.cn/wp-includes/images/smilies/zwj29.gif' alt=':12:' onclick='grin(":12:")' class='wp-smiley-select' /> <img src='http://www.coolwinds.cn/wp-includes/images/smilies/zwj36.gif' alt=':11:' onclick='grin(":11:")' class='wp-smiley-select' /> <img src='http://www.coolwinds.cn/wp-includes/images/smilies/zwj20.gif' alt=':10:' onclick='grin(":10:")' class='wp-smiley-select' /> </form>
</div>
<!-- main END -->
<!-- sidebar START -->
<div id="sidebar">
<!-- sidebar north START -->
<!-- posts -->
<div class="widget">
<h3>CATEGORIES</h3>
<div class="content" id="links">
<ul>
<li class="cat-item cat-item-43"><a href="http://www.coolwinds.cn/article/category/ps" title="Photoshop相关知识和相关免费资源。">PS轻松学</a>
</li>
<li class="cat-item cat-item-49"><a href="http://www.coolwinds.cn/article/category/wp" title="Wordpress技巧、主题、插件等资源。">WP专题</a>
</li>
<li class="cat-item cat-item-1"><a href="http://www.coolwinds.cn/article/category/game" title="周末放轻松，小游戏，小休闲！">休闲游戏</a>
</li>
<li class="cat-item cat-item-4"><a href="http://www.coolwinds.cn/article/category/free" title="免费网络资源。">免费资源</a>
</li>
<li class="cat-item cat-item-5"><a href="http://www.coolwinds.cn/article/category/life" title="关于寒风的生活点滴。">我的生活</a>
</li>
<li class="cat-item cat-item-154"><a href="http://www.coolwinds.cn/article/category/video" title="精彩视频推荐。">推荐视频</a>
</li>
<li class="cat-item cat-item-6"><a href="http://www.coolwinds.cn/article/category/pc" title="电脑相关知识。">电脑玩家</a>
</li>
<li class="cat-item cat-item-102"><a href="http://www.coolwinds.cn/article/category/design" title="网站建设相关文章、代码和资源。">网站建设</a>
</li>
<li class="cat-item cat-item-103"><a href="http://www.coolwinds.cn/article/category/war3" title="关于游戏魔兽争霸3的相关文章、视频和录像。">魔兽争霸</a>
</li>
</ul>
<div class="fixed"></div>
</div>
</div>
<div class="widget">
<div class="title">Recent Posts</div>
<ul>
<li><a href="http://www.coolwinds.cn/article/design/1421.htm"> datatables高级应用之服务端处理数据 </a></li><li><a href="http://www.coolwinds.cn/article/design/1412.htm"> datatables之ajax的应用 </a></li><li><a href="http://www.coolwinds.cn/article/design/1384.htm"> jquery分页插件datatables各参数详细说明及简单应用 </a></li><li><a href="http://www.coolwinds.cn/article/pc/1376.htm"> 教你快速找出一听(1ting)音乐网的歌曲真实地址 </a></li><li><a href="http://www.coolwinds.cn/article/free/1367.htm"> 小巧的mysql数据库php管理工具phpMiniAdmin 1.7.111025寒风汉化版 </a></li></ul>
</div>
<!-- showcase -->
<!-- Posts View -->
<!-- recent comments -->
<div class="widget">
<div class="title">Recent Comments</div>
<ul>
<li class="rc-navi rc-clearfix"><span class="rc-loading">正在加载...</span></li><li id="rc-comment-temp" class="rc-item rc-comment rc-clearfix"><div class="rc-info"></div><div><div class="rc-excerpt"></div></div></li><li id="rc-ping-temp" class="rc-item rc-ping rc-clearfix"><span class="rc-label"></span></li></ul>
</div>
<!-- tag cloud -->
<div id="tag_cloud" class="widget">
<div class="title">Tag Cloud</div>
<a href='http://www.coolwinds.cn/article/tag/ai' class='tag-link-11' title='46 个话题' style='font-size: 14.848pt;'>AI</a>
<a href='http://www.coolwinds.cn/article/tag/avast' class='tag-link-14' title='5 个话题' style='font-size: 9.152pt;'>avast</a>
<a href='http://www.coolwinds.cn/article/tag/chrome' class='tag-link-16' title='3 个话题' style='font-size: 8pt;'>chrome</a>
<a href='http://www.coolwinds.cn/article/tag/css' class='tag-link-20' title='4 个话题' style='font-size: 8.64pt;'>CSS</a>
<a href='http://www.coolwinds.cn/article/tag/dedecms' class='tag-link-21' title='11 个话题' style='font-size: 11.072pt;'>dedecms</a>
<a href='http://www.coolwinds.cn/article/tag/flash' class='tag-link-24' title='6 个话题' style='font-size: 9.6pt;'>flash</a>
<a href='http://www.coolwinds.cn/article/tag/ie' class='tag-link-30' title='4 个话题' style='font-size: 8.64pt;'>IE</a>
<a href='http://www.coolwinds.cn/article/tag/inovast' class='tag-link-152' title='4 个话题' style='font-size: 8.64pt;'>inovast</a>
<a href='http://www.coolwinds.cn/article/tag/inove' class='tag-link-141' title='7 个话题' style='font-size: 9.92pt;'>inove</a>
<a href='http://www.coolwinds.cn/article/tag/mysql' class='tag-link-33' title='4 个话题' style='font-size: 8.64pt;'>mysql</a>
<a href='http://www.coolwinds.cn/article/tag/nod32' class='tag-link-34' title='10 个话题' style='font-size: 10.816pt;'>NOD32</a>
<a href='http://www.coolwinds.cn/article/tag/php' class='tag-link-38' title='9 个话题' style='font-size: 10.56pt;'>PHP</a>
<a href='http://www.coolwinds.cn/article/tag/pjblog' class='tag-link-40' title='4 个话题' style='font-size: 8.64pt;'>PJBLOG</a>
<a href='http://www.coolwinds.cn/article/tag/ps' class='tag-link-43' title='10 个话题' style='font-size: 10.816pt;'>PS轻松学</a>
<a href='http://www.coolwinds.cn/article/tag/qq' class='tag-link-44' title='12 个话题' style='font-size: 11.264pt;'>QQ</a>
<a href='http://www.coolwinds.cn/article/tag/vista' class='tag-link-46' title='5 个话题' style='font-size: 9.152pt;'>vista</a>
<a href='http://www.coolwinds.cn/article/tag/win7' class='tag-link-48' title='10 个话题' style='font-size: 10.816pt;'>win7</a>
<a href='http://www.coolwinds.cn/article/tag/wp' class='tag-link-49' title='14 个话题' style='font-size: 11.712pt;'>WP专题</a>
<a href='http://www.coolwinds.cn/article/tag/xp' class='tag-link-50' title='15 个话题' style='font-size: 11.84pt;'>XP</a>
<a href='http://www.coolwinds.cn/article/tag/%e4%b8%bb%e9%a2%98' class='tag-link-52' title='5 个话题' style='font-size: 9.152pt;'>主题</a>
<a href='http://www.coolwinds.cn/article/tag/%e4%bb%a3%e7%a0%81' class='tag-link-53' title='21 个话题' style='font-size: 12.736pt;'>代码</a>
<a href='http://www.coolwinds.cn/article/tag/%e5%85%8d%e8%b4%b9' class='tag-link-54' title='6 个话题' style='font-size: 9.6pt;'>免费</a>
<a href='http://www.coolwinds.cn/article/tag/%e5%85%8d%e8%b4%b9%e7%a9%ba%e9%97%b4' class='tag-link-55' title='7 个话题' style='font-size: 9.92pt;'>免费空间</a>
<a href='http://www.coolwinds.cn/article/tag/%e5%8d%a1%e5%b7%b4%e6%96%af%e5%9f%ba' class='tag-link-60' title='15 个话题' style='font-size: 11.84pt;'>卡巴斯基</a>
<a href='http://www.coolwinds.cn/article/tag/%e5%8e%bb%e5%b9%bf%e5%91%8a' class='tag-link-61' title='10 个话题' style='font-size: 10.816pt;'>去广告</a>
<a href='http://www.coolwinds.cn/article/tag/%e5%9f%9f%e5%90%8d' class='tag-link-64' title='5 个话题' style='font-size: 9.152pt;'>域名</a>
<a href='http://www.coolwinds.cn/article/tag/%e5%a4%a7%e5%ad%a6' class='tag-link-65' title='13 个话题' style='font-size: 11.52pt;'>大学</a>
<a href='http://www.coolwinds.cn/article/tag/%e5%ad%a6%e6%a0%a1' class='tag-link-66' title='11 个话题' style='font-size: 11.072pt;'>学校</a>
<a href='http://www.coolwinds.cn/article/tag/%e5%b0%8f%e7%ba%a2%e4%bc%9e' class='tag-link-67' title='5 个话题' style='font-size: 9.152pt;'>小红伞</a>
<a href='http://www.coolwinds.cn/article/tag/%e5%b7%a5%e4%bd%9c' class='tag-link-122' title='4 个话题' style='font-size: 8.64pt;'>工作</a>
<a href='http://www.coolwinds.cn/article/tag/%e5%be%ae%e7%82%b9' class='tag-link-68' title='5 个话题' style='font-size: 9.152pt;'>微点</a>
<a href='http://www.coolwinds.cn/article/tag/%e6%8f%92%e4%bb%b6' class='tag-link-105' title='9 个话题' style='font-size: 10.56pt;'>插件</a>
<a href='http://www.coolwinds.cn/article/tag/%e6%99%ba%e8%83%bdai%e7%94%b5%e8%84%91' class='tag-link-70' title='46 个话题' style='font-size: 14.848pt;'>智能AI电脑</a>
<a href='http://www.coolwinds.cn/article/tag/%e6%b5%8f%e8%a7%88%e5%99%a8' class='tag-link-75' title='5 个话题' style='font-size: 9.152pt;'>浏览器</a>
<a href='http://www.coolwinds.cn/article/tag/%e7%94%9f%e6%b4%bb' class='tag-link-78' title='28 个话题' style='font-size: 13.504pt;'>生活</a>
<a href='http://www.coolwinds.cn/article/tag/%e7%94%b5%e8%84%91' class='tag-link-79' title='26 个话题' style='font-size: 13.312pt;'>电脑</a>
<a href='http://www.coolwinds.cn/article/tag/%e7%9c%9f%e4%b8%89' class='tag-link-82' title='46 个话题' style='font-size: 14.848pt;'>真三</a>
<a href='http://www.coolwinds.cn/article/tag/%e7%a9%ba%e9%97%b4' class='tag-link-126' title='4 个话题' style='font-size: 8.64pt;'>空间</a>
<a href='http://www.coolwinds.cn/article/tag/%e7%bd%91%e7%ab%99' class='tag-link-86' title='45 个话题' style='font-size: 14.784pt;'>网站</a>
<a href='http://www.coolwinds.cn/article/tag/%e7%bd%91%e7%bb%9c' class='tag-link-87' title='10 个话题' style='font-size: 10.816pt;'>网络</a>
<a href='http://www.coolwinds.cn/article/tag/%e8%a7%86%e9%a2%91' class='tag-link-89' title='23 个话题' style='font-size: 12.992pt;'>视频</a>
<a href='http://www.coolwinds.cn/article/tag/%e8%bd%af%e4%bb%b6' class='tag-link-92' title='13 个话题' style='font-size: 11.52pt;'>软件</a>
<a href='http://www.coolwinds.cn/article/tag/%e9%87%91%e5%b1%b1%e6%af%92%e9%9c%b8' class='tag-link-95' title='6 个话题' style='font-size: 9.6pt;'>金山毒霸</a>
<a href='http://www.coolwinds.cn/article/tag/war3v' class='tag-link-9' title='9 个话题' style='font-size: 10.56pt;'>魔兽争霸</a>
<a href='http://www.coolwinds.cn/article/tag/war3' class='tag-link-103' title='69 个话题' style='font-size: 16pt;'>魔兽争霸</a></div>
<!-- sidebar north END -->
<!-- sidebar south START -->
<div class="mlink">
<div class="title">Links</div>
<ul>
<li><a href="http://www.ourren.com" title="" rel="external">ourren</a></li><li><a href="http://www.laiqiyu.com/" title="" rel="external">Yu'-blog</a></li><li><a href="http://www.se7ens.cn/" title="" rel="external">se7ens</a></li><li><a href="http://www.sahot.com" title="" rel="external">分享热点</a></li><li><a href="http://www.dkdiy.net/" title="" rel="external">手机DIY</a></li><li><a href="http://www.podidea.com" title="" rel="external">Eric’s Blog</a></li><li><a href="http://www.spridu.cn/" title="" rel="external">spridu</a></li><li><a href="http://www.orange3.cn" title="" rel="external">orange3</a></li></ul>
</div>
<div class="more"><a href="links">Show All »</a></div>
</div>
<!-- sidebar END --></div>
</div>
<!-- content END -->
<!-- footer START -->
<div id="footer">
<div class="inner clearfix">
<div id="copyright">
版权所有 © 2007-2012 <a href="http://www.coolwinds.cn">寒风网</a> . All rights reserved.
<div class="theme">
Powered by <a rel="external" href="http://wordpress.org/" >WordPress</a>. Theme by <a rel="external" href="http://www.neoease.com/">mg12</a>. Valid <a rel="external nofollow" href="http://validator.w3.org/check?uri=referer" >XHTML 1.1</a> and <a rel="external nofollow" href="http://jigsaw.w3.org/css-validator/check/referer?profile=css3" >CSS 3</a>.<div style="display:none"><script src='http://s79.cnzz.com/stat.php?id=641741&web_id=641741' language='JavaScript' charset='gb2312'></script></div><script language="javascript" type="text/javascript" src="http://js.users.51.la/2378560.js"></script>
<noscript><a href="http://www.51.la/?2378560" target="_blank"><img alt="网站统计" src="http://img.users.51.la/2378560.asp" style="border:none" /></a></noscript></div>
</div>
<!--<span id="mt"></span>-->
</div>
</div>
<!-- footer END -->
</div>
<!-- container END -->
<script type="text/javascript">
//<![CDATA[
var global = {
serverUrl :'http://www.coolwinds.cn',
templateUrl :'http://www.coolwinds.cn/wp-content/themes/paled',
includeEmailFeed :'',
emailFeedUrl :'',
feedUrl :'http://www.coolwinds.cn/feed',
includeSocial :'1',
socialName :'tencent',
socialUserName :'coolwinds',
subcount :'',
cse :'',
cseCx :'',
cseUrl :'http://www.coolwinds.cn/cse',
searchKeywords :''
};
//]]>
</script>
<script type="text/javascript" src="http://www.coolwinds.cn/wp-content/themes/paled/js/script.js"></script>
<script type='text/javascript'>
/* <![CDATA[ */
<!---- et_switcher plugin v2 ---->
(function($)
{
$.fn.et_shortcodes_switcher = function(options)
{
var defaults =
{
slides: '>div',
activeClass: 'active',
linksNav: '',
findParent: true, //use parent elements to define active states
lengthElement: 'li', //parent element, used only if findParent is set to true
useArrows: false,
arrowLeft: 'a#prev-arrow',
arrowRight: 'a#next-arrow',
auto: false,
autoSpeed: 5000,
slidePadding: '',
pauseOnHover: true,
fx: 'fade',
sliderType: ''
};
var options = $.extend(defaults, options);
return this.each(function()
{
var slidesContainer = jQuery(this).parent().css('position','relative'),
$slides = jQuery(this).css({'overflow':'hidden','position':'relative'}),
$slide = $slides.find(options.slides).css({'opacity':'1','position':'absolute','top':'0px','left':'0px','display':'none'}),
slidesNum = $slide.length,
zIndex = slidesNum,
currentPosition = 1,
slideHeight = 0,
$activeSlide,
$nextSlide;
if (options.fx === 'slide') {
$slide.css({'opacity':'0','position':'absolute','top':'0px','left':'0px','display':'block'});
} else {
$slide.filter(':first').css({'display':'block'});
}
if (options.slidePadding != '') $slide.css('padding',options.slidePadding);
$slide.each(function(){
jQuery(this).css('z-index',zIndex).addClass('clearfix');
if (options.fx === 'slide') zIndex--;
slideH = jQuery(this).innerHeight();
if (slideH > slideHeight) slideHeight = slideH;
});
$slides.css('height', slideHeight);
$slides.css('width', $slides.width());
var slideWidth = $slide.width(),
slideOuterWidth = $slide.outerWidth();
$slide.css('width',slideWidth);
$slide.filter(':first').css('opacity','1');
if (options.sliderType != '') {
if (options.sliderType === 'images') {
controllersHtml = '<div class="controllers-wrapper"><div class="controllers"><a href="#" class="left-arrow">Previous</a>';
for ($i=1; $i<=slidesNum; $i++) {
controllersHtml += '<a class="switch" href="#">'+$i+'</a>';
}
controllersHtml += '<a href="#" class="right-arrow">Next</a></div><div class="controllers-right"></div></div>';
$controllersWrap = jQuery(controllersHtml).prependTo($slides.parent());
}
var etimage_width = $slide.width();
slidesContainer.css({'width':etimage_width});
$slides.css({'width':etimage_width});
if (options.sliderType === 'images') {
slidesContainer.css({'height':$slide.height()});
$slides.css({'height':$slide.height()});
var controllers_width = $controllersWrap.width(),
leftPosition = Math.round((etimage_width - controllers_width) / 2);
$controllersWrap.css({left: leftPosition});
}
}
if (options.linksNav != '') {
var linkSwitcher = jQuery(options.linksNav);
var linkSwitcherTab = '';
if (options.findParent) linkSwitcherTab = linkSwitcher.parent();
else linkSwitcherTab = linkSwitcher;
if (!linkSwitcherTab.filter('.active').length) linkSwitcherTab.filter(':first').addClass('active');
linkSwitcher.click(function(){
var targetElement;
if (options.findParent) targetElement = jQuery(this).parent();
else targetElement = jQuery(this);
var orderNum = targetElement.prevAll(options.lengthElement).length+1;
if (orderNum > currentPosition) gotoSlide(orderNum, 1);
else gotoSlide(orderNum, -1);
return false;
});
}
if (options.useArrows) {
var $right_arrow = jQuery(options.arrowRight),
$left_arrow = jQuery(options.arrowLeft);
$right_arrow.click(function(){
if (currentPosition === slidesNum)
gotoSlide(1,1);
else
gotoSlide(currentPosition+1),1;
if (options.linksNav != '') changeTab();
return false;
});
$left_arrow.click(function(){
if (currentPosition === 1)
gotoSlide(slidesNum,-1);
else
gotoSlide(currentPosition-1,-1);
if (options.linksNav != '') changeTab();
return false;
});
}
function changeTab(){
if (linkSwitcherTab != '') {
linkSwitcherTab.siblings().removeClass('active');
linkSwitcherTab.filter(':eq('+(currentPosition-1)+')').addClass('active');
}
}
function gotoSlide(slideNumber,dir){
if ($slide.filter(':animated').length) return;
$slide.css('opacity','0');
$activeSlide = $slide.filter(':eq('+(currentPosition-1)+')').css('opacity','1');
if (currentPosition === slideNumber) return;
$nextSlide = $slide.filter(':eq('+(slideNumber-1)+')').css('opacity','1');
if ((currentPosition > slideNumber || currentPosition === 1) && (dir === -1)) {
if (options.fx === 'slide') slideBack(500);
if (options.fx === 'fade') slideFade(500);
} else {
if (options.fx === 'slide') slideForward(500);
if (options.fx === 'fade') slideFade(500);
}
currentPosition = $nextSlide.prevAll().length + 1;
if (options.linksNav != '') changeTab();
if (typeof interval != 'undefined' && options.auto) {
clearInterval(interval);
auto_rotate();
}
return false;
}
if (options.auto) {
auto_rotate();
var pauseSlider = false;
}
if (options.pauseOnHover) {
slidesContainer.hover(function(){
pauseSlider = true;
},function(){
pauseSlider = false;
});
}
function auto_rotate(){
interval = setInterval(function(){
if (!pauseSlider) {
if (currentPosition === slidesNum)
gotoSlide(1,1);
else
gotoSlide(currentPosition+1),1;
if (options.linksNav != '') changeTab();
}
},options.autoSpeed);
}
function slideForward(speed){
$nextSlide.css('left',slideOuterWidth+'px');
$activeSlide.animate({left: '-'+slideOuterWidth},speed);
$nextSlide.animate({left: 0},speed);
}
function slideBack(speed){
$nextSlide.css('left','-'+slideOuterWidth+'px');
$activeSlide.animate({left: slideOuterWidth},speed);
$nextSlide.animate({left: 0},speed);
}
function slideFade(speed){
$activeSlide.css({zIndex: slidesNum}).fadeOut(700);
$nextSlide.css({zIndex: (slidesNum+1)}).fadeIn(700);
}
});
}
})(jQuery);
<!---- end et_switcher plugin v2 ---->
/////// Shortcodes Javascript ///////
/// tooltip ///
$et_tooltip = jQuery('.et-tooltip');
$et_tooltip.hover(function(){
jQuery(this).find('.et-tooltip-box').animate({ opacity: 'show', bottom: '25px' }, 300);
},function(){
jQuery(this).find('.et-tooltip-box').animate({ opacity: 'hide', bottom: '35px' }, 300);
})
/// learn more ///
$et_learn_more = jQuery('.et-learn-more .heading-more');
$et_learn_more.click(function(){
if ( jQuery(this).hasClass('open') )
jQuery(this).removeClass('open');
else
jQuery(this).addClass('open');
jQuery(this).parent('.et-learn-more').find('.learn-more-content').animate({ opacity: 'toggle', height: 'toggle' }, 300);
});
/* ]]> */
</script>
<script type="text/javascript">
//<![CDATA[
var rcGlobal = {
serverUrl :'http://www.coolwinds.cn',
infoTemp :'%REVIEWER% 在 %POST%',
loadingText :'正在加载',
noCommentsText :'没有任何评论',
newestText :'« 最新的',
newerText :'« 上一页',
olderText :'下一页 »',
showContent :'1',
external :'',
avatarSize :'34',
avatarPosition :'left',
anonymous :'匿名',
initJson :{items:[{"ellipsis":"1","avatarImage":"http://qun.qq.com/cgi/svr/face/getface?type=1&uin=806241138","postTitle":"jquery分页插件datatables各参数详细说明及简单应用","postUrl":"http://www.coolwinds.cn/article/design/1384.htm","reviewerName":"mufasa","reviewerUrl":"","excerpt":"我最近也在研究dat","id":"4731","type":""},{"avatarImage":"http://www.coolwinds.cn/wp-content/gravatar_cache/3837f644ff54706f970a8dc2dcc0d0f2","postTitle":"datatables高级应用之服务端处理数据","postUrl":"http://www.coolwinds.cn/article/design/1421.htm","reviewerName":"脚后跟痛是什么原因","reviewerUrl":"http://www.axmie.com/","excerpt":"第一次来支持你。","id":"4671","type":""},{"ellipsis":"1","avatarImage":"http://www.coolwinds.cn/wp-content/gravatar_cache/6f31c01826ac693f791b6c6231872f56","postTitle":"datatables高级应用之服务端处理数据","postUrl":"http://www.coolwinds.cn/article/design/1421.htm","reviewerName":"无风起舞","reviewerUrl":"","excerpt":"@寒风 谢谢，已","id":"4629","type":""},{"ellipsis":"1","avatarImage":"http://www.coolwinds.cn/wp-content/gravatar_cache/0a0fa4678f8505208af59940745d6002","postTitle":"外贸网站必备：为ecshop加上IP屏蔽功能，限制ip访问","postUrl":"http://www.coolwinds.cn/article/design/1331.htm","reviewerName":"fallenlin","reviewerUrl":"http://www.leico.tw","excerpt":"高手你好：我依照您的","id":"4535","type":""},{"ellipsis":"1","avatarImage":"http://qun.qq.com/cgi/svr/face/getface?type=1&uin=89769510","postTitle":"datatables高级应用之服务端处理数据","postUrl":"http://www.coolwinds.cn/article/design/1421.htm","reviewerName":"懒人梦醒","reviewerUrl":"http://mxlove.org","excerpt":"发现越来越成技术型博","id":"4415","type":""}],navi:{more:"1",page:"1"}}};
//]]>
</script>
<script type='text/javascript' src='http://www.coolwinds.cn/wp-content/plugins/wp-recentcomments/js/wp-recentcomments.js?ver=2.0.6'></script>
</body>
</html>
