对于html的学习,感谢MDN与W3school提供的优秀资料
随着深入学习,此篇文章持续更新...
一些踩过的坑:
-
html是有嵌套关系的,原则上行内元素不能写块元素 - 使用新的标签最大的好处就是语义明显,利于阅读
移动端设置
设置 viewport
viewport 是 html 的父元素
在手机上需要用下面的语句设置它的尺寸
<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图片或者:
<link rel="icon" href="img" type="image/x-icon" />
视频音频标签
带控制器的视频标签, 不同浏览器有不同的文件格式要求
所以用 2 个 source 标签指定不同的视频格式
<video width="300" height="200" controls="controls">
<source src="movie.mp4">
<source src="movie.ogv">
</video>
带控制器的音频标签, 不同浏览器有不同的文件格式要求
所以用 2 个 source 标签指定不同的音频格式
<audio id='id-audio-player' controls="controls">
<source src="audio.ogg">
<source src="audio.mp3">
</audio >
audio 基本操作如下
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
