Web网页之前端三剑客汇总篇（基础版）
一、HTML基础
1.html组成元素
html由head 和body两部分组成
标题标签
<h1></h1>
<h1></h6>段落标签
<p></p>
换行标签
<br> break文本格式化标签
加粗: <b></b><strong></strong>斜体: <em></em><i></i>下划线: <ins></ins><u></u>删除线: <del></del><s></s><div></div>
<span></span>
没有语义，就像是一个盒子，用来装内容，布局网页
区别: <div>的内容，独占一行，是个大盒子
<span>，一行可以有多个的小盒子2.html常用标签和属性
图像标签
图像标签：
属性：属于这个标签的特性就叫属性
<img src="">
src: 图片路径 必须属性
alt: 文本 图像不能显示的时候显示alt里面文字
title: 文本 鼠标放到图像上，显示文字
width: 像素 设置图像的宽度
height: 像素 设置图像的高度
border: 像素 设置图像边框粗细注意：
一个标签可以添加多个属性
属性之间不分先后的顺序
属性和属性之间必须用空格隔开相对路径和绝对路径
路径：
目录文件夹
根目录相对路径：
HTML---video
同一级路径：.
下一级路径：/
上一级路径：..绝对路径：
指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径D:\work\code\html超链接标签
超链接标签 <a></a> 外部链接： 必须属性：href: 用于指定链接目标的url地址 target: 用于指定链接页面打开的方式，其中_self为默认值，_blank在新窗口打开 内部链接：<a href=index1.html>首页</a>
下载链接：<a href=.zip>文件</a>
网页元素链接：
锚点链接：
通过点击链接，可以快速定位到页面中的某个位置
<a href="#life">早年经历</a>
<h3 id="life">早年经历</h3>注释及特殊字符
注释：需要在html文档中添加一些便于阅读和理解，但又不需要显示在页面中的文字，就需要用注释标签<!--注释内容-->特殊字符：
空格：
<：<
>：>表格标签
作用：用于显示和展示数据
表格的基本语法如下：
合并单元格
跨行合并： rowspan="合并单元格个数"
跨列合并：colspan=“合并单元格的个数”
跨行：最上层单元格为目标单元格，写合并代码
跨列：最左层单元格为目标单元格，写合并代码
合并单元格三部曲： 1.先确定单元格是跨行还是跨列
2.找到目标单元格，写上合方式
3.写上多余的单元格
列表标签
无需列表、有序列表、自定义列表
无需列表
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ul>
有序列表
<ol>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ol>
自定义列表：常用于对术语或名词进行解释和描述
<dl> 用于定义列表
<dt> 用于定义项目或名字
<dd> 描述<dt>定义的项目/名字
注意：<dl>里面只包含<dt>和<dd>,一个<dt>对应多个<dd>
表单标签
表达组成：表单域 表单元素 提示信息
表单域： 包含表单元的区域
<form action="url地址" method="get/post" name="表单域名称">
表单元素： <input type=" ">
type 属性及描述
text: 用户可在其中输入文本
password: 定义密码字段
radio：定义单选按钮
checkbox：定义多选按钮
file：选择上传文件
submit：提交按钮，将表单的数据发送到服务器
button: 定义和点击按钮 （发生验证码）
reset: 重置form表单
name属性：当前input表单名字，后台通过name属性找到这个表单，页面中表单很多，name主要作用是区别于不同表单
maxlength属性 ：最大长度
value属性:标签对应的值
checked: 此input元素被加载时选中的值
<label>标签: 用于绑定一个表单元素，当点击label标签内的文本时，浏览器会自动聚焦在浏览器的表单元素上，用来增强用户体验
<select>标签：下拉表单，包含option选项，若需要进入默认选中，可使用 checked选项
<textarea>标签： 通过rows和colsz属性限制文本框大小
二、CSS基础
1.css 样式定义方式
行内样式表
内部样式表
外部样式表
通过<link>的href属性快速定位css属性
2.选择器分类
选择器只是选择父标签下的子标签，不包括div块状元素
标签选择器
id选择器：相对于第一个选择器，可以实现精准的改变
类选择器
id是唯一的，而类可以定义多个标签为同一类
伪类选择器
:hover 鼠标悬停后的样式
:link 链接访问前的样式
:visited 链接访问后的样式
:focus 聚焦后的样式
位置伪类选择器
:nth-child（n） n=0.1.2.3.4 2n+1=1.3.5.7.9
这里的n也可以写成odd偶数 even是奇数
目标伪类选择器
:target 类似于html中的锚点跳转
复合选择器
element,element2 同时选中element1和element2元素
element.class 选择包含某类的element元素
element1+element2 紧跟着element1的element2元素
element1>element2 选择父标签是element1的所有element2元素
element1 element2 选择element1内所有的element2元素
通配符选择器
* 选择所有的标签
[ :attribute ] 选择具有某个属性的所有标签
[ attribute=value ] 选择具有某个属性的标签
伪元素选择器
::first-letter： 选择第一个元素
::first-line 选择第一行
::selection 选择已被选择的内容
::after 选择在元素前插入内容
::before 选择在元素后插入内容
颜色使用
预定义颜色值 red black
16进制表示法： #ADD8E6 红（0-255） 绿（0-255） 蓝（0-255）
RGB rgb(173,216,230) rgba(173,216,230,0.5)
3.样式风格处理
文本处理
text-align: center;
px：设备上的像素点，默认是16px
em: 相对于元素的字体大小,可以继承
%: 相对于父元素的百分比
vw: 相对视窗宽度的百分比 vh: 相对于视窗高度的百分比
letter-spacing：字符（字母/汉字）间距的属性
text-indent： 2em; 段首缩进
text-decoration: underline dotted red：下划线
text-shadow: 5px 5px 2px grey：阴影
字体处理
font-size、font-style、font-weight
背景处理
background-color 、backbround-image、background-size、background-repeat、background-position
渐变色：background-color: linear-gradient
边框处理
边框样式
border-style: dashed | inset |solid dotted
边框宽度
border-width: 10px
边框颜色
border-color brown red blue
边框圆角
border-radius: 10px
table表格格式处理
4.元素展示格式
div 与 span 展示
独占一行： width height margin padding可控制
可以共占一行： width height margin padding 不可控制
span---->div 格式独占一行
div---->span 格式共占一行
div标签换行
white-space: pre 换行显示
white-space: nowrap 不换行显示
超出部分显示滚轮
overflow :scroll | hidden | auto
5.盒子模型之内外边距分析
margin 对外边距进行处理 padding 对内边距进行处理
外边距margin分析
上下边距同时增大，以最大边距为主要边距
左右边距取叠加之后边距
内边距padding分析
设置了内边距，面积会增大，width=content+border+padding
盒子模型
box-sizing属性:
content-box: 设置了border和padding会增加元素宽高
border-box：不会变大盒子，盒子内容面积变小了
position位置
position属性
static ：设置了只能整体水平进行移动，默认
relative: 相对盒子的一个边框移动
absolute: 以非static的块为基准，没找到非static的块会继续向上去找
2盒子为非静态static，所以3盒子移动上去
fixed固定位置
特性：鼠标滚动，它的位置不变，整个屏幕为基准
sticky
float浮动
浮动元素，脱离文档流，空间释放
浮动存在问题
1.元素无法进行换行而是也被浮起，需要清除浮动
2.父级坍塌：当存在的元素块在未浮动时，父盒子长度未指定但是由chid子盒子的长度作为支撑，那么当子盒子设置浮动之后，父盒子就会因为浮动而消失，那么父盒子就会被子盒子所覆盖
解决措施：使用clear: both
display:flex模式属性
三、Javascript基础
1.js变量和概念
概念+作用+组成
概念：js是一种运行在客户浏览器编程语言，目的就是一个人机交互
作用：网页特效（监听用户的一些行为让网站做出对应的反馈）、表单验证（针对表达数据的合法性进行判断）、数据交互（获得后端数据，渲染给前端）
组成：Javascript语言基础 WebAPIs （DOM,BOM）
DOM：对页面元素进行移动，大小，添加，删除等操作
BOM: 页面弹窗，检测页面宽度、存储数据到浏览器
js 书写和注释
>> 行内式、内嵌式、外联式
js注释
单行注释 // 快捷键ctrl + / // 后面的一行代码会被忽视
多行注释/* 注释内容 */ 快捷键： shift+alt+a
js结束符： 可写可不写
输入和输出语法
输出常用方法
浏览器输出document.write('hello')提醒标签alert('要出的内容：')控制台输出console.log('hello!!!')输入常用方法
prompt('您的名字：')变量和常量
变量：计算机存储数据的容器
<script>let age = 18;let sex;sex= 'boy'document.write(age)</script>需求1：浏览器弹出对话框：请输入姓名，在浏览器显示你输入的内容
<script>let uname = prompt('请输入姓名：')document.write(uname)</script>需求2：有两个变量，num1放的是10，num2放的是20，交换num1和num2
<script>let num1 =10 let num2 =20let temptemp=num1num1=num2num2=tempconsole.log(num1,num2)</script>变量： 计算机存储数据的容器 = 赋值
变量的本质
变量命名规则和规范： 1.不能用关键字命名
2.只能用字母、数字、下划线、$组成，且数字不能开头
3.字母严格区分大小写
规范： 起名要有意义、遵循小驼峰命名法、后面每个单词首字母大写
数组：按顺序保存多个数据
<script>let arr=['z3','li4','赵六']document.write(arr)document.write(arr[1])
</script>常量
<script>const pi=3.14pi=5.21console.log(pi);</script>数据类型
检测数据类型：typeof( variable )
运算符
a.算术运算符：加减乘除（+ - * /），取模%
b.赋值运算符：= 将等号右边的值赋值给左边，左边必须是个容器 +=、-=、*=、/= （例如num+=1 num =num+1）
c.自增运算符：让变量加1 ++ 让变量减1 --
前置++ 先增加，在运算 后置++ 先运算 ，后增加
d.比较运算符 a=b（赋值） a==b（值相等） a===b(值和类型都相等) !=(不相等) !==(不全等)
e.逻辑运算符 ||、 &&、 ！，数字0和null都为false,其余都为true
强制类型转换
prompt接收到数据默认是字符串
其中一个是字符串型，另一个数字型也会被转换成字符串型
碰到减号，乘号，除号，系统会默认转成数字型
let num1 = +prompt('请输入上半月工资：')let num2 = +prompt('请输入下半月工资：')console.log(num1+num2);模版字符串
<script>let age = 18document.write('我今年' + age + '岁')document.write(`我今年 ${age}岁`)</script>2.流程控制语句
分支语句
能被4整除但不能被100整除，或者能被400整除是闰年，否则是平年
<script>let year = +prompt('请输入年份：')if (year % 4 === 0 && year % 1000 !== 0 || year % 400 === 0) {alert('year is 闰年')} else {alert('year is 平年')}</script>多条件判断语法
if（条件1）{代码1
} else if (条件2){代码2
} else if (条件3){代码3
}else{代码4
}三元运算符语法
5>3 ? alert('第一个'):alert('第二个')比较两个数的最大值
<script>let num1 = prompt('请输入数字1：')let num2 = prompt('请输入数字2：')let res=num1>num2?num1:num2alert(res)</script>switch语句
计算器案例
<script>let num1 = +prompt('请输入数字1：')let num2 = +prompt('请输入数字2：')let sp = prompt('请输入+-/*运算')switch (sp) {case '+':alert(`您选择的是加法，结果是 ${num1 + num2}`)breakcase '-':alert(`您选择的是减法，结果是 ${num1 - num2}`)breakcase '*':alert(`您选择的是乘法，结果是 ${num1 * num2}`)breakcase '/':alert(`您选择的是除法，结果是 ${num1 / num2}`)breakdefault:alert('输入有误，请重新输入')}</script>
</body>循环语句
while循环
while(循环条件){重复执行的代码（循环体）
}需要具备条件：变量起始值、终止条件
## 求前100的数
<script>let i = 1while (i <= 100) {document.write('我会循环<br>')document.writeln(`这是第${i}个数`)i++}
</script>## 求1~100的和
<script>let i = 1while (i <= 100) {sum+=ii++}console.log(sum)
</script>## 求1~100偶数和
<script>let sum=0let i=1while(i<=100){if(i%2===0){sum+=i}i++}console.log(sum);
</script>continue： 结束本次循环继续下次循环 break: 跳出循环，不循环了
## break 语句
<script>let sum=0let i=1while(i<=100){if(i===3){break}sum+=ii++}console.log(sum);</script>## continue语句<script>let sum=0let i=1while(i<=100){if(i===3){i++continue}sum+=ii++}console.log(sum);</script>for循环
for(声明记录循环的次数的变量；循环条件；变化值){循环体
}<script>for (let i = 1; i <= 10; i++) {document.write('hello<br/>')}
</script><script>for (let i = 1; i <= 5; i++) {for (let j = 1; j <= 5; j++) {document.write('♥(ˆ◡ˆԅ)')}document.write('<br>')}
</script>练习：打印倒三角
3.数组使用和表示
数组使用
遍历打印数组
<script>let num = [10, 20, 30, 40]for (let i = 1; i < num.length; i++) {document.write(num[i - 1])}
</script>求数组[2,5,8,4,9] 所有元素及平均数
<script>let num = [10, 20, 30, 40]for (let i = 0; i < num.length; i++) {sum+=arr[i]}avg = sum/num.lengthconsole.log(avg);
</script>求数组{2,5,8,4,9}里面所有元素的最大值
<script>let num = [2,5,8,4,9]let max = num[0]for (let i = 0; i < num.length; i++) {if(max<arr[i]){max=arr[i]}}console.log(max);
</script>
数组常用的属性
## 添加一个元素
arr.push()## 删除最后一个元素
arr.pop() ## 从start索引开始删除，删除number个元素
arr.splice(start,number)## 修改数组元素
arr[0]="halo"
练习： 将[ 1,3,5,7,8,9,11]中大于10的数存入到一个新数组
<script>let arr=[1,3,5,7,8,9,11]let newarr=[]for(let i=0;i<arr.length;i++){if(arr[i]>=10){newarr.push(arr[i])}}console.log(newarr)
</script>
4.函数的调用
函数：被设计为执行特定任务的代码块
function 函数名(){函数体
}函数调用使用示例
<script>function getsum() {let num1 = +prompt('请输入第一个数：')let num2 = +prompt('请输入第二个数：')console.log(num1 + num2);}getsum()
</script>函数参数的传递
level 1:
function getsum(end) { // end 形参for(let i=1;i<=end;i++) {sum+=i}console.log(sum)}
getsum(200)//实际参数level 2：
<script>function getsum(start,end) {for(let i=start;i<=end;i++) {sum+=i}console.log(sum)}getsum(100,200)</script>
练习： 学生的分数是一个数组，计算每个学生的总分
<script>function getscore(arr) {let sum=0for(let i=0;i<arr.length;i++) {sum+=i}document.write(sum)}getscore([99,98,96])getscore([100,100,100])</script>函数值的返回
## level1 求和
<script>function getsum(x,y) {return x+y}let sum=getsum(10,20)document.write(sum)</script>## level 2 求最大值<script>function getMax(x,y) {return x>y?x:y}let sum=getsum(10,20)document.write(x)</script>## level 3 数组求和
<script>function getArrValue(arr=[]) {let max=arr[0]for(let i=0;i<arr.length;i++){if(max<arr[i]){max=arr[i]}}return max}let sum=getArrValue([1,3,5,7,9])document.write(sum)
</script>函数的全局变量和局部变量
局部变量：作用于函数内的代码环境
全局变量：作用于所有代码执行环境（整个script标签内部）
全局变量
<script>let num=10console.log(num) //10function fn(){console.log(num) //10}
</script>局部变量
<script>console.log(num) //报错function fn(){let num=10console.log(num) //10}
</script>5.类和对象
对象： 属性（特征） + 方法（行为）
手机：属性（颜色、品牌） 方法：打电话、看视频
对象的定义和访问
let 对象名={属性名：属性值方法名：函数
}<script>let person={uname:'hxd', // 对象属性age:18,sex:'boy',sayhi:function(){ // 对象行为document.write('hello')}
}console.log(person.age);person.sayhi()
</script>对象的增删改查
<script>let person={uname:'hxd',age:18,sex:'boy',sayhi:function(){document.write('hello')}
}console.log(person.age); // 查delete person.sex // 删person.sex='男' //增和改</script>对象的遍历
<script>let person={uname:'hxd',age:18,sex:'boy',sayhi:function(){document.write('hello')}
}for(let k in person){console.log(k); // 属性名console.log(person[k]); //属性值}
</script>对象的数组存放
<script>let students=[{name:'xiaoming',age:18,gender:'男'},{name:'xiaohong',age:18,gender:'女'},{name:'xiaobai',age:18,gender:'男'},]for(let i=0;i<students.length;i++){console.log(students[i].name);}</script>
类的定义和使用
类：抽取对象的共用属性和行为封装成一个类（模版）
将类实例化之后，就成了对象
class name{
class body
}
var xx = new name() // xx就是一个对象
constructor构造对象，用于传递参数，通过new命令生成对象实例时，自动调用该方法
<script>class teach{constructor(uname,age){this.uname=unamethis.age=age}say(){console.log('hello');}}var teacher=new teach('hxd',18)teacher.say()</script>类的继承
<script>class Father{constructor(){}money(){console.log(100);}}class son extends son(){}var son = new son();son.money()</script>子类调用父类的属性和方法
class Father{constructor(x,y){this.x=x;this.y=y}sum(){console.log(this.x+this.y)}}class son extends Father(){constructor(x,y){super(x,y)}}var son = new son(1,2);son.money()
6.DOM概念和使用
DOM对标签引用
通过DOM接口表示网页的内容，结构，样式
根据id获取 ： document.getElementById()
根据标签获取： document.getElementsByClassName()
根据类名获取： document.getElementsByTagName()
DOM改变标签的行为
事件源：如何触发的
时间处理程序：它要做什么事，通过一个函数来完成
<body><button id="btn">111</button><script>var btn = document.getElementById('btn')btn.onclick = function () {alert('111')}</script></body>触发按钮修改div
<body><button id="btn">111</button><div>事件</div><script>var btn=document.querySelector('button')var div=document.querySelector('div')btn.onclick=function() {div.innerHTML='<b>2025-11-9</b>'}</script>
</body>通过css样式获取标签
修改标签的样式
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 200px;height: 200px;background-color: pink;}</style>
</head><body><button id="btn">111</button><div>事件</div><script>// 获取元素var div = document.querySelector('div')// 注册时间，处理程序div.onclick=function(){this.style.backgroundColor=bluethis.style.width='300px';}</script></body>
</html>删除父标签下的子标签
添加标签样式
创建一个新元素（自定义标签追加新元素）
JSON格式转换
json
json{"name":"Tom","age":20,"gender":"male"
}
对象转换： JSON
在网络中进行数据传输 xml json xxe漏洞
JSON转换成对象 parse() var obj=json.parse(json) obj.namestringfy()7.BOM (内置对象)
window、screen、history、location
alert (): window.alert() window.console.log()
navigator.useragent
计时器分类
setInterval(): 每3秒执行一次，按照指定周期调用函数
<script>var i = 0setInterval(function () {i++console.log('定时器执行了' + i + '次');}, 3000)
</script>settimeout(): 3秒之后执行一次 延时函数
cookie session token
同步和异步
同步： 一件接着一件
异步： 在做这件事的同时，你还可以去处理其他事
<script>console.log(1111)setTimeout(function(){console.log(222222);},0);console.log(33333);// 代码执行结果111 333 222
</script>location.href 实现url跳转
<script>alert(location.href) // 获取当前url地址 location.href = "http://baidu.com "
</script>8.Jquery库
Jquery库：里面存在大量的JS方法
Jquery cdn缓存库 https://www.bootcdn.cn/jquery/
Jquery 作用： write less,do more
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
</head><body><a href="" class="test">点击</a><script>//js写法// var test=document.getElementById('test')// test.onclick=function(){// alert('hello')// }$('.test').click(function () {alert('hello')})</script>
</body></html>Juery常见使用
参考文档 ： jQuery API 中文文档 | jQuery API 中文在线手册 | jquery api 下载 | jquery api chm
使用方法如下
### Jquery 使用实例
<body><a href="" class="test">点击</a><li>111</li><script>$('li').text('666')$('li').html('<b>hxd</b>')$('.test').html('<b>python</b>').css('color', 'red')</script>
</body>9.Ajax异步请求
异步无刷新 百度搜索关键字搜索、用户已存在验证
案例实战： 用户点击可以跳转，如果不跳转，则5秒后自动跳转，要求里面有秒数倒计时location
<body><a href="http://www.baidu.com">支付成功后5秒跳转到首页</a><script>var a = document.querySelector('a')let i = 5let timeid = setInterval(function () {i--a.innerHTML = `支付成功${i}秒后跳转到首页`if (i === 0) {location.href = "http://www.baidu.com"}}, 1000)</script>
</body>