h5
Posted 进击的小猿
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了h5相关的知识，希望对你有一定的参考价值。
文章目录
h5_1
1、h5兼容IE
2、表单新增type，属性，元素
3、progress、meter、video、audio
4、querySelector、dataset、classList增删改查
5、全屏、退出全屏、是否全屏、网络联接、网络断开
6、FileReader使用
7、拖拽drag
8、百度地图
9、sessionStorage、localStorage
10、应用缓存
11、简易视频播放
h5_2
1、兄弟选择器
拥有style属性的li标签
li[style]
拥有class属性并且值为Red的li标签
li[class=red]
拥有指定的attr属性并且属性值中包含(可以在任意位置)value的E标签
li[class*=red]
拥有指定的attr属性并且属性值以value开头的E标签
li[class^=blue]
拥有指定的attr属性并且属性值以value开结束的E标签
li[class$=blue]
2、兄弟选择器
添加了.first样式的标签的相邻的li元素
.first+li
添加了.first样式的元素的所有兄弟li元素
.first~li
3、伪类选择器
li的父元素中的第一个li元素
li:first-child
E:last-child:查找E元素的父元素中最后一个指定类型的子元素
li:last-child
也是相对于父元素
li:first-of-type
li:last-of-type
nth-child(从1开始的索引||关键字||表达式)
li:nth-child(5)
奇偶数
li:nth-of-type(even)
li:nth-of-type(odd)
n:默认取值范围为0~子元素的长度.但是当n<=0时，选取无效
li:nth-last-of-type(-n+5)
li:nth-of-type(-n+5)
4、伪类target
E:target:可以为锚点目标元素添加样式，当目标元素被触发为当前锚链接的目标时，调用此伪类样式
5、伪元素
after
before
6、其他伪元素
实现首字下沉
p::first-letter
获取第一行内容
p::first-line
p::selection
设置当前选中内容的样式
7、opacity、hsla、text-shadow、盒模型box-sizing：border-box、box-shadow、安卓机器人案例
h5_3
1、线性渐变
linear-gradient(方向，开始颜色 位置，颜色2 位置，颜色3 位置...);
2、径向渐变
radial-gradient(形状 大小 坐标,颜色1，颜色2...)
3、重复渐变
radial-gradient
repeating-radial-gradient
repeating-linear-gradient
4、背景图片
background-image、background-repeat、background-size、
background-attachment
/*1.添加背景颜色*/
/*background-color: skyblue;*/
/*2.添加背影图片
如果图片大于容器，那么默认就从容器左上角开始放置
如果图片小于容器，那么图片默认会平铺*/
/* background-image: url("../images/bg-img.jpg"); */
background-image: url("../images/share1.png");
/*3.设置背景平铺
round:会将图片进行缩放之后再平铺
space:图片不会缩放平铺，只是会在图片之间产生相同的间距值*/
background-repeat: round;
/*4.设置在滚动容器的背景的行为：跟随滚动/固定
fixed:背景图片的位置固定不变
scroll:当滚动容器的时候，背景图片也会跟随滚动*/
/*local和scroll的区别：前提是滚动当前容器的内容
local:背景图片会跟随内容一起滚动
scroll:背景图片不会跟随内容一起滚动*/
background-attachment: local;
/*添加背景*/
background-image: url("../images/bg-img.jpg");
/*background-image: url("../images/share1.png");*/
background-repeat: no-repeat;
/*设置背景图片的大小 宽度/高度 宽度/auto(保持比例自动缩放)
建议：在使用这个属性之前衔确定宽高比与容器的宽高比是否一致，否则会造成图片失真变形*/
/* background-size: 300px 500px; */
/* background-size: 300px; */
/*设置百分比，是参照父容器可放置内容区域的百分比*/
background-size: 50% 50%;
/*设置contain:按比例调整图片大小，使用图片宽高自适应整个元素的背景区域，使图片全部包含在容器内
1.图片大于容器：有可能造成容器的空白区域,将图片缩小
2.图片小于容器：有可能造成容器的空白区域，将图片放大*/
background-size: contain;
/*cover:与contain刚好相反，背景图片会按比例缩放自 适应整个背景区域，如果背景区域不足以包含所有背景图片，图片内容会溢出
1.图片大于容器：等比例缩小，会填满整个背景区域，有可能造成图片的某些区域不可见
2.图片小于容器：等比例放大，填满整个背景区域，图片有可能造成某个方向上内容的溢出*/
background-size: cover;
5、精灵图片
background-position、background-origin、background-clip
a
width: 50px;
height: 50px;
display: block;
background-color: #ddd;
margin:100px auto;
box-sizing: border-box;
background-image: url("../images/sprites.png");
/*设置背景偏移，参照background-origin原点，这个原点默认在容器的左上角*/
background-position: -20px 0;
/*添加padding*/
padding:14px;
/*设置背景坐标的原点
border-box:从border的位置开始填充背景，会与border重叠
padding-box:从padding的位置开始填充背景，会与padding重叠
content-box:从内容的位置开始填充背景*/
background-origin: content-box;
/*设置内容的裁切:设置的是裁切，控制的是显示
border-box:其实是显示border及以内的内容
padding-box:其实是显示padding及以内的内容
content-box:其实是显示content及以内的内容*/
background-clip: content-box;
6、边框图片
border-image-source、 border-image-slice、 border-image-width
div
width: 200px;
height: 200px;
margin:100px auto;
box-sizing: border-box;
border: 27px solid red;
/*padding: 27px;*/
/*添加边框图片*/
/*border-image-source:可以指定边框图片的路径,默认只是填充到容器的四个角点*/
border-image-source: url("../images/border1.png");
/*让它成为九宫格：border-image-slice:设置四个方向上的裁切距离.fill:做内容的内部填充
问题：如果分别设置1，2，3，4个值代表什么意思*/
border-image-slice: 27 ;
/* border-image-slice: 27 fill; */
/*border-image-width:边框图片的宽度。如果没有设置这个属性，那么宽度默认就是元素的原始的边框宽度。
细节：1.边框图片的本质是背景，并不会影响元素内容的放置 2.内容只会被容器的border和padding影响
建议：一般将值设置为原始的边框的宽度*/
border-image-width: 27px;
/*border-image-outset:扩展边框*/
/*border-image-outset: 0px;*/
/*border-image-repeat:
repeat:直接重复平铺
round:将内容缩放进行完整的重复平铺*/
border-image-repeat: round;
/*缩写：*/
/*border-image: source slice / width/outset repeat;*/
/* border-image: url("../images/border1.png") 27 / 27px /0px round; */
7、9patch图片
div
width: 500px;
height: auto;
border: 10px solid red;
margin:100px auto;
/*添加边框图片*/
border-image-source: url("../images/btn_bg.png");
/*设置受保护的区域大小*/
border-image-slice: 10 fill;
/*设置边框图片的宽度
1.明确圆角的大小
2.明确受保护的区域的大小*/
border-image-width: 10px;
/*设置背景平铺效果 默认是stretch：拉伸*/
border-image-repeat: stretch;
</style>
</head>
<body>
<div>边框图片的本质是背景，并不会影响元素内容的放置边框图片的本质是背景，并不会影响元素内容的放置边框图片的本质是背景，并不会影响元素内容的放置边框图片的本质是背景，并不会影响元素内容的放置边框图片的本质是背景，并不会影响元素内容的放置边框图片的本质是背景，并不会影响元素内容的放置边框图片的本质是背景，并不会影响元素内容的放置边框图片的本质是背景，并不会影响元素内容的放置边框图片的本质是背景，并不会影响元素内容的放置边框图片的本质是背景，并不会影响元素内容的放置</div>
</body>
8、过渡
/*添加过渡效果:过渡效果执行完毕之后，默认会还原到原始状态*/
/*1.transition-property:添加过渡效果的样式属性名称*/
/* transition-property: left;
/*2.transition-duration:过渡效果的耗时 以秒做为单位*/
/* transition-duration: 2s; */
/*3.transition-timing-function:设置时间函数--控制运动的速度*/
/* transition-timing-function: linear; */
/*4.transition-delay:过渡效果的延迟*/
/* transition-delay: 2s; */
/*简写：transition:属性名称 过渡时间 时间函数 延迟*/
/*transition: left 2s linear 0s;*/
/*为多个样式同时添加过渡效果*/
/*transition: left 2s linear 0s,background-color 5s linear 0s;*/
/*为所有样式添加过渡效果 all:所有样式
1.所有样式的过渡效果一样
2.效率低下，它会去查询所有添加的样式
3.建议：以后不要这么写
4.steps(4):可以让过渡效果分为指定的几次来完成*/
/* transition:all 2s steps(4);
-moz-transition: all 2s steps(4);
-webkit-transition: all 2s steps(4);
-o-transition: all 2s steps(4); */
9、手风琴案例
<style>
*
padding: 0;
margin: 0;
.menu
width: 200px;
height:auto;
margin:100px auto;
.item
width: 100%;
height:auto;
.item > h3
height: 40px;
line-height: 40px;
background-color: #7dffe7;
color: orange;
border-bottom: 2px solid #ccc;
padding-left:10px;
.item > .itemBox
width: 100%;
height:0px;
overflow: hidden;
/* display: none; */
/*添加过渡效果:过渡效果只能产生从某个值到另外一个具体的值的过渡!!!!!!!!*/
/*1.一定要设置为哪些css样式添加过渡效果*/
/* transition-property: display; */
transition-property: height;
/*2.一定要设置过渡效果的耗时*/
transition-duration: 1s;
.item > .itemBox > ul
list-style: none;
background-color: #eaffb6;
padding:10px;
/*为item添加hover伪类*/
.item:hover > .itemBox
/* display: block; */
height: 110px;
</style>
<div class="menu">
<div class="item">
<h3>市内新闻</h3>
<div class="itemBox">
<ul>
<li>深圳超市肉菜档遭抢</li>
<li>深圳超市肉菜档遭抢</li>
<li>深圳超市肉菜档遭抢</li>
<li>深圳超市肉菜档遭抢</li>
</ul>
</div>
</div>
<div class="item">
<h3>省内新闻</h3>
<div class="itemBox">
<ul>
<li>深圳超市肉菜档遭抢</li>
<li>深圳超市肉菜档遭抢</li>
<li>深圳超市肉菜档遭抢</li>
<li>深圳超市肉菜档遭抢</li>
</ul>
</div>
</div>
</body>
10、transform二维变换
移动、缩放、旋转、斜切
<style>
*
padding: 0;
margin: 0;
div
width: 100px;
height: 100px;
background-color: red;
margin-left: 200px;
margin-top:10px;
/*添加过渡效果 css样式名称 耗时*/
transition: transform 2s;
/*移动translate*/
div:first-of-type:active
/*使用transform实现元素的移动 a.移动是参照元素的左上角 b.执行完毕之后会恢复到原始状态
1.如果只有一个参数就代表x方向
2.如果有两个参数就代表x/y方向*/
/* transform: translate(100px); */
/* transform: translate(400px,500px); */
transform: translate(0px,500px);
/*添加水平或者垂直方向的移动*/
transform:translateX(300px);
/* transform:translateY(300px); */
/*缩放：scale*/
div:nth-of-type(2):active
/*实现缩放 1指不缩放，>1.01放大 <0.99缩小 参照元素的几何中心
1.如果只有一个参数，就代表x和y方向都进行相等比例的缩放
2.如果有两个参数，就代表x/y方向*/
/*transform: scale(2);*/
/*transform: scale(2,1);*/
/*缩放指定的方向 */
/*transform:scaleX(0.5);*/
transform:scaleY(0.5);
/*旋转：rotate*/
div:nth-of-type(3)
/*设置旋转轴心
1.x y
2.关键字：left top right bottom center*/
background-color: purple;
transform-origin: left top;
div:nth-of-type(3):active
/*transform:rotate(-90deg);
transform: translateX(700px);*/
/*同时添加多个transform属性值 先移动后*/
transform: translateX(700px) rotate(-90deg);
/*transform: rotate(-90deg) translateX(700px);*/
/*斜切：skew*/
div:nth-of-type(4):active
background-color: blue;
/*如果角度为正，则往当前轴的负方向斜切，如果角度为，则往当前轴的正方向斜切*/
transform:skew(-30deg);
/*transform:skew(30deg,-30deg);*/
/*设置某个方向的斜切值*/
transform:skewX(30deg);
transform:skewY(30deg);
</style>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</body>
11、选择扑克牌
12、360碎片整合
13、任意元素居中
<style>
*
padding: 0;
margin: 0;
.box
width: 400px;
height: 400px;
border-radius: 200px;
background-color: #ccc;
margin:100px auto;
position: relative;
.rec
width: 200px;
height: 200px;
background-color: red;
position: absolute;
/*定位的百分比是参照父容器的宽高*/
left: 50%;
top: 50%;
/*使用transform实现元素的居中 百分比是参照元素本身的宽高*/
transform: translate(-50%,-50%);
/*transform: translate(-50px,-50px);*/
</style>
</head>
<body>
<div class="box">
<div class="rec"></div>
</div>
</body>
14、三维变换
<style>
*
padding: 0;
margin: 0;
div
width: 100px;
height: 100px;
background-color: red;
margin-left: 200px;
margin-top:10px;
/*添加过渡*/
transition: transform 2s;
/*添加三维移动--3D移动*/
div:first-of-type:active
/*translate3d(X方向的偏移，Y方向的偏移，Z方向的偏移)*/
/*transform: translate3d(400px,0,0);*/
transform: translate3d(400px,400px,0);
/* transform: translate3d(0px,0px,400px); */
/*添加三维缩放*/
div:nth-of-type(2):active
/*scale3d(x方向上的缩放，y方向的缩放，z方向的缩放)
>1.01 放大 <0.99 缩小*/
transform:scale3d(2,0.5,10);
/* transform:scale3d(1,1,10); */
/*添加三维旋转*/
div:nth-of-type(3):active
/*rotate3d(x,y,z,angle):
x:代表x轴方向上的一个向量值
y:代表y轴方向上的一个向量值
z:代表z轴方向上的一个向量值*/
transform: rotate3d(1,1,1,330deg);
</style>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</body>
h5_4
1、立方体
2、动画添加
div
width: 100px;
height: 100px;
background-color: red;
/*添加动画效果*/
/*1.animation-name:指定动画名称*/
animation-name: moveTest;
/*2.设置动画的总耗时*/
animation-duration: 2s;
/*3.设置动画的播放次数，默认为1次 可以指定具体的数值，也可以指定infinite(无限次)*/
animation-iteration-count: 1;
/*4.设置交替动画 alternate:来回交替*/
animation-direction: alternate;
/*5.设置动画的延迟*/
animation-delay: 2s;
/*5.设置动画结束时的状态：默认情况下，动画执行完毕之后，会回到原始状态
forwards:会保留动画结束时的状态，在有延迟的情况下，并不会立刻进行到动画的初始状态
backwards:不会保留动画结束时的状态，在添加了动画延迟的前提下，如果动画有初始状态，那么会立刻进行到初始状态
both:会保留动画的结束时状态，在有延迟的情况下也会立刻进入到动画的初始状态*/
animation-fill-mode: both;
/*6.动画的时间函数*/
animation-timing-function: linear;
/*设置动画的播放状态 paused:暂停 running:播放*/
animation-play-state: running;
/*创建动画*/
@keyframes moveTest
/*百分比是指整个动画耗时的百分比 10s*/
/*0%
transform: translate(0,0);
*/
/*from:0%*/
from
transform: translate(0,0) rotate(45deg);
/*0~1*/
50%
transform: translate(0,500px);
/*1~2*/
/*100%
transform: translate(500px,600px);
*/
/*to:100%*/
to
transform: translate(500px,600px);
</style>
</head>
<body>
<div></div>
<input type="button" value="播放" id="play">
<input type="button" value="暂停" id="pause">
<script>
var div=document.querySelector("div");
document.querySelector("#play").onclick=function()
div.style.animationPlayState="running";
document.querySelector("#pause").onclick=function()
div.style.animationPlayState="paused";
</script>
</body>
3、无缝轮播案例
4、钟表案例
5、web字体、字体图标
6、多列布局
.wrapper
width: 100%;
padding: 20px;
box-sizing: border-box;
/*设置多列布局*/
/*1.设置列数*/
column-count: 3;
/*2.添加列间隙样式,与边框样式的添加一样*/
column-rule: dashed 3px red;
/*3。设置列间隙大小*/
column-gap: 50px;
/*4.设置列宽
原则：取大优先
1.如果人为设置宽度更大，则取更大的值，但是会填充整个屏幕，意味最终的宽度可能也会大于设置的宽度--填充满整个屏幕
2.如果人为设置宽度更小，使用默认计算的宽度*/
column-width: 200px;
h4
/*设置跨列显示 1 / all*/
column-span: all;
7、flex布局
display
display: flex;
flex-start
flex-start:让子元素从父容器的起始位置开始排列
flex-end:让子元素从父容器的结束位置开始排列
center:让子元素从父容器的中间位置开始排列
space-between:左右对齐父容器的开始和结束，中间平均分页，产生相同的间距
space-around:将多余的空间平均的分页在每一个子元素的两边 margin:0 auto.造成中间盒子的间距是左右两边盒子间距的两倍*/
flex-wrap、flex-direction-（flex-flow）
/*flex-flow:是flex-wrap和flex-direction的综合
flex-wrap:控制子元素是否换行显示，默认不换行
nowrap:不换行--则收缩
wrap:换行
wrap-reverse:翻转，原来是从上到下，翻转后就是从下到上来排列*/
/*flex-direction：设置子元素的排列方向：就是用来主轴方向，默认主轴方向是row(水平方向)
row:水平排列方向，从左到右
row-reverse:水平排列方向，从右到左
column:垂直排列方向，从上到下
column-reverse：垂直排列方向，从下到上*/
flex-grow
flow-grow:可以来扩展子元素的宽度：设置当前元素应该占据剩余空间的比例值
比例值计算 ：当前空间的flex-grow/所有兄弟元素的flex-grow的和
flex-grow的默认是0:说明子元素并不会去占据剩余的空间
flex-shrink
flex-shrink:定义收缩比例，通过设置的值来计算收缩空间
比例值计算 ：当前空间的flex-shrink/所有兄弟元素的flex-shrink的和
默认值为1
flex
flex是用来设置当前伸缩子项占据剩余空间的比例值
align-items
align-items:设置子元素(伸缩项)在侧轴方向上的对齐方式
center:设置在侧轴方向上居中对齐
flex-start:设置在侧轴方向上顶对齐
flex:end:设置在侧轴方向上底对齐
stretch:拉伸：让子元素在侧轴方向上进行拉伸，填充满整个侧轴方向>> 默认值
baseline:文本基线*/
8、伸缩菜单项目案例
9、flex网站练习
以上是关于h5的主要内容，如果未能解决你的问题，请参考以下文章