2015随手一笔

阅读: 评论:0

2015随手一笔

2015随手一笔

         一晃很多年过去了,从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标签:.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:#00deff9; /*IE6、7、8识别*/
+background-color:#a200ff;/*IE6、7识别*/
_background-color:#1e0bd1;/*IE6识别*/
}

     hack详解友情链接:.html

 

     CSS3示例,有兴趣的可以看下:.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快速查找
.html

//HTML5 五个有用的新特性


//HTML5视屏


//HTML5上传
/

/ 一个交互效果不错的网站
/ css3做的不错的网站
清新型的企业站

//highcharts中文地址
.php

.html CSS3

//css3 loading图标
.html

//css3示例
.html

//call/apply


//jquery解析--讲解正则
:

//代码格式化工具


//requirejs中文API
.html

//RequireJS和AMD规范
.html
/

//bootstrap中文API
.html

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

//中文版bootstrap组件库


//facebook react前端框架
.html

 

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

     

      

       

        

本文发布于:2024-01-31 17:02:49,感谢您对本站的认可!

本文链接:https://www.4u4v.net/it/170669177430052.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

标签:
留言与评论(共有 0 条评论)
   
验证码:

Copyright ©2019-2022 Comsenz Inc.Powered by ©

网站地图1 网站地图2 网站地图3 网站地图4 网站地图5 网站地图6 网站地图7 网站地图8 网站地图9 网站地图10 网站地图11 网站地图12 网站地图13 网站地图14 网站地图15 网站地图16 网站地图17 网站地图18 网站地图19 网站地图20 网站地图21 网站地图22/a> 网站地图23