Article Directory
HTML
1. Basics
<!DOCTYPE> 文档类型。
<!--...--> 注释。
<html> HTML 文档。
<title> 文档的标题。
<body> 文档的主体。
<h1> ~ <h6> HTML 标题。变大加粗。递减。
<br> 换行。
<hr> 水平线。
<p> 段落。属性：
color： 颜色；
1.英文单词。
2.rgb（值1，值2，值3），红绿蓝占比，范围0-255。
3.#值1值2值3，范围：00-FF
width： 宽度；
1.数值，单位是像素。
2.数值%：占比相对父元素的占比）
size： 高度；
align： 对其方式（center居中,left左对齐,right右对齐）
2. Format
<b> 字体加粗
<i> 字体斜体
<font> 字体标签。
color
size
face：字体（如：face="楷体")
3. Documentation
<img /> 图片展示。
src：制定图片位置（“./”表示当前目录；“../”表示上一级目录。）
align
alt：图片加载失败显示的内容
width
hight
4. List
<ol> <li> 有序列表。属性：
type（标序号的类型）；
start（起始元素）；
<ul> 无序列表。属性：
type（disc圆点，square方框，circle空心圆点）
5. Links
<a> 属性：
href（点击跳转到指定链接，可以是本地的；）
target（_self当前页面打开_blank新页面打开）
href=javascript：void（0），则保留点击功能，而不跳转
6. Fast Tags
<span> 文本在一行显示
<div> 换行，每一个占一行
7. Semantic tags
<header>
<footer>
8. Form
<table> 定义表格。属性：
border（边框像素="1"）
width
cellpadding（"0"表示定格写）
cellspacing（"0"表示单元格线重合为实线）
bgcolor（背景颜色）
align
<tr> 定义行align,bgcolor
<td> 定义单元格
<th> 定义表头单元格（居中）rowspan(占几行）colspan（占几列）
<caption> 定义表格标题。
<thead> 定义表格中的表头内容。
<tbody> 定义表格中的主体内容。
<tfoot> 定义表格中的表注内容（脚注）。
9. Form
<form> 表单标签。属性：
action（指定数据提交的url）
method（指定提交方式：
get：请求参数在地址栏中显示,请求参数大小有限制，不太安全
post：封装在请求体中，请求参数大小没限制，较为安全）
<input> 输入框。属性;
type=(text文本输入框；password密码输入框；radio单选框；checbox复选框；
file选文件；
hidden隐藏域；
submit提交按钮；
button一个按钮；
image提交按钮，可以指定图片；
color提交颜色；
date选日期；
email输入邮箱；
number输入数字)
name
value默认值
placeholder提示信息
<label> 指定输入项的文字描述信息，label的for会和input的id取值对应，
点击name的内容。会自动跳转到输入框中
<select> 下拉列表。选择项：
<option> 默认项selected；属性name、value
<textarea>文本域。属性：
rows多少行；
cols每行多少字符；
css
1. Combination with HTML
1、内联样式
<div style="color:red;">hello</div>
2、内部样式:在<head>里面定义：
<style>div{
color: deeppink}</style>
3、外部样式：
（1）.新建a.ass文件div{color: aqua;}；
（2）.引入：<link rel="stylesheet" href="a.css">
2. Grammar
格式： 选择器{属性名：属性值；}
选择器：具有相似特征的元素
3. Selector:
基础选择器:优先级：id>类>元素
id选择器：
head的style里面加:
#div1{属性名:属性值;}
使用：<div id="div1">;
元素选择器：
head的style里面加:
div{属性名:属性值;};
使用：<div>;
类选择器：
head的style里面加
.cls1{属性名:属性值;};
使用：<P class="cls1">
扩展选择器
选择所有元素： *{}
并集选择器： 选择器1，选择器2{}
子选择器： 选择器1 选择器2{}； 筛选选择器1下的选择器2元素；
父选择器： 选择器1>选择器2{}； 筛选选择器2的父元素选择器1元素；
属性选择器： 元素名称[属性名="属性值"]{}；
例如input[type="text"]{}; 选择元素名称为input，且属性名=属性值的元素；
伪类选择器： 选择一些元素具有的状态：元素：状态{}；
例如：a：link{}
（状态：link初始；hover鼠标放上去；active点击完之后；visited访问之后）
4. Properties:
字体:
font-size：字体大小
color：
text-align居中
line-height上下居中
背景：
background：url（图片路径）； 用哪个图片作为背景
边框：
border：1px solid red； 一个像素，实线，红色；
尺寸：
width；height；
盒子模型：
margin： 外边距；设置为auto就居中
padding： 内边距；默认情况下会影响盒子的大小；
box-sizing：border-box（让width和height就是最终盒子的大小）；
float：浮动；left；right；
JavaScript
ECMAScript
Function；
创建：
（1）Function 方法名（参数列表）{
}
（2）var 方法名=Function(){
}
Array：
创建：
（1）var arr=new Array（元素列表）
（2）var arr=new Array（元素个数）
（3）var arr=[元素列表]
方法：
join():将一个数组（或一个类数组对象）的所有元素连接成一个字符串并返回这个字符串，可以传一个参数作为分隔符
push():从尾部添加数据
pop():从尾部删除数据
unshift():从头部添加数据
shift():从头部移除数据
Date：
方法：
toLocalString():返回当地时间。
getTime():毫秒值
Math：
方法：
random():产生0-1的随机数。
ceil():向上取整。
floor():向下取整
round():四舍五入。
RegExp：
创建：
(1)var reg=new RegExp("^\\w{6,12}$");
(2)var reg=/^\w{6,12}$/
说明：
[] 单个字符
\d 数字
\w 英文符号
? 0个或一个
* 0个或多个
+ 一个或多个
{
m,n} 最少n个最多m个
^ 起始
$ 结束
方法：
test(str); 检验字符串str是否符合该正则表达式
Global:全局对象，可以直接用方法
方法：
encodeURL():编码
decodeURL():解码
paseInt():字符串转数字（逐一将是数字的字符串转换为数字，直到第一个非数字）
eval():将字符串当作代码执行
BOM
Windows对象：
与弹出框有关：
alert():带有一段消息和确认的警告框；
conform：():确认，取消；
prompt():显示可提示用户输入的对话框；
与开发关闭有关：
close():
open():返回值是新window对象；
与定时器有关：
setTimeout():一次性。参数：（执行的操作，毫秒值）。返回值：唯一编号。
clearTimeout()
setInterval():周期性。参数（执行的操作，周期）
clearInterval()
属性：
获取其他BOM对象：
history
location
Navigator
Screen
获取其他DOM对象：
document
location：地址栏对象。
创建：
Window.location 或者 location
方法：
reload：重新加载当前文档
属性：
herf
history：
创建同上
方法：
back（）
forward（）
go（）：是正数则前进，是负数则后退。
属性：
length 当前窗口历史列表中URL数量
DOM
通过id获取元素对象
var a=document.getElementById（""）;
修改属性：
a.属性名（""）;
修改内容：
a.innerHTML="";
事件：
onclick 单击
ondblclick 双击
onblur 失去焦点
onfocus 获得焦点
onload 一张图片或一个页面加载完
onmousedown 鼠标按钮被按下
onmouseup 鼠标松开
onmousemove 鼠标移动
onmouseover 鼠标移动到某元素上
onmouseout 鼠标移开
onkeydown 键盘某个按键被按下
onkeyup 松开
onkeypress 按下并松开
onchange 域的内容被改变
onselect 文本被选中
onsubmit 表单提交，可以阻止表单的提交； =function（）{
return false；}
onreset 重置
*.onmousedown=function (event){
alert(event.button);}
0代表鼠标左键，2代表右键，1代表中间
*.keyCode=... 如，13是换行
核心DOM模型：
方法：获取Element对象：
getElementById() 根据id属性值获取对象
getElementByIdTagName() 根据元素名称（标签名称）获取对象数组们
getElementByClassName() 根据class属性值获取对象数组们
getElementByName（） 根据name属性值获取对象数组们
创建其他DOM对象：createElement()
属性：
Element：元素对象。
方法：
removeAttribute() 删除属性
setAttribute() 设置属性
Node：节点对象。
方法：
appendChild() 向节点的子节点列表的末尾添加新的子节点
removeChild() 删除（并返回）当前节点的指定子节点
replaceChild() 用新节点替换一个字节点
属性：
parentNode() 返回节点的父节点
HTMLDOM:
改变 HTML 内容；如：document.getElementById("p1").innerHTML="新文本!";
改变 HTML 样式；如：document.getElementById("p2").style.color="blue";