前端总结

　　做web开发时，一定涉及前端的知识，每次面试都要过一遍，这里总结一下个人对web前端的理解。由于目前水平有限，写的不一定对，如有不对的地方，请一定在评论中提出，在此先谢过。此文会不断地更新更正。

　　1.web前端主要是html,css,javascript三块的知识。

　　2.xhtml是更严谨的html，在项目中我们最好用严谨的语义化的html。

　　3.html5新标签与新特性可查看《28个你必须知道的HTML5的新特性，技巧以及技术》和《Html5新标签解释及用法》。

　　　这里指出html5新添的几个常用标签和属性：<article><aside><nav><header><footer><section><video> required,autofocus,preload等。

　　4.css行内元素，如：img,label,select，块元素，如：center,form,ul,li,table,可变元素，如：button,del,map等。

　　　注意几个属性：overflow，clear，word-break: normal|break-all|keep-all，word-wrap: normal|break-word，word-spacing

　　　overflow：

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

　　如果我们即想让一个元素可以设置宽度高度，又想让它以行内形式显示，这时我们可以设置display的值为inline-block。

　　5.css3增加了很多新的特性，如圆角，阴影，多栏布局等，具体参见《CSS3新特性一览》。注意box-sizing和box-flex这两个属性：参见w3school上两个例子http://www.w3school.com.cn/cssref/pr_box-sizing.asp，http://www.w3school.com.cn/cssref/pr_box-flex.asp。

　　6.div在整个屏幕水平居中和垂直居中的方法有很多种，这里提供两种。

　　 (1)

<style type="text/css">
#box{
    width:200px;
    height:150px;
    background-color: gray;
    position:relative;
    top:50%;
    left:50%;
    margin-left:-100px; 
    margin-top:-75px; /* negative half of the height */
}
</style>
<div id="box"></div>

　　 (2)

<style type="text/css">
#floater{float:left; height:40%; margin-bottom:-120px;}
#content{clear:both; height:240px;width:300px;margin:0 auto; position:relative;background-color: gray}
</style>

<div id="floater"></div>
<div id="content"> Content here </div>

　　7.行内元素在一个div中垂直居中和水平居中的方法之一：

<style>
.box {
        /*非IE的主流浏览器识别的垂直居中的方法*/
        display: table-cell;
        vertical-align:middle;

        /*设置水平居中*/
        text-align:center;

        /* 针对IE的Hack */
        *display: block;
        *font-size:262px;/*约为高度的0.873，300*0.873 约为262*/
        *font-family:Arial;/*防止非utf-8引起的hack失效问题，如gbk编码*/

        width:400px;
        height:300px;
        border:1px solid #eee;
}
.box img {
        /*设置图片垂直居中*/
        vertical-align:middle;
}
</style>

<div class="box">
 <img src="http://static.cnblogs.com/images/logo_small.gif"/>
</div>

　　8.nav居左，撑满整个高度的方法之一：

<style type="text/css">
body{margin:0;padding:0;height:100%;}
html{height:100%;}
nav{margin:0px;padding:0px;height:100%;overflow:auto;float:left;width:100px;border:1px solid red;}
</style>
<nav>
    <div>11111</div>
</nav>

　　9.html5和css3的新特性确实很好用，但是IE6，IE7，IE8(这三仍然有很大的使用比例，真是无语)甚至是IE9大部分都不支持。对于html5标签不支持的问题可以用js来解决，通常的做法是用html5shiv，在页面中加入如下的一行即可：

<!-–[if lt IE 9]--><script src=" http://html5shiv.googlecode.com/svn/trunk/html5.js "></script ><!--[endif]–- >

　　其实实现的方法无非就是把ie6，ie7和ie8不认识的标签都有js来创建，类似于如下的实现：

function(){if(!/*@cc_on!@*/0)return;var e = “abbr,article,aside,audio,canvas,datalist,details,dialog,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video”.split(’,'),i=e.length;while(i–){document.createElement(e[i])}})()

　　此外，还有一些hack的方法

　　.all IE{property:value9;}
　　.gte IE 8{property:value ;}
　　.lte IE 7{*property:value;}
　　.IE 8/9{property:value ;}
　　.IE 9{property:value9 ;}
　　.IE 7{+property:value;}
　　.IE 6{_property:value;}
　　.not IE{property:value;}

　　10.javascript是一门神奇的语言，目前用的标准是ECMAScript3，ECMAScript6正在路上，即将发布。这一块涉及的内容很多，我之前的博客以零星地写过一些相关的内容，这里先写点个人想法。js世界里使用最广泛的库就是jQuery，jQuery库是一个很全面而且兼容性很好的库，所以有时候可以用jquery来解决兼容性问题。但是也因为全面兼容性强变得越来越大，在jQuery2版本里，取消了对IE8以及IE8以前的版本的支持，jQuery的体积有变小了。如果要让jQuery对IE8及以前的版本支持的话需要使用2.0之前的版本。开源世界里javascript的框架有很多，如seajs，requirejs这里做AMD或CMD加载，如angularjs，avalon，backbone这类将View和model分离的框架，都可以加快我们的开发效率，也使前端开发模块化了，但是框架终究是框架，需要学习成本，而且有些框架动辄几十K到100多K，用于内部项目比较合适，用于大pv的网站并不合适，一来速度慢了，二来费用高了。大型网站一般来说是自行架构按需加载。

　　这里举一个例子，将json转成目录树（ul,li），当然还需加上样式，加上其他功能如收缩展开，链接等:

<div id="tree">
</div>
<script language="javascript" type="text/javascript">
tree = {"100000":{},"110000":{"200000":{"300000":{}},"210000":{}},"120000":{
    "100000":{},"110000":{"200000":{"300000":{}},"210000":{}},"120000":{}
}};
var treeView = document.getElementById("tree"); 
function display(paraNode, treeJson){
    var haspro = false;
    for(var key in treeJson){
        haspro = true;
        break;
    }

    if(haspro){
        var newUL = document.createElement("ul");
        for(key in treeJson){
            var newLI = document.createElement("li");
            newLI.innerHTML = key;
            newUL.appendChild(newLI);
            display(newLI,treeJson[key]);
        }
        paraNode.appendChild(newUL);
    }
}
display(treeView, tree);
</script>

　　11.移动web端，基本未涉足，但是道理是相通的。

自适应的css写法：

@media (min- 768px) {
  .main {
    ......
  }
}

----持续更新

相关推荐