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