Web前端基础入门精讲
已有644人试学
¥0原价：199
你将收获：
- 1.了解常用浏览器和浏览器内核
- 3.掌握HTML常用标签及使用技巧
- 5.掌握 DIV+CSS 布局方式
- 2.了解语义化的概念
- 4.掌握 CSS 及使用技巧
- 6.掌握常见网页布局模式
只需1步，5秒极速领取
获取验证码
立即领取 
*未注册手机号领取成功后自动登录
行业、岗位选择多
前端
职业晋升快
首席架构师
工作10+年
前端专家
工作8-10年
前端架构师
工作5-8年
高级前端工程师
工作3-5年
中级前端工程师
工作2-3年
初级前端工程师
工作1-2年
零基础多久能就业？
测测我适合学前端吗？
- • 80+个职场技术点全部贯穿
- • PC/后台/移动/小程序等常用终端全覆盖
- • 真实企业项目一比一搬迁课程
- • 10+个 企业级项目、从容应对企业需求
新增内容
- • 新增 学成在线项目
- • 新增 阿里百秀响应式页面制作
- • 新增 jQuery 购物车案例、电梯导航案例及
TODOLIST案例 - • 新增 阿里百秀综合项目
- • 新增 好客租房移动 WEB 项目
- • 新增 人工智能案例：啪啪测颜值
- • 新增 黑马优购商城项目
- • 新增 VSCode编辑器的使用和插件安装
- • 新增 导读视频，逐步引入知识点，让知识更容易理
- • 新增 ECMAScript 2015 (ES6) 新语法
- • 新增 Promise 对象、Generator 生成器函数、
async、await 函数、常用异步流程控制库 - • 新增 大数据可视化课程
- • 新增 Vue Server Renderer 服务端渲染
- • 新增 项目打包及优化、项目部署与发布
- • 新增 webpack中的处理打包课程
- • 新增 create-react-app 脚手架工具、Redux 状态管理架构
- • 优化 HTML+CSS知识点和案例
- • 优化 less知识点，讲解更全面
- • 优化 JavaScript基础语法、WebAPI、以及案例讲解
- • 优化 vue课程讲解
- • 优化 品优购电商后台管理系统项目 讲解
- • 优化 webpack 课程讲解
- • 优化 React课程讲解
- • 优化 微信小程序知识点讲解
查看详细课程大纲
解决方案
- 基于Echart.js的大数据可视化解决方案
- 基于Element-UI的快速应用开发解决方案
- 基于Express服务端渲染方案
- 基于vue.js全套技术栈的管理系统开发解决方案
- 基于百度地图API的地图业务解决方案
- 基于AntDesign的快速应用开发解决方案
- 基于Flex的快速布局解决方案
- 基于人脸识别解决方案
- 基于WePY的小程序快速开发解决方案
- 基于React.js全套技术栈SPA开发解决方案
更多解决方案
查看课程大纲
查看全部课程大纲
获取完整技术图谱
第一阶段
HTML+CSS
第二阶段
移动 Web 网页开发
第三阶段
JavaScript 网页编程
第四阶段
Node.js 与 AJAX
第五阶段
Vue.js实战开发
第六阶段
微信小程序
第七阶段
React.js实战开发
Angular实战开发
主讲内容
• HTML • 语义化标签 • 盒模型 • 定位与浮动 • CSS调试技巧 • PS切图 • 网页特效 • 静态页面开发 • CSS • PSD文件还原网页文件
可掌握的核心能力
1. 了解常用浏览器和浏览器内核 2. 了解语义化的概念 3. 掌握 HTML语法及使用技巧 4. 掌握 CSS 语法及使用技巧
5. 掌握 DIV+CSS 布局方式 6. 掌握常见网页布局模式 7. 掌握 HTML 常用标签 8. 掌握 Photoshop 切图 9. 能够完成基本的动画效果 10. 能够完成基本的动画效果 11. 能够根据PSD文件独立完成静态页面的开发工作
5. 掌握 DIV+CSS 布局方式 6. 掌握常见网页布局模式 7. 掌握 HTML 常用标签 8. 掌握 Photoshop 切图 9. 能够完成基本的动画效果 10. 能够完成基本的动画效果 11. 能够根据PSD文件独立完成静态页面的开发工作
可解决的现实问题
具备PC端网页布局分析和网页开发能力。
市场价值
能够根据PSD文件文件，完成PC端静态网页的开发工作，学完此阶段，尚不能够达到企业用人标准。
主讲内容
• HTML5 标签 • CSS3 动画 • 移动端适配 • 真机调试 • rem • flex 布局 • 媒体查询 • Bootstrap
• Viewport • 移动端调试
• Viewport • 移动端调试
可掌握的核心能力
1. 掌握 HTML5 新布局标签、多媒体标签 2. 掌握 CSS3 2D、3D 变换、动画效果 3. 了解移动端屏幕、移动端浏览器、操作系统的不同 4. 掌握常用移动端调试方法 5. 掌握常用移动端适配方法 6. 掌握 CSS 预处理器 less 的使用 7. 掌握常用移动端框架使用方法 8. 掌握常见移动端页面开发 9. 掌握响应式布局开发 10. 掌握 Bootstrap 开发响应式页面 11. 掌握适配不同终端的网页开发技术选型
可解决的现实问题
1. 具备移动端网页布局分析和网页开发能力。
2. 能够使用H5和C3实现PC端和移动端炫酷页面的开发能力。
2. 能够使用H5和C3实现PC端和移动端炫酷页面的开发能力。
市场价值
能够完成移动Web网页、响应式页面以及炫酷页面的开发工作，学完此阶段，尚不能够达到企业用人标准。
主讲内容
• 网页编程 • 作用域 • 预解析 • JavaScript 高级 • 面向对象 • 闭包 • 原型 • 原型链 • 正则表达式 • DOM • BOM • 动画函数 • jQuery • jQuery 插件
可掌握的核心能力
1. 能够掌握 JavaScript 基本语法 2. 掌握常见 JavaScript 算法 3. 掌握 DOM 的各种操作 4. 熟练使用面向对象思想进行 DOM 编程 5. 掌握 JavaScript 的高级语法 6. 熟练使用 jQuery 操作 DOM 7. 熟练使用和编写 jQuery 插件 8. 掌握应对业务编程的能力 9. 掌握 JavaScript 常见兼容性方案
可解决的现实问题
1. 能够实现基于面向过程、面向对象以及链式编程的业务逻辑开发
2. 具备前端领域基础编程思维和能力
2. 具备前端领域基础编程思维和能力
市场价值
能够完成PC端网页、移动Web网页、响应式页面中的功能和特殊 效果的开发工作，学完此阶段，具备一定的企业
基础用人标准， 但尚未达到初级前端开发工程师水平。
基础用人标准， 但尚未达到初级前端开发工程师水平。
主讲内容
• Node.js • JavaScript 模块化 • 异步编程 • 服务端 • MongoDB • mongoose • HTTP 协议
• Express • Cookie • Session • 中间件 • 分页 • 注册登录 • 模块化 • CMS 系统开发
• Ajax
• Express • Cookie • Session • 中间件 • 分页 • 注册登录 • 模块化 • CMS 系统开发
• Ajax
可掌握的核心能力
1. 能够建立客户端服务器交互模型，熟悉网络通信相关概念 2. 能够使用 Node.js 进行 Web 服务端开发
3. 能够掌握 JavaScript 异步编程模型 4. 能够掌握 JavaScript 模块化编程方式 5. 能够使用 Node.js 操作 MySQL 数据库
6. 能够理解 HTTP 协议 7. 熟悉原生 Ajax 请求流程与细节，并掌握常见跨域技巧 8. 能够基于 jQuery 的 Ajax 相关 API 熟练开发常见的前端功能 9. 能够独立开发基于后台接口的动态网站、Ajax 数据交互的项目 10. 能够独立完成企业网站从前台到后台的基本开发工作
3. 能够掌握 JavaScript 异步编程模型 4. 能够掌握 JavaScript 模块化编程方式 5. 能够使用 Node.js 操作 MySQL 数据库
6. 能够理解 HTTP 协议 7. 熟悉原生 Ajax 请求流程与细节，并掌握常见跨域技巧 8. 能够基于 jQuery 的 Ajax 相关 API 熟练开发常见的前端功能 9. 能够独立开发基于后台接口的动态网站、Ajax 数据交互的项目 10. 能够独立完成企业网站从前台到后台的基本开发工作
可解决的现实问题
1. 能够实现前后端数据交互，从而能够实现页面数据展示的增删改查
2. 具备一定的基于node后端开发能力
3. 具备一定基于node的项目部署和发布能力
2. 具备一定的基于node后端开发能力
3. 具备一定基于node的项目部署和发布能力
市场价值
1. 能够完成前后端数据交互和基于前后端分离模式的开发的工作，
2. 学完此阶段，具备企业基础用人标准，能够达到初级前端开发工程师水平。
2. 学完此阶段，具备企业基础用人标准，能够达到初级前端开发工程师水平。
主讲内容
• vue • axios • vue-cli3.0 • vuex • webpack • echarts
可掌握的核心能力
1. 能够掌握使用Vue技术栈进行项目开发 2. 能够掌握源代码管理工具的使用 3. 能够熟练掌握前后端分离开发模式
4. 能够掌握使用主流框架开发管理系统 5. 能够掌握 Webpack 项目构建配置流程 6. 能够掌握 Web 项目的部署与发布模式
7. 能够掌握常见网站业务模块开发 8. 掌握使用echarts进行大数据可视化交互开发
4. 能够掌握使用主流框架开发管理系统 5. 能够掌握 Webpack 项目构建配置流程 6. 能够掌握 Web 项目的部署与发布模式
7. 能够掌握常见网站业务模块开发 8. 掌握使用echarts进行大数据可视化交互开发
可解决的现实问题
1. 使用Vue技术栈开发企业级项目
2. 掌握前后端分离的开发方式
3. 掌握项目的打包和发布
2. 掌握前后端分离的开发方式
3. 掌握项目的打包和发布
市场价值
理解Vue的开发理念、内部运行原理，梳理使用Vue组件开发常见功能。满足前端开发行业中的常见需求。
主讲内容
• 微信小程序 • WePY • 黑马优购 • 小程序商城
可掌握的核心能力
1. 能够掌握小程序的开发基础 2. 能够独立开发小程序项目 3. 能够掌握小程序开发框架 WePY 的使用 4. 掌握第三方 AI 平台的使用
可解决的现实问题
1. 具备使用第三方人工智能平台服务的能力
2. 具备微信小程序项目开发能力
2. 具备微信小程序项目开发能力
市场价值
能够使用WePY 小程序开发框架进行微信小程序项目开发， 学完此阶段，具备企业用人标准，能够达到中级前端开发工程师水平。
主讲内容
• react • Redux • AntDesign组件框架 • Angular • Typescript
可掌握的核心能力
1. 能够理解React的开发理念 2. 能够掌握React的基本使用 3. 能够理解React的内部原理
4. 能够使用React及其常用组件库进行项目开发 5. 能够使用React封装项目中用到组件实现复用
6. 能够掌握React项目中常见问题的解决方案 7. 能够掌握React-Redux进行状态管理 8. 能够掌握声明式编程的思想
9 能够掌握组件化开发的思想 10. 能够掌握React项目优化、部署
4. 能够使用React及其常用组件库进行项目开发 5. 能够使用React封装项目中用到组件实现复用
6. 能够掌握React项目中常见问题的解决方案 7. 能够掌握React-Redux进行状态管理 8. 能够掌握声明式编程的思想
9 能够掌握组件化开发的思想 10. 能够掌握React项目优化、部署
可解决的现实问题
具备使用React或者Angular开发能力，配合React内部原理，增强解决项目中复杂业务问题的能力，从项目搭建到项目开发再到项目部署上线，让学员可以完成常见企业级项目的开发。
市场价值
配合常用组件库解决项目中的一些共性问题，满足前端开发行业中的常见需求，学完此阶段，具备企业用人标准，能够达到中级前端开发工程师水平。
查看课程详情
查看全部课程大纲
领免费学习资料
- 【8.12新增】Node结合redis解决session分布式储存
- 【8.08新增】VUE+Elelment基础与模块讲解
- 【7.23新增】这些JavaScript开发技巧你用了吗
- 【7.17新增】解密2019前端学习新思路
- 【6.04新增】Web前端框架Flutter
查看课程详情
免费试学
- 前端7天免费试学精品课
- 前端框架
- 前端职业规划精品课
- 前端高清学习路线图
- 前端视频学习资料
- 前端工具
打包下载全集资料
- 电商
- 在线教育
- 后台管理
- 社交
- 租房
- 小程序
- 娱乐
品优购项目
项目介绍：
品优购电商项目属于B2C电商平台，类似于京东商城和淘宝，在该项 目中使用HTML+CSS/CSS3进行页面的布局和动态效果实现，主要实现 了电商首页、列表页面、详情页面，三个页面之间能够进行相互切切换。
项目特色：
1. 根据Photoshop进行效果图的展示和页面尺寸、颜色量取的辅助开发；
2. 综合运用DIV+CSS知识，提高学员进行网页布局的能力。
深度了解项目
学成在线
项目介绍：
学成在线案例是一个在线教育平台， 在该案例中使用HTML+CSS进行页面 的布局，在首页中主要有网页的头部 区域、网页的banner区域、课程导航和课程列表。
项目特色：
1. 根据Photoshop进行效果图的展示和页面尺寸、颜色量取的辅助开发
2. 综合运用DIV+CSS知识，提高学员进行网页布局的能力
深度了解项目
电商后台管理项目
项目介绍：
电商后台管理系统项目通过使用vue官方vue-cli3.0脚手架工具提供的工作流快速搭建和开发项目，运用阿里旗下饿了么 Element UI组件库搭建网页结构同时实现相应页面中的功能，通过axios请求后端相应的接口，然后把请求到的数据展示到页面中，通过Vue-router作为前端路由管理复杂页面。
项目亮点/ 特色：
1. 前后端分离模式开发 2.vue-cli3.0 3.ElementUI组件库（饿了么UI） 4.Echarts数据可视化库
深度了解项目
阿里百秀项目
项目介绍：
阿里百秀项目是一个文章社交类管理平台，内部一共分为两个项目，前台项目用于展示发布的文章、上传的图片和相关用户评论，后台项目登录之后，用于文章编写和发布以及对文章、用户信息、评论信息、网站图片进行统一管理。
项目特色：
1.前后端分离模式开发 2.git项目版本管理 3.MongoDB数据库 4.session登录状态保持
5.bootstrap框架
深度了解项目
好客租房
项目介绍：
好客租房项目是一个类似于我爱我家、 自如友家类的租房APP，用户可以再平 台中浏览租房信息，用户注册、用户 登录、查找租房信息、租房列表、租房详 情、租房咨询、个人中心等。
项目特色：
1. 前后端分析模式开发
2. 基于React技术栈独立开发完整版移动web
3. 项目部署发布
深度了解项目
黑马优购商城
项目介绍：
黑马优购商城是一个小程序电商业 务项目，本项目主要功能有首页推 荐频道展示、分类筛选、搜索商 品、商品详情、分页加载数据及长 列表展示优化、购物车、下单、支 付、用户个人中心等。
项目特色：
1. 使用更高效小程序的框架 WePY
2. 结合ES6语法
深度了解项目
啪啪测颜值
项目介绍：
啪啪测颜值案例是一个通过拍照 ，结合第三方人工智能平台服务 ，进行人脸年龄检测、性别检测 、表情分析、颜值检测案例。
项目特色：
1. 人工智能（AI）平台服务调用
2. 开发人工智能应用终端
深度了解项目
查看项目源码
免费试学
伍老师高级讲师
移动互联软件开发工程师。从事移动互联开发6年， 教学工作3年。熟悉Windows Phone、 iOS等平台的应用级 开发。参与项目：广东省大学生就业服务平台，长沙市某建材交 易信息网，广州市某大型地产项目，某大型手机信息交易平台
找老师聊一聊
江老师 高级讲师
具有多年软件开发和教学经验，精通html，css，js,asp.net 等编程语言和数据库系统。深入研究bootstrap、ligerui、 easyui等前端流行框架，在js面向对象上有很深的造诣
找老师聊一聊
段老师高级讲师
前端开发工程师和软件开发工程师， 具有5年软件开发项目经验 ，精通网站前端设计、html、JavaScript、CSS+DIV、Regular Expressions和Ajax、以及客户端技术的使用
找老师聊一聊
刘老师高级讲师
后端开发出身，曾在金和软件参与大型SOA项目开发； 后入职国美集团旗下负责前端开发工作。基础扎实，深 入原理，热爱技术，喜欢读书，看过大量有关前端方面的 书籍。 为人友善，知识面广
找老师聊一聊
李老师 高级讲师
多年大中型项目开发经验,曾就职于某大型外企，在软件开发和培训 方面积累了丰富的经验,参与电商平台、特许行业CRM系统等项目， 涉足跨平台技术解决方案、.Net、Node.js等
找老师聊一聊
王老师 高级讲师
6年互联网行业从业经验，曾任职国内某著名电信运营商工程师一职。 精通html、css、js、jquery、HTML5、Ajax等各种前端技术 及React、AngularJS等流行框架，熟悉后台语言.NET
找老师聊一聊
周老师 高级讲师
从事前端开发多年，有丰富的浏览器兼容和前端开 发经验，精通html5+css3，精通移动web开发。曾担 任某互联网公司前端主管
找老师聊一聊
吴老师 高级讲师
从事前端开发工作多年，精通JavaScript、DOM、JQuery、Ajax 等前端技术，对前端各个领域均有浓厚兴趣。在教学方面喜欢“较真”， 对课程知识的细节极为看重，秉承传智播客务实的理念， 认真对待每一节课，让每个传智学子不留遗憾！
找老师聊一聊
查看更多讲师
中国人民保险承保 符合理赔条件 无法就业 赔付全部学费
学费是多少？
查看礼包清单
立即报名
黑马讲师录播
为什么博学谷的教学模式包含线下录播？
- 1无论身处三四线城市，还是18线小县城，学员都能享有好的
IT 师资。 - 2随时回放，再也不用担心跟不上，学习效率更高！
- 3充分利用碎片化时间，不论你在哪里，随时随地学习。
5年以上开发经验的老师
在线直播
博学谷的直播是怎样的？
- 1博学谷的直播包含以下几种：
- • 重难点循环直播
- • 答疑类直播
- • 学习方法类直播
- • 就业指导类直播
- 2一切为了学员，你有辅导需求，我们就直播。
深度了解教学模式
对于学习，时间是最大的成本。
博学谷提供3对1保姆式督导，极大地缩短学习周期，杜绝拖延。
- 一对一简历修改
- 一对一模拟面试
- 就业推荐
- 试用期辅导
- 全程带班，彻底治愈你的拖延
- 定期跟进你的学习进度
- 360度暖心鼓励陪伴
- 量身定制学习计划
- 一对一答疑辅导
- 一对一作业点评
付费课程买了很多，但几乎都没学完，
总是拖着拖着就放弃了？
别慌，我们有专属班主任全程督导，彻底治愈你的拖延！
专属班主任
丫丫老师
薇薇老师
班主任全程带班，彻底治愈你的拖延！
• 定期跟进你的学习进度，学习有人督促，再也不怕拖延。
• 360度暖心鼓励陪伴，迷茫、心情不佳、状态不好，她统统给你解决。
• 每日分享，让你始终元气满满。
如何治愈拖延，办法问她！
如何系统的学习前端开发呢？
学习过程中遇到问题，谁给我解决？
别急，5年以上开发经验的老师为你定制专属学习计划。
学习过程中，有任何问题，随时找导师一对一答疑！
学习过程中，有任何问题，随时找导师一对一答疑！
前端开发导师
蔡老师
郝老师
李老师
每个阶段都由最擅长的老师给你提供
一对一答疑、一对一作业点评，学习成果有反馈！
一对一答疑、一对一作业点评，学习成果有反馈！
我要定制专属学习计划
职场小白？不会写简历？没有面试经验？怎么破？
别怕，具有8年IT行业工作经验的老司机，手把手教你写简历、模拟面试。
就业指导老师
景老师
王老师
就业指导老师，领你入职场！
• 一对一简历修改、一对一模拟面试。
• 根据学员情况，推荐就业。
• 试用期辅导，帮助学员迅速融入企业，顺利度过试用期。
一对一职业规划
博学谷努力为每位毕业生搭建职业进阶平台，构筑了全程化、个性化的职业生涯
辅导体系，建立以各地区、各院校以及各企业相结合的毕业生就业服务平台。
我所在城市有就业服务中心吗？
在线就业班和自己看视频有什么区别？ 点击咨询
学费要多少？ 点击咨询
担心没有自制力，坚持不下去怎么办？ 点击咨询
学不会怎么办？ 点击咨询
零基础可以学会吗？ 点击咨询
学多长时间可以找到工作？ 点击咨询
我还有其他问题