前端开发 - 概述

1.HTML基础

**1.1VS CODE创建文件夹和文件 **
（Hyper text markup language）超文本标识语言（基于web的开发技术）产生与1993年，目前是HTML 5(2014年)

1. VS CODE 创建新的文件夹
2. 直接从vscode打开本地文件夹
   ** 1.2HTML 基本元素**

hello world!

** 1.3表单元素**

1.4表形式 **

1.5超链接标签

1.6 H5开发规范
语法规则
每条声明都应该独占一行
每条声明语句的 : 后应该插入一个空格
声明块的右花括号应当单独成行
所有声明语句都应当以分号结尾
为了代码的易读性，在每个声明块的左花括号前添加一个空格
对于以逗号分隔的属性值，每个逗号后面都应该插入一个空格
对于属性值或颜色参数，省略小于 1 的小数前面的 0 （例如，.5 代替 0.5）
十六进制值应该全部小写
尽量使用简写形式的十六进制值，例如，用 #fff 代替 #ffffff
为选择器中的属性添加双引号，例如，input[type=“text”]
避免为 0 值指定单位，例如，用 margin: 0; 代替 margin: 0px
声明顺序
Positioning：位置属性（position、right、top、z-index、display、float等）
Box module：盒模型（width、height、padding、margin等）
Typographic：排版（font、line-height、text-algin、letter-spacing等）
Visual：视觉相关（background、border等）
Other：其他（animation、transition、opacity等）
排序原因：因为位置属性可以决定元素在文档流中是否存在，可以覆盖盒模型的相关配置，所以理所应当排在首位；盒模型决定了元素的大小和间距，所以排在第二位；其他属性只会影响元素内部或者只是视觉类不影响全局，所以排在前两位之后。

BEM命名规范
对于class的命名，我们可以直接选用BEM命名规范。BEM是一种组件化的 CSS 命名方法和规范，由俄罗斯 Yandex 团队所提出，使用BEM可以更好地将用户页面划分为独立的块，有利于团队开发。
Block（块）：block是个功能独立的页面组件，支持重复和嵌套，每个块名必须是唯一的，明确指出是哪个块。
Element（元素）：元素是块的组成部分，是依赖上下文的，用于描述它是什么，但不是它的状态。元素之间可以互相嵌套，但元素永远是模块的一部分，而不是另一个元素的一部分。
Modifier（修饰器）：修饰器可以跟块或者元素一起使用，主要是对已定义的元素或块进行深度的装饰或小的区分，因此修饰器不能单独使用，必须依赖于元素或块，防止混淆和冲突。
具体规则如下：
块名称为其元素和修饰符定义了命名空间。
块名称与元素名称之间用双连字符–分隔。
块名称与修饰符或元素与修饰符之间用双下划线__分隔。
命名一般使用小写字母。
单词之间可以使用-分隔。

代码提交规范
​git commit message 规范
(): 下面分别介绍这几个参数的具体含义和规范
用于表示commit的类型，必写。（以下类型大部分来自Angular团队规范）
feat：新功能
fix：bug修复
refactor：代码重构
docs：文档修改（不影响具体功能）
style：样式修改（不影响具体功能）
test：测试内容的修改或增加
chore：构建流程或依赖管理的变更
perf：代码优化：性能提升，安全问题，错误捕捉等
revert：代码版本回滚
用于表示commit的影响范围，可以用route, component, utils, build等，也可以使用具体的模块名称或路径、文件夹等来填充
作为commit的简单介绍，如果有多个功能点或者修改点最好可以用序号标识，简洁明了为主要目标，一般不超过50个字。
​1.7 H5端整体架构设计**
代码架构设计

功能模块与数据流转
主要分三大模块：
【1】频道页：无需登录鉴权
【2】用户服务：包含Id登录/登出、用户信息获取、token换取、开发者认证
【3】管理中心：包含用户鉴权、应用列表、应用创建、消息中心、我的资料

公共模块&组件

路由导航设计

用户权限相关功能模块
【1】用户登录/登出lenovoID平台交互流程；【2】路由守卫鉴权流程；【3】开发者认证流程

应用状态流转交互图

2. HTML表结构

2.1表单标签

2.2无序、有序列表

2.3自定义列表

2.4多行表单

2.5label 标签

3.HTML案例

3.1导航栏设置

** 3.2产品模块设置**

** 3.3快报**

** 3.4模块浮动**

**3.5浮动特性 **

**3.6浮动标准父子流 **

3.7 权重父子流

** 3.8浮动自主排列**

** 3.9通用页面布局**

4.CSS基础

css是Cascading Style Sheets 的缩写,即层叠式样式表单它是由W3C协会制定并发布的一个网页排版式标准,是对HTML语言功能的补充。
css用于定义html文档的样式，即外观，比如网页上的动态文字、文字的色彩、字体、动画效果，都可以由css来实现。
css的主要的用途是对网页中字体、颜色、背景、图像及其他各种元素的控制,使网页能够完全按照设计者的要求来显示。
** 4.1CSS样式表**
Cascading Style Sheets 三种格式：
格式1：内部样式表
格式2：行内样式表<开始标签 style “”></结束标签>
格式3：外部样式表 生成一个.css的文件 @import

4.2链接伪类选择器

** 4.3focus选择器**

** 4.4侧边导航栏渲染**

5.JS基础

** 5.1 JS vs Java**
a.开发公司不同，java (sun, oracle), JS(网景) b. 对象不同：java是面向对象，JS是基于对象；
c.数据类型不同，java 强类（每种变量都有确定的数据类型）: int i = “10”; JS 弱类型（类型由值决定）var i = 10 ; var j = “10”;
d.执行过程

5.2 JS 组成
1.核心 ECMAScript
4. 文档对象模型（DOM）Document Object Model
5. 浏览器对象模型（BOM）Broswer object model
JS 源代码—>编译（.class 字节码文件）—>运行字节码文件

5.3 JS 语法
脚本语言（功能）：动态修改html页面内容，包括创建、删除html页面元素、修改html页面元素的内容、外观、位置、大小等。

1. 标识符：变量，函数，属性的名字；
2. 第一个字符必须是字母，下划线_，美元$
3. 其他位置可以有字符字母，不能使用关键字

** 5.4JS 代码编写**
格式一：直接写在HTML中