黑马程序员—Web开发知识点总结-逊云锋-ChinaUnix博客

逊云锋的ChinaUnix博客

首页　| 　博文目录　| 　关于我

逊云锋

博客访问： 844582
博文数量： 372
博客积分： 10063
博客等级：中将
技术积分： 4220
用户组：普通用户
注册时间： 2012-02-24 11:36

文章分类

全部博文（372）

php（0）
net（1）
设计模式（2）
sharepoint（2）
arc（2）
xml（1）
Oracle（4）
ＳＱＬ（6）
DataBase（2）
css（2）
LOGO（2）
Ruby（0）
vstl（1）
WPF应用（3）
LING（1）
Delphi（0）
python（1）
javafx（3）
java（4）
linux（0）
Azure（4）
could（3）
hadoop（2）
Web前端（5）
平台开发（4）
C#, 模板引擎（7）
架构实战（2）
Object-oriented（2）
负载均衡（3）
web架构师（5）
Extjs（1）
Javascript（16）
HTML（21）
jquery（21）
未分配的博文（239）

文章存档

2012年（372）

我的朋友

相关博文

黑马程序员—Web开发知识点总结

分类：虚拟化

2012-04-08 18:48:46

言：这是一篇简单的web开发知识点的总结，适用于刚开始学习编程的人来学习的。我是为了能够在熟记熟记这些知识点而总结的一篇文章。

1 什么是浏览器？

(1) 浏览器就是接收浏览者的操作(打开一个网址，点击一个链接，点击一个按钮)，然后帮助浏览者去Web服务器请求网页内容（HTML格式返回），然后展现成人眼能够看得懂的可视化页面的软件。

(2) IE==浏览器？这句话是错误呢。IE是浏览器的一种，还有FireFox，Opera，Chrome等，注意遨游(Maxthon)，世界之窗，搜狗浏览器，360浏览器等并不是一种独立于IE的浏览器，其内核还是IE的内核，只不过是换了一个外壳而已，所以用遨游的不能嘲笑用IE的，否则就露怯了。

(3) 所谓Trident引擎就是IE的WebBrowser控件，现在很多非IE核心的浏览器用的是Trident引擎，比如遨游3和搜狗的双核，Chrome,Safari。

2 静态页面，动态页面(*)

(1) 网站页面分为静态页面和动态页面

1) 静态页面：有一个Html页面文件保存在服务器上，浏览器需要这个页面的时候就把这个页面文件发给浏览器。

2) 动态页面：服务器上没有浏览者要看的页面，而是服务器动态生成的Html页面发给浏览器。动态语言的服务器端可以用C#，VB.NET，Java，php，c等编写。

3 HTML和XML的联系和区别

(1) 格式标签：

创建段落；
回车，也可以写成
，在Html中有一些标签可以不关闭，
就是一个，这是和XML不同的地方（常考），但是为了遵循XHTML规范，推荐像XML一样严格关闭，
，

(2) 属性值：HTML中属性值可以用单引号括起来，也可以用双引号括起来，甚至不用引号都可以。

(3) 注释：HTML使用和XML一样的。注释内容- ->

4 表单

(1)

标签是表单标签，如果要把数据提交到服务器，则需要将，

，<select>等表单元素放到form中。
(2) <input>是主要的表单元素，type的可选值：submit（提交按钮），Button（普通按钮），CheckBox（复选框），file（文件选择），Hidden（隐藏字段），Image（图片按钮），PassWord（密码框），Radio（单选按钮），reset（重置按钮），text（文本框）。
5       input表单详解
(1) 点击Submit按钮表单就会被提交给服务器，中文IE下默认按钮文本为”提交查询”，可以设置value属性修改按钮的显示文本。
(2) text：size属性为宽度，value为值，maxlength为可以输入的最大长度，readonly为只读字段。
(3) checkbox：checked属性表示是否被选中。
(4) radio：相同name属性的为一组，不同radio设定不同的value值，这样通过取指定name的值就可以知道谁被选中了，不用单独的判断。
 (5) file：使用file,则form的enctype必须设置为multip art/form-data，Method属性为post。
 (6) image：使用src属性指定图片的地址，用来实现美化的“登录按钮”。
6       <select>标签
(1) 用来创建类似于Winform中的ComboBox或者listBox。
(2) 如果size属性大于1就是ListBox，否则就是ComboBox。例如下面的两句话的比较：<select multiple=”multiple”>（推荐）或者<select multiple>，那么就是多选的ListBox。(size的值为显示出来的列表数量)
(3) select中的项是<option>，<option>北京</option>还可以设定项的值：
  <select value=”1”>北京</select>
(4) 如何实现不选择，添加一个<option value=”-1”>---不选择---</option>，然后编程判断select选中的值如果是-1就认为是“不选择”。
(5) select分组选项，可以使用optgroup对数组进行分组，分组本身不会被选择，无论对于下拉列表还是列表框都适用。
7       其它控件
(1) <label>：在<input type=”text”>前可以写普通的文本来修饰，但是单击修饰文本的时候input并不会得到焦点，而用label则可以，for属性指定要修改的控件的ID。
 <label for=”txt1”>选中</label>
 1) 为被修饰的控件设置一个唯一的ID。
 2) <label for=”ma”>婚否</labek> <input id=”ma” type=”checkbox” />
(2) fieldset：GroupBox效果，将控件划分为一个区域，看起来跟规整。
   <fieldset>
        <legend>常用事件</legend>
     <input type=”text” />
</fieldset>.
8       样式表，CSS
(1) CSS（层叠样式表），是用来美化页面的，可以对页面元素进行更精细的设置，样式主要描述元素的字体颜色，背景颜色，边框等。CSS主要有元素内联，页面嵌入和外部引用三种使用方式，CSS是描述元素的皮肤。
 1) 元素内联，直接将样式写入元素的style属性中：
  <input type=”text” readonly=”readonly” style=”background-color:#FF00FF” />，适用于样式没有可以复用性的场合。
 2) 页面嵌入：在head中加入：
  <style type=”text/css”>
       input{background-color:Red;border-color:Green;}
 </style>
 表示页面中所有的input都要采用指定的样式，适用于样式复用，减少页面体积。
 3) 外部引用，将css内容写入css后缀的文件
   Textarea{background:yellow;}
 然后在页面中引用，在head中加入：<link type=”text/css” rel=”stylesheet” href=”1.css”/>适用于多个页面共享css。
9       层(Div),块(span)
(1) 层：<div></div>将内容放到层中，就是将这些内容当成一个整体来进行处理，比如：整体隐藏，整体移动等。DIV非常强大和常用，类似于Winform的Panel。
(2) 块(span)：div是将内容放到一个矩形的区块中，会影响布局，而span只是把一段内容定义成一个整体进行操作，但不影响布局，显示。
10  常见样式
(1) CSS计量单位,CSS中表示宽度，距离时有多种计量单位：px(像素)，30%(百分比)，em（相对单位）等，width:20px;
(2) background-color:Red：背景颜色，color:文本颜色。
(3) border-style:solid;边框风格，实现，还有dotted(点)等值，border-color:边框颜色；border-width:边框宽度(默认为0)。例如：
 style=”border-color:Red;border-width:1px;border-style:dotted;”
(4) display：元素是否显示，可选值none(不显示)，block(显示为块级元素，此元素前后会带有换行符)，inline(显示为内联元素，元素前后没有换行符)等。
(5) cursor:鼠标在元素上时显示的光变图标，可选值：cursor（默认光标），pointer(超链接上的手)，text(输入Bean)，wait(忙沙漏)，help(帮助)等。
(6) li不显示圆点，list-style-type:none;一般设在li或者ul上。
11  样式选择器
(1) 对于非元素内联的样式样式需要定义样式选择器，通俗的说就是这个样式适用于哪些元素，三种：标签选择器，class选择器和ID选择器。
(2) 标签选择器：input{border-color:Yellow;color:Red;}。对于指定的标签采用统一的样式。
(3) class选择器：以定义一个命名的样式，然后再用到它的时候设定元素的class属性为样式的名称，还可以同时设定多个class，名称之间加空格。例如：
.warning{background:Yellow;}
.highlight{font-size:XX-large;cursor:help;}
<table>
<tr>
<td class=”highlight”>韩迎龙</td>
<td class=”warning”>盛敬恒</td>
<td class=”highlight warning”>韩迎龙很棒哦！</td>
</tr>
</table>
12  标签+class选择器
(1) class选择器也可以针对不同的标签，实现同样的样式名对于不同的标签有不同的样式，只要在样式名前加上标签名即可，例如：
 input..accountno{text-align:right;color:Red;}
 label.accountno{font-style:italic;}
 <input class=”accountno” type=”text” value=”1111111111” />
 <label class=”accountno”>333333333333333</label>
13  id选择器
(1) 为指定id的元素设定样式，前面加上“#”。
  #username{font-size:XX-large;}
 <input type=”text” id=”username” value=”aaaaaaaaaa” />
(2) style,class可以同时组合使用
<input id=”username” class=”accountno” type=”text” style=”font-size:xx-large” value=”aa”>
14  更多的选择器
(1) 关联选择器
p strong{background-color:Yellow;}表示p标签内的strong标签内的内容使用的样式。
韩迎龙
韩迎龙
(2) 组合选择器，同时为多个标签设定一个样式
h1,h2,input{background-color:Green;}
<h1>韩迎龙</h1>
<input type=”text” value=”text”>
15  伪选择器
(1) 伪选择器：为标签的不同状态设定不同的样式。
(2) a:visited：超链接点击过的样式，a:active：选中超链接时的样式。
  a:link：超链接未被访问时的状态，a:hover：鼠标移到超链接时的样式。
(3) 举例说明如下：
  a:visited{text-decoration:none;}
a:active{text-decoration:none;}
a:link{text-decoration:none;}
a:hover{text-decoration:underline;}
---------------------- 、、期待与您交流！ ---------------------- </div>
 
 <div class="Blog_con2_1 Blog_con3_2">
 <div>
			 
			 
				<div class="bdsharebuttonbox"><A class=bds_more href="#" data-cmd="more"></A><A class=bds_qzone title=分享到QQ空间 href="#" data-cmd="qzone"></A><A class=bds_tsina title=分享到新浪微博 href="#" data-cmd="tsina"></A><A class=bds_tqq title=分享到腾讯微博 href="#" data-cmd="tqq"></A><A class=bds_renren title=分享到人人网 href="#" data-cmd="renren"></A><A class=bds_weixin title=分享到微信 href="#" data-cmd="weixin"></A></div>
<script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"16"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>
				
			 </div>
 阅读(761) | 评论(0) | 转发(0) |
			 <div class="HT_line3"></div>
 </div>
 
 <div class="Blog_con3_3">
 <div>0<a href="javascript:void(0)" id='digg' bid='3165921' url='/blog/digg.html' ></a></div>
 上一篇：<a href="/uid-26727363-id-3165917.html">qTip2小技巧：为多个目标元素共享一个tip</a>
 下一篇：<a href="/uid-26727363-id-3165924.html">学习javascript笔记</a> 
 </div>
 
 </div>
 		 
 </div>
 </div>
 <div class="Blog_right1_7" id='replyList'>
		<div class="Blog_tit3">给主人留下些什么吧！~~</div>
				
				
		<div class="Blog_right1_6 Blog_right1_12">
 		</div>
		
 <div class="Blog_right1_10" style="display:none">
 <div class="Blog_tit3">评论热议</div>
		 		 
 <div class="Blog_right1_8">
 <div class="nologin_con1"> 请登录后评论。
 <a href="http://account.chinaunix.net/login" onclick="link(this)">登录</a> <a href="http://account.chinaunix.net/register?url=http%3a%2f%2fblog.chinaunix.net">注册</a>
 </div>
 </div>
 
		
 </div>
 <div style="text-align:center;margin-top:10px;">
 <script type="text/javascript" smua="d=p&s=b&u=u3118759&w=960&h=90" src="//www.nkscdn.com/smu0/o.js"></script>
 </div>
 </div>
 </div>
 </div>
 <input type='hidden' id='report_url' value='/blog/ViewReport.html' />

$(function(){

//创建管理员删除的弹出层
		$('#admin_article_del').click(function(){
			$.cover(false);
			asyncbox.open({
				id : 'class_thickbox',
				html : '<div class="HT_layer3_1"><ul><li class="HT_li1">操作原因：<select class="HT_sel7" id="del_type" name="del_type"><option value="广告文章">广告文章</option><option value="违规内容">违规内容</option><option value="标题不明">标题不明</option><option value="文不对题">文不对题</option></select></li><li class="HT_li1" ><input class="HT_btn4" id="admin_delete" type="button" /></li></ul></div>',
				title : '选择类型',
				width : 300,
				height : 150,
				scroll : 'no',
				callback : function(action){
					if(action == 'close'){
						$.cover(false);
					}
				}
			});
		});
		$('#admin_delete').live('click' , function(){
			///blog/logicdel/id/3480184/url/%252Fblog%252Findex.html.html
			var type = $('#del_type').val();
			var url = '/blog/logicdel/id/3165921/url/%252Fuid%252F26727363.html.html';
			window.location.href= url + '?type=' + type;
		});

//顶  js中暂未添加&过滤 
		$('#digg').live('click' , function(){

if(isOnLine == '' )
			{
				//showErrorMsg('登录之后才能进行此操作' , '消息提示');
				showErrorMsg('操作失败,您需要先登录!', '消息提示', 'http://account.chinaunix.net/login');
				return false;
			}

var bid = $('#digg').attr('bid');
			var url = $('#digg').attr('url');

var digg_str = $.cookie('digg_id');
			if(digg_str != null)
			{
				var arr= new Array(); //定义一数组

arr = digg_str.split(","); //字符分割 
				for( i=0 ; i < arr.length ; i++ ) 
				{ 
					if(bid == arr[i])
					{
						showErrorMsg('已经赞过该文章', '消息提示'); 
						return false;
					}
				} 
			}
			$.ajax({
				type:"POST",
				url:url,	
				data: {
					'bid' : bid 
				},
				dataType: 'json',
				success:function(msg){
					if(msg.error == 0)
					{
						var num = parseInt($('#digg_num').html(),10);
						num += 1;
						$('#digg_num').html(num);
						$('#digg').die();

if(digg_str == null)
						{
							$.cookie('digg_id', bid, {expires: 30 , path: '/'});
						}
						else
						{
							$.cookie('digg_id', digg_str + ',' + bid, {expires: 30 , path: '/'});
						}
						showSucceedMsg('谢谢' , '消息提示');
					}
					else if(msg.error == 1)
					{
						//showErrorMsg(msg.error_content , '消息提示'); 
						showErrorMsg('操作失败,您需要先登录!', '消息提示', 'http://account.chinaunix.net/login');
					}
					else if(msg.error == 2)
					{
						showErrorMsg(msg.error_content , '消息提示'); 
					}
				}
			});
		});
		//举报弹出层
		/*$('.box_report').live('click' , function(){
			if(isOnLine == '' )
			{
				//showErrorMsg('登录之后才能进行此操作' , '消息提示');
				showErrorMsg('操作失败,您需要先登录!', '消息提示', 'http://account.chinaunix.net/login');
				return false;
			}
			var url = $('#report_url').val();
			var cid = $(this).attr('cid');
			$.cover(false);
			asyncbox.open({
				id  : 'report_thickbox',
				url : url,
				title : '举报违规',
				width : 378,
				height : 240,
				scroll : 'no',
				data : {
					'cid'	 : cid,
					'idtype' : 2 
				},
				callback : function(action){
					if(action == 'close'){
						$.cover(false);
					}
				}
			});
		});*/

//评论相关代码
		
		//点击回复显示评论框
		$('.Blog_a10').live('click' , function(){
			if(isOnLine == '' )
			{
				//showErrorMsg('登录之后才能进行此操作' , '消息提示');
				showErrorMsg('操作失败,您需要先登录!', '消息提示', 'http://account.chinaunix.net/login');
				return false;
			}

if(allowComment == 1)
			{
				showErrorMsg('该博文不允许评论' , '消息提示'); 
				return false;
			}
			var tid = $(this).attr('toid');//留言作者id
			var bid = $(this).attr('bid');//blogid
			var cid = $(this).attr('cid');//留言id
			var tname = $(this).attr('tname');
 			var tpl = '<div class="Blog_right1_9">';
				tpl +=	 '<div class="div2">';
				tpl += '<textarea name="" cols="" rows="" class="Blog_ar1_1" id="rmsg">文明上网，理性发言...

'; tpl += '

表情

'; tpl += '

'; $('.z_move_comment').html(''); $(this).parents('.Blog_right1_8').find('.z_move_comment').html(tpl).show(); }); //引用的评论提交 $('#quota_sbumit').live('click' , function(){ if(isOnLine == '' ) { //showErrorMsg('登录之后才能进行此操作' , '消息提示'); showErrorMsg('操作失败,您需要先登录!', '消息提示', 'http://account.chinaunix.net/login'); return false; } var bid = $(this).attr('bid'); var tid = $(this).attr('tid');//被引用人的id var qid = $(this).attr('cid');//引用的id var url = $(this).attr('url'); var text = $('#rmsg').val(); var tname = $(this).attr('tname'); if(text == '' || text=='文明上网，理性发言...') { showErrorMsg('评论内容不能为空！' , '消息提示'); return false; } else { if(mb_strlen(text) > 1000){ showErrorMsg('评论内容不能超过500个汉字' , '消息提示'); return false; } } $.ajax({ type: "post", url: url , data: {'bid': bid , 'to' : tid , 'qid' : qid , 'text': text , 'tname' : tname }, dataType: 'json', success: function(data){ if(data.code == 1){ var tpl = '

'; tpl+= '

' + data.info.header + '

'; tpl+= '

' + data.info.username + '' + data.info.dateline + '

'; tpl+= '

' + data.info.quota.username + '：'+ data.info.quota.content + '

'; tpl+= '

' + data.info.content + '

回复 | 　删除　| 　举报

'; tpl+= ''; tpl+= '

'; $('#replyList .Blog_right1_8:first').before(tpl); $('.z_move_comment').html('').hide(); } else if(data.code == -1){ //showErrorMsg(data.info , '消息提示'); showErrorMsg('操作失败,您需要先登录!', '消息提示', 'http://account.chinaunix.net/login'); } }, error: function(){//请求出错处理 } }); }); //底部发表评论 $('#submitmsg').click(function(){ if(allowComment == 1) { showErrorMsg('该博文不允许评论' , '消息提示'); return false; } var bid = $(this).attr('bid'); var toid = $(this).attr('toid'); var text = $('#reply').val(); var url = $(this).attr('url'); if(text == '' || text=='文明上网，理性发言...') { showErrorMsg('评论内容不能为空！' , '消息提示'); return false; } else { if(mb_strlen(text) > 1000){ showErrorMsg('评论内容不能超过500个汉字' , '消息提示'); return false; } } $.ajax({ type: "post", url: url , data: {'bid': bid , 'to' : toid ,'text': text}, dataType: 'json', success: function(data){ if(data.code == 1) { var tpl = '

'; tpl += '

' + data.info.header + '

'; tpl += '

' + data.info.username + '' + data.info.dateline + '

'; tpl += '

' + data.info.content + '

'; tpl += '

回复 | 　删除　| 　举报

'; tpl += ''; tpl += '

'; $('.Blog_tit3:first').after(tpl); $('#reply').val('文明上网，理性发言...'); } else if(data.code == -1) { showErrorMsg(data.info , '消息提示'); } }, error: function(){//请求出错处理 } }); }); //底部评论重置 $('#reset_comment').click(function(){ $('#reply').val('文明上网，理性发言...'); }); //取消回复 $('#qx_comment').live('click' , function(){ $('.z_move_comment').html('').hide(); }); $('#rmsg, #reply').live({ focus:function(){ if($(this).val() == '文明上网，理性发言...'){ $(this).val(''); } }, blur:function(){ if($(this).val() == ''){ $(this).val('文明上网，理性发言...'); } } }); //删除留言确认 $('.comment_del_mark').live('click' , function(){ var url = $(this).attr('url'); asyncbox.confirm('删除留言','确认', function(action){ if(action == 'ok') { location.href = url; } }); }); //删除时间确认 $('.del_article_id').click(function(){ var delurl = $(this).attr('delurl'); asyncbox.confirm('删除文章','确认', function(action){ if(action == 'ok') { location.href = delurl; } }); }); /* //字数限制 $('#rmsg, #reply').live('keyup', function(){ var id = $(this).attr('id'); var left = Util.calWbText($(this).val(), 500); var eid = '#errmsg'; if(id == 'reply') eid = '#rerrmsg'; if (left >= 0) $(eid).html('您还可以输入' + left + '字'); else $(eid).html('您已超出' + Math.abs(left) + '字 '); }); */ //加载表情 $('#face').qqFace({id : 'facebox1', assign : 'reply', path : '/image/qqface/'}); $('#mface').qqFace({id : 'facebox', assign : 'rmsg', path:'/image/qqface/'}); /* $('#class_one_id').change(function(){ alert(123213); var id = parseInt($(this).val() , 10); if(id == 0) return false; $('.hidden_son_class span').each(function( index , dom ){ if( dom.attr('cid') == id ) { } }); }); */ //转载文章 var turn_url = "/blog/viewClassPart.html"; $('#repost_bar').click(function(){ if(isOnLine == '' ) { //showErrorMsg('登录之后才能进行此操作' , '消息提示'); showErrorMsg('操作失败,您需要先登录!', '消息提示', 'http://account.chinaunix.net/login'); return false; } var id = $(this).attr('bid'); asyncbox.open({ id : 'turn_class_thickbox', url : turn_url, title : '转载文章', width : 330, height : 131, scroll : 'no', data : { 'id' : id }, callback : function(action){ if(action == 'close'){ $.cover(false); } } }); }); /* //转发文章 $('#repost_bar').live('click' , function(){ if(isOnLine == '' ) { //showErrorMsg('登录之后才能进行此操作' , '消息提示'); showErrorMsg('操作失败,您需要先登录!', '消息提示', 'http://account.chinaunix.net/login'); return false; } var bid = $(this).attr('bid'); var url = $(this).attr('url'); asyncbox.confirm('转载文章','确认', function(action){ if(action == 'ok'){ $.ajax({ type:"POST", url:url, data: { 'bid' : bid }, dataType: 'json', success:function(msg){ if(msg.error == 0){ showSucceedMsg('转发成功！', '消息提示'); }else if(msg.error == 1){ //location.href = '/index.php?r=site/login'; showErrorMsg('操作失败,您需要先登录!', '消息提示', 'http://account.chinaunix.net/login'); }else{ showErrorMsg(msg.error_content, '消息提示'); } } }); } }); }); */ });

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6