HTML初识
△HTML:
超文本标记语言，是一种用于创建网页的标记语言，不是编程语言,没有逻辑
本质上是浏览器可识别的规则
我们按照规则写网页，浏览器根据规则渲染我们的网页。对于不同的浏览器，对同一个标签可能会有不同的解释。（兼容性问题）
网页文件的扩展名：.html或.htm（没有区别）
网页文件的扩展名：.html或.htm（没有区别）
我们按照规则写网页，浏览器根据规则渲染我们的网页。对于不同的浏览器，对同一个标签可能会有不同的解释。（兼容性问题）
网页文件的扩展名：.html或.htm（没有区别）
△css：
层叠样式表是一种用来表现HTML等文件样式(效果)的计算机语言
JavaScript：
简称“JS”，是一种属于网络的脚本语言
常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果
通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的
△jQuery：
jQuery是一个快速、简洁的JavaScript框架，它封装JavaScript常用的功能代码
△boodstarp(JQ+css):
bootstrap：简洁、直观、强悍的前端开发框架
它在jQuery的基础上进行了更为个性化的完善，形成一套自己独有的网站风格，并兼容大部分jQuery插件。
△B/S (前端/后端)
Web服务的本质：
浏览器发请求 --> HTTP协议 --> 服务端接收请求 -->
服务端返回响应 --> 服务端把HTML文件内容发给浏览器 --> 浏览器渲染页面
浏览器内嵌了一个socket客户端，默认TCP链接
△浏览器自带socket客户端，自己编写的服务端也可以为浏览器服务
from socket import *
jd_server = socket()
jd_server.bind(("",8001))
jd_server.listen(5)
conn,client_add = jd_server.accept()
from_client_msg = conn.recv(1024)
print(from_client_msg.decode())
conn.send("nihao".encode())
conn.close()
jd_server.close()
按照HTTP协议加载浏览器能看懂的数据：
conn.send(b"HTTP/1.1 200 OK
")
conn.send(b"nihao")
HTTP/1.1 200 OK:
HTTP/1.1 是一个规范
200 代表请求成功
OK 表示一切正常
conn.send(b"<h1>nihao</h1>") #用标题包裹数据，更好看一些
标签一般形成一个结构写在文件里，这个文件就是HTML文件
HTTP/1.1 是一个规范
conn.send(b"HTTP/1.1 200 OK
")
conn.send(b"nihao")
pycharm中创建一个html文件（英文名，不要空格）
你会发现，整个结构都直接生成好了,因为不管什么浏览器，文档结构都是这样的
html文件可以在pycharm中就能打开
△自己写一个服务器
当浏览器来连服务器时,把HTML文件发送给浏览器
from socket import *
s = socket()
s.bind(("",8881))
s.listen(5)
new_s, addr = s.accept()
data = new_s.recv(1024)
print(data.decode())
new_s.send(b"HTTP/1.1 200 OK
")
with open("test.html","rb") as f:
data = f.read()
new_s.send(data)
new_s.close()
s.close()
HTML文档结构
△最基本的HTML文档：
<!DOCTYPE html>
<html lang="zh-CN">
<!--这个lang表示语言，zh-CN是中文的意思，就是说，你整个文档的内容以中文为主-->
<!--如果以英文为主，就写成lang='en'，用谷歌之类打开，它会认为是英文的，自动给翻译（如果设置了自动翻译的话）-->
<head>
<meta charset="UTF-8">
<title>标题</title>
</head>
<body>
</body>
</html>
<!DOCTYPE html>:HTML文件声明，声明为HTML5文档
<html>、</html>:是文档的开始标记和结束的标记。是HTML页面的根元素，在它们之间是文档的头部（head）和主体（body）
<head>、</head>:定义了HTML文档的开头部分。它们之间的内容不会在浏览器的文档窗口显示。包含了文档的元（meta）数据，配置信息等，是给浏览器看的，你看到的是在body标签里面写的
<title>、</title>:定义了网页标题，在浏览器标题栏显示
<body>、</body>:之间的文本是可见的网页主体内容
注意：对于中文网页需要使用 <meta charset="utf-8"> 声明编码，否则会出现乱码
有些浏览器会设置 GBK 为默认编码，则你需要设置为 <meta charset="gbk">
△浏览器页面调试工具 F12
Elements（元素）：对浏览器看来，所有标签都是元素
标签对文本进行了标记，所以HTML叫超文本标记语言
浏览器有识别标签的机制
HTML标签格式
标签分类定义
块级/内联:判断依据为显示的web中独占至少一行的body中的标签
块级标签(行外标签,独占一行):
块级标签能够包含内联标签,和某些块级标
<h1>一级标题</h1> 标题标签
<br> 换行标签
<hr> 换行横线标签
<p> 段落标签
第一章内容
</p>
<div style="color:green"> </div> 换行文档分区标签
<ul> 无序列表标签
<li>茶</li> 列表内容标签
</ul>
<ol type="I" start="2"> 有序列表标签
li>梅</li>
</ol>
<dl> 无标识标签
<dt>河北省</dt>
<dd>邯郸</dd>
</dl>
<table border="1"> 表格线框宽度 表格标签
<tr> 定义行 第一行
<th>Month</th> 表头加粗的内容
<th>Savings</th>
</tr>
<tr> 第二行
<td>January</td> 表内容
<td>$100</td>
</tr>
</table>
内联标签(行内标签,不独占一行):
不能包含块级标签
<img width="200" height="200" src="timg.jpg" alt="稍等片刻" title="李孝利"> 图片标签
<a href="">跳到底部</a> 超链接标签
<span style="color:blue">蓝色</span> 文档标签
全封闭标签:
<title>网头</title> 网头标签
<h1>一级标题</h1> 标题标签
<a href="">跳到底部</a> 超链接标签
<p>我的车是 <span style="color:blue">蓝色</span> 的。</p> 段落标签 文档分区标签
<div style="color:green"> </div> 换行文档分区标签
<p> 段落标签
第一章内容
</p>
<ul> 无序列表标签
<li>茶</li>
</ul>
<ol type="I" start="2"> 有序列表标签
li>梅</li>
</ol>
<dl> 无标识标签
<dt>河北省</dt>
<dd>邯郸</dd>
</dl>
<table border="1"> 表格线框宽度 表格标签
<tr> 定义行 第一行
<th>Month</th> 表头加粗的内容
<th>Savings</th>
</tr>
<tr> 第二行
<td>January</td> 表内容
<td>$100</td>
</tr>
</table>
自封闭标签:
<meta> 元信息标签
<link rel="icon" href="图标文件路径"> 网头图标标签
<br> 换行标签
<hr> 换行横线标签
<img width="200" height="200" src="timg.jpg" alt="稍等片刻" title="李孝利"> 图片标签
head内常用标签（了解）：
<meta /> 标签 元信息
用处:标签位于文档的头部,提供的信息是用户不可见的,是一个自封闭标签,全封闭标签,可提供有关页面的元信息（meta-information）
有一下关键字:
charset=
ontent="3"
定义文档字符编码和更新频度的描述:
<meta charset="utf-8" content="3"/>
三秒刷新
<meta http-equiv="Refresh" content="2;url=https://www.baidu.com"/>
自动跳转
http-equiv=
浏览器内核（渲染引擎）：渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息
渲染引擎是兼容性问题出现的根本原因，大部分渲染效果差不多
<meta http-equiv="Refresh">
<meta http-equiv="X-UA-Compatible" cotent="IE=edge">
IE比较个色
name="keyword" content="搜索关键字"
"keywords" 是一个经常被用到的名称。它为文档定义了一组关键字
某些搜索引擎在遇到这些关键字时，会用这些关键字对文档进行分类
<meta name="keywod" content="古风，武侠，悟道"/>
name="description" content="网站描述信息"
设置网站描述信息，用于在搜索引擎搜索时，显示网站基本描述信息
<meta name="description" content="这是一个古风网站"/>
触屏缩放
name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes"
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes"/>
device-width：设备宽度
- initial-scale=1.0，初始显示缩放比例。
- minimum-scale=0.5，最小缩放比例。
- maximum-scale=1.0，最大缩放比例。
- user-scalable=yes，是否支持可缩放比例（触屏缩放）
<title>网头</title> 标签
link 标签 网头图标
<link rel="icon" href="图标文件路径"/>
body内常用标签
<h1> <h1>标签 标题
<body>
hehe #body中没有包裹的就是普通文本显示
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题,大圣</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>
br标签 换行
<h1>123</h1>
<br>
<h2>4<br>5</h2>
123
4
5
注意点:直接回车、空格等空白内容都被认为是一个空格
hr 标签 一行横线
<h2>1<hr>2</h2>
1
----------------------------------
2
form标签 表单
提交数据
1. form的属性 method='post' action='地址'
#<form action="http://127.0.0.1:8001">
#post:提交数据的请求,地址不写默认在本页面提交
2. input框要有name属性 option要有value值 #input无name属性,option无values,后端无法拿到值
3. 要有一个button按钮或者 input type=‘submit’ #button的type默认等于submit
<form action="" method="post">
<p>
出版社名称： <input type="text" name="pub_name" required>
<span>{{ error }}</span>
</p> {# add_publisher传过来的error,重名的时候传,没重名不传,error不显示#}
<button>提交</button>
{# button的默认属性是submit,也可以用input主动设置submit属性#}
</form>
input标签
text/password 输入框
用户名：<input type="text">
<!--普通文本输入框-->
密码: <input type="password">
<!--密文输入框-->
<input type="reset"> <!--生成重置按钮，清空输入内容-->
<input type="button" value="按钮"> <!--button和form表单配合提交数据-->
<input type="date">、 <!--时间日期输入框-->
<input type="file"> <!--文件输入框，了解即可后面讲，需要特殊设置-->
<input type="number"> <!--纯数字输入框-->
radio 单选框
性别
<input type="radio" name="sex" value="1">男
<input type="radio" name="sex" value="2">女
checkbox 多选框
喜欢的明星:
<input type="checkbox" name="hobby" value="1"> baby
<input type="checkbox" name="hobby" value="2"> 热巴
<input type="checkbox" name="hobby" value="3"> 艺昕
textarea标签 多行文本输入框
多用于评论
<textarea name="携带用户输入"></textarea>
select标签 下拉框
单选
<select name="city" id="city">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">深圳</option>
<option value="4">惠州</option>
</select>
multiple="multiple" 多选
ctrl键多选
<select name="citys" id="citys" multiple="multiple">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">深圳</option>
<option value="4">惠州</option>
</select>
a 标签 超链接
锚点：页面内容进行跳转（在自己的页面跳）
<body>
<a href="#i1">第一章</a>
<a href="#i2">第二章</a>
<a href="#i3">第三章</a>
<h1 id="i1">第一章 XXX</h1>
<p> #段落标签
第一章内容
</p>
不加href属性,就是普通文本显示
<a>古风</a>
加上href属性,不加值文字有颜色效果,还有下划线,并且点击后会刷新当前的html页面
<a href="# ">跳到底部</a>
加上href属性,并且加上值
<a href="http://www.baidu.com" target="_self" >baidu</a>
跳转对应网址的页面
未访问之前是蓝色的字体颜色
访问之后是紫色的字体颜色
target属性:
_self:在当前标签页打开 href属性值的那个网址
_blank:在新的标签页打开 href属性值的那个网址
p标签 段落
<p>
第一章内容
</p>
span标签 文档分区
<p>我的车是 <span style="color:blue">蓝色</span> 的。</p>
如果不对 div和span 应用样式，那么 span 元素中的文本与其他文本不会任何视觉上的差异
div标签 换行文档分区
div是一个块级元素。这意味着它的内容自动地开始一个新行
可以把文档分割为独立的、不同的部分
<div style="color:green"> #字体为绿色
<h3>This is a header</h3>
<p>This is a paragraph.</p>
</div>
<div style="background: red">内容</div> #背景为绿色
ul标签 无序列表
兴趣爱好:
<ul> #<ul>作为无序列表的声明
<li>茶</li>
<li>酒</li>
<li>棋</li>
</ul>
ol标签 有序列表
君子:
<ol type="I" start="2"> #<ol> 标签定义有序列表,有序列表的各个列表项有先后顺序，
<li>梅</li> #所以会使用数字进行标识
<li>兰</li>
<li>竹</li>
<li>菊</li>
</ol>
dl标签 无标识表(缩进)
<dl>
<dt>河北省</dt> 表头
<dd>邯郸</dd> 内容
<dd>石家庄</dd>
<dt>山西省</dt>
<dd>太原</dd>
<dd>平遥</dd>
</dl>
河北省
邯郸
石家庄
山西省
太原
平遥
tble标签 表格
<table border="1"> 表格线框宽度
<tr> 定义行 第一行
<th>Month</th> 表头加粗的内容
<th>Savings</th>
</tr>
<tr> 第二行
<td>January</td> 表内容
<td>$100</td>
</tr>
</table>
表格由 table 元素以及一个或多个 tr、th 或 td 元素组成
tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元
border:规定表格边框的宽度
写法二：
第二种写法:
<table>
<thead>
<!--表头-->
<tr>
<th>id</th>
<th>name</th>
<th>age</th>
</tr>
</thead>
<tbody>
<!--表内容-->
<tr>
<td>1</td>
<td>xiaoming</td>
<td>20</td>
</tr>
<tr>
<td>2</td>
<td>xiaoli</td>
<td>18</td>
</tr>
</tbody>
</table>
img标签 图片
<img width="200" height="200" src="timg.jpg" alt="稍等片刻" title="李孝利"/>
src属性:图片路径 必须写
alt属性:图片加载失败或者正在加载时提示的内容
title属性:鼠标悬浮时显示的内容
# 不常用,通过css来控制
设置宽度
height:设置高度
css
层叠样式表,作用是为标签加效果
<div style="background: red">123</div>
基本选择器
元素选择器
标签名称{css属性:值}
div{100px;}
id选择器
id{}
html代码:
<div id="d1">
</div>
css写法:
#d1{
background-color: green;
100px;
height: 100px;
}
类选择器
.class1{属性:值}
html代码:
<div id="d1" class="c1">
baby
</div>
<div id="d2" class="c2">
热巴
</div>
<div id="d3" class="c1">
唐艺昕
</div>
css写法:
.c1{
background-color: green;
100px;
height: 100px;
}
属性选择器
html代码:
<div id="d5" class="c1" xx="ss">
baby
</div>
<div id="d2" class="c2" xx="kk">
热巴
</div>
css写法:
[xx]{
/*属性查找*/
background-color: green;
100px;
height: 200px;
}
[xx='ss']{
/*属性带属性值查找*/
background-color: green;
100px;
height: 200px;
}
后代选择器
html代码:
div id="d1" class="c1" xx="ss">
<span>
<a href="http://www.baidu.com">baby</a>
</span>
</div>
<div id="d2" class="c2" xx="kk">
<a href="http://www.baidu.com">热巴</a>
</div>
<div id="d3" class="c1">
唐艺昕
</div>
<a href="http://www.baidu.com">xxxxxxx</a>
div a{ color: yellow;}
组合选择器
div,a{ color: yellow;}
html代码:
div id="d1" class="c1" xx="ss">
<span>
<a href="http://www.baidu.com">baby</a>
</span>
</div>
<div id="d2" class="c2" xx="kk">
<a href="http://www.baidu.com">热巴</a>
</div>
<div id="d3" class="c1">
唐艺昕
</div>
<a href="http://www.baidu.com">xxxxxxx</a>
css代码:
注意:a标签字体颜色设置,必须找到a标签才能设置
#d1 a,#d3 a{
background-color: pink;
color:yellow;
}
css样式引入方式
head标签中引入
<style>
/* 选择器{css属性名称:属性值;css属性名称:属性值;} */
div{ 用了基本选择器中的元素选择器
200px;
height: 200px;
background-color: red;
}
</style>
给所有div标签加样式
外部文件引入
（工作中常用的）
创建一个css文件,stylesheet文件,比如test.css文件。里面写上以下代码
div{
/* css注释 */
200px;
height: 200px;
background-color: red;
}
在想使用这些css样式的html文件的head标签中写上下面的内容
<link rel="stylesheet" href="test.css"> href对应的是文件路径
内联样式
<div style="background-color: red;height: 100px; 100px;"></div>
multiple="multiple"?
css样式相关
display属性
改变标签属性:
inline: 将块级标签变成了内联标签
block:将内联标签变成块级标签
inline-block: 同时具备内联标签和块级标签的属性,也就是不独占一行,但是可以设置高度宽度
none: 设置标签隐藏 （了解，后面用）
html代码
<span>
我是span标签
</span>
<div class="c1">
鹅鹅鹅,曲项向天歌!
</div>
<div class="c2">
白毛浮绿水
</div>
css写法
span{display: block;} 将内联标签变成块级标签
.c1{
background-color: red; 内容背景颜色
height: 100px; 内容背景高度
100px; 内容背景宽度
display: inline; 将块级标签变成内联标签
/*display: inline-block;*/ 同时具备内联标签和块级标签的属性
}
颜色设置
英文单词:red;
十六进制: #ff746d;
rgb: rgb(155, 255, 236);
背景颜色透明度: rgba(255, 0, 0,0.3);
单纯的就是颜色透明度
标签透明度（例如背景图片透明度）: opacity: 0.3;
0到1的数字,这是整个标签的透明度
盒子模型
标签占空间总大小=margin+border+padding+content
html代码
<div>
窗前明月光
</div>
css写法
div{ 200px; 内容宽度
height: 100px; 内容高度
background-color: rgba(255, 0, 0,0.3); 内容背景颜色
background-image: url("fage.png"); 内容背景图片 url写图片路径,也可以是网络地址路径
margin: 10px 15px 外边距:上下 左右 距离无颜色
border: 4px solid red; 边框:大小 样式 颜色
padding: 4px 2px 6px 8px; 上4右2下6左8 内边距
}
margin 外边距
距离其他标签或者自己父级标签的距离
html代码
<div>
窗前明月光
</div>
<div class="c1">
<div class="c2">
</div>
</div>
css写法
.c1{
background-color: red;
height: 100px;
100px;
/*margin: 10px 15px;*/ 上下10，左右15
margin-left: -10px;
}
.c2{
background-color: green;
height: 20px;
20px;
/*margin: 10px 15px;*/
margin-left: 20px;
}
让外边距为零
body{
margin: 0;
}
border 边框
html代码
<div>
窗前明月光
</div>
css写法
边框简写方式,对四个边框进行设置
<div style="border:1px solid red; "> /*宽度/样式/颜色*/
窗前明月光
</div>
order-left: 1px solid green; 单对左边边框设置
border-top: 1px solid blue; 上边边框
细写
border- 5px; 边框宽度
border-style: dashed; 边框样式
border-color: aqua; 边框颜色
padding 内边距
内容和边框之间的距离
html写法
<div style="padding:1px solid red; "> /*宽度/样式/颜色*/
窗前明月光
</div>
padding: 6px 8px; 上下6左右8
padding: 4px 2px 6px 8px; 上4右2下6左8
padding-left: 20px;
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
content: 内容部分
背景
html代码
<div>
窗前明月光
</div>
css写法
background-color: #ff746d; 背景颜色
background-color: rgba(255, 0, 0,0.3);背景颜色
background-image: url("fage.png"); url写图片路径,也可以是网络地址路径
background-repeat: no-repeat; 不重复
background-repeat: repeat-y; y方向上
background-position: right top; 右上
（lift top,center top,right top,center bpttom）
background-position: 100px 50px; 离左边边多少,离右边多少 一般通过css设置
简写方式:
background: #ff0000 url("fage.png") no-repeat right bottom;
高度宽度
css写法:
div{
height: 100px;
100px;
background-color: pink;
}
span{ ！！！行级标签不能设置高度宽度
height: 100px;
100px;
background-color: green;
}
可以设置百分比，会按照父级标签的高度宽度来计算
<div class="c1"><div class="c2">234</div></div>
css写法:
.c1{
200px;
height: 100px;
background: red;
}
.c2{
50%;
height: 50%;
background: gold;
}
字体相关
html代码
<div>
窗前明月光
</div>
css写法
font-size: 50px; 1.5em /* 默认字体大小是16px=1em */
color:green; /* 字体颜色 */
font-family: '楷体', '宋体'; 浏览器如果不支持第一个选第二个。。。
font-weight: 400; /* 字体粗细 100-900,默认是400 */
字体对齐
字体对齐
html代码:
<div>
窗前明月光
</div>
css写法
div{ height: 100px;
200px;
background-color: yellow;
text-align: center; 标签文本水平居中于块级标签
line-height: 100px; 和height高度相同,标签文本垂直居中于块级标签
/*垂直居中*/
text-align: right;右对齐
浮动
浮动的元素,不独占一行,并且可以设置高度宽度
html代码
<div class="cc">
<div class="c1"></div>
<div class="c2"></div>
</div>
<div class="c3"></div>
scc写法
body{ margin: 0; } 要浮动,先让默认为8的外边距为0
c1{
background-color: red; height: 100px;
200px; float: left;
}
.c2{
background-color: green; height: 100px;
200px; float: right;
}
.c3{
background-color: pink;
height: 100px;
100%;}
塌陷解决
父级标签没有高度了,子标签一浮动,会让下面的标签顶上来
方式1：给父级标签加高度 不常用
方式2：清除浮动(clear属性) 不常用
.c3{
background-color: pink; height: 100px;
100%;
clear: both; （这个标签上面不允许有浮动的元素）
}
方式3：子标签底下加一个空白的带clear属性的div标签 常用
html代码:
<div class="cc clearfix">
<div class="c1"></div>
<div class="c2"></div>
<div style="clear: both;"></div>
</div>
<div class="c3"></div>
方式4:div标签后面用after拼一个内容为空的带clear属性的块
需要先用伪元素选择器
html代码:
<div class="cc clearfix">
<div class="c1"></div>
<div class="c2"></div>
</div>
<div class="c3"></div>
css代码:
.clearfix:after{
content:''; 设置内容
display:block; 设置块
clear:both; 设置clear属性
}
伪元素 after
在原内容上增加元素
html代码:
<div>
一段文字
<div>
css代码:
div{
background-color:pink;
height:100px;
200px;}
div:after{
content:'?';
color:white;}
伪类 hover
添加鼠标放上之后的 效果
html代码:
<divclass="c1">
</div>
css写法:
.c1{
background-color:red;
height:300px;
300px;}
.c1:hover{ /*鼠标悬浮时设置效果*/
/*background-color:green;*/
background-image:url("a.png");
cursor: pointer;} pointer 手
default 箭头，crosshair 十字，progress 箭头和沙漏
悬浮显示其他标签效果
html代码:
<divclass="c1">
<divclass="c2"> </div>
</div>
css写法:
.c1{background:black;
height:400px;
400px;
}
.c2{background:aqua;
height:40px;
40px;
display:none; 改display为隐藏属性
}
.c1:hover.c2{
display:block; 鼠标悬浮时显示c2,改display为块属性
}
positon 定位
做一些小的范围布局
html代码:
<div class="cc ">
<div class="c1"></div>
<div class="c2"></div>
</div>
<div class="c3"></div>
static 静态定位
也就是标签默认
relative 相对定位
相对于父级标签移动,原来的位置还占着,不会造成下面的标签顶上去的情况
css代码:
position:relative;
left:100px; 离左边
top:-100px; 离上面
/*bottom:*/ 离下面
/*right:*/ 离右边
absolute 绝对定位
相对于父级标签移动,原来的位置不占着,会造成下面的标签顶上去的情况
css代码:
position:absolute;
top:20px;
left:80px;
fixed 固定定位
按照浏览器窗口的位置进行移动
html代码:
<spanclass="s1"><ahref="">返回顶部</a></span>
css代码:
.s1{
position:fixed;
left:40px;
bottom:20px;
}
优先级
!important>行内样式>ID选择器>类选择器>标签
越精准的定位优先级越高
继承
标签
类
id
!important
无敌
练习（下周一之前完成即可）：
通过html和css完成小米商城首页的开发,暂不需要完成动态效果,有页
面展示效果就可以（https://www.mi.com/）
注意：前端页面效果可以通过很多种方式实现，没有标准答案，大家
可以参考小米官网源码，也可以根据自己想法去实现
js
Brendan（布兰登） Eich
轻量级的编程语言（ECMAscript5或6）,
是一种解释性脚本语言（代码不进行预编译）,
主要用来向HTML页面添加交互行为,
目前是互联网上最流行的脚本语言,
支持面向对象、命令式和声明式（如函数式编程）风格,
JavaScript，他和Python一样是一门编程语言，而浏览器内置了JavaScript语言的解释器，所以JavaScript代码在浏览器上就可以运行,
DOM，（Document Object Model）是指文档对象模型，通过它，可以操作HTML文档的相关功能，例如：对标签内容进行删除和替换等（非重点）,
BOM，（Browser Object Model）是指浏览器对象模型，通过他，可以操作浏览器相关的功能，例如：浏览器设置定时器，浏览器定时刷新页面。
BOM，（Browser Object Model）是指浏览器对象模型，通过他，可以操作浏览器相关的功能，例如：浏览器设置定时器，浏览器定时刷新页面。
三种js代码引入方式
1 head标签的script标签里面(alert('xx'), confirm('xx'))
2 body标签的script标签里面 (建议底部)
3 外部文件引入的方式来使用
创建一个.js结尾的文件,写上js代码
比如:
alert('are you ok?');
在想使用这个js代码的html文件中,body标签底部导入
<script src="test.js"></script>
js基础内容(会继续更新)
alert("daoyou");
confirm("daoyou?");
JavaScript语法规则
变量
变量定义 var a = 100；
var 变量名,,
变量声明,但没有赋值的时候,变量的值为undefined
数据类型
number 整数,浮点数
var n = 11;
var n2 = 11.11;
string 字符串
var a = 'abcdef';
var a = new String('ss');
字符串操作
var s = 'hello';
索引取值: s[1] -- 'e' s.charAt(4); -- 'o' : s.substring(1,3); -- "el"
获取长度：s.length;
移除两端空格: s.trim(); s.trimLeft(); s.trimRight();
boolean 布尔
var a = true;
var b = false;
undefined和null类型
undefined 变量声明了,但是没有赋值,此时这个变量是undefined类型
null : 变量不用了,就可以给变量赋值为null,--- object类型
array 数组
var names = [11,22,33];
数组常用方法
names[0] // 索引,索引也是从0开始的
names.push(ele) // 尾部追加元素
示例:a.push('xx'); -- [11, 22, 33, "xx"]
names.pop() // 尾部移除一个元素
示例:a.pop(); -- [11, 22, 33]
names.unshift(ele) // 头部插入元素
示例:a.unshift('ssss'); -- ["ssss", 11, 22, 33]
var ele = obj.shift() // 头部移除一个元素
示例:a.shift(); -- [11, 22, 33]
names.splice(index,0,ele) // 在指定索引位置插入元素
names.splice(从哪删(索引),删几个(个数),删除位置替换的新元素(可不写,可写多个))
names.splice(index,1,ele) // 指定索引位置替换元素
names.splice(index,1) // 指定位置删除元素
var names = [11,22,33];
names.splice(1,1,'xx','oo','asdf'); -- [11, "xx", "oo", "asdf", 33]
names.slice(start,end) // 切片
示例:a.slice(1,3);
names.reverse() // 原数组反转
示例:a.reverse();
names.join(sep) // 将数组元素连接起来以构建一个字符串
示例: var a = ['ni','hao','ma',18]
a.join('+'); -- "ni+hao+ma+18"
names.concat(val,..) // 连接数组
示例: var a = [11,22]; var b = ['aa','bb']
var c = a.concat(b); c -- [11, 22, "aa", "bb"]
names.sort() （辣鸡） // 对原数组进行排序 a.sort(compare); 升序排列
解决数组中数字排序的问题
a = [2,3,5,2,22,4,2,3,234,1]
function com(a,b){return a-b}; // 自定义排序规则
a.sort(com);
当a-b大于0时，会交换数组中的这两个元素
一直交换直到返回值没有大于0的
字典
自定义对象Object
JavaScript中其实没有字典类型，字典是通过对象object构造出来的
info = {
name:'迪丽热巴',
"age":18
1:123
}
var a = {username:'xx',password:'123'}; //键可以不加引号
// 键可以是数字,但取值时必须是info["1"]
var a = info['name']/a = info.name // 通过键取值必须加引号(info.name)
info['age'] = 20 // 修改
info['gender'] = 'male' // 新增
delete info['age'] // 删除
查看数据类型
typeof 变量名;
typeof n;
注释
单行//
多行 /**/
流程控制
if判断
if (a == 1){ //判断条件写在小括号里面,大括号里面写条件判断成功后的代码内容
console.log('1111'); （类似print）
}
else{
console.log('222');
}
多条件判断
if(a > 1){
// console.log('1111');
// var hhhh = document.getElementById('d1');
// hhhh.innerText = '彭于晏';
}else if(a<1){
console.log('2222');
}else {
console.log('3333');
}
运算符
比较运算
> < == != >= <= === !==
var a = 2;
var b = '2';
a == b; true 弱等于
a === b; false 强等于
a != b; false
a !== b; true
算术运算
+ - * / % ++ --
++ 自增 1
-- 自减 1
var a = 2;
a++ 先执行逻辑 +1
++a 先+1 再执行逻辑
简单示例:
if (++a === 4){ //（a++ === 3）
console.log('xxx');}
else{
console.log('ooo');};
switch判断
用于判断等于某些值（只能放数字）
var num = 200;
switch(num++){
case 10:
console.log('未成年');
break;
case 18:
console.log('成年');
break;
case 35:
console.log('老年');
break;
case 100:
console.log('....');
break;
default:
console.log('太大了');};
异常捕获
try{
console.log(xx);
}
catch(e){
console.log(e);
}
finally{
console.log('sssss');
}
循环
for循环
var names = ['老男孩', '肖峰', '吴超']
for(var i=0;i<names.lenght;i++){ js里for变例的i为索引
console.log(i, names[i])
}
循环自定义对象--python字典
for (var i in d){
console.log(i,d[i]); #不要用d.i来取值，没有 i 属性
}
函数
普通函数
function f1(a,b){
return a+b;
}
// 执行: f1(1,2) -- 3
function f1(a,b){
return a,b;
};
f1(1,2); //不能返回多个值: 2
匿名函数
一般用于当做参数使用
function (arg){
return arg + 1;
}
——————————————————————————————
var a = function (a,b){
console.log('xxx');
}
var d = {'xx':'oo','f':function (a,b){
console.log('xxx');
}};
执行:d.f(1,2); -------'xxx'
自执行函数
一般用于做数据隔离使用，因为JS中是以函数为作用域，所以当js代码比较多时，通过自执行函数做数据隔离
(function () {
alert('自执行函数!')
})()
JSON
JSON.stringify 序列化
var info = {name:'alex',age:19,girls:['钢弹','铁锤']}
var infoStr = JSON.stringify(info)
console.log(infoStr) # '{"name":"alex","age":19,"girls":["钢弹","铁锤"]}'
JSON.parse 反序列化
//反序列化时键不能是数字且必须有双引号
var infoStr = '{"name":"alex","age":19,"girls":["钢弹","铁锤"]}'
var info = JSON.parse(infoStr)
console.log(info)
应用场景：
网络中数据传输本质上是基于字符串进行，如果想要把一个js的对象通过网络发送到某个网站，
就需要对对象进行序列化然后发送。（ajax会经常使用）
各语言之间数据类型不一定互通，需要一个中间人（json） python->json->...->json->java
DOM对象 文档对象模型
是一种用于HTML的编程接口
它给文档（HTML文件）提供了一种结构化的表示方法
可以改变文档的内容和呈现方式
DOM相当于是一个模块，提供了关于HTML文档中对标签进行操作的功能（动态调整文档中的元素）
选择器
直接查找选择器
html代码:
<div class="c1" id="d1"></div>
<div class="c1 c2" id="d2"></div>
js代码
document：代表HTML文档对象
document.getElementById(arg) // 根据ID获取一个标签对象
document.getElementsByClassName(arg) // 根据class属性获取标签对象集合
document.getElementsByName(arg) // 根据name属性值获取标签对象集合
document.getElementsByTagName(arg) // 根据标签名获取标签对象集合
示例1: var d1 = document.getElementById('d1');
d1.style.height = '600px';
示例2：
创建几个div标签，统一设置为黄色
然后通过JavaScript代码将第一个div标签改为红色
var a = document.getElementsByTagName("div")
a[0].style.backgroundColor="red"
间接查找选择器
js代码:
var div1 = document.getElementsByClassName('c1')[0];
div1.nextElementSibling.style.color = 'red'; 找下一个兄弟标签,并改了色
div1.previousElementSibling; 找上一个兄弟
div1.firstElementChild; 找第一个儿子
div1.lastElementChild; 找最后一个儿子
div1.children; 找所有儿子,是一个数组
div1.parentElement; 找到自己的父级标签
文本操作
nnerText 获取文本
var a = document.getElementById('d1')
a.innerText; 只获取文本内容
设置文本
a.innerText = '<a href="">校花</a>'; 不能识别标签,单纯的文本内容
获取文本包含标签
var d = document.getElementsByClassName('c1')[0];
d.innerHTML; 获取的内容包含标签
设置文本
d2.innerHTML = '<a href="">dream</a>'; 能够识别标签,生成标签效果
值操作
html
<input type="text" name="username" id="username" >
示例
var inp = document.getElementById('username'); 找到标签
inp.value; 获取值 （value 用来进行值操作）
inp.value = 'XXX'; 修改值
BOM对象 浏览器对象模型
弹框
alert('xx');
confirm('are you sure?')
location对象
location.href; 获取当前页面的地址（url路径）
location.href = 'http://www.baidu.com'; 跳转到这个网址上
location.reload(); 刷新当前页面
计时器
一段时间之后执行某个任务
var t = setTimeout("console.log('xxx')",1000);
var t = setTimeout(function(){confirm('alert('xx')')},5000);
t就是浏览器用来记录你的计时器的标识数字：
清除:clearTimeout(t)
每隔一段时间执行某个任务
设置:var t = setInterval(function(){confirm('弹个框!!')},3000);
清除:clearInterval(t); //6
jQuery
jQuery：是一个javascript库
核心理念是write less,do more(写得更少,做得更多)
内部帮我们把几乎所有功能都做了封装，相比基于DOM、BOM的操作会更加简单，兼容性更好
jQuery引入
本身是一个js文件
网络地址引入
script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
本地文件引入
<script src="jquery.js"></script>
另起一个script标签来写script代码
或写在js文件里,
再
<script src="test3(3).js"></script>导入
最好的写法
<head>
<script>
$(function () { // 文档 加载完 执行一次 能写多次 最好的写法
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="js1.js"></script>
<script src="js2.js"></script>
})
window.onload = function () { // 文档 图片 视频 音频 都加载完 执行一次 写多次会覆盖前面的
}
$(window).ready(function () { // 文档 图片 视频 音频 都加载完 执行一次 能写多次
})
$(document).ready(function () { // 文档 加载完 执行一次 能写多次
})
</script>
</head>
JQuery和dom对象的转换
$ == Jquery
dom对象 _> jq对象
$(dom对象)
jq对象 _> dom对象
jq对象[0]
选择
选择器
基本选择器
$('*') 通用选择器
$('#d1') id选择器
var d1 = $('#d1'); -- jquery对象 -- jQuery.fn.init [div#d1]
a.css({"background-color":"blue","height":"300px"})
var d = document.getElementById('d1'); -- 原生dom对象
jquery对象和dom对象之间不能调用互相的方法
a[0] -- dom对象
$(d) -- jquery对象
$('.c1') 类选择器
$('span') 元素选择器
$('标签名称')
$('#d1 , .c2') 组合选择
$('#d1,.c2').css('background-color','green'); 并集
$('#d1.c2').css('background-color','green'); 交集
$('#d1,.c2')[1]; -- 索引为1的dom对象
$('#d1,.c2').eq(1); -- 索引为1 的jquery对象
$('div span') 层级选择器
后代选择器 $('div span')
子代选择器 $('#li>span')
毗邻选择器 $('#li+span')
弟弟选择器 $('#li~span')
$('[xx]') 属性选择器
$('[xx]').css('color','green');
$('[xx="oo"]').css('color','pink');
$('[属性^="值"]') 开头
$('[属性$="值"]') 结尾
$('[属性*="值"]') 包含
$('[属性!="值') 不等于
表单选择器
html代码
<form action="">
<input type="text" id="username">
<input type="password" id="pwd">
<input type="submit">
</form>
jquery代码
$(":input") 找到所有input标签
$(':text') 找到所有input且type=text的标签
$(":password") 找到所有input且type=password的标签
$(":radio") 找到所有input且type=radio的标签
$(":checkbox") 找到所有input且type=checkbox的标签
进一步选择
$("选择器:筛选器") 优先
$("选择器:筛选器")
:first 第一个
:last 最后一个
:eq(index) 按照索引
选择器1:has(选择器2) // 找子代中包含选择器2的选择器1的标签
选择器1:not(选择器2) // 选择器1中排除掉选择器2的标签
:odd 奇数
:even 偶数
$("选择器").筛选器方法
html代码
<ul>
<li>迪丽热巴</li>
<li class="c1">唐艺昕</li>
<li>吴彦祖</li>
<li class="c2">彭于晏</li>
<li>
<span>张天爱</span>
</li>
<li>吴亦凡</li>
</ul>
.parent() 找父标签
var c = $('.c1');
c.parent();
父标签
c.parents();
直系的祖先辈
c.parentsUntil('body');
往上找,直到找到哪个标签为止
不包含body标签
.children() 找子标签
var u = $('ul');
u.children(); 找到所有儿子标签
u.children('.c1'); 找到符合 .c1 的儿子标签
.next() 找下面的兄弟
var c = $('.c1');
c.next();
nextAll(); 下面所有兄弟
c.nextUntil('.c2'); 下面到某个兄弟为止,不包含那个兄弟
.prev() 找上面的兄弟
var c = $('.c1');
c.prev();
c.prevAll(); 上面所有兄弟,注意顺序都是反的
c.prevUntil('.c1'); 上面到某个兄弟为止,不包含那个兄弟
.siblings() 找兄弟
c.siblings(); 找到自己的所有兄弟
c.siblings('.c1'); 筛选兄弟中有class值为c1的标签（可以组合）
.find() 找后代
$('li').find('span'); 等同于css的 li span 层级选择器
.first()/.last()
$('li').first(); 找所有li标签中的第一个
$('li').last(); 找所有li标签中的最后一个
.eq(索引值)
$('li').eq(0); 按照索引取对应的那个标签,索引从0开始
$('li').eq(-1); 最后一个
.text() / .html() 取文本/标签
同js的innerText和innerHTML
取
c.text(); 不带标签
c.html(); 带标签
设置
c.text('文本')
c.html('标签'); -- 文本--"<a href=''>皇家赌场</a>"
.has() 包含某个子代的父标签
.filter('#l2') 包含某个选择器的当前标签
.not(选择器) 不包含某个选择器的当前标签
.eq(index)
.slice(index1,index2) 切片
操作
标签的操作
创建标签
$('<a>')
append/prepend添加标签
html代码:
<div>
<ul>
<li>1</li>
<li>2</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<button id="b0">添加</button>
jQuery代码:
$('#b2').click(function () {
last = $('<li>') //生成一个标签
li.text('3') //文本为3
$('li:eq(2)').before(li) //在第..前加..
})
// $('li:eq(1)').after(li)在第..后加..
父标签 . append(子标签) //子标签添加到父标签的子代的最后
子标签. appendTo(父标签) //子标签添加到父标签的子代的最后
父标签 . prepend(子标签) //子标签添加到父标签的子代前面
子标签.prependTo(父标签) //子标签添加到父标签的子代前面
a.after(b) // 在a标签后面添加b标签
a.before(b) // 在a标签前面添加b标签
父标签 . append(子标签)
子标签添加到父标签的子代的最后
子标签. appendTo(父标签)
子标签添加到父标签的子代的最后
父标签 . prepend(子标签)
子标签添加到父标签的子代前面
子标签.prependTo(父标签)
子标签添加到父标签的子代前面
a.after(b)
在a标签后面添加b标签
a.before(b)
在a标签前面添加b标签
detach/remove 删除标签
html代码:
<div>
<ul>
<li>1</li>
<li>2</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<button id="b1">删除</button>
jQuery代码:
detach删除,可恢复事件:
$('#b1').click(function () {
last = $('li:last').detach()
})
remove删除,不可恢复事件1:
$('#b3').click(function () {
$('li').remove()
})
detach append 删除恢复标签
html代码:
<div>
<ul>
<li>1</li>
<li>2</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<button id="b1">删除</button>
<button id="b2">恢复</button>
jQuery代码:
var last
$('#b1').click(function () {
last = $('li:last').detach()
})
$('#b1').click(function () {
last = $('li:last').detach()
})
empty append 清空恢复标签
html代码:
<div>
<ul>
<li>1</li>
<li>2</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<button id="b3">清空</button>
<button id="b2">恢复</button>
jQuery代码:
var last
$('#b3').click(function () {
last = $('ul').empty()
})
清空标签中的内容
$('#b2').click(function () {
$('ul').append(last)
})
clone(ture) 克隆(和事件)标签
html代码:
<div>
<ul>
<li>1</li>
<li>2</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<button id="b4">克隆</button>
jQuery代码:
$('#b4).click(function () {
var li = $('li:last').clone(true)
li.text(Number(li.text()+1))
$('ul').append(li)
})
$('li').click(function () {
alert($(this).text())
})
替换
a.replaceWith(b) // 用b替换a
b.replaceAll(a) // 用b替换a a可以是标签 选择器
replaceWith(b) 替换标签
html代码:
<div>
<ul>
<li>1</li>
<li>2</li>
</ul>
</div>
<button id="b6">替换</button>
jQuery代码:
$('#b1').click(function () {
var l2 = $('li:last')
var li = l2.clone()
li.text(Number(li.text()) + 1)
// l2.replaceWith(li)
li.replaceAll('li:eq(1)')
})
$('li').click(function () {
alert($(this).text())
})
值操作
值的操作
val()
class类值操作
操作样式一般通过class而不是id
html代码
<div class="c1"></div>
css代码
.c1{
background-color: red;
height: 100px;
100px; }
.c2{
background-color: green; }
jquery代码
$('div').addClass('c2'); //动态增加类值
$('div').removeClass('c2'); //删除
$('div').toggleClass('c2'); //如果不存在则添加类，如果已设置则删除
var t = setInterval("$('div').toggleClass('c2');",500); //背景闪烁跳动
背景闪烁跳动
var t = setInterval("$('div').toggleClass('c2');",500);
val值操作
html代码：
<input type="text" id="username">
<input type="radio" class="a1" name="sex" value="1">男
<input type="radio" class="a1" name="sex" value="2">女
<input type="checkbox" class="a2" name="hobby" value="1">抽烟
<input type="checkbox" class="a2" name="hobby" value="2">喝酒
<input type="checkbox" class="a2" name="hobby" value="3">烫头
<select name="city" id="s1">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">深圳</option>
</select>
<select name="lover" id="s2" multiple>
<option value="1">波多</option>
<option value="2">苍井</option>
<option value="3">小泽</option></select>
jquery代码
获取值：
文本输人框：$('#username').val();
单选radio框：$('.a1:checked').val(); checked 代表被选中的
多选checkout框：$('.a2:checked').val()是不行的;需要循环取值，如下：
var d = $(':checkbox:checked');
for (var i=0;i<d.length;i++){
console.log(d.eq(i).val());
}
单选select框：$('#city').val()；
多选select框：$('#lover').val();
修改值:
文本输入框：$('#username').val('一串文字');
单选radio框：$('.a1').val([2]); #注意内容必须是列表，写的是value属性对应的值
多选checkout框：$('.a2').val(['2','3'])
单选select框：$('#city').val('1')；
多选select框：$('#lover').val(['2','3'])
属性的操作
.attr('属性') // 获取属性的值
.attr('属性','值') // 设置把HTML元素我们自己自定义的DOM属性
.removeAttr('属性') // 删除某个属性
.prop('checked') //radio checkbox select(option)
.prop('checked',true) //设置HTML元素本身就带有的固有属性
事件绑定
click(function () 点击
jQuery绑定
jQuery中的click 当点击按钮时执行一段 JavaScript
点击事件绑定：
$('.c1').click(function () {
//$(this)表示的就是它自己
$(this).css('background-color','green');
// $('.c1').css('background-color','green');
// $("#d1").css({"background-color":"blue","height":"800px"})
})
$('button').bind('click',function () { 另一种方法
})
$('button').unbind('click') 解绑
js绑定
js中的onclick等同于jQuery中的click
var b1 = document.getElementById('b1'); 用id获取doc对象
b1.onclick = function () {
alert(456)
}
focus(function () 获取焦点
当 字段获得焦点时发生 focus 事件
$('#i1').focus(function () {
console.log('聚焦了')
$(this).val('')
$(this).next().remove()
})
blur(function () 失去焦点时触发
$('#i1').blur(function () {
console.log('失去焦点了')
if ($(this).val() === '') {
var sp = $('<span>')
sp.text('不能为空')
$(this).after(sp)
}
})
change(function () 内容变化
$('#s1').change(function () {
console.log('内容变化了')
})
keyup(function (e) 按键启动
$('#i1').keyup(function (e) { //function拿到的第一个参数是按键的键名
// console.log(e.keyCode)
if (e.keyCode === 27) { //利用keyup中的keyCode方法拿键的ascii码
alert(123)
}`
})
hover(function () 鼠标悬浮
$('.fa').hover(function () {
console.log('悬停了')
}, function () {
console.log('不悬停了')
})
同以下
$('.fa').mouseenter(function () {
console.log('鼠标进来了')
})
$('.fa').mouseleave(function () {
console.log('鼠标出去了')
})
或
$('.fa').mouseover(function () {
console.log('鼠标过来了')
})
mouseenter 鼠标进入
mouseleave 鼠标离开
hover = mouseenter + mouseleave
事件的绑定和解绑
$('button').bind('click',function () {
}) #绑定
$('button').click(function () {
}) #绑定
$('button').unbind('click') #解绑
alert 添加事件
html代码:
<div>
<ul>
<li>1</li>
<li>2</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<button id="b0">自增</button>
jQuery代码:
$('li').click(function () {
alert($(this).text())
})
// $('li:eq(1)').after(li)
模态框
js代码
$(function () { // 页面 视频 图片 音频 加载好再调用函数
var flag = true;
// 全选 + 取消
$('#a').click(function () {
$('tbody :checkbox').prop('checked', flag) //prop设置属性
if (flag) {
$(this).text('取消')
} else {
$(this).text('全选')
}
flag = !flag
})
})
事件冒泡
儿子父亲都被绑定,会一层层网上冒泡出发父事件执行.
事件委托
利用事件冒泡原理,
bootstrap
导入顺序
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css"> <!--导入bootstarp的css-->
<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css"> <!--导入font-awesome的css-->
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <!--导入jquery的js-->
<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script> <!--导入bootstarp的js-->
</head>
each 循环 day41的代码总结到each循环
$('选择器').each(function(index,dom){
$(this) // 循环出来的每个jq对象
// index 索引 dom dom对象
})
事件冒泡
儿子父亲都绑定事件,触发儿子的事件,会一层层往上冒泡触发父辈的事件执行.
阻止事件冒泡
$('.son').click(function (e) {
alert('你是我儿子')
return false // 阻止事件冒泡
//e.stopPropagation() // 阻止事件冒泡
})
事件委托
利用了事件冒泡的原理,将事件委托给父亲,儿子触发事件时,执行父亲的事件.
// 事件委托
$('tbody').on('click','button',function () {
$(this).parents('tr').remove()
})
bootstrap
按钮
表格
表单
模态框
分页
面板
导航
图标