input标签:
type: text 文本框
password 密码框
radio 单选按钮
checkbox 复选框
submit 提交按钮
reset 重置按钮
imgage 图片提交按钮
button 普通按钮
file 文件
hidden 隐藏
email 邮箱
color 颜色框
date 日期
numer 数字
select 下拉框
option 选择项
textarea 文本域
name 属性
value 属性
checked 属性
css使用方式:
三种:
内联: 样式和页面元素通过style属性关联在一起
内部: 在head标签中
外部: 独立的css文件 多个页面使用同一个样式 链接式 link(推荐) 导入式
选择器:
使用方式
基本选择器 : 标签选择器、id选择器、class选择器
属性选择器: input[type] a[href]
层级选择器:后代 div p 子代 div>p 紧邻兄台 div+p 通用兄弟 div~p
伪元素选择器 : a:link a:visited a:hover a:active
其他选择器 : * h2,h3,h4
定位:position: static静态 relative相对 absolute 绝对 fixed 固定
css3扩展:
border-radius 圆角
box-shadow 盒子阴影
background-size
background-image
text-shadow
变量的使用:
先声明,再赋值
var num;
num=10;
声明同时赋值。
var name=“xxxx”;
JavaScript数据类型:
原始类型: undefined、number、null、boolean、string
对象类型: function Person(){} Object Array
JavaScript函数:
function A(){
var i=100;
function B(){
i++;
document.write(i);
}
return B;
}
var f=A();
弹窗:alert
事件
onclick 点击
onchange 改变输入域内容
onmouserover 鼠标悬停
onmouserout 鼠标离开
onkeydown 按下按键
onload 等待页面加载完
DOM模型:
(1)获取网页元素
getElementById();
getElementsByTagName();
getElementsByClassName();
(2)获取或设置内容
innerHTML
innerText
(3)获取或修改属性
dom对象.src="";
dom对象.width=""
dom对象.setAttribute("属性名","属性值");
(4)修改css
dom对象.style.fontSize="";
(5)创建或删除元素
document.createElement();
appendChild();
insertBefore();
dom对象.remove();
dom对象.parentNode.removeChild(dom对象);
(6)DOM事件
html添加事件属性
EventListenner方式添加
事件的冒泡和捕获
(7)BOM
window:全局对象
innerWidth
innerHeight
open();
close();
screen 屏幕对象
location:地址
history:历史记录
navigator:导航对象
(8)时间
Date
setInterval(); 周期执行函数
setTimeOut(); 延迟执行函数