关于前端浅谈以及思考

首先在此强调一下，笔者并不是专业学习编程出身。半路出家转行IT产业，对前端也是基于工作和兴趣才会慢慢研究起来。当前形势，前端市场很火，但需要认清的是火的是各大框架，而且需求也是针对中高端从业人员，因为当下我们小白做的H5也好，样式也好，亦或是JS也好，我们的职位被替代性很强，一个什么都不会的人从头学起也可以在短时间内掌握到一定水平，并且如果有天分的话，你被淘汰的可能性也是很高的。那么我们看到的前端基础无非都是那些，需要的是更多的去思考如何在项目中实践我们的知识，并且在短时间内较高效率的完成任务。

前端最基本的三大构成HTML5、CSS3、JavaScript尤其是前两者看起来尤其简单容易，但是很多人改起来依然是头疼，为什么？缺少思考和实践，以及对于相关的知识点的反思。

本文将从H5开始谈一谈我这个小白对于前端的理解和认识以及思维方式

1.HTML5

首先我们在学习这部分的时候肯定都知道了各种各样的标签（tag），也知道如何使用list，table，表单，链接等基本功能。可参考：http://www.w3school.com.cn/html/index.asp
那么我举一个简单的例子，如果我们要去制作一个菜单或者导航栏我们需要使用哪些H5元素
（1） 个人认为最无脑的方式：table
（2）最为常见的方式：list
那么我们是否一定需要链接（a标签）：答案是否定的，h5元素中大部分都有onclick的属性，结合JS我们可以实现和链接标签相同的效果，只不过如果对样式要求多一些的话在最初修改样式或者套用样式的过程中需要花费更多的时间和精力罢了。

学习H5主要学习的几大部分

（1）表格table

需要了解table,thead,tbody,th,tr,td之间的嵌套关系，以及合并行合并列这些基本就足够

（2）列表list

常见的有序和无序列表需要思考的是可以用来做什么，例如可以制作菜单和导航栏也可以用于做树状图等

（3）表单form（超重要）

作为前后端对接中最常使用的部分其中涉及的小细节很多
例如复选框的value起到什么作用，select默认选择，H5的required特性等等在学习的过程中多去尝试最好每一种都使用一次。
关于表单的提交在不使用框架的前提下是没有回调函数的，即提交后跳转到其他页面会存在一些问题，可使用JS插件解决。

（4）块级元素div

调整页面整体框架布局的重要元素。

（5）iframe

可作为导入其他html页面时候使用，默认的高度为0，需要通过css或js对高度进行动态调整设置。

（6）canvas绘图

canvas绘图部分算是最难的H5部分，可以通过此绘制各类统计图，也可以制作钟表，动态特效等。

当然H5中也加入了新特性，例如video，audio等视频音频播放器效果，个人建议有条件的可以去看一下w3school（英文版），里面提供了知识讲解和练习。

2.CSS3

个人认为其实样式这个东西很简单，但是要熟练运用还是需要扎实的基础和对于细节的把控能力。

比较重要的几个部分

（1）boxing model盒子模型

主要是针对margin（外边距），padding（内边距），border的理解和运用，对于相对位置、绝对位置也需要有一定的理解才是。

（2）动画效果

需要理解动画初始，过度以及结束的时候对应的状态。

（3）responsive layout（需要考虑不同浏览器适配）

自适应布局，一是针对不同分辨率和屏幕大小的PC端，二是针对各式各样的移动端尺寸（手机和平板）进行设置，注意边界值。另外高度的自适应可能是一个比较让人头疼的事情，如果css不容易实现也可以通过js动态调整得到。

（4）选择器（id，class等）

主要是优先级和用途，id在同一h5文件内只可以出现一次，class可出现多次。以及class和id对应的符号问题，还有例如只修改段落标签内的某class样式可以使用p.class;多个class的时候如何选择等等问题。

CSS3总体来说是很简单的，主要是对于一些部分的理解需要通过实践才能得到，例如你想制作一个背景半透明但是内容不透明的div怎么去操作，是使用rgba设置背景色还是使用rgb颜色+opacity，二者有何区别？什么时候调整margin或者padding无效等等这一类问题。

3. JavaScript（JS）

作为前端页面时下最可说道的部分，作为一名还不都深入研究前端的我来说，在此要强调重要的事情。

（1）基础基础基础（重要的事情说三遍）

这里所谓的基础指的是ES5的语法，如果你已经能较为熟练地掌握和使用该部分语法，可以去学习ES6语法，typescript以及三大框架体系（Vue，Angular，React三选一即可）。

（2）DOM

文档对象模型 (DOM) 是HTML和XML文档的编程接口。它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。
DOM 将文档解析为一个由节点和对象（包含属性和方法的对象）组成的结构集合。了解DOM可以利用JS动态生成页面，进一步去了解和学习JS的原理。

（3）Bootstrap和JQuery

前者多用于样式，后者主要用于功能，学习两部分主要是加深对于前端整体布局把控，功能绘制

（4）数据交互

前端需要和后端进行数据交互和传输，前端直接存储在session、cookie或者localstorage这种不叫做永久性存储，且安全性很差，需要采用syn（同步）或者asyn（异步）方式与后端进行交互，可采用ajax、promise等方式或者使用框架内方法进行，需要考虑不同浏览器适配问题。

本章先写这么多，特别要强调JS学习和JAVA、C等比较而言算是较为容易上手的，但依然需要实践进行提升，另外推荐一下学习JS基础的书籍
ES5学习：《JavaScript权威指南》，网上一搜就有；
ES6基础：《ES6标准入门》 https://es6.ruanyifeng.com/

最后

以上就是明亮苗条为你收集整理的关于前端浅谈以及思考的全部内容，希望文章能够帮你解决关于前端浅谈以及思考所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。