复习（前端）
前端代码
html + css + JavaScript
html:网页骨架
css:美化html
js:人机交互
第一个HTML网页
1、新建文本文档
2、修改文件名称为XXX.html或xxx.htm
3、编写一下代码:
<html>
<head></head>
<body>
xxx
</body>
</html>
保存
4、使用浏览器打开
安装开发工具
作用：提高开发效率，减少记忆负担
前端主流开发工具：
VSCode
Hbuilder（建议新手使用）
Hbuilder的使用
1,如何创建项目
文件 - 新建 - web项目 - 填写项目名称,选择存储位置 - 完成
项目管理器空白区域点击鼠标右键 - 新建 - web项目 - 填写项目名称,选择存储位置 - 完成
2,如何创建html文件
选中当前项目 - 点击鼠标右键 - 选择新建 - html文件 - 填写文件名称
3,如何创建css文件
选中当前项目的css文件夹 - 点击鼠标右键 - 选择新建 - css文件 - 填写文件名称
4,如何创建js文件
选中当前项目的js文件夹 - 点击鼠标右键 - 选择新建 - javascript文件 - 填写文件名称
5,其他
html
基本结构
<html>
<head></head>
<body></body>
</html>
html:网页根标签
head:头标签,主要是给浏览器看的
title:网页标题
meta:设置网页编码格式
style:编写css代码
link:引入css文件
script:编写或引入js
body:体标签,主要编写网页骨架
body中的标签
文本标签
h1~h6
p
font
span
b
big
i
small
sub
sup
del
图片标签
img
属性：
src：图片地址
alt：提示字
表单标签
input
属性：
type：
text文本
pssword密码
button按钮
radio单选
checkbox多选
file文件上传
date
datetime
color
submit提交
reset重置
name值相同的为同一组（一般和单选多选联用）
value值
placeholder提示字虚的
form
action提交的地址
method提交的方式
enctype上传的数据类型
媒体标签
audio
src：播放音频的地址
controls：控制器，就是可以点的开关
autoplay：自动播放
loop：循环播放
video
同上
表格标签
table：表格
border：边的宽度
width：宽
cellspacing：单元格间距
tr：行
td：单元格
rowspan：合并行
colspan：合并列
th：单元格
容器标签
div
排版标签
br：换行
hr：水平分割线
框架标签
frameset
iframe
css
作用
美化HTML标签
书写位置
1.在标签的style属性中，也叫内联样式
2.在style标签中
<head>
<style>
</style>
</head>
3,在css文件中,使用link引入其css文件
选择器
作用:在css中寻找指定html标签
基本选择器
id选择器
#id的值{}
标签选择器
标签名{}
class选择器
.class的值{}
统配选择器
*{}
高级选择器
子代选择器
父选择器 子选择器{}
父选择器>子选择器{}
属性选择器
选择器[属性名=属性值]
伪类选择器
鼠标悬浮
获取焦点
之前
之后
nth-of-type(n)
优先级：
当选择器优先级相同时,谁在下,听谁的
当选择器优先级不同时,谁优先级高,听谁的
内联样式 > id选择器 > class选择器 > 标签选择器 > 统配选择器
文本样式
字体颜色：color
值：
1.系统提供的颜色单词
2.六位调色法
光的三原色：红绿蓝
每个颜色的取值：0~255（十进制），00~ff（十六进制）
语法：
#红色绿色蓝色
3.rgb（红绿蓝）
每个颜色0~255
例：rgb（255,0，0） 红色
4.fgba（红色，绿色，蓝色，透明度）
颜色如上，透明度：0（全透明）~1（不透明）
例：rgba（255,0,0,0.5） 效果就是和上面颜色相同但有一点透明，如果下层有图片之类的就可以透过透明的部分看到下层的图片。
注意：表示颜色例子，都是红色
color：#ff0000；
color：rgb(255,0,0)
字体大小：font-size
px表示像素
默认的大小为16px
例：
font-size="18px"
字体样式：font-style
italic 斜体
normal 默认
字体：font-family
笔画粗细：font-weight
装饰线：text-decoration
underline 下划线
overline 上划线
none 取消装饰线
行高（一行字所占高度）：line-height
文本在标签中的位置：text-align
left
right
center
背景样式
背景颜色：background-color
背景图片：background-image:(地址)
背景是否平铺：background-repeat
no-repeat 不平铺
repeat 平铺，默认的
背景大小：background-size
一参：背景宽度
二参：背景高度
例：background-size：20px 20px；
背景位置：background-position
一参：左右位置
left、right、center
0% 50% 100%
二参：上下位置
top bottom center
0% 50% 100%
元素类型
行内元素：
设置宽高无效，组件大小按内容撑开，不会独占一行
如：span font b big 。。。
行内块元素：
设置宽高有效，不会独占一行
如：input img。。。
块元素：
设置宽高有效，独占一行
如：div p h1~h6.。。
如何修改标签元素类型
通过display进行修改
block 块元素
inline 行内元素
inline-block 行内块
例：
display: block;
盒子模型
相关属性：
宽（width）/高（height）
px 定值
% 父容器的百分比
内边距 padding
边框 border
border-width 边框宽度
border-style 边框样式
border-color 边框颜色
border-radius 边框角度
例：border-radius: 50%;
外边距 margin
注意：当元素类型为块元素时可用使用margin：0 auto；使标签位于父容器左右中心
定位
position
浏览器窗口定位 position:fixed;
让标签与浏览器窗口为参照物定位
配合的属性
left 与浏览器窗口左边的距离
right 与浏览器窗口右边的距离
top 与顶部
bottom 与底部
z-index 层级
注意：不保留标签的原位置
相对定位 position:relative;
参照物：标签的原位置
配合的属性
left 标签与原位置左边的距离
right 与原位置右边的距离
top 与原位置顶部的距离
bottom 与原底部的距离
z-index 层级
会保留原标签的位置
绝对定位 position:absolute;
让标签移动，参照最近做过定位的父容器。意思就是父容器做过定位就参照父容器，没有的话就参照父容器的父容器，如果这个也没有做过的话就再向上一层找，直到html标签。
参照物：上层最近做过定位的父容器
配合的属性
left
right
top
bottom
z-index
不会保留标签原位置
JS
简介
简称：JS 简绍：一门面向对的事件驱动型、解释型脚本语言 规范：ES6（最新版） ES5（目前使用最多）作用
1.可以动态改变HTML网页中的标签属性 2.可以动态的修改标签的样式 3.可以对用户输入的数据进行校验 4.可一动态操作网页中的标签 5.实现异步通信书写位置
1,标签的时机属性中 2,在script标签中书写 3,在js文件中书写注释
// /* */ /** */输出
控制台输出 只能输出文本 console.log("输出内容"); 网页输出 给页面上输出文本，也可以输出HTML标签 document.write("网页输出"); document.write(">hr"); 弹框输出 以弹框的形式输出 alert(输出内容);数据类型
数字:number 字符串:string 空:null 未定义:undefined 布尔:boolean 对象:object typeof 值或变量变量
作用:记录一个值可以被改变的数据 使用: 1,声明 var 变量名; 2,赋值 变量名 = 值; 3,使用 变量名运算符
算数运算符 +,-,*,/,%,++,-- 赋值运算符 = +=,-=,*=,/=,%= 关系运算符 <,>,<=,>=,!=,==,=== 逻辑运算符 &&,||,! 字符串连接符 + 三目运算符 条件表达式?值1:值2;
今日
分支语句
作用：判断
分类：switch if
switch
语法：
switch(变量){
case 常亮1:
当变量等于常亮1时，执行此处代码
break;
case 常亮2:
当变量等于常亮2时，执行此处代码
break;
....
case 常亮n:
当变量等于常亮n时，执行此处代码
break;
default:
当变量不等于以上常亮时，执行此处代码
break;
}
常亮：代码在编码万后，值不会发生变化
注意：
case可以有多个，也可以一个没有
default，可有可无，最多一个
分支语句只会执行其中一个
break表示跳出当前代码块，可以没有，但会导致贯穿（执行所有case）
常量值不能相同
if
语法
if(条件表达式){
条件为真，执行此处
}
else{
为假，执行此处
}
经验：先排除错误区间
循环语句
作用：重复执行一段代码
分类：while do while for
while
语法：
while（条件表达式）{
为真时，执行此处代码
执行完，再判断表达式是否为真（一般在此循环体内还有++），不满足跳出循环
}
do while
语法：
do{
先执行此处代码
再判断条件表达式
}while（条件表达式）；
特点：先执行再判断
面试题：
while与do while的区别
哪个循环的循环体至少执行一次（do while）
for
语法：
for（表达式1；表达式2；表达式3）{
循环体4
}
1：初始化变量（第一次定义就是初始化）
2：循环条件
3：改变变量
4：要重复执行的代码
流程：
1、2、4、3、2、4、3、2、4、3、....2、4、3、2
流程控制语句
break:跳出当前循环
continue：跳过本次循环
作业(没有的找不到了）
^1,输入年龄判读是否成年,if
//定义age存放年龄
var age = 17;
if(age>=18)
document.write("成年\n");
else
document.write("未成年\n");
^2,输入年份判读是否为闰年,if
能被400整除，或者能被4整除但不能被100整除的都是闰年
//定义a存放需要计算的年份
var a = 2023;
if(a%400==0 && (a%4==0 && a%100!=0))
document.write("是闰年");
else
document.write("不是闰年");
^3,输入1~7,分别显示星期几,switch
var num = 3;
document.write("\n")
switch(num){
case 1:
document.write("星期一");
break;
case 2:
document.write("星期二");
break;
case 3:
document.write("星期三");
break;
case 4:
document.write("星期四");
break;
case 5:
document.write("星期五");
break;
case 6:
document.write("星期六");
break;
case 7:
document.write("星期日");
break;
default:
document.write("请正确输入");
break;
}
^4,输入数字,判读是否为奇数
//假设a就是输入的数字
var a = 23;
if(a/2==0)
document.write("\n不是奇数");
else
document.write("\n是奇数");
document.write("<br />")
^5,会员打8折,满100在打8折
^6,快递员送货绩效
0~50: 0
50~1500: 0.8
1501~6000: 1
6000+: 1.2
//a存放绩效
var a = 0;
//b存放送货数
var b = 2356;
if(b >= 0 && b<50){
a = 0;
}else if(b >= 50 && b<= 1500){
a = 0.8;
}else if(b >= 1500 && b <= 6000){
a = 1;
}else if(b >= 6000){
a = 1.2;
}
document.write("快递员当月绩效为：" + a);
^7,分别使用三种循环打印100以内的数
^8,计算100以内的数之和
var sum = 0;
for(var i= 0;i<100;i++){
if(i%2!=0){
sum = sum + i;
}else{
sum;
}
}
document.write(sum);
</script>
^9,输出100以内的偶数
document.write(17%4);
document.write("<hr/>");
for(var a = 1;a<=100;a++){
if(a%2==0)
document.write(a + "是偶数<br/>");
}
10,计算100以内的奇数和
^11,计算10的阶乘
^12,推演九九乘法表
for(var i=1;i<=9;i++){
for(var j=1;j<=i;j++){
document.write(j + "*" + i + "=" + (i*j) + " ");
}
document.write("<br/>");
}
^13,鸡兔同笼.35头,94腿
//i鸡0-35,j兔0-23
//兔0-23的所有情况下，鸡的所有情况
//满足i+j=35，且2i+4j=94
for(var i = 1;i<=35;i++){
for(var j=1;j<=23;j++){
if(i+j==35 && 2*i+4*j==94){
document.write("鸡有" + i + "只，兔有" + j + "只。");
}
}
}
分别使用代码思想与数学思想计算
预习:
1,数组
2,函数
3,算法
冒泡排序
选择排序
二分查找法
935
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
