把一些重要的基础知识汇总以防忘记，也是方便自己在后续能继续完善这些基础的知识。
HTML
基础语法
<html></html>有但标签和双标签的分别
同时双标签有包含和并列的关系
标签
分区div: div盒子,包含一整行
标题h1~h6： 不同大小的标题
段落p： 用于放文字段落的盒子
图像img ：用于存放图像
列表ul/ol ：无序列表和有序列表
超链接a: 放超链接的
表单from ：顾名思义的表单
表格table ：顾名思义的表格
框架 iframe：用于将一个html嵌套到另一个html当中去
属性
就是在html的元素中给予其属性，例如tittle、class、id、style
HTML5新特性
语义化标签
像<header> 头部标签<nav>导航栏标签 <section>区块标签，将标签的含义直接用名字表达出来
多媒体标签
1<video> 视频标签<audio>音频标签
CSS
基本语法
在head里面创建style标签，将所要改变的属性卸载style标签里面，外部就不用再写style了
引入方式
行内样式：直接将属性写在html中，例如<div color=”red”>
内部样式表：写在head的style中，例如
<head> <style> .div {}
外部样式表:单独创立一个css的文件，将属性写在里面 ，在调用到html中
选择器
- 后代选择器:例如 ol li{}，把ol里面的li选择出来
- 子元素选择器：.nav>a{} 将class为nav的标签中的a选择出来
- 相邻兄弟选择器： 可选择紧接在另一元素后的元素，且二者有相同的父元素如：h1+p{margin-top:20px}
- 通用选择器：*{}更改当前页面的所有元素的属性
- 标签选择器：div{}直接更改这个名字下的标签的属性
- id 选择器:样式用#定义，结构id调用只能用一次，无法被他人使用
- class 选择器:标签里面带有class=“”，
- 属性选择器:div[class=’ds’],标签是div且class为ds的那个具体的标签
- 派生选择器:div a{}运用在嵌套中的标签里的某一个标签
- 组合选择器：p，div{}标签的属性一同修改
- 伪选择器：例如a::after
- 选择器优先级：若是 行内选择符，则加1、0、0、0。若是 ID选择符，则加0、1、0、0。若是 类选择符/伪类选择符，则分别加0、0、1、0。若是 元素选择符，则分别加0、0、0、1
属性
- px: 像素
- em：相对于父辈的字体大小
- rem：相对于页面的大小进行自适应的属性
- vw：相对于页面的大小进行自适应的属性，对于宽来说（常用）
- vh：相对于页面的大小进行自适应的属性，对于高来说（大多不用）
- 单位
- 背景：background
- 文本：text
- 字体：font
- 列表：
- 表格：from
文档流
- 标准流:不做特殊设定，默认情况
- 浮动流：将标签元素浮动：float:left; 靠左浮动。有清除浮动的知识点
- 定位流，<position：relative> <position：absolute> 子绝父相
内联元素/块状元素
display:block将本来不是块状元素的标签，变为块状元素
盒子模型
- content:用于在伪元素中插入内容
- padding:盒子的内边距
- border:盒子的边框
- margin:盒子的外边距
定位
- static:静止的默认定位
- absolute:相对定位；相对与父辈的位置来定位
- fixed:固定定位，无论怎么滚动页面都不变位置
- relative:绝对定位，相对于当前网页来定位
- sticky:粘连定位，例如广告会随着页面滚动往下滑，他会粘连在页面的最上方
层叠规则
在一个页面中可能会对一个属性或者元素进行不同的需求修改，而这其中就会涉及到层叠顺序，保证能过来来自不同源的全部规则
| 来源 | 重要程度 | |
| 1 | 用户代理 | 普通 |
| 2 | 用户 | 普通 |
| 3 | 页面作者 | 普通 |
| 4 | CSS 动画 | 见下节 |
| 5 | 页面作者 | !important |
| 6 | 用户 | !important |
| 7 | 用户代理 | !important |
| 8 | css 过渡 (css transitions) |
CSS3
- 媒体查询：@media 用于pc端和移动端的不用响应
- Flex 布局：弹性布局，移动端的最爱 display：flex
- Grid 布局
- 瀑布流：像瀑布一样的倾泻排列布局
- ⭐️ 响应式布局：对于不同的屏幕大小，网页就有不同的表现方式
- 动画：@keyframes “名字”{0%{} 100%{}} 关键帧，从0~100之间可以打上多个点，用于展示动画
- 过渡：谁做过度给谁加，transition: 变化的属性 花费时间 运动曲线 何时开始;
- 渐变：
- 背景：background
- 边框：border
- 圆角：border-radius: 10px;（越大）
- 字体：font-family: ‘微软雅黑’;
- 2D / 3D 转换： perspective: 200px;设置透视（3d要用设置在父盒子上）。transition：rotate（50deg）旋转50°，transform: translate3d(700px, 300px, 20px);
-
三款游戏中数值公式拆解分析
选取游戏中对伤害的造成公式的拆解。（1）首先是一款叫做warframe的游戏，他里面有较为复杂的伤害计算公式。…
-
类贪吃蛇小游戏策划案
贪吃蛇塔防游戏 核心玩法：玩家通过长按屏幕来控制贪吃蛇的方向，让贪吃蛇身上的防御塔能自动攻击从四面八方来的敌人…
-
对游戏暗黑地牢（Dark Dungeon）拆解分析其中关于战斗设计逻辑。
《暗黑地牢》在战斗的设计上采用了独特的思路，通过「位置策略×压力管理×资源博弈」的三位一体设计，不同于传统的肉…
-
这是软考的知识点
考试须知 考试项目 考试时间 基础知识 选择题（75分） 知识点 分数 考试内容 软件工程基础知识 11 开发…
-
Spark学习
一、Spark架构与原理 1、Spark的特点 · 速度快：由于采用了内存计算和DAG（Directed Ac…
-
前端三件套基础知识总和
把一些重要的基础知识汇总以防忘记，也是方便自己在后续能继续完善这些基础的知识。 HTML 基础语法 <h…
作者
1538509536@qq.com