HTML学习

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

一些踩过的坑:

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

移动端设置

设置 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