对于 html 的学习,感谢MDNW3school提供的优秀资料随着深入学习,此篇文章持续更新…

一些踩过的坑:

  1. html是有嵌套关系的,原则上行内元素不能写块元素
  2. 使用新的标签最大的好处就是语义明显,利于阅读

移动端设置

设置 viewport
viewport 是 html 的父元素
在手机上需要用下面的语句设置它的尺寸

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

<script>
// document.documentElement.style.fontSize 一般不会小于12px
//设置rem
document.documentElement.style.fontSize
= document.documentElement.clientWidth / 7.5(iPhone6相对宽度) + 'px';
//通过设计图宽度 / 100 来得出相对宽度 rem
//比如iphone5 设计图宽度640 相对宽度 6.4
</script>


<script>
// 还有一种方法是通过动态设置initial-scale 来达到响应式设置
let dpr = window.devicePixelRatio
let meta = document.createElement('meta')
let initialScale = 1 / dpr
let maximumScale = 1 / dpr
let minimumScale = 1 / dpr
meta.setAttribute('name', 'viewport')
meta.setAttribute('content', `width=device-width, user-scalable=no, initial-scale=${initialScale}, maximum-scale=${maximumScale}, minimum-scale=${minimumScale}`)
document.head.appendChild(meta)
// 这样设置以后可以直接根据设计稿的尺寸写CSS样式 也可以解决1px问题
</script>
属性 说明
width=device-width 宽度等于设备宽度
height=device-height 高度等于设备宽度
initial-scale 初始缩放比例
minimum-scale 允许用户缩放的最小比例
maximum-scale 允许用户缩放的最大比例
user-scalable 是否允许用户缩放

icon 设置

直接在index.html同文件夹放置favicon.ico图片或者:

1
<link rel="icon" href="img" type="image/x-icon" />

视频音频标签

带控制器的视频标签, 不同浏览器有不同的文件格式要求
所以用 2 个 source 标签指定不同的视频格式

1
2
3
4
<video width="300" height="200" controls="controls">
<source src="movie.mp4">
<source src="movie.ogv">
</video>

带控制器的音频标签, 不同浏览器有不同的文件格式要求
所以用 2 个 source 标签指定不同的音频格式

1
2
3
4
<audio id='id-audio-player' controls="controls">
<source src="audio.ogg">
<source src="audio.mp3">
</audio >

audio 基本操作如下

1
2
3
4
5
6
7
8
9
var a = document.querySelector('#id-audio-player')
a.play() //播放
a.pause() //暂停
a.autoplay //自动播放 (设为true)
a.src //链接音频文件
a.volume //音量(0-1之间的数)
a.duration //音频时间长度
a.currentTime = 1 //现在播放第几s(设置)
a.playbackRate // 播放速率, 默认是 1