很多地方写的很简要,也省略很多。(主要想试试面试的问题),供华农想成为沸点大前端组正式成员或有意往前端发展的童鞋参考。
Html
html5新元素
-
#<canvas></canvas>
标签只是图形容器,必须通过脚本来绘制图形
-
#<audio controls> <source src="" type=""> </audio> 定义音频内容
-
#<video controls> <source src="" type=""> </video> 标签定义视频
内联元素和块级元素
块级元素 | 行内元素 |
---|---|
独占一行,默认情况下,其宽度自动填满其父元素宽度 | 相邻的行内元素会排列在同一行里,直到一行排不下,才会换行,其宽度随元素的内容而变化 |
可以设置width,height属性 | 行内元素设置width,height属性无效 |
可以设置margin和padding属性 | 行内元素起边距作用的只有margin-left、margin-right、padding-left、padding-right,其它属性不会起边距效果。 |
对应于display:block | 对应于display:inline; |
块级元素主要有:
<div> <form> <dl><ol><li><ul> <form> <h123456> <p> <table> <td><tr><th><thead>
内联元素主要有:
<a> <input> <img> <label> 为input进行标记 <b><big><i>加粗、大号加粗、斜体 <strong>语气强调 <sub><sup>定义下标、上标文本
常用标签
<!doctype html>声明为html5文件,必须是html文档的第一行,在<html>标签之前 <meta>: 元数据,是用于描述数据的数据,他不会显示在页面上,但是机器可以识别,这些信息存储于浏览器,如何布局或者重新加载页面。搜索引擎和其他服务。 两个属性 http-equiv属性和name属性 1.name属性主要用于描述网页,例如网页的关键字,叙述等。属性值为content <meta name="参数" content="具体的描述">。 A. keywords(关键字) 说明:用于告诉搜索引擎,你网页的关键字。举例: <meta name="keywords" content="Lxxyx,博客,文科生,前端"> B. description(网站内容的描述) 说明:用于告诉搜索引擎,你网站的主要内容。举例: <meta name="description" content="文科生,热爱前端与编程。目前大二,这是我的前端博客"> 较重要的是viewport属性。常用于移动端设计。 <meta name="viewport" content="width=device-width, initial-scale=1"> 2.http-equiv属性 相当于http的文件头属性。 <meta http-equiv="参数" content="具体的描述"> content-type用于设定网页字符集类型,便于浏览器进行渲染 <meta http-equiv="content-Type" content="text/html;charset=utf-8"> //旧的HTML,不推荐 C. cache-control(指定请求和响应遵循的缓存机制)
CSS
盒模型
三种常用定位的定义
默认(position:static)
-
相对定位(position:relative):定位元素的位置相对于它在普通流中的位置进行移动。使用相对定位的元素不管它是否进行移动,元素仍要占据它原来的位置。移动元素会导致它覆盖其他的框。
-
绝对定位(position:absolute):相对于已定位的最近的祖先元素,如果没有已定位的最近的祖先元素,那么它的位置就相对于最初的包含块(如body)。绝对定位的框可以从它的包含块向上、右、下、左移动。绝对定位的框脱离普通流,所以它可以覆盖页面上的其他元素,可以通过设置Z-Iindex属性来控制这些框的堆放次序。
-
浮动定位(float:right):如下图所示,如果包含框太窄,无法容纳水平排列的三个浮动元素,那么其它浮动块向下移动,直到有足够的空间。如果浮动元素的高度不同,那么当它们向下移动时可能被其它浮动元素“卡住”:
浮动元素会生成一个块级框,而不管本身是何种元素
清除浮动:
1.在父级元素添加伪类元素
#father:after{ content:''; display:block; clear:both; }
2.在父级元素添加属性:overflow: hidden;
-
固定定位(position:fixed):相对于浏览器窗口,其余的特点类似于绝对定位。
CSS中的居中
-
text-align:center :可以水平居中块级元素中的行内元素
-
margin:0 auto :水平居中块级元素,不能是脱离文档流的
-
width: 20px; height: 20px; background-color: blue; position: absolute; top: 50%; left: 50%; margin-top: -10px; margin-left: -10px;
-
verticle-align:middle :垂直居中,vertical生效的前提是元素的display:inline-block
-
父元素:display:flex; 子元素:align-self:center 实现垂直居中
-
子元素直接设置line-height等值于父元素height,适用于文本,块本身不会动
JavaScript
基本数据类型
-
Number
-
String
-
Boolean
-
Null
-
Undefined
引用数据类型(Object)
-
Object
-
Array
-
Funtion
-
Data
数据方法
-
pop() :删除数组最后一个元素,返回弹出值
-
push() : 在数组尾添加新元素,返回新数组长度
-
shift() : 删除首个元素,并返回
-
unshift() : 在开头添加新元素,返回新数组长度
-
splice(a,b,'','',,,) :a定义新元素位置,b定义删除多少元素,返回新数组
-
concat() : a = b.concat(c,d,e,,,)拼接数组
-
slice(a,b) : 返回a为起点,b为开区间的所有元素
-
toString() : 数组转换成字符串
字符串方法
-
length()
-
indexOf("") 返回文本首次出现的索引,未找到返回-1
-
lastIndexOf("",start) 返回文本在字符串中最后一次出现的索引,从start开始查找,未找到返回-1
-
slice() : 同上
-
substr(a,b) : 从a开始截取b个字符
-
replace(a,b) : 用b代替第一个a,返回新字符串
-
toUpperCase() : 字符串转换为大写
-
toLowerCase() :字符串转换为小写
-
concat() : 链接多个字符串
-
trim() : 删除字符串两端空白符
-
split(a,b) a是字符串或正则,b是返回的数组长度
闭包
我们想在一个函数内部也有限权访问另一个函数内部的变量该怎么办呢?闭包就是用来解决这一需求的,闭包的本质就是在一个函数内部创建另一个函数。
Js DOM
JS事件
-
onchange:HTML元素改变
-
onclick:用户点击HTML元素
-
onmouseover:在HTML元素上移动鼠标
-
onmouseout:从一个HTML元素上移开鼠标
-
onkeydown:用户按下键盘按键
-
onload:浏览器已完成页面加载
-
onblur:元素失去焦点
Node.js
常用模块
-
fs
-
path
-
http
-
url
-
express
-
events