慢慢更新~
上部分代码 https://download.csdn.net/download/qq_43668996/89066620
中部分代码： https://download.csdn.net/download/qq_43668996/89094028
第一章 入门
1.1 HTML&CSS&JavaScript
HTML 主要用于网页主体结构的搭建
CSS 主要用于页面元素美化
JavaScript 主要用于页面元素的动态处理
1.2 HTML 超文本标记语言
超文本：本质为文本文件，但可以通过标签把网页、图片、视频引入网页
标记语言：由一系列 ’标签‘ 组成，没有常量、变量、流程控制、异常处理、IO等功能。每个标签都有他固定的含义和确定的页面显示效果。
双标签：有开始标签和结束标签一起构成一个完整的标签，开始标签和结束标签之间的部分叫做文本标签体，也成为：标签体。 如： <p>文本标签体</p>
单标签：仅一对尖括号。 如：<input type="text" name="username"/>
属性：控制标签表现效果，功能。 如：<a href="http://www.xxx.com">show detail</a>
href="网址"就是属性，href是属性名，"网址"是属性值。
1.3HTML基础结构
基本语法结构如下 在html文件输入 “ ！” 感叹号回车自动生成基本结构
<!--
注释框
-->
<!DOCTYPE html>
<html>
<head>
<title>第一个页面</title>
<meta charset="UTF-8"/>
</head>
<body>
<h1>标签体（标题一格式）</h1>
</body>
</html> 根标签：<html> </html> 所有其他标签都要在这个标签中间。html根标签下有两个一级子标签，头标签<head> </head>、体标签<body> </body>。
<head> </head>头标签：定义那些不直接展示到页面主体上，但是又重要的内容。 如 ：字符集 、css引入 、 js引入 、、、
<body> </body>体标签：定义要展示到主体上的内容。
<h1> 标签体</h1> 标题一，将标签体展示为标题格式。
<title>标签体</title> 将标签体定义为页面title
<meta charset="utf-8"/> 指定浏览器对文件解码的字符集，不要忘记最后的 /
<!DOCTYPE html> （声明文件为html文件，一般会自动生成，不写也行）
1.4 html文件解析和展示
aaa.html文件放到服务器中，由浏览器负责解析和展示。自己学习时html文件放到本地效果也是一样的。
浏览器通过网络访问服务器中的html文件，服务器中的html文件响应到浏览器，并由浏览器进行解析并展示
1 html文件是浏览器负责解析和展示
2 html文件是纯文本文件，普通编辑工具都可以编辑 。如 记事本，vscode, idea
使用记事本：桌面创建.txt文件，修改后缀为.html 则自动生成浏览器可展示的网页。
1.5 专业词汇
标签 tag ： 一对尖括号 <>
属性 attribute : 对标签特征进行设置的一种方法，一般在开始标签中定义
文本 text : 双标签中间的文字
元素 element : 开始标签+属性+文本+结束标签 称为一个元素
1.6 语法细节
1 根标签有且只能有一个
2 无论是双标签还是单标签都需要正确关闭
3 标签可以嵌套但不能交叉嵌套
4 注释语法为<！-->，注意不能嵌套
5 属性必须有值 ，值必须加引号，H5中属性名和值相同时可以省略属性值
6 HTML中不严格区分字符串使用单双引号
7 HTML标签不严格区分大小写，但是不能大小写混用
8 HTML中不允许自定义标签名，强行自定义则无效
1.7 开发工具插件安装
Auto Rename Tag 自动修改标签对插件
Chinese Language Pack 汉化包
HTML CSS Support HTML CSS 支持
IntelliJ IDEA Keybindings IDEA快捷键支持
Live Server 实时加载功能的小型服务器
open in browser 通过浏览器打开当前文件的插件
Prettier-Code formatter 代码美化格式化插件
Vetur VScode中的ue工具插件
vscode-icons 文件显示图标插件
vue3 snipptes 生成UE模板插件
vue official Vue.3语言特征插件 （原插件Vue language features 改名了）
第二章 HTML 常见标签
2.1 标题、段落、换行
先打开你要存放文件的路径，在路径下新建.html文件，输入 “ ！” 感叹号回车自动生成基本结构，接着 在body标签中进行。
标题 ：有六级， h1-h6 ，分别对应不同大小。 格式： <h1> 标题一 </h1>
段落 ： 包裹住一个自然段的内容，可以区分不同段落，不使用则多个自然段融合为一个自然段 。 格式： <p> 一个自然段内容 </p>
换行 ：使文字换行。 格式： <br/>段落换行符 <hr/>有横线分割的换行符 。不加 / 也可以
<!--
注释框
-->
<!DOCTYPE html>
<html>
<head>
<title>第一个页面</title>
<meta charset="UTF-8"/>
</head>
<body>
<!--
标题 h1-h6 <h1> 标题一 </h1>
段落 p <p> 一个自然段内容 </p>
换行 br hr <br/>段落换行符 <hr/>有横线分割的换行符 。不加 / 也可以
-->
<h1>标签体（标题一格式）</h1>
<h2>标签体（标题二格式）</h2>
<h3>标签体（标题三格式）</h3>
<h4>标签体（标题四格式）</h4>
<h5>标签体（标题五格式）</h5>
<h6>标签体（标题六格式）</h6>
<p>
段落一<br/>
段落一
</p>
<p>
段落二<hr/>
段落二
</p>
</body>
</html>在浏览器展示html结果：点击右下角 Go Live ，或者复制html文件绝对地址到浏览器回车，即可以展示。
2.2 在线帮助文档
2.3 列表标签
有序列表 ：包裹住的列表前，带序号展示
无序列表 ：包裹住的列表前，无序号，带 · 展示 。
嵌套：有序、无序列表可嵌套使用，注意嵌套位置。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
有序列表 ol
无线列表 ul
列表项 li
-->
<!--有序列表格式-->
<ol>
<li>内容1</li>
<li>内容2</li>
<li>内容3</li>
<li>内容4</li>
</ol>
<!--无序列表格式-->
<ul>
<li>内容1</li>
<li>内容2</li>
<li>内容3</li>
<li>内容4</li>
</ul>
<!--有序无序，嵌套列表格式-->
<ol>
<li>内容1</li>
<ul>
<li>内容1</li>
<li>内容2</li>
<li>内容3</li>
<li>内容4</li>
</ul>
<li>内容2</li>
<li>内容3</li>
<li>内容4</li>
</ol>
</body>
</html>
2.4 超链接
超链接标签格式： <a href="地址" target="打开方式" > 超链接名 </a>
- href ： 定义跳转地址
1 完整的url 网页地址
2 相对路径 以当前文件所在路径为出发点去找定义的目标路径资源
./ 当前所在路径，可不加
../当前路径的上一层路径
3 绝对路径
以项目起始文件夹为根目录，寻找定义的绝对路径下的资源。
- target ： 定义目标地址打开方式
_self 在当前窗口打开目标地址
_blank 开启新窗口打开目标地址
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
超链接标签 <a href="http...." target="...." > 超链接名 </a>
href 定义跳转地址
1 完整的url 网页地址
2 相对路径 以当前文件所在路径为出发点去找定义的目标路径资源
./ 当前所在路径，可不加
../当前路径的上一层路径
3 绝对路径
以项目起始文件夹为根目录，寻找定义的绝对路径下的资源。
target 定义目标地址打开方式
_self 在当前窗口打开目标地址
_blank 开启新窗口打开目标地址
-->
<a href="http://www.atguigu.com/" target="_blank">超链接名字 </a>
<!--相对地址-->
<a href="02标题段落换行.html" target="_blank">02标题段落换行 </a>
<!--绝对地址 (/表示根目录HTML) -->
<a href="/demo1-html/03有序无序列表.html"target="_blank">--绝对地址--</a>
</body>
</html>2.5 图片标签
图片加载时，本地 ctrl +alt +a 截图的.bmp文件在vscode以及网页中均无法正常显示，换后缀为.png .jpg 也不行。从浏览器下载到本地的图片能够正常显示。暂时不清楚原因.......
图片标签格式：<img src="图片路径" width="宽" height="高" title="图片名" alt="加载失败提示"/>
src 定义图片路径
1 url
2 相对路径
3 绝对路径
title 定义鼠标悬停时提示文字
alt 定义图片加载失败提示文字
width 设定宽度，如高度未指定则高度根据固定比例自动调整
height 设定高度，如宽未指定则宽度根据固定比例自动调整
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
img
src 定义图片路径
1 url
2 相对路径
3 绝对路径
title 定义鼠标悬停时提示文字
alt 定义图片加载失败提示文字
width 设定宽度，如高度未指定则高度根据固定比例自动调整
-->
<!--url-->
<img src="https://img0.baidu.com/it/u=3773090653,2338589126&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500" title="底特律" alt="dtr"/>
<br/>
<!--绝对路径-->
<img src="/demo1-html/img/12.bmp" title="底特律" alt="dtr"/>
<br/>
<!--相对路径-->
<img src="./img/34.jpeg" width="300px" height="300px" title="底特律" alt="dtr"/>
<br/>
</body>
</html>2.6 表格标签
table 整张表格
thead 表头
tbody 表体
tfoot 表尾
tr 表格中的一行
td 行中的一个单元格
th 自带加粗居中效果的td
<h3 style="text-align: center;"> 中style="text-align: center;"表示文字居中显示
<table border="1px" style="margin: 0px auto;width: 300px;"> 中 border="1px" 表示显示像素为1的边框、 style="margin: 0px auto;width: 300px;"表示显示表格居中，且宽度300像素
快捷键：ctrl+d 向下复制当前行、网页中点击 F12 打开开发者
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
table 整张表格
thead 表头
tbody 表体
tfoot 表尾
tr 表格中的一行
td 行中的一个单元格
th 自带加粗居中效果的td
<h3 style="text-align: center;"> 中style="text-align: center;"表示文字居中显示
<table border="1px" style="margin: 0px auto;width: 300px;"> 中 border="1px" 表示显示像素为1的边框、
style="margin: 0px auto;width: 300px;"表示显示表格居中，且宽度300像素
-->
<h3 style="text-align: center;">评分表</h3>
<table border="1px" style="margin: 0px auto;width: 300px;">
<tread>
<tr>
<th>排名</th>
<th>姓名</th>
<th>分数</th>
</tr>
</tread>
<tbody>
<tr>
<td>1</td>
<td>小红</td>
<td>99</td>
</tr>
<tr>
<td>2</td>
<td>小蓝</td>
<td>98</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>表尾</td>
<td>表尾</td>
<td>表尾</td>
</tr>
</tfoot>
</table>
</body>
</html>
2.7 表格跨行跨列
<td rowspan="3">向下扩展,占3行</td> rowspan 行扩展，表示向下扩展行数
<td colspan="2">向右扩展占两行</td> colspan 列扩展，表示向右扩展列数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
<td rowspan="3">向下扩展,占3行</td> rowspan 行扩展，表示向下扩展行数
<td colspan="2">向右扩展占两行</td> colspan 列扩展，表示向右扩展列数
-->
<h3 style="text-align: center;">评分表</h3>
<table border="1px" style="margin: 0px auto;width: 400px;">
<tr>
<th>排名</th>
<th>姓名</th>
<th>分数</th>
<th>备注</th>
</tr>
<tr>
<td>1</td>
<td>小红</td>
<td>99</td>
<td rowspan="3">向下扩展,占3行</td>
</tr>
<tr>
<td>2</td>
<td>小蓝</td>
<td>98</td>
</tr>
<tr>
<td>表尾</td>
<td>表尾</td>
<td>表尾</td>
</tr>
<tr>
<td colspan="2">向右扩展占两行</td>
<td>表尾</td>
<td>表尾</td>
</tr>
</table>
</body>
</html>
2.8 表单标签
表单标签，可以实现让用户在界面上输入各种信息并提交的一种标签，是向服务端发送数据主要的方式之一
- form标签，表单标签，其内部用于定义可以让用户输入信息的表单项标签
action，form标签的属性之一，用于定义信息提交的服务器的地址
method，form标签的属性之一，用于定义信息的提交方式
get get方式，数据会缀到url后，以？作为参数开始的标识，提交键值对，多个键值对参数用&隔开
post post方式，数据会通过请求体发送，不会在缀到url后
- input标签，主要的表单项标签，可以用于定义表单项
name，input标签的属性之一，用于定义提交的参数名，即键值对的key
type，inputi标签的属性之一，用于定义表单项类型
text文本框
password密码框
submit提交按钮
reset重置按钮
表单项标签一定要定义name属性，该属性用于明确提交时的参数名，即键值对的key
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
form 表单标签
action 定义数据的提交地址
1 url
2相对路径
3绝对路径
method 定义数据的提交方式
GET
参数会以键值对形式放在ur1后提交，多个键值对用&分割
ur1?key=value&key=value&key=value
POST
表单项标签
表单项标签一定要定义name属性，该属性用于明确提交时的参数名
表单项还需要定义value属性，该属性用于明确提交的时的实参
input
type 输入信息的表单项类型
text 单行普通文本框
password 密码框
submit 提交按钮 :将输入内容以键值对形式提交给目的地
reset 重置按钮 ：清空输入框内容
-->
<form action="09welcome.html" method="get">
用户名：<input type="text" name="username" value=""/>
密码框: <input type="password" name="password" value=""/>
<br>
<input type="submit" value="登录"/>
<input type="reset" value="重置按钮"/>
</form>
</body>
</html>2.9 get 、post方法
GET
1 参数会以键值对形式放在ur1后提交，多个键值对用&分割 ur1?key=value&key=value&key=value
2 数据直接暴露在地址栏上，相对不安全
3 地址栏长度有限制，提交的数据量不大
4 地址栏上，只能是字符，不能提交文件
5 相比于get效率高一些
POST
1 参数默认不放在url后
2 数据不会直接暴露在地址栏上，相对安全
3 数据是单独打包通过请求体发送，提交的数据量比较大
4 请求体中，可以是字符，也可以字节数据，可以提交文件
5 相对于get效率略低一些
get方法提交数据可在url后看到
post方法提交数据可在开发者模式看到
2.10 布局标签
div 标签俗称"块"，主要用于划分页面结构，做页面布局。
span 标签俗称"层"，主要用于划分元素范围，配合CSS做页面元素样式的修饰，设置宽高大多数时候无效，可用来在一段文字中包裹其中的一些文字进行字体设置。
css设置样式的，通过元素的style属性进行设置
style="样式名：样式值；样式名：样式值；..."
border 边线的宽度(..px) solid(边线样式，实线) red(边线颜色);
width 宽
height 高
margin 10px(上下边线间隔距离) auto(左右边线距离，自动调节)
background-color: antiquewhite(背景颜色);
font-size: 30px(字体大小);color: aqua(字体颜色);font-weight: bold(加粗);
块元素：自己独占一行的元素块元素的cSS样式的宽 高等等往往都是生效的
div h1-h6
行内元素：不会自己独占一行的元素 行内的cSS样式的宽 高等等很多都是不生效的
span img a
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body style="background-color: antiquewhite;">
<!--
css设置样式的
通过元素的style属性进行设置
style="样式名：样式值；样式名：样式值；..."
border 边线的宽度(..px) solid(边线样式，实线) red(边线颜色);
width 宽
height 高
margin 10px(上下边线间隔距离) auto(左右边线距离，自动调节)
background-color: antiquewhite(背景颜色);
font-size: 30px(字体大小);color: aqua(字体颜色);font-weight: bold(加粗);
块元素：自己独占一行的元素块元素的cSS样式的宽 高等等往往都是生效的
div h1-h6
行内元素：不会自己独占一行的元素 行内的cSS样式的宽 高等等很多都是不生效的
span img a
-->
<div style="border: 1px solid red; width: 500px; height: 200px;margin: 10px auto;background-color: beige;">123</div>
<div style="border: 1px solid red; width: 500px; height: 200px;margin: 10px auto;background-color: blanchedalmond;">456</div>
<div style="border: 1px solid red; width: 500px; height: 200px;margin: 10px auto;background-color: azure;">789</div>
<div style="border: 1px solid red; width: 500px; height: 200px;margin: 10px auto;background-color: azure;">
<span style="font-size: 30px;color: aqua;font-weight: bold;">span</span>
789</div>
<span style="font-size: 30px;color: aqua;font-weight: bold;border:1px solid rebeccapurple;width:300px;height: 300px;">span</span>
</body>
</html>
2.11 特殊字符
有特殊含义的符号：字符实体。 对于htm1代码来说，某些符号是有特殊含义的，如果想显示这些特殊符号，需要进行转义
转义内容可查找：w3school 在线教程
对于 转义起始符 & ，则需要用 & 来显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
有特殊含义的符号：字符实体
对于htm1代码来说，某些符号是有特殊含义的，如果想显示这些特殊符号，需要进行转义
转义内容可查找：w3school 文档
对于 转义起始符 & ,则需要用 & 来显示
-->
<h1>一级标题<h1>
<hr>
&gt;
</body>
</html>第三章 CSS的使用
Css 层叠样式表 英文全称：(Cascading Style Sheets))能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，简单来说，美化页面
3.1 css 引入方式
行内式，通过元素开始标签的stylej属性引入，样式语法为 样式名：样式值；样式名：样式值；
width: 60px; 宽
height: 40px; 高
background-color: aquamarine; 背景色
color: aliceblue; 字体色
font-size: 20px; 字体粗细
font-family: '隶书'; 字体类型
border: 2px solid green; 边线：粗细 类型 颜色
border-radius: 5px; 边角扇形半径
引入方式
方式1 行内式
通过元素的style/属性引入样式
语法：style=“样式名：样式值；样式名：样式值；...."
缺点：1 代码复用度低不利于维护
2 css样式代码和htm1结构代码交织在一起，影响阅读，影响文件大小，影响性能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--方式一-->
<input type="button" value="按钮"
style="
width: 60px;
height: 40px;
background-color: rgb(4, 78, 53);
color: rgb(250, 252, 253);
font-size: 20px;
font-family: '隶书';
border: 2px solid green;
border-radius: 5px;
"/>
</body>
</html>方式2 内嵌式
通过在head标签中的style标签定义本页面的公共样式
通过选择器确定样式的作用元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*元素选择器，通过标签名确定样式的作用元素*/
input{
width: 60px;
height: 40px;
background-color: rgb(4, 78, 53);
color: rgb(250, 252, 253);
font-size: 20px;
font-family: '隶书';
border: 2px solid green;
border-radius: 5px;
}
</style>
</head>
<body>
<!--方式一-->
<input type="button" value="按钮"/>
</body>
</html>方式3 外部样式表
将css代码单独放入一个.css文件中，哪个html需要这些代码就在head中通过link标签引入。 link格式 <link href="css样式地址 " rel="样式类型（此处为style类型）">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="css/btu.css" rel="stylesheet"> <!-- 指向css文件地址 rel 指向引用文件类型,此处为style样式 -->
</head>
<body>
<!--方式一-->
<input type="button" value="按钮"/>
</body>
</html>3.2 css选择器
1 元素选择器
根据标签的名字确定样式的作用元素
语法：head标签中定义，用style标签包裹，
标签名{}
缺点：某些同名的元素不希望使用某些样式，某些不同名的元素也使用该样式，都无法协调
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*1 元素选择器，通过标签名确定样式的作用元素*/
input{
width: 60px;
height: 40px;
background-color: rgb(4, 78, 53);
color: rgb(250, 252, 253);
font-size: 20px;
font-family: '隶书';
border: 2px solid green;
border-radius: 5px;
}
</style>
</head>
<body>
<input type="button" value="按钮"/>
<input type="button" value="按钮"/>
<input type="button" value="按钮"/>
<input type="button" value="按钮"/>
</body>
</html>2 id选择器
根据标签的id值确定样式的作用元素
一般每个元素都有id属性，但是在一个页面中，id的值不应该相同，id具有唯一性
语法：head标签中定义，用style标签包裹，
#id值{}
缺点：id值有唯一性，样式只能作用到一个元素上
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*2 id选择器 根据标签的id值确定样式的作用元素*/
#btn2{
width: 60px;
height: 40px;
background-color: rgb(181, 204, 196);
color: rgb(250, 252, 253);
font-size: 20px;
font-family: '隶书';
border: 2px solid green;
border-radius: 5px;
}
</style>
</head>
<body>
<input id="btn1" type="button" value="按钮"/>
<input id="btn2" type="button" value="按钮"/>
<input id="btn3" type="button" value="按钮"/>
<input id="btn4" type="button" value="按钮"/>
</body>
</html>3 class选择器,根据元素的class属性值确定样式的作用元素
元素的的class属性值可以重复而且一个元素的class属性可以有多个值
语法：head标签中定义，用style标签包裹，
.class属性值{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*3 class选择器,根据元素的class属性值确定样式的作用元素*/
.shapeclass{
width: 90px;
height: 70px;
background-color: rgb(181, 204, 196);
border: 2px solid rgb(187, 198, 187);
border-radius: 5px;
}
.fontclass{
color: rgb(250, 252, 253);
font-size: 40px;
font-family: '隶书';
}
</style>
</head>
<body>
<input type="button" value="按钮"/>
<input type="button" value="按钮"/>
<input type="button" value="按钮"/>
<input class="shapeclass fontclass" type="button" value="按钮"/>
</body>
</html>3.3 css 浮动
CSS的Flot(浮动)使元素脱离文档流，按照指定的方向（左或右发生移动），直到它的外边缘碰到包含框或另一个浮动框的边框为止。
· 浮动设计的初衷为了解决文字环绕图片问题，浮动后一定不会将文字挡住，这是设计初衷。
· 文档流是是文档中可显示对象在排列时所占用的位置/空间，而脱离文档流就是在页面中不占位置了。
浮动原理
· 当把框1向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘
· 当框1向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框2，使框2从视图中消失。如果把所有三个框都向左移动，那么框1向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。
浮动时各个框可能重叠，但文字不会被框遮挡，而会被挤出被遮挡框。
定义格式： float:left; 向左浮动
float:right; 向右浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.outerDiv{
width: 900px;
height: 900px;
border: 2px solid green;
border-radius: 6px;
}
.innerDiv{
width: 100px;
height: 100px;
border: 1px solid blue;
/*display: inline;定义是块元素block 还是行内元素 inline，行内元素的高宽设置不一定生效。因此可使用浮动*/
}
.d1{
background-color: aqua;
float: left;}
.d2{
background-color: rgb(48, 116, 116);
float: left;}
.d3{
background-color: rgb(22, 28, 28);
float: left;}
</style>
</head>
<body>
<div class="outerDiv">
<div class="innerDiv d1">diva</div>
<div class="innerDiv d2">divb</div>
<div class="innerDiv d3">divc</div>
</div>
</body>
</html>3.4 css定位
position属性指定了元素的定位类型。
- 这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。
- 元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。
left 距离左侧距离值 描述 absolute 生成绝对定位的元素，相对static定位以外第一个父元素进行定位, ,原位置让出，会被侵占。
元素的位置通过"left","top","right'"以及"bottom"属性进行规定fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。原位置让出，会被侵占。
元素的位置通过"Ieft","top","right"以及"bottom"属性进行规定relative 生成相对定位的元素，相对于其正常位置进行定位。原位置不让出，不会被侵占。
因此，"Ieft:20"会向元素的LEFT位置添加20像素。static 默认值。没有定位，元素出现在正常的流中（忽略top,bottom,left,right或者z-index声明）
right 距离右侧距离
top 距离上侧距离
bottom 距离下侧距离
ps:一般只给上下其中一个设置值，避免冲突。左右同理。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.innerDiv{
width: 100px;
height: 100px;
border: 1px solid blue;
/*display: inline;定义是块元素block 还是行内元素 inline，行内元素的高宽设置不一定生效。因此可使用浮动*/
}
.d1{
background-color: aqua;
float: left;
position: relative;
left: 30px;
top: 30px;
}
.d2{
background-color: rgb(48, 116, 116);
float: left;}
.d3{
background-color: rgb(22, 28, 28);
float: left;}
/*
position:
static 默认
absolute 绝对
relative 相对相对元素原本的位置,原位置不让出，不会被侵占
fixed 相对相对浏览器窗口,原位置让出，会被侵占
left 距离左侧距离
right 距离右侧距离
top 距离上侧距离
bottom 距离下侧距离
ps:一般只给上下其中一个设置值，避免冲突。左右同理。
*/
</style>
</head>
<body>
<div class="innerDiv d1">diva</div>
<div class="innerDiv d2">divb</div>
<div class="innerDiv d3">divc</div>
</body>
</html>3.5 css盒子模型
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
· CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距(margin),边框(border),填充(padding),和实际内容(content)
· 说明：
Margin(外边距） - 清除边框外的区域，外边距是透明的。
Border(边框） - 围绕在内边距和内容外的边框。
Padding(内边距） - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像
格式：
margin: 0px auto; 外边距整体设置，直接跟距离设置，多距离空格分隔。
一个距离则同时设置上下左右外边距，
两个距离则前者设置上下后者设置左右，
四个距离则按顺时针先上后右再下后左
auto表示自动分配，一般可用来设置居中
margin-top:10px; /*上外边距*/
margin-bottom: 20px; /*下外边距*/
margin-left: 30px; /*左外边距*/
margin-right: 40px; /*右外边距*/
padding: 0px 0px; 外边距整体设置，直接跟距离设置，多距离空格分隔。
一个距离则同时设置上下左右外边距，
两个距离则前者设置上下后者设置左右，
四个距离则按顺时针先上后右再下后左
padding 使用auto 无效。
padding-top:10px ; /*上内边距*/
padding-bottom: 20px; /*下内边距*/
padding-left: 30px; /*左内边距*/
padding-right: 40px; /*右内边距*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.outerDiv{
width: 900px;
height: 900px;
border: 2px solid green;
border-radius: 6px;
margin: 0px auto;/*外边距整体设置,
一个距离则同时设置上下左右外边距，
两个距离则前者设置上下后者设置左右，
四个距离则按顺时针先上后右再下后左
auto表示自动分配，一般可用来设置居中*/
}
.innerDiv{
width: 100px;
height: 100px;
border: 1px solid blue;
/*display: inline;定义是块元素block 还是行内元素 inline，行内元素的高宽设置不一定生效。因此可使用浮动*/
float: left;
margin-top:10px; /*上外边距*/
margin-bottom: 20px; /*下外边距*/
margin-left: 30px; /*左外边距*/
margin-right: 40px; /*右外边距*/
padding-top:10px ; /*上内边距*/
padding-bottom: 20px; /*下内边距*/
padding-left: 30px; /*左内边距*/
padding-right: 40px; /*右内边距*/
}
.d1{
background-color: aqua;
}
.d2{
background-color: rgb(48, 116, 116);
}
.d3{
background-color: rgb(22, 28, 28);
}
</style>
</head>
<body>
<div class="outerDiv">
<div class="innerDiv d1">diva</div>
<div class="innerDiv d2">divb</div>
<div class="innerDiv d3">divc</div>
</div>
</body>
</html>第四章 JavaScript
一 js 简介
1.1 js 简介
Javascript是一种由Netscape(网景)的Livescript发展而来的原型化继承的面向对象的动态类型的区分大小写的 客户端脚本语言，主要目的是为了解决服务器端语言，遗留的速度问题，为客户提供更流畅的浏览效果。当时服务端需要对数据进行验证，由于网络速度相当缓慢,只有28.8kbps，验证步骤浪费的时间太多。于是Netscape的浏览器Naigato加入了Javascript，提供了数据验证的基本功能。ECMA-262 是正式的JavaScript 标准。这个标准基于JavaScript (Netscape)和JScript (Microsoft)。ECMA-262 的开发始于 1996 ，在 1997 年7月，ECMA会员大采纳了它的首个版本。这个标准由 ECMA 组织发展和维护。JavaScript 的正式名称是"ECMAScript”。Javascript的组成包含ECMAScript.DOM、BOM。JS是一种运行于浏览器端上的小脚本语句,可以实现网页如文本内容动,数据动态变化和动画特效等,JS有 如下特点
- 脚本语言 G++、Java等语言先编译后执行， JavaScript不会产生编译出来的字节码文件，而是在程序oJavaScript是一种解释型的脚本语言。不同于q、(的运行过程中对源文件逐行进行解释。
- 基于对象 JavaScript是一种基于对象的脚本语言，它不仅可以创建对象，也能使用现有的对象。但是面向对象的三大特性:[封装]、[继承[多态]中，JavaScript能够实现封装，可以模拟继承，不支持多态，所以它不是一门面向对象的编程语言。
- 弱类型 JavaScript中也有明确的数据类型，但是声明一个变量后它可以接收任何类型的数据，并且会在程序执行过程中根据上下文自动转换类型。
- 事件驱动 JavaScript是一种采用事件驱动的脚本语言，它不需要经过Web服务器就可以对用户的输入做出响应
- 跨平台性 JavaScript脚本语言不依赖于操作系统，仅需要浏览器的支持。因此一个JavaScript脚本在编写后可以带到任意机器上使用，前提是机器的浏览器支持JavaScript脚本语言。目前JavaScript已被大多数的浏览器所支持
1.2 js组成部分
1.3 JS的引入方式
1 内部脚本方式引入
内嵌式 ：在head中通过一对script标签定义脚本代码。不在head中定义也生效，但是推荐在head中定义，比较规范。
格式：<script >
function suprise1(){}
function suprise2(){}
</script>
function 函数名（）{} 定义函数
<button class="btn1" οnclick="suprise1()">点我有惊喜</button>
onclick 指定调用函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.btn1{
width: 30px;
height: 30px;
font-family: '隶书';
font-size: 24px;
background-color:wheat ;
border: 1px;
border-radius: 2px;
color: blue;
}
</style>
<script>
/*
1 js如何声明函数？ java中函数 public void suprise(）{} function suprise(){}
2 函数如何和单击按钮的行为绑定到一起？
3 如何弹窗提示？
*/
function suprise(){
//弹窗提示
alert("hello 我是惊喜")
}
</script>
</head>
<body>
<button class="btn1" onclick="suprise()">点我有惊喜</button>
</body>
</html>2 引入外部脚本文件
在head中通过一对script标签引入外部js文件。不在head中定义也生效，但是推荐在head中定义，比较规范。
格式：<script src="js/button.js" type="text/javascript"></script>
src 指定外部脚本文件路径
type 指定脚本类型
<button class="btn1" οnclick="suprise()">点我有惊喜</button>
onclick 指定调用函数
外部脚本需保存在 .js文件中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.btn1{
width: 30px;
height: 30px;
font-family: '隶书';
font-size: 24px;
background-color:wheat ;
border: 1px;
border-radius: 2px;
color: blue;
}
</style>
<script src="js/button.js" type="text/javascript"></script>
</head>
<body>
<button class="btn1" onclick="suprise()">点我有惊喜</button>
</body>
</html> 注意：
1 一个html中可以有多个script标签。
2 一对script标签不能在引入外部js文件的同时定义内部脚本
3 script标签如果用于引入外部js文件，中间最好不要有任何字符包括空格和换行 4 script标签如果用于定义内部脚本，则一对script标签中可定义多个函数
二 js的数据类型和运算符
2.1 js变量和数据类型
- JS是弱类型的，不是没有类型，是变量在声明时不指定类型，赋值时才确定类型，JS中的变量的声明统统使用 var
int i =10 var i=10
String str "asdf" var str "asdf"
- JS中的常见的数据类型
数值类型 number 整数 小数
字符串类型 string
布尔类型 boolean
引用类型 Object
function类型 function
命名未赋值 undefined 值 undefined
赋予nu11 Object 值 null
- 判断数据类型的运算符 typeof
- js中 使用var声明变量的特点
1 弱类型变量，可以统一声明成var
2 var声明的变量可以再次声明
3 变量可以使用不同的数据类型多次赋值
4 JS的语句可以以；结尾，也可以不用；结尾
5 变量标识符严格区分大小写
6 标识符的命名规则参照JAVA
7 如果使用了一个没有声明的变量，那么运行时会报uncaught ReferenceError:**is not defined at in.....
8 如果一个变量只声明，没赋值，那么值是undefined
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
/*
JS是弱类型的，不是没有类型，是变量在声明时不指定类型，赋值时才确定类型，JS中的变量的声明统统使用van
int i =10 var i=10
String str "asdf" var str "asdf"
JS中的常见的数据类型
数值类型 number 整数 小数
字符串类型 string
布尔类型 boolean
引用类型 Object
function类型 function
命名未赋值 undefined 值 undefined
赋予nu11 Object 值 null
判断数据类型的运算符 typeof
*/
/*
js中 使用var声明变量的特点
1 弱类型变量，可以统一声明成var
2 var声明的变量可以再次声明
3 变量可以使用不同的数据类型多次赋值
4 JS的语句可以以；结尾，也可以不用；结尾
5 变量标识符严格区分大小写
6 标识符的命名规则参照JAVA
7 如果使用了一个没有声明的变量，那么运行时会报uncaught ReferenceError:**is not defined at in
8 如果一个变量只声明，没赋值，那么值是undefined
*/
var i=10;
var str="asdf";
var i=true //重复声明不同类型赋值
console.log(i) //向控制台输出信息
var I
console.log(I)/区分大小写
</script>
</head>
<body>
</body>
</html>2.2 js运算符
1 算数 + - * / %
除零 Infinity
模零 NaN not a number
2 复合算数 ++ -- += -= *= /= %=
除零 Infinity
模零 NaN not a number
3 关系 > < >= <= != == ===
== 如果两端的数据类型不一致，会尝试将两端的数据都转换为number再对比
'123' -> 123
true -> 1
false -> 0
=== 如果两端的数据类型不一致，直接返回fa1se,相同则会继续对比
4 逻辑 || &&
5 条件 条件表达式？值1 ：值2
6 位 | & ^ << >> >>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
/*
1 算数 + - * / %
除零 Infinity
模零 NaN not a number
2 复合算数 ++ -- += -= *= /= %=
除零 Infinity
模零 NaN not a number
3 关系 > < >= <= != == ===
== 如果两端的数据类型不一致，会尝试将两端的数据都转换为number再对比
'123' -> 123
true -> 1
false -> 0
=== 如果两端的数据类型不一致，直接返回fa1se,相同则会继续对比
4 逻辑 || &&
5 条件 条件表达式？值1 ：值2
6 位 | & ^ << >> >>
*/
console.log(10/2);
console.log(10/4);
console.log(10/0);
console.log(10%0);
var i=10
console.log(1 =1)
console.log(1 ='1')
console.log(1 =true)
console.log(1 ==1)
console.log(1 =='1')
console.log(1 ==true)
</script>
</head>
<body>
</body>
</html>三 js流程控制和函数
3.1 js分支结构
- if 结构
这里的结构几乎和JAVA中的一样，需要注意的是
if() 中的非空字符串会被认为是true
if() 中的非零数字会被认为是true if() 中的非空对象会判断为 true
- switch 结构 与 if 结构同理
- var monthStr=prompt("请输入月份") prompt返回的结果就是用户在窗口上输入的值，以string类型返回的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
/*根据月份输出季节*/
var monthStr=prompt("请输入月份")
/*prompt返回的结果就是用户在窗口上输入的值，以string类型返回的*/
console.log(typeof monthstr)
//字符串转换成整数
var month =Number.parseInt(monthStr)
console.log(typeof month)
if(month ==12 || month ==1 || month ==2){
console.log("冬天皮肤变好了")
}else if(month >=3 &month < 5){
conso1e.log("春眠不觉晓")
}else if(month >6 &month <8){
console.log("夏天蚊子咬")
}else if(month >9 &month <11){
console.log("蚊子死翘翘")}
else{
console.log("客官不可以")}
// 1 非空字符串 会判断为 true
// 2 非空对象会判断为 true
// 3 非number 会判断为 true
if(2.1){
console.log(true)}
else{
console.log(false)}
</script>
</head>
<body>
</body>
</html>3.2 js循环结构
- while 循环 几乎和java一致
document.write() 相当于print() ,可将信息输出到网页页面上
/*打印99乘法表*/
var i=1;
while(i<=9){
var j=1;
while(j <=i){
document.write(j+'*'+i+'='+'*'+j+" ");
j++:
}
document.write("<hr/>");
i++；
}
- for 循环 几乎和java一致
不一致：
java语法：for (var city： cityarray) 语句获得的city为数组cityarray中索引对应的元素
js语法 ： for (var city in cityarray) 语句获得的city不是数组cityarray中索引对应的元素，而是索引序列数。
循环获取数组中元素需要：
for(var index in arr){
document.write("<li>"+arr[index]+"</li>")
document.write("</ul>")}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var arr=["北尔","上海","广州"]
document.write("<ul>")
for(var index =0;index<arr.length;index++){
document.write("<li>"+arr[index]+"</li>")
document.write("</ul>")}
document.write("<ul>")
for(var index in arr){
document.write("<li>"+arr[index]+"</li>")
document.write("</ul>")}
</script>
</head>
<body>
</body>
</html>3.3 js函数结构
- 函数声明的语法
1 function函数名(){)
2 var函数名=function(){}
- 和java相比有如下特点
1 没有访问修饰符
2 没有返回值类型也没有void如果有值要返回，则直接return即可
3 没有异常列表抛出
4 调用方法时，实参和形参可以在数量上不一致，在方法内部可以通过arguments获得调用时的实参。
5 函数也可以作为参数传递给另一个方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
/*
函数声明的语法
1 function函数名(){)
2 var函数名=function(){}
和java相比有如下特点
1 没有访问修饰符
2 没有返回值类型也没有void如果有值要返回，则直接return即可
3 没有异常列表工
4 调用方法时，实参和形参可以在数量上不一致，在方法内部可以通过arguments获得调用时的实参
5 函数也可以作为参数传递给另一个方法
*/
/* 声明函数 */
/*function sum(a,b){
return a+b
}*/
var sum = function(a,b){
return a+b
}
/*调用函数接收结果*/
var result = sum(10,20)
console.log(result)
var sum = function (a,b){
console.log(arguments)
return a+b }
function add(getSum ){
return getSum(20,30)
}
//调用函数接收结果
var result = add(sum)
console.log(result)
</script>
</head>
<body>
</body>
</html>四 js的对象和json
4.1 js声明对象的语句
创建对象的语法
- 方式1 new object() 。对象的属性以及方法可后加，不用专门定义。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var person = new Object()
//对象的属性？添加属性
person.name="张三"
person.age=10
//对象的方法？添加方法
person.eat=function(food){
console.log(this.age+'岁'+this.name+'正在吃'+food)
}
//访问属性
console.log(person.name)
console.log(person.age)
//调用方法
person.eat("火锅")
</script>
</head>
<body>
</body>
</html>- 方式2 {属性名：属性值，......，函数名：function(){}} 。其中属性名可用 “” 引起来，不引也可以，建议引上，和后续学习有关
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
// 方式2 {属性名：属性值，......，函数名：function(){}} 。其中属性名可用 “” 引起来，不引也可以，建议引上，和后续学习有关
var person2={
"name":"李四",
"age":10,
"eat":function(food){
console.log(this.age+'岁'+this.name+'正在吃'+food)
}
}
//访问属性
console.log(person.name)
console.log(person.age)
//调用方法
person.eat("火锅")
</script>
</head>
<body>
</body>
</html>4.2 json格式
JSON格式 一个特定的字符串语法结构，JSON格式的字符串，在前后端都可以很方便的和对象
之间进行转换。前后端数据交互，使用json。
JSON格式的语法
var personStr='{"属性名"："属性值"，"属性名"："属性值","属性名（值为对象）"：{}"，"属性名(值为数组)"：["","",""]，"属性名(数组元素为对象)"：[{},{},{}]}'
属性名必须用""包裹上
属性值字符串必须用""包好，数字可以不处理
属性不涉及函数
这是一个json格式的字符串
var personStr = '{"name":"张三","age":10,"dog":{"dname":"小花"},"love":["在","了","的"],"frinds":[{"name":"sd","age":23},{"name":"er","age":34}]}'
- 在客户端
通过 JSON.parse() 将一个 json格式的字符串转换为一个js对象
通过 JSON.stringify() 将一个js对象转换为JSON串
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
//这是一个json格式的字符串
var personStr = '{"name":"张三","age":10,"dog":{"dname":"小花"},"love":["在","了","的"],"frinds":[{"name":"sd","age":23},{"name":"er","age":34}]}'
//通过JSON.parse()将一个json格式的字符串转换为一个js对象
var person = JSON.parse(personStr)
console.log(personStr)
console.log(person.name)
console.log(person.dog.dname)
console.log(person.frinds[0].name)
//通过JSON.stringify() 将一个js对象转换为JSON串
var personStr2 = JSON.stringify(person)
console.log(personStr2)
</script>
</head>
<body>
</body>
</html>- 在服务器端
使用ObjectMapper来进行 java对象和JSON字符串的相互转换。首先需要创建 ObjectMapper对象 。
ObjectMapper objectMapper = new ObjectMapper();
将Person对象转换成一个字符串，调用objectMapper.writeValueAsString（）
String personStr = objectMapper.writeValueAsString(person);
将一个字符串转换成Person对象 ，调用objectMapper.readValue(参数一, 参数二);
Person person = objectMapper.readValue(personStr, Person.class);
//提供字符串personStr,以及字符串要转化的类的类型
(1) 安装 jar 包
直接下载 https://download.csdn.net/download/qq_43668996/88950496
(2) 创建对象（Dog，Person，TestJson）
package com.atguigu.pojo;
import java.util.Objects;
public class Dog {
private String name;
public Dog() {
}
public Dog(String name) {
this.name = name;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
@Override
public boolean equals(Object o) {
if (this == o) return true;
if (o == null || getClass() != o.getClass()) return false;
Dog dog = (Dog) o;
return Objects.equals(name, dog.name);
}
@Override
public int hashCode() {
return Objects.hash(name);
}
}
package com.atguigu.pojo;
import java.util.Objects;
public class Person {
private String name;
private Integer age;
private Dog dog;
public Person() {
}
public Person(String name, Integer age, Dog dog) {
this.name = name;
this.age = age;
this.dog = dog;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public Integer getAge() {
return age;
}
public void setAge(Integer age) {
this.age = age;
}
public Dog getDog() {
return dog;
}
public void setDog(Dog dog) {
this.dog = dog;
}
@Override
public boolean equals(Object o) {
if (this == o) return true;
if (o == null || getClass() != o.getClass()) return false;
Person person = (Person) o;
return Objects.equals(name, person.name) && Objects.equals(age, person.age) && Objects.equals(dog, person.dog);
}
@Override
public int hashCode() {
return Objects.hash(name, age, dog);
}
}
package com.atguigu.test;
import com.atguigu.pojo.Dog;
import com.atguigu.pojo.Person;
import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import org.junit.Test;
public class TestJSON {
@Test
public void testWriteJson() throws JsonProcessingException {
//实例化 Person对象 将Person对象转换为JSON串
Dog dog = new Dog("sd");
Person person = new Person("za",23,dog);
//将Person对象转换成一个字符串 Gson Jackson Fastjson
ObjectMapper objectMapper = new ObjectMapper();
String personStr = objectMapper.writeValueAsString(person);
System.out.println(personStr);
}
@Test
public void testReadJson() throws JsonProcessingException {
String personStr = "{\"name\":\"za\",\"age\":23,\"dog\":{\"name\":\"sd\"}}";
//将一个字符串转换成Person对象 Gson Jackson Fastjson
ObjectMapper objectMapper = new ObjectMapper();
Person person = objectMapper.readValue(personStr, Person.class);//提供字符串personStr,以及字符串要转化的类的类型
System.out.println(person);
}
}
4.3 json和map、list、array之间的转化问题
与4.2对象类似。
使用ObjectMapper来进行三者和JSON字符串的相互转换。首先需要创建ObjectMapper对象
ObjectMapper objectMapper = new ObjectMapper();
将其转换成一个字符串，调用objectMapper.writeValueAsString（）
String Str = objectMapper.writeValueAsString(需转化对象);
注意：map 与类对象 转化为json格式相似
list与array 转化为json格式相似
package com.atguigu.test;
import com.atguigu.pojo.Dog;
import com.atguigu.pojo.Person;
import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import org.junit.Test;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
public class TestJSON {
@Test
public void testMapToJSON() throws JsonProcessingException {
Map data = new HashMap();
data.put("a","value");
data.put("b","value");
//将Map类型对象转换成一个json字符串
ObjectMapper objectMapper = new ObjectMapper();
String stringMap = objectMapper.writeValueAsString(data);
System.out.println(stringMap);
}
@Test
public void testListToJSON() throws JsonProcessingException {
List data = new ArrayList();
data.add("a");
data.add("b");
//将List类型对象转换成一个json字符串
ObjectMapper objectMapper = new ObjectMapper();
String stringMap = objectMapper.writeValueAsString(data);
System.out.println(stringMap);
}
@Test
public void testArrayToJSON() throws JsonProcessingException {
String[] data = {"A","B"};
//将String[]类型对象转换成一个json字符串
ObjectMapper objectMapper = new ObjectMapper();
String stringMap = objectMapper.writeValueAsString(data);
System.out.println(stringMap);
}
}
4.4 js常见对象
包括 数组、 Boolean对象、 Date对象、Math对象、Number 、String
参考链接 JavaScript Array 对象 | 菜鸟教程
五 事件的绑定
5.1 什么是事件
HTML事件可以是浏览器行为，也可以是用户行为。当这些一些行为发生时，可以自动触发对应的JS函数的运行，我们称之为事件发生JS的事件驱动指的就是行为触发代码运行的这种特点。
5.2 常见事件
鼠标事件
键盘事件
表单事件
5.3 常见事件演示
1 事件的绑定方式
（1）通过元素的属性绑定 on***
（2）通过D0M编程动态绑定
注意事项：
一个事件可以同时绑定多个函数
一个元素可以同时绑定多个事件
2 常见的事件
（1）鼠标事件 onclick ondbclick onmouseover onmousemove onmouseleave
（2）键盘事件 onkeydown onkeyup
（3）表单事件 onfocus onblur onchange
onchange 获取改变后的值 利用 this.value ,如value内容被指定则返回指定内容、未被指定则返回标签获得的文本
3 select 下拉框
option 下拉框中选项条
4 form表单
οnsubmit="testSubmit()" 响应 submit 按钮，调用函数
οnreset="testReset()" 响应 reset 按钮，调用函数
5 弹窗的三种方式
alert()信息提示框
promopt()信息输入框
confirm()信息确认框
6 阻止组件的默认行为 (1) event.preventDefault();阻止组件的默认行为
(2) 返回 false 值,阻止。此方法需要在form表单中将函数返回的结果接着 return
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
<title>Document</title>
<script>
function fun1(){
// alert("单击了")
console.log("单击1")
}
function fun2(){
//alert("单击了2")
console.log("单击2")
}
function fun3(){
//alert("双击了")
console.log("单击3")
}
function fun4(){
console.log("鼠标悬停了")
}
function fun5(){
console.log("鼠标移动了")
}
function fun6(){
console.log("鼠标离开了")
}
function fun7(){
console.log("键盘按下")
}
function fun8(){
console.log("键盘抬起")
}
function testFocus(){
console.log("获得焦点")
}
function testBlur(){
console.log("失去焦点")
}
function testChange(value){
console.log("内容改变为"+value+"，且失去焦点时执行")
}
function testSubmit(){
/*
弹窗的三种方式
alert()信息提示框
promopt()信息输入框
confirm()信息确认框
*/
var flag = confirm("确认要提交表单吗？")
//在这里有机会阻止表单提交
//1 event.preventDefault();阻止组件的默认行为
//2 返回 false 值,阻止。此方法需要在form表单中将函数返回的结果接着 return
if(!flag){
//event.preventDefault();//阻止组件的默认行为
return false//返回一个false结果
}
return true
}
function testReset(){
alert("表单要重置了")
}
/*
1 事件的绑定方式
1 通过元素的属性绑定 on***
2 通过D0M编程动态绑定
注意事项：
1一个事件可以同时绑定多个函数
2一个元素可以同时绑定多个事件
2常见的事件
1 鼠标事件 onclick ondbclick onmouseover onmousemove onmouseleave
2 键盘事件 onkeydown onkeyup
3 表单事件 onfocus onblur onchange
onchange 获取改变后的值 利用 this.value ,如value内容被指定则返回指定内容、未被指定则返回标签获得的文本
select 下拉框
option 下拉框中选项条
form表单
onsubmit="testSubmit()" 响应 submit 按钮，调用函数
onreset="testReset()" 响应 reset 按钮，调用函数
*/
</script>
</head>
<body>
<!--
-->
<form action="01js引入方式.html" method="get" onsubmit="return testSubmit()" onreset="testReset()">
账号：<input type="text"
name="name"
onfocus="testFocus()"
onblur="testBlur()"
onchange="testChange()">
<br>
密码：<input type="password" name="password"><br>
<input type="reset" value="重置">
<input type="submit" value="注册">
选择籍贯：
<select onchange="testChange(this.value)">
<option value="1">北京</option><!--标签被指定值-->
<option>上海</option><!--标签被指定值-->
<option>广州</option>
</select>
</form>
<hr>
<input type="button"
value="按钮"
onclick="fun1"
onclick="fun2"
ondbclick="fun3"
>
<br>
<img src="/demo1-html/img/34.jpeg" onmouseover="fun4" onmousemove="fun5" onmouseleave="fun6">
<br>
<input type="text" onkeydown="fun7" onkeyup="fun8">
</body>
</html>5.4 dom 编程处理事件
（1）通过D0M编程动态绑定
//通过dom获取要操作的元素 document.getElementById("btn1")
var btn = document.getElementById("btn1")
//绑定一个单击事件
btn.οnclick=function(){
alert("按钮单击了")
}
注意事项：
1一个事件可以同时绑定多个函数
2一个元素可以同时绑定多个事件
（2）常见的事件
1 鼠标事件 onclick ondbclick onmouseover onmousemove onmouseleave
2 键盘事件 onkeydown onkeyup
3 表单事件 onfocus onblur onchange
4 页面加载事件 onload 在页面全部扫描完毕后，再执行onload事件
两种使用方式 1 在 <body onload = "函数"> 在body标签中定义onload
2 直接 使用 window.οnlοad=function(){} 定义页面加载完后执行内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
<title>Document</title>
<script>
/*
1 事件的绑定方式
1 通过元素的属性绑定 on***
2 通过D0M编程动态绑定
//通过dom获取要操作的元素 document.getElementById("btn1")
var btn = document.getElementById("btn1")
//绑定一个单击事件
btn.onclick=function(){
alert("按钮单击了")
}
注意事项：
1一个事件可以同时绑定多个函数
2一个元素可以同时绑定多个事件
2常见的事件
1 鼠标事件 onclick ondbclick onmouseover onmousemove onmouseleave
2 键盘事件 onkeydown onkeyup
3 表单事件 onfocus onblur onchange
4 页面加载事件 onload 在页面全部扫描完毕后，再执行onload事件
两种使用方式 1 在 <body onload = "函数"> 在body标签中定义onload
2 直接 使用 window.onload=function(){} 定义页面加载完后执行内容
*/
window.onload=function(){
//通过dom获取要操作的元素
var btn = document.getElementById("btn1")
//绑定一个单击事件
btn.onclick=function(){
alert("按钮单击了")}
}
function ready(){
//通过dom获取要操作的元素
var btn = document.getElementById("btn1")
//绑定一个单击事件
btn.onclick=function(){
alert("按钮单击了")}
}
</script>
</head>
<body onload="ready()">
<button id="btn1">按钮</button>
<script>
//通过dom获取要操作的元素
var btn = document.getElementById("btn1")
//绑定一个单击事件
btn.onclick=function(){
alert("按钮单击了")
}
</script>
</body>
</html>六 BOM 编程
6.1 什么是BOM
- BOM是Browser Object Model的简写，即浏览器对象模型。
- B0M由一系列对象组成，是访问、控制、修改浏览器的属性和方法（通过wdow对象及属性的一系列方法摔制浏览器行为的一种编程）
- B0M没有统一的标准（每种客户端都可以自定标准）。
- BOM编程是将浏览器窗口的各个组成部分抽象成各个对象，通过各个对象的AP操作组件行为的一种编程
- BOM编程的对象结构如下
window顶级对象，代表整个浏览器窗口
■location对象 window对象的属性之一，代表浏览器的地址栏
■history对象 window对象的属性之一，代表浏览器的访问历史
■screen对象 window对象的属性之一，代表屏幕
■navigator对象 window对象的属性之一，代表浏览器软件本身
■document对象 window对象的属性之一，代表浏览器窗口目前解析的htm文档
■console对象 window对象的属性之一，代表浏览器开发者工具的控制台
■localStorage对象 window对象的属性之一，代表浏览器的本地数据持久化存储
■sessionStorage对象 window对象的属性之一，代表浏览器的本地数据会话级存储， 不能长时间存储
window对象API
window对象属性APi
通过windowi对象及其属性的API、控制浏览器的属性和行为
6.2 window对象的常见属性（了解）
6.3 window对象的常见方法（了解）
6.4 通过BOM编程控制浏览器行为演示
window 对象是由浏览器提供给我们使用的，无需自己new
window. 可省略不写
- 三种弹窗方式
alert
prompt
confirm
- 定时任务
setTimeout 指定时间后执行函数任务
格式：window.setTimeout(function(){console.log("hello")},2000)
- history窗口的访问历史
history.back //向后翻页
history.forward() //向前翻页
history.go(1) //向前翻几页，可自定义
- location
location.href="http://www.atguigu.com" //修改地址栏中的url
- sessionStorage 用于存储一些会话级数据 (浏览器关闭数据清除)
setItem 通过键值对的形式存储的信息
getItem 通过键值对的形式获取存储的信息
removeItem 通过键值对的形式清除存储的信息
- localStorage 用于存储一些持久级数据 (浏览器关闭数据还在)
setItem 通过键值对的形式存储的信息
getItem 通过键值对的形式获取存储的信息
removeItem 通过键值对的形式清除存储的信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function fun1(){
window.alert("hi")
}
function fun2(){
var a = window.prompt("请输入")
console.log(a)
}
function fun3(){
var a = window.confirm("确定？")
console.log(a)
}
function fun4(){
window.setTimeout(function(){
console.log("hello")
},2000)
}
function funA(){
window.history.back //向后翻页
}
function funB(){
window.history.forward() //向前翻页
// window.history.go(1) //向前翻几页，可自定义
}
function funC(){
location.href="http://www.atguigu.com" //修改地址栏中的url
}
function funD(){
//向sessionStorage存储数据
sessionStorage.setItem("keya","valueA")
//向localStorage存储数据
localStorage.setItem("keyb","valueB")
}
function funE(){
//通过键值对的形式获取存储的信息
console.log(sessionStorage.getItem("keya"))
console.log(localStorage.getItem("keyb"))
}
function funF(){
//通过键值对的形式清除存储的信息
sessionStorage.removeItem("keya")
localStorage.removeItem("keyb")
}
</script>
</head>
<body>
<button onclick="fun1()">信息提示框</button>
<button onclick="fun2()">信息输入框</button>
<button onclick="fun3()">信息确认框</button>
<hr>
<button onclick="fun4()">两秒后行向控制台打印hello</button>
<button onclick="funA()">向后翻页</button>
<a href="11dom编程处理事件.html">dom</a>
<button onclick="funB()">向前翻页</button>
<hr>
<button onclick="funC()">尚硅谷</button>
<hr>
<button onclick="funD()">存储数据</button>
<button onclick="funE()">获取数据</button>
<button onclick="funF()">清除数据</button>
</body>
</html>其中会话储存、本地储存可在Application中找到
七 DOM编程
7.1 什么是DOM编程
简单来说：DOM(Document Object Model))编程就是使用document对象的AP完成对网页HTML文档进行动态修改，以实现网页数据和样式动态变化效果的编程
- document对象代表整个html文档，可用来访问页面中的所有元素，是最复杂的一个dom对象，可以说是学习好dom编程的关键所在。
- 根据HTML代码结构特点，document对象本身是一种树形结构的文档对象。
7.2 获取页面元素的几种方式
- 获得document dom树
window.document
- 从document中获取要操作的元素
1. 直接获取
通过id 获取元素 var el = document.getElementById("username")
通过标签名获取多个元素 els = document.getElementsByTagName("input")
通过name属性值获取多个元素 var els = document.getElementsByName("aaa")
通过class属性值获取多个元素 var els = document.getElementsByClassName("a")
2. 间接获取
var cs = div01.children//通过父元素获取全部子元素
var firstChild = div01.firstChild//通过父元素获取第一个子元素
var lastChild = div01.lastChild//通过父元素获取最后一个子元素
var parent = pinput.parentElement//通过子元素获取父元素
var previousBrother = pinput.previousElementSibling//获取当前元素前面的第一个元素
var nextBrother = pinput.nextElementSibling//获取当前元素后面的第一个元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function fun1(){
//获得document,通过id 获取元素
var el = document.getElementById("username")
console.log(el)
}
function fun2(){
//获得document,通过标签名获取多个元素
var els = document.getElementsByTagName("input")
for (var i=0;i<els.length; i++)
{console.log(tagname[i])}
}
function fun3(){
//获得document,通过name属性值获取多个元素
var els = document.getElementsByName("aaa")
for (var i=0;i<els.length; i++)
{console.log(tagname[i])}
}
function fun4(){
//获得document,通过class属性值获取多个元素
var els = document.getElementsByClassName("a")
for (var i=0;i<els.length; i++)
{console.log(tagname[i])}
}
function fun5(){
//先获取父元素
var div01=document.getElementById("div01")
//获取所有子元素
var cs=div01.children//通过父元素获取全部子元素
//打印所有子元素
for(var i=0;i<cs.length;i++){
console.log(cs[i])
}
console.log(div01.firstChild)//通过父元素获取第一个子元素
console.log(div01.lastChild)//通过父元素获取最后一个子元素
}
function fun6(){
//先获取子元素
var pinput=document.getElementById("password")
//获取所有子元素
console.log(pinput.parentElement)//通过子元素获取父元素
}
function fun7(){
//先获取子元素
var pinput=document.getElementById("password")
console.log(pinput.previousElementSibling)//获取当前元素前面的第一个元素
console.log(pinput.nextElementSibling)//获取当前元素后面的第一个元素
}
</script>
</head>
<body>
<div id="div01">
<input type="text" class="a" id="username" name="aaa"/>
<input type="text" class="b" id="password" name="aaa"/>
<input type="text" class="a" id="email"/>
<input type="text" class="b" id="address" />
</div>
<input type="text"/>
<input type="button" value="根据id获得指定元素" onclick="fun1()" id="btn01"/>
<input type="button" value="根据标签名获得多个元素" onclick="fun2()" id="btn02"/>
<input type="button" value="根据name属性值获取多个元素" onclick="fun3()" id="btn03"/>
<input type="button" value="根据class属性获取多个值" onclick="fun4()" id="btn04"/>
<input type="button" value="通过父元素获取子元素" onclick="fun5()" id="btn05"/>
<input type="button" value="通过子元素获取父元素" onclick="fun6()" id="btn06"/>
<input type="button" value="通过当前元素获取前面的兄弟元素" onclick="fun7()" id="btn07"/>
<input type="button" value="通过当前元素获取后面的兄弟元素" onclick="fun8()" id="btn08"/>
</body>
</html>7.3 操作元素属性
对元素进行操作
- 操作元素的属性 元素名.属性名=""
- 操作元素的样式 语法 元素.style.样式名 = "" 原始样式名中的"-"符号要转换驼峰式border-radius>borderRadius
- 操作元素的文本 元素名.innerText 只识别文本 元素名.innerHTML 识别文本和html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function changeAttribute(){
var in1 = document.getElementById("in1")
console.log(in1.type)
console.log(in1.value)
//修改属性值
in1.type = "button"
in1.value = "嗨"
}
function changeStyle(){
var in1 = document.getElementById("in1")
console.log(in1.type)
console.log(in1.value)
//语法 元素.style.样式名 = "" 原始样式名中的"-"符号要转换驼峰式border-radius>borderRadius
//修改样式
in1.style.color = "green"
in1.style.borderRadius = "8px"
}
function changeText(){
var div01 = document.getElementById("div01")
/*
语法：
元素名.innerText 只识别文本
元素名.innerHTML 识别文本和html代码
*/
div01.innerText = "嗨"
div01.innerHTML = "<h1>嗨<h1/>"
}
</script>
<style>
#in1{
color: red;
border-radius: 5px;
}
</style>
</head>
<body>
<input id="in1" type="text" value="hello">
<hr>
<button onclick="changeAttribute()">操作属性</button>
<button onclick="changeStyle()">操作样式</button>
<button onclick="changeText()">操作文本</button>
<div id = "div01">
hello
</div>
</body>
</html>
7.4 增删元素
- var element=document.createElement("元素名")//创建元素
- 父元素.appendChild(子元素) // 在父元素中追加子元素
- 父元素.insertBefore(新元素，参照元素) //在某个元素前增加元素
- 父元素.replaceChild(新元素,被替换的元素) // 用新的元素替换某个子子元素
- 元素.remove() // 删除当前元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function addCs(){
//创建新元素
var csli = document.createElement("li")
csli.id = "cs"
csli.innerText = "长沙"
//获取父元素
var cityul = document.getElementById("ul01")
//在父元素中追加子元素
cityul.append(csli)
}
function addBefore(){
//创建新元素
var csli = document.createElement("li")
csli.id = "cs"
csli.innerText = "长沙"
//获取父元素
var cityul = document.getElementById("ul01")
//获取参照元素
var cityCZ = document.getElementById("gz")
//在父元素中参照元素前追加子元素 cityul.insertBefore(追加元素,参照元素)
cityul.insertBefore(csli,cityCZ)
}
function replaceSz(){
//创建新元素
var csli = document.createElement("li")
csli.id = "cs"
csli.innerText = "长沙"
//获取父元素
var cityul = document.getElementById("ul01")
//获取参照元素
var cityCZ = document.getElementById("gz")
//在父元素中用新元素替换参照元素 cityul.insertBefore(新元素,被替换的元素)
cityul.insertBefore(csli,cityCZ)
}
function removeGz(){
//获取元素
var cityCZ = document.getElementById("gz")
//那个元素调用 remove ,那个元素被移除
cityCZ.remove()
}
function removeAll(){
//获取父元素
var cityul = document.getElementById("ul01")
//第一种方法 获取父元素第一个元素，并移除
while(cityul.firstChild!=null){
cityul.firstChild.remove()
}
//第二种方法 将父元素内容置空
cityul.innerHTML = ""
//第三种方法 将父元素移除（不建议使用，父元素移除之后增加也无法进行了）
cityul.remove()
}
</script>
</head>
<body>
<ul id = "ul01">
<li id = "bj">北京</li>
<li id = "sh">上海</li>
<li id = "sz">深圳</li>
<li id = "gz">广州</li>
</ul>
<button id = "btn01" onclick="addCs()"> 增加长沙</button>
<button id = "btn02" onclick="addBefore()"> 在广州前增加长沙</button>
<button id = "btn03" onclick="replaceGz()"> 替换广州</button>
<button id = "btn04" onclick="removeGz()"> 移除广州</button>
<button id = "btn05" onclick="removeAll()"> 清空列表</button>
</body>
</html>八 正则表达式
正则表达试是描述字符模式的对象。正则表达式用于对字符串模式匹配及检素替换，是对字符串执行模式匹配的强大工具。
- 语法
var patt=new RegExp(pattern,modifiers);
或者更简单的方式：
var patt=/pattern/modifiers;
具体规则可以参照下方链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
/*验证*/
//定义一个正则表达式
var reg = /a/
//自定义一个字符串
var str = "hello world!"
//校验是否符合正则规则 //是否含有 a 字符 正则表达式.test(校验字符串)
console.log(reg.test(str))
/*匹配 g 全局的意思*/
var reg = /o/g //是否含有 o 字符,g表示查找全局
var str = 'hello world!'
//匹配字符串，无 g 只返回第一个符合要求的 ,有 g 返回所有符合要求的 字符串.match(正则表达式)
var result = str.match(reg)
console.log(result)
/*替换 g 全局的意思 i 表示忽略大小写*/
var reg = /o/gi //是否含有 o 字符,g表示查找全局，i 表示忽略大小写
var str = 'hello world!'
//匹配字符串，无 g 只返回第一个符合要求的 ,有 g 返回所有符合要求的 字符串.match(正则表达式)
var newStr = str.replace(reg,'@')
console.log(newStr)
/* ^ 表示以..为开头 $ 表示以..为结尾 */
var reg = /^a$/ //表示以a 开头，以a结尾的字符串
// + 指至少出现一次 ?表示出现0个或1个 *表示出现0个或多个 {a,b}表示出现a到b次 [] 表示一位
</script>
</head>
<body>
</body>
</html>
5964
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
