导语
又是一年金三银四，不同的是今年开局有点难，但是办法总比困难多，祝愿大家都能找到好工作！！！
OK，步入正题，
最近整理了一下大学时候学习前端的一些笔记，温故而知新，虽然有点乱，但是还是分享出来，希望能跟大家一起学习一起进步，同时给正在找前端开发工作的朋友一份参考。
50个前端小知识
1.link链接的css文件也是可以用id命名的，即任何标签都可以加id，包括link，head body html等
2.任何标签的任何属性也都是可以修改的，例如link里面的href
3.input都有一个属性叫title，就是提示文字
4.前期开发中，可以在a链接的href中加js代码，也可以加#，但是建议一般先空着，因为加#点击之后会跳上去，而空着不会有反应，后期确定好跳转路径再加上去。
5.html里面的属性怎么写，js就怎么写，唯一例外的是class，如果要改变div的class，必须是ODiv.className=XXX；
6.两种操作属性的方法：（.）和（[’ ']） a[xxx]的好处是可以设置属性参数
7.元素.style.属性=XXX 是修改行间样式，改完后再改className是不会有效果的，会被行间样式的优先级取代,为了避免出现错误，要么只改style，要不只改className，混着来会出错！
8.事件和其他属性一样都可以用js来添加的，
9.window.onload是指整个页面加载之后才执行方法
10.注意行为（js）样式（css）结构（html）三者分离，即不要（尽量少）加行间样式
11.不要忽略细节（：hover前不能有空格，否则会出错）
12.clear:both(当列表浮动出现问题时 )
13.要在一个排好的模块旁加一个模块用top,lefft…
14.position：relative fixed…
15.居中显示用：margin:0 auto;居中问题，IE和非IE中的解决方法不同，其中ie是在父元素中添加 text-align:center，非ie是在该元素中添加 margin：0 auto；
16.backgroun-position：-100 px -100px（图像的位置确定）
17.getelemenesbyid只能从document获取
18.height和line-height相同，字体会垂直居中；
19.background-size:cover;可以让背景图拉伸平铺（火狐，谷歌才行）
20.在同一个div中的文字如何使用不同颜色：
①.标签或者
<div style="color:颜色">文字</div>
②.
<font color=你想要的颜色>文字</font>----注意color=颜色不用引号
22.filter: Alpha(Opacity=50); 在ie下才是有透明效果
23.a：hover 是可以改变b的display从none变为block的，但是a：hover不能把a的display改变为block，因为原本display为none，hover不生效
24.链接<a>要设置是text-align必须要加个display: block;
25.<textarea>没有value，而是直接<texteare></texteare>之间写
26.οnclick=“this.value=’ ';focus();” 这个放在input和textarea里面点击后，里面的value都会清空
27.css控制透明度
filter:alpha(opacity=50); /IE滤镜，透明度50%/
-moz-opacity:0.5; /Firefox私有，透明度50%/
opacity:0.5;/其他，透明度50%/
28.矩形边框：
border:2px solid;
border-radius:25px;
-moz-border-radius:25px; /* Old Firefox */
29.设置超出范围内容隐藏：overflow：hidden；
30.如果想要撑开父元素可以采用以下方法：
①：
父元素设置overflow以及zoom，样式如下：
<style>
#div1{border:1px solid red;overflow:hidden;zoom:1;}
#div2,#div3{float:right;border:1px solid blue;}
</style>
②：
父元素也是设置浮动效果，样式如下：
<style>
#div1{border:1px solid red;float:left;}
#div2,#div3{float:right;border:1px solid blue;}
</style>
此方法有个缺陷是，父元素的宽度需要设置。
③：
在添加一个子元素，并设置clear样式：
<div id="div1">
<div id="div2">two</div>
<div id="div3">one</div>
<div style="clear:both"></div>
</div>
此方法添加了一个div元素，有些情况下可能这个div会影响元素的遍历。
31.div固定宽高，超出加滚动条
<div style="position:absolute; height:400px; overflow:auto"></div>
div 设置滚动条显示：overflow :yes
div 设置滚动条自适应显示：overflow :auto
div 设置上下滚动条显示：overflow-y :yes
div 设置上下滚动条自适应显示：overflow-y :auto
如果该div被包含在其他对象例如td中，则位置可设为相对：position:relative；
32.让div处于屏幕中间代码
#main-img{
width: 120px;
height: 120px;
position: fixed;
top:50%;
left:50%;
margin-left:-60px; //（-width/2）
margin-top:-100px; //（-height/2）
}
33.当遇到setInterval,setTimeout与jquery混用的问题时，直接按JavaScript中的语法写并不起作用，有以下两种解决方法。
①. 直接在ready中调用其他方法，会提示缺少对象的错误，应用jQuery的扩展可以解决这个问题。
$(document).ready(function(){
$.extend({
show:function(){
alert("ready");
}
});
setInterval("$.show()",3000);
});
②. 指定定时执行的函数时不要使用引号和括号。
function show(){
alert("ready");
}
setInterval(show,3000);//注意函数名没有引号和括弧！
34 <a></a>属性要加个display：block；才能展开，有长宽；
35.:link, :visited, ins { text-decoration: none; }
:link和:visited伪类是a标签上的，分别代表普通链接和浏览过的链接的样式
也就是所有链接及ins标签都没有下划线
36.<a href="javascript:void(0)"></a> 即点击后什么都不做
void(0) 是一段javascript代码，返回值是undefined，href='javascript:undefined'的时候也就是你点了链接，但什么也不做。之所以这么写，是同js给这个<a>增加onclick事件，去做为一个链接。这样的好处是，鼠标经过链接的时候是手型，而且用户并不知道这个链接执行的是什么。
37.自定义输入框，是不可定义的，自闭的，要内嵌图片，样式不行，无论是type是button还是submit都不行，要直接用<button>可以加<img src="......."></button>标签来自定义自己的输入框
38.父级position定义了absolute，子级是撑不开的，因为absolute是脱离文档流
39.js修改CSS样式：
document.getElementById("xxx").style.display=xxx;
document.getElementById("xxx").style.textAlign=xxx;
40.text-overflow: ellipsis;/文字隐藏后添加省略号/
white-space: nowrap;/强制不换行/
41.alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的<img src="boat.gif" alt="Big Boat">在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器或者开了无图浏览的人来说是非常有用的。
42.<input type="text" name="said" placeholder=" 我来说两句" /> 当用户输入时，里面的提示语会消失(placeholder,输入框默认提示语)
43.三种写法，以市场价：108元为例，108元划上删除线。
市场价：<u>108元</u> //下划线
市场价：<s>108元</s> //中划线
市场价：<del>108元</del>//中划线
三种均可，可以任意挑选。
44.调用手机照相机：
<input type="file"accept="image/*"capture="camera"><input type="file"accept="video/*"capture="camcorder"><input type="file"accept="audio/*"capture="microphone">
capture表示，可以捕获到系统默认的设备，比如：camera–照相机；camcorder–摄像机；microphone–录音。
accept表示，直接打开系统文件目录。
其实html5的input:file标签还支持一个multiple属性，表示可以支持多选，如：
<inputtype="file"accept="image/*"multiple>
加上这个multiple后，capture就没啥用了，因为multiple是专门用来支持多选的。
45.相对路径和绝对路径
绝对路径：在我们平时使用计算机时要找到需要的文件就必须知道文件的位置，而表示文件的位置的方式就是路径，例如只要看到这个路径：c:/wenjian/img/photo.jpg我们就知道photo.jpg文件是在c盘的wenjian目录下的img子目录中。类似于这样完整的描述文件位置的路径就是绝对路径。我们不需要知道其他任何信息就可以根据绝对路径判断出文件的位置。而在网站中类似以https://www.csdn.net/img/aaaa.jpg来确定文件位置的方式也是绝对路径。
相对路径：所谓相对路径，顾名思义就是自己相对与目标位置。在上例中index.htm中联接的photo.jpg可以使用img/photo.jpg来定位文件，那么不论将这些文件放到哪里，只要他们的相对关系没有变，就不会出错。
46.块级元素和行内元素：
常用的行内元素要记住：a、span、img、input、lable、select、strong、textarea
常用的块级元素要记住：div、h1~h6、dl、ul、ol
例如在一个title中，有标题、有访问量、有更多，其中标题是用h1来控制，更多等是<a>链接，如果想要它们在一排，就要求设置h1的display:inline;
对行内元素设置宽度width 无效。设置高度height 无效，可以通过line-height来设置。设置margin 只有左右margin有效，上下无效。设置padding 只有左右padding有效，上下则无效。注意元素范围是增大了，但是对元素周围的内容是没影响的
47.子元素margin-top为何会影响父元素：这个问题的避免方法很多，只要破坏它出现的条件就行。给 Outer Div 加上 padding/border，或者给 Outer Div / Inner Div 设为float/position:absolute。
48.跨域：a.con域名下的js无法操作b.com域名下的对象
处理跨域可以三种方法：一，后端的代理
二，jasonp------只能让get请求得到跨域效果，不支持post请求
三，html5提供的XHR2（IE10以下浏览器不支持）
49.html语义化是什么，及为什么要语义化
html语义化是指使用含有语义的标签进行开发，减少使用无语义标签。
例如：p 标签与 span 标签都区别之一就是，p 标签的含义是：段落。而 span 标签责没有独特的含义。
为什么要语义化：
因为使用语义化标签可以使代码结构清晰，方便维护，增加可读性，遵循W3C标准，减少差异化，有利于团队合作开发，有利于搜索引擎优化（SEO），当网络延迟较大，未加载css或者js的时候，能更好的展示html页面，方便其他设备解析以语义的方式来渲染网页。
50.CSS设置页面最大最小宽度，ie6最小高度
设置最小宽度
div {
width:100%;
min-width:1000px;
width:expression_r(document.body.clientWidth < 1000 ? "1000px": "auto" );
}
设置最大宽度
div {
width:100%;
max-width:1200px;
width:expression_r(document.body.clientWidth > 1200 ? "1200px": "auto" );
}
同时设置最大宽度和最小宽度
div {
width:100%;
min-width:1000px;
max-width:1200px;
width:expression_r( Math.max(1000, Math.min(1200, document.body.offsetWidth*0.99))+"px" );
}
css ie6最小高度
min-height最小高度的实现（兼容IEie6/7/8/9、FF）
div {
min-height:100px;
height:auto !important;
height:100px;
overflow:visible;
}
尾语
可能总结的有些乱，而且有些技巧比较落后了，欢迎大家一起讨论下，一起进步是最大的快乐❀❀❀
