1.HTML基础
**1.1VS CODE创建文件夹和文件 **
(Hyper text markup language)超文本标识语言(基于web的开发技术)产生与1993年,目前是HTML 5(2014年)
- VS CODE 创建新的文件夹
- 直接从vscode打开本地文件夹
** 1.2HTML 基本元素**
** 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页面元素的内容、外观、位置、大小等。
- 标识符:变量,函数,属性的名字;
- 第一个字符必须是字母,下划线_,美元$
- 其他位置可以有字符字母,不能使用关键字
** 5.4JS 代码编写**
格式一:直接写在HTML中