前端入门(1)

1.前身：网页制作

2.语言基础: HTML、CSS、JavaScript

/*
HTML：
构成网页展示的基础，是一种很简单可视化的标识语言，说白了就是 一是一，你写二就出二。
网上所有的网页网站，不管多么牛bi最后都会转化成html，被浏览器渲染出来，用作展示。

CSS： 
又称作样式表，简单点说就是html的外衣，将html包装的明艳动人。

JavaScript：
脚本语言，可插入 HTML 页面的编程代码；它使得HTML页面具有更强的动态和互动性；
是一种直译式脚本语言，非常灵活，可以在任何浏览器上开发与调试的一种动态类型、弱类型、
基于原型的语言。
*/

3.核心： HTML

4.职责：
1、使用Div+css并结合Javascript负责产品的前端开发和页面制作；
2、熟悉W3C标准和各主流浏览器在前端开发中的差异，能熟练运用DIV+CSS，提供针对不同浏览器的前端页面解决方案；

5.Web前端优化：

尽量减少HTTP请求 (Make Fewer HTTP Requests)
减少 DNS 查找 (Reduce DNS Lookups)
避免重定向 (Avoid Redirects)
使得 Ajax 可缓存 (Make Ajax Cacheable)
延迟载入组件(Post-load Components)
预载入组件 (Preload Components)
减少 DOM 元素数量(Reduce the Number of DOM Elements)
切分组件到多个域 (Split ComponentsAcross Domains)
最小化 iframe 的数量 (Minimize the Number of iframes)
杜绝http 404 错误 (No 404s)

6.资深前端开发工程师：
称谓资深一些，工作职责更大一些。一般而言，资深前端开发工程师需要使JavaScript或者ActionScript来编写和封装具有良好性能的前端交互组件，熟练使用CSS+XHTML完美输出视觉界面。同时还要对Web项目的前端实现方案提供专业指导和监督并在日常工作之中对新人及相关开发人员进行前端技能的培训和指导。另外，还要跟踪研究前端技术，设计并实施全网前端优化。最近HTML5、nodejs（JavaScript编程的后台语言）兴起，对资深前端又提出了新的挑战——前端不一定只做前端，也需要熟悉后端，并且要在商业模式、代码架构思想等维度去整体考虑前端的全局布局。

7.实践：
找一个Web框架加快你的Web开发速度，使用框架可以节约时间，如果你使用PHP，可选的框架有CakePHP，CodeIgniter，Zend等，Python程序员喜欢使用Django和 webpy，Ruby程序员喜欢使用RoR。

8.前端技术包括4个部分：
前端美工、浏览器兼容、CSS、HTML。“传统”技术与Adobe AIR、Google Gears,以及概念性较强的交互式设计,艺术性较强的视觉设计等.

9.学习：

掌握基本的3中语言之外还有：——
1. 了解Unix和Linux的基本知识虽然这两点很基础，但是开发人员了解Unix和Linux的基本知识是有益无害的。
2. 了解Web服务器当你对Apache的基本配置，htaccess配置技巧有一些掌握的话，将来必定受益，而且这方面的知识学起来也相对容易。
3. 熟悉版本控制系统的用法，熟悉使用一种优秀的版本控制系统。

———————–基本术语———————-

10.基本知识点：

元素是块级元素。它能够用作其他 HTML 元素的容器。
元素是行内元素，能够用作文本的容器。
什么是CSS？

 <style>
 #head{。。。。。}定义文档或节的页眉
 #nav{。。。。。}定义导航链接的容器
 #section{。。。。。}定义文档中的节
 #footer{。。。。。}定义文档或节的页脚
 ..............
 </style>

4.什么是JavaScript？
脚本语言，可插入 HTML 页面的编程代码；
它使得HTML页面具有更强的动态和互动性；

<script type="text/javascript">
document.write("<h1>Hello World!</h1>")
</script>

5,声明帮助浏览器正确的显示网页

<!DOCTYPE>不是 HTML 标签。它为浏览器提供一项信息（声明），即 HTML 是用什么版本编写的。
如：<!DOCTYPE html>

6:XHTML 是以 XML 格式编写的 HTML?
是。（更加严格些）
XML 是一种必须正确标记且格式良好的标记语言。通过结合 XML 和 HTML 的长处，开发出了 XHTML。XHTML 是作为 XML 被重新设计的 HTML。

7.什么是HTML5？

HTML5 是最新的 HTML 标准，新的特性，删除一部分.
HTML5 是专门为承载丰富的 web 内容而设计的，并且无需额外插件。
HTML5 拥有新的语义、图形以及多媒体元素。
HTML5 提供的新元素和新的 API 简化了 web 应用程序的搭建。
HTML5 是跨平台的，被设计为在不同类型的硬件（PC、平板、手机、电视机等等）之上运行；
所有现代浏览器都支持 HTML5。

8.文件扩展名：

HTML 文件名应该使用扩展名 .html（而不是 .htm）。
CSS 文件应该使用扩展名 .css。
JavaScript 文件应该使用扩展名 .js。

9.HTML多媒体：
音效、音乐、视频和动画

10.什么是JSP、ASP？
JavaServer Page 是一种服务器端的编程技术
Active ServerPage 动态服务页面

———————–学习流程——————————–

11.WEB前端开发学习流程：

第1阶段：
PS图片处理和页面切图

目标：
1、掌握PS常用工具的操作
2、能独立完成网页布局及切图

内容;
线条与背景、照片效果优化、简单特效、抠图、照片处理、特效制作、PS网页布局及切图、工具实用案例；

第2阶段：
：HTML/CSS静态页面效果实现

目标:
1、掌握各种HTML标签、各种常用CSS选择器、CSS样式的定义及使用；
2、具备手动完成各种页面及样式的编写；

内容:
Web前端导入、HTML基础元素、HTML框架集与布局、HTML Form表单提交、CSS基本样式、CSS浮动、定位、CSS盒子模型、HTML与CSS实例操作、课程项目（静态页面）等

第3阶段：
JavaScript页面交互效果实现

目标:
1、掌握JavaScript语言
2、熟练使用JavaScript完成各种交互效果及用户行为控制

内容:
JavaScript入门、JavaScript中的语句、函数、预解释

第4阶段：
jQuery前端应用开发技术

目标:
1、掌握jQuery库
2、能使用jQuery完成各种网页交互效果与用户行为处理

内容:
初识jQuery、jQuery选择器、jQuery DOM属性、jQuery事件、大作业、jQuery特效、jQuery动画、表单、jQuery插件、jQuery UI

第5阶段：
HTML5/CSS3特效和移动端交互效果

目标:
1、掌握HTML5/CSS3基本知识，能实现特殊交互效果和移动端交互效果；

内容:
HTML5、Web存储及HTML5离线应用、Workrs多线程处理和Geolocation地理位置CSS3、CSS3动画、CSS3网页布局及用户界面、CSS3响应式设计

第6阶段：
WEB前端开发企业级框架技术

目标:
理解掌握流行前端框架BootStrap、ArgularJS、Vue、React，能够进行企业级的运用

内容:
BootStrap、移动端项目、Angular入门、与后端服务器通信、Angular提升、Vue.js概述、绑定与渲染、Vue.js提升、React.js、jQuery Mobile框架、jQuery

第7阶段：
后台交互和PHP基础

目标:
理解前端展示与后台交互相互关联技术

内容:
Ajax概述、XMLHttpRequest对象、jQuery与Ajax的运用、Ajax详解及跨域处理、PHP基础、PHP表单及文件操作、PHP链接MySql及PHP与AJAX ）；

———————–基本术语———————-

———————–学习流程——————————–

猜你喜欢