前端知识点简要总结

Posted 2021-01-30 russellyoung

1. html（超文本标记语言）
- 行内标签(行内标签不能设置宽高，但是input，img可以）
a i（斜体) strong b em input label span button textarea img

- 块级标签（独占一行）
div p h1~h6 ul li table form dl ol select

2. CSS（层叠样式表）
- 第一种：<div style=""></div)
- 内接式：<style><style>
- 外接式：<link src=".statics/css.css"></link>

- 基本选择器
id: 权重100
class：10
标签选择器：1
继承的样式：0

如果权重相同，以后面的为准

- 定位
position: "fixed"
position: "relative" (参考：自己原始位置)
position: "absolute" （参考：最近父标签）

-行内标签和块级标签的相互转化
display：block, inline, inline-block

- 高级选择器
- 后代选择器 div .active {}
- 子代选择器 div > .active {}
- 组合选择器 div, .active {}
- 交集选择器 div.span.div

3. javascript
- 操作对象也是标签
- JavaScript基本数据类型
String, Number, null, boolean, undefine
引用类型：Object(字典), Array(列表), function

- 如何实例化一个对象？
- 通过构造函数（Date，Object，Array）：new Date(), new Object(), new Array()
- 字面量：var obj = { ‘name‘: "pizza" }, var ary = []
- 自定义的方式
function Foo(name, age) {
this.name = name;
this.age = age;
}

var foo = new Foo("pizza", 18);

- DOM操作
第一步：找到事件源（document.getElementById("app")
第二部：绑定事件
第三部：操作标签（文本值，标签属性，class="active", innerText = "Hello World")

document.getElementById("app").style.color = ‘red‘;

- BOM操作
window.reload()
window.hash()
window.location()
window.href()
window.history()

4. jQuery（JavaScript库，封装很多的好用的接口，标签的便利）
$("#app").css({‘color‘, ‘red‘, ‘background-color‘: ‘black‘})

5. bootstrap