版权声明：来自 https://blog.csdn.net/Leesoar521yt/article/details/82354431
HTML（结构 封装思想 默认距浏览器边框10px）
1.头标签的设置
<title>设置标题</title>
<meta name="keywords(关键字)" content="内容" charset="utf-8" />
<link href="" rel="" type="">
<base target="_blank">统一设置当前页面打开方式</base>
当前页面经过3秒后自动刷新，跳转至指定页面：<meta http-equiv="refresh" content="3;url=http://www.baidu.com" />2.html注释：
<!-- 注释内容 -->3.css注释：
/* 注释内容 */4.js注释：
//单行注释 /* 多行注释 */5.color三种方式：
- 英文单词
- #xxxxxx（16进制表示）
- rgb(r,g,b)或rgba(r,g,b,a) (a=>0,1)
6.h1->h6由大到小
<hr />水平线(size, color) <br />换行7.图像：
<img src="路径" width="宽" height="高" alt="加载失败提示" title="鼠标悬浮提示" />8.超链接：
<a href="路径(javascript:void(0)和#均为不链接)" target="打开方式，默认_self(_blank新窗口打开, _self当前窗口打开等)">
定位：回到顶部：<body id="top">...<a href="#top">回到顶部</a>...</body>9.块标签：
<pre></pre>原样输出 <div></div>自动换行，页面划分 <span></span>不自动换行10.字符实体
空格 大于号> 小于号< 乘号× 除号÷ 版权© 注册商标®11.列表:
（1）自定义列表：dl dt dd
（2）有序列表：<ol type="设置排列方式，默认阿拉伯数字"></ol> <li></li>
（3）无序列表：<ul type="圆点disc,空心圆circle,方框square,默认disc"> <li></li>12.音视频：
(1)音频
<audio src="路径" autoplay(自动加载) controls(显示进度控制条) loop(循环播放) ></audio>(2)视频
<video></video>属性同音频13.表格标签：
<table border="表格线条宽度" cellspacing cellpadding width height bordercolor align="默认左对齐">表格的范围</table>
<tr colspan="合并列" rowspan="合并行">行</tr>
<td>单元格</td>
<th>单元格(文本加粗)</th>
<caption>设置表格标题</caption>14.表单标签：
<form method="get/post" action="提交到的服务器的地址" enctype="关于文件上传"></form>
<input type="text(文本),password(密码),radio(单项选择框),checkbox="多项选择框" checked(选中) />
<input type="file(文件),email(邮箱),color(颜色),date(日期)" />
<select>下拉菜单<option selected>下拉菜单的选项</option></select>
<textarea cols="列" rows="行">文本域</textarea>
表单按钮：<input type="button(普通按钮),submit(提交按钮),reset(重置按钮)" />15.get和post的区别：
（1）相同点：二者都是用于向服务器提交数据的方式。
（2）不同点：
1）get请求会将数据携带在请求地址，post不会携带；
2）get请求的安全级别较低，post相对较高；
3）get请求传输数据的效率较高，post则相对较低；
4）get请求传输数据对数据大小限制，post则没有。
16.框架标签：
<frameset rows="按行划分" cols="按列划分(20%,50%,30%)"><frame src="路径"></frame></frameset>(有它无body)CSS（表现）
17.选择器：
(1)通配符选择器。*{属性：值;} 使用场景：页面中需要统一设置的格式。
(2)标签名称选择器。标签名称{属性：值} 对某一类标签进行设置样式。
(3)类选择器。.类名{属性：值}
(4)id选择器。#id名称{属性：值} 在同一个页面中只能使用一次。(在标签名称选择器、类选择器、id选择器中，标签名称选择器优先级最低，id选择器的优先级最高。)
(5)属性选择器。（根据某个标签的指定属性匹配） 基本选择器[属性名(=值)]{} 如：p[name="bbbb"]{color:blue;}
(6)包含选择器。选择器1 选择器2{} =>查找父子标签或者先辈后辈标签。
选择器1 > 选择器2{} =>查找父子标签。
(7)伪类选择器。基本选择器:选项{} =>hover[悬浮],before[前面],after[后面],first-letter[第一个字符],first-line[第一行]
(8)结构选择器。包含选择器:选项{} =>first-child[第一个子标签],last-child[最后一个子标签],nth-child[第n个子标签],empty[空标签],not()[否定]
(9)组合选择器。选择器1,选择器2,...{} =>给多个不同的选择器设置相同的样式。
18.css四种书写方式。
(1)行内样式。通过style属性直接给某个标签设置样式。<a style="font-size: 30px;"></p>
(2)内嵌样式。<head><style>p{ color: red; font-size: 30px;}</style></head>
(3)链接样式。写入.css文件中，在head中添加该文件link。<link href="路径" type="text/css" rel="(关系)stylesheet" />
(4)导入样式。<head><style>@import url(文件相对路径，不用加引号)</style><head>
*优先级问题：
1）在行内样式，导入样式，内嵌样式中，行内样式的优先级最高，导入样式优先级最低。
2）在内嵌样式和链接样式中，不存在优先级问题，取决于哪种方式距离标签更近。（就近原则）
3）将导入样式和链接样式统称为外部样式，不存在优先级问题。
*作用范围：
行内样式：仅作用于当前标签。
内嵌样式：作用于当前的html文件。
外部样式：关联该css文件的所有html文件。
19.字体属性。
font-family:字体类型 font-style:字体样式(normal正常,italic意大利体,oblique:斜体)
font-weight:设置字体的粗细，取值范围100-900。(normal,bold,bolder,lighter)
font-size:字体大小(默认16px) 1em = 16px
可以同时设置多种字体，依次查询，找到则显示，找不到则查找后面的字体，都没找到则显示默认字体。
20.文本属性。
text-decoration:设置文字的装饰效果。(none正常，underline下划线，line-through删除线，overline顶线，blink闪烁)
text-indent:段落缩进，中文常用2em。
text-align: left左对齐，right右对齐，center居中对齐，justify两端对齐。
letter-spacing: 字符之间的间距。
word-spacing: 单词之间的间距。
text-transform: 变化(none正常，capitalize单词首字母大写，uppercase小写转大写，lowercase大写转小写)
direction:文本方向（ltr文本方向从左到右，也是默认方向。rtl文本方向为从右到左）
*后出现的属性会覆盖先出现的属性。
21.盒子属性。
在进行页面布局之前，将数据封装到一块一块的区域中。（所有的html标签都能使用盒子属性。）
(1)边框属性。border统一设置指定标签的所有的边框。参数：边框宽度 边框样式 边框颜色。
border-top上，border-bottom下，border-left左，border-right右，border-width边框宽度(px)
border-style边框样式(dotted点划线，dashed虚线，solid实线，double双线)，border-color边框颜色
border-radius边框削圆角[正方形50%表示圆，百分比越大，圆角越大]
(2)内边距。padding上右下左或padding-left,padding-right,padding-top,padding-bottom。（设置内边距相当于该标签的宽和高改变）
(3)外边距。margin上下左右或margin-left,margin-right,margin-top,margin-bottom。
22.尺寸属性。
width宽度，height高度，line-height行高。文本内容只有一行时，line-height=height可实现文字在垂直方向居中，text-align:center水平居中。
23.背景属性。
background背景（颜色或图片）
background-color背景颜色
background-image背景图片
background-repeat背景样式平铺样式(repeat沿水平和垂直方向平铺[默认值]，no-repeat不平铺，repeat-x沿水平方向平铺，repeat-y沿垂直方向平铺)
background-position背景图片的位置(left,right,top,bottom,center)
background-attachment设置背景图片是否随着网页内容一起滚动。(scroll滚动[默认值],fixed固定)
background:linear-gradient()设置颜色渐变。如background:linear-gradient(to right,red,blue)
24.列表相关的属性。
list-style设置列表的项目符号和位置(none表示无符号)
list-style-image设置列表的项目符号
list-style-position设置项目符号的位置(inside里面，outside外面)
25.浮动属性。
块级元素：在页面独占一行【会自动换行】，当一个html页面有多个div时，默认从上到下依次排列，排列方式称为流。
元素浮动之前，称为元素处于标准流中，是竖向排列的，浮动之后，可以将元素的排列方式改为横向排列。
float实现标签的浮动（none不浮动[默认值]，left向左浮动，right向右浮动）
clear清除浮动，取值一般为left或right，表示将原来的浮动手动清除掉，避免影响后面标签的位置。
26.显示属性。
display 设置标签的显示状态
1）none隐藏。不会占据空间，常用来进行页面的重绘或者重排。
2）block块级标签。总是以一个块的形式表现出来，可以独占一行。可设置宽高及内外边距，如不设置默认宽度和父标签相等。高度自适应。(如div，p，li，hn)
3）inline行内标签。不会自动换行，宽高自适应，设置宽高和内外边距无效。可将块级标签转换为行内标签。（如span a）
4）inline-block行内块级标签。可以设置宽高和内外边距且不换行。(如导航的实现[浮动])
浏览器中空白符不会被忽略。
27.定位属性。
（1）绝对定位。position: absolute。将对象从文档流拖出。可通过left，top，right，bottom设置标签位置。参照物：父标签或者先辈标签【如果该标签的父标签设置了有效的定位，就以父标签作为参照物，如果没有设置有效定位，则查找所有的先辈标签】
（2）相对定位。position: relative。不会脱离文档流。参照物为标签自身原来的位置。
（3）固定定位。position: fixed。固定定位，脱离文档流。参照物为窗体。
（4）z-index的使用。使用前提：该标签设置了定位属性。作用：值决定标签显示的位置。值越大优先级越高，被显示在最上层，默认为0。
28.形变和过渡属性。
（1）tranform形变。
rotate(degree)旋转：指定的标签需要旋转的度数，degree表示度数。
scale()比例：指定的标签放大或缩小。
transform-origin：设置旋转点[center left right top bottom]
（2）transition过渡。
transition-duration：过渡的持续时间。
transition-property：需要过渡的标签。[transform, all]
29.动画。
animation：主要是结合形变和过渡使用。
（1）给标签添加动画。参数：
1）动画名称：自定义。
2）动画持续时间：单位为秒，表示当整个动画执行一次需要的时间。
3）动画形式：linear（线性动画），ease（由快到慢），steps()。
4）动画执行的次数：默认为1次；无限次可设置为infinite。
例：animation: animate 5s linear;
（2）使用animation时，动画需手动设置。
1）表示方法1：@keyframes animate{from{margin-left:200px;} to{transform:rotate(180deg);}}
2）表示方法2：@keyframes animate{0%{background-color: blue;} 10%{background-color: green; ... 100%{transform:scale(1.2);}}
JavaScript（行为 基于对象）
提供好了很多对象，可以直接使用]和事件驱动[html做网站静态效果，js实现动态效果，可以和用户交互的脚本语言
30.js特点：
（1）交互性：实现信息的动态交互。
（2）安全性：不可以直接访问磁盘上的文件。
（3）跨平台性：只要是可以解析js的浏览器都可以执行，与平台无关。
31.组成：
（1）ECMAScript：由ECMA定义的基本语法，包括变量，语句，函数，运算符等。
（2）BOM(Browser Object Model)：浏览器对象模型。
（3）DOM(Document Object Model)：文档对象模型。
32.js书写格式：
（1）使用script标签。<script>js代码</script>可以写在head中，也可以写在body中。
在同一个html文件中，script标签可以出现多次，先执行head，后执行body中的script。
（2）引入外部的js文件。<script type="text/javascript" src="路径"></script>
在一个script中如果引入外部文件，则不能在标签中再书写代码，否则无效。
一般将script标签写在body中。原因：先加载head，后加载body，而js目的为操作html和css，当script标签写在head中时，如果要操作某个html标签时，则这个标签还未加载出来。
33.ECMAScript基本语法。
（1）使用关键字var定义变量。
（2）每条语句结束最好加分号。
（3）1）var 变量名=字面量; 2）var变量名; 变量名=字面量; 3）var 变量1=字面量1, 变量2=字面量2;（var只需出现一次）
（4）js容错性高，赋值时才能确定变量的数据类型。
（5）alert()弹出提示框；document.write()向BOM写入数据；console.log()在控制台打印日志。
34.命名规范。
（1）变量名可以是数字，字母，下划线和美元符$。
（2）首字符不能为数字。
（3）不能使用关键字。
（4）区分大小写。
（5）遵循驼峰命名法。
35.数据类型。
（1）一般数据类型：
1）Boolean：布尔类型。布尔值可以被当作数字使用，True代表的是1，false代表的是0。0,0.0,false,null代表假。
2）Number：数字类型【整型和浮点型】
3）String：字符串类型
4）Object：对象类型
5）Array：数组
6）Function：函数
7）RegExp：正则表达式
（2）特殊数据类型：
1）Null：是一个只有一个值的数据类型。表示空对象的引用。使用typeof操作符检测null返回的结果为object。
2）Undefined：未定义的变量，定义一个变量 ，但没有给变量赋初始值。如：var a; a为Undefined类型。派生自null（undefined == null //True）
3）NaN：Not A Number，不是一个数字。isNaN()判断一个变量是否不是一个数字，是数字返回False，不是返回True。
isNaN()除了可以判断之外，还可以将字符串试图转换，如果能转换为数字则仍然返回False。如：isNaN("123")返回False。
注意：在js中如果要操作html的标签，不能直接使用，必须通过js代码操作。
36.运算符。
（1）算术运算符。
1）++：自增运算符。n++赋给变量时，先将原变量值赋给新变量，然后原变量自增1。++n先给原变量自增1，然后将结果赋给新变量。
2）--：自减运算符。
3）拼接运算符：字符串和任意类型变量相加，得到的结果都是字符串。
（2）关系运算符。
作用：1）应用在if语句或者循环语句中。
2）运算结果都是布尔值。
3）如果两个number类型的变量比较，则比较大小。
4）如果是两个字母比较，则比较的是字符的ASCII。
（3）逻辑运算符。
1）与：&&
2）或：||
3）非：!
*与python的and,or,not相同，也存在短路原则。
（4）三目（三元）运算符。
格式：关系运算符? 值1: 值2;
说明：1）值1和值2可以是常量，可以是变量，也可以是表达式。
2）工作原理：如果关系运算符成立，则整个运算符的结果是值1，否则为值2。
3）作用：实际上实现了二选一的操作，类似于if-else语句。
（5）赋值运算符。
=，+=，-=
（6）特殊用法。
==比较值，不关心类型；===比较类型和值。
37.js中的语句。
三大流程控制语句：
（1）顺序：
（2）分支：if(条件表达式){}，if(条件表达式){}else{}，if(条件表达式1){}else if(条件表达式2){}else{}
switch(变量){case 常量1：{执行语句1;break} case 常量2：{执行语句2; break;}...default{执行语句n;}}
switch根据变量的值进行匹配，如果在case分支匹配到常量，则执行case后面的语句，进而整个switch-case语句结束；如果所有case不匹配，则执行default中的语句。
* 注意1：break的使用，break使用在switch语句中，作用是阻止向下穿透【结束整个switch-case语句】
* 注意2;不管case和default的书写顺序是怎样的，都是先执行case分支，最后才执行default
* 注意3：如果default语句出现在所有case分支的后面，则直接使用，但是，如果defaule出现在case的前面或者中间，则需要添加break语句
* 【一般情况先都是先书写case，后书写default】
* 注意4：变量和case分支后面的常量尽量是同种数据类型，否则可能会出错
* 【js中所有的数据类型都可以使用在switch语句中】
* 【switch语句和if多分支之间可以进行转换的】
（3）循环：for，for-in，while，do-while
1）while：
while(条件表达式){循环体;循环之后的操作表达式;}
2）do-while：(先执行一次)
初始化表达式; do{循环体; 循环之后的操作表达式;}while(条件表达式);
3）for：
for(表达式1; 表达式2; 表达式3){ 循环体 }
其中：表达式1为初始化表达式，表达式2为条件表达式，表达式3为循环之后的操作表达式。
4）for-in：for(变量 in 数组){ 循环体 }
38.break和continue。
break：switch和循环语句中使用。可以结束switch语句和跳出循环语句。
continue：只能使用在循环语句中。作用：结束当前正在执行的循环，继续下一次循环。
lable标签：可以给每个循环进行命名，就可以让break通过这个命名进行选择该跳出哪个循环。
如：loop1: for...{ loop2:for...{break loop1;} } 即直接跳出外层loop1循环。
39.js中的函数。
（1）使用function定义。function 函数名(形参列表){ 函数体 return 值;}
（2）匿名函数。var变量 = function(形参列表){ 函数体 }
说明：1）可以将匿名函数作为其他函数的参数使用。
2）在DOM中使用匿名函数最多，可以完成某些一次性的事件。
（3）使用js中的内置对象Function【动态函数，很少使用，作为了解】
var 变量 = new Function("形参列表", "函数体和返回值");
（4）js中函数的调用。格式：函数名(实参列表);
40.全局函数。
全局函数不属于任何一个对象，直接通过函数名调用。
（1）eval()：识别字符串中的js代码。如：var s1 = "alert('hello')"; eval(s1);
（2）encodeURI()：对字符进行编码。如：var s2 = "测试测试asdqdas"; encodeURI(s2)打印出即为%E6%B5%8B%E8%AF%95%E6%96%8
（3）decodeURI()：对字符进行解码。
（4）isNaN()：判断一个字符串是否非数字。
（5）parseInt()：类型转换（将字符串转换为数字）。
*会将数字部分挑出，直到遇到第一个非数字时停止，然后进行运算。
41.全局变量和局部变量。
（1）全局变量：在script标签中定义一个变量，这个变量可在当前页面中使用，在当前标签中和其他标签中都可以访问。
（2）局部变量：在函数内部定义一个变量，只能在函数内部使用。
42.js中的对象
string对象
（1）创建方式： 1）var s = "hello"或'hello';
2）var s = new String("hello");
3）var s = String("hello");
（2）与html有关的函数。
1）将字符串加粗：bold() 如：s.bold()
2）设置字符串的颜色：fontcolor()，默认绿色。 如：s.fontcolor("red")
3）设置字体大小：fontsize(1-7) 如：s.fontsize(7)
4）将字符串显示为超链接：link() 如：s.link("www.baidu.com")
5）设置上标和下标。sup() sub() 如：s.sub()=>下标 s.sup()=>上标
（3）与Python类似的函数。
1）字符串的拼接：concat()，类似于+，拼接后生成一个新的字符串。var s1 = "a";var s2 = "b"; s1.concat(s2); //结果为ab
2）获取指定位置上的字符：charAt()，如果指定了不存在的索引，则返回一个空字符串。 s.charAt(10);
3）获取子字符串在原字符串中第一次出现的位置：indexOf()，如果子字符串不存在，则返回-1。 如：s.indexOf("a")
4）切割字符串：split()，切割之后得到的数据为数组。 如：s.split(" ");
5）替换字符串：replace() 如：s.replace("a", "b");
array对象。（数组可以存储不同类型的数据）
（1）创建方式：
1）var arr1 = [1,2,3];
2）var arr2 = Array(1,2,3);
3）var arr3 = new Array(1,2,3);
4）var arr3 = new Array(3); arr3[0] = 1; arr3[1] = 2; arr3[2] = 3 //创建长度为3的数组
* 求array的长度：arr.length
（2）函数：
1）拼接：concat() 如：a1 = [1,2]; a2 = [3,5,6]; a1.concat(a2); //[1,2,3,5,6]
2）合并：join()，将数组中的元素合并为一个字符串。 如：a1.join("-"); //1-2
3）向数组末尾添加元素：push()，返回值为添加元素之后数组的长度。 如：a1.push(8) //1,2,8
4）从头部添加（插入）元素：unshift()，返回操作后的数组长度。 如：a1.unshift(0); //0,1,2
5）删除第一个元素：shift()，返回操作后的数组长度。 如：a1.shift(); //2
6）获取并删除最后一个元素：pop() 如：a1.pop() //1
7）反转：reverse() 如：a1.reverse(); //2,1
8）截取数组：slice()，包头不包尾。 如：a1.slice(0, 1); //1
object对象
（1）创建一个引用类型的变量【对象】。var per = new Object(); per.name = 'jack';
（2）使用字面量的方式创建引用类型的变量。var per1 = {name: "jack", age:20}
* 删除变量：delete 变量名。js中，除了使用点语法访问属性和函数之外，还可以采用类似字典的方式。如：per.name或per["name"]
date对象
（1）获取当前时间：中国标准时间。
1）var date1 = Date();
2）var date2 = new Date();
3）var date3 = new Date("2018-8-8");
4）var date4 = new Date(2018,9,8); //月份由0开始
5）var date5 = new Date(100000); //秒
（2）获取
1）date2.getFullYear() //获取年份
2）date2.getMonth() //获取月份
3）date2.setFullYear(2015) //修改年份为2015
4）date2.setMonth(11);
* 传入的月份大于11，则年份增加。
（3）转换
1）date2.toLocaleString() //日期+时间
2）date2.toLocaleTimeString() //日期
3）date2.toLocaleDateString() //时间
4）var d1 = new Date("2017-10-10 10:10:10");
var d2 = new Date("2017-10-15 10:10:10");
d2 - d1 // 432000000 相差的毫秒数
5）d1 + d2 //拼接日期
math对象
（1）Math.round(3.5)四舍五入
（2）Math.floor(3.1)向下取整
（3）Math.ceil(3.1)向上取整
（4）Math.max(3,4,5)最大值
（5）Math.min(3,4,5)最小值
（6）Math.abs(3.1)绝对值
（7）Math.sqrt(3.1)开平方
（8）Math.pow(2,3)求次方
（9）Math.random()随机数
43.BOM
对象
（1）简介：浏览器对象模型。是一个用于访问浏览器和计算机屏幕的对象的集合，可以通过window对象访问。
在客户端js中，window对象是一个全局对象，在js中，如果某个对象没有指明具体属于哪个对象，默认都属于window。
（2）window的使用：
1）window.location：
<1> href属性：控制浏览器地址栏的内容。
<2> reload()：重新加载(刷新页面)。
<3> reload(true)：刷新页面，不留缓存。
<4> assign()：加载新的页面。assign意为"指定"。
<5> replace()：加载新的页面。（不会在浏览器的历史记录中留下记录）
用法：
<1> function myHref(){ window.loaction.href = "xxx.html"; }
<2> function refresh(){ window.location.reload(); }
<3> function assAndRep(){ window.location.assign("xxx.html"); } //可以回退
<4> window.location.replace("xxx.html"); //不能回退
（3）window.history：
<1> length属性：获取历史记录的长度。(必须先有（产生）历史记录)
<2> back()：上一页
<3> forward()：下一页
<4> go(num)：跳转到指定的页面
用法：
<1> window.history.length;
<2> window.history.forward(); //下一页
<3> window.history.back(); //上一页
<4> window.history.go(2); //如果是跳转到下num页，则使用正数，如果是返回上num页，则使用负数。该例为跳转至下2页。
函数
（1）open()：打开一个新的指定窗口。（实质上打开了一个新的浏览器窗口）
如：window.open("xxx.html","blank","width=200px,height=200px,top=10px,left=10px");
//即打开一个距离屏幕左边10px上边10px的宽200px高200px的新窗口。
（2）close()：关闭当前页面在浏览器中的窗口。
如：window.close();
事件
（1）onload：加载事件，当浏览器窗口加载完毕后自动触发。
（2）onscroll：滚动事件，当浏览器窗口发生滚动的时候自动触发。
用法：window.onload = function(){ document.write("hello"); } //加载完成后，hello被写入文档中。
window.onscroll = function(){ var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; console.log(scrollTop); } //在控制台将打印出距顶部像素。
funtion goTop(){ document.documentElement.scrollTop = 0; document.body.scrollTop = 0; } //调用此函数可以回到顶部
（3）提示框。
1）警告框：alert("hello");
2）提示框：var result = confirm("请确定或者取消); document.write(result); //结果为true或false
3）输入提示框：参数：提示文字，默认值（可以不写）。var result1 = prompt("请输入一个数字", 0);
（4）定时器；
1）间歇性定时器：可以被多次触发。
启动定时器：window.setInterval（需要执行的操作，间隔时间） 功能：每隔参数时间执行某个指定操作，单位毫秒，返回值为定时器的id，可以通过id关闭定时器。
var timer = window.setInterval(func, 2000); function func(){ console.log("hello") } //每隔两秒在控制台打印一次hello
关闭定时器：window.clearInterval(timer);
2）延时性定时器：只能触发一次。
启动定时器：window.setTimeout(需要执行的操作，时间) 功能：指定的时间之后执行指定的操作。 返回值为定时器id，单位为毫秒。
var timer = window.setTimeout(func, 3000); function func(){ console.log("hello"); } //三秒后在控制台打印hello
关闭定时器：window.clearTimeout(timer);
DOM
1.简介
DOM即文档对象模型。
可以使用js中提供的对象，使用这些对象的方法和属性，对标记性文档【html标签】进行操作。
想要对标记性文档进行操作，首先需要将标记性文档中的所有内容【标签，属性，文本】封装成对象，封装成对象的目的是为了更方便的去操作这些文档以及文档中所有的内容，对象包含属性和方法。
注意：在加载html页面时，web浏览器会生成一个树型结构，主要用来表示页面结构，这种树型结构被称为由节点组成的节点树。
2.常用的方法和属性
2.1元素节点对象的获取方式
getElementById()：通过指定的id获取对应的标签对象。【返回一个对象】
getElementsByTagName()：通过标签名称获取对应的标签对象【返回一个容器：集合/节点数组】
getElementsyName()：通过指定的name获取对应的标签对象【返回一个容器：集合/节点数组】
getElementsByClassName()：通过指定的class获取对应的标签对象【返回一个容器，集合/节点数组】
2.2DOM节点操作方法
关于节点的增删改查：
（1）增：
appendChild()：添加子节点【追加】
insertBefore()：在指定节点之前插入一个兄弟节点
（2）删：
removeChild()：删除子节点
（3）改：
replaceChild()：替换子节点
setAttribute():：对指定的属性设置或者修改为指定的值
（4）查：
元素节点对象的获取方式：getElementByXxxx()
getAttribute()：返回指定的属性值
【创建节点】
createElement()：标签节点
createAttribute()：属性节点
createTextNode()： 文本节点
【复制】
cloneNode()
DOM节点操作：属性
innerHTML：节点的文本值
attributes：指定节点的属性节点
value：输入框的值
nodeName：节点的名称
注意：nodeName是只读的
文档节点：#document
元素节点：与标签名相同，只不过是全大写
属性节点：与属性名相同
文本节点： #text
nodeValue：节点的值
元素节点：undefined或者null
属性节点：属性值
文本节点：文本本身
nodeType：节点的类型
注意：nodeType是只读的
文档节点：9
元素节点：1
属性节点：2
文本节点：3
parentNode：指定节点的父节点
childNodes：指定节点的子节点
firstChild：第一个子节点
lastChild：最后一个子节点
nextSibling：获取一个指定节点的下一个兄弟节点
previousSibling获取一个指定节点的上一个节点的兄弟节点