HTML5

投时

已于 2022-03-18 22:12:08 修改

阅读量4.2k

点赞数

分类专栏： html 文章标签： html5

于 2022-03-18 15:18:21 首次发布

本文链接：https://blog.youkuaiyun.com/gxll499294075/article/details/123396460

版权

html 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了HTML5的十大新特性，包括语义化标签、增强型表单、音频和视频支持、Canvas绘图、SVG绘图、地理定位、拖放API、WebWorker、WebStorage以及WebSocket，并提供了相关API的使用示例和优势解析。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、语义化标签

二、增强型表单

2.1 html5 添加了一些新的input输入特性，改善更好的输入控制和验证。

HTML5增加了十个大特性，但是 IE8 及以下不支持新特性。

一、语义化标签

html5语义标签，可以更方便清晰构建页面的布局。

标签	描述
<header>	定义文档的头部区域
<footer>	定义文档的尾部区域
<nav>	定义文档导航区域
<section>	定义文档中的节
<article>	定义文章
<aside>	定义页面以外的内容
<details>	定义用户可以看到或者隐藏的额外细节
<summary>	标签包含 details 元素的标题
<dialog>	定义对话框
<figure>	定义自包含内容，如：图表
<main>	定义文档主内容
<mark>	定义文档主内容
<time>	定义日期/时间

二、增强型表单

2.1 html5 添加了一些新的input输入特性，改善更好的输入控制和验证。

输入类型（属性）	描述
color	主要用于选取颜色（可用于自定义颜色）
date	选取日期（可用于定义时间组件）
datetime	选取日期(UTC时间) 【注意：这个从 WHATWG HTML 中移除，并且不受浏览器支持】
datetime-local	选取日期（无时区）（日期和时间）
month	选择一个月份【月份】
week	选择周和年【哪年哪周】
time	选择一个时间【具体时间】
email	包含e-mail地址的输入域【提交表单前会校验】使用：<input type="email" id="email" pattern=".+@globex\.com" size="30" required>
number	数值的输入域【只能输出数字，调整数字】
url	url地址的输入域
tel	定义输入电话号码和字段
search	用于搜索域
range	一个范围内数字值的输入域【滑块调整阈值】

2.2 html5新增了五个表单元素

元素（标签）	描述
<datalist>	用户会在他们输入数据时看到域定义选项的下拉列表。 HTML `<datalist>`元素包含了一组元素 <options>，这些元素表示其它表单控件可选值。用法： <input list="browsers" name="myBrowser" /> <datalist id="browsers"> <option value="Chrome"></option> </datalist> 详细地址：datalist - HTML（超文本标记语言） \| MDN
<progress>	进度条，展示连接/下载进度【进度条】详细地址：<progress>：进度指示元素 - HTML（超文本标记语言） \| MDN
<meter>	刻度值，用于某些计量，例如温度、重量等详细地址：<meter> - HTML（超文本标记语言） \| MDN
<keygen>	提供一种验证用户的可靠方法，生成一个公钥和私钥已废弃: 该特性已经从 Web 标准中删除，虽然一些浏览器目前仍然支持它，但也许会在未来的某个时间停止支持，请尽量不要使用该特性。
<output>	用于不同类型的输出，比如尖酸或脚本输出用法： <form οninput="result.value=parseInt(a.value)+parseInt(b.value)"> <input type="range" name="b" value="50" /> + <input type="number" name="a" value="10" /> = <output name="result"></output> </form> 详细地址：<output> - HTML（超文本标记语言） \| MDN

2.3 html5新增表单属性

属性	描述
placehoder	输入框默认提示文字【提示文字】
required	要求输入的内容是否可为空【必填】
pattern	描述一个正则表达式验证输入的值【正则】
min/max	设置元素最小/最大值【最大值。最小值】
step	为输入域规定合法的数字间隔【步调】
height/wdith	用于image类型<input>标签图像高度/宽度【定义宽高】
autofocus	规定在页面加载时，域自动获得焦点【获取焦点】
multiple	规定<input>元素中可选择多个值【多选】

三、视频和音频

html5提供了音频和视频文件的标准

3.1 音频

详细了解地址：<audio> - HTML（超文本标记语言） | MDN

使用：

        <audio controls src="/media/cc0-audio/t-rex-roar.mp3">

                

                

                Your browser does not support the

                <code>audio</code> element.

        </audio>

注意：

controls 指定属性提供添加播放、暂停和音量控件。
src 指定文件地址
<source> 指定不同的播放源
可以在标签内写一些注意，如：什么浏览器不支持等。只有在不支持的情况下才能看到。

<audio controls src="/media/cc0-audio/t-rex-roar.mp3">
        <!-- 可以使用 <source>指定播放源 -->
        <!-- <source src="horse.ogg" type="audio/ogg">  -->
        Your browser does not support the
        <code>audio</code> element.
</audio>

3.2 视频

详细了解地址：<video> - HTML（超文本标记语言） | MDN

使用：

        <video controls width="250">

                <source src="/media/cc0-videos/flower.webm" type="video/webm">

                <source src="/media/cc0-videos/flower.mp4" type="video/mp4">

                Sorry, your browser doesn't support embedded videos.

        </video>

注意：

controls 指定属性提供添加播放、暂停和音量控件。
<source> 指定不同的播放源
src 指定文件地址
可以在标签内写一些注意，如：什么浏览器不支持等。只有在不支持的情况下才能看到。

<video controls width="250">
        <source src="/media/cc0-videos/flower.webm" type="video/webm">
        <source src="/media/cc0-videos/flower.mp4" type="video/mp4"> Sorry, your browser doesn't support embedded videos.
</video>

四、Canvas 绘图

详细了解地址：Canvas - Web API 接口参考 | MDN

使用：

<canvas id="canvas"></canvas>

在js中获取canvas 去绘制图像。

<body>
    <canvas id="canvas"></canvas>
    <script>
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
        ctx.fillStyle = 'green';
        ctx.fillRect(10, 10, 150, 100);
    </script>
</body>

五、SVG 绘图

详细了解：SVG | MDN

5.1 什么是SVG?

SVG指可伸缩矢量图形
SVG用于定义用于网络的基于矢量的图形
SVG使用XML格式定义图形
SVG图像在放大或改变尺寸的情况下其图形质量不会有损失
SVG是万维网联盟的标准

5.2 SVG的优势

与其他图像格式相比，是哟个SVG的优势在于：

SVG图像可通过文本编译器来创建和修改
SVG图像可被搜索、索引、脚本化或压缩
SVG是可伸缩的
SVG图像可在任何的分辨率下被高质量的打印
SVG可在图像质量不下降的情况下被放大

5.3 SVG与Canvas区别

SVG适用于描述XML中的2D图形的语言
Canvas随时随地绘制2D图形（使用javaScript）
SVG是基于XML的，意味这可以操作DOM，渲染速度较慢
在SVG中每个形状都被当做是一个对象，如果SVG发生改变，页面就会发生重绘
Canvas是一像素一像素地渲染，如果改变某一个位置，整个画布会重绘。

Canvas	SVG
依赖分辨率	不依赖分辨率
不支持事件处理器	支持事件处理器
能够以.png或.jpg格式保存结果图像	复杂度会减慢搞渲染速度
文字呈现功能比较简单	适合大型渲染区域的应用程序
最合适图像密集的游戏	不适合游戏应用

六、地理定位

详细了解：Geolocation.getCurrentPosition() - Web API 接口参考 | MDN

方法用来获取设备当前位置。

<script>
        var options = {
            enableHighAccuracy: true,
            timeout: 5000,
            maximumAge: 0
        };

        function success(pos) {
            var crd = pos.coords;

            console.log('Your current position is:');
            console.log('Latitude : ' + crd.latitude);
            console.log('Longitude: ' + crd.longitude);
            console.log('More or less ' + crd.accuracy + ' meters.');
        };

        function error(err) {
            console.warn('ERROR(' + err.code + '): ' + err.message);
        };

        navigator.geolocation.getCurrentPosition(success, error, options);
</script>

七、拖放API

详细了解：HTML 拖放 API - Web API 接口参考 | MDN

拖放是一种常见的特性，即捉取对象以后拖到另一个位置。

在html5中，拖放是标准的一部分，任何元素都能够拖放。

<div draggable="true"></div>

当元素拖动时，我们可以检查其拖动的数据。

<div draggable="true" ondragstart="drag(event)"></div>
<script>
function drap(ev){
    console.log(ev);
}
</script>

拖动生命周期	属性名	描述
拖动开始	ondragstart	在拖动操作开始时执行脚本
拖动过程中	ondrag	只要脚本在被拖动就运行脚本
拖动过程中	ondragenter	当元素被拖动到一个合法的防止目标时，执行脚本
拖动过程中	ondragover	只要元素正在合法的防止目标上拖动时，就执行脚本
拖动过程中	ondragleave	当元素离开合法的防止目标时
拖动结束	ondrop	将被拖动元素放在目标元素内时运行脚本
拖动结束	ondragend	在拖动操作结束时运行脚本