HTML5

一、概念

HTML5 是超文本标记语言（HTML）的第五个主要版本，它是用于构建和展示万维网内容的标准标记语言。HTML5 于 2014 年由万维网联盟（W3C）正式推荐。HTML5 的目标是通过提供更加丰富和动态的功能来支持现代 Web 应用和网站的开发，同时减少对插件（如 Flash）的依赖。使标签语义化：

    
    
    
    
    
    
    
    



    
头部
    
    

        
        
主体文章
    
    


    

二、新增元素

1. 表单元素

: 输入框，可以用来接收不同类型的数据。

type 可以为 text(文本)、password(密码)、email(电子邮箱)、number(数字)、file(文件)、date(日期)等等，

fileldset 用于表单分组

这是一个滑块输入控件，用户可以通过拖动滑块来选择一个数值。

用于表示一个在已知范围内的测量值。

表示某个操作的进度，通常用于显示任务的完成情况。

此外还可以在 中输入 pattern  填写正则表达式、required 输入框不能为空、disabled 禁用输入框、readonly 只读不写（不能输入）、autofocus 自动获取焦点。

2. 多媒体元素

HTML5 内置支持音频和视频标签（ 和 ），使得在网页中嵌入多媒体内容更加简单，无需依赖第三方插件。具体代码如下：

    
    
    
    
    



    
    
    

        播放视频
    
    

    
    

        播放视频
    


    
    

3. 画布元素

引入了 元素，可以通过 JavaScript 在网页上绘制图形、动画和游戏等复杂内容。

JS 的代码如下：

3.1 绘制线

3.2 绘制矩形

3.3 绘制圆

3.4 绘制文本

4. SVG 标签

SVG 是一种用于描述二维矢量图形的图像格式，广泛用于网页和应用程序中。SVG 使用 XML 语法来定义图形元素，可以缩放而不失真，适合各种分辨率的设备。具体操作流程可以进入官网 https://www.w3.org/TR/SVG/ 查看。列如：

三、新增 API

1. 本地缓存

本地存储 localStorage 是 Web 存储 API 的一部分，允许网页在用户的浏览器中以键值对的形式存储数据。与 Cookies 相比，本地存储具有更大的存储容量（通常为 5-10MB），并且数据不会随请求发送给服务器。可以在同一个环境下不同的窗口下共享数据，数据只要不是手动删除，都会一直存在（永久）。

存储数据：localStorage.setItem(‘key’, ‘value’);

获取数据：const value = localStorage.getItem(‘key’);

删除数据：localStorage.removeItem(‘key’);

清空数据：localStorage.clear();

    
    
    
    
    



    设置本地存储
    获取本地存储
    删除本地存储
    清空本地存储

    

        
    
    

        

    


    
    

2. 会话缓存

会话存储 sessionStorage 是 Web 存储 API 的一部分，允许在一个会话中存储数据。与本地存储不同，会话存储的数据在浏览器标签页或窗口关闭后会被清除。

存储数据：sessionStorage.setItem(‘key’, ‘value’);

获取数据：const value = sessionStorage.getItem(‘key’);

删除数据：sessionStorage.removeItem(‘key’);

清空数据：sessionStorage.clear();

    
    
    
    
    


    

        设置会话存储
        获取会话存储
        删除会话存储
        清空会话存储
    

    


    

3. 监听网络

监听网络变化通常是指在 Web 应用中监测网络状态的变化。

online 事件：当网络连接恢复时触发。offline 事件：当网络连接丢失时触发。

4. 触摸行为

触摸行为是指在移动设备上与触摸屏进行交互时发生的各种事件和操作。在 Web 开发中，触摸行为通常通过触摸事件来处理，这些事件是由用户在触摸屏上进行的操作触发的。

touchstart: 当用户触摸屏幕时触发。
touchmove: 当用户在屏幕上移动手指时触发。
touchend: 当用户抬起手指时触发。
touchcancel: 触摸事件被中断（例如，系统弹出通知）时触发。