HTML5常用特性

语义化标签

原来的标签

代码语言：javascript复制

<div id="wrapper">
    <div id="header"></div>
    <div id="main">
        <div id="sidebar"></div>
        <div id="content"></div>
    </div>
    <div id="footer"></div>
</div>

h5语义化标签

代码语言：javascript复制

<header>头部</header>
<nav>导航</nav>
<article>
    <section>区块</section>
</article>
<aside>侧栏</aside>
<footer>页脚</footer>

audio、video标签

音频、视频标签以及配套的js api都是h5引入的新功能

不同浏览器有不同的文件格式要求，所以用2个source标签指定不同的格式

audio标签

代码语言：javascript复制

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

代码语言：javascript复制

// 音频基本操作如下
var a = document.querySelector('#id-audio-player')
a.play()
a.pause()
a.autoplay
a.src
a.volume
a.duration               // 返回当前音频/视频的长度（以秒计）
a.currentTime = 5        // 设置或返回音频/视频中的当前播放位置（单位为秒）

官方文档

video标签

代码语言：javascript复制

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

localStorage、sessionStorage

localStorage(本地存储)

浏览器自带的功能, 可以用来存储字符串数据, 在浏览器关闭后依然存在, 不同页面拥有各自独立的localStorage

代码语言：javascript复制

// 把数组写入localStorage
var save = function(array) {
    var s = JSON.stringify(array)     // JSON序列化
    localStorage.todos = s
}

// 读取localStorage中的数据并解析返回
var load = function() {
    var s = localStorage.todos        
    return JSON.parse(s)              // JSON反序列化
}

sessionStorage

sessionStorage与localStorage都是用来存储数据的，使用方式一样, 区别只在于过期时间

localStorage没有过期时间, 要用 clear remove 主动删除数据

sessionStorage的数据在用户关闭浏览器后将被删除

新增表单特性

代码语言：javascript复制

<!-- calendar email color -->
<input type='calendar'>

<!-- false -->
<input type="checkbox">
<!-- true -->
<input type="checkbox" checked>

canvas

canvas 标签提供一块画布, 可以访问画布中的像素点,

主要用途是游戏或者是高级复杂的图形效果

例如particles.js、phaser.js等库

移动网页

viewport

开发移动网页时，把下面这个东西复制到我们的head标签中

代码语言：javascript复制

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

属性解释

width=device-width 宽度等于设备宽度
height=device-height 高度等于设备高度
initial-scale 初始缩放比例
minimum-scale 允许用户缩放的最小比例
maximum-scale 允许用户缩放的最大比例
user-scalable 是否允许用户缩放

响应式设计

响应式设计就是一套CSS根据当前的分辨率选择不同的样式

代码语言：javascript复制

/*
 * all 是媒体类型, 代表任何设备
 * and 是逻辑操作
 * 含义: 对于任何设备, 在宽度在 200-300 的范围内应用这个样式
*/
@media all and (min-width: 200px) and (max-width: 300px) {
    body {
        background: red;
    }
}

本文作者： Ifan Tsai (菜菜)

本文链接： https://cloud.tencent.com/developer/article/2164565

网站 javascript 存储 canvas html5

0 人点赞