一、HTML
1.定义
HTML是超文本标记语言,是结构化标准语言
2.基本信息
- DOCTYPE:规范
- head
- meta:描述网页,可以用来搜索引擎优化!
- body
3.基本标签
- 标题标签
- 段落标签
- 水平线标签
- 换行标签
- 粗体/斜体
- 特殊符号:&xx;
4.图像标签
<img src ="" alt ="">
src:图片地址(必填),(推荐)相对地址(../ --上一级目录),绝对地址
alt:图片名字(必填)
-->
5.超链接标签
<a href="" target="">显示信息</a>
href:必填
target:_blank /_self
---锚链接---
<a name="书签名"></a>
<a href="#书签名"></a>
---邮件链接:mailto:---
<a href="mailto:727869952@qq.com"></a>
6.列表
- 无序列表 ul li
- 有序列表 ol li
- 自定义列表 dl dt/dd
7.表格
<table>
<tr>:行
<td>:列(colspan:跨列|rowspan:跨行)
</td>
</tr>
</table>
8.视频和音频
- 视频元素:video
- 音频元素:audio
9.iframe内联框架
<iframe src="" name="名字" width="" height=""></iframe>
<a href="" target="名字"></a>
4.表单
1.表单提交方式
<form
action:表单提交的位置,可以是网站,也可以是一个请求处理地址
method:post,get 提交方式
get方式:我们可以在url中看到我们要提交的信息,不安全,高效
post方式:比较安全,传输大文件
>
</form>
2.表单语法
1.使用 : type,name,value
- 文本框 text
- 密码框 password
- 单选框 radio
- 多选框 checkbox
- 按钮 button/image/submit/reset
- 文件 file
2.自己的标签
-
下拉框
-
文本域
3.表单应用
- 只读:readonly
- 禁用:disabled
- 隐藏:hidden
4.表单初级验证
- placeholder:提示信息
- required:非空判断
- pattern:正则表达式
二、CSS
1.定义
Cascading Style Sheet 层叠级联样式表,是表现标准语言
2.语法
<style>
选择器{
声明1;
声明2;
声明3;
}
</style>
3.导入方式
- 行内样式:位于标签内
- 内部样式:写在style中
- 外部样式:link标签链接/@import导入
优先级:就近原则!!!
4.选择器
1.基本选择器
- 标签选择器
- class选择器
- id选择器 (全局唯一:在DOM中用到)
优先级: : id选择器>class选择器>标签选择器
2.层次选择器
- 后代选择器:选择body后面所有的p(祖籍)
/*后代选择器*/ 空格
body p{
background: red;
}
- 子选择器:选择body后的同级p(一代)
/*子选择器*/ 大于号
body > p{
background: blue;
}
- 相邻兄弟选择器:同类
/*相邻弟选择器,只有一个,相邻(向下)*/ +号
.active + p{
background: brown;
}
- 通用选择器
/*通用弟选择器,当前选中元素的向下的所有兄弟元素*/ ~号
.active~p{
background: green;
}
3.结构伪类选择器
-
first-child 第一个子元素
-
last-child 最后一个子元素
-
p:nth-child(1) 父级元素下的第几个p标签 (以父级)
-
p:nth-of-type(1) 父级元素下属于p标签的第几个 (以p)
4.属性选择器
- a[id]
- a[id=first]
- a[class*=“links”] (正则表达式:= *= ^= $=)
5.样式
1.span标签
重点突出的字!
2.字体
- font-family:字体
- font-size:大小
- font-weight:粗细
- color:颜色
3.文本
- 颜色:color
- 文本对齐的方式 :text-align:center
- 首行缩进 :text-indent
- 行高 :line-height(上下居中:行高和块的高度一致)
- 装饰 :text-decoration
- 文本图片对齐:vertical-align:middle
4.阴影
text-shadow:水平偏移,垂直偏移,阴影半径,阴影颜色;
5.超链接伪类
a:hover
6.列表
list-style:none/circle/decimal/square
7.背景
- background-color:red
- background-image:url(…/images/d.fig)
- background-position:270px 10px (设置图片位置,重点!!!)
- background-repeat:no-repeat (设置不重复)
6.盒子模型
盒子计算:margin+border+padding+内容宽度
1.边框
border:粗细,样式,颜色 (border: 1px solid red;)
2.内外边距
设置:按照顺时针旋转
margin:0px padding:0px
margin:0px 0px padding:0px 0px
margin:0px 0px 0px 0px padding:0px 0px 0px 0px
3.圆角边框
4个角 圆圈:圆角=半径+边框
border-radius:50px 20px 10px 5px;
4.盒子阴影
margin:0 auto 居中:(块元素有固定宽度)
box-shadow:10px 10px 100px yellow
7.浮动
1.标准文档流
所有的元素都在一个框框内
2.行内元素与块元素
-
行内元素:不独占一行
-
块级元素:独占一行
3.display实现行内与块的转换
display:
- inline:行内元素
- inline-block:是块元素,但是可以内联,在一行!
- none:消失
4.float
- float:left;
- float:right;
难题:父级边框塌陷问题?
-
1.增加父级元素的高度
-
2.增加一个空div标签,设置样式clear:both
-
3.父级元素增加overflow:hidden
-
在父类添加一个伪类:after(常用)
#father:after{
content: '';
display: block;
clear:both;
}
8.定位
1.相对定位
相对于原来的位置进行偏移
position:relative;
它仍然在标准文档流中!原来的位置会被保留。
2.绝对定位
对于父级或浏览器的位置,进行指定的偏移,
position: absolute;
它不在标准文档流中!原来的位置不会被保留。
3.固定定位
position: fixed;
4.z-index
图层,默认是0,最高999
设置了absolute,才能设置z-index
9.opcity:设置透明度
opcity:0.5
三、JavaScript
1.定义
一门世界上最流行的脚本语言,一个合格的后端人员,必须要精通javaScript!
2.引入
- 内部标签
3.数据类型
1.整体概述
1.变量 es6 let
2.number
3.字符串 ‘’ (推荐) “ ”
4.布尔值
5.逻辑运算
6.比较运算符 ===
7.浮点数
8.数组 :不需要保证元素是相同类型
9.对象:
- 每个属性之间使用逗号隔开,最后一个不用
- 对象是大括号,数组是中括号!
2.重点数据
1.字符串
- 正常字符串我们使用单引号(’’)或双引号( “”)
- 多行字符串:tab上面的键(``)
- 模板字符串:${变量名}
- 长度:str.length
- 字符串不可变!!!
- 大小写 toUpperCase() toLowerCase()
- 模式匹配 indexOf()
- 截取 substring()
2.数组
思想:如何存?如何取?
- 可以包含任意的数据类型
- 长度:arr.length 可变!!
- 模式匹配
- 截取 slice()
- 尾部操作:push() 入 pop() 出
- 头部操作: unshift() 入 shift() 出
- 排序:sort()
- 反转: reverse()
- 连接: concat()
- 连接符: join
3.对象
若干个键值对,JS中的所有的键都是字符串,值是任意对象
var 对象名 = {
属性名:属性值,
属性名:属性值,
属性名:属性值
}
- 赋值:person.name = “xiaohei”
- 删除:delete person.name
- 添加:person.haha = “haha”
- 判断:
- “toString” in person —(继承的也算)
- person.hasOwnProperty(“toString”) —只能允许对象自己拥有这个属性
4.流程控制
- 遍历 :通过for of/for in 下标
var arr = [3,4,5];
for(var x of arr){
console.log(x);
}
4.严格检查格式
ES6,写在JS第一行
‘use strict’
5.函数
1.定义方式
-
function abs(x){}
-
var abs = function(x){}
2.参数问题
-
arguments代表传递进来的所有的参数,是一个数组
-
rest 获取除了已经定义的参数之外的所有参数(ES6)–可变参数
function aaa(a,b,...rest){ console.log("a="+a); console.log("b="+b); console.log(rest); }
3.变量作用域
-
如果两个函数使用了相同的变量名,只要在函数内部,就不冲突
-
内部函数可以访问外部函数的成员,反之不行!(内部类与外部类)
-
内部函数变量和外部函数的变量重名时,由“内”向“外”查找,如果外部存在这个同名的函数变量,则内部函数会屏蔽外部函数的变量
-
规范:声明都在最前面,赋值并不会被提前!!
4.全局变量
- JS实际上只有一个全局作用域,任何变量(函数也可以视为变量),假设没有在函数作用范围内找到,就会向外查找。如果在全局作用域都没有找到,报错Reference
- 把自己的代码放入自己定义的唯一空间名字中,降低全局命名冲突的问题!
5.局部变量 let
6.常量 const
7.方法
1.定义
把函数放在对象的里面,对象只有两个东西:属性和方法
2.this
this是无法指向的,默认指向调用它的那个对象
3.apply
可以控制this指向:
getAge.apply(xiaoxiao,[]);//this指向了xiaoxiao这个对象,参数为空
6.内部对象
1.Date
var now = new Date();//Wed Jan 20 2021 17:32:41 GMT+0800 (中国标准时间) {}
now.getFullYear();//年
now.getMonth();//月 0-11 代表月
now.getDate();//日
now.getDay();//星期几
now.getHours()//时
now.getMilliseconds();//分
now.getSeconds();//秒
now.getTime(); //时间戳 全世界统一 1970 1.1 0:00:00 毫秒数
new Date(1611135283415)//时间戳转为时间!
//Wed Jan 20 2021 17:34:43 GMT+0800 (中国标准时间)
now.toLocaleString()//调用本地时间(方法)
//"2021/1/20 下午5:34:43"
2.JSON
格式:
- 对象都用{}
- 数组都用[]
- 所有的键值对都使用key:value
JSON.stringify(user);
JSON.parse(’{“name”:“xiaoxiao”,“age”:3,“sex”:“男”}’);
可能搞混:JSON和JS对象的区别
var obj = {a:"hello",b:"hellob"};//js
var json = '{"a":"hello","b":"hellob"}';//json
7.面向对象编程
1.原型
//小明的原型是Student
xiaoming.__proto__ = Student;
//给Student新增一个方法
Student.prototype.hello = function (){
alert("hello");
};
2.class继承
定义类,(属性,方法)–本质:查看对象原型
//定义一个学生的类
class Student{
//构造方法
constructor(name) {
this.name = name;
}
//方法
hello(){
alert("hello");
}
}
class XiaoStudent extends Student{
//构造方法
constructor(name,grade) {
super(name);
this.grade = grade;
}
//方法
myGrade(){
alert("我是一名小学生")
}
}
8.操作BOM对象
1.window
代表 浏览器窗口
2.location
代表 当前页面的URL信息
host: "jwxt.gcu.edu.cn"
href: "http://jwxt.gcu.edu.cn/"
protocol: "http:"
reload: ƒ reload() //刷新网页
//设置新的地址
location.assign("http://jwxt.gcu.edu.cn")
3.document
代表 当前的页面 HTML DOM文档树
获取cookie:document.cookie
9.操作DOM对象
1.核心
浏览器网页就是一个Dom树形结构!
- 添加:添加一个新的节点
- 删除:先获取父节点,再删除Dom节点
- 更新:先获得Dom节点,再更新Dom节点
- 获得:遍历Dom节点,得到Dom节点
2.获得Dom节点
//对应 css 选择器
var h1 = document.getElementsByTagName('h1');//标签
var p1 = document.getElementById('p1');//id
var p2 = document.getElementsByClassName('p2');//class
var father = document.getElementById('father');//id
var chiledrens = father.children;//获取父节点下的所有子节点
// father.firstChild;
// father.lastChild;
3.更新Dom节点
<div id="id1">
</div>
<script>
var id1 = document.getElementById('id1')
</script>
操作文本
id1.innerText="456" //修改文本的值
id1.innerHTML='<strong>1234</strong>'//可以解析html标签
操作css
id1.style.color='red' //属性使用 字符串 包装
id1.style.fontSize="202px"//驼峰命名
id1.style.padding = '2em'
4.删除Dom节点
id才能删除,不是id选择器,获得的是一个数组,使用xx[0]
<div id="father">
<h1>标题1</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
<script>
var self = document.getElementById('p1');
var father = self.parentElement;
father.removeChild(p1)
//删除是一个动态的过程!!!
father,removeChild(father.children[0]);
</script>
注意:删除多个节点的时候,children是在时刻变化的,删除节点的时候一定要注意
5.插入Dom节点
<script>
var js = document.getElementById('js');//已经存在的节点
var list = document.getElementById('list');
list.append(js);//追加到后面
//通过JS创建一个新节点
var newP = document.createElement('p');//创建一个p标签
newP.id = "newP";
newP.innerText = 'hello,xiaoxiao';
//相当于:<p id="newP">hello,xiaoxiao</p>
list.append(newP);
//创建一个标签节点
var myScript = document.createElement('script');
//通过这个属性,可以设置任意的值
myScript.setAttribute('type','text/javascript');
//没有id获得的是一个数组
var body = document.getElementsByTagName('body');
body[0].setAttribute('style','background-color:blue');
</script>
6.insertBefore
var ee = document.getElementById('ee');
var js = document.getElementById('js');
var list = document.getElementById('list');
//要包含的节点.insertBefore(newNode,targetNode)
list.insertBefore(js,ee);
10.操作表单
1.获得提交信息
<script>
var input_text = document.getElementById('username');
var boy_radio = document.getElementById('boy');
var girl_radio = document.getElementById('girl');
//得到输入框的值
input_text.value
//修改输入框的值
input_text.value='123'
//对于单选框,多选框等固定的值,boy_radio.value只能取到当前的值
boy_radio.checked;//查看返回的结果是否为true,true则是被选中了
boy_radio.checked = true;//赋值
</script>
2.提交表单
- 使用mds5加密
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
- 优化
<!--
1.表单绑定提交事件
2.onsubmit = 绑定一个提交检测的函数,true,false
3.将这个结果返回给表单,使用onsubmit接收
4.οnsubmit=" return aaa()"
-->
<form action="http://www.baidu.com/"
method="post" onsubmit=" return aaa()">
<p>
<span>用户名:</span><input type="text" id="username" name="username" >
</p>
<p>
<span>密码:</span><input type="text" id="input-password" >
</p>
<!--优化表单-->
<input type="hidden" id="md5-password" name="password">
<button type="submit" >提交</button>
</form>
<script>
function aaa(){
var uname = document.getElementById('username');
var pwd = document.getElementById('input-password');
var md5pwd = document.getElementById('md5-password');
md5pwd.value = md5(pwd);
//可以校验判断表单,true就是通过提交,false就是阻止提交
return true;
}
</script>
11.初识jQuery
- 导入jQuery库
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
- 公式
$(selector).action();
- 文档工具站:https://jquery.cuishifeng.cn/
1.获取jQuery
<script>
//选择器就是css的选择器
$('#test-jquery').click(function (){
alert('hello,jquery')
});
</script>
2.选择器
//jQuery
$('p').click() //标签选择器
$('#id1').click() //id选择器
$('.class1').click() //class选择器
3.事件
<script>
//当网页元素加载完毕之后,响应事件
$(function (){
$('#divMove').mousemove(function (e){
$('#mouseMove').text('x:'+e.pageX+'y:'+e.pageY)
})
});
</script>
4.操作DOM
节点文本操作
$('#test-ul li[name=python]').text();//获得值
$('#test-ul li[name=python]').text('设置值');
$('#test-ul').html();//获得值
$('#test-ul').html('<strong>123</strong>');//设置值
css操作
$('#test-ul li[name=python]').css('color','red');
元素的显示和隐藏
本质:display : none;
$('#test-ul li[name=python]').show()
$('#test-ul li[name=python]').hide()
5.如何学习jQuery
1.看文档工具站:https://jquery.cuishifeng.cn/
2.不会的地方查!