html常用标签
div：<div> 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是 <div> 固有的唯一格式表现。可以通过 <div> 的 class 或 id 应用额外的样式。
span：<span> 标签被用来组合文档中的行内元素。
a ：<a> 标签定义超链接，用于从一张页面链接到另一张页面；<a> 元素最重要的属性是 href 属性，它指示链接的目标。
p:<p> 标签定义段落。
br:换行。
table > tr行 th表头列 td表头列
h
form> action method enctype=;;; <form> 标签用于为用户输入创建 HTML 表单。
input系列：
text 文本框
password 密码框
email 邮箱框
button 单选
submit 提交
radio name属性相同
checkbox 复选
reset 重置
textarea 文本框区域
CSS
a. 存在形式
- <div style='k1=v1;k2=v2;'>
- <style></style>
- <link ...>
b. 选择器
<style>
.c1{
类
}
#i1{
ID
}
div{
便签
}
.c1,#i2{
组合
}
.c1 .c2{
关联
}
.c1 > .c2{
}
.c1:hover{
鼠标样式
}
input[type='text']{
属性
}
</style>
c. 样式
color: 字体颜色
background-color:背景颜色
font-size:字体大小
background-img:背景图片
background-position:背景位置
position:
fixed - 永远固定在浏览器窗口的某个位置
absolute - 固定在浏览器窗口的某个位置
relative - 生成相对定位的元素，相对于其正常位置进行定位。
padding: 内边距
margin: 外边距
top ...:向上
border: 1px shixu yanse #边框
height: 100% #高
宽
display:
none 隐藏
block 块
inline 内联
inlie-block 内联+块级
float:浮动
left
right
<div style='background-color:red;'>
<div style='float:left;'>adf</div>
<div style='float:right;'>adf</div>
<div style='clear:both'></div>
</div>
text-align:text位置
line-height:行间距
cursor：请把鼠标移动到单词上，可以看到鼠标指针发生变化
z-index:层级
opacity:不透明度
JS基础
1. 存在形式
链接
直接写到body中
2. 位置
写body中的最下面
3. 变量
局部变量 var v='a';
全局变量 v='a';
4.注释
// 单行
/* 多行 */
5. 声明函数
// 普通函数
function func(arg){
//网页弹框
alert(123);
}
func("alex")
// 普通函数，自执行函数
(function(arg){
alert(123);
})("alex")
(function(arg){})("alex")
// 匿名函数,当做参数传递
function(){
alert(123);
}
// 匿名函数的应用
function func(arg){
arg()
}
func(function(){alert(123)})
6. 基本数据类型
undefined // 为定义 var age;
function func(a1,a2){
alert(a1);
alert(a2);
}
func(1)
null // 空值
数字
var age = 123.123;
var v = typeof age; # number
alert(v);
isNaN
parseInt()
parseFloat(num)
字符串
obj.length 长度
obj.trim() 移除空白
obj.trimLeft()
obj.trimRight()
obj.charAt(n) 返回字符串中的第n个字符
obj.concat(value, ...) 拼接
obj.indexOf(substring,start) 子序列位置
obj.lastIndexOf(substring,start) 子序列位置
obj.substring(from, to) 根据索引获取子序列
obj.slice(start, end) 切片
obj.toLowerCase() 大写
obj.toUpperCase() 小写
obj.split(delimiter, limit) 分割
数组
obj.length 数组的大小
obj.push(ele) 尾部追加元素
obj.pop() 尾部获取一个元素
obj.unshift(ele) 头部插入元素
obj.shift() 头部移除元素
obj.splice(start, deleteCount, value, ...) 插入、删除或替换数组的元素
obj.splice(n,0,val) 指定位置插入元素
obj.splice(n,1,val) 指定位置替换元素
obj.splice(n,1) 指定位置删除元素
obj.slice( ) 切片
obj.reverse( ) 反转
obj.join(sep) 将数组元素连接起来以构建一个字符串
obj.concat(val,..) 连接数组
obj.sort( ) 对数组元素进行排序
字典
info = {name: 'alex',age: 18};
7. 序列化
JSON.stringify
JSON.parse
8.转义
9.eval
字符，直接执行
10. 时间
var da = new Date();
function nowDate() {
var da = new Date();
var year = da.getFullYear();
var month = da.getMonth();
var day = da.getDate();
var hours = da.getHours();
var minutes = da.getMinutes();
var seconds = da.getSeconds();
var txt = year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
document.getElementById('time').innerHTML = txt;
}
setInterval(nowDate,1000);
11. 条件&循环&异常处理
条件
if(tr.firstElementChild.firstElementChild.checked){
tr.firstElementChild.firstElementChild.checked = false;
}else{
tr.firstElementChild.firstElementChild.checked = true;
}
循环
var names = ["alex", "tony", "rain"]; for(var i=0;i<names.length;i++){ console.log(i); console.log(names[i]); }
var names = ["alex", "tony", "rain"];
for(var index in names){
console.log(index);
console.log(names[index]);
}
while(条件){
// break;
// continue;
}
异常
try {
//这段代码从上往下运行，其中任何一个语句抛出异常该代码块就结束运行
}
catch (e) {
// 如果try代码块中抛出了异常，catch代码块中的代码就会被执行。
//e是一个局部变量，用来指向Error对象或者其他抛出的对象
}
finally {
//无论try中代码是否有异常抛出（甚至是try代码块中有return语句），finally代码块中始终会被执行。
}
注：主动跑出异常 throw Error('xxxx')
12. 布尔类型（Boolean）
布尔类型仅包含真假，与Python不同的是其首字母小写。
- == 比较值相等
- != 不等于
- === 比较值和类型相等
- !=== 不等于
- || 或
- && 且
13. 面向对象
// 面向对象
function Foo(name,age){
this.Name = name;
this.Age = age;
}
obj = new Foo('alex',18);
obj.Name
function Foo(name,age){
this.Name = name;
this.Age = age;
}
// 利用原型实现方法重用
Foo.prototype.show = function(){
alert(this.Name);
}
obj1 = new Foo('alex',18);
obj1.show()
obj2 = new Foo('alex',18);
obj2.show()