学习python第十一周学习总结
HTML前端
1.什么是前端？
与用户直接打交道的操作界面都可以称之为是前端
2.什么是后端？
不直接与用户打交道的内部真正执行核心业务逻辑的代码程序
3.什么是HTML?
超文本标记语言，HTML,是一种创建网页的标记语言
本质上是浏览器的规则，我们按照规则写网页，浏览器根据规则渲染我们的网页，是一种标记语言，不是一种编程语言，它使用标签来描述页面
4.前端的学习流程
前端三剑客：HTML、css、js
5.浏览器访问报错原因
我们编写的服务器发送的数据浏览器不识别，原因是每个人服务端数据的格式千差万别，浏览器无法自动识别，没有按照浏览器固定的格式发送
浏览器发送的强求数据格式肯定没有问题，因为别人早就封装好了
问题出在我们自己写的服务端的响应数据格式
HTTP协议（重点）
1.什么是HTTP协议
规定了浏览器与服务端之间数据交互的方式及其他事项
如果我们开发的时候不遵循该协议的话，那么浏览器就无法识别我们的网站
2.HTTP四大特性
1.基于请求响应：服务端永远不会主动给客户端发送消息，必须是客户端先发请求
2.基于TCP、IP作用于应用层的协议
3.无状态：不会保存客户端的状态信息，服务端不会记录之前的信息
4.无连接、短链接：对方向我发送请求之后，我把东西传输以后就断开了连接，下次再找我的时候需要带着我的IP地址重新来连接
3.数据格式
1.请求数据格式
请求首行：'GET / HTTP/1.1\R\N'
GET就是请求方式，后面是他遵循的协议名称，协议版本
请求头：从Host到Accept-Language就是请求头
一大堆K:V键值对
换行：\r\n
请求体：GET请求没有请求体，携带一些敏感的数据，比如：密码、身份证
2.响应数据格式
响应首行：响应状态码
请求头：从Host到Accept-Language就是响应头
一大堆K:V键值对
换行：\r\n
请求体：一般情况下就是浏览器需要展示给用户看的数据
4.响应状态码
利用数字来表示一些复杂的情况说明（用数字来表示一串中文意思，类似于暗号）
1XX:服务端已经接受到了数据正在处理 你可以继续发送数据也可以等待
2XX:200 OK请求成功 服务端返回了相应的数据
3XX:重定向(原本想访问A页面 但是自动跳转到了B页面)
4XX:403没有权限访问 404请求资源不存在
5XX:服务器内部错误，比如：服务器掉了、进水了、爆炸了等
5.自定义状态码
后端写给前端的状态码，告诉前端的人，各个状态码是什么意思
一般是以10000开头
Html本质（搭建）
初始版本就是简单的发送一些数据，进阶版本就可以发送更多的东西
1.TCP协议默认是流式性协议，在发生发送消息的时候可以将协议名称、协议版本与要发送的内容一起写成一句发送，也可以分开写成俩句分别发送
sock.send(b'HTTP/1.1 200 ok\r\n\r\nhello word!')
sock.send(b'HTTP/1.1 200 OK\r\n\r\n')
sock.send(b'hello word!!')
2.它也支持文件的发送
sock.send(b'HTTP/1.1 200 OK\r\n\r\n')
with open(b'aaa.txt', 'rb') as f:
sock.send(f.read())
3.发送的文件里可以写HTML的一些标签
Html相关知识
1.HTML简介
1.超文本标记语言（Hypertext Markup Language, HTML）是一种用于创建网页的标记语言。
是所有浏览器展示的页面必备的!!!
2.本质上是浏览器可识别的规则，我们按照规则写网页，浏览器根据规则渲染我们的网页。对于不同的浏览器，对同一个标签可能会有不同的解释。（兼容性问题）
3.浏览器展示的界面我们也称之为HTML页面 存储HTML语言的文件后缀一般是.html
'超文本'：超文本只是意味着“文本中的文本”。文本中有一个链接，是一个超文本。每当您单击指向新网页的链接时，您都单击了超文本。超文本是一种将两个或多个网页（HTML文档）相互链接的方法。
'标签语言'：标签语言是一种计算机语言，用于将布局和格式约定应用于文本文档。标签语言使文本更具交互性和动态性。它可以将文本转换为图像，表格，链接等。
HTML没有任何的逻辑 所见即所得
'网页'： 网页是一种通常用HTML编写并由网络浏览器翻译的文档。可以通过输入URL来识别网页。网页可以是静态或动态类型。
因此，HTML是一种基于文本的标记语言，告诉浏览器如何在互联网上显示图像，字体和其他多媒体元素。它用于在样式的帮助下创建有吸引力的网页，并且在Web浏览器上以漂亮的格式查看。HTML文档由许多HTML标签组成，每个HTML标签包含不同的内容。仅在HTML的帮助下，我们可以创建静态网页。
2.Html文件结构解释说明
1.HTML的注释语法
<!--注释内容-->
2.HTML文件结构
<html> 所有的代码都必须写在html标签内部
<head></head> head内的数据一般都不是给用户看的
<body></body> body内的数据就是浏览器展示给用户看的
</html>
3.HTML标签的分类
1.单标签(自闭和标签)
<img/>、<input>等
2.双标签
<a></a>、<p></p>等
"""HTML代码是不讲究缩进的 我们只是习惯了python的缩进语法"""
4.HTML文档说明
<!-- 在使用编程工具创建的时候就会自动编写文档结构-->
1.<!DOCTYPE html> :声明为HTML文档
2.<meta charset="UTF-8"> :默认编码
3.<html>,</html> :是文档开始标记和结束的标记。是HTML页面的根元素，在他们之间是文档的头部(head)和主体(body)
4.<head>,</head> :定义了HTML文档的开头部分。它们之间的内容不会在浏览器的文档窗口显示。包含了文档的元(meta)数据。
5.<title>,</title> :定义了网页标题，在浏览器标题栏显示。
6.<body>,</boby> :之间的文本是可见的网页主体内容。
注意：对于中文网页需要使用 <meta charset="utf-8"> 声明编码，否则会出现乱码。有些浏览器会设置 GBK 为默认编码，则你需要设置为 <meta charset="gbk">。
3.标签
1.head内常见标签
title 控制标签页小标题
style 内部支持编写CSS，控制body里面的颜色、大小、位置等样式
link 引入外部CSS文件
script 内部支持编写JS代码 还可以通过src属性引入外部JS文件
meta 通过内部属性的不同可以有很多功能
<meta name="keywords" content="填写一些关键字 提升网页被搜索的概率">
<meta name="description" content="填写一些网页的简介">
2.body内基本标签
h1~h6 标题标签
p 段落标签
hr 分割线标签
u 下划线
i 斜体
S 删除线
b 加粗线
3.块级标签与行内标签
块级标签：一个标签独占一行
h1~h6 p hr br
行内标签：内部文本多大就占多大
u i s b
4.body内布局标签
1.块级标签是可以通过css调整为不独占一行
2.标签之间很多时候可以嵌套
块级可以嵌套任何类型的标签
p标签虽然是块级标签，但是不能套块级标签
行内标签只能嵌套行内标签
5.body常见标签
1.a标签 链接标签
href 可以填写网址 点击自动跳转
href还可以填写其他标签的id值 实现锚点功能
target 可以控制是否新建页面跳转
_self
_blank
2.img标签 图片标签
src 填写图片地址(网络地址 本地地址)
title 鼠标悬浮在图片上就会有提示信息
alt 图片加载失败提示的信息
height 调整图片的高度
width 调整图片的宽度
ps:width与height上述两个调整一个另外一个等比例缩放
body内基本符号
空格
> 大于号
< 小于号
& &
¥ ¥
® 注册
© 版权
标签俩大重要属性
这俩个属性都是用来快速定位需要操作的标签
1.id属性（一对一管理）
类似于身份证号，在同一个HTML页面上 id值不能重复
2.class属性（批量管理）
类似于分组 多个标签可以拥有相同的class值
列表标签
无序列表
<ul>
<li>python</li>
<li>golang</li>
<li>linux</li>
</ul>
页面上有规则排列的横向或者竖向的多个元素几乎使用的都是无序列表
有序列表
<ol type="I" start="10">
<li>第一项</li>
<li>第二项</li>
<li>第二项</li>
</ol>
标题列表
<dl>
<dt>标题1</dt>
<dd>内容1</dd>
<dt>标题2</dt>
<dd>内容1</dd>
<dd>内容2</dd>
</dl>
表格标签
<table>
<thead>
<tr>
<th>序号</th>
<th>用户名</th>
<th>密码</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>jason</td>
<td>123</td>
</tr>
</tbody>
</table>
'''
属性
boder 表格边框
cellpadding 内边距
cellspacing 外边距
rowspan 单元格竖跨多少行（可以在某一个tr\td上设置）
colspan 单元格横跨多少行（可以在某一个tr\td上设置）
width 像素 百分比（最好通过css来设置长宽）
'''
表单标签
表单用于向服务器传输数据，从而实现用户与Web服务器的交互
表单能够包含input系列标签，比如文本字段、复选框、单选框、提交按钮等等。
表单还可以包含textarea、select、fieldset和 label标签。
form表单:获取用户的数据并发送给后端(服务端)
eg:网站的登录、注册、验证码等...
能够获取用户输入(输入、选择、上传)的数据并发送给后端服务器
<form action="" method=""></form>
action属性
用于控制数据的提交地址 不写的话就是朝当前页面所在的地址提交
method属性
用于控制请求的方式(get\post)
表单使用原理
访问者在浏览有表单的网页时，可填写必需的信息，然后按某个按钮提交。这些信息通过Internet传送到服务器上。
服务器上专门的程序对这些数据进行处理，如果有错误会返回错误信息，并要求纠正错误。当数据完整无误后，服务器反馈一个输入完成的信息。
input输入的标签俩大重要的属性工作原理
获取用户输入的标签两大重要的属性
name属性
类似于字典的键
value属性
类似于字典的值
其实我们在input里输入的值就是value里面的值，我们在input框里所写的值都会被value所存储，然后点击提交按钮，后端通过每一个input的里面的name来识别收到的数据分别是哪个的值，所以，form表单在朝后端发送数据的时候 标签必须要有name 否则不会发送该标签的值
编写input解释器会出现黄色阴影问题
直接编写input会出现黄色阴影，是说明这么写不太规范，原因在于input需要结合lable一起使用
lable标签：解释说明这么标签将来是干什么的，里面的for属性是用来与input里面的id进行绑定的，绑定之后，他其实以后也是input的一部分，点击lable标签也就相当于点击了input标签。
方式1:lable包裹input并绑定id
<label for='input标签id值'>input标签</label>
方式2:label与input单独出现并绑定id
<label for="d1">username:</label>
<input type="text" id="d1">
前端基础之css
1.关于css的介绍
CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素，也就是给HTML标签修改样式。
当浏览器读取到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。
可能我们还会看到css3，后面这个数字指的是它的版本号
css语言开发的文件是以.css为后缀，通过在html文件中引入该css文件来控制html代码的样式（css语言代码也可以直接写在html文件中）
采用的语言是级联样式表 （Cascading Style Sheet），也属于标记语言。
2.css语法
1.每个css样式由俩个部分组成：选择器和声明，声明又包括属性和属性值，每个声明之后要以分号作为结束
2.语法结构
选择器 {
属性名1:属性值1;
属性名2:属性值2;
}
3.注释语法
/*注释内容*/
3.三种编写css的方式
css是来控制页面标签的样式，但是可以根据实际情况书写在不同的位置，放在不同位置有不同的专业叫法，可以分为行内式、内部式和外部式三种
1.head中style标签内部直接编写（学习阶段使用）
2.head中使用link标签去引入css文件（最正规）
3.直接在标签内部通过style属性编写（不推荐）
4.css四个基本选择器（标签选择器、类选择器、id选择器、通用选择器）
1.标签选择器：直接通过查找标签名来查找标签，然后进行设置它的样式
2.类选择器：通过编写class的值来查找标签，。class值
3.id选择器：通过设置id的值，查找id的值来查找标签，#id值
4.通用标签：*
5.css组合器
1.后代选择器
俩个选择器之间空客隔开，查找的是前面选择器获取到的标签内部所有符合空格后面选择器要求的标签
2.儿子选择器
俩个选择器之间大于号隔开，查找前面选择器获取到的标签内部第一层级符合大于号前面选择器要求的标签
3.毗邻选择器
俩个选择器之间加号隔开，查找div标签同级别下面紧挨着的一个所要求标签（弟弟）
4.弟弟选择器
俩个选择器之间~隔开，查找同级别下面所有的所要求的标签
6.属性选择器
所有标签除了有自己默认的1属性之外，还可以拥有自定义的任意属性
查找属性名含有name的标签
[属性名]{}
查找属性名并且有固定的值
[属性名=属性值]{}
查找某个标签的属性名并且属性值是固定的
标签[属性名=属性值]{}
7.css选择器分组与嵌套
1.当多个选择器查找到的标签需要调整相同的样式，那么可以合并
div,span,p{} 各个标签中间使用逗号隔开
2.并且合并的选择器彼此不干扰也没有类型的限制
div,#d1,.c1{}
3.不并列同样可以使用组合选择器
.c1 p() 查找class为c1的后代p标签
4.还可以在选择器基础之上添加额外的选择使得查找更精确
div#d1{}
div.c1{}
8.css选择器伪类选择器
:hover 鼠标悬浮在上面会发生变化
:focus 聚焦状态
:link 为访问状态
:active 选定的状态，鼠标点下去没有松开的时候的状态
9.css伪元素选择器
伪元素选择器可以用在解决标签浮动所带来的的负面影响 也可以用来做数据的防爬
<style>
p:first-letter{
/*设置第一个字的大小、颜色*/
font-size: 48px;
color: green;
}
p:before{
/*在文本前面添加信息*/
content:"歌词：";
color:salmon;
}
p:after{
/*在文本后面面添加信息*/
content:"结束了";
color: cornflowerblue;
}
</style>
<body>
<p>
想着你的感觉，有如风的缠绻，吹乱我的日夜，吹也吹不走你的容颜
</p>
</body>
10.css选择器优先级
1.相同选择器不同导入方式（相同距离优先）
1.相同选择器不同导入方式(相同距离优先)
选择器系统遵循就进原则 从上往下谁离标签更近谁说了算
就近原则
2.选择器不同的情况
行内 > id选择器 > 类选择器 > 标签选择器
!important
2.不同选择器不遵循就近原则>>>:优先级
不同选择器不遵循就近原则>>>:优先级
行内选择器 > id选择器 > 类选择器 > 标签选择器
!important
3.!importment
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>测试Css中的!Important区别</title>
</head>
<style type="text/css">
.testClass{
color:blue !important;
}
</style>
<body>
<div class="testClass" style="color:red;">
<!-- 虽然元素的style中有testClass类的定义，但是在上面的css定义中的用!important限定的定义却是优先级最高的-->
测试Css中的Important
</div>
</body>
</html>
11.字体样式
1.高度和宽度
width、height
块级标签才能设置宽度，行内标签的宽度由内容来决定
修改图片的的大小的时候，只修改一方面就好，不要宽和高同时进行修改，否则图片就会失真
2.字体大小
font-size: 99px
3.字重
font-weight
normal(默认值，标准粗细)、blod(粗体)、bolder(更粗)、lighter（更细）
4.文本颜色
1.十六进制值 - 如: ＃FF0000
2.一个RGB值 - 如: RGB(255,0,0)
3.颜色的名称 - 如: red
4.还有rgba(255,0,0,0.3)，第四个值为alpha, 指定了色彩的透明度/不透明度，它的范围为0.0到1.0之间。
5.文字属性
文字对齐
text-align 属性规定元素中的文本的水平对齐方式。
left 左边对齐
right 右对齐
center 居中对齐
justify 俩端对其
文字装饰
text-decoration 属性用来给文字添加特殊效果。
主要用于去除a标签默认的下划线
none 默认定义标准的文本。
underline 定义文本下的一条线。
overline 定义文本上的一条线。
line-through 定义穿过文本下的一条线。
inherit 继承父元素的text-decoration属性的值。
首行缩进
默认文字大小是16px 32像素：
p {
text-indent: 32px;
}
12.背景属性
1.背景颜色：background-color
2.背景图片：background: url("https://img0.baidu.com/it/u=2196653892,2406547462&fm=253&fmt=auto&app=120&f=JPEG?w=509&h=500");
3.背景重复
repeat(默认):背景图片平铺排满整个网页
repeat-x：背景图片只在水平方向上平铺
repeat-y：背景图片只在垂直方向上平铺
no-repeat：背景图片不平铺
4.图片位置
background-position:左右 上下;
5.指定位置
background-position:200px 200px;
6.左右上下居中
background-position:center center;
7.多个属性名前缀相同，可以简写
background:orange url('url') no-repeat center center;
一个个编写即可 不写就默认
8.实时修改图片位置
浏览器找到标签的css代码 然后方向键上下按住即可动态调整
13.边框设置
/*border-left: 5px red solid;
/*上侧边框*/
/*border-top: 10px dotted orange;*/
/*右侧边框*/
/*border-right: 5px dashed black;*/
/*下侧边框*/
/*border-bottom: 8px solid deeppink;*/
简写设置
border: 5px red solid; /*上下左右一致*/
边框样式：
none 无边框
dotted 点状虚线边框
dashed 矩形虚线边框
solid 实线边框
border-raduis属性可以给边框设置为有弧度的
如果要给一个正方形设置成圆形的话，就设置它的值为50%
14.display
隐藏标签
visibility:hidden: 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
display: none; 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
15.盒子模型
margin：用于控制元素与元素之间的距离，它的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的
padding：用于控制内部文本内容与边框之间的距离
border：围绕在内边距和内容外的边框
content：盒子的内容，显示文本和图像，标签内部的内容
需要掌握的操作
margin-top: 20px;
margin-left: 100px;
margin-right: 100px;
margin-bottom: 100px;
margin的各个参数使用
margin:0; 简写形式 作用于上下左右
margin: 10px 20px; 上下 左右
margin: 10px 20px 30px; 上 左右 下
margin: 10px 20px 30px 40px; 上 右 下 左
margin还可以让内部标签居中展示
margin:100px auto 仅限于水平方向
padding使用方式与margin一致
body标签默认自带8px的外边距 在编写的时候应该提前去掉
要使用margin: 0; 贴合上边框
16.浮动布局
1.在css中，任何元素都可以浮动，浮动元素会生成一个块级框，而不论它本身是何种元素
2.只要是设计到页面的布局一般都是用浮动来提升规划好的，页面布局必不可少的操作
3.浮动有俩个特点
1.浮动的框可以向左或者向右移动，直到它的外边缘碰到包含框或者另一个浮动框的边框为止
2.由于浮动的框不在文档的普通流中，所以文档的普通流中的块框表现得像浮动框不存在一样
4.浮动格式
left、right、none
5.解决浮动会造成父标签塌陷
1.自己加一个div设置高度（再写一个div撑起来，但是这种方法不可取，总不能遇到这种情况的时候就设置一个div来撑）
2.利用clear属性
3.通用的解决浮动带来的影响方法
在写html页面之前 先提前写好处理浮动带来的影响的 css代码
.clearfix:after {
/*空的内容独占一行*/
content: '';
display: block;
/*左右两侧都不能有浮动*/
clear: both;
}
之后只要标签出现了塌陷的问题就给该塌陷的div标签加一个class=“clearfix”属性即可
该方法的解决方式是通用的 到哪都是一样 并且名字就叫clearfix
6.溢出属性（ovweflow）
visible:默认值，内容不会被修剪，会呈现在元素框之外
hidden:内容会被修剪，并且其余内容是不可见的
scroll:内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容
auto:如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容
inhert:规定应该从父元素继承overflow属性的值
设置圆形头像问题：设置一个框，溢出部分设置为hidden,然后再设置图片的宽度为100%
17.定位
1.静态static：所有的标签，默认都是静态的，无法改变位置
2.相对定位relative：相对于标签原来的位置做移动
相对定位是相对于该元素在文档流中的原始位置，即以自己原始位置为参照物。有趣的是，即使设定了元素的相对定位以及偏移值，元素还占有着原来的位置，即占据文档流空间。对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。
注意：position：relative的一个主要用法：方便绝对定位元素找到参照物。
3.绝对定位absolute：相对于已经定位过的父标签做移动(如果没有父标签那么就以body为参照物)
设置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位祖先元素定位，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块（即body元素）。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
如果父级设置了position属性，例如position:relative;，那么子元素就会以父级的左上角为原始点进行定位。这样能很好的解决自适应网站的标签偏离问题，即父级为自适应的，那我子元素就设置position:absolute;父元素设置position:relative;，然后Top、Right、Bottom、Left用百分比宽度表示。
4.固定fixed：相对于浏览器窗口固定在某个位置
fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。而其层叠通过z-index属性 定义。 注意点： 一个元素若设置了 position:absolute | fixed; 则该元素就不能设置float。这 是一个常识性的知识点，因为这是两个不同的流，一个是浮动流，另一个是“定位流”。但是 relative 却可以。因为它原本所占的空间仍然占据文档流。
被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标，不论窗口是否滚动，它都会固定在这个位置。
5.优先展示文本内容
浏览器是优先展示文本内容的，如果它发现文本内容被挡住了，会想方设法的找到个位置展示出现
18.z-index模态框
浏览器界面其实是一个三维坐标系，z轴指向用户
层叠顺序
z-index 值表示谁压着谁，数值大的压盖住数值小的，
只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index
z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。
JavaScript
1.JavaScript简介
1.ECMAScript和JavaScript的关系
1996年11月，JavaScript的创造者--Netscape公司，决定将JavaScript提交给国际标准化组织ECMA，希望这门语言能够成为国际标准。次年，ECMA发布262号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为ECMAScript，这个版本就是1.0版。
该标准一开始就是针对JavaScript语言制定的，但是没有称其为JavaScript，有两个方面的原因。一是商标，JavaScript本身已被Netscape注册为商标。而是想体现这门语言的制定者是ECMA，而不是Netscape，这样有利于保证这门语言的开发性和中立性。
因此ECMAScript和JavaScript的关系是，前者是后者的规格，后者是前者的一种实现。
2.JavaScript语言
JavaScript 是脚本语言
JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
JavaScript 很容易学习。
JavaScript 在刚诞生的时候，它的名字叫 “LiveScript”。但是因为当时 Java 很流行，所以决定将一种新语言定位为 Java 的“弟弟”会有助于它的流行。
随着 JavaScript 的发展，它已经成为了一门完全独立的语言，并且也拥有了自己的语言规范 ECMAScript。现在，它和 Java 之间没有任何关系。
可以在网页上实现复杂的功能，网页展现给你的不再是简单的静态信息，而是实时的内容更新，交互式的地图，2D/3D 动画，滚动播放的视频等等
3.HTML、css、JavaScript
HTML是一种标记语言，用来结构化我们的网页内容并赋予内容含义，例如定义段落、标题和数据表，或在页面中嵌入图片和视频。
CSS 是一种样式规则语言，可将样式应用于 HTML 内容， 例如设置背景颜色和字体，在多个列中布局内容。
JavaScript 是一种脚本语言，可以用来创建动态更新的内容，控制多媒体，制作图像动画，还有很多。
2.JavaScripe基础
1.如何使用？
1.可以直接在html页面内Script直接写
2.引入Script文件
2.注释
// 单行注释
/**/ 多行注释、也可进行单行注释
3.结束符
以分号为结束
3.JavaScript语言基础
1.javaScript也是一门面向对象的 编程语言 即一切皆对象！！
2.JavaScript变量声明
在js中，首次定义一个变量名的时候需要关键字声明
3.常量
python中没有真正意义上的常量，默认全大写就是表示常量
js中有真正意义上的的常量的，需要使用关键字const声明，这个常量不允许更改，一旦进行更改就会报错
4.变量的命名规范
变量名是区分大小的
Javascript推荐使用驼峰式命名规则
变量名只能是(比python多一个&)
变量名命名规范(不遵循也可以)，js中推荐使用驼峰式命名
不能用关键字作为变量名
3.支持编写js代码的地方
1.可以单独开设js文件书写
2.也可以直接在浏览器提供的console界面书写
在用浏览器书写js的时候，左上方的清空按钮只是清空当前界面，代码其实还在，如果你想要重新来，最好重新开设一个页面
(在使用浏览器书写你自己的js代码的时候推荐你在自己的html页面打开)
4.Javascript的数据类型
如何查看当前数据类型，typeof变量名；
js/python是一门动态类型，变量名绑定的数据值类型不固定
1.JavaScript的数据类型之数值类型（关键字叫number（在js中它不分整形、浮点型，统称为数值类型）
2.JavaScript的数据类型之类型转换
parseInt()、parseFloat()、
parseInt('asddsad11')
NaN // 属于数值类型 表示的意思是 不是一个数字
3.JavaScript的数据类型之字符类型（string）
单引号、双引号、``
1.模板字符串（模板字符串除了可以定义多行文本之外还可以实现格式化字符串操作）
模板字符串替换
书写${} 会自动去前面找大括号里面的变量名对应的值,如果没有定义直接报错
2.字符串的拼接(内置方法)
在python中不推荐你使用 + 做拼接，使用join
在JavaScript中国推荐直接使用 + 做拼接，并且支持不同类型直接的拼接，它会自动尽自己最可的可能去进行类型转换然后拼接
4.JavaScript的数据类型之布尔值
js中布尔值全是小写的
null和undefined的区别：
1.null：表示的意思是空
表示值为空，一般都是指定或清空一个变量时使用
name = 'jason'
name = null
2.undefined：表示的意识是未定义
表示声明一个变量，但是没有做初始化操作（没有给值）
函数没有指定返回值的时候，返回的也是undefined
5.JavaScript的数据类型之对象
在js中也是一切皆为对象
数组：数组对象的作用是：使用单独的变量名来存储一系列的值，类似于python中的列表
常见的一些方法展示：.length、.push()、.pop()等
6.JavaScript的数据类型之Symbol
ES6新引入了一种新的原始数据类型（Symbol），表示独一无二的值。
5.运算符
算术运算符
+ - * / % ++ --
比较运算符
> >= < <= != == === !=
1 == "1" // true 弱等于
1 === "1" // false 强等于
//上面这张情况出现的原因在于JS是一门弱类型语言(会自动转换数据类型)，所以当你用两个等号进行比较时，JS内部会自动先将
//数值类型的1转换成字符串类型的1再进行比较，所以我们以后写JS涉及到比较时尽量用三等号来强制限制类型，防止判断错误
逻辑运算符
&& || !
赋值运算符
= += -= *= /=
6.流程控制
1.单if:if(条件){条件成立之后执行的代码}
2.if-else
if(条件){
条件成立的执行语句
}else{
条件不成立执行的语句
}
3.if-else if-else
if(条件1){
条件成立的执行语句
}else if(条件2){
条件2成立执行的语句
}else{
条件不成立执行的语句
}
4.switch:switch中的case子句通常都会加break语句，否则程序会继续执行后续case中的语句。
5.for
for(var i=0;i<10;i++){
console.log(i);
}
6.while
var i = 0;
while (i < 10) {
console.log(i);
i++;
}
7.三元表达式
res = 1>2?1:3
条件成立 取问好后面的1
条件不成立 取冒号后面的3
8.JavaScript函数
1.函数的语法结构
function 函数名(形参1，形参2，形参3....){
// 函数注释，解释说明该函数用来做什么
函数体代码
return 返回值
}
2.无参函数
function func1(){
console.log('hello world')
}
func1() // 调用 加括号调用与python中一样
3.有参函数
function func2(a, b){
console.log(a, b)
}
func2(1,2) //调用函数(传参)
func2(1,2,3,4,5,6) // 多了没关系 只要对应得数据
1 2
func2(1) // 少了也没关系
1 undefined
4.关键字arguments
arguments参数，可以获取传入得所有数据，也支持return和匿名函数
1.能够获取函数接受得索引参数
function func2(a,b){
console.log(arguments) // 能够获取函数接受得索引参数
console.log(a,b)
}
2.关键字arguments(限制函数不能多也不能少)
function func2(a, b){
if(arguments.length<2){
console.log('传少了')
}else if (arguments.length>2){
console.log('传多了')
}else{
console.log('正常执行')
}
}
5.函数返回值 关键字return
返回元素的个数
function index(){
return 666, 777, 888
}
res = index(); // 一次只能返回一个值
把返回值做成数组形式返回（可实现多元素返回）
function index(){
return [666, 777, 888]
}
res = index();
js不支持减压赋值
6.匿名函数(没有函数名)
function(){
console.log('所有只有好好学习)
}
var res = function(){
console.loh('嗯，好好学习把')
}
7.箭头函数
箭头左边的是形参 右边是返回值
var func1 = v => v;
上面等价于下面这句
var func1 = function(v){
return v
}
var func2 = (arg1,arg2) => arg1+arg2
等价于
var func2 = function(arg1,arg2){
return arg1+arg2
}
8.函数的全局变量与局部变量
1.局部变量
在JavaScript函数内部声明的变量(使用var)是局部变量，索引只能在函数内部访问它（该变量的作用域是函数内部）。只要函数运行完毕，本地变量就会被删除
2.全局变量
在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它
3。变量生存周期
JavaScript变量的生命周期从它们被声明的时候开始
局部变量会在函数运行以后被删除
全局变量会在页面关闭后被删除
4.作用域
首先在函数内部查找变量，找不到则到外部函数查找，逐步找到最外层。与python作用域关系查找一模一样
9.闭包函数
var city = "BeiJing";
function f(){
var city = "ShangHai";
function inner(){
console.log(city);
}
return inner;
}
var ret = f();
ret();
ShangHai
js内置函数和方法
JavaScript中的所有事物都是对象：字符串、数字、数组、日期，等等。在JavaScript中，对象是拥有属性和方法的数据。
我们在学习基本数据类型的时候已经带大家了解了，JavaScript中的Number对象、String对象、Array对象等。
注意var s1 = "abc"和var s2 = new String("abc")的区别：typeof s1 --> string而 typeof s2 --> Object
类似于python中的内置函数或者内置模块
固定语法
var 变量名 = new 内置对象名();
1.自定义对象：JavaScript的对象（Object）本质上是键值对的集合（Hash结构），但是只能用字符串作为键。
可以看成是我们python中的字典 但是js中的自定义对象要比python里面的字典操作起来更加方便
2.第一种方式，创建自定义对象
var d = {'name':'jason','age':18}
typeof d
'object'
d['name']
'jason'
d.name
'jason'
d.age
18
3.第二种new()自定义对象的方法
var d2 = new Object()
d2.name = 'jason'
d2
{name: 'jason'}
d2['age'] = 18
d2
{name: 'jason', age: 18}
4.支持for循环
ar d = {'name':'jason','age':18}
for(let i in d){
console.log(i,d[i])
}
VM432:2 name jason
VM432:2 age 18
时间对象
1.Date对象
let d3 = new Date()
2.格式化事件
d3.toLocaleString()
3.自己手动输入事件
let d4 = new Date('2022/08/25 12:12:45')
时间对象方法
var d = new Date();
//getDate() 获取日
//getDay () 获取星期
//getMonth () 获取月（0-11）
//getFullYear () 获取完整年份
//getYear () 获取年
//getHours () 获取小时
//getMinutes () 获取分钟
//getSeconds () 获取秒
//getMilliseconds () 获取毫秒
//getTime () 返回累计毫秒数(从1970/1/1午夜)
JSON序列与反序列
1.在js中也有序列化与反序列化
JSON.stringify()
JSON.parse()
2.js序列化使用
let d7 = {'name':'jason'.'age':18}
let res = JSON.stringify(d7)
'{"name":"jason","age":18}'
JSON.parse(res)
{name: 'jason', age: 18}
3.javascript序列化基于网络发送给python
需求：如果当前js中有一个布尔值true需要基于网络发送给python程序并且让python转换成布尔值 如何操作
1.在js中使用JSON.stringify()序列化成json格式字符串
2.基于网络发送给python程序(自动编码)
3.python接收 解码并反序列化
RegExp正则对象
在python中如果需要使用正则 需要借助re模块
在js中需要我们取创建正则对象
1.new代表创建对象
let regl = new RegExp('^[a-zA-Z][a-zA-z0-9]{5,11}')
2.推荐使用
let reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,11}/
匹配内容
reg1.test('woshidashuaibi')
res2.test('woshidashuaibi')
3.获取字符串里面所有的字母s
let sss = 'nish asoswo shi'
sss.match(/s/) // 拿到一个就停止了
4.解决拿到一个就停止的问题，使用全局匹配/g
sss.match(/s/g) // 全局模式
(4) ['s', 's', 's', 's']
5.全局匹配模式：正则表达式的最后不加g则表示匹配成功就结束 加g表示全局匹配，全局匹配会有一个lastindex属性
JavaScriptBOM和DOM
BOM(Browser Object Model 浏览器对象模型)
目前为止，我们已经学习了javaScript的一些简单的语法。但是这些简单的语法，并没有和浏览器有任何交互。也就是我们还不能制作一些我们经常看到的网页的一些交互，我们需要继续学习BOM和DOM相关知识。
Javascript 由三部分构成，ECMAScript，DOM和BOM。
BOM（Browser Object Model）是指浏览器对象模型，它使 JavaScript 有能力与浏览器进行“对话”。
DOM （Document Object Model）是指文档对象模型，通过它，可以访问HTML文档的所有元素
window对象
所有浏览器都支持window对象，他表示浏览器窗口
常用的window方法
window.innerHeight - 浏览器窗口的内部高度
window.innerWidth - 浏览器窗口的内部宽度
window.open() - 打开新窗口
window.close() - 关闭当前窗口
window的子对象
navigator对象:浏览器对象，通过这个对象可以判定用户所使用的浏览器，包含了浏览器相关信息。
1.浏览器全称
window.navigator.appName
输出结果:
"Netscape"
2.浏览器厂商和版本的详细字符串
window.navigator.appVersion
输出结果:
'5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36'
3.用来标识\效验当前是否是一个浏览器 是否存在(userAgent)参数
window.navigator.userAgent
输出结果:
'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36'
4.查看当前平台
window.navigator.platform
history对象：浏览历史对象，包含了用户对当前页面的浏览器历史，但是我们无法看到具体的地址，可以简单的用来前进或者后退一个页面
location对象：window.location对象用于获取当前页面的地址（URL）,并把浏览器重定向到新的页面
location.href 获取URL
location.href="URL" // 跳转到指定页面
location.reload() 重新加载页面
弹出框
可以在 JavaScript 中创建三种消息框：警告框、确认框、提示框。
1.确认框：确认框用于使用户可以验证或者接受某些信息。
当确认框出现后，用户需要点击确定或者取消按钮才能继续进行操作。
如果用户点击确认，那么返回值为 true。如果用户点击取消，那么返回值为 false。
confirm("你确定吗？")
2.提示框：提示框经常用于提示用户在进入页面前输入某个值。
当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。
如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。
prompt("请在下方输入","你的答案")
3.警告框：警告框经常用于确保用户可以得到某些信息。
当警告框出现后，用户需要点击确定按钮才能继续进行操作。
alert("警告框");
计时相关
通过使用 JavaScript，我们可以在一定时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。
过一段时间之后触发
每隔一段时间触发一次
案例一：过一段时间触发一次，可以取消定时任务，就不会进行执行
<script>
function func1() {
alert(123)
}
// 毫秒为单位 3秒之后自动执行func1函数
let t = setTimeout(func1,3000);
// 取消定时任务 如果你想要清除定时任务 需要提前用变量指代定时任务
clearTimeout(t)
</script>
案例二：限制每隔3秒触发执行一次，9秒后触发，停止执行
DOM （Document Object Mode 文档对象模型）
DOM 是一套对文档的内容进行抽象和概念化的方法。
当网页被加载时，浏览器会创建页面的文档对象模型(Document Object Model)。
HTML DOM 模型被构造为对象的数。
DOM标准规定HTML文档中的每个成分都是一个节点(node
文档节点(document对象)：代表整个文档
元素节点(element 对象)：代表一个元素（标签）
文本节点(text对象)：代表元素（标签）中的文本
属性节点(attribute对象)：代表一个属性，元素（标签）才有属性
注释是注释节点(comment对象)
变量名存储方法
当你用变量名指代标签对象的时候 一般情况下都推荐你书写成(见名知意)
以下示例:
xxxEle
divEle
aEle
pEle
ps:动态创建 临时有效 非永久
查找标签
当我们的js文件中涉及到了查找标签的时候，确保能找到该标签，我们要把js文件放入body里面最下面，因为代码是向下走，走到最下面的时候，说明所有涉及到的标签都已经存在了，就可以使用了，不会存在找不到的情况
id查找 类查找 标签查找（直接查找）
document.getElementById()
根据id值查找标签 结果直接是标签对象本身
document.getElementsByClassName()
根据class值查找标签 结果是数组类型
document.getElementsByTagName()
根据标签名查找标签 结果是数组类型
间接查找
parentElement 父节点标签元素
children 所有子标签
firstElementChild 第一个子标签元素
lastElementChild 最后一个子标签元素
nextElementSibling 下一个兄弟标签元素
previousElementSibling 上一个兄弟标签元素
节点操作
1.需求
1.通过DOM操作动态的创建a标签
2.并且给标签加属性
3.最后将a标签追加到div标签尾部文本中
2.创建标签
临时操作(刷新丢失)
1.创建标签
let XXXEle = document.createElement('标签名')
2.添加默认属性值
XXXEle.id = 'id值'
3.添加内部文本
XXXEle.innerText = '内部文本'
4.尾部添加
divEle.append(XXXEle)
3.属性操作
XXXEle.属性 只能是默认属性
XXXEle.setAttribute() 默认属性、自定义属性(可以只记住这个)
例子：
1.既可以设置自定义的属性也可以设置默认的书写
imgEle.setAttribute('username','jason')
undefined
2.打印标签
imgEle
<img src="111.png" username="jason">
4.文本操作
innerText: 只能获取标签内部的文本 设置文本的时候不识别HTML标签
innerHTML: 文本和标签都获取 设置文本的时候识别HTML标签
