前言：

很多人问我，网络安全前端要不要学，要学到什么程度，今天就把一些必须学习的知识点积累分享出来，当然，这些只是基础的，还要学前端安全和框架安全的要学的更多。


HTML 了解布局 和整体结构

1.HTML 基础结构

万字网安前端干货-JavaScript+CSS3_CSS

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
 
<h1>这是一个标题</h1>
<hr>水平线
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>
<br/>换行
<p>我的第一个段落。</p>
<!--  注释 -->
</body>
</html>
2.HTML标签
链接
普通的链接：<a href="http://www.example.com/">链接文本</a>
图像链接： <a href="http://www.example.com/"><img src="URL" alt="替换文本"></a>
邮件链接： <a href="mailto:webmaster@example.com">发送e-mail</a>
书签：
<a id="tips">提示部分</a>
<a href="#tips">跳到提示部分</a>

<link rel="stylesheet" type="text/css" href="mystyle.css">link标签链接外部资源
图像
<img src="/images/logo.png" width="258" height="39" />
<img src="boat.gif" alt="Big Boat">alt属性是替换属性，当图形无法加载时，alt文本就会替换图像
列表
<h4>无序列表:</h4>
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
<ol start="50">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
表格
<h4>两行三列:</h4>
<table border="1">
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>400</td>
  <td>500</td>
  <td>600</td>
</tr>
</table>


文本
<b>加粗文本</b><br>
<i>斜体文本</i><br>
<code>电脑自动输出</code><br>
这是 <sub> 下标</sub> 和 <sup> 上标</sup>
2.2HTML属性

属性可以在元素中添加附加信息，以名称/值对的形式出现。

属性值应该始终被包括在引号内。

3.HTML 进阶标签
框架 iframe

套娃，使页面不止含有一个页面。

<iframe src="demo_iframe.htm" width="200" height="200"></iframe>

移除边框：

frameborder="0"

与链接联动：


<iframe src="demo_iframe.htm" name="iframe_a"></iframe>

<p><a href="https://www.runoob.com" target="iframe_a">RUNOOB.COM</a></p>

因为 a 标签的 target 属性是名为 iframe_a 的 iframe 框架，所以在点击链接时页面会显示在 iframe框架中。

区块 div span

分层盒子模型，主要是为了网页布局。

万字网安前端干货-JavaScript+CSS3_前端_02

一般是从上到下排列

指定float：left从左开始排列 right从右排列


表单 form

用于收集用户的输入信息。

表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。

<form> 元素用于创建表单，
action 属性定义了表单数据提交的目标 URL，
method 属性定义了提交数据的 HTTP 方法（这里使用的是 "post"）。
  
<label> 元素用于为表单元素添加标签，提高可访问性。
<input type="radio" id="male" name="gender" value="male" checked>
<label for="male">男</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">女</label>

<input> 元素是最常用的表单元素之一，它可以创建文本输入框、密码框、单选按钮、复选框等。type 属性定义了输入框的类型，id 属性用于关联 <label> 元素，name 属性用于标识表单字段。
 <input type="checkbox" id="subscribe" name="subscribe" checked>
 <label for="subscribe">订阅推送信息</label> 
 
<select> 元素用于创建下拉列表，而 <option> 元素用于定义下拉列表中的选项

<select id="country" name="country">
     <option value="cn">CN</option>
     <option value="usa">USA</option>
     <option value="uk">UK</option>
    </select>

万字网安前端干货-JavaScript+CSS3_HTML_03


CSS基础 能看懂 了解常见

CSS简单介绍

CSS 层叠样式表，用于设置HTML页面中的文本（字体、大小、对齐方式）、图片（宽高、边框样式、边距等）以及版面的布局等外观显示样式。

CSS基础语法

CSS 由选择器和声明组成，声明又由样式属性：值来构成。

比如 h1{color:red; font-size:14px;}  
h1是选择器，color和font-size是属性，red和14px是值
CSS三种创建

内联 > 内部 > 外联

内联样式（行内式）
<div style="width:200px;height:100px;border:1px solid black;"></div>

放在html标签头内，由 style =“”定义属性，但是范围小。

内部样式
<head>
  <style type="text/CSS">
      选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
      div{width:200px; height:200px; border:1px solid red;}
  </style>
</head>

在html标签头尾之间，由里面写入CSS。

外部样式
<head>
    <link rel="stylesheet" type="text/css" href="css/style.css">
  </head>
  • <link>：这是HTML中用于链接外部资源的标签，可以将外部样式表、JavaScript文件等链接到HTML文档中。
  • rel="stylesheet"：这是<link>标签的属性之一，指定了被链接的资源是一个样式表（stylesheet）。
  • type="text/css"：这是<link>标签的另一个属性，指定了被链接的资源的类型是CSS样式表。
  • href="css/style.css"：指定了被链接的外部样式表文件的路径。外部样式表文件名为style.css，位于一个名为css的文件夹内。
    CSS外部样式表是一个独立的CSS文件，以.css为文件扩展名。
CSS选择器
id选择器：

id属性和身份证一样， 有唯一性，id 选择器为标有特定 id 的 HTML 元素指定特定样式。

CSS 中 id 选择器以 "#" 来定义。注意： id 属性不能以数字开头。

#content {  font-size: 16px; }
类class选择器：

id选择器是唯一，类选择器则是一组一类的元素。

class 可以在多个元素中使用，并且一个元素也可以指定多个类名。

在 CSS 中，类选择器以点 "." 号来定义，同样类名的第一个字符也不能使用数字。

.primary {
  color: blue;
}
.highlight {
  background-color: yellow;
}
选择器引用
<p class="primary">This is a primary paragraph</p>

<h1 id="header">This is a header element</h1>
<span id="highlight">This is a highlighted text</span>

选择器分组

h1,h2,h3,h4,h5,h6 {
      color: green;
    }
CSS背景
background-color          背景颜色
background-image          背景图像
background-repeat         背景图像设置水平或垂直平铺或不平铺
background-position       背景图像设置定位
background-attachment     背景图像设置固定或滚动
CSS文本text

文本对齐方式：text-align属性有四个值：left，center，right，justify(两端对齐)；

文本修饰：text-decoration 属性用来设置或删除文本的修饰。

文本阴影：text-shadow: x y;

文本间距：文本行的高度。line-height：22px;

字间距：letter-spacing 和 word-spacing;

文本转换：text-transform;

CSS字体font

font-style(字体风格)：font-style: italic;

font-variant(字体变形）

font-size（字号）：定义文本的大小 font-size: 24px;

font-weight 字体粗细： font-weight: bold;

CSS链接
a:link - 正常，未访问过的链接。
a:visited - 已访问过的链接。
a:hover - 当鼠标滑动到链接上时。
a:active - 链接被点击的那一刻。


javascript

JavaScript 是一门跨平台、面向对象的脚本语言，它能使网页可交互（例如拥有复杂的动画，可点击的按钮，通俗的菜单等）。另外还有高级的服务端 Javascript 版本，例如 Node.js，它可以让你在网页上添加更多功能，不仅仅是下载文件（例如在多台电脑之间的协同合作）。在宿主环境（例如 web 浏览器）中，JavaScript 能够通过其所连接的环境提供的编程接口进行控制。

1.2JavaScript书写位置

外部JavaScript书写

<script src=""> </script>

万字网安前端干货-JavaScript+CSS3_HTML_04

1.3javascript 注释

行注释 //

双行注释 /* */

1.4 输入: prompt()

输出：aler() document.write() console.log()

知识点

直接量，就是表面上可以见到的数据值。常见的直接量有数字、小数、字符串

var定义一个变量，再将它指向那个直接量，就能有保存数据

数据可分为两类，分别为原生数据类型

（primitive type）和对象数据类型（object type）。

原生数据类型包括数字、字符串、布尔值，还有两个特殊的类型：null和undefined。

对象数据类型，是一种复合型的数据类型，它可以把多个数据放到一起，就好像一个篮子，这个篮子里面的每一个数据都可以看作是一个单元，它们都有自己的名字和值。

null和undefined都代表了直接量的空缺，如果一个变量指向了其中任何一个，都代表false的含义，也表示没有或空的概念。

而从根本意义上讲，undefined要比null更加严重一点，代表本不应该出现的错误，比如我刚才定义了一个变量a，但是我没有把任何直接量赋给它，那么a就默认指向了undefined；而null不同，有的时候，我需要给某些变量赋值null，以达到清空的目的

因为JavaScript是大小写敏感的，所以null和Null、NULL或者其他变量是有区别的。

undefined是一个顶级属性，它代表某一个变量未定义。同样， undefined也是一个原始值。

2.变量 数组

2.1变量

万字网安前端干货-JavaScript+CSS3_JavaScript_05

变量提升

在变量提升、暂时性死区等知识点。

变量提升是指在变量的作用域内，不管变量在何处声明，都会被提升到作用域的顶部，但是变量初始化的顺序不变。

变量提升实际的实现方式是JavaScript的变量和函数的声明会在编译阶段放入内存。

javascript代码并不是一行一行往下执行的.

javascript执行分为2个步骤：

  1. 编译(词法解释/预解释)
  2. 执行

万字网安前端干货-JavaScript+CSS3_CSS_06


万字网安前端干货-JavaScript+CSS3_JavaScript_07


万字网安前端干货-JavaScript+CSS3_网络安全_08

万字网安前端干货-JavaScript+CSS3_CSS_09

变量提升只是提升变量的声明，并不会把赋值也提升上来。

正因为有变量提升这回事，所以为了避免变量提升带来的不好的影响，我们最好在定义变量时，使用let而不是var。

类型检测

判断JS的类型

方法一、typeof方法

基本数据类型除了null外都返回对应类型的字符串。

typeof 1 // "number"

typeof 'a' // "string"

typeof true // "boolean"

typeof undefined // "undefined"

typeof Symbol() // "symbol"

typeof 42n // "bigint"

2.2 数组

数组就是一个容器，可以存放一个或者多个对象。当然，这些对象的类型是没有限制的。

push方法，它可以把一个元素添加到数组里面。

pop方法会默认删除数组中的最后一个元素。

splice方法的作用是插入、删除或者替换数组元素，它不仅 会在原有的数组上进行修改，还会返回被处理的内容，十分强大

splice方法用前两个参数进行定位，余下

的参数表示插入部分。

现在有一个数组[1，2，3，4，5]，splice方法的第一个参数

代表需要操作的数组的起始位置，比如你要删除数组中的某一个元素，

那么你必须确定从数组中第几个元素开始删除，因为数组的下标位置默

认从0开始，所以假如要删除数字3，就需要从数组下标为2的地方开始

删除。然后，splice方法的第二个参数代表要删除元素的个数，如果我

只删除一个数字3，那么只需要在第二个参数的位置填入1即可。

万字网安前端干货-JavaScript+CSS3_CSS_10

join方法可以把数组中的所有元素放 入一个字符串。元素是通过指定的分隔符进行分隔的，而这指定的分隔 符就是join方法的参数。

万字网安前端干货-JavaScript+CSS3_CSS_11

数组累加

万字网安前端干货-JavaScript+CSS3_前端_12

数组遍历

万字网安前端干货-JavaScript+CSS3_HTML_13


3.函数

函数作用域

在JavaScript中，作用域分为两种，一种

是全局作用域，另一种是函数作用域。所谓作用域，就是指当你要查

找某一个变量的时候，你可以在什么范围内找到这个变量。

在函数作用域里面可以访问全局作用域中的变量，但是反过来不行。

函数参数传递

万字网安前端干货-JavaScript+CSS3_前端_14

函数闭包

把一个函数返回出去

函数作用域可以嵌套，所以里面的函数作用域

就可以访问外面函数作用域中的变量了

test函数里面定义了一个局部变量a，这个变量a就属于test函数的函

数作用域，而最终返回的函数也属于test函数作用域，这个匿名函数的

内部就有权限访问外部的作用域。

我们调用一个函数，其里面的局部变量会在函数调用结束后销毁，这也是我们在全局作用域

里面无法访问函数局部变量的原因。但是，如果你使用了闭包，那么就

会让这个局部变量不随着原函数的销毁而销毁，而是继续存在。

万字网安前端干货-JavaScript+CSS3_网络安全_15


4.正则表达式

正则表达式是一组由字母和符号组成的特殊文本，它可以用来从文本中找出满足你想要的格式的句子。

一个正则表达式是一种从左到右匹配主体字符串的模式。


使用一个正则表达式字面量，其由包含在斜杠之间的模式组成，如下所示：

JSCopy to Clipboard

var re = /ab+c/;

脚本加载后，正则表达式字面量就会被编译。当正则表达式保持不变时，使用此方法可获得更好的性能。

或者调用RegExp对象的构造函数，如下所示：

JSCopy to Clipboard

var re = new RegExp("ab+c");

在脚本运行过程中，用构造函数创建的正则表达式会被编译。如果正则表达式将会改变，或者它将会从用户输入等来源中动态地产生，就需要使用构造函数来创建正则表达式。

一个正则表达式模式是由简单的字符所构成的，比如 /abc/；或者是简单和特殊字符的组合，比如 /ab*c/ 或 /Chapter (\d+)\.\d*/。最后的例子中用到了括号，它在正则表达式中常用作记忆设备。即这部分所匹配的字符将会被记住以备后续使用，例如使用括号的子字符串匹配。

简单模式

由你想直接找到的字符构成。比如，/abc/ 这个模式就能且仅能匹配 "abc" 字符按照顺序同时出现的情况。例如在 "Hi, do you know your abc's?" 和 "The latest airplane designs evolved from slabcraft." 中会匹配成功。在上述两个例子中，匹配的子字符串是 "abc"。但是在 "Grab crab" 中会匹配失败，因为它虽然包含子字符串 "ab c"，但并不是准确的 "abc"。

当你需要匹配一个不确定的字符串时，比如寻找一个或多个 "b"，或者寻找空格，可以在模式中使用特殊字符。比如，你可以使用 /ab*c/ 去匹配一个单独的 "a" 后面跟了零个或者多个 "b"，同时后面跟着 "c" 的字符串：*的意思是前一项出现零次或者多次。在字符串 "cbbabbbbcdebc" 中，这个模式匹配了子字符串 "abbbbc"。

下面的页面与表格列出了一个正则表达式中可以利用的特殊字符的完整列表和描述。

断言指南

表示一个匹配在某些条件下发生。断言包含先行断言、后行断言和条件表达式。

字符类指南

区分不同类型的字符，例如区分字母和数字。

组和反向引用指南

当使用正则表达式模式与字符串匹配时，组会将多个模式组合成一个整体，捕获组会提供额外的子匹配信息。反向引用指的是同一正则表达式中以前捕获的组。

量词指南

表示匹配的字符或表达式的数量。

正则表达式中的特殊字符

字符

含义

\

依照下列规则匹配：

在非特殊字符之前的反斜杠表示下一个字符是特殊字符，不能按照字面理解。例如，前面没有 "\" 的 "b" 通常匹配小写字母 "b"，即字符会被作为字面理解，无论它出现在哪里。但如果前面加了 "\"，它将不再匹配任何字符，而是表示一个字符边界。

在特殊字符之前的反斜杠表示下一个字符不是特殊字符，应该按照字面理解。详情请参阅下文中的 "转义（Escaping）" 部分。

如果你想将字符串传递给 RegExp 构造函数，不要忘记在字符串字面量中反斜杠是转义字符。所以为了在模式中添加一个反斜杠，你需要在字符串字面量中转义它。/[a-z]\s/i 和 new RegExp("[a-z]\\s", "i") 创建了相同的正则表达式：一个用于搜索后面紧跟着空白字符（\s 可看后文）并且在 a-z 范围内的任意字符的表达式。为了通过字符串字面量给 RegExp 构造函数创建包含反斜杠的表达式，你需要在字符串级别和正则表达式级别都对它进行转义。例如 /[a-z]:\\/i 和 new RegExp("[a-z]:\\\\","i") 会创建相同的表达式，即匹配类似 "C:\" 字符串。

^

匹配输入的开始。如果多行标志被设置为 true，那么也匹配换行符后紧跟的位置。

例如，/^A/ 并不会匹配 "an A" 中的 'A'，但是会匹配 "An E" 中的 'A'。

当 '^' 作为第一个字符出现在一个字符集合模式时，它将会有不同的含义。反向字符集合 一节有详细介绍和示例。

$

匹配输入的结束。如果多行标志被设置为 true，那么也匹配换行符前的位置。

例如，/t$/ 并不会匹配 "eater" 中的 't'，但是会匹配 "eat" 中的 't'。

*

匹配前一个表达式 0 次或多次。等价于 {0,}。

例如，/bo*/ 会匹配 "A ghost boooooed" 中的 'booooo' 和 "A bird warbled" 中的 'b'，但是在 "A goat grunted" 中不会匹配任何内容。

+

匹配前面一个表达式 1 次或者多次。等价于 {1,}。

例如，/a+/ 会匹配 "candy" 中的 'a' 和 "caaaaaaandy" 中所有的 'a'，但是在 "cndy" 中不会匹配任何内容。

?

匹配前面一个表达式 0 次或者 1 次。等价于 {0,1}。

例如，/e?le?/ 匹配 "angel" 中的 'el'、"angle" 中的 'le' 以及 "oslo' 中的 'l'。

如果紧跟在任何量词 *、 +、? 或 {} 的后面，将会使量词变为非贪婪（匹配尽量少的字符），和缺省使用的贪婪模式（匹配尽可能多的字符）正好相反。例如，对 "123abc" 使用 /\d+/ 将会匹配 "123"，而使用 /\d+?/ 则只会匹配到 "1"。

还用于先行断言中，如本表的 x(?=y) 和 x(?!y) 条目所述。

.

（小数点）默认匹配除换行符之外的任何单个字符。

例如，/.n/ 将会匹配 "nay, an apple is on the tree" 中的 'an' 和 'on'，但是不会匹配 'nay'。

如果 s ("dotAll") 标志位被设为 true，它也会匹配换行符。

(x)

像下面的例子展示的那样，它会匹配 'x' 并且记住匹配项。其中括号被称为捕获括号。

模式 /(foo) (bar) \1 \2/ 中的 '(foo)' 和 '(bar)' 匹配并记住字符串 "foo bar foo bar" 中前两个单词。模式中的 \1 和 \2 表示第一个和第二个被捕获括号匹配的子字符串，即 foo 和 bar，匹配了原字符串中的后两个单词。注意 \1、\2、...、\n 是用在正则表达式的匹配环节，详情可以参阅后文的 \n 条目。而在正则表达式的替换环节，则要使用像 $1、$2、...、$n 这样的语法，例如，'bar foo'.replace(/(...) (...)/, '$2 $1')。$& 表示整个用于匹配的原字符串。

(?:x)

匹配 'x' 但是不记住匹配项。这种括号叫作非捕获括号，使得你能够定义与正则表达式运算符一起使用的子表达式。看看这个例子 /(?:foo){1,2}/。如果表达式是 /foo{1,2}/，{1,2} 将只应用于 'foo' 的最后一个字符 'o'。如果使用非捕获括号，则 {1,2} 会应用于整个 'foo' 单词。更多信息，可以参阅下文的 使用括号的子字符串匹配 条目。

x(?=y)

匹配'x'仅仅当'x'后面跟着'y'.这种叫做先行断言。

例如，/Jack(?=Sprat)/会匹配到'Jack'仅当它后面跟着'Sprat'。/Jack(?=Sprat|Frost)/匹配‘Jack’仅当它后面跟着'Sprat'或者是‘Frost’。但是‘Sprat’和‘Frost’都不是匹配结果的一部分。

(?<=y)x

匹配'x'仅当'x'前面是'y'.这种叫做后行断言。

例如，/(?<=Jack)Sprat/会匹配到' Sprat '仅仅当它前面是' Jack '。/(?<=Jack|Tom)Sprat/匹配‘Sprat ’仅仅当它前面是'Jack'或者是‘Tom’。但是‘Jack’和‘Tom’都不是匹配结果的一部分。

x(?!y)

仅仅当'x'后面不跟着'y'时匹配'x'，这被称为正向否定查找。

例如，仅仅当这个数字后面没有跟小数点的时候，/\d+(?!\.)/ 匹配一个数字。正则表达式/\d+(?!\.)/.exec("3.141") 匹配‘141’而不是‘3.141’

(?<!y)x

仅仅当'x'前面不是'y'时匹配'x'，这被称为反向否定查找。

例如，仅仅当这个数字前面没有负号的时候，/(?<!-)\d+/ 匹配一个数字。
/(?<!-)\d+/.exec('3') 匹配到 "3".
/(?<!-)\d+/.exec('-3') 因为这个数字前有负号，所以没有匹配到。

x|y

匹配‘x’或者‘y’。

例如，/green|red/匹配“green apple”中的‘green’和“red apple”中的‘red’

{n}

n 是一个正整数，匹配了前面一个字符刚好出现了 n 次。

比如， /a{2}/ 不会匹配“candy”中的'a',但是会匹配“caandy”中所有的 a，以及“caaandy”中的前两个'a'。

{n,}

n 是一个正整数，匹配前一个字符至少出现了 n 次。

例如，/a{2,}/ 匹配 "aa", "aaaa" 和 "aaaaa" 但是不匹配 "a"。

{n,m}

n 和 m 都是整数。匹配前面的字符至少 n 次，最多 m 次。如果 n 或者 m 的值是 0，这个值被忽略。

例如，/a{1, 3}/ 并不匹配“cndy”中的任意字符，匹配“candy”中的 a，匹配“caandy”中的前两个 a，也匹配“caaaaaaandy”中的前三个 a。注意，当匹配”caaaaaaandy“时，匹配的值是“aaa”，即使原始的字符串中有更多的 a。

[xyz]

一个字符集合。匹配方括号中的任意字符，包括转义序列。你可以使用破折号（-）来指定一个字符范围。对于点（.）和星号（*）这样的特殊符号在一个字符集中没有特殊的意义。他们不必进行转义，不过转义也是起作用的。

例如，[abcd] 和 [a-d] 是一样的。他们都匹配"brisket"中的‘b’,也都匹配“city”中的‘c’。/[a-z.]+/ 和/[\w.]+/与字符串“test.i.ng”匹配。

[^xyz]

一个反向字符集。也就是说， 它匹配任何没有包含在方括号中的字符。你可以使用破折号（-）来指定一个字符范围。任何普通字符在这里都是起作用的。

例如，[^abc] 和 [^a-c] 是一样的。他们匹配"brisket"中的‘r’，也匹配“chop”中的‘h’。

[\b]

匹配一个退格 (U+0008)。（不要和\b混淆了。）

\b

匹配一个词的边界。一个词的边界就是一个词不被另外一个“字”字符跟随的位置或者前面跟其他“字”字符的位置，例如在字母和空格之间。注意，匹配中不包括匹配的字边界。换句话说，一个匹配的词的边界的内容的长度是 0。（不要和 [\b] 混淆了）

使用"moon"举例：
/\bm/匹配“moon”中的‘m’；
/oo\b/并不匹配"moon"中的'oo'，因为'oo'被一个“字”字符'n'紧跟着。
/oon\b/匹配"moon"中的'oon'，因为'oon'是这个字符串的结束部分。这样他没有被一个“字”字符紧跟着。
/\w\b\w/将不能匹配任何字符串，因为在一个单词中间的字符永远也不可能同时满足没有“字”字符跟随和有“字”字符跟随两种情况。


备注： JavaScript 的正则表达式引擎将特定的字符集定义为“字”字符。不在该集合中的任何字符都被认为是一个断词。这组字符相当有限：它只包括大写和小写的罗马字母，十进制数字和下划线字符。不幸的是，重要的字符，例如“é”或“ü”，被视为断词。


\B

匹配一个非单词边界。匹配如下几种情况：

  • 字符串第一个字符为非“字”字符
  • 字符串最后一个字符为非“字”字符
  • 两个单词字符之间
  • 两个非单词字符之间
  • 空字符串

例如，/\B../匹配"noonday"中的'oo', 而/y\B../匹配"possibly yesterday"中的’yes‘

\cX

当 X 是处于 A 到 Z 之间的字符的时候，匹配字符串中的一个控制符。

例如，/\cM/ 匹配字符串中的 control-M (U+000D)。

\d

匹配一个数字。等价于 [0-9]。

例如， /\d/ 或者 /[0-9]/ 匹配"B2 is the suite number."中的'2'。

\D

匹配一个非数字字符。等价于 [^0-9]。

例如， /\D/ 或者 /[^0-9]/ 匹配"B2 is the suite number."中的'B' 。

\f

匹配一个换页符 (U+000C)。

\n

匹配一个换行符 (U+000A)。

\r

匹配一个回车符 (U+000D)。

\s

匹配一个空白字符，包括空格、制表符、换页符和换行符。等价于 [\f\n\r\t\v\u0020\u00a0\u1680\u180e\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]。

例如，/\s\w*/ 匹配"foo bar."中的' bar'。

经测试，\s不匹配"\u180e"，在当前版本 Chrome(v80.0.3987.122) 和 Firefox(76.0.1) 控制台输入/\s/.test("\u180e") 均返回 false。

\S

匹配一个非空白字符。等价于 [^\f\n\r\t\v\u0020\u00a0\u1680\u180e\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]。

例如，/\S\w*/ 匹配"foo bar."中的'foo'。

\t

匹配一个水平制表符 (U+0009)。

\v

匹配一个垂直制表符 (U+000B)。

\w

匹配一个单字字符（字母、数字或者下划线）。等价于 [A-Za-z0-9_]。

例如，/\w/ 匹配 "apple," 中的 'a'，"$5.28,"中的 '5' 和 "3D." 中的 '3'。

\W

匹配一个非单字字符。等价于 [^A-Za-z0-9_]。

例如，/\W/ 或者 /[^A-Za-z0-9_]/ 匹配 "50%." 中的 '%'。

\n

在正则表达式中，它返回最后的第 n 个子捕获匹配的子字符串 (捕获的数目以左括号计数)。

比如 /apple(,)\sorange\1/ 匹配"apple, orange, cherry, peach."中的'apple, orange,' 。

\0

匹配 NULL（U+0000）字符，不要在这后面跟其他小数，因为 \0<digits> 是一个八进制转义序列。

\xhh

匹配一个两位十六进制数（\x00-\xFF）表示的字符。

\uhhhh

匹配一个四位十六进制数表示的 UTF-16 代码单元。

\u{hhhh}或\u{hhhhh}

（仅当设置了 u 标志时）匹配一个十六进制数表示的 Unicode 字符。


5.JavaScript编程

while 循环

while (i<5)

{

    x=x + "The number is " + i + "<br>";

    i++;

}

for循环

cars=["BMW","Volvo","Saab","Ford"];

var i=0;

for (;cars[i];)

{

    document.write(cars[i] + "<br>");

    i++;

}

条件语句

var d=new Date().getDay();  
switch (d)  
{  
  case 0:x="今天是星期日";  
  break;  
  case 1:x="今天是星期一";  
  break;  
  case 2:x="今天是星期二";  
  break;  
  case 3:x="今天是星期三";  
  break;  
  case 4:x="今天是星期四";  
  break;  
  case 5:x="今天是星期五";  
  break;  
  case 6:x="今天是星期六";  
  break;  
}
6.JavaScript 验证API

checkValidity()

如果 input 元素中的数据是合法的返回 true，否则返回 false。

setCustomValidity()

设置 input 元素的 validationMessage 属性，用于自定义错误提示信息的方法。使用 setCustomValidity 设置了自定义提示后，validity.customError 就会变成 true，checkValidity 总是会返回 false。如果要重新判断需要取消自定义提示，方式如下：setCustomValidity('') setCustomValidity(null) setCustomValidity(undefined)

checkValidity() 方法

约束验证 DOM 属性

属性

描述

validity

布尔属性值，返回 input 输入值是否合法

validationMessage

浏览器错误提示信息

willValidate

指定 input 是否需要验证

Validity 属性

input 元素的 validity 属性包含一系列关于 validity 数据属性:

属性

描述

customError

设置为 true, 如果设置了自定义的 validity 信息。

patternMismatch

设置为 true, 如果元素的值不匹配它的模式属性。

rangeOverflow

设置为 true, 如果元素的值大于设置的最大值。

rangeUnderflow

设置为 true, 如果元素的值小于它的最小值。

stepMismatch

设置为 true, 如果元素的值不是按照规定的 step 属性设置。

tooLong

设置为 true, 如果元素的值超过了 maxLength 属性设置的长度。

typeMismatch

设置为 true, 如果元素的值不是预期相匹配的类型。

valueMissing

设置为 true，如果元素 (required 属性) 没有值。

valid

设置为 true，如果元素的值是合法的。

7.JavaScript 事件
avaScript 事件

HTML 事件是发生在 HTML 元素上的事情。

当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。

HTML 事件

HTML 事件可以是浏览器行为，也可以是用户行为。

以下是 HTML 事件的实例：

  • HTML 页面完成加载
  • HTML input 字段改变时
  • HTML 按钮被点击

通常，当事件发生时，你可以做些事情。

在事件触发时 JavaScript 可以执行一些代码。

HTML 元素中可以添加事件属性，使用 JavaScript 代码来添加 HTML 元素。

单引号:

<some-HTML-element some-event='JavaScript 代码'>

双引号:

<some-HTML-element some-event="JavaScript 代码">
<button onclick="displayDate()">现在的时间是?</button>