目录

前端技术：

学习方法

前端要怎么学/p>

前端技术栈

HBuilderX

介绍

安装

主题

字体

备注字体颜色

项目结构

jQuery语法支持

Web概述

静态页面HTML

概念

结构

入门案例

语法

常用标签

标题标签

列表标签

图片标签

超链接标签

Input标签

表单标签

永和门店管理系统

H5播放视频

css

CSS技术

什么是CSS

CSS的用法

选择器

标签名选择器

class选择器

id选择器

分组选择器

属性选择器

盒子模型

margin（外边距）

border（边框）

padding（内边距）

元素类型的补充

块级元素

行内元素

行内块元素

永和门店系统

用户注册练习

js

静态 页和动态 页

动态 页

页是如何和后端交互的呢/p>

JS概述

什么是JS

名词解释

特点和优势

入门案例

HTML中引入JS

通过script标签引入JS代码

通过script标签引入外部的JS文件

JS语法

注释

基本数据类型

复杂数据类型

JS的变量

JS的运算符

JS语句

if…else语句

switch…case语句

循环语句

JS数组

JS数组的声明方式

数组需要注意的细节

数组的常见操作

JS函数

方式一：通过function关键字声明函数

方式二：通过函数直接量声明函数

JS对象

内置对象

自定义对象

DOM树的作用

组成

DOM树结构

Document对象

dom.html

总结

json

概念

作用

语法

转换工具

测试

ajax

概述

原理

核心对象XMLHttpRequest

测试

console调试 页

Chrome

log

warn

table

vue

Vue概念

同类产品

官

特点

渐进式框架

入门案例.html

改造入门案例.html

MVVM框架

基础语法

运算符 operator

方法 methods

Vue解析数据

三种data值的写法

高级用法：v-命令

指令集

双向绑定 v-model

闪现 v-cloak

判断 v-if

循环 v-for

事件 v-on

绑定 v-bind

小结

构建Vue项目 lifecycle+npm+webpack

Vue的生命周期 lifecycle

npm 概念

webpack 概念

vue-cli脚手架

作用

安装nodejs并验证

配置npm

参数说明

脚手架安装

创建Vue项目 npm

工作空间

生成vue项目

启动项目 & 停止项目

测试访问

HBuilderX管理Vue项目

打开Vue项目

项目结构

目录结构

重要文件说明

调用关系图

常见错误

Permission denied

Unexpected end of JSON input while parsing near

unable to verify the first certificate

vue-cli · Failed to download repo vuejs-templates/webpack: unable to verify the first certificate

扩展：高级用法：ajax

介绍

price.json

axios.html

常见错误

观察者设计模式

扩展：HBuilderX自定义模板

自定义html模板

vue模板.txt

创建新文件调用模板

自定义组件

创建组件Car.vue

修改App.vue,注册自定义组件

测试

安装 element-ui

安装

修改 main.js,引入Element

修改 Car.vue

基础知识

布局 layout

图标 icon

按钮 button

表格 table

输入框 input

表单 form

扩展:JavaScript API

splice

Object.assign

copyObject

项目案例：商品后台管理系统

界面原型

---

前端技术：

学习方法

前端要怎么学/h3>

前端位于整个项目首要要开发的内容，直接和用户打交道，实现页面的展现和交互功能，所以在分类上俗称为前端。随着软件技术的日趋成熟，前端内容也呈现爆炸式的增长，和革命性的变革，前端借鉴后端的发展经验，也开始应用分层体系，也开始术有专攻，解决一个专项的问题，也开始变得庞大和臃肿。从简单单一功能向框架过渡。今天的前端技术已经变得不简单，不亚于后端开发，甚至难度超越了后端开发。

但从整体来看（前端占软件开发总量的百分之十左右，地位可见一斑）；从技术的含金量来看（如：业务功能是核心，远超UI的作用；分布式缓存redis的作用远超vue前端），从职业的发展路径来看（通向架构师之路，大都由后端工程师晋升的，前端几乎没有）；从薪资的天花板来看（随着年头的拉长，后端工程师的薪资是前端的几倍），后端优势远大于前端。所以对于大家而言，千万不要把重心放在前端技术上，会用，会查，会改才是正确的定位！

前端技术栈

• HTML超文本标记语言实现页面展现，形成静态 页

• CSS层叠样式表实现页面美化

• JS javascript脚本语言实现页面前端和后端的数据交互，形成动态 页

• React facebook出品前端、移动端JavaScript框架

• Angular google 出品基于TypeScript的开源 Web 应用框架

• Vue 国人出品，阿里收购构建用户界面的渐进式框架，自底向上开发

• NodeJS 基于 Chrome V8 引擎的 JavaScript 运行环境

目前市场主流是ES6标准，但TypeScript可能会成为趋势，如Vue 3.0选用的语言则为TypeScript。TypeScript将带来JavaScript的华丽转身，迈入强语言行列，所以其发展趋势不容小觑。

Vue Element Admin 是通过Vue框架结合饿了吗的ElementUI，并在其基础上实现了后台管理的基本功能，企业在其基础上，直接二次开发，添加业务，实现敏捷编程。

HBuilderX

介绍

HBuilder是DCloud（数字天堂）推出的一款支持HTML5的Web开发IDE。 HBuilder的编写用到了Java、C、Web和Ruby，本身主体是由Java编写。

它基于Eclipse，所以顺其自然地兼容了Eclipse的插件，用过Eclipse的开发者使用HBuilder会非常顺手。形成HBuilderX开发前端内容，Eclipse/Idea开发后端内容的格局。

特点：快，是HBuilder的最大优势，通过完整的语法提示和代码块模板等，大幅提升HTML、js、css的开发效率。

安装

官 ：https://www.dcloud.io/hbuilderx.html

安装app版本，整体下来近600m。

主题

字体

默认字体i和l分不清，换成Verdana字体。

备注字体颜色

项目结构

jQuery语法支持

HBuilderX对javascript、html、css、vue支持很好，这些无需选择默认支持，同时也对jQuery有很好的支持，但需要单独选择。

Web概述

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Jla0yree-1622524547984)(RackMultipart20210601-4-m99z7q_html_96371a0fb852cc09.png)]

静态页面HTML

概念

HTML（Hyper Text Markup Language）超文本标记语言，是做 站页面的最基础的开发语言，由Web的发明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年创立的一种标记语言，它是标准通用化标记语言SGML的应用。由W3C组织发展壮大。它的功能很弱，连脚本语言都算不上，类比java这种强语言，那就是一个天上一个地下，但它小而美， 站开发它却是霸主。

HTML历史上有如下版本：

• HTML 1.0：在1993年6月作为互联 工程工作小组(IETF)工作草案发布
• HTML 2.0：1995年11月作为RFC 1866发布
• HTML 3.2：1997年1月14日，W3C推荐标准
• HTML 4.0：1997年12月18日，W3C推荐标准
• HTML 4.01（微小改进）：1999年12月24日，W3C推荐标准
• HTML 5：HTML5是公认的下一代Web语言，极大地提升了Web在富媒体、富内容和富应用等方面的能力，被喻为终将改变移动互联 的重要推手

结构

• 文档声明，用来声明HTML文档所遵循的HTML规范。
• 头部分，用来存放HTML文档的基本属性信息，比如 页标题、编码格式，这部分内容会被 页优先加载。
• 体部分，用来存放 页要显示的数据。
• 声明 页标题
• 用来通知浏览器使用哪个编码来打开HTML文档，打开的方式一定要和保存文件时使用的编码一致，避免出现中文乱码问题。

入门案例