行业知识
html,css,js速成
���备：vscode配好c，python，vue环境，并下载live server插件。
命令行里code . 意思是vscode把当前文件夹当作项目打开。
文章目录
- 1. html
- 1. 基础语法
- 2. 元素与属性
- 3. 表格
- 4. 表单
- 2. css
- 1. 基础语法
- 2. 层级关系
- 3. 颜色和文本
- 4. 盒子模型
- 5. display布局
- 6. 定位
- 3. javaScript
- 1. 基础
- 2. 变量与常量
- 3. 引用数据类型
- 4. 对象数组和JSON
- 5. if...switch...for...while
- 6. 函数
- 1. 常见函数
- 2. 声明提前
- 3. 闭包
- 4. this指向，call，apply
- 7. 类与对象
- 1. 简介
- 2. 对象与原型
- 3. 动态原型模式创建对象
- 4. Proxy(代理)对象与Reflect(反射)对象
- 5. Object类常用方法
- 更多参考
1. html
hypertext markup language(超文本标记语言)
1. 基础语法
一个html元素由开始标签，填充文本，结束标签构成。
常见标签 说明 粗体 斜体 下滑线 删除线 换行 水平线 无序列表 有序列表 hello world
有1-6级标题
这是一个段落标签
- coffee
- tea
2. 元素与属性
块级元素
在页面以块的形式展现
出现在新的一行
占全部宽度
内联元素
通常在块级元素内
不会导致文本换行
只占必要的部分宽度
hello world!
百度href和target都是a标签的属性3. 表格
表格由table标签定义
菜品 价格 双皮奶 8 肠粉 7 4. 表单
使用form元素创建表单，action属性定义表单元素提交的目标url，method属性定义提交数据的http方法。
常见的表单元素有label，input，select，option
input的type属性有text,password,radio(单选框),checkboxes(复选框),submit
username: password:
2. css
1. 基础语法
Cascading Style Sheets，层叠样式表
css规则由选择器和声明构成。
选择器主要有元素选择器，类选择器，id选择器。
h4{/*元素选择器*/ color:red;}.class1{ /* .号开头为类选择器*/ color:green;}#id1{/* #号开头id选择器*/ color:blue;}123
123
123
2. 层级关系
可以定义父类和子类，方便嵌套的时候区分。
.outside{ color:red; .inner2{ text-align:right; }}.outside .inner1{ text-align:center;}.b{ font-size:30px;}'outside'>123
123
123
3. 颜色和文本
颜色主要有名称，rgb和hex格式
green 绿色
rgb(0,0,255) 蓝色
#FF0000 红色
文本属性 说明 background-color:#f2f2f2; 背景颜色 background-image:url(‘1.jpg’); 背景图片 font-family:“Times New Roman”,Georgia; 字体 text-indent:50px; 首行缩进 line-height:32px; 行间距 text-align:left; 水平对齐方式 font-size:30px; 字体大小 font-weight:200; 字体粗细 word-spacing:20px; 字间距 4. 盒子模型
一般盒子模型包括：边距(margin)，边框(border)，填充(padding)，和实际内容(content)。
盒子的四个方位为top,right,bottom,left
.box1{ /*border:1px solid #98bf21;*/ /*border-width:1px;*/ /*border-style:dashed;*/ /*margin-right:10px;右侧边距10px*//*margin: 10px;上下左右等宽*/ /*margin: 6px 12px;上下6px，左右12px*/ /*padding:6px 10px 4px 7px solid red;*/ /*分别指定上右下左*/ }5. display布局
块级元素(block)
内联元素(inline)
内联块级元素(inline-block)
隐藏元素(none)
灵活布局(flex)
网格布局(grid)
.none{ display:none;}.inline-block{ display:inline-block; width:100px; height:120px;}看不见我
'inline-block'>goodjob6. 定位
相对定位 relative，相对于正常位置移动
绝对定位 absolute，比如h2放在什么位置
静态定位 static ，不受top,bottom等影响
固定定位 fixed，窗口滚动它不移动。
h2.pos_abs{ position:absolute; left:100px; top:150px;}h2.pos_rel{ position:relative; top:100px;}正常位置
绝对位置
相对位置
3. javaScript
JS可以操作浏览器(BOM)和网页(DOM)。
vscode下载live server插件。
在index.html里输入!，然后按Tab生成html模板。
1. 基础
新建index.js文件写入console.log('hello')，然后在index.html里面写入如下代码。
Document
新手入门
用live server打开html文件，再F12就可以在console看到结果。
此外，还可以用node运行js文件。
2. 变量与常量
var声明变量(全局作用域)，函数内部声明var,函数外访问不到，函数外声明则整个脚本可见。在 for 循环中，使用 var 声明的循环变量在循环结束后仍然存在，并且可以在循环外部访问。
let声明变量(块级作用域)，例如for循环内声明let变量，在for循环外部不可见。使用 let 声明的循环变量在每次循环迭代时都会创建一个新的绑定，因此循环结束后这些变量就不存在了。
const声明常量。
var a=5;let b;b=4;const c=6;//常量必须在声明时定义function fun(){ var i=55; console.log(i); for(var i=0;i console.log(i); } console.log(i);}fun();//55 0 1 2 3 4 5，for语句块外部var i被改变。function fun2(){ var i=55; console.log(i); for(let i=0;i console.log(i); } console.log(i);}fun2();//55 0 1 2 3 4 55，for语句块外部var i未被改变。price} yuan.`);//写模板字符串记得用反引号 f:"jkloli", a:18, homies:['miku','あずませれん','A-SOUL'], address:{ detail:"Platform 9-3/4", state:"UK", },};p.n=66;//添加属性console.log(p.homie[2]);const {a,address:{state}}=p;//抽取同名变量console.log(state);id:1,text:"apple"}, {id:2,text:"banana"}, {id:3,text:"coconut"}];console.log(t[2].text);const j=JSON.stringify(t);//将一个JavaScript对象或值转换为JSON格式字符串const k=JSON.parse(j);//转化成JSON对象console.log(j);//[{"id":1,"text":"apple"},{"id":2,"text":"banana"},{"id":3,"text":"coconut"}] console.log("10");}else if(x10){ console.log("10");}else{ console.log("
