前端
基础参考文档:https://www.cnblogs.com/Dominic-Ji/p/10864457.html
跟用户直接打交道的页面都可以称之为是前端
- HTML
- CSS
- JS
- jQuery
- Bootstrap
HTML
超文本标记语言(前端页面基本上都是有HTML组成的)
HTML是所有网页的骨架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
HTML标签类型
1.双标签
<title>Title</title>
2.自闭和标签
<meta charset="UTF-8">
标签重要的属性
id：定义标签的唯一ID，HTML文档树中唯一
class：为html元素定义一个或多个类名（classname）(CSS样式类名)
HTML注释
<!--单行-->
<!--
多行注释1
多行注释2
-->
head内常用标签
# head内书写的标签不是给人看的 主要是给浏览器看的
标签 意义
<title></title> 定义网页标题
<style></style> 定义内部样式表
<script></script> 定义JS代码或引入外部JS文件
<link/> 引入外部样式表文件或网站图标
<meta/> 定义网页原信息
body内常用标签
<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除</s>
<p>段落标签1</p>
<p>段落标签2</p>
<!--换行--><br>
<p>段落标签3</p>
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<!--水平线--><hr>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
<p>撒旦好看的 卡刷道具卡手机打开</p>
<p>大于号></p>
<p>小于号<</p>
<p>&符号&</p>
<p>人民币¥</p>
<p>版权©</p>
<p>商标®</p>
div标签与span标签
div是用来做页面的前期布局
span主要用来写局部文字
块儿级标签 div
独占浏览器一整行
行内标签 span
自身文本多大就占多大
img标签
<img src="https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1376127766,1954361621&fm=26&gp=0.jpg" alt="这是个妹纸" title="不是我喜欢的类型" width="1000" height="200">
src放图片的路径可以是本地也可以是网上的
alt图片加载不出来的时候提示信息
title鼠标悬浮上去之后显示的信息
width、height调一个另外一个自动调节
a标签
<a href="https://www.sogo.com" target="_self">选我</a>
<a href="https://www.meizitu.com" target="_blank">选我</a>
<a href="" id="d1">头部</a>
<div style="height: 1000px;background-color: red"></div>
<div style="height: 1000px;background-color: greenyellow"></div>
<div style="height: 1000px;background-color: yellow"></div>
<a href="#d1">尾部</a>
列表与表格
# 无须列表
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
页面有规则排列的文字等基本上用的都是无序列表
# 有序列表
<ol type="1" start="2">
<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>ID</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>jason</td>
<td>18</td>
</tr>
<tr>
<td>2</td>
<td>frank</td>
<td>28</td>
</tr>
<tr>
<td>3</td>
<td>egon</td>
<td>84</td>
</tr>
</tbody>
</table>
tr表示一行
th和td都是普通文本
form表单
form能够获取用户数据并发送到后端服务器
获取用户数据的标签一般都需要有name属性 类似于字典的key，负责把数据提交给后端
前端中属性名=属性值的话，等号后面的部分可以省略可以
multiple多个
textarea可以书写多行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>注册功能</h1>
<form action="" method="" enctype="application/x-www-form-urlencoded" >
<p>
<lable for="d1">username</lable>
<input type="text" name="username" id="d1">
</p>
<p>
<lable for="">password:<input type="password" name="password"></lable>
</p>
<p>birthday:
<input type="date" name="birthday">
</p>
<p>gender:
<input type="radio" name="gender">男
<input type="radio" name="gender" checked>女
<input type="radio" name="gender">其他
</p>
<p>hobby:
<input type="checkbox" checked>篮球
<input type="checkbox">足球
<input type="checkbox" checked>双色球
</p>
<p>省份:
<select name="" id="">
<option value="">北京</option>
<option value="">上海</option>
<option value="">深圳</option>
</select>
</p>
<p>前女友:
<select name="" id="" multiple>
<option value="">新垣结衣</option>
<option value="">斯嘉丽</option>
<option value="">凤姐</option>
</select>
</p>
<p>附件:
<input type="file">
<input type="file" multiple>
</p>
<p>个人简介:
<textarea name="" id="" cols="30" rows="10"></textarea>
<!--
submit: 提交给后端，button
button：绑定事件
reset: 刷新页面
value：默认值，即显示的内容
-->
</p>
<input type="submit" value="注册">
<input type="button" value="按钮">
<input type="reset" value="重置">
<button>注册</button>
</form>
</body>
</html>
能够触发form表达提交动作的按钮有两个
<input type="submit" value="注册">
<button>注册</button>
获取用户数据的标签都一个有name属性
name属性类似于字典的key
用户输入的数据会被存放到标签的value属性中
<form action="" method="" enctype="">
action用来控制数据提交的路径
method用来控制数据的提交的方式
get请求
朝别人要数据
eg:访问百度首页
post请求，登录，注册
朝别人提交数据
eg:提交用户名和密码
enctype 用来控制数据的编码格式
multipart/form-data 该格式支持提交文件
application/x-www-form-urlencoded 不支持文件
<lable for="d1">username</lable> 唯一指向id="d1"
CSS
# 就是用来给HTML标签添加好看的样式的,样式最好使用CSS来指定
# 注释
/*单行注释*/
/*
多行注释1
多行注释2
*/
# 三种引入css的方式
<link rel="stylesheet" href="mycss.css">
<style>
h1 {
color: red;
}
</style>
<h1 style="color: yellow">
如何查找标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
id选择器
#d1 {
color: red;
}
类选择器
.c1 {
color: blue;
}
标签选择器
div {
color: orange;
}
通用选择器
* {
color: pink;
}
后代选择器
div span {
color: red;
}
儿子选择器
div>span {
color: greenyellow;
}
毗邻选择器 紧挨着的下一个
div+span {
color: blue;
}
弟弟选择器，同级别所有span
div~span {
color: pink;
}
属性，含有该属性的所有标签
[name] {
color: greenyellow;
}
[name='jason'] {
color: blue;
}
p[name='jason'] {
color: gold;
}
div {
color: red;
}
span {
color: red;
}
p {
color: red;
}
div,
span,
p {
color: red;
}
#d1,.c1,span {
color: red;
}
body {
background-color: black;
}
a {
color: darkgrey;
}
伪类选择器 hover鼠标悬浮上去之后出现的效果
a:hover {
color: green;
}
</style>
</head>
<body>
<a href="https://www.mzitu.com">选择</a>
<h1 class="c1">一上午又快过去了</h1>
<p class="c1">何处望神州，满眼风光北鼓楼</p>
<span class="c2">圣诞节安徽的哈萨克的</span>
<div id="d1">div1</div>
<div id="d2">div2</div>
<span>div上面的span</span>
<div name="haoda">div
<span>div>span</span>
<p>div>p
<span>div>p>span</span>
</p>
<span>div>span</span>
</div>
<p name="jason">div下面的p</p>
<span name="frank">div下面的span</span>
<span name="jason">div下面的span</span>
<span>div下面的span</span>
<div id="d11">div</div>
<p class="c1">p</p>
<span>span</span>
</body>
</html>
选择器优先级
1.当选择器相同的时候
采用的是就近原则
2.当选择器不同的时候,越精确，优先级越高
内联选择器（标签内些的） > id选择器 > 类选择器 > 标签选择器
如何设置样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 要块级标签可以设置宽和高 */
/*div {*/
/* height: 400px;*/
/* 400px;*/
/*}*/
/*span {*/
/* height: 400px;*/
/* 400px;*/
/*}*/
p {
font-size: 48px;
/* 变细 */
font-weight: lighter;
/* 变粗 */
/*font-weight: bolder;*/
/* 变色 */
/*color: red;*/
/*color: #ffffff;*/
/*color:rgb(128,2,128);*/
/* 居中 */
text-align: center;
/* 首行缩进 */
text-indent: 34px;
}
/* 修改a标签 */
a {
text-decoration: none;
color: black;
}
</style>
</head>
<body>
<div>div</div>
<p>还是答案是</p>
<a href="">的撒结婚登记ask的</a>
</body>
</html>
背景
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
height: 600px;
600px;
/*background-color: red;*/
/*background-image: url("http://img.jj20.com/up/allimg/tx23/210420023526653.jpg");*/
/*background-repeat: no-repeat;*/
background: red url("http://img.jj20.com/up/allimg/tx23/210420023526653.jpg") no-repeat;
}
/* 背景色不动 */
background-attachment: fixed;
</style>
</head>
<body>
<div></div>
</body>
</html>
头像
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
/*background-color: #ff232b;*/
400px;
height: 400px;
border-radius: 50%;
background-image: url("http://img.jj20.com/up/allimg/tx23/210420023526652.jpg");
/*隐藏标签，不保留区域*/
/*display: none;*/
/*隐藏标签，保留区域*/
/*visibility: hidden;*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>
盒子模型
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body {
margin: 0;
}
p {
background-color: #ff232b;
/*外边距*/
margin: 0;
border: 3px solid black;
padding: 10px;
}
</style>
</head>
<body>
<p>我是一个p标签</p>
</body>
</html>
浮动
是页面布局必备的
但是浮动的元素会脱离文档流造成父标签塌陷的问题
需要你用清除浮动带来的影响
.clearfix:after {
content: "";
display: block;
clear: both;
}
谁塌陷就给谁加上clearfix类属性即可
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#d1 {
height: 100px;
100px;
background-color: red;
float: left;
}
#d2 {
height: 100px;
100px;
background-color: green;
float: right;
}
#d3 {
border: 5px solid black;
}
.clearfix:after {
content: "";
display: block;isplay: block;
clear: both;
}
</style>
</head>
<body>
<div id="d3" class="clearfix">
<div id="d1"></div>
<div id="d2"></div>
</div>
</body>
</html>
溢出
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
height: 50px;
50px;
border: 3px solid black;
/*overflow: hidden;*/
overflow: auto;
}
</style>
</head>
<body>
<div>
sssssssssssssss
ddddddddd
fffffffffff
ggggggggggggggggggggg
jjjjjjjjjj
</div>
</body>
</html>
定位
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
height: 100px;
100px;
border: 3px solid black;
/*固定定位*/
/*position: fixed;*/
/*相对定位*/
/*position: relative;*/
/*绝对定位*/
position: absolute;
}
</style>
</head>
<body>
<div>
sssssssssssssss
ddddddddd
fffffffffff
ggggggggggggggggggggg
jjjjjjjjjj
</div>
</body>
</html>
Z-index
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
height: 100px;
100px;
border: 3px solid black;
z-index: 999;
background-color: grey;
/*透明度*/
opacity: inherit;
}
</style>
</head>
<body>
<div>
sssssssssssssss
ddddddddd
fffffffffff
ggggggggggggggggggggg
jjjjjjjjjj
</div>
</body>
</html>
JavaScript
js也是一门编程语言
// 这是单行注释
/*
这是
多行注释
*/
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
这里是js代码;
</script>
<script src="01.html"></script>
</head>
<body>
</body>
</html>
变量
再js中定义变量需要使用关键字var,定义群居变量
var name = 'jason';
es6新语法，有单独的作用域
let name = 'jason';
//小牛试刀
var name = 'syy'
undefined
name
"syy"
name = 'not syy'
"not syy"
name
"not syy"
常量
const pi = 3.14
#常量不能修改
数值类型
var a = 12.34;
var b = 20;
var c = 123e5; // 12300000
parseInt("123") // 返回123
parseInt("ABC") // 返回NaN,NaN属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。
parseFloat("123.456") // 返回123.456
字符类型
var res = 'jason';
var res1 = "jason";
// 模板字符串
var name = 'jason';
var age = 18;
undefined
var res = `
my name is ${name} and my age is ${age}
`
undefined
res
"
my name is jason and my age is 18
"
#shift + 回车
布尔值(Boolean)
var a = true;
var b = false;
//空字符串 0 null undefined NaN 都是false
//null 空
//undefined 未定义
函数
// python中的函数，def
def index(a,b):
print(a,b)
// js中的函数，function
function index(a,b){
console.log(a,b)
return 666
}
// 箭头函数
var f = v => v;
// 等同于
var f = function(v){
return v;
}
var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2){
return num1 + num2; //这里的return只能返回一个值，如果想返回多个值需要自己手动给他们包一个数组或对象中
}
运算符
var x=10;
var res1=x++; //先赋值，后x自增,增1次
var res2=++x; //先x自增，后赋值，增2次
res1
10
res2
12
//弱等于中，数据类型可以转化，强等于中，不再转化
'5' == 5
true
'5' === 5
false
5 === 5
true
//且或非
&& || !
//赋值运算符
= == === += -= /=
//判断，if-else
var a = 10;
if (a>5){
console.log('yes')
}
else {
console.log('no')
}
yes
//if-else if-else
var a = 10;
if (a>5){
console.log('大于5')
}
else if (a<5){
console.log('小于5')
}
else {
console.log('等于5')
}
VM1811:3 大于5
//判断，case
var day = new Date().getDay();
switch (day) {
case 0:
console.log('Sunday');
break;
case 1:
console.log('Monday');
break;
default:
console.log('...')
}
...
//循环
for (var i=0;i<10;i++) {
console.log(i);
}
VM2198:2 0
VM2198:2 1
VM2198:2 2
VM2198:2 3
VM2198:2 4
VM2198:2 5
VM2198:2 6
VM2198:2 7
VM2198:2 8
VM2198:2 9
var i=0;
while (i<10) {
console.log(i);
i++;
}
VM130:3 0
VM130:3 1
VM130:3 2
VM130:3 3
VM130:3 4
VM130:3 5
VM130:3 6
VM130:3 7
VM130:3 8
VM130:3 9
自定义对象 == python中的字典
// js中创建自定义对象的方式
// 方式1
var obj1 = {'username':'jason','password':123}
obj1.username
"jason"
// 方式2
var obj2 = new Object();
obj2.name = 'frank'
obj2.age = 66
obj2.name
JSON对象
var str1 = '{"name": "Alex", "age": 18}';
var obj1 = {"name": "Alex", "age": 18};
// JSON字符串转换成对象 json.loads()
var obj = JSON.parse(str1);
// 对象转换成JSON字符串 json.dumps()
var str = JSON.stringify(obj1);
//对应关系
python json
dict字典 object对象
list,tuple列表元组 array数组
str string
int,float整形 浮点型 number数值类型
True true
False false
js与Windows交互
//打开，关闭窗口
window.open('http://www.baidu.com','','width=4')
window.close('http://www.baidu.com','','width=4')
//前进
history.forward()
//后退
history.back()
//获取当前的URL
location.href
"https://miaosha.jd.com/pinpailist.html"
//使用js代码实现Windows页面跳转
location.href = 'http://www.baidu.com'
//刷新当前页面
location.reload
//弹出指定值，所在窗口不一定支持窗口弹出
alter('hello')
confirm('请输入密码：')
prompt('请在下方输入'，'拿的答案')
//计时器
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
</style>
</head>
<body>
<script>
function index() {
confirm('请输入密码：')
}
setTimeout(index,3000)
</script>
</body>
</html>
//清除定时器
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
</style>
</head>
<body>
<script>
function index() {
confirm('请输入密码：')
}
clearTimeout(index,3000)
</script>
</body>
</html>
//循环弹出弹窗
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
</style>
</head>
<body>
<script>
function index() {
confirm('请输入密码：')
}
setInterval(index,3000)
</script>
</body>
</html>
//弹4次
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
</style>
</head>
<body>
<script>
function index() {
alert('你好啊')
function f() {
clearInterval(t)
}
setTimeout(f,9000)
}
var t= setInterval(index,3000)
</script>
</body>
</html>
//通过id查找标签
docunent.getElementById('d1')
//通过类查找标签
docunent.getElementsByClassName('c1')
//通过标签查找标签
docunent.getElementsByTagName('div')
//动态的设置链接
var aEle = document.createElement('a');
aEle
aEle.href = 'https://www.baidu.com'
aEle
aEle.innerText = '百度'
aEle
<a href="https://www.baidu.com">百度</a>
//把动态链接添加到指定标签
document.getElementsByTagName('div')[0].append(aEle)
//只拿标签内部的文本
var divEle = document.getElementsByTagName('div')[0]
undefined
divEle.innerText
"d1
c1 > d1"
//拿标签内部的文本，再解析内容
divEle.innerHTML
"d1
<p class="c1">c1 > d1 </p>
"
//通过js代码动态获取用户输入的内容
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
</style>
</head>
<body>
<div>
<input type="text" id="d1">
</div>
</body>
</html>
document.getElementById('d1').value
"777"
//按钮绑定事件，script标签要放到body的最后面
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button id="d1">点我</button>
<script>
var aEle = document.getElementById('d1'):
aEle.onclick = function () {
alter(123)
}
</script>
</body>
</html>
jQuery
# 需要提前下载才能使用或者使用网上提供的CDN服务
#下载
#网上的cdn，cdn的作用就是使文件不需要下载，直接可以被用户使用
https://www.bootcdn.cn/
js与jQuery绑定事件的区别
//使用js给指定内容加颜色
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<p id="d1">ppp</p>
</body>
</html>
$('#d1').css('color','red')
//统计标签
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<p id="d1">ppp</p>
<div>1</div>
<div>2</div>
<div>3</div>
</body>
</html>
$('#d1').nextAll()
//开关灯
$('.c1').hasClass('c1')
true
$('.c1').removeClass('bg_green')
k.fn.init [div.c1.bg_red, prevObject: k.fn.init(1)]
$('.c1').toggleClass('bg_green')
k.fn.init [div.c1.bg_red.bg_green, prevObject: k.fn.init(1)]
$('.c1').toggleClass('bg_green')
// js
var pEle = document.getElementById('d1');
pEle.onclick = function(){
alert('123')
}
// jQuery
$('#d1').click(function(){
alert('123')
})
$('#d1').on('click',function(){
alert(123)
})
Bootstrap
需要提前下载或者使用CDN
Bootstrap里面的动态效果是基于jQuery实现的
也就意味着你再使用Boostrap的时候也需要导入jQuery
使用前端框架所有的标签样式你都可以不用自己写css代码
都是通过书写class属性值来操作的
布局容器
<div class="container c1">
左右两边有留白
</div>
<div class="container-fluid c2">
左右两边没有留白
</div>
栅格系统
<div class="container">
<div class="row">
<div class="col-md-6 c1">
<div class="row">
<div class="col-md-3 c1">
<div></div>
</div>
<div class="col-md-9 c1"></div>
</div>
</div>
<div class="col-md-6 c1"></div>
<br>
<div class="col-md-3 c1"></div>
<div class="col-md-9 c1"></div>
<br>
<div class="col-md-3 c1"></div>
<div class="col-md-3 c1"></div>
<div class="col-md-3 c1"></div>
<div class="col-md-3 c1"></div>
<br>
<!--<div class="col-md-3 c1"></div>-->
<!--<div class="col-md-10 c1"></div>-->
<br>
<div class="col-md-1 c1"></div>
<div class="col-md-1 c1"></div>
<div class="col-md-1 c1"></div>
<div class="col-md-1 c1"></div>
<div class="col-md-1 c1"></div>
<div class="col-md-1 c1"></div>
<div class="col-md-1 c1"></div>
<div class="col-md-1 c1"></div>
<div class="col-md-1 c1"></div>
<div class="col-md-1 c1"></div>
<div class="col-md-1 c1"></div>
<div class="col-md-1 c1"></div>
<div class="col-md-1 c1"></div>
</div>
</div>
获取用户数据的标签
添加样式就用
class='form-control'
额外的图标
也是需要提前下载才能用
http://www.fontawesome.com.cn/icons/qq/