2015随手一笔

最新推荐文章于 2024-10-31 15:49:24 发布

写个程序换个饼

最新推荐文章于 2024-10-31 15:49:24 发布

阅读量111

点赞数

分类专栏：经验总结文章标签：前端前端框架 java ViewUI

经验总结专栏收录该内容

32 篇文章 0 订阅

订阅专栏

一晃很多年过去了，从2010年开始开始接触编程。HTML与CSS,JS一道做为日常工作中的边缘知识点进入视野；元旦没有妹子也没有多少票子，打游戏打累了，坐这盖个被子写点什么，祭奠那逝去的青春。

事先声明下，哥们不才，中专让开除了，英语别说过级了，只有第一次月考及格过，以后的英语考试都很稳定，在没有他人帮助的前提下，一直稳定在30分左右，英语考试全靠运气。说这些，是为了看观不要因为我对翻译不准进行讽刺，过多情况下我是个人理解而不是直译。

HTML篇：

做为一种标记性语言，很多人觉着这个压根算不上一种语言。从简易性而言，这是对的；但是把前端三大块一同来说，个人觉着HTML是最重要的。

现在主流程序员应该大都是80、90后，都是看着金庸老爷子的小说长大。如若把前端知识点比做一派武学，那么HTML应该是内练一口气，CSS是外练胫骨皮，JS比做是那乾坤大挪移。

对前端而言，最重要的就是语义化你的html标签。其一：美化你的代码，让你每次打开代码进行查看都是一种享受，你可以快速、准确的定位你想要查看的区域。其二，对搜索引擎友好，你对我好，我也对你好，你好我好大家好。就是这个样子。

于标签语义化：每个标签都是有不同含义的，<div>最常见的一种，它呢就是个块。<div>最常用，会有很多人会把,html,body的里层全部都用DIV进行编码，且不说标签的含意，如果有一天，让你直接在服务器上对一个问题进行修正，那么多的DIV能不能认出哪一块是你要改的区域，你的领导就坐在你的后面看你改你写的代码，你如果说上一句，我找不见了，你的职业会有很黑的一笔。良好的结构应该是这样子的，你的页面中通过<div>，进行区域划分。标题通过层级使用H标签进行递减，文本段落使用<p>,列表使用<table>或者<ul>...说到table，我不止一次的听到人说<table>是过时的，页面中不应该出现<table>,对此只能说纯列表的话，没有什么标签比<table>更方便，更灵活。虽然CSS中提供了display:table-cell;

于搜索引擎友好：SEO优化前端很重的一笔就是使用带有含意的标签进行编码。举个简单的例子：比说如你的网站是卖皮鞋的，那么你的页面中存在一个H标签，这个H标签的title中含有皮鞋二字，那么爬虫就会根据这个title对你网站进行定位。老实讲，个人对这方面只限于了解，曾经做过。但感觉很无奈，百度上满满的百度推广，说多了都是泪。

关于HTML标签：http://www.w3school.com.cn/tags/index.asp。

很简单，但又不简单；这就是HTML标签。

CSS篇：

样式很多，种类很繁琐，但又存在很多兼容问题。难点很大，确很直观。从最初的color:red，让你感受到你编码的成果；后到来的css3动画，让你感受动感的CSS。

于定位问题：css定位目的是什么？对的让你的html呆在你想让他呆的位置。两种方式，一种是通过position,一种是float。position很好用，但是会打破html的格局，感觉就像c语方中的goto方法，好用，但是不要用的太多，配合好你注释；float说起这个很多时候都是新手头疼的东西，前端里面有个东西叫清浮动，还没用就得想着怎么清掉它。至于清浮动，度娘懂的很多。这里有个度娘没说的，向右浮动是不用清的，为什么呢？因为这是浮动最标准的用法，但是html布局时向右浮动的区域需要放到浮动后在左边的位置。具体代码是这样的:

<div>浮动后在边的区域，此处使用float:right</div>
<div>浮动后在左边的区域</div>

于兼容问题：各浏览器对css的支持度不同，展现效果不同导致同一段代码，几种视觉效果。很多人觉着IE是王八蛋。我有一次看到QQ空间的那年的今天发表的动态。就是对IE的抱怨，现在想想，IE练就了前端人的钢铁意志。给各位个建意，对于兼容，css3特效可以用JS去实现，根据产品的需求，也可以采用这个浏览器动态的，那个浏览器静态的。除却css3特效使用hack解决。

{
height:32px;
background-color:#f1ee18;/*所有识别*/
background-color:#00deff\9; /*IE6、7、8识别*/
+background-color:#a200ff;/*IE6、7识别*/
_background-color:#1e0bd1;/*IE6识别*/
}

hack详解友情链接:http://www.duitang.com/static/csshack.html

CSS3示例，有兴趣的可以看下：http://gudh.github.io/ihover/dist/index.html；

JS篇：

很多觉着前端就是JS，我不这么认为。我觉着JS只是前端中的一部分。很重要，但不是全部。

最上面我把前端比做武学。操作DOM就是乾坤大挪移，很形像不是吗？js根JAVA没关系，但是语法很像，但是又很不像。

你可以这样写：
var demo1 = function (){
   ....
}
你也可以这样写
var demo2{
   init: function(){
   }
   ....
}
你还可以这样写
function demo3(title){
  this.title=title
}
demo3.prototype = function(){
   ....
}

花样很多，看上去没有规范。我个人喜好demo2的写法，仁者见仁吧。

JS在前端中主要功能也是两种：1、操作DOM；2、数据交互；

于操作DOM，你可以插入，你也可以删除。没关系，都可以。但是需要注意的事，客户端的性能参差不齐，个人觉着，当你的程序把浏览器跑的出现是否终止当前脚时，那于前端而言是很耻辱的事情。且插且珍惜。

你可以这样
function demo1(){
   var tmpHtml = '';
   for(var i=0; i< n; i++){
       tmpHtml += i;
    
   } 
   DOM.append(tmpHtml);
}
也可以这样
function demo2(){
   var tmpHtml = '';
   for(var i=0; i< n; i++){
     tmpHtml += i;
    
   } 
   DOM.html(tmpHtml);
}
但是不要这样
function demo1(){
   for(var i=0; i< n; i++){
       DOM.append(i);
    
   } 
}
当然更不要这样
function demo3(){
   for(var i=0; i< n; i++){
       var tmpHtml = '';
       tmpHtml += i;
       DOM.append(tmpHtml);
    
   } 
}

方面很广，例子很少，意思确很明了。

于数据交互：一种是同步提交，form的，这个前端要做的就是个提交验证，或者说你懒的很都可以不做，因为你不做，只要在form中有submit，有action地址，他就会提上去。一种就是AJAX，得易于jQuery，AJXA变的很简单，原生的写过，用过几次$.ajxa,$.post这些东西后，原生的表示快还给师父了。感觉没什么讲的，是个做web的，不管前后端开上一个jquery文档都会写。只有一点需要注意的，能一次提交的别分成两次；再要多次提交的别在那等待非要合成一个再提交。乾坤大法嘛，意会多于言传。

前端框架、插件、类库很多。写之前想了很多，但是感觉写起来，总是感觉无从下手。面好广，多学多看多练手。

附个关于一些框架和一些技术文档。

平时记录的链接

//css3快速查找
http://ued.ctrip.com/blog/wp-content/webkitcss/quicksearch.html

//HTML5 五个有用的新特性
http://www.open-open.com/news/view/102a2de

//HTML5视屏
http://www.iteye.com/topic/1133212

//HTML5上传
http://newhtml.net/html5-files-uploads/

http://www.ipresst.com/ 一个交互效果不错的网站
http://tokyomildfoundation.com/ css3做的不错的网站
https://www.teambition.com 清新型的企业站

//highcharts中文地址
http://www.highcharts.me/demo/index.php

http://www.w3cplus.com/css3/flexbox-basics.html CSS3

//css3 loading图标
http://www.html5tricks.com/12-css3-loading-images.html

//css3示例
http://gudh.github.io/ihover/dist/index.html

//call/apply
http://uule.iteye.com/blog/1158829

//jquery解析--讲解正则
http://nuysoft.iteye.com/blog/1217898 :

//代码格式化工具
http://tool.oschina.net/codeformat/json

//requirejs中文API
http://www.requirejs.cn/docs/api.html

//RequireJS和AMD规范
http://javascript.ruanyifeng.com/tool/requirejs.html
http://www.ibm.com/developerworks/cn/web/1209_shiwei_requirejs/

//bootstrap中文API
http://v2.bootcss.com/base-css.html

//smartadmin模板库
http://192.241.236.31/themes/preview/smartadmin/1.4.1/ajaxversion/#ajax/bootstrap-forms.html

//中文版bootstrap组件库
http://v3.bootcss.com/components/#panels

//facebook react前端框架
http://facebook.github.io/react/docs/getting-started.html

写的很简单，有空再编辑下。