HTML5新特性详解-优快云博客

本文链接：https://blog.youkuaiyun.com/Kedaya_7017/article/details/120360963

1.语义标签

<nav>网站导航块
<section>表示页面中的一个内容块
<article>表示页面中的一块与上下文不相关的内容块
<aside>元素表示当前页面或文章的附属信息部分
<header>表示页面中一个标题区域
<footer>底部标签
<hgroup>用于页面中与标题区域组合
<figure>一段独立的流内容
<address>用来在文档中呈现联系信息

2.新添元素

带标题的组合元素<figure><figcaption>
强调标签<mark>
软换行<wbr> 对中文无效，仅当浏览器不够显示内容时生效
进度条<progress min="0" max="100" value="" >
进度条<meter min="0" max="100" value="" low="20" high="60" optimun="0">
属性（度量）：low最低 high最高 optimun最优
细节信息<details>，配合<summary>标题

<details>
这里是内容
<summary>这里是标题</summary>
</details>

3.删除的标签

HTML5以后也不再支持框架了

4.添加的其他属性

在<ol>中添加了reversed属性，指定列表倒序显示

为<style>元素新添属性scoped,使这个style局部有效，不被继承（火狐有效）

为<script>元素添加属性async，使js代码异步传输

注意：async只有使用src引入文件时有效

全局属性（所有标签有效）：

contentEditable是否可以编辑

hidden隐藏元素

spellcheck拼写检查（false/true）

5.自定义属性

在HTML中，允许为HTML元素自定义属性：data-，可以通过JS进行获取或者操作

6.多媒体播放

注意：需要使用流媒体文件格式（如mp4、webm、ogg等）

在HTML5问世之前，要在网络上展示视频，音频，动画，除了使用第三方自主开发的播放器之外，使用得最多的工具就是Flash,但是需要在浏览器上安装各种插件，并且有时速度很慢。HTML5新增了两个与媒体相关的标签，让开发人员不必依赖任何插件就能在网页中嵌入跨浏览器的音频和视频内容，这两个标签是 <audio> <video>

1. 嵌入视/音频：

<video src="" id="" width="640" height="360">视频播放器无法使用</video>

<audio src="" id="">音频播放器无法使用</audio>

标签之间的元素表示后备内容，在浏览器不支持这两个媒体元素的情况下显示。

2. source,指定不同媒体来源

并不是所有的浏览器都支持所有媒体格式，可以指定多个不同的媒体来源。由于不同的浏览器支持不同的编解码器，一般要指定多种格式的媒体来源。

src 指播放媒体的URL地址

type 媒体类型，属性值为播放文件的MIME类型，该属性值中的codes参数表示所使用的媒体的编码格式。

6.1属性

src:播放文件的路径

width,height:播放控件的宽度和高度

controls:默认播放控制条是否显示

autoplay:自动播放

preload:预加载（缓冲）

auto - 当页面加载后载入整个视频

meta - 当页面加载后只载入元数据

none - 当页面加载后不载入视频

poster:视频预览图（视频不用或者不可用时）

loop:循环播放

currentTime:当前播放时间 00:00/30:00

duration:文件总的播放时间

palyed:是否播放中

paused:是否暂停

ended:是否播放完毕

defaultPlaybackRate:设置视频的默认播放速度 1

playbackRate:设置视频的播放速度 1

volume:音量 0-1

muted:静音 ture/false

方法：

play();播放

pause();暂停

7.canvas元素（画图）


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="mc_con">
        <canvas width="500" height="500" 
        style="background-color: rgb(249, 250, 207);"
        id="c1"></canvas>
    </div>
    <script>
        //开启vscode对canvas的提示
        /** @type {HTMLCanvasElement}*/
        //获取canvas元素
        var c1 = document.getElementById('c1');
        // 获取上下文对象
        var mc = c1.getContext('2d');
        //设置样式
        mc.strokeStyle='purple';//设置线条颜色
        mc.lineWidth=3;//设置线条粗细
        // 绘制过程(直线)
        mc.beginPath();//开始绘制
        mc.moveTo(50,50);//起始点
        mc.lineTo(150,150);//经过点
        mc.lineTo(50,150);
        mc.closePath();//结束绘制(闭合)
        mc.stroke();//绘制
        //实心样式设置
        mc.fillStyle='palegreen';
        //绘制矩形
        mc.beginPath();//开始绘制
        mc.strokeRect(210,70,80,80);
        mc.closePath();//结束绘制
        mc.fillRect(210,200,100,80);
        mc.fill();
        //绘制圆弧
        mc.fillStyle='green'
        mc.arc(400,110,40,0*Math.PI/180,360*Math.PI/180,true);
        mc.stroke();//空心圆
        // mc.fill();实心圆
        //绘制文字
        mc.fillStyle = 'deeppink'
        mc.font="32px 微软雅黑"
        var x=0;
        setInterval(function(){
            x++;
            mc.clearRect(0,300,500,150)//清除掉原来的文字
            mc.fillText('今天也超喜欢飞飞!',x,350)
        },100)
        // 旋转预设
        mc.save();//产生一个相同的副本，升起来
        mc.translate(50,150);//旋转点
        mc.rotate(90*Math.PI/180);//旋转弧度

        // 绘制过程(直线)
        mc.beginPath();//开始绘制
        mc.moveTo(0,-100);//起始点
        mc.lineTo(100,0);//经过点
        mc.lineTo(0,0);//经过点
        mc.closePath();//结束绘制(闭合)
        mc.stroke();//绘制
        mc.restore();//映入原图
        
    </script>
</body>
</html>

7.1绘制渐变图形

涉及方法：

var color = c.createLinearGradient(0,0,0,500);//创建渐变

color.addColorStop(0,"blue");

color.addColorStop(1,"yellow");//追加颜色

c.fillStyle=color;

c.fillRect(0,0,500,500);

7.2canvas存储

function down(){
//流的方式（不能指定文件名）
//window.location=mymc.toDataURL("image/png").replace("image/png","image/octet-stream");
//A标签模拟的方式(可以指定文件名)
var data = mymc.toDataURL("image/png")
var link = document.createElement('a');
link.href = data;
link.download = '1.png';
link.click();
}