WEB 三剑客

1. HTML

1.1. 概论

1.1.1. 什么是HTML？

  • HTML：超文本标记语言
  • 是设计页面的基础
  • html的扩展名为html或htm(老的命名规范)
  • html由浏览器直接解析执行，无需编译，按顺序执行

1.1.2. HTML标签规范

  • html代码有头部和主体组成。
    • <HTML> ：完整网页标签
    • <head> ：头部，存放网页的说明性内容，例如标题<title>
    • <body> ：主体
  • html标签通常由开始标签和结束标签组成，标签之间的内容叫做内容体
    • 没有内容的标签叫做空标签，仅有一个标签组成，自关闭，例如<br/>
  • html标签不区分大小写
  • html标签有属性，格式为[style_name] = "style_value"，属性值用引号引起（单双引都行）。
  • html标签建议包裹嵌套，不建议交叉嵌套。
  • <!DOCTYPE html>文件类型

1.2. 基本标签

1.2.1. 字体标签

用于展示效果中文字样式，具体格式为：

<font 属性名="属性值">文字</font>

属性描述规范
size控制字体大小范围1~7
color控制字体颜色使用英文单词设置（red，blue等）
face控制字体类型只能设置字库中有的类型

1.2.2. 格式化标签

1.2.2.1. 换行标签

用于展示效果中换行。

<br/>

1.2.2.2. 段落标签

用于展示效果中划分段落，并且自动在段前和段后自动加空行。

<p></p>

属性描述
align内容对齐方式，默认left。可选left、right、center
1.2.2.3. 标题标签

用于展示效果中划分标题。

<h1></h1>

可选h1到h6分别对应1到6级标题。

1.2.2.4. 空格标签

html中的多个空格会被合并成一个空格，这个标签代替了空格的作用。

&nbsp;

1.2.2.5. 注释标签

用于注释html源码，不再html效果中显示。

<!-- 注释内容 -->

1.2.3. 图片标签

用于在页面效果中展示一张图片。

<img/>

属性描述格式
src图片的路径（必要属性）../路径（相对路径）
width图片宽度单位px像素，也可以用百分比
height图片高度单位px像素，也可以用百分比

关于路径：

  1. 互联网路径：在前面加上http://，比如

    http://www.baidu.com/xxx.jpg

  2. 内网路径：

    • 绝对路径：就是硬盘上的具体位置，比如：

      E:\prctures\xxx.jpg

    • 相对路径：从引入者所在目录出发，比如：

      ../images/xxx.jpg

      • ../ 表示上一层目录
      • ./ 表示当前目录

1.2.4. 列表标签

标签名标签格式标签描述
无序列表标签<ul></ul>用于在效果中定义一个无序列表。就是markdown的大黑点
有序列表标签<ol></ol>用于在效果中定义一个有序列表。就是markdown的1.
列表条目标签<li></li>用于在效果中定义一个列表的条目。

1.2.5. 超链接标签

用于在效果中定义一个可以点击跳转的链接。

<a></a>

属性描述格式
href指向超链接的路径。（必要属性,默认跳转到本页）绝对路径/相对路径
  • 超链接的内容不仅仅可以是文字，也可以是图片
  • 超链接的href属性不仅仅可以链接到html文件，可以是其他文件内容

1.2.6. 表格标签

标签名称描述
<table></table>表格标签定义一个表格
<tr></tr>行标签定义一个表格中的一行
<td></td>列标签定义一行中的单元格
<th></th>表头标签将一个单元格定义为表头单元格，就是加粗了下
table属性描述
border设置表格的边框粗细，单位是像素
width设置表格的宽度，单位可以是像素和百分比
tr属性描述格式
rowspan跨行合并单位为行数
colspan跨列合并单位为列数

1.2.7. 块标签

标签标签名描述
<span></span>块标签用于在效果中一行上定义一个块，进行内容显示，有多少内容占多大空间。适用于少量信息显示
<div></div>块级的块标签用于在效果中定义一块，默认占满一行，进行内容显示。适用于大量信息显示

1.2.8. 表单标签

用于在效果中定义一个表单，用于提交用户填写的数据。

<form></form>

标签属性：

  • action：将数据提交到何处，默认为本页，可以是本机路径和互联网路径
  • method：将数据以何种方式提交，默认为get，可选get和post
1.2.8.1. 输入项标签

表单输入项标签之一，用户可以在标签上通过填写和选择进行数据的输入。

<input/>

标签属性：

  • type：设置标签种类
    • text：文本框，默认
    • password：密码框，内容为非明文
    • radio：单选框，在同一组内有单选效果
    • checkbox：复选框
    • submit：提交按钮，用于控制表单提交数据
    • reset：重置按钮，用于将表单输入项恢复到默认状态
    • file：附件框，用于文件上传
    • hidden：隐藏域，一般用作提交服务器需要拿到的，但用户看不到的数据
    • button：普通按钮，需要和js事件一块使用
  • name：单选框、复选框进行数据的分组/设置该标签的参数名
  • value：设置该标签对应的参数值
  • checked：设置单选框/复选框的默认选中状态
  • readonly：设置该标签的参数只读，值就是readonly
  • disabled：设置该标签不可用，参数值无法更改，且参数值也无法提交。

参数列表格式：

参数1=数值1 & 参数2=数值2 & 参数3=数值3

单选框用户只能选择不能输入，因此要制定value属性值。

1.2.8.2. 选择框标签

定义一个下拉选择框

<select></select>

标签属性：

  • name：设置该标签对应的参数名
  • multiple：设置该标签选项全部显示，并且可以进行多选提交，默认为单选
1.2.8.3. 选项标签

为一个选择框添加一个选项

<option></option>

标签属性：

  • value：设置需要提交的参数值
  • selected：设置选项的默认选中状态
1.2.8.4. 文本域标签

用户可以在该标签上通过输入进行数据的输入。

<textarea></textarea>

标签属性：

  • name：设置该标签对应的参数名。

文本域和文本框的区别：

  1. 文本框不能换行，文本域可以
  2. 文本框参数值是value属性，文本域参数值是标签的内容体
1.2.8.5. 表单标签的提交问题

URL编码

正常的get方式提交数据：

?username=zhangsan&password=123456

非正常提交数据：

?username=zhangsan&password=dsa&(&(&*saS)

为了解决提交的数据中含有&等特殊符号，采用编码的方式将这些特殊符号和中文进行编码，例如$& \to %26$。

URL编码的原理

编码流程：

  1. 首先进行普通的编码，按照代码中设置的编码格式（UTF-8）进行编码，编码成字节数组。
  2. 字节数组中的每一个元素，都会从10进制转换为16进制。
  3. 把16进制的字节数组，加以%进行拼接。

2. CSS

2.1. CSS概论

2.1.1. CSS是什么？

  • css（Cascading Style Sheets）通常称为css样式或层叠样式表
  • 主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（高度、边框样式、边距等）以及版面的布局等外观显示样式
  • 美化页面

2.1.2. 为啥那么使用CSS样式？

html属性在单独使用时有一定的局限性，所以要配合CSS样式代码才能展示更为丰富的效果。

2.1.3. CSS代码规范

  • 放置规范：

    在<style>标签内容体上写css样式代码

    <style>标签放置在<head>标签中。

  • 格式规范：

    选择器名称: {

    属性名1: 属性值1;

    属性名2: 属性值2;

    …

    }

    选择器：即指定CSS样式作用在哪些html标签上。

  • 代码规范：

    • 属性名和属性值之间是键值对关系；

    • 属性名和属性值之间用:连接，最后用;结尾。

    • 如果一个属性名有多个属性值，多个值之间用空格隔开。

    • CSS注释：/* 注释内容 */

2.2. CSS选择器

2.2.1. 基本选择器

2.2.1.1. 元素选择器

  • html标签又名html元素。

  • 元素选择器：以html标签名作为选择器名称。

    • 作用：选择CSS样式代码作用于对应标签名的标签上。

    • 格式：

      标签名{

      ​ /*css样式代码*/

      }

    • 适用范围：适用于将相同样式作用在多个同名标签上。

2.2.1.2. 类选择器

  • 每个html标签都有一个class属性，即为类名。

  • 类选择器：以html的类名(class属性)作为选择器名称。

    • 作用：选择CSS样式代码作用于对应类名的html标签上。

    • 格式：

      .claa_name{

      ​ /*css样式代码*/

      }

    • 适用范围：适用于将样式一次作用在相同类名的标签上。

2.2.1.3. ID选择器

  • 每一个html标签都有一个id属性，id的属性值必须在本页面是唯一的。

  • ID选择器：以html的id（id属性值）作为选择器名称。

    • 作用：选择CSS样式代码作用域某个规定ID的HTML标签上。

    • 格式：

      [[id]]值{

      ​ /*css样式代码*/

      }

    • 适用范围：适用于将样式一次作用在某个标签上。

2.2.2. 基本选择器的组合方式

2.2.2.1. 层级关系

  • 标签和标签之间有层级关系，例如：

    <html>标签的子标签有<head>、<body>标签。

  • 基本选择器之间可以进行组合，表现出层级关系，从而更加针对性地把样式作用于某些标签上。

  • 格式：

    选择器1 选择器2 … {

    ​ /*css样式代码*/

    }

2.3. 边框属性

  • 所有的html标签都有边框，默认边框不可见

属性：

属性描述格式
border设置边框样式宽度 样式 颜色
线条样式：solid（实线），none（无边），double（双线）
width设置标签的宽度单位像素（px）
height设置标签的高度单位像素（px）
background-color设置标签代背景颜色1. 英文单词：例如：red，blue，yellow
2. 颜色代码：例如：[[ff1100]]

2.4. 布局

2.4.1. float

  • 浮动属性：就是排版方式

  • 格式：

    选择器{

    ​ float:value;

    }

  • 常用值：

    none：元素不浮动，默认垂直排版

    left：元素向左浮动

    right：元素向右浮动

  • tips：设置浮动属性后，会脱离原有文档流（会脱离原有的版式），从而会影响其他元素。（比如出现覆盖、重叠等效果，且原图层的改变只会被新图层（设置了浮动的元素）所覆盖）

2.5. 转换

2.5.1. display

html提供了丰富的标签，这些标签定义成了不同的类型，一般分为：块级元素和行内元素

  • 块元素：以区域块方式出现，每个块标签独自占据一整行或多整行，块结束会自动换行。
    • 常见的块元素：<h1>、<p>、<div>、<ul>等。
  • 行内元素：根据内容多少来占用行内空间，不会自动换行。
    • 常见的行内元素：<span>、<a>等。

display属性可以使得元素在行内元素和块元素之间相互转换。

  • 格式：

    选择器{

    ​ display:value;

    }

  • 常用属性值：

    • block：将元素转换为块元素
    • inline：将元素转换为行内元素
    • none：此元素将被隐藏，不显示，也不占用页面空间。

2.5. 字体

样式属性描述格式
font-size设置字体大小单位px
color设置字体颜色英文单词或颜色代码

2.6. CSS盒子模型

2.6.1. 什么是盒子模型

所有的html元素，都是一个四边形，可以看作一个盒子。用CSS来设置元素盒子的 内边距 、 边框 和 外边框 的样式的方式，相当于设置盒子的样式，即盒子模型。

image-20201109191837111

2.6.2. 边框

html元素盒子的框体

通用设置：border：粗细 线条样式 颜色

属性描述格式
border-top上边框粗细 线条样式 颜色
border-left左边框粗细 线条样式 颜色
border-right右边框粗细 线条样式 颜色
border-bottom下边框粗细 线条样式 颜色

2.6.3. 内边距

html元素里的内容体到html元素边框的距离

通用设置：padding：单位px

属性描述格式
padding-top上边距单位px
padding-left左边距单位px
padding-right右边距单位px
paddint-bottom下边距单位px

2.6.4. 外边距

html元素边框到其他html元素边框的距离

通用设置：margin：单位px

属性描述格式
margin-top上外边距单位px
margin-left左外边距单位px
margin-right右外边距单位px
margin-bottom下外边距单位px

2.7. CSS样式和HTML的结合

2.7.1. 内部样式

2.7.1.1. 行内样式

行内样式，是通过标签的 style 属性来设置元素的样式的。

格式：

<html 标签 style="css样式代码"/>

实例：

<a style="color: [[f00]]; font-size:30px;">我是憨憨！</a>

2.7.1.2. 标签方式

当某些样式在页面中被多个标签重复使用，为了编码更加灵活，避免书写重复代码，我们将样式代码从标签style属性中抽取出来，统一写入到<style>标签中。

格式：

<style>

​ 样式代码

​ …

</style>

2.7.2. 外部样式

2.7.2.1. 标签样式

<link/>又称为链入式，是将所有的样式放在一个或多个以css为扩展名的外部样式表文件中，通过<link>标签将样式连接到html文档中。适合不同页面进行样式复用。

格式：

<link rel="stylesheet" type="text/css" href="../filepath">

  • rel="stylesheet" 固定值，表示样式表
  • type="text/css" 固定值，表示css类型
  • href 表示css文件路径

3. JavaScript

3.1. JavaScript概论

3.1.1. 什么是JS？有什么用？

  • JavaScript是WEB上强大的脚本语言。
  • 作用：控制页面特效展示。例如：
    • 对html元素进行动态控制
    • 对表单进行校验
    • 控制CSS的样式

3.1.2. 什么是脚本语言？和其他语言有什么不同？

  • 其他的编程语言：可以独立编写程序，并且能独立编译执行。
  • 脚本语言：无法独立执行，必须嵌套到其它语言中结合使用。

3.1.3. JavaScript的语言特征及编程注意事项

特征：

  • js无需编译，直接被浏览器解释并执行
  • js无法单独运行，必须嵌入到html代码中运行
  • js的执行过程由上到下依次执行

注意：

  • js没有访问系统文件的权限（安全性）
  • 由于js无需编译，是由上到下依次解释执行，所以在保证可读性的情况下，允许使用链式编程
  • js和java没有任何直接关系

3.1.4. JavaScript的组成

  • ECMAScript（核心）： 规定 了js的语法和基本对象
  • DOM（文档对象模型）： 处理 网页内容的方法和接口
  • BOM（浏览器对象模型）：与浏览器 交互 的方法和接口

3.1.5. JavaScript的引入方式

3.1.5.1. 内部脚本

在当前页面内部写<script>标签，标签内部即可书写js代码

格式：

<script type="text/javascript">
    <!-- javascript代码 -->
</script>
3.1.5.2. 外部引入

在html文档中，通过<script src="">引入.js文件。

格式：

<script type="text/javascript" src="../filepath"></script>
  • 在使用外部引用script代码后，标签内不能有script代码，会被引入的代码覆盖。

3.1.6. script标签规范

开发规范规定，script标签的放置位置为：Body结束标签前

优点：

  • 保证html展示内容优先加载，最后加载脚本，增强用户体验性

3.2. JavaScript语法及规则

3.2.1. 注释

//单行注释
/* 多行注释 */

3.2.2. 变量

变量： 标示内存中的一块空间，用于存储数据，且数据是可变的

变量的声明和赋值：

  • 声明：var variable_name; //变量赋予默认值，默认值为undefined（未定义的）
  • 赋值：var variable_name = value; //变量赋予对应的值

在声明变量时，需要遵循以下命名规范：

  • 必须以字母或下划线开头，中间可以是数字、字符或下划线
  • 变量名不能包含空格等符号
  • 不能使用JavaScript关键字作为变量名
  • JavaScript严格区分大小写

3.2.3. 基本数据类型

数据类型：

  • string：字符串类型，""和''都是字符串，js中没有单个字符
  • boolean：布尔类型
  • number：数字类型
  • null：空，一个占位符
  • undefined：未定义类型，该类型只有一个固定值，表示变量声明却未定义具体的值

tips：

  • 因为undefined是从null中派生得到，所以undefined==null
  • js区别于java，是弱类型语言，不用严格遵循规范，所以一个变量生命好之后，是可以赋予任意类型的值
  • 通过typeof()运算符可以分辨变量值属于哪种基本数据类型
    • undefined：undefined型
    • boolean：boolean型
    • number：number型
    • string：string型
    • object：引用类型或null型

3.2.4. 引用数据类型

引用数据类型通常叫做类（class），而js中不存在编译过程，所以没有类的概念，所处理的引用数据类型都是对象。

标准创建方式：

  • var str = new String(); //和java相同
  • var str = new String; //js独有

3.2.5. 运算符

和java基本类似，只有一些不同点

3.2.5.1. 比较运算符
运算符描述示例
==等于(逻辑等仅对比值)x==8为true
===全等（对比值和类型）x===5为true，x===“5"为false
!=不等x!=3
>大于x>6
<小于x<10
>=大于或等于x>=3
<=小于或等于x<=10
3.2.5.2. 逻辑运算符
运算符描述
&&and
||or
！not
  • js逻辑运算符没有 &、|

3.2.6. 正则对象

3.2.6.1. RegExp对象的创建方式
var reg = new RegExp("表达式");
var reg = /^表达式$/;	//直接量，常用方式

  • 直接量中存在边界，即^代表开始，$代表结束。

  • 去掉边界后为普通方式，普通方式必须全部不匹配才返回false，否则就返回true。

3.2.6.2. test方法
var reg = /^表达式$/;
reg.test(string);	//用来校验字符串是否匹配正则，全部匹配返回true，否则返回false

3.2.7. JavaScript数组对象

3.2.7.1. js数组的特性

js数组可以看做java中的ArrayList集合。

  • 数组中的每一个成员没有类型限制，即可以存放任意类型。
  • 数组的长度可以自动修改。
3.2.7.2. js数组的四种创建方式
//方式1
var arr = [1, 2, 3, "a", true];
//方式2
var arr = new Array(); //数组长度默认为0
//方式3
var arr = new Array(4); //数组长度为4
//方式4
var arr = new Array(1, 2); //数组元素为1，2
3.2.7.3. js数组的常用属性和方法
属性/方法描述返回值
length属性，返回数组的长度\
join(str)方法，把数组的所有元素放入一个字符串，元素通过指定的分隔符(str)进行分割生成的字符串
pop()删除并返回数组的最后一个元素数组的最后一个元素
push(value, …)向数组的末尾添加一个或多个元素，并返回新的长度数组长度
reverse()颠倒数组中元素的顺序(本质是把数组下标进行互换)颠倒顺序后的数组

3.2.8. 全局函数

函数描述备注
eval(str)把字符串str作为js脚本代码执行。只能传递基本数据类型，不能传入字符串对象。
encodeURI(str)把字符串编码为URI。对于字符串中的特殊字符以及中文进行编码。
decodeURI(str)解码某个编码的URI。对于编码过的字符串进行解码。
parseInt(str)解析一个字符串并返回一个整数只按照字面值转为整型，小数点后面部分舍弃。
parseFloat(str)解析一个字符串并返回一个浮点数按照字面值转换为小数类型

  • URI和URL的区别

    URI是统一资源标识符，标识资源的详细名称

    URL是统一资源定位器，定位资源的网络位置

资源：可以通过浏览器访问的信息统称为资源。（图片、文本、HTML、CSS等）

  • 解析字符串方法中如果无法从字面值上转换为数字，则从无法转换的字符开始停止转换，仅返回左侧正确的值。如果都无法转换，则返回NaN（Not a Number），一个字符类型的标识，表示不是一个正确的数字。

3.2.9. 自定义函数/自定义方法

3.2.9.1. 函数简述及作用

如果一段代码需要被重复编写使用，那么我们为了方便统一编写使用，可以将其封装进一个函数（方法）中。

作用：增强代码的复用性。

3.2.9.2. 函数格式及规范
function func_name(param1, param2, ...){
    code...
}
  • js函数定义必须用小写的function
  • js函数无需定义返回值类型，直接在function后书写方法名
  • 参数的定义无需使用var关键字，否则会报错
  • js函数体中，return可以不写，也可以return具体值，或者return;
  • 如何没有具体返回值时，返回的结果为undefined
  • ja函数若同名，则不存在方法重载，只会被覆盖，最后的定义函数覆盖之前的定义
  • 因为js不存在函数重载，所以js仅根据方法名严格调用函数，形参和实参也必须完全匹配，否则会忽略多余的参数，少的参数会用undefined代替
3.2.10. 自定义对象
3.2.10.1. function构造函数

js中的引用数据类型都是对象，而对象在js中可以用函数来表示

相当于java中创建某个class类，格式如下：

function Object_name(param1, param2, ...){
    //定义属性方法1：使用this定义属性
    this.property1 = param1;
    this.property2 = param2;
    //code...
}
var ob_name = new Object_name(param1, param2, ...);
var a = ob_name.property1;
//定义属性方法2：动态定义
ob_name.property3 = value1;

3.2.11. 对象直接量

开发过程中可以用一种简单的方式直接创建自定义的js对象，这种方式称为“对象直接量”。格式为：

var object_name = {
    property1 : value1, 
	property2 : value2,
	//code...
};
  • 该方式直接创建出实例对象，无需构建函数，无需再new创建实例对象，直接只用即可。

3.3. BOM对象

3.3.1. 什么是BOM？有什么用？

  • BOM（Browser Object Model）浏览器对象模型

  • 作用：用来执行浏览器的相关操作，比如浏览器的地址、弹出消息等。

  • 一般情况下，window对象代表了BOM对象

    window对象是js的内置对象，使用window对象调用方法时可以省略window不写

3.3.2. Windows对象

属性描述
closed返回窗口是否已被关闭。
defaultStatus设置或返回窗口状态栏中的默认文本。
document对 Document 对象的只读引用。(请参阅对象)
frames返回窗口中所有命名的框架。该集合是 Window 对象的数组，每个 Window 对象在窗口中含有一个框架。
history对 History 对象的只读引用。请参数 History 对象。
innerHeight返回窗口的文档显示区的高度。
innerWidth返回窗口的文档显示区的宽度。
localStorage在浏览器中存储 key/value 对。没有过期时间。
length设置或返回窗口中的框架数量。
location用于窗口或框架的 Location 对象。请参阅 Location 对象。
name设置或返回窗口的名称。
navigator对 Navigator 对象的只读引用。请参数 Navigator 对象。
opener返回对创建此窗口的窗口的引用。
outerHeight返回窗口的外部高度，包含工具条与滚动条。
outerWidth返回窗口的外部宽度，包含工具条与滚动条。
pageXOffset设置或返回当前页面相对于窗口显示区左上角的 X 位置。
pageYOffset设置或返回当前页面相对于窗口显示区左上角的 Y 位置。
parent返回父窗口。
screen对 Screen 对象的只读引用。请参数 Screen 对象。
screenLeft返回相对于屏幕窗口的x坐标
screenTop返回相对于屏幕窗口的y坐标
screenX返回相对于屏幕窗口的x坐标
sessionStorage在浏览器中存储 key/value 对。 在关闭窗口或标签页之后将会删除这些数据。
screenY返回相对于屏幕窗口的y坐标
self返回对当前窗口的引用。等价于 Window 属性。
status设置窗口状态栏的文本。
top返回最顶层的父窗口。
方法描述
alert()显示带有一段消息和一个确认按钮的警告框。
atob()解码一个 base-64 编码的字符串。
btoa()创建一个 base-64 编码的字符串。
blur()把键盘焦点从顶层窗口移开。
clearInterval()取消由 setInterval() 设置的 timeout。
clearTimeout()取消由 setTimeout() 方法设置的 timeout。
close()关闭浏览器窗口。
confirm()显示带有一段消息以及确认按钮和取消按钮的对话框。
createPopup()创建一个 pop-up 窗口。
focus()把键盘焦点给予一个窗口。
getSelection()返回一个 Selection 对象，表示用户选择的文本范围或光标的当前位置。
getComputedStyle()获取指定元素的 CSS 样式。
matchMedia()该方法用来检查 media query 语句，它返回一个 MediaQueryList对象。
moveBy()可相对窗口的当前坐标把它移动指定的像素。
moveTo()把窗口的左上角移动到一个指定的坐标。
open()打开一个新的浏览器窗口或查找一个已命名的窗口。
print()打印当前窗口的内容。
prompt()显示可提示用户输入的对话框。
resizeBy()按照指定的像素调整窗口的大小。
resizeTo()把窗口的大小调整到指定的宽度和高度。
scrollTo()把内容滚动到指定的坐标。
scrollBy()按照指定的像素值来滚动内容。
setInterval()按照指定的周期（以毫秒计）来调用函数或计算表达式。
setTimeout()在指定的毫秒数后调用函数或计算表达式。
stop()停止页面载入。

3.3.3. Navigator对象

属性说明
appCodeName返回浏览器的代码名
appName返回浏览器的名称
appVersion返回浏览器的平台和版本信息
cookieEnabled返回指明浏览器中是否启用 cookie 的布尔值
platform返回运行浏览器的操作系统平台
userAgent返回由客户机发送服务器的user-agent 头部的值
方法描述
javaEnabled()指定是否在浏览器中启用Java
taintEnabled()规定浏览器是否启用数据污点(data tainting)

3.3.4. Screen对象

属性说明
availHeight返回屏幕的高度（不包括Windows任务栏）
availWidth返回屏幕的宽度（不包括Windows任务栏）
colorDepth返回目标设备或缓冲器上的调色板的比特深度
height返回屏幕的总高度
pixelDepth返回屏幕的颜色分辨率（每象素的位数）
width返回屏幕的总宽度

3.3.5. History对象

属性说明
length返回历史列表中的网址数
方法说明
back()加载 history 列表中的前一个 URL
forward()加载 history 列表中的下一个 URL
go()加载 history 列表中的某个具体页面

3.3.6. Location对象

属性描述
hash返回一个URL的锚部分
host返回一个URL的主机名和端口
hostname返回URL的主机名
href返回完整的URL
pathname返回的URL路径名。
port返回一个URL服务器使用的端口号
protocol返回一个URL协议
search返回一个URL的查询部分
方法说明
assign()载入一个新的文档
reload()重新载入当前文档
replace()用新的文档替换当前文档

3.3.7. 存储对象

属性描述
length返回存储对象中包含多少条数据。
方法描述
key(n)返回存储对象中第 n 个键的名称
getItem(keyname)返回指定键的值
setItem(keyname, value)添加键和值，如果对应的值存在，则更新该键对应的值。
removeItem(keyname)移除键
clear()清除存储对象中所有的键

3.4. DOM对象

3.4.1. 什么是DOM对象？有什么作用？

  • DOM（Document Object Model）文档对象模型，这里的文档一般指标记型文档（HTML等）
  • DOM是将标记型文档中所有内容（标签、文本、属性）都封装成对象
  • 通过操作对象的属性或方法，来达到操作或者改变html展示效果的目的

3.4.2. DOM树介绍

<!-- 如下代码，形成的DOM树如下图 -->
<html>
    <head>
        <title>文档标题</title>
    </head>
    <body>
        <a href="xxxxx">我的链接</a>
        <h1>
            我的标题
        </h1>
    </body>
</html>

image-20201110210534004

  • 每个标签都会被加载成DOM树上的一个元素节点对象。
  • 每个标签的属性会被加载成DOM树上的一个属性节点对象。
  • 每个标签的内容体都会被加载成DOM树上的一个文本节点对象。
  • 整个DOM树，是一个文档节点对象，即DOM对象。
  • 一个html文档加载到内存中就会形成一个DOM对象。

DOM树的特点：

  • 必定会有一个根节点
  • 每个节点都是节点对象
  • 常见的节点关系：父子节点关系
  • 文本节点对象没有子节点——叶子节点
  • 每个节点都有一个父节点，0到多个子节点
  • 只有根节点没有父节点

3.4.3. 获取元素对象的四种方式

方法描述
getElementById();通过元素ID获取对应元素对象，如果找不到返回null
getElementsByName();通过元素的name属性获取符合要求的所有元素数组
getElementsByTagName();通过元素的元素(标签)名属性获取符合要求的所有属性
getElementsByClassName();通过元素的class属性获取符合要求的所有元素
  • 获取某个/某些元素节点对象，必须保证元素节点对象被先加载到内存中

3.4.4. Document对象

属性 / 方法描述
document.activeElement返回当前获取焦点元素
document.addEventListener()向文档添加句柄
document.adoptNode(node)从另外一个文档返回 adapded 节点到当前文档。
document.anchors返回对文档中所有 Anchor 对象的引用。
document.applets返回对文档中所有 Applet 对象的引用。注意: HTML5 已不支持 元素。
document.baseURI返回文档的绝对基础 URI
document.body返回文档的body元素
document.close()关闭用 document.open() 方法打开的输出流，并显示选定的数据。
document.cookie设置或返回与当前文档有关的所有 cookie。
document.createAttribute()创建一个属性节点
document.createComment()createComment() 方法可创建注释节点。
document.createDocumentFragment()创建空的 DocumentFragment 对象，并返回此对象。
document.createElement()创建元素节点。
document.createTextNode()创建文本节点。
document.doctype返回与文档相关的文档类型声明 (DTD)。
document.documentElement返回文档的根节点
document.documentMode返回用于通过浏览器渲染文档的模式
document.documentURI设置或返回文档的位置
document.domain返回当前文档的域名。
document.domConfig已废弃。返回 normalizeDocument() 被调用时所使用的配置。
document.embeds返回文档中所有嵌入的内容（embed）集合
document.forms返回对文档中所有 Form 对象引用。
document.getElementsByClassName()返回文档中所有指定类名的元素集合，作为 NodeList 对象。
document.getElementById()返回对拥有指定 id 的第一个对象的引用。
document.getElementsByName()返回带有指定名称的对象集合。
document.getElementsByTagName()返回带有指定标签名的对象集合。
document.images返回对文档中所有 Image 对象引用。
document.implementation返回处理该文档的 DOMImplementation 对象。
document.importNode()把一个节点从另一个文档复制到该文档以便应用。
document.inputEncoding返回用于文档的编码方式（在解析时）。
document.lastModified返回文档被最后修改的日期和时间。
document.links返回对文档中所有 Area 和 Link 对象引用。
document.normalize()删除空文本节点，并连接相邻节点
document.normalizeDocument()删除空文本节点，并连接相邻节点的
document.open()打开一个流，以收集来自任何 document.write() 或 document.writeln() 方法的输出。
document.querySelector()返回文档中匹配指定的CSS选择器的第一元素
document.querySelectorAll()document.querySelectorAll() 是 HTML5中引入的新方法，返回文档中匹配的CSS选择器的所有元素节点列表
document.readyState返回文档状态 (载入中……)
document.referrer返回载入当前文档的文档的 URL。
document.removeEventListener()移除文档中的事件句柄(由 addEventListener() 方法添加)
document.renameNode()重命名元素或者属性节点。
document.scripts返回页面中所有脚本的集合。
document.strictErrorChecking设置或返回是否强制进行错误检查。
document.title返回当前文档的标题。
document.URL返回文档完整的URL
document.write()向文档写 HTML 表达式 或 JavaScript 代码。
document.writeln()等同于 write() 方法，不同的是在每个表达式之后写一个换行符。

3.4.5. 元素对象

属性 / 方法描述
element.accessKey设置或返回accesskey一个元素
element.addEventListener()向指定元素添加事件句柄
element.appendChild()为元素添加一个新的子元素
element.attributes返回一个元素的属性数组
element.childNodes返回元素的一个子节点的数组
element.children返回元素的子元素的集合
element.classList返回元素的类名，作为 DOMTokenList 对象。
element.className设置或返回元素的class属性
element.clientHeight在页面上返回内容的可视高度（不包括边框，边距或滚动条）
element.clientWidth在页面上返回内容的可视宽度（不包括边框，边距或滚动条）
element.cloneNode()克隆某个元素
element.compareDocumentPosition()比较两个元素的文档位置。
element.contentEditable设置或返回元素的内容是否可编辑
element.dir设置或返回一个元素中的文本方向
element.firstChild返回元素的第一个子节点
element.focus()设置文档或元素获取焦点
element.getAttribute()返回指定元素的属性值
element.getAttributeNode()返回指定属性节点
element.getElementsByTagName()返回指定标签名的所有子元素集合。
element. getElementsByClassName()返回文档中所有指定类名的元素集合，作为 NodeList 对象。
element.getFeature()返回指定特征的执行APIs对象。
element.getUserData()返回一个元素中关联键值的对象。
element.hasAttribute()如果元素中存在指定的属性返回 true，否则返回false。
element.hasAttributes()如果元素有任何属性返回true，否则返回false。
element.hasChildNodes()返回一个元素是否具有任何子元素
element.hasFocus()返回布尔值，检测文档或元素是否获取焦点
element.id设置或者返回元素的 id。
element.innerHTML设置或者返回元素的内容。
element.insertBefore()现有的子元素之前插入一个新的子元素
element.isContentEditable如果元素内容可编辑返回 true，否则返回false
element.isDefaultNamespace()如果指定了namespaceURI 返回 true，否则返回 false。
element.isEqualNode()检查两个元素是否相等
element.isSameNode()检查两个元素所有有相同节点。
element.isSupported()如果在元素中支持指定特征返回 true。
element.lang设置或者返回一个元素的语言。
element.lastChild返回的最后一个子节点
element.namespaceURI返回命名空间的 URI。
element.nextSibling返回该元素紧跟的一个节点
element.nextElementSibling返回指定元素之后的下一个兄弟元素（相同节点树层中的下一个元素节点）。
element.nodeName返回元素的标记名（大写）
element.nodeType返回元素的节点类型
element.nodeValue返回元素的节点值
element.normalize()使得此成为一个"normal"的形式，其中只有结构（如元素，注释，处理指令，CDATA节和实体引用）隔开Text节点，即元素（包括属性）下面的所有文本节点，既没有相邻的文本节点也没有空的文本节点
element.offsetHeight返回任何一个元素的高度包括边框和填充，但不是边距
element.offsetWidth返回元素的宽度，包括边框和填充，但不是边距
element.offsetLeft返回当前元素的相对水平偏移位置的偏移容器
element.offsetParent返回元素的偏移容器
element.offsetTop返回当前元素的相对垂直偏移位置的偏移容器
element.ownerDocument返回元素的根元素（文档对象）
element.parentNode返回元素的父节点
element.previousSibling返回某个元素紧接之前元素
element.previousElementSibling返回指定元素的前一个兄弟元素（相同节点树层中的前一个元素节点）。
element.querySelector()返回匹配指定 CSS 选择器元素的第一个子元素
document.querySelectorAll()返回匹配指定 CSS 选择器元素的所有子元素节点列表
element.removeAttribute()从元素中删除指定的属性
element.removeAttributeNode()删除指定属性节点并返回移除后的节点。
element.removeChild()删除一个子元素
element.removeEventListener()移除由 addEventListener() 方法添加的事件句柄
element.replaceChild()替换一个子元素
element.scrollHeight返回整个元素的高度（包括带滚动条的隐蔽的地方）
element.scrollLeft返回当前视图中的实际元素的左边缘和左边缘之间的距离
element.scrollTop返回当前视图中的实际元素的顶部边缘和顶部边缘之间的距离
element.scrollWidth返回元素的整个宽度（包括带滚动条的隐蔽的地方）
element.setAttribute()设置或者改变指定属性并指定值。
element.setAttributeNode()设置或者改变指定属性节点。
element.setIdAttribute()
element.setIdAttributeNode()
element.setUserData()在元素中为指定键值关联对象。
element.style设置或返回元素的样式属性
element.tabIndex设置或返回元素的标签顺序。
element.tagName作为一个字符串返回某个元素的标记名（大写）
element.textContent设置或返回一个节点和它的文本内容
element.title设置或返回元素的title属性
element.toString()一个元素转换成字符串
nodelist.item()返回某个元素基于文档树的索引
nodelist.length返回节点列表的节点数目。

3.4.6. 属性对象

属性 / 方法描述
Attr对象\
attr.isId如果属性是 ID 类型，则 isId 属性返回 true，否则返回 false。
attr.name返回属性名称
attr.value设置或者返回属性值
attr.specified如果属性被指定返回 true ，否则返回 false
NamedNodeMap对象\
nodemap.getNamedItem()从节点列表中返回的指定属性节点。
nodemap.item()返回节点列表中处于指定索引号的节点。
nodemap.length返回节点列表的节点数目。
nodemap.removeNamedItem()删除指定属性节点
nodemap.setNamedItem()设置指定属性节点(通过名称)

3.5. 事件对象

3.5.1. 事件驱动机制

页面上的特效，可以理解为再js事件驱动机制下进行

js事件驱动机制包括：

  • 事件源：专门产生事件的组件
  • 事件：由事件源所产生的组件
  • 监听器：专门处理事件源所产生的事件
  • 注册/绑定监听器：时刻监听事件源是否有指定事件产生，如果事件源产生指定事件，则调用监听器处理

实例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>I am title. </title>
        <script>
        	function run(){
                //code ...
            }
        </script>
    </head>
    <body>
        <!-- 在这个实例中，事件驱动机制包括如下部分：
			事件源：button按钮
			事件：点击事件 onclick
			监听器：方法   run()
			注册监听器：onclick="run()"
		-->
        <input type="button" value="I am a button" onclick="run()"/>
    </body>
</html>

3.5.2. 事件绑定方式

3.5.2.1. 元素事件句柄绑定

将事件以元素属性的方式写到标签内部，进而绑定对应函数

<!-- 示例1：为事件绑定一个无参函数 -->
<script>
	function run1(){
        // code...
    }
</script>
<input type="text" name="uname" onclick="run1()"/>

<!-- 示例2：为事件绑定一个有参（基本数据类型）函数, -->
<script>
	function run2(str){
        // code...
    }
</script>
<input type="text" name="uname" onclick="run2('Hello, js.')"/>

<!-- 示例2：为事件绑定一个有参（对象）函数, -->
<script>
	function run2(str){
        // code...
    }
</script>
<input type="text" name="uname" onclick="run2(this)"/>

<!-- 示例2：为事件绑定多个有参（对象）函数, -->
<script>
	function run3(str){
        // code...
    }
    function run3(str){
        // code...
    }
</script>
<input type="text" name="uname" onclick="run4(), run4(), ..."/>
<!-- 绑定多个参数时，将按照绑定顺序依次触发 -->
  • 优点：
    • 开发快捷
    • 传参方便
    • 可以绑定多个函数
  • 缺点：js和html代码高度糅合在一起，不利于多部门的项目开发维护
3.5.2.2. DOM绑定

使用DOM的属性方式绑定事件

<!-- 事件句柄绑定方式 -->
<script>
	function run(){
        //code...
    }
</script>
<body onload="run()"/>

<!-- DOM绑定方式 -->
<script>
	function run(){
        //code...
    }
    //方法1
    window.onload=run;
    //方法2,内部匿名函数，使用onlaod在页面加载完后进行函数绑定，不会因为参数未加载而出现bug
    window.onload=function(){
        //code...
        run1();
        run2(str);
        run3(obj);
        ...
    };
</script>
  • DOM绑定方式优点：
    • 使得html代码和js代码完全分离
  • 缺点：
    • 不能直接传递参数，需要通过内部匿名函数实现
    • 一个事件一次只能绑定一个函数，内部匿名函数可以解决

3.5.2. 鼠标事件

属性描述
onclick当用户点击某个对象时调用的事件句柄。
oncontextmenu在用户点击鼠标右键打开上下文菜单时触发
ondblclick当用户双击某个对象时调用的事件句柄。
onmousedown鼠标按钮被按下。
onmouseenter当鼠标指针移动到元素上时触发。
onmouseleave当鼠标指针移出元素时触发
onmousemove鼠标被移动。
onmouseover鼠标移到某元素之上。
onmouseout鼠标从某元素移开。
onmouseup鼠标按键被松开。

3.5.3. 键盘事件

属性描述
onkeydown某个键盘按键被按下。
onkeypress某个键盘按键被按下并松开。
onkeyup某个键盘按键被松开。

3.5.4. 框架/对象（Frame/Object）事件

属性描述
onabort图像的加载被中断。 ( )
onbeforeunload该事件在即将离开页面（刷新或关闭）时触发
onerror在加载文档或图像时发生错误。 ( , 和 )
onhashchange该事件在当前 URL 的锚部分发生修改时触发。
onload一张页面或一幅图像完成加载。
onpageshow该事件在用户访问页面时触发
onpagehide该事件在用户离开当前网页跳转到另外一个页面时触发
onresize窗口或框架被重新调整大小。
onscroll当文档被滚动时发生的事件。
onunload用户退出页面。 ( 和 )

3.5.5. 表单事件

属性描述
onblur元素失去焦点时触发
onchange该事件在表单元素的内容改变时触发( , ,