前端笔记(html+css+js)
网页的基本信息
快速按出标签：标签内容+Tab
快速按出注释标签：Ctrl+/
1.DOCTYPE声明
<!--告诉浏览器我们使用什么规范 -->
2.html标签
除DOCTYPE声明外所有的内容都应该卸载html标签内
<html lang="en">
</html>
3.head标签
网页头部信息
<head>
<!-- meta标签是描述性标签，一般用来做SEO-->
<meta charset="UTF-8">
<!-- title标签是网页的标题-->
<title>Title</title>
</head>
4.body标签
网页主体
<body>
Hello world!
</body>
网页基本标签
1.文档标签
<!--标题标签,<h1> - <h6>-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<!-- 段落标签 ，一个<p></p>代表一个段 -->
<p>hello</p>
<p>world</p>
<!-- 换行标签<br/>或者<br>等于/n-->
吃了吗 <br/>
你说
<!-- 水平线标签，就是输出一条线 <hr/>或者<hr> -->
<hr/>
<!-- 粗体和斜体-->
粗体：<strong>哈哈哈哈</strong> <br>
斜体：<em>哈哈哈哈</em>
<!-- 特殊符号-->
空格：空 格
大于号:>
小于号:<
版权：©
2.图像标签
<img src="/images/logo.png" alt="哈哈” title="你好啊" width="258" height="39" />
src:图片路径，../是上一级目录 /是当前目录
alt:图片加载不出来显示的内容
title:鼠标放图片上显示的文字
width,height:图片的大小
3.链接标签
<a href="https://www.baidu.com">链接文本</a>
<a href="1.html">链接文本</a>
href:必填，跳转的页面
target:表示窗口在哪里打开 _blank表示在新的窗口打开 _self(默认)在当前窗口打开
<a name="top">链接文本</a>
<a href="#top">跳转到top处</a> //href="#top"可以跳转到标记为top的位置
4.列表
1.有序列表
试卷 问答....
ol: orderlist
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
效果：
2.无序列表
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
效果：导航，侧边栏...
3.自定义列表
多用于网站底部
dt:列表的标题
dd:列表的内容
<dl>
<dt>标题</dt>
<dd>1</dd>
<dd>2</dd>
<dd>3</dd>
</dl>
5.表格
<tr>:行
<td>:列
<table>
<tr>
<td>1-1</td>
<td>1-2</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
</tr>
</table>
效果：
跨行 跨列
效果：
<table border="1px">
<tr>
<td colspan="2">1-1</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
</tr>
</table>
| 1-1 | |
| 2-1 | 2-2 |
| 3-1 | 3-2 |
效果
<table border="1px">
<tr>
<td rowspan="2">1-1</td>
<td >1-2</td>
</tr>
<tr>
<td>2-2</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
</tr>
</table>
6.音频和视频
<video src="" controls autoplay></video>
src:资源路径
controls:显示控制条
autoplay:自动播放
音频为<audio></audio>
7.页面结构
<header></header>
<footer></footer>
<section></section>
<article></article>
<aside></aside>
<nav></nav>
header:头部
footer:脚部
section:Web页面中一块独立的区域
article:独立的文章内容
aside:相关内容或应用（常用在侧边）
nav:导航类辅助内容
这些标签无实际作用，只是约定俗成的起到标识作用
8.iframe内联框架
就是在一个页面中显示另一个页面
<iframe src="https://www.baidu.com" name="hello" frameborder="0" width="800px" height="800px"></iframe>
src:地址
name:名字
9.表单
以下所有都需要在<form method="post" action="1.html">下
输入框
<form method="post" action="1.html">
<p>名字: <input name="username" type="text"> </p>
<p>密码: <input name="password" type="password"> </p>
<p>
<input type="submit" name="Button" value="提交">
<input type="reset" name="Reset" value="重填">
</p>
</form>
method:post或get
action:表单发送数据的位置 可以是网站也可以是地址
<input>:输入框
type="text"表示是文本输入框 , type="password"表示是密码输入框 （暗文），
name:表示输入框的名字
get与post:
get能在url中看到提交的信息，不安全但是效率高
post较为安全，可以传输大文件
type:指定元素的类型，可以为text（默认）,password,checkbox,radio（单选框）,submit,reset,file,hidder,image,button
value:元素的初始值，radio必须有个初始值
size:表单元素的初始宽带
maxlength:type为text或者password时，输入的最大字符数
radio:单选框标签
<p>性别：
<input type="radio" value="boy" name="sex"/>男
<input type="radio" value="girl" name="sex"/>女
</p>
value:表示该单选框的值，即选中该框则传递的值
name:表示组，同一组的单选框只能选一个
checkbox：多选框
<p>
<input type="checkbox" value="sleep" name="hobby">睡觉
<input type="checkbox" value="eat" name="hobby" checked>吃饭
<input type="checkbox" value="drink" name="hobby">喝水
</p>
checked代表默认选中
button:按钮
<p>
<input type="button" name="button1" value="哈哈">
</p>
value为按钮上的字
下拉框：
<p>
<select name="国家" >
<option value="china">中国</option>
<option value="us">美国</option>
<option value="eth" selected>瑞士</option>
</select>
</p>
selected表示默认选中
文本域
<p>反馈
<textarea name="textareas" cols="10" rows="10">文本内容</textarea>
</p>
cols:文本域的行数
rows：文本域的列数
文件域
<p>
<input type="file" name="files">
<input type="button" value="上传" name="upload">
</p>
搜索框
<p>
<input type="search" name="search">
<p>
其他
readonly只读 hidden隐藏 disabled禁用
10.表单的初级验证
安全 减轻服务器压力
<p>名字: <input name="name" type="text" placeholder="请输入用户名" required> </p>
placeholder:提示信息
required:必须非空
pattern:正则表达式验证
CSS
语法：
选择器：｛
声明1；
声明2；
声明3；
｝
CSS的导入方式
推荐外部样式！ link标签
在<head>内导入<link rel="stylesheet" href="css/style.css">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/style.css">
</head>
href指向css文件的路径
选择器
作用：选择页面上的某种元素！
2.1基本选择器：
1.标签选择器
h1{
color: blue;
}
标签选择器或选择页面中的所有这个标签
2.类选择器class
<h1 class="wang">
标题1
</h1>
.wang{
color:blue;
}
.class的名称
3.id选择器
<h1 id="wang">
标题1
</h1>
#wang｛
color:blue;
｝
注意id不能复用，一个id只能与一个标签绑定，但一个class可以和多个id绑定
优先级： id选择器>class选择器>标签选择器
2.2层次选择器
1.后代选择器
在某个元素的后面
body p{
background:red;
}
只选择<body>标签下的所有<p>(子辈，孙辈....都选)
2.子代选择器
body>p{
background:red;
}
只选择body子代的p标签
3.唯一弟弟选择器
body+p{
backgrond:red;
}
选择与body同辈的相邻下面的p标签（只选一个）
4.所有弟弟选择器
body-p{
backgrond:red;
}
选择与body同辈的相邻下面的p标签（所有）
2.3结构伪类选择器
/*鼠标悬浮在a标签的状态*/
a:hover{
color:orange
}
/*鼠标点击a标签未释放的状态*/
a:active{
color:orange
}
2.4属性选择器
/*a标签中存在id属性的元素*/
a[id]{
background:yello;
}
/*a标签中id属性为first的元素*/
a[id=first]{
background:yello;
}
/*a标签中id属性为first的元素*/
a[id=first]{
background:yello;
}
/*a标签中id属性含有first的元素*/
a[id*=first]{
background:yello;
}
/*a标签中id属性以first开头的元素*/
a[id^=first]{
background:yello;
}
/*a标签中id属性以first结尾的元素*/
a[id$=first]{
background:yello;
}
美化网页
1.字体样式
<span>标签：无实际效果，但表明了我们想突出的内容，所以一般会加样式
span{
font-family:楷体;
font-size:50px;
font-weight:bold;
}
font-family:字体格式
font-size:字体大小
font-weight:字体的粗细
2.文本样式
颜色
文本对齐方式
text-align:left/right/center;
首行缩进
text-indent:2em;
行高：
line-height:300px;
如果行高和我们的块的高度（height）一致的话，就可以实现上下居中
下划线：
text-description:underline;
text-description：none; 去除下滑线
3.列表
list-style:none/circle/decimal/square 替换前边的实心圆
4.背景
background-image:url("images/tx.jpg") 默认是全部平铺的
background-repeat: repeat-x/repeat-y/no-repeat x平铺/y平铺/不平铺
background-position:200px 70px 定位
我们一般合并写
颜色 图片 图片位置 平铺方式
background: red url("images/tx.jpg") 270px 10px no-repeat;
5.渐变
linear-gradient:
6.盒子模型
margin:外边距
padding:内边距
border:边框
边框
粗细，实线/虚线，颜色
border:1px solid red;
外边距
妙用：居中！
margin:上下，左右 或padding:上，下，左，右
margin:0,auto
内边距
padding:上下，左右 或padding:上，下，左，右
padding:0,auto
圆角边框
左上,右上，右下，左下
border-radius:100px,100px,100px,100px
阴影
box-shadow:
浮动
块级元素：独占一行
h1-h6,p,div,列表...
行内元素：不独占一行
span, a ,img,strong
块级元素与行内元素转换：
display:inline-block /inline/block /none 块元素（但可以内联在一行）/行内元素/块元素/消失
float:left/right
clear:rigth/left/both 右侧/左侧/两侧不允许有浮动
父级边框塌陷问题解决：
1.增加父级元素的高度
2.增加一个新的div，清楚浮动
3.overflow:scroll 在文本超过边框时可以显示为滚动条的形式
4.父类添加一个伪类 ：after
定位
相对定位
相对于原来的位置
position:relative;
top:-20px;
left:-20px;
right:20px;
buttom:20px;
绝对定位
1.如果父级元素没有定位时，则相对于浏览器定位
2.如果父级元素存在定位，则相对于父级元素进行偏移
3.在父级元素范围内移动
position：absilute;
固定定位
永远在页面的某个位置
position:fixed;
z-index及透明度
z-index:层级
opacity:0.5 透明度
JavaScript
JS框架
JQuery：大家熟知的JavaScript库，优点就是简化了DOM操作，缺点就是DOM操作太频繁，影响前端性能；在前端眼里使用它仅仅是为了兼容IE6，7，8；
Angular：Google收购的前端框架，由一群Java程序员开发，其特点是将后台的MVC模式搬到了前端并增加了模块化开发的理念，与微软合作，采用了TypeScript语法开发；对后台程序员友好，对前端程序员不太友好；最大的缺点是版本迭代不合理（如1代–>2 代，除了名字，基本就是两个东西；截止发表博客时已推出了Angular6）
React：Facebook 出品，一款高性能的JS前端框架；特点是提出了新概念 【虚拟DOM】用于减少真实 DOM 操作，在内存中模拟 DOM操作，有效的提升了前端渲染效率；缺点是使用复杂，因为需要额外学习一门【JSX】语言；
Vue：一款渐进式 JavaScript 框架，所谓渐进式就是逐步实现新特性的意思，如实现模块化开发、路由、状态管理等新特性。其特点是综合了 Angular（模块化）和React(虚拟 DOM) 的优点；
Axios：前端通信框架；因为 Vue 的边界很明确，就是为了处理 DOM，所以并不具备通信能力，此时就需要额外使用一个通信框架与服务器交互；当然也可以直接选择使用jQuery 提供的AJAX 通信功能；
UI框架
Ant-Design：阿里巴巴出品，基于React的UI框架 ElementUI、iview、ice：饿了么出品，基于Vue的UI框架 BootStrap：Teitter推出的一个用于前端开发的开源工具包 AmazeUI：又叫“妹子UI”，一款HTML5跨屏前端框架 JavaScript构建工具 Babel：JS编译工具，主要用于浏览器不支持的ES新特性，比如用于编译TypeScript WebPack：模块打包器，主要作用就是打包、压缩、合并及按序加载
快速入门
1.引入
<!--内部引入，可以在head标签内也可以在body内-->
<script>
2.数据类型
var 变量名=变量值；
const 常量名=常量值；
number
js不区分整数和小数 都是number
123//整数123
123.1//浮点数123.1
1.123e3//科学计数法
-99//负数
NaN //not a number
Infinity // 表示无限大
字符串
'abc' "abc"都可,注意转义字符\
多行字符串
//tab 上面 esc下面
var msg =
`hello
world
你好呀
nihao
`
引用别的字符串
//tab 上面 esc下面
let name = 'Tom';
let age = 3;
var msg = `你好，${name}`
字符串长度
str.length
大小写转换
//注意，这里是方法，不是属性了
student.toUpperCase();
student.toLowerCase();
返回位置
student.indexof('t')
截取字符串
//前闭后开
student.substring(1)//从第一个字符串截取到最后一个字符串
student.substring(1,3)//[1,3)
布尔值
true false
比较运算符
==：只比较值不比较类型（也就是说1==“1”会返回true）
===：既比较值也比较类型
须知：
-
NaN === NaN，这个与所有的数值都不相等，包括自己
-
只能通过isNaN（NaN）来判断这个数是否是NaN
浮点数问题：
存在精度问题！(1/3) === (1-2/3)
对象
对象是大括号，每个属性采用键值对的方式，用逗号隔开
// Person person = new Person(1,2,3,4,5);
var person = {
name:'Tom',
age:3,
tags:['js','java','web','...']
}
对象赋值
person.name="wang"
取对象值
person.name
> "Tom"
person.age
> 3
使用一个不存在的对象属性，不会报错！undefined
删除属性
delete persion.name
添加属性
直接赋值即可
person.haha="haha"
判断属性是否存在
'age' in person
true
判断一个属性是否是这个对象自身的hasOwnProperty()
person.hasOwnProperty('age')
true
数组
Array可以包含任意的数据类型
var arr = [1,2,3,4,5,6];//通过下标取值和赋值
长度
arr.length
注意：假如给arr.lennth赋值，数组大小就会发生变化~，如果赋值过小，元素就会丢失
获取指定元素的索引
arr.indexof(2)
截取数组
arr.slice(1,3)
压入和弹出
arr.push(1,2,3) //把1，2，3压入到尾部
arr.pop()//弹出尾部的一个元素
arr.unshift(1)//压入到头部
arr.shift()//弹出头部的一个元素
排序
arr.sort()
arr.sort(sortby)//sortby是一个函数，这个函数若a<b则返回一个小于0的值,a=b返回0，a>b返回一个大于0的值
反转
arr.reverse()
拼接
arr.concat([1,2,3]) //注意concat没有修改原数组而是返回了一个新数组
连接
arr.join("-")//使用特定的字符串把所有元素连接起来
多维数组
arr=[[1,2],[3,4],[5,6]]
Map和Set
Map
var map=new Map([['tom',100],['jeff',99],['wang',66]]);
var name=map.get('tom');//通过key获取value
map.set('admin',123456);//新增或修改
map.delete("tom");//删除
Set:
无序不重复的集合
set.add(2);//添加
set.delete(1);//删除
set.has(3);//是否包含某个元素
3.严格检查格式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
前提：IDEA需要设置支持ES6语法
'use strict';严格检查模式，预防JavaScript的随意性导致产生的一些问题
必须写在JavaScript的第一行！
局部变量建议都使用let去定义~
-->
<script>
'use strict';
//全局变量
let i=1
//ES6 let
</script>
</head>
<body>
</body>
</html>
4.流程控制
if
var age=3;
if(age>3){
alert("3")
}else if(age<5){
alert("5")
}else{
alert("haha")
}
while
while(age<100){
age=age+1;
consloe.log(age);
}
do{
age=age+1;
console.log(age);
}while(age<100)
for
//这里建议使用let定义局部作用域
for(let i=0;i<100;i++){
console.log(i);
}
forEach
var age=[1,2,3,4,5,6];
age.forEach(function(value){
console.log(value);
})
for...in
//num是索引 而不是实际的元素
for(let num in age){
console.log(age[num]);
}
for...of
//num是实际的元素
for(let num of age){
console.log(num);
}
5.函数
//如果没有执行return，返回的结果为undefined
function abs(x){
if(x>=0){
return x;
}else{
return -x;
}
}
//与之前等价
var abs=function(x){
if(x>=0){
return x;
}else{
return -x;
}
}
//调用
abs(10)
//arguments关键字，代表传入的所有参数（类似于数组，但只有length属性和索引元素）
function func1(a, b, c) {
console.log(arguments[0]);
// expected output: 1
console.log(arguments[1]);
// expected output: 2
console.log(arguments[2]);
// expected output: 3
}
func1(1, 2, 3);
作用域
Javascript中函数变量作用域为函数体内
全局变量：所有的全局变量都默认在window对象下
6.方法
方法就是把函数放在对象里面
var kuangshen={
name:'秦疆',
birth:2000,
age:function(){
var now=new Date().getFullYear();
return now-this.birth;
}
}
//属性
kuangshen.name
//方法，一定要带（）
kuangshen.age()
this:默认指向调用它的那个对象
apply:方法能劫持另外一个对象的方法，继承另外一个对象的属性.
getAge.apply(xiaoming,5);//相当于xiaoming.getAge(5)
7.Date
var now=new Date();//"2021-03-13T08:59:37.298Z"
now.getFullYear();//年
now.getMonth();//月 0~11
now.getDat();//星期几
now.getHours();//时
now.getMinutes();//分
now.getSeconds();//秒
now.getTime();//时间戳
var time=new Date(now.getTime());//时间戳转化为时间
8.JSON
在javascript中，一切皆对象，任何js支持的类型都可以用json表示
对象都用{}，数组都用[] , 所有键值对都用key:value
var user={
name:"qinjiang",
age:3,
sex:"男"
}
//对象转为json {"name":"qinjiang","age":3,"sex":男}
var jsonUser=JSON.stringify(user);
//json字符串转为对象,参数为json字符串
var obj=JSON.parse("{"name":"qinjiang","age":3,"sex":男}")
本质是JSON字符串还是字符串，因此需要" "或 ' '
9.AJAX
-
原生的js写法 xhr异步请求
-
jQuery封装好的方法$(#name).ajax("")
-
axios请求
10.面向对象编程
原型
var user={
name:"wang",
age:3,
run:function(){
console.log(this.name+"run...")
}
}
var xiaoming={
name:"xiaoming"
}
//xiaoming的原型是user，这时xiaoming就可以调用user的属性和方法
xiaoming._proto_=user;
class集继承
class是在ES6中引入的
clss Student{
//构造器关键字 constructor
constructor(name){
this.name=name;
}
//方法 方法名（参数）{}
hello(){
alert('hello');
}
}
var xiaomin=new Student("xiaoming")
var xiaohong=new Student("xiaohong")
继承
class XiaoStudent extends Student{
constructor(name,grade){
super(name);
this.grade=grade;
}
mayGrade(){
alert('我是一名小学生')
}
}
11.操作BOM对象
BOM：浏览器
window
window代表浏览器窗口
window.innerHeight
258
window.innerwidth
919
window.outerHeight
994
window.outerwidth
919
navigator（不建议使用）
navigator封装了浏览器的信息
navigator.appName
"Netscape"
navigator.appVersion
navigator.userAgent
navigator.platform
screen
screen代表屏幕尺寸
screen.width
1920 px
screen.height
1080 px
location(重要)
location代表当前页面的URL的信息
location.host
location.href
location.protocol
location.reload() //刷新网页
location.assign("http://www.4399.com/") //网页跳转
document
document代表当前的页面，HTML DOM文档树
document.title
"百度一下，你就知道"
document.title='王'
"王"
//获取具体的文档树节点
document.getElementBy('wang')
//获取cookie
document.cookie
history（不建议使用）
history代表浏览器的历史记录
history.back()//后退
hostory.forward()//前进
12.操作DOM对象（重点）
DOM：文档对象模型
浏览器网页就是一个DOM树结构！
更新：更新DOM节点
遍历：得到DOM节点
删除：删除一个DOM节点
添加：添加一个新的节点
获得DOM节点
//对应css选择器
var h1=document.getElementsByTagName('h1');
var p1=document.getElementById('p1');
var p2=document.getElementsByClassName('p2');
//获取父节点下的所有子节点
var father=document.getElementById('father');
var childrens=father.children;
//father.firstChild
//father.lastChild
更新节点
var id=document.getElementById('id');
//操作文本
id.innerText='456';
id.innerHTML='<strong>123</strong>'
//操作css
id.style.color='yello';
id.style.fontSize='20px';
id.style.padding='2em';
删除节点
先获取父节点，再通过父节点删除自己
var self=document.getElementById('p1');
var father=p1.parentElent;
father.removeChild(self)
注意：删除多个节点时，children是在时刻变化的！
father.removeChild(father.children[0])
father.removeChild(father.children[1])
father.removeChild(father.children[1])
//father.children在不停变化
插入节点
我们获取一个DOM节点后，如果这个dom节点是空的，我们可以通过innerHTML增加元素，但如果这个DOM节点已经存在元素了，我们就不能这么干！会产生覆盖！
追加
var js=document.getElementById('js');
var list=document.getElementById('list');
list.appendChild(js);//追加到子节点
创建一个新的标签
<script>
var js = document.getElementById('js');//已经存在的节点
var list = document.getElementById('list');
//通过JS创建一个新的节点
var newP = document.creatElement('p');//创建一个p标签
newP.id = 'newP';
newP.innerText = 'Hello,Kuangshen';
//创建一个标签节点
var myScript = document.creatElement('script');
myScript.setAttribute('type','text/javascript');
//可以创建一个style标签
var myStyle = document.creatElement('style');//创建了一个空style标签
myStyle.setAttribute('type','text/css');
myStyle.innerHTML = 'body{}';//设置标签内容
document.getElementByTagName('head')[0].appendChild(myStyle);
</script>
13.操作表单
-
文本框----text
-
下拉框----select
-
单选框----radio
-
多选框----checkbox
-
隐藏域----hidden
-
密码框----password
获得要提交的信息
<body>
<form action = "post">
<p>
<span>用户名：</span><input type="text" id = "username" />
</p>
<!--多选框的值就是定义好的value-->
<p>
<span>性别：</span>
<input type = "radio" name = "sex" value = "man" id = "boy"/>男
<input type = "radio" name = "sex" value = "woman" id = "girl"/>女
</p>
</form>
<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='value'
//对于单选框，多选框等等固定的值，boy_radio.value只能取到当前的值
boy_radio.checked;//查看返回的结果，若为true则代表被选中
girl_radio.checked=true;//赋值
</script>
</body>
14.JQery
jQuery库，里面存在大量的JavaScript函数
文档：https://jquery.cuishifeng.cn/
引入
<head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
或者下载引入
公式
$('css选择器').action()
选择器
//原生js，选择器少，麻烦不好记
//标签
document.getElementByTagName();
//id
document.getElementById();
//class
document.getElementByClassName();
//jQuery css中的选择器它全部都能用！
$('p').click();//标签选择器
$('#id1').click();//id选择器
$('.class1').click;//class选择器
事件
比如鼠标事件
mousedown()(jQuery)----按下
mouseenter()(jQuery)
mouseleave()(jQuery)
mousemove()(jQuery)----移动
mouseout()(jQuery)
mouseover()(jQuery)
mouseup()(jQuery)
操作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();
Ajax
$('#form').ajax()
$.ajax({url:"test.html",context:document.body,success:function(){
$(this).addClass("done");
}})
