前言：
将网页上的标签有机组合，通过JavaScript操作DOM改变标签实现效果，通过数据库存储或其他手段存储数据，实现动态网页，实现的技术就产生了很多编程语言去实现人们想要的效果,人们很聪明也很懒，就写了很多框架方便开发，而这些框架就需要学习了,为了实现真正的跨平台，于是产生了HTML5，为了满足人们眼球的私欲，就产生了JS，Flash，SilverLight等为了偷懒开发，就产生了JQuery,Dojo,ExtJS等JS框架，时代在进步，手机等小型的方便的智能设备更加得到人们的青睐，于是产生了IOS，Andriod，WP7等，于是产生了很多手机应用和开发人员的那些东西，为了提高网页效率，人们在浏览器上下功夫，产生了CSS3和HTML5 来替代以前JS，Flash等,就目前而言，能实现客户想要的效果的都是好技术，目前估计CSS3和HTML5不会影响太大,未来就不一定了。网页开发( BS )比那些桌面开发(CS)的东西要掌握的东西要多的多，考虑的问题也很多,界面要好看，用户体验要好，就产生UI工程师和很多新技术（例如AJAX），做动态网站的后台语言不同，就产生了,PHP,ASP.NET,JSP等行业,不同的专业知识就有很多知识你要掌握了，这辈子估计你都学不完.游戏行业又有很多知识，关于其他的,我就不想说了，总之一句话：确定你的目标，知道你需要那些知识，然后计划，最后实现它,几年应该要的。本系列文章只作为参考和学习用，帮你引导，本人能力有限,错误之处还请多多包涵。目前没有索引页，等全部或者适当的需要的情况下会建立索引页。
第一期主要讲一些很基础的东西，也是后面几期学习的基础。巩固自己的知识，分享自己的技术，活的会觉得很有价值~
本期宣传语：没有你的允许，没有人能叫你放弃！我会选择坚持！
============================================= 目录 ======================================
1.html篇
2.C#控制台篇
3.Asp.NET篇
6.JQuery篇
8.C# 框架篇
--------------------------------------------------------SubSonic篇----------------------------------------------------------------------------------
工作为主吧...还请原谅
ACTION GO! 清新空气QQ1578741102
一、 HTML篇 
[掌握要求:知道w3c和一些规范等,会熟练使用盒子模型,设计盒子布局,浮动属性等]
1.1 W3C标准
① World Wide Web Consortium：对Web进行标准化，不是针对Web网页制订的标准，而是一系列标准的集合
- 结构（Structure）：内容方面：XHTML（Extension HyberText Markup Language）和XML
- 表现（Presentation）：用来美化界面,主要包括css
- 行为（Behavior）：主要包括DOM（Document Object Model）和ECMAScript等
② DOM和ECMAScript是javascript的标准，XHTML是更严格更纯净的HTML版本，XHTML1.0规定了三种级别的声明
- Strict（严格类型）
- Transitional（过渡类型）
- Frameset（框架类型）：Strict严格标准不允许使用框架，当页面中需要使用框架时，则使用该声明
③ 常用组织内容的标签：
div,span,p,h1,h2,h3,h4,h5,h6,ol,ul,li,dl-dt-dd
④ CSS：Cascading Style Sheets 层叠样式表
在</head>标签之上添加
<link rel="stylesheet" type="text/css" href="Style.css"/>
引入外部样式表
⑤ JS:JavaScript
在</head>标签之上添加
<script type="text/javascript" src="jquery.js"></script>
引入外部js文件，和css引入方法很多相似，行内，内嵌，外部
⑥ XHTML规范有很多,主要基本规范
- 标签名和属性名必须小写
- HTML标签必须关闭
- 属性值必须用引号引起来
- 标签必须正确嵌套
- 文档必须有一个根元素
- 属性不能简写
⑦ Web开发注意的问题，主要以下几点
- 不要使用不符合W3C标准的标签，例如<b><font><marque>，可以参考w3教程(http://w3school.com.cn)或官方文档(http://www.w3c.org)
- <img/>标签必须有alt属性值，给出图片说明
- 注意样式和内容分离的原则
- 注意表单控件name和id属性。<form>表单推荐使用id而不是name属性。例如<form id=”mail”…>，除单选按钮外，控件的命名一般同事用id和name属性，两者取值相同。命名规范，例如userName,maxAge
- 页面布局尽量采用DIV+CSS布局：HTML的内容结构语义化，使用表格布局看不出语义。商业网站的二面要尽量符合搜索引擎优化（SEO），增强页面结构层次，方便被Google,sohu,百度等搜索引擎搜索到，提高排名
- 页面兼容性：网页的内容组织和样式表现要尽量符合W3C XHTML 1.0的标准
符合W3C规范页面的结构
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
</body>
</html>
1.2 盒子模型
这幅图已经很明显的告知了你盒子模型了。顺便也告诉你margin，padding，border的用法了。
1.2.1关于页面元素的宽度和高度的计算
还有一幅图：最右边的元素也就是最上面的显示元素，上面的遮住下面的元素，可见背景图片是在背景颜色上面的
理论不如实践(初步体验JS,CSS)
小知识：<div>独占一行，也可以通过css属性，使多个div在一行，<span>标签，在一行，都可以理解成盒子，HTML中的盒子：用来容纳很多HTML元素（也就是标签）的一个逻辑整体。
注意：CSS，JS文件与页面分开写，必要的话也可以写在页面里，方便管理
本例子只是演示
附录一（Dreamweavor快捷键）：
文件菜单
新建文档 Ctrl+N
打开一个 HTML文件 Ctrl+O或者将文件从[文件管理器]或[站点]窗口拖动到[文档]窗口中
在框架中打开 Ctrl+Shift+O
关闭 Ctrl+W
保存 Ctrl+S
另存为 Ctrl+Shift+S
检查链接 Shift + F8
退出 Ctrl+Q
编辑菜单
撤消 Ctrl+Z
重复 Ctrl+Y 或 Ctrl+Shift+Z
剪切 Ctrl+X 或Shift+Del
拷贝 Ctrl+C 或Ctrl+Ins
粘贴 Ctrl+V 或Shift+Ins
清除 Delete
全选 Ctrl+A
选择父标签 Ctrl+Shift+<
选择子标签 Ctrl+Shift+>
查找和替换 Ctrl+F
查找下一个 F3
缩进代码 Ctrl+Shift+]
左缩进代码 Ctrl+Shift+[
平衡大括弧 Ctrl+’
启动外部编辑器 Ctrl+E
参数选择 Ctrl+U
页面视图
标准视图 Ctrl+Shift+F6
布局视图 Ctrl+F6
工具条 Ctrl+Shift+T
查看页面元素
可视化助理 Ctrl+Shift+I
标尺 Ctrl+Alt+R
显示网格 Ctrl+Alt+G
靠齐到网格 Ctrl+Alt+Shift+G
头内容 Ctrl+Shift+W
页面属性 Ctrl+Shift+J
代码编辑
切换到设计视图 Ctrl+Tab
打开快速标签编辑器 Ctrl+T
选择父标签 Ctrl+Shift+<
平衡大括弧 Ctrl+’
全选 Ctrl+A
拷贝 Ctrl+C
查找和替换 Ctrl+F
查找下一个 F3
替换 Ctrl+H
粘贴 Ctrl+V
剪切 Ctrl+X
重复 Ctrl+Y
撤消 Ctrl+Z
切换断点 Ctrl+Alt+B
向上选择一行 Shift+Up
向下选择一行 Shift+Down
选择左边字符 Shift+Left
选择右边字符 Shift+Right
向上翻页 Page Up
向下翻页 Page Down
向上选择一页 Shift+Page Up
向下选择一页 Shift+Page Down
选择左边单词 Ctrl+Shift+Left
选择右边单词 Ctrl+Shift+Right
移到行首 Home
移到行尾 End
移 动到代码顶部 Ctrl+Home
移 动到代码尾部 Ctrl+End
向上选择到代码顶部 Ctrl+Shift+Home
向下选择到代码顶部 Ctrl+Shift+End
编辑文本
创建新段落 Enter
插入换行
Shift+Enter
插入不换行空格 Ctrl+Shift+Spacebar
拷贝文本或对象到页面其他位置 Ctrl+拖动选取项目到新位置
选取一个单词 双击
将选定项目添加到库 Ctrl+Shift+B
在设计视图和代码编辑器之间切换 Ctrl+Tab
打开和关闭[属性]检查器 Ctrl+Shift+J
检查拼写 Shift+F7
格式化文本
缩进 Ctrl+]
左缩进 Ctrl+[
格式>无
Ctrl+0 (零)
段落格式 Ctrl+Shift+P
应用标题1到6到段落 Ctrl+1 到 6
对齐>左对齐
Ctrl+Shift+Alt+L
对齐>居中
Ctrl+Shift+Alt+C
对齐>右对齐
Ctrl+Shift+Alt+R
加粗选定文本 Ctrl+B
倾斜选定文本 Ctrl+I
编辑样式表 Ctrl+Shift+E
查找和替换文本
查找 Ctrl+F
查找下一个/再查找 F3
替换 Ctrl+H
DreamweavorCS6中的代码提示默认是 Ctrl+H
其他：在菜单栏→编辑→快捷键→命令→应用原格式，将原格式应用于选定内容 设置快捷键，常用的，我设置的是CTRL+Shift+Q （Q代表全部）和 CTRL+Shift+E(这个我受vs的Ctrl+E+D格式化代码影响)
Ctrl_Alt+I 插入图片，Ctrl+Alt+F 插入Flash
在快捷键→编辑→代码提示工具，将下面的快捷键进行修改，很常用，我都是Ctrl+Alt开头的
下面是我的设置
Ctrl+U 打开首选参数设置界面
F12 运行网页
根据个人能力去设置哦；
个人比较喜欢这个demo，虽然比较丑，但是几乎融合了50%的HTML标签，有的没有写在里面是因为，有的标签很重要，想单独举例讲
本例稍稍添加了一个css3特性 transition 单击表单案例中的checkbox会有动画效果。本例中的后台代码注释也添加了很多说明，也是自己对某些的标签的简短看法
1、Demo1（回忆曾经的标签,曾经基本的）：
常用标签大回忆
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <!--我在这里设置了网页编码信息,中简：gb2312,繁体：big5,纯英文iso 6 -8859-1我想起了JAVA中的JSP乱码--> 7 <title>预备知识</title> 8 <style> 9 <!--随便一个初体验css3--> 10 #ckd,#ckSport_0,#ckSport_1,#ckSport_2 { 11 -webkit-transition: all 1s ease-in 0s; 12 -moz-transition: all 1s ease-in 0s; 13 -ms-transition: all 1s ease-in 0s; 14 -o-transition: all 1s ease-in 0s; 15 transition: all 1s ease-in 0s; 16 } 17 #ckd:checked,#ckSport_0:checked,#ckSport_1:checked,#ckSport_2:checked { 18 border-color: #F0F0F0; 19 margin-left: 50px; 20 } 21 22 </style> 23 <!--我是注释--> 24 <script src="Scripts/swfobject_modified.js" type="text/javascript"></script> 25 </head> 26 <body bgcolor="#999999"> 27 <!--可类比于Table,tr,td--> 28 <div style="height:600px;width:900px"><!--内嵌样式--> 29 <h2>各种各样的基本网页标签</h2> 30 <!----> 31 <!--直接写内容-->以下是 h+数字标题系列，可用Ctrl+数字1-6键 32 ，快速输入，选中需要的文字，按Ctrl+数字，快速给文字加标题 33 <div> 34 <h1>h1</h1> 35 <h2>22</h2> 36 <h3>h3</h3> 37 <h4>h4</h4> 38 <h5>h5</h5> 39 <h6>h6</h6> 40 <p>关于转义符号&,输入后有很多提示,列举几个： 41 &lt;是<,&bt;是>,&quot;是引号,&nbsp;是空格，ｄｗ中用Ctrl+Shift+空格,打出一个以上的空格,&copy;打出版权©等，具体直接看提示代码就行了，不要死记硬背</p> 42 <p> </p> 43 <p><p>表示段落</p> 44 <p><br/> 45 <br/>表示换行</p> 46 <p><img> 标签插入图片，Ctrl+Alt+I 快速插入,flash是Ctrl+Alt+F，alt在w3c中必须要写，规定的</p> 47 <p>图片align属性,表示图像与文本的对齐</p> 48 <p> <img src="image/testPic.jpg" width="250" height="400" alt="我是测试图片，我的align是middle" align="middle" border="3" />我是文字，我的左侧图片的align设置成了middle，我还可以设置top,bottom,left,right,我被直接设置了border， HTML 4.01 不推荐使用图像的 "border" 属性。在 XHTML 1.0 Strict DTD 和 HTML 5 中，不再支持该属性。 </p> 49 <p>建议： 50 <img style="border:5px solid black"> </p> 51 <p>插入一段flash</p> 52 <p> 53 <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="590" height="300" id="FlashID" title="绚烂极光"> 54 <param name="movie" value="image/58.swf" /> 55 <param name="quality" value="high" /> 56 <param name="wmode" value="opaque" /> 57 <param name="swfversion" value="8.0.35.0" /> 58 <!-- 此 param 标签提示使用 Flash Player 6.0 r65 和更高版本的用户下载最新版本的 Flash Player。如果您不想让用户看到该提示，请将其删除。 --> 59 <param name="expressinstall" value="Scripts/expressInstall.swf" /> 60 <!-- 下一个对象标签用于非 IE 浏览器。所以使用 IECC 将其从 IE 隐藏。 --> 61 <!--[if !IE]>--> 62 <object type="application/x-shockwave-flash" data="image/58.swf" width="590" height="300"> 63 <!--<![endif]--> 64 <param name="quality" value="high" /> 65 <param name="wmode" value="opaque" /> 66 <param name="swfversion" value="8.0.35.0" /> 67 <param name="expressinstall" value="Scripts/expressInstall.swf" /> 68 <!-- 浏览器将以下替代内容显示给使用 Flash Player 6.0 和更低版本的用户。 --> 69 <div> 70 <h4>此页面上的内容需要较新版本的 Adobe Flash Player。</h4> 71 <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="获取 Adobe Flash Player" width="112" height="33" /></a></p> 72 </div> 73 <!--[if !IE]>--> 74 </object> 75 <!--<![endif]--> 76 </object> 77 </p> 78 <p> </p> 79 <p> </p> 80 <pre><!--在标签内什么样，显示出来就什么样，空格也方便了，哈哈，吼吼！--> 81 hello,你好 我在学习html基础知识 我在用<pre>,<pre> 82 在标签内什么样，显示出来就什么样，空格也方便了，哈哈，吼吼！ 83 哈哈，吼吼！ 84 </pre> 85 我是<hr>标签 86 <hr size="5" width="600" color="#23530D"/> 87 表示长度一般都可以用百分比表示比率 88 <hr size="5" width="600" color="#23530D"/> 89 <p>垂直：</p> 90 <hr size="600" width="5" color="#23530D"/> 91 <p> </p> 92 <p>下面是个很重要的标签，经常用于做导航栏和列表显示数据</p> 93 <p>无序列表<ul><li>,他还有个类似的有序列表<ol><li></p> 94 <p>无序列表 <!--三个值，squre,circle,disc(默认值),也可以不显示,无序列表，没有显示的顺序--></p> 95 <div> 96 <ul type="square"> 97 <!--三个值，squre,circle,disc(默认值),也可以不显示,无序列表，没有显示的顺序--> 98 <li>中国人</li> 99 <li>韩国美女</li> 100 <li>日本男人</li> 101 </ul> 102 </div> 103 <div> 104 <ol type="1"> 105 <p> 106 <!--五个值，1(默认值)a,A,I,i,也可以不显示,有序列表，显示的有顺序，比如数字作为标号--> 107 </p> 108 <p>有序列表 <!--五个值，1(默认值)a,A,I,i,也可以不显示,有序列表，显示的有顺序，比如数字作为标号--></p> 109 <li>中国人</li> 110 <li>韩国美女</li> 111 <li>日本男人</li> 112 </ol> 113 </div> 114 <p> 超链接<a href=""></p> 115 <p>本页链接 跳到<a href="#suggestDontUse">建议不用的标签</a>这里</p> 116 <p>其他页面链接<a href="HyberLinkTest.html">测试超链接</a></p> 117 <p>顺便学习一下表格</p> 118 <p><!--dw中直接插入表格,输入几行几列就行了，选中单元格可以行合并colspan或者列合并,cellspacing,cellpadding常被设成0,具体怎样，尝试一下，你就知道了，边框看不见可以设置border=0,此处为了演示，就显示出来,在dw中设计界面按住Ctrl不放，鼠标移到table的td中可选中TD</p> 119 <p>然后dw中界面有个属性窗口，你可以修改他的属性</p> 120 <table width="600" border="1" cellspacing="0" cellpadding="0" bgcolor="yellow" bordercolor="#000000" > 121 <!--dw中直接插入表格,输入几行几列就行了，选中单元格可以行合并colspan或者列合并,cellspacing,cellpadding常被设成0,边框不用可以设置border=0,此处为了演示，就显示出来了--> 122 <tr bgcolor="#33FF00"> 123 <td>属性值</td> 124 <td>说明</td> 125 </tr> 126 <tr> 127 <td><a href="HyberLinkTest.html" target="_blank">_blank</a></td> 128 <td>新启动一个窗口打开链接</td> 129 </tr> 130 <tr> 131 <td><a href="HyberLinkTest.html" target="_self">_self</a></td> 132 <td bgcolor="#FF0000">在本窗口中打开</td> 133 </tr> 134 <tr> 135 <td><a href="HyberLinkTest.html" target="_parent">_parent</a></td> 136 <td>在上一级窗口中打开</td> 137 </tr> 138 <tr align="center"><!--相对于tr--> 139 <td><a href="HyberLinkTest.html" target="_top">_top</a></td> 140 <td>在整个浏览器的窗口中打开</td> 141 </tr> 142 <tr> 143 <td colspan="2"> </td> 144 </tr> 145 <tr> 146 <td colspan="2" align="center">只是演示colspan (column span)合并列 ，还有rowspan合并行，文字居中</td> 147 <!--align可用于--> 148 </tr> 149 </table> 150 <p> </p> 151 <p>关于电子邮件链接： <a href="mailto:1578741102@qq.com">我的邮箱</a></p> 152 153 <div style="height:600px;width:900px;background:url(image/styl%2011.jpg)"> 154 <h3>表单系列</h3> 155 <!--post安全，get不安全--> 156 <form action="HyberLinkTest.html" method="post" name="firstForm" target="_blank"> 157 <!--文本框 --> 158 文本框： 159 <input name="username" type="text" height="20" maxlength="20" /> 160 <br/> 161 162 密码框： 163 <input name="userpwd" type="password" height="20" maxlength="20" /> 164 <br/> 165 文本域： 166 <textarea name="mark" cols="22" rows="4"></textarea> 167 <br/> 168 普通按钮： 169 <input name="btn1" type="button" value="普通" /> 170 <br/> 171 提交按钮： 172 <input name="btn2" type="submit" value="提交" /> 173 <br/> 174 重置按钮： 175 <input name="btn3" type="reset" value="重置" /> 176 <br/> 177 复选框： 178 <br/> 179 <p> 180 <label> 181 <input type="checkbox" name="ckSport" value="中国" id="ckSport_0"/> 182 中国</label> 183 <br /> 184 <label> 185 <input type="checkbox" name="ckSport" value="韩国" id="ckSport_1" /> 186 韩国</label> 187 <br /> 188 <label> 189 <input type="checkbox" name="ckSport" value="日本" id="ckSport_2" /> 190 日本</label> 191 <br /> 192 <!--radio单选按钮要同名，表示一组 --> 193 <input name="sex" type="radio" value="男" checked="checked" />男 194 <input name="sex" type="radio" value="女" />女 195 </p> 196 <p>列表框 197 <!-- 加size="5" 调节select可见的选项数量,也表示列表,加上size后，加 multiple="multiple" 可以多选--> 198 <select name="birthday"> 199 <option value="" selected="selected">--请选择日期--</option> 200 <option value="1">一月</option> 201 <option value="2">二月</option> 202 <option value="3">三月</option> 203 <option value="4">四月</option> 204 <option value="5">五月</option> 205 <option value="6">六月</option> 206 <option value="7">七月</option> 207 <option value="8">八月</option> 208 <option value="9">九月</option> 209 <option value="10">十月</option> 210 <option value="11">十一月</option> 211 <option value="12">十二月</option> 212 </select> 213 </p> 214 <p> </p> 215 <fieldset> 216 <legend>我是<fieldset>标签,<legend>里写标题，相当于winform里面的groupbox</legend> 217 姓名: 218 <input type="text" /> 219 密码: 220 <input type="password" /> 221 </fieldset> 222 </form> 223 </div> 224 </div> 225 <h1><a name="suggestDontUse">建议不用的标签</a></h1> 226 <div><font color="#FF0000" face="微软雅黑" size="+5">我是以前的<font>标签,微软雅黑，5号字</font></div> 227 <marquee> 228 我在的<marquee>标签里面，我的默认方向是从右向左滚动← 229 </marquee> 230 <marquee direction="right" scrolldelay="50" > 231 我在的<marquee>标2签里面，我被设置了方向是从左向右滚动→,我还有up和down 232 </marquee> 233 <marquee direction="left" scrolldelay="50" onmouseover="this.stop()" onmouseout="this.start()"> 234 我在的<marquee>标3签里面，鼠标移过来我停，移走我动 235 </marquee> 236 </div> 237 <div></div> 238 <script type="text/javascript"> 239 swfobject.registerObject("FlashID"); 240 </script> 241 </body> 242 </html>
测试连接页面代码
测试超链接等标签的页面
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head> <body> <h1>超链接测试成功！</h1> </body> </html>
2、CSS修饰标签，CSS3增强网页元素的显示效果（暂时不讲）
待添加
3.Dreamweavor的框架的使用
待添加
二、 C# 控制台篇
对于那些基础知识，我只能给个demo了，所有的，我要说的，都已经在代码里了
此Demo，只要你从上往下看代码，就能掌握C#的基本语法，代码中含有大量vs2010操作技巧，命名规范小贴士，用代码顺便解说简单题目，学习语法，本例也添加了很多面试题里需要注意的地方，例如String和string，值类型，引用类型，ref，out，params等。全文贯穿 C#注释写法，我最看好的还是，别处学也学不到的vs2010操作技巧，让你的代码敲