HTML，CSS
2021-09-03 18:19:09 20 举报AI智能生成
HTML知识总结
作者其他创作
大纲/内容
JavaScript
组成
ECMAScript（核心），BOM（浏览器对象模型），DOM（文档对象）
使用方法
1、在文档中任意位置写script标签，建议写在body中；2、在外部创建js文件，通过script标签里面的src属性链接。
基本数据类型
Number 数值类型
数值，NaN也是数值类型，但是表示非数值
Boolean 布尔类型
值为true和false，值为false的有6种情况，false 0 undefined "" null NaN
String 字符串类型
用引号引起来，在js中部分单双引号
Undefined 未定义类型
1、声明了变量但是未赋值，结果也是undefined；2、另一种是变量的值就是undefined
Null 空类型
空对象或者尚不存在的对象，值也会null
数据类型转换
查看数据类型
typeof
强制转换为字符串
toString()
强制转换为整型
parseInt()
强制转换为浮点型
parseFloat()
判断和循环
条件判断
if条件判断
switch条件判断
循环
for循环
while循环
do-while循环
数组
创建数组
var arr = [];
获取数组元素
数组名[索引值] 索引值是从0开始递增一直到数组的长度减1
获取数组的长度
数组名.length
修改数组元素的值
数组名[索引值] = '新的元素值'
后置追加
数组名.push()
返回的是数组长度
后置删除
数组名.pop()
返回的是被删除的元素
前置追加
数组名.unshift()
返回的是数组的长度
前置删除
数组名.shift()
返回的是删除的元素
数组的删除
delete 数组名[索引值]
delete和pop(),shift()不同的是delete删除的是数组的元素，但是不改变数组的长度，而pop()和shift()删除的是数组里的元素，而且连元素位置也删掉，数组长度也会跟着改变
字符串分割符
join 指定字符串的分割符，默认是以逗号为分割符
数组拼接
concat 数组1名.concat(数组2名)
数组翻转
reverse
截取数组
slice slice(开始的位置，结束的位置+1)
数组排序
sort
指定位置的删除
splice（开始的位置，要删除的元素个数）
指定位置的增加
splice（开始的位置，0，内容，内容，...）
获取元素
获取ID
document.getElementById()
获取类名
document.getElementsByClassName()
获取标签
document.getElementsByTagName()
获取Name值
document.getElementsByName()
事件
键盘事件，鼠标事件，系统事件
鼠标事件
单击事件 onclick
双击事件 ondblclick
移入事件 onmouseover
移出事件 onmouseout
鼠标按下事件 onmousedown
鼠标松开事件 onmouseup
鼠标移动事件 onmousemove
键盘事件
键盘按下事件 window.onkeydown
键盘松开事件 window.onkeyup
标签
设置属性值
标签.setAttribute('属性名','属性值')
获取属性值
标签.getAttribute('属性名')
移除属性值
标签.removeAttribute('属性名')
获取标签内容
标签.innerHTML （获取标签里面的内容和文字）
标签.innerText ）（获取标签利里面的文字）
获取系统时间
var date = new Date() ，获取当前系统时间
date.getFullYear() ，获取到当前系统对应的年份
date.getMonth()+1 ，获取到当前系统对应的月份{因为下标是从0开始的，所以要+1}
date.getDate() ，获取当前系统对应的天数
date.getDay() ，获取到当前系统对应的星期数
date.getHours() ，获取当前系统对应的小时数
date.getMinutes() ，获取到当前系统对应的分钟数
date.getSeconds() ，获取到当前系统对应的秒数
date.getTime() ，获取到当前系统对应的毫秒数
字符串
获取字符串长度 .length
获取对应下标的元素 .charAt(下标)
获取对应下标的ASCII码 .charCodeAt(下标)
获取首次出现该字符的下标 .indexOf('字符')
获取最后一次出现该字符的下标 .lastIndexOf('字符')
替换字符 .replace('旧的字符','新的字符')
定时器
设置定时器
setInterval(函数，间隔的时间)
清除定时器
clearInterval()
延时器
设置延时器
setTimeout(函数,延迟的时间)
清除延时器
clearTimeout()
标签选择器
块级元素
标签
div（盒子模型）、p（段落标签）、ul（无序列表）、ol（有序列表）、li、h1-h6（标题标签）、center（居中标签）、dl（自定义列表）、dt、dd...
块级元素可以设置宽高，默认宽度跟父级一样，排列方式是上下排列
居中
①块级元素左右居中可以使用margin: o auto;②上下对齐有三种方式：第一种设置弹性盒子，在父元素中加上align-items:center；第二种设置定位，top: 50%;margin-top: -自身高度的一半；第三种也是设置定位，top: 50%,transform:translateY(-50%)
标签里面的元素上下居中可以用line-height: 盒子的高度；左右居中可以用text-align:center
行内元素
标签
span、a（超链接）、b（加粗）、u（下划线）、i（斜体）、strong（加粗）...
居中
行内元素不能设置宽高，宽度由内容决定，且是左右排列的。还有一个不同的是行内元素设置上下外边距无效，但是可以设置左右外边距
行内元素的左右居中和上下居中跟块级元素的上下居中一样
标签里面的元素上下居中可以用line-height: 盒子的高度；左右居中可以用text-align:center
选择器
+:标签的下一个同级标签
.lis+li 选中的是类名为lis的元素的下一个li标签
~：标签的后面所有标签
.lis~li 选中的是类名为lis的后面所有的li标签
标签[属性名]:选中的是标签中含有这个属性名的元素
img[alt] 选中的是img标签中含有属性名为alt的标签
标签[属性名="属性值"]:选中的是标签中含有这个属性且属性值一样的元素
img[alt="这是一张图片"] 选中的是img标签中含有alt属性且属性值为这是一张图片的标签
伪类选择器
link
未点击的状态，初始状态
hover
鼠标滑过的状态
visited
鼠标点击的一瞬间状态
active
鼠标点中的瞬间，长按可以持续
定位
static
静态定位
如果元素什么定位方式都不给的话就默认是static，它不会以任何方式定位，始终跟着页面正常流进行定位
relative
相对定位
以自身为参照物，相对自身元素位置进行定位
absolute
绝对定位
以父级元素为参照物，相对父级元素的位置进行定位，父级元素移动它也会跟着移动
fixed
固定定位
以浏览器窗口为参照物，相对浏览器大小定位，但是不随着屏幕滚动而动，会一种固定下浏览器屏幕上
sticky
粘性定位
根据用户滚动的位置进行定位
一开始粘性定位会先变成相对定位，当屏幕滑动到给定的位置之后就会变成固定定位固定在屏幕上
表格
caption
表格的标题
表头 thead
th td ，td是每一个单元格
表体 tbody
tr td
表尾 tfoot
合并单元格边框 border-collapse:collapse;
合并两行 rowspan
合并两列 colspan
表单
单行文本域
<input type="text" />
密码框
<input type="password" />
数字框
<input type="number" />
单选框
<input type="radio" />
注意：单选框中必须要有相同的name属性
复选框
<input type="checkbox" />
下拉框
<select><option></option></select>
邮箱
<input type="email" />
文件上传
<input type="file" />
多行文本域
<textarea cols="" rows=""></textarea>
注意：rows就是文本域中可以输入的内容行数，cols就是列数
文字标签
大小 font-size
颜色 color
粗细 font-weight
字体 font-family
样式 font-style
背景渐变 background-image: linear-gradient(到哪里的方向，开始的颜色，结束的颜色)
文字渐变色：-webkit-backgrounf-clip:text，-webkit-text-fill-color: transparent;
图片
图片
可以设置宽高，且元素占位置
背景图
背景图不能设置宽高，但是不会占位，而且要路径中不能出现中文
音频，视频
<audio></audio>，<video></video>
自动播放 autopplay
出现控制条 controls
静音 muted
无限循环播放 loop
transform
translate
可以写两个参数，参数中间用逗号隔开
第一个参数是左右方向的移动，第二个参数是代表上下方向，正数代表向右和向下，负数代表向左和向上
translateX
只需要写一个参数，代表左右方向的移动，正数代表向右，负数代表向左
translateY
只需要一个参数，代表上下方向的移动，正数代表向下，负数代表向上
rotate
旋转方向，里面写需要旋转的读书，默认是顺时针旋转
scale
放大缩小，大于1是放大，小于1是缩小
自定义动画
@keyframes
animation: 动画名称 动画持续的时间;
infinite 无限播放 linear 匀速播放
媒体查询
@media
@media (max-width: 200px)
移动端 (max-width: 320px)
平板端 (max-width: 960px) and (min-width: 640px)
PC端 (min-widthL 960px)
H5新增标签
头部 header
导航 nav
文章 articele
区域 section
侧边栏 aside
底部 footer
区块 hgroup
媒体标题 figure
figuration
0 条评论
下一页
