WEB前端怎么入门
WEB前端包括HTML / CSS / Javascript等，高级WEB前端还包括SEO优化等
操作方法
- 01
WEB前端的基本概述图
- 02
web前端的基本学习思路
- 03
第一阶段——HTML标签的学习超文本标记语言(HyperText Mark-up Language 简称HTML)，“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。 html是一个网页的骨架，就好比是盖房子的结构~这也是前端页面的基础。试着想一下，如果一个房子连砖头和水泥都没有，后面的步骤又有什么意义呢？所以我们必须完全掌握HTML的基本结构和常见的标签，属性。有了一个好的开始，距离成功已经一小半啦~ 关于HTML怎么记忆、学习？可能一上来死记硬背，也不会有太好的预期。而且还有可能被吓到？ “我去！这么多标签！怎么记得玩？” 个人感觉有两点可以尝试：语义化的去记忆。比如ul li这个就是列表，button就是按钮，table就是表格。其实这也是html5所倡导的，语义化标签。 2，试着写一个一个小的demo，也许就只是一个列表，一个表格，或者一个按钮。也许写着写着你就懂了呢？ 学习HTML就是要自己不断的去写，去尝试。看着自己的代码能跑起来，有了心目中的效果，这种心情还是很开心的！给大家推荐一个网站，w3cSchool，这里面有在线的代码编辑器。 第二阶段——CSS的学习CSS 层叠样式表—— （Cascading Style Sheets），是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对 网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文 本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。CSS看似比较繁杂，其实只要掌握了CSS中的盒子模型、定位、以及页面布局，就基本上掌握了大半啦~这时我们就以及能够对网页中各个元素进行精准的排版，做出符合我们意愿的网页啦！ 关于CSS的各种属 性，我们还是可以参考学习HTML那样。可以说CSS的属性几乎完全是语义化的。我们需要改变边框，那就是“border”，那我们需要右侧边框做一些改 变，那就是“border-right”。很明显，接下来按照我们的需求还有“右边框的宽度——border-right-with”，”右边框颜色—— border-right-color”等等等，诸如此类 第三阶段——JavaScript JavaScript一种直译式脚本语言，是一种动态 类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在 HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。简单来 说，javascript是一个可以运行在浏览器上面的语言（当然现在基于一些库/框架已经远不只是在浏览器上了），它可以操控浏览器，让浏览器听从我们 的命令。这有点像一个电视剧和遥控器，而javascript就是我们的遥控器。浏览器根据javascript的指令，做出相应的反馈。比如操作 DOM（也可以理解成为操作HTML），可以操作CSS。有了javascript就可以让我更加灵活&动态的操控HTML,CSS.严格来说、HTML和CSS还算不上真正的“语言”，而javascript却是如假包换的脚本型语言，既然是语言，那就会有字符串，数组，对象等等。而我们的javascript可以处理这些与数据有关的工作，比如给数组排个序，去个重等等。</p><p>而我们依靠javascript可以做些什么呢？网页上常见的轮播图，网站的注册功能，提交我们的留言，刷新获取新闻等等。当然，我们强大的javascript远不止此。
- 04
然而因为历史原因，比如我们灰常“尊敬”的 IE 浏览器~出了一套自己的javascript标准，没有和主流javascript标准兼容啊！！作为一个前端er是不是应该把更多精力用在有意义的地方呢，而不是解决兼容。 第四个阶段——jQuery jQuery是一个兼容多浏览器的 javascript库，核心理念是write less,do more(写得更少,做得更多)。jQuery在2006年1月由美国人 John Resig在纽约的barcamp发布，吸引了来自世界各地的众多JavaScript高手加入，由Dave Methvin率领团队进行开 发。如今，jQuery已经成为最流行的javascript库，在世界前10000个访问最多的网站中，有超过55%在使用jQuery。 jQuery的优点我就不挨个说啦，一句话，jQuery是你更上一层楼的利器，也是我们前端er一大利器！Web前端学习小建议这里跟大家扯一扯学习前端的小方法，是我自己的学习方法，大家凑合看看，倒也不一定对在写css前，其实html的结构要是比较合理的，这样写css也会比较顺手。在写一个网页之前，建议先琢磨几分钟，不要上来就写。多去看看别人是怎么写的，然后结合自己的项目，心中有一个大致规划。可以先把最外层轮廓写好，先不着急去写某一个具体的部分。 这里给大家分享一些小技巧： 1、使用reset.css火狐和IE这两种不同的浏览器，在绘制CSS样式方法上截然不同。这种情况下，使用reset.css重置所有的基本样式会让你得到一个全新的空样式表。（可以去网上找一下，很多的） 2、CSS缩写</p><p>CSS缩写简化了你的CSS代码，更重要的是，它让你的代码更加整洁易懂。不是像这样创建CSS .header { background-color: #fff; background-image: url(image.gif); background-repeat: no-repeat;</p><p> background-position: top left;而是像这样创建CSS .header background: #fff url(image.gif) no-repeat top left 3、理解class和id这两个选择器总是让初学者感到迷惑。在CSS中，Class和ID分别用点“.”和井号“#”来标识。简单来说id就是用来标识那些单独不重复的样式，而class是可以重复使用的。 4、实用的也叫链接列表，是用在导航菜单样式上。 5、少用<table>多用<div>CSS最大的优势之 一是使用达到样式上的灵活多变。不同于里的<td>中内容不会 被锁在单元 格。可以说几乎所有的表格布局都可以在<div>和样式的正确使用下完成。当然，有大量表格内容时，还是 用 <table>吧。 6、CSS调试工具在设计CSS时，能够得到页面布局的预览对于优化CSS样式和纠错是很有帮助的。这里有一些免费的CSS调试工具推荐给你，你可以把它装在浏览器上：比如FireFox Web Developer、DOM Inspector、Firebug等 7、!Important</p><p>所有被!important 标记的样式，即使它后来被重写，浏览器也只会采用被标记的那条。 .page { background-color:blue !important; background-color:red;</p><p>}比如上面的例子，因为background-color:blue 被标记为!important ，即使后来有把背景改成红色的语句，也只采用被标记的那条。!important 用来强制使一个样式避免在之后的编码中被修改，遗憾的是IE不支持。
- 05
牢记以上小技巧，也许你的css技能突然就起飞了呢？关于javascript的一些小技巧，下次我再整理给大家~一次性看太多，大家是不是也有点晕？学习前端需要方法，更需要一颗平常心，不要把前端想的多难，需要吃什么苦。。。既然学习这么痛苦，为什么不快乐一点学呢？anyway~希望大家可以成为一个优秀的前端er！