面试题目总结：

发表于 2017-05-29 |

面试问题

html和html5的区别，以及html5的优点在哪？
块级标签和行内标签分别有哪些？以及区别，特点；
关于你知道浮动以及清除浮动；
什么叫语义化，谈谈语义化；
选择器有哪些？选择器的层级，权重关系；
关于盒模型，自己对他的了解；
关于定位（除了常用的（相对，绝对，固定定位）还有那些，以及对它们的理解）；
关于display:none/visibility:hidden的区别；
JS的作用域；
如何定义一个变量；
引用类型和基本类型分别有哪些，以及他们的区别；
说说你知道的数组方法，以及谈谈当中的重排序方法；
CSS3的新添加属性有哪些;
CSS2-CSS3二者的区别，以及CSS3的缺点；
如何处理IE浏览器的兼容问题，尤其是IE6；
五子棋的思路；
贪吃蛇的思路；
选择器有哪些，当中的伪类选择器有哪些，自己对他们的了解；
媒体查询移动端的适配方案；
关于REM，谈谈自己对它的理解 ;
选项卡的制作；
平时看过哪些网站，谈谈他们的结构以及个人看法；
如何做一个三角形

HTML元素分类和常用元素：

发表于 2017-05-29 |

HTML4的常用标签

元素分类：
行内标签：属于内联元素，其内联属性：display:inline;
块级标签：内置属性：display:block;
为什么会分行内和块级元素？
答：1.因为页面布局的需要；
2.语义化：因为越重要的东西，越向块级靠拢；层级越轻的东西，越向行内标签靠拢；
块级元素的特点：
答：1.独占一行；
2.在不设置宽高的情况下。宽度为父级元素内容的宽度，高度是本身内容的高度；
3.可以设置宽高；
4.可以设置内外边距；
5.块级元素可以进行任何元素的嵌套；

-行内元素的特点：
答：1.和其他全文字或者内联元素在一行显示；
2.默认宽高就是内容宽高
3.不可以设置宽高；
4.设置内外边距的时候，只有左右起作用
5.内联元素不能嵌套块级元素（这是规范）；

回炉重造HTML-基本结构

发表于 2017-05-29 |

webstrom的使用

关于新建项目：
new file:ctrl+n
Rename（shift+F6）
作用：重名名现有文件

当出现新建好文件夹后，需要放置图片时，只需要点文件夹，再ctrl+v过来即可

setting-directory-右侧+Add Content Root(添加现有项目)

HTML

基本结构

<!DOCTYPE html>
html5的文档声明，不属于html部分；
作用：浏览器解析html的版本；
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-html4的版本文档声明
二者的区别：
-html5会有新增加的标签，当文档声明是4的话，会解析不出，而出现乱码；
所有高的东西都会迁就低的东西；
告诉浏览器一下部分是html的文件，语言为英文；”zh”为中文
HTML是成对出现的；
当前HTML文件头部，用来放置一些预加载的文件和内容；
为什么会预加载：
答：因为浏览器的读取机制是从上到下的；
规定整个文件的编码，并且需要放在整title前面
必须知道的常用编码：
-UTF-8/UFT-16：国际通用编码（所有浏览器默认）
-gb2312/gbk:国标（国内自己用，不建议用）
为什么要用文件编码？
答：可以保证在服务器和客户端展示内容一致，不出现乱码；
那为什么编码要放在title上？
答：因为浏览器的读取机制从上到下；
显示浏览器的页卡部分，不显示在页面的窗体内容上
keywords:关键字;content:里面放很多关键字，每个关键字用逗号隔开
description:对于整个网站或当前页面的描述是一段文字；conten：描述文字
样式引入
为什么样式引入是放在body前面?
答：因为加载css文件,再加载内容，会给用户呈现一个完整的漂亮的页面；
type=”text/css”是css的属性
为什么HEAD的内容不在浏览器窗口显示？
答：不是因为其设有隐藏性质，而是一般我们选择放置在HEAD中的标签内容是不会显示的，这是给浏览器看的；
body中的内容才会在浏览器中显示，当中包含标签和主要内容；

关于如何运用canvas进行局部事件绑定

发表于 2017-04-07 |

关于如何运用canvas进行局部事件绑定

嘿嘿，脑子有坑的我突然想起用canvas画个导航栏，然后进行局部位置进行事件点击，然而过程略带难度，因此记录下啦。好哒，废话不多说直接上图！

第一步，我要画圆和矩形嘛，肯定有个画布啦：

1
2
3

<canvas id='draw' width="1000px" height='900px'   ></canvas>
		<script src="js/hanshu.js"></script>
		<script src="js/huayuan.js"></script>

PS：值得注意的是：我是把里面的函数单独封装在一个文件里了，接着在另一个文件调用需要的函数，因此在引用的时候需要注意下顺序，先引用封装好的函数，再引用另一个文件。（这个方法是某位大佬告诉宝宝，这样比较有“装逼特效”，哈哈哈！）

第二步，封装函数

function drawArc(parms){   //因为需要画四个圆图片，所以需要封装一下
	var x = parms.x || 0,
		y = parms.y || 0,
		width = parms.width || 0,
		height = parms.height || 0,
		r = parms.r || 0,
		color = parms.color || '#f27c24',
		imgSrc = parms.src || 'img/1.png';
	var img = new Image();
	img.src = imgSrc;
	img.onload = function(){
		con.drawImage(img, x, y,width ,height);
		var pattern=con.createPattern(img,"no-repeat");
		con.fillStyle=pattern;
		con.fill();
		con.closePath();
		con.restore();
	}
	
	
}
function drawLine(line){    //这是画矩形
     var x = line.x || 0,
     	 y = line.y || 0,
    	 z = line.z || 0,
     	 q = line.q || 0,
     color = line.color || ('#f27c24'),
     linewidth = line.linewidth || 5
		con.moveTo(x,y);
		con.lineTo(z,q);
		con.strokeStyle = color;
		con.stroke();
		con.linewidth = linewidth;
}

PS:因为脑子有坑的想法，所以画了个矩形

第三步：调用函数

这里，我将每组数据都写好放在数组里，接着在用for循环一下，直接调用，这样就不用重复没必要重复的代码了，嘻嘻

var canvas = document.getElementById("draw"),con = canvas.getContext("2d");
var arrsrc = [
    {x: 200,y: 120,width: 150,height: 150},
    {x: 800,y: 120,width: 180,height: 150,src:'img/2.png'},
    {x: 200,y: 520,width: 180,height: 150,src:'img/3.png'},
    {x: 780,y: 520,width: 180,height: 180,src:'img/4.png'}
]
var linesrc = [
	{x: 320,y: 600,z: 820,q: 600},
	{x: 320,y: 200,z: 820,q: 200},
	{x: 280,y: 200,z: 280,q: 600},
	{x: 880,y: 200,z: 880,q: 600}
]
for (var i = 0; i < 4; i++) {
	drawArc(arrsrc[i]);
	drawLine(linesrc[i]);
}

画面如图：

背景是运用CSS3透明的效果做的，详情自己百度吧，嘻嘻！

第四步，重点来啦！绑定事件：

* 因为有四个圆，并且位置不一样，每个圆点击就会跳转不同的新页面，从而实现相当于导航栏的功能。然而canvas只能绑定一个事件，那么问题来了，难道我点击任何一个地方都只能跳转到一个页面吗？当然不能这样，这样的话有什么意义哦。所以，在这里我给画布的点击事件进行了个位置判断。

对于event不太熟悉的童鞋，个人建议去看下W3C，然后做个小demo就明白了，在这里我就不多解释了，总之就是能获取位置的。在这里我了for循环，对四个位置都循环了下，这样再利用if(){}else if(){}进行语句判断。

canvas.onclick=function(e){
	e = e || event;
	 var x = e.offsetX; 
  		y = e.offsetY;
  for(var i = 0; i < 4; i++ ){
  	if(x >= arrsrc[i].x && x<= arrsrc[i].x+arrsrc[i].width && y >= arrsrc[i].y && y<= arrsrc[i].y+arrsrc[i].width){
  	//在判断if这里,刚开始是想破脑袋，怎么获取相应的位置，后来有位大佬提醒说，先循环4个圆，接着再利用圆的半径进行构建一个方形，在方形的区域内，能进行位置获取~嘿嘿
  		if (i == 0) {
  			window.location.href = "susu1.html"; 
  		} else if (i == 1) {
           window.location.href="susu3.html";
  		} else if(i == 2){
           window.location.href='susu2.html';
  		}else if(i == 3){
          window.location.href='susu4.html';
  		}else{
  			window.location.href='susu.html';
  		}
  	}
  }
}

PS：在这里要顺便提醒下各位，现在谷歌浏览器开始停用window.open()这个方法了，所以我为了避免出现打不开页面的尴尬现象，改用了window.localtion.href 这个方法。

其实并不建议大家用canvas做这样的导航栏，毕竟降低开发效率，而且可能给后台带来不必要的麻烦，但这是我自己给爱宠做的一个小网站，同时也给自己练练手，所以我开心我乐意，略略略~~~

项目一认识ASP.NET

发表于 2017-03-07 | 分类于 ASP.NET |

ASP.NET

Page.IsPostBack属性

作用：IsPostBack属性用于检测页面是否已经回传给服务器端。
对于每次页面加载是都需要被初始化的控件，可以将其代码放在IsPostBack中，对于只需要加载一次的控件，可以将其代码放（！IsPostBack）中。

小栗子：


protected void Page_Load(object sender, EventArgs e)
   {
       if (!Page.IsPostBack) {
           //创建items集合
           ArrayList items = new ArrayList();//如果不引用using System.Collections;会报错
           items.Add("苹果");
           items.Add("香蕉");
           //绑定到DropDownList，数据绑定，这两个语句不可缺一
           DropDownList1.DataSource = items;
           DropDownList1.DataBind();
       }
   }


<form id="form1" runat="server">
        <div>
   <asp:DropDownList ID="DropDownList1" runat="server">
       </asp:DropDownList>
       <asp:Button ID="Button1" runat="server" Text="Button" />
   </div>
       <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
   </form>

在该控件属性中的AutoPostBack=true为自动回复；


<asp:DropDownList ID="DropDownList1" runat="server">
       </asp:DropDownList>