h5开发项目小技巧

23H5/CSS新增属性以及音视频

  1. HTML5

    新增(修改,删除)语义化标签

header
footer
main
section
article 文章区域
aside 与内容无关的部分
nav 导航
figure 配图区域
figcaption 配图说明

mark
time
progress
..

关于表单元素的新改革

【表单元素】
input:text/password/radio/checkbox/file/hidden/button/submit/reset…
select
textarea
button
form
label….

[新增表单元素]
input: search/email/tel/number/range/color/date/time/url…

  1. 功能强大了,很多东西不用做js了 比如日历
  2. 在移动端根据设置的类型不一样,用户输入过程中调取出来的虚拟键盘也不一样,
    例如Number调取出来的是数字键盘
  3. 新增加的类型提供了css和js验证,可以验证用户输入的内容是否符合格式(之前我们都是用正则自己解决)
    H5中个表单元素设置了一个新的属性,placeholder,做文本框的默认提示

音视频audio、video
audio常用属性:
单位都是秒s
duration:播放总时间
currentTime : 当前已经播放的时间
ended: 是否播放结束
parse: 当前是否为暂停状态
volume:控制音量

【方法】
pause()
play()

【事件】
canplay: 可以正常播放,播放过程中可能出现卡顿
loadedmetadata: 资源的基础信息已经加载完毕
parse:暂停
play: 播放
playing: 播放中

本地存储:localStorage/sessionStorage

  1. css3
    background-attachment
    background-size:
    ​ 100px 100px
    ​ 100% 100%
    ​ cover
    ​ contain

background-clip
​ border-box
​ padding-box
​ content-box

background-origin: 设置背景图的起始点
​ border-box
​ padding-box
​ content-box

filter:

css3动画和变形

transform:
​ translate
​ scale
​ rotate
​ skew
​ matrix 矩阵
transform-style: preserve-3d 实现3d变形
transform-origin

过渡动画
transition:
​ + transition-property:all/width…哪些属性执行动画效果
​ + transition-duration
​ + transition-delay
​ + transition-timing-function:
​ - linear
​ - ease
​ - ease-in
​ - ease-out
​ - ease-in-out
​ - cubic-bezier(0.1, 0.7, 1.0, 0.1)
​ - step-start
​ - step-end
​ - steps(4, end)

帧动画
animation
​ + animation-name 运动轨迹的名称
​ + animation-duration
​ + animation-timing-function 默认为ease
​ + animation-delay
​ + animation-iteration-count 默认为1,可设置为infinite
​ + animation-fill-mode 这个 CSS 属性用来指定在动画执行之前和之后如何给动画的目标应用样式
​ - : none
​ - : forwards 运动完成后,默认停在第一帧,设置这个值后会停留在最后一帧
​ - : backwards 运动有延迟时,在延迟时间内,让动画一直保持在第一针的位置
​ - : both 同时具备forwards和backwards的效果

@keyframes [运动轨迹的名称] {
from {
//开始的样式
}
to {
//结束的样式
}
}

perspective: 视距 实现3D动画必用
@media:媒体查询
@font-face:导入字体图标


做移动端H5开发:
1. 加meta标签<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

2. rem和px一样都市样式单位,px是固定单位,rem是相对单位(相对于当前页面根元素html的字体设置的元素)

真实项目中设计师会给我们一套设计稿,常用的尺寸:6401136|7501334

利用hash值,方便开发小技巧如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
let loadingRender = (function(){
//在这里逻辑结束的位置,调下一个init
phoneRender.init();
return {
init: function() {
//在这里让自己盒子的样式显示出来
$loadingBox.css('display', 'block');
...
}
}
})()
let phoneRender = (function(
//在这里逻辑结束的位置,调下一个init
messageRender.init()

return {

init: function() {
//在这里让自己盒子的样式显示出来
$phoneBox.css('display', 'block');
...
}
}
){})()
let messageRender = (function(){
return {
init: function() {
//在这里让自己盒子的样式显示出来
$phoneBox.css('display', 'block');
...
}
}
})()

//获取当前的hash值,这里hash是我们自己开发的时候手动加上去的
let url = window.location.href,
well = url.indexOf('#'),
hash = well === -1 ? null : url.substr(well + 1);

switch (hash) {
case 'loading':
loadingRender.init();
break;
case 'phone':
phoneRender.init();
break;
case 'message':
messageRender.init();
break;
default:
loadingRender.init();
break;
}