對于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
