admin管理员组文章数量:1571946
0、软件安装
使用vscode进行开发 安装中文插件
Vue学习笔记_lucky友人a的博客-CSDN博客 软件下载点击
1、HTML
1、HTML（Hyper Text Markup Language）中文译为：超文本标记语言，HTML标签与标签之间的关系可分为：父子关系（嵌套关系），兄弟关系（并列关系）
2、h系列标签
文字都有加粗 • 文字都有变大，并且从h1 → h6文字逐渐减小 • **独占一行**
3、p段落标签
段落之间存在间隙而且**独占一行**
4、br换行标签
单标签 让文字强制换行
5、hr水平线标签
单标签 在页面中显示一条水平线 <hr/> /可以省略
6、文本格式化标签
7、标签里的属性
标签的属性写在开始标签内部
标签上可以同时存在多个属性
属性之间以空格隔开
标签名与属性之间必须以 空格 隔开
属性之间没有顺序之分
8、img图片标签
单标签
src属性 属性名src 属性值目标图片的路径
alt属性替换文本
title 提示文本
./同级目录下可省略 2个./上级
还有width和height属性 属性值：宽度和高度（数字）
如果只设置width或height中的一个，另一个没设置的会自动等比例缩放（此时图片不会变形）
• 如果同时设置了width和height两个，若设置不当此时图片可能会变形
9、audio音频标签
双标签 第二个属性 显示播放的控件
第二个属性后面加autoplay 可以自动播放 部分浏览器不支持
加loop 循环播放 目前支持mp3 mav ogg
10、video视频标签
谷歌浏览器中配合muted属性可静音 其他属性和音频一样 支持MP4 、WebM 、Ogg
11、a链接标签
称呼： a标签、超链接、锚链接
双标签，href里是链接地址 也可以是# 表示空链接，点击之后回到网页顶部
• a标签默认文字有下划线（代码里的点去百度）
• a标签从未点击过，默认文字显示蓝色
• a标签点击过之后，文字显示为紫色（清除浏览器历史记录可恢复蓝色）
可添加target属性 属性值有_self也是默认的跳转覆盖原网页 ，_blank弄出新窗口保留原
12、无序列表
在网页中表示一组无顺序之分的列表，如：新闻列表
ul标签表示无序列表整体，只能包li标签，li标签可以包含一切
列表的每一项前默认显示圆点标识
13、有序列表
在网页中表示一组有顺序之分的列表，如：排行榜
ol标签表示有序列表整体，只能包li标签
列表的每一项前默认显示序号标识
14、自定义列表
在网页的底部导航中通常会使用自定义列表实现
dl标签表示自定义列表整体，dt表示主题 dd是针对主题的每一项 dd前默认缩进
dl只允许包含dt/dd，dt/dd可以包一切
无序列表最常用，有序列表偶尔用，自定义列表底部导航用
15、表格的基本标签
标签的嵌套关系：table > tr > td
table 表格整体 包多个tr
tr 表格每行 可包td
td 表格单元格 包内容
table标签第一个属性边框宽度 ,宽高样式推荐css
th 表示表头单元格 通常第一行，默认加粗居中
宽高都是数字就行
16、表格的结构标签（了解）
• thead：表格头部
• tbody：表格主体
• tfoot：表格底部
表格结构标签内部用于包裹tr标签 ，表格的结构标签可以省略
17、合并单元格
通过左上原则，确定保留谁删除谁
• 上下合并→只保留最上的，删除其他
• 左右合并→只保留最左的，删除其他
不能跨结构标签合并
18、input系列标签（表单标签 单标签）
在网页中显示收集用户信息的表单效果，如：登录页、注册页
input标签可以通过type属性值的不同，展示不同效果
input标签 <input type=""> 前面可以写文字，写什么显示什么
text 文本框 属性placeholder="这里是框框里提示的文字经常用"
password密码框 写的会加密 属性placeholder="这里是框框里提示的文字经常用"
radio 单选框 name属性 性别举例子name="sex" 分组有相同name的单选框为一组 一组只有一个被选 checked属性 默认选中
checkbox 多选框 checked属性 默认选中
file文件选择 想多选上传加个属性multiple 没有属性值
submit 提交 数据给后端服务器 加个value=“按钮名称写这”
reset 重置 加个value=“按钮名称写这”
button 普通按钮 加个value=“按钮名称写这” 需要配合js
想要提交和重置就需要父标签 form来管理
value属性：用户输入的内容，提交之后会发送给后端服务器
name属性：当前控件的含义，提交之后可以告诉后端发送过去的数据是什么含义
后端接收到数据的格式是：name的属性值 = value的属性值
19、button按钮标签
• 谷歌浏览器中button默认是提交按钮
• button标签是双标签，更便于包裹其他内容：文字、图片等
type属性值（同input的按钮系列）
20、select下拉菜单标签
在网页中提供多个选择项的下拉菜单表单控件
select标签：下拉菜单的整体
option标签：下拉菜单的每一项 属性值selected：下拉菜单的默认选中
21、textarea文本域标签
在网页中提供可输入多行文本的表单控件
• cols：规定了文本域内可见宽度
• rows：规定了文本域内可见行数
右下角可以拖拽改变大小 ，实际开发时针对于样式效果推荐用CSS设置
22、label标签
比如这个点女就可以圈起来了，不用点中圈圈
常用于绑定内容与表单标签的关系
使用方法①： 1. 使用label标签把内容（如：文本）包裹起来 2. 在表单标签上添加id属性 3. 在label标签的for属性中设置对应的id属性值
使用方法②： 1. 直接使用label标签把内容（如：文本）和表单标签一起包裹起来 2. 需要把label标签的for属性删除即可
23、没有语义的布局标签div和span
实际开发网页时会大量频繁的使用到div和span这两个没语义的布局标签
div标签：一行只显示一个（独占一行）
span标签：一行可以显示多个
24、有语义的布局标签（了解）
在HTML5新版本中，推出了一些有语义的布局标签供开发者使用
25、字符实体
26、补充
2、CSS
1、css是什么？
CSS：层叠样式表（Cascading style sheets）
CSS 标点符号都是英文状态下的
每一个样式键值对写完之后，**最后需要写分号**
2、写在哪里以及哪些选择器？
常见引入方式：内嵌式、外联式、行内式
class类名相当于姓名，可以重复，一个标签可以同时有多个class类名
• id属性值相当于身份证号码，不可重复，一个标签只能有一个id属性值
实际开发中，类选择器用的最多
• id一般配合js使用，除非特殊情况，否则不要使用id设置样式
• 实际开发中会遇到冗余代码的抽取 （可以将一些公共的代码抽取到一个公共的类中去）
3、字体和文本样式
谷歌默认字体大小是16px，没单位不生效
font-size字体大小 单位px即像素
font-weight 字体粗细 **没有单位**，400正常，100-900范围
font-style 是否倾斜 italic倾斜 normal不倾斜（默认）
font-family 字体1，字体2... 默认微软雅黑 属性值可以直接写宋体、楷体
从左往右按照顺序查找，如果电脑中未安装该字体，则显示下一个字体,
如果都不支持，此时会根据操作系统，显示最后字体系列的默认字体
无衬线字体 （sans-serif）比如黑体 第一个比较常用 衬线字体（serif）比如宋体 等宽字体 每个字体宽度一样
/* 电脑没有雅黑则黑体，没黑体则sans-serif */
font-family: 微软雅黑,黑体,sans-serif;
样式重叠 最下面的生效 ，**后面覆盖前面**
font (复合属性)
取值：
• font : style weight size family; 可以省略style weight
属性名text-indent 文本缩进
取值：数字加px 数字加em（1em=1个字符大小）
首行缩进2个字符 2em；
浏览器默认左对齐
text-align文本水平对齐方式也是内容对齐方式比如文本、span、a、input、img标签（这个就是图片，它父标签是body，设置样式body）
如果需要让文本水平居中，text-align属性给文本所在标签（文本的父元素）设置
属性值 left **center** right
text-decoration 文本修饰
属性值 underline 下划线常用
line-through 删除线不常用
overline 上划线基本不用
none无线 很常用去超链接线
line-height即行高=文字高度+上间距+下间距 控制一行的上下间距
属性值可以数字+px或者当前font-size的倍数
复合语句font：style weight size/line-height family；
font:italic 777 30px/2 宋体; 2就是2倍
应用：1. 让单行文本**垂直居中**可以设置 line-height : 文字**父元素高度**
2. 网页精准布局时，会设置 line-height : 1 可以取消上下间距
谷歌浏览器调试 f12 找到样式 自己的css 可以点击属性值 按键盘上下 ，可以添加属性 ，在最后一个属性值那按tab就换行了，可以写
颜色常见取值 3原色红绿蓝
十六进制写法#000000 黑 简写#000 #ff0000简写#f00
rgba表示法 a表透明度0到1 rgba ( 0 , 0 , 0 , 0.5 ) 可以省略写成 rgba ( 0 , 0 , 0 , .5 )
rgb写法 关键字写法如red
标签水平居中方法总结 margin : 0 auto 0上下间距 auto左右居中
4、选择器进阶
复合选择器
1、后代选择器 儿子孙子都会选，那个第一个p不会变红
选择器1 选择器2{css}
2、子代选择器 > 只选儿子
选择器1 >选择器2{}
3.并集选择器 同时选择多组标签，设置相同的样式
选择器1，选择器2{}
4.交集选择器 选中页面中同时满足多个选择器的标签
选择器之间是紧挨着的，没有东西分隔
选择器1 选择器2{} p.box{} p标签里的这个类
hover伪类选择器 **鼠标悬停在元素上的状态 任何标签都能加**
选择器：hover{}
a:hover{
color: red;
}
<a href="#">超链接</a>
emmet语法 通过简写语法，快速生成代码
a{导航$}*4
在href里快速添加，按住alt+shift，选中4个加#就行
提示css 单词的首字母
w300+h200+bgc
5、背景相关属性
background-color bgc 默认透明 rgba(0,0,0,0) 背景颜色
一般在布局中会习惯先给盒子设置背景颜色
background-image:url(路径) bgi 背景图片
• 背景图片中url中可以省略引号
• 背景图片默认是在水平和垂直方向平铺的
• 背景图片仅仅是指给盒子起到装饰效果，类似于背景颜色，是不能撑开盒子的
background-repeat：属性值 bgr 背景平铺 repeat 为默认属性值默认水平垂直都平铺
还有**no-repeat不平铺** repeat-x横着 repeat-y竖着铺
background-position：**水平方向 垂直方向** 属性值里有空格 bgp 背景位置 0 0 就是左上角
属性值填right bottom下 数字px center ...
背景色和背景图只显示盒子里面 -30就外面了
复合语句
background：color image repeat position 这个不按顺序，最好按
background:pink url(./1.jpg) no-repeat center center;
img标签来实现重要图片
background-image 图片放div里，不重要放背景
6、元素显示模式
块级元素 :
1、 独占一行（一行只能显示一个）
2.、宽度默认是父元素的宽度，高度默认由内容撑开
3.、可以设置宽高
如：div、p、h系列、ul、li、dl、dt、dd**、form、header、nav、footer……
行内元素：
1、 一行可以显示多个
2.、宽度和高度默认由内容撑开
3.、不可以设置宽高
如：a、span、b、u、i、s、strong、ins、em、del
行内块元素：
1、一行可以显示多个
2、可以设置宽高
如：input、textarea、button、select……
特殊情况：img标签有行内块元素特点，但是Chrome调试工具中显示结果是inline
元素显示模式转换
改变元素默认的显示特点，让元素符合布局要求
display：属性名
块级元素一般是作为大容器 p标签不能嵌套div p h 等块级元素
a标签内部可以嵌套任何元素，除了自己
margin-top: calc((100vh - 200px)/2);
/* 这计算可以永远垂直居中,不受缩放影响 */
7、css的继承性
子元素有默认继承父元素样式的特点
可以继承的常见属性(**文字控制属性都可以继承**)
1、color
2.、font-style、font-weight、font-size、font-family
3.、text-indent、text-align
4.、line-height
...
常见应用场景：
1、可以直接给ul设置 list-style:none 属性，从而去除列表默认的小圆点样式
2、 直接给body标签设置统一的font-size，从而统一不同浏览器默认文字大小
如果元素有浏览器默认样式，此时继承性依然存在，但是优先显示浏览器的默认样式
超链接的蓝色，不能继承，像h1这种字体也不会 。我没有就继承我爹的，我有就不继承
8、css的层叠性和优先级
1、给同一个标签设置不同的样式 → 此时样式会层叠叠加 → 会共同作用在标签上
2、 给同一个标签设置相同的样式 → 此时样式会层叠覆盖 → 最终写在最后的样式会生效
当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果
优先级或者叫权重
谁的范围广谁的优先低
继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important
!important写在属性值的后面，分号的前面！
复合选择器就是多个样式。每个样式数**行内个数，id个数，类个数，标签个数**，按这顺序数，如果第一级数字相同，此时再去比较第二级数字，如果比较出来了，之后的统统不看
!important如果不是继承，则权重最高，天下第一！
1、先判断选择器是否能直接选中标签，如果不能直接选中 → 是继承，优先级最低 → 直接pass
2. 通过权重计算公式，判断谁权重最高
9、盒子模型：
页面中的每一个标签，都可看做是一个 “盒子”，通过盒子的视角更方便的进行布局
CSS 中规定每个盒子分别由：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）构成，这就是 盒子模型
边框：border
复合属性**border：10px solid red;** 粗细线颜色不分顺序 快捷键 bd+tab 10是粗细 solid实线 dashed虚线 dotted点线 **单独设置边框border-方向名词** **会撑大盒子，类似于纸箱**
内边距：padding
属性名：padding - 方位名词
➢ 属性值：数字 + px
外边距：margin
设置和内边距一模一样，就位置不一样
撑大需要减，可以变成css3盒子模型，加box-sizing:border-box; 就不需要手动减法，内减模式
清除默认内外边距 *{margin：0；padding：0；} 这样式一定要有
去掉ul>li的符号 ul{list-style: none;}
外边距折叠现象 :
合并现象 垂直布局的块级元素，上下的margin会合并，结果为最大那个，解决，只给一个盒子设置margin即可
外边距的塌陷 子级坑父级 子元素的margin-top会作用在父元素上，导致父元素一起下移动 在父样式添加overflow：hidden;设置浮动
行内元素如span 标签的margin和padding的-top和-bottom不生效，可以加行高解决问题line-height
10、浮动
结构伪类选择器：
1、作用：根据元素在HTML中的结构关系查找元素
2、优势：减少对于HTML中类的依赖，有利于保持代码整洁
3、 场景：常用于查找某父级选择器中的子元素
E:first-child{} 匹配父元素第一个子元素
E:last-child{} 最后一个
E:nth-child(n){} 第n个，1就是第一个
E:nth-last--child(n){} 倒数第n个
n可以是公式，n从0开始：偶数2n、2n+1奇数，-n+5前五个，n+5后五个。4n是4的倍数
伪元素：css模拟出的标签效果 工作里用装饰性的不重要的小图
::before 在父元素内容的前面添加一个伪元素
::after 在父元素内容的后面添加一个伪元素
必须设置content属性才能生效
伪元素默认是行内元素 dispaly
标准流
又称文档流，是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了应该以何种方式排列元素
常见标准流排版规则
1、块级元素：从上往下，垂直布局，独占一行
2、行内元素 或 行内块元素：从左往右，水平布局，空间不够自动折行
浮动
1、早期作用：图文环绕
2.、现在作用：用于布局，让垂直布局的盒子变成水平布局，如：一个在左，一个在右
css里 float：left，right
特点：盒子脱离标准流 浮动元素比标准流高半个等级，可以覆盖标准流的元素，浮动标签顶对齐
浮动后的标签具备行内块特点，**一行显示多个 设置宽高**
浮动的元素不能通过text-align:center或者margin:0 auto
css书写顺序
1浮动/display
2盒子模型 margin border padding
3文字样式
这样浏览器执行效率高
写网页第一步 *{m0+p0}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
/* 清除默认内外边距和添加内减模式这样div就不会撑大 */
}
清除浮动的方法有哪些？
1、直接设置父元素高度
2、额外标签法
3、单伪元素清除法
4、双伪元素清除法
5.、给父元素设置overflow : hidden
11、布局定位（完）
标准流
1、块级元素独占一行 → 垂直布局
如：**div、p、h系列、ul、li、dl、dt、dd**、form、header、nav、footer……
2、行内元素/行内块元素一行显示多个 → 水平布局
浮动
1、可以让原本垂直布局的块级元素变成水平布局
定位
1、可以让元素自由的摆放在网页的任意位置
2. 一般用于 盒子之间的层叠情况
设置定位的方式
属性名position 后面需要偏移值方向上下左右英文
属性值：
relative 相对定位 常用 配合绝对定位组CP（**子绝父相**）在页面中占位置 → 没有脱标
设置偏移值：水平+垂直就近各取一个
position: relative;
left: 100px;
top: 100px;
/* 改变位置参照原来位置而且占有原来位置 ，左上为准*/
absolute 绝对定位
脱标不占位置 具备行内块特点（在一行共存，宽高生效）
有父级没有定位，就以窗口浏览器为参照，父级一般用相对定位，**子绝父相**
不能使用margin居中
div{
position: absolute;
left: 50%;
/* margin-left: -150px; */
top: 50%;
/* margin-top: -150px; */
transform: translate(-50%,-50%);
/* 上面这更方便 */
width: 300px;
height: 300px;
background-color: pink;
}
fixed 固定定位
脱标不占位置 位置参考浏览器窗口 具备行内块特点
static静态定位 一般用不到就是默认标准流
标准流<浮动<定位
默认定位的盒子后来者居上，默认z-index的值是0
加z-index：整数 越大显示顺序越往上 必须和定位用
垂直对齐方式
vertical-align：
属性值 ：baseline 默认基线对齐 top顶部 middle 中部 bottom 底部
浏览器遇到行内和行内块标签当文字处理。默认文字按基线对象
比如2个input标签 一个文本一个按钮，加个垂直对齐就行
光标类型
cursor
属性值
default 默认是箭头
pointer 小手
text 工字形 可以复制
move 十字光标
边框圆角
属性名border-radius
取值一般数字+px、百分比
4个不同值左上、右上、右下、左下
盒子的百分50就是正圆
胶囊 取盒子高度的一半 盒子本身是长方形
溢出部分
属性名overflow
属性值
visible 默认溢出可见
hidden 溢出隐藏
scroll 无论溢出，显示滚轮
auto 根据是否溢出，自动显示或隐藏滚动条
元素本身隐藏
visibility:hidden；占位隐藏 不常用
display:none 常用
元素整体透明度
opacity 取值0-1 0完全透明
精灵图
项目中将多张小图片，合并成一张大图片，这张大图片称之为精灵图
优点：减少服务器发送次数，减轻服务器的压力，提高页面加载速度
将精灵图设置背景图片 都使用内标签 span、b、i
先测试精灵图里那个图标的大小，bgi设置背景图 默认左上角 量水平和垂直像素
background-position: 0 0; 背景图位置 水平和垂直
background-size: contain;等比例缩放 背景图大小 可以是数字px、百分比 cover 覆盖
text-shadow文字阴影
取值h-shadow水平偏移 必选
v-shadow 垂直偏移 必选 ，下面是可选
blur模糊度
color阴影颜色
盒子阴影 box-shadow
取值h-shadow水平偏移 必选
v-shadow 垂直偏移 必选 ，下面是可选
blur模糊度
spread 阴影扩大
color阴影颜色
inset阴影改内部阴影 默认外
过渡 transition 常配合hover使用
让元素的样式慢慢的变化，常配合hover使用，增强网页交互体验
如果变化的多，写all表示所有 ，谁变化谁加过渡属性
过渡的属性 过渡的时长数字+s
div{
width: 400px;
height: 400px;
background-color: pink;
transition: width 1s;
}
div:hover{
width: 600px;
}
12、补充
CSS的书写顺序
3、JavaScript
1、初识JavaScript
(ECMAScript)js语法+bom+dom组成JavaScript(JS)
ECMAScript 是由ECMA 国际（ 原欧洲计算机制造商协会）进行标准化的一门编程语言，这种语言在万维网上应用广泛，它往往被称为 JavaScript 或 JScript，但实际上后两者是 ECMAScript 语言的实现和扩展。
**文档对象模型**（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言的**标准编程接口**。
BOM (Browser Object Model，简称BOM) 是指浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等。
JS 有3种书写位置，分别为行内、内嵌和外部
注意单双引号的使用：在HTML中我们推荐使用双引号, JS 中我们推荐使用单引号
<input type="button" value="点我试试" οnclick="alert('Hello World')" / > 行内不推荐
< script>alert('Hello World~!'); < /script> 内嵌
< script src="my.js"></ script> 外部
// 用来注释单行文字（ 快捷键 ctrl + / ）
vscode里修改
输入输出语句：
变量：
变量是用于存放数据的容器。 我们通过 变量名 获取数据，甚至数据可以修改。
var 是一个 JS关键字，用来声明变量
命名规则：
由字母(A-Za-z)、数字(0-9)、下划线(_)、美元符号( $ )组成，如：usrAge, num01, _name
严格区分大小写。var app; 和 var App; 是两个变量
不能 以数字开头。 18age 是错误的
不能 是关键字、保留字。例如：var、for、while
变量名必须有意义。 MMD BBD nl → age
遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。 myFirstName
推荐翻译网站： 有道 爱词霸
JS 把数据类型分为两类：
简单数据类型 （Number,String,Boolean,Undefined,Null）
复杂数据类型 （object)
数字型 Number
alert(Number.MAX_VALUE); // 1.7976931348623157e+308 最大
alert(Number.MIN_VALUE); // 5e-324 最小
alert(Infinity); // Infinity 无穷大
alert(-Infinity); // -Infinity 小
alert(NaN); // NaN 非数值
isNaN() 判断一个变量是否为非数字的类型，返回 true 或者 数字则false
var usrName = "andy";
console.log(isNaN(userName)); // true ，"andy"是一个非数字
字符串型 String
字符串型可以是引号中的任意文本
HTML 标签里面的属性使用的是双引号，JS 这里我们更**推荐使用单引号**
字符串转义符
字符串的 length 属性可以获取整个字符串的长度
alert(s.length);
字符串拼接
字符串 **+** 任何类型 = 拼接之后的新字符串
案例代码
var age = prompt('请输入您的年龄');
var str = '您今年已经' + age + '岁了';
alert(str);
typeof 可用来获取检测变量的数据类型
var num = 18;
console.log(typeof num) // 结果 number
转换为字符串
更喜欢用第三种加号拼接字符串转换方式， 这一种方式也称之为隐式转换
转换为数字型（重点）
转换为布尔型
console.log(Boolean('')); // false
console.log(Boolean(0)); // false
console.log(Boolean(NaN)); // false
console.log(Boolean(null)); // false
console.log(Boolean(undefined)); // false
console.log(Boolean('小白')); // true
console.log(Boolean(12)); // true
2、运算符
算术运算符
递增运算符
++num 前置递增 **先自加，后返回值**
var num = 10;
alert(++num + 10); // 21
num++ 后置递增 **先返回原值，后自加**
var num = 10;
alert(10 + num++); // 20
比较运算符
逻辑运算符
与必须2边都正确才是正确 或只要一个对就是对
运算优先级
3、分支
流程控制主要有三种结构，分别是顺序结构、分支结构和循环结构
if else语句
if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
alert("这个年份是闰年");
} else { // 剩下的是平年
alert("这个年份是平年");
}
var score = prompt('请您输入分数:');
if (score >= 90) {
alert('宝贝，你是我的骄傲');
} else if (score >= 80) {
alert('宝贝，你已经很出色了');
} else if (score >= 70) {
alert('你要继续加油喽');
} else if (score >= 60) {
alert('孩子，你很危险');
} else {
alert('熊孩子，我不想和你说话，我只想用鞭子和你说话');
三元表达式
表达式1 ? 表达式2 : 表达式3;
如果表达式1为 true ，则返回表达式2的值，如果表达式1为 false，则返回表达式3的值
var time = prompt('请您输入一个 0 ~ 59 之间的一个数字');
// 三元表达式 表达式 ？ 表达式1 ：表达式2
var result = time < 10 ? '0' + time : time; // 把返回值赋值给一个变量
alert(result);
switch 语句
switch( 表达式 ){
case value1:
// 表达式 等于 value1 时要执行的代码
break;
case value2:
// 表达式 等于 value2 时要执行的代码
break;
default:
// 表达式 不等于任何一个 value 时要执行的代码
}
var fruit = prompt('请您输入查询的水果:');
switch (fruit) {
case '苹果':
alert('苹果的价格是 3.5/斤');
break;
case '榴莲':
alert('榴莲的价格是 35/斤');
break;
default:
alert('没有此水果');
}
4、循环
for( 初始化变量; 条件表达式; 操作表达式 ){
//循环体语句
}
var num = prompt('请输入次数:')；
for ( var i = 1 ; i <= num; i++) {
console.log('笨蛋~');
}
一个人1到100岁：
for (var i = 1; i <= 100; i++) {
if (i == 1) {
console.log('这个人今年1岁了， 它出生了');
} else if (i == 100) {
console.log('这个人今年100岁了，它死了');
} else {
console.log('这个人今年' + i + '岁了');
}
}
1累加到100
var sum = 0;
for(var i = 1;i <= 100; i++){
sumNum += i;
}
console.log('1-100之间整数的和 = ' + sum);
循环嵌套是指在一个循环语句中再定义一个循环语句的语法结构，例如在for循环语句中，可以再嵌套一个for 循环，这样的 for 循环语句我们称之为双重for循环。
for (外循环的初始; 外循环的条件; 外循环的操作表达式) {
for (内循环的初始; 内循环的条件; 内循环的操作表达式) {
需执行的代码;
}
}
外层循环执行一次，内层循环要执行全部次数
var star = '';
for (var j = 1; j <= 3; j++) {
for (var i = 1; i <= 3; i++) {
star += '☆'
}
// 每次满 3个星星 就 加一次换行
star += '\n'
}
console.log(star);
var row = prompt('请输入您打印几行星星:');
var col = prompt('请输入您打印几列星星:');
var str = '';
for (var i = 1; i <= row; i++) {
for (j = 1; j <= col; j++) {
str += '☆';
}
str += '\n';
}
console.log(str);
var str = ''
for (var i = 1; i <= 9; i++) { // 外层for控制 行数 9行
for (var j = 1; j <= i; j++) { // j 控制列数 列数和行数是一样的 j <= i
str += j + " × " + i + " = " + i * j + '\t';
}
str += '\n';
}
console.log(str);
while (条件表达式) {
// 循环体代码
}
使用 while 循环时一定要注意，它必须要有退出条件，否则会成为死循环
while 循环和 for 循环的不同之处在于 while 循环可以做较为复杂的条件判断，比如判断用户名和密码
do {
// 循环体代码 - 条件表达式为 true 时重复执行循环体代码
} while(条件表达式);
先执行一次循环体代码
再执行条件表达式，如果结果为 true，则继续执行循环体代码，如果为 false，则退出循环，继续执行后面代码
do {
var love = prompt('你是谁？');
} while (love != '我是你')
alert('登录成功');
continue 关键字用于立即跳出本次循环，继续下一次循环
break 关键字用于立即跳出整个循环（循环结束）
5、数组
// 普通变量一次只能存储一个值
var num = 10;
// 数组一次可以存储多个值
var arr = [1,2,3,4,5];
创建数组
var arr = new Array(); // 创建一个新的空数组
var 数组名 = ['小白','小黑','大黄','瑞奇'];
数组的索引
// 定义数组
var arrStus = [1,2,3];
// 获取数组中的第2个元素
alert(arrStus[1]);
遍历数组
var arr = ['red','green', 'blue'];
for(var i = 0; i < arr.length; i++){
console.log(arrStus[i]);
}
使用“数组名.length”可以访问数组元素的数量（数组长度）。
var arrStus = [1,2,3];
alert(arrStus.length); // 3
var arr = [2, 6, 1, 7, 4];
var sum = 0;
var average = 0;
for (var i = 0; i < arr.length; i++) {
sum += arr[i];
}
average = sum / arr.length;
console.log('这组数的和是：' + sum);
console.log('这组数的平均值是：' + average);
var arrNum = [2,6,1,77,52,25,7];
var maxNum = arrNum[0]; // 用来保存最大元素,默认最大值是数组中的第一个元素
// 从0 开始循环数组里的每个元素
for(var i = 0;i< arrNum.length; i++){
// 如果数组里当前循环的元素大于 maxNum，则保存这个元素和下标
if(arrNum[i] > maxNum){
maxNum = arrNum[i]; // 保存数值到变量 maxNum
}
}
数组转换为字符串
var arr = ['red', 'green', 'blue', 'pink'];
var str = '';
for (var i = 0; i < arr.length; i++) {
str += arr[i];
}
console.log(str);
新建一个数组，里面存放10个整数（ 1~10）， 要求使用循环追加的方式输出： [1,2,3,4,5,6,7,8,9,10]
var arr = [];
for (var i = 0; i < 10; i++) {
arr[i] = i + 1;
}
console.log(arr);
将数组 [2, 0, 6, 1, 77, 0, 52, 0, 25, 7] 中大于等于 10 的元素选出来，放入新数组。
var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
var newArr = [];
// 定义一个变量 用来计算 新数组的索引号
var j = 0;
for (var i = 0; i < arr.length; i++) {
if (arr[i] >= 10) {
// 给新数组
newArr[j] = arr[i];
// 索引号 不断自加
j++;
}
}
console.log(newArr);
或者
var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
var newArr = [];
for (var i = 0; i < arr.length; i++) {
if (arr[i] >= 10) {
// 给新数组
newArr[newArr.length] = arr[i];
}
}
console.log(newArr);
将数组[2, 0, 6, 1, 77, 0, 52, 0, 25, 7]中的 0 去掉后，形成一个不包含 0 的新数组。
var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
var newArr = []; // 空数组的默认的长度为 0
// 定义一个变量 i 用来计算新数组的索引号
for (var i = 0; i < arr.length; i++) {
// 找出大于 10 的数
if (arr[i] != 0) {
// 给新数组
// 每次存入一个值，newArr长度都会 +1
newArr[newArr.length] = arr[i];
}
}
console.log(newArr);
冒泡排序
是一种算法，把一系列的数据按照一定的顺序进行排列显示(从小到大或从大到小）。
将数组 [5, 4, 3, 2, 1]中的元素按照从小到大的顺序排序，输出： 1，2，3，4，5
var arr = [5, 4, 3, 2, 1];
for (var i = 0; i < arr.length - 1; i++) {
for (var j = 0; j < arr.length - i - 1; j++) {
if (arr[j] > arr[j + 1]) {
var temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp;
}
}
}
console.log(arr);
6、函数
函数在使用时分为两步：声明函数和调用函数。
// 声明函数
function 函数名() {
//函数体代码
}
function 是声明函数的关键字,必须小写
由于函数一般是为了实现某个功能才定义的， 所以通常我们将函数名命名为动词，比如 getSum
// 调用函数
函数名(); // 通过调用函数名来执行函数体代码
/*
计算1-100之间值的函数
*/
// 声明函数
function getSum(){
var sumNum = 0;// 准备一个变量，保存数字和
for (var i = 1; i <= 100; i++) {
sumNum += i;// 把每个数值 都累加 到变量中
}
alert(sumNum);
}
// 调用函数
getSum();
return 语句的语法格式如下：
function 函数名（）{
...
return 需要返回的值；
}
// 调用函数
函数名(); // 此时调用函数就可以得到函数体内return 后面的值
在使用 return 语句时，函数会停止执行，并返回指定的值
如果函数没有 return ，返回的值是 undefined
function getMax(num1, num2) {
return num1 > num2 ? num1 : num2;
}
console.log(getMax(1, 2));
console.log(getMax(11, 2));
用函数求任意一个数组中的最大值
//定义一个获取数组中最大数的函数
function getMaxFromArr(numArray){
var maxNum = 0;
for(var i =0;i < numArray.length;i++){
if(numArray[i] > maxNum){
maxNum = numArray[i];
}
}
return maxNum;
}
var arrNum = [5,2,99,101,67,77];
var maxN = getMaxFromArr(arrNum); // 这个实参是个数组
alert('最大值为：'+ maxN);
return 语句之后的代码不被执行。
return 只能返回一个值。如果用逗号隔开多个值，以最后一个为准。
创建一个函数，实现两个数之间的加减乘除运算，并将结果返回
var a = parseFloat(prompt('请输入第一个数'));
var b = parseFloat(prompt('请输入第二个数'));
function count(a, b) {
var arr = [a + b, a - b, a * b, a / b];
return arr;
}
var result = count(a, b);
console.log(result);
函数都是有返回值的
如果有return 则返回 return 后面的值
如果没有return 则返回 undefined
利用函数封装方式，翻转任意一个数组
function reverse(arr) {
var newArr = [];
for (var i = arr.length - 1; i >= 0; i--) {
newArr[newArr.length] = arr[i];
}
return newArr;
}
var arr1 = reverse([1, 3, 4, 6, 9]);
console.log(arr1);
利用函数封装方式，对数组排序 -- 冒泡排序
function sort(arr) {
for (var i = 0; i < arr.length - 1; i++) {
for (var j = 0; j < arr.length - i - 1; j++) {
if (arr[j] > arr[j + 1]) {
var temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp;
}
}
}
return arr;
}
输入一个年份，判断是否是闰年（闰年：能被4整除并且不能被100整数，或者能被400整除）
function isRun(year) {
var flag = false;
if (year % 4 === 0 && year % 100 !== 0 || year % 400 === 0) {
flag = true;
}
return flag;
}
console.log(isRun(2010));
console.log(isRun(2012));
7、对象
万物皆对象，对象是一个具体的事物，看得见摸得着的实物。例如，一本书、一辆汽车、一个人可以是“对象”，一个数据库、一张网页、一个与远程服务器的连接也可以是“对象”。
对象是由属性和方法组成的。
属性：事物的特征，在对象中用属性来表示（常用名词）
方法：事物的行为，在对象中用方法来表示（常用动词）
现阶段我们可以采用三种方式创建对象（object）：
利用字面量创建对象
利用 new Object 创建对象
利用构造函数创建对象
对象字面量：
就是花括号 { } 里面包含了表达这个具体事物（对象）的属性和方法。
{ } 里面采取键值对的形式表示
键：相当于属性名
值：相当于属性值，可以是任意类型的值（数字类型、字符串类型、布尔类型，函数类型等）
var star = {
name : 'pink',
age : 18,
sex : '男',
sayHi : function(){
alert('大家好啊~');
}
};
调用
对象里面的属性调用 : 对象.属性名 ，这个小点 . 就理解为“ 的 ”
对象里面属性的另一种调用方式 : 对象[‘属性名’]，注意方括号里面的属性必须加引号，我们后面会用
对象里面的方法调用：对象.方法名() ，注意这个方法名字后面一定加括号
console.log(star.name) // 调用名字属性
console.log(star['name']) // 调用名字属性
star.sayHi(); // 调用 sayHi 方法,注意，一定不要忘记带后面的括号
利用new Object创建对象
跟我们前面学的 new Array() 原理一致
var andy = new Obect();
andy.name = 'pink';
andy.age = 18;
andy.sex = '男';
andy.sayHi = function(){
alert('大家好啊~');
}
Object() ：第一个字母大写
new Object() ：需要 new 关键字
使用的格式：对象.属性 = 值;
利用构造函数创建对象
是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值，它总与 new 运算符一起使用。我们可以把对象中一些公共的属性和方法抽取出来，然后封装到这个函数里面。
构造函数用于创建某一类对象，其**首字母要大写**
构造函数要和 **new 一起使用**才有意义 构造函数中不需要 return 返回结果
function Person(name, age, sex) {
this.name = name;
this.age = age;
this.sex = sex;
this.sayHi = function() {
alert('我的名字叫：' + this.name + '，年龄：' + this.age + '，性别：' + this.sex);
}
}
var bigbai = new Person('大白', 100, '男');
var smallbai = new Person('小白', 21, '男');
console.log(bigbai.name);
console.log(smallbai.name);
new 在执行时会做四件事情：
1、 在内存中创建一个新的空对象。
2、让 this 指向这个新的对象。
3、执行构造函数里面的代码，给这个新对象添加属性和方法。
4、 返回这个新对象（所以构造函数里面不需要return）。
**遍历对象属性**
for...in 语句用于对数组或者对象的属性进行循环操作。
for (变量 in 对象名字) {
// 在此执行代码
}
for (var k in obj) {
console.log(k); // 这里的 k 是属性名
console.log(obj[k]); // 这里的 obj[k] 是属性值
}
8、内置对象
Math 对象不是构造函数，它具有数学常数和函数的属性和方法。跟数学相关的运算（求绝对值，取整、最大值等）可以使用 Math 中的成员。
Math.PI // 圆周率
Math.floor() // 向下取整
Math.ceil() // 向上取整
Math.round() // 四舍五入版 就近取整 注意 -3.5 结果是 -3
Math.abs() // 绝对值
Math.max()/Math.min() // 求最大和最小值
random() 方法可以随机返回一个小数，其取值范围是 [0，1)，左闭右开 0 <= x < 1
得到一个两数之间的随机整数，包括两个数在内
function getRandom(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
日期对象
获取当前时间必须实例化
var now = new Date();
console.log(now);
Date() 构造函数的参数
如果括号里面有时间，就返回参数里面的时间。例如日期格式字符串为‘2019-5-1’，可以写成new Date('2019-5-1') 或者 new Date('2019/5/1')
如果Date()不写参数，就返回当前时间
如果Date()里面写参数，就返回括号里面输入的时间
9、数组对象
instanceof 运算符，可以判断一个对象是否属于某种类型
Array.isArray()用于判断一个对象是否为数组，isArray() 是 HTML5 中提供的方法
var arr = [1, 23];
var obj = {};
console.log(arr instanceof Array); // true
console.log(obj instanceof Array); // false
console.log(Array.isArray(arr)); // true
console.log(Array.isArray(obj)); // false
添加删除数组元素的方法
有一个包含工资的数组[1500, 1200, 2000, 2100, 1800]，要求把数组中工资超过2000的删除，剩余的放到新数组里面
var arr = [1500, 1200, 2000, 2100, 1800];
var newArr = [];
for (var i = 0; i < arr.length; i++) {
if (arr[i] < 2000) {
newArr.push(arr[i]);
}
}
console.log(newArr);
数组排序
var arr = [1, 64, 9, 6];
arr.sort(function(a, b) {
return b - a; // 降a序
// return a - b; // 升序
});
console.log(arr);
数组索引方法
数组转换为字符串
查询
根据字符返回位置
字符串操作方法（重点）
replace() 方法用于在字符串中用一些字符替换另一些字符。
replace(被替换的字符串， 要替换为的字符串)；
split()方法用于切分字符串，它可以将字符串切分为数组。在切分完毕之后，返回的是一个新数组。
var str = 'a,b,c,d';
console.log(str.split(',')); // 返回的是一个数组 [a, b, c, d]
toUpperCase() //转换大写
toLowerCase() //转换小写
4、JavaScript之Web API
1、了解
DOM树是什么
将 HTML 文档以树状结构直观的表现出来，我们称之为文档树或 DOM 树
DOM的核心思想
把网页内容当做对象来处理
document 对象
是 DOM 里提供的一个对象
所以它提供的属性和方法都是用来访问和操作网页内容的
例：document.write()
网页所有内容都在document里面
查找元素DOM元素就是选择页面中标签元素
2、获取DOM对象
document.getElementById('id');
document.getElementsByTagName('标签名');
使用 getElementsByTagName() 方法可以返回带有指定标签名的对象的集合。
操作里面的元素就需要遍历
element.getElementsByTagName('标签名');
父元素必须是单个对象(必须指明是哪一个元素对象). 获取的时候不包括父元素自己。
h5新增：
document.getElementsByClassName(‘类名’)；// 根据类名返回元素对象集合
document.querySelector('选择器'); // 根据指定选择器返回第一个元素对象
document.querySelectorAll('选择器'); // 根据指定选择器返回
querySelector 和 querySelectorAll里面的选择器需要加符号,比如:document.querySelector('#nav');
有长度有索引号的数组
但是没有 pop() push() 等数组方法
想要得到里面的每一个对象，则需要遍历（for）的方式获得。
获取特殊元素
doucumnet.body // 返回body元素对象
document.documentElement // 返回html元素对象
执行事件的步骤
1.获取事件源
2.注册事件（绑定事件）
3.添加事件处理程序（采取函数赋值形式）
页面中有一个按钮，当鼠标点击按钮的时候，弹出“你好”警示框。
var btn = document.getElementById('btn');
btn.onclick = function() {
alert('你好吗');
};
改变元素内容
element.innerText
从起始位置到终止位置的内容, 但它去除 html 标签， 同时空格和换行也会去掉
element.innerHTML
起始位置到终止位置的全部内容，包括 html 标签，同时保留空格和换行
当鼠标点击二维码关闭按钮的时候，则关闭整个二维码。
var btn = document.querySelector('.close-btn');
var box = document.querySelector('.box');
// 2.注册事件 程序处理
btn.onclick = function() {
box.style.display = 'none';
可以利用 for 循环设置一组元素的精灵图背景
var lis = document.querySelectorAll('li');
for (var i = 0; i < lis.length; i++) {
// 让索引号 乘以 44 就是每个li 的背景y坐标 index就是我们的y坐标
var index = i * 44;
lis[i].style.backgroundPosition = '0 -' + index + 'px';
}
本文标签： 知识点基础htmlcssJavaScript
版权声明：本文标题：【前端】Html+Css+JavaScript基础知识点 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/dongtai/1727706844a1126441.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论