H5新特性

最新推荐文章于 2024-10-03 18:52:05 发布

人间小趴菜

最新推荐文章于 2024-10-03 18:52:05 发布

阅读量947

点赞数 17

文章标签： mysql 数据库

本文链接：https://blog.csdn.net/m0_75276704/article/details/141528123

版权

一、语义化标签

H5引入了一系列语义化标签，例如<header> <footer> <nav> <section> <article>

优点：页面结构更加清晰、可读性增强；利于搜索引擎优化和无障碍访问。

<header>
    <h1>网页标题</h1>
    <nav>
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">产品</a></li>
            <li><a href="#">关于我们</a></li>
            <li><a href="#">联系我们</a></li>
        </ul>
    </nav>
</header>
<section>
    <article>
        <h2>文章标题</h2>
        <p>文章内容...</p>
    </article>
</section>
<footer>
    <p>&copy; 2024 公司名称</p>
</footer>

二、多媒体支持

H5提供了更强大的多媒体支持，包括音频（<audio>）和视频（<video>）元素。可以通过这些元素方便地在网页中嵌入音频和视频内容。

<audio controls>
    <source src="music.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
</audio>

<video controls width="400" height="300">
    <source src="video.mp4" type="video/mp4">
    Your browser does not support the video element.
</video>

三、表单增强

H5对表单进行了增强：

1.输入类型新增了<input>的type属性的属性值

常用的有：text password button radio checkbox date time number submit等

2.表单校验新增<input>的pattern属性和required属性

pattern属性：规定用于验证 <input> 元素的值的正则表达式。

required属性：属性规定必需在提交表单之前填写输入字段。

3.自动完成新增<form>和<input>的autocomplete属性

autocomplete属性：当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项。

四、Canvas和SVG

H5引入了<canvas>和<svg>（可缩放矢量图形）两种2D图形绘制技术，使得前端开发者可以通过代码绘制复杂的图形和动画，为网页增添更多的交互性和视觉效果。

Canvas和SVG 的区别：

svg是用xml绘制的，Canvas是用js绘制的。
svg 是一种矢量图，而 canvas是位图，依赖于分辨率。所以 svg 放大不会失真，但是 canvas 绘制的图形会失真。
svg 支持事件处理器，而 canvas 不支持事件处理器。
canvas绘制的图片不会出现在DOM树中，svg绘制的图片会出现在DOM树中。
svg 中的文字独立于图像，文字可保留，可编辑和可搜索，canvas 的文本渲染能力弱。
canvas 适合图像密集型的游戏，频繁地重绘图像，svg 绘制的复杂度高时减慢渲染的速度。
canvas 绘制的图形可以多种格式 (jpg、png) 保存图片，但是 svg 绘制的只能以 .svg 格式保存，使用时可以引入 html 文件。
canvas 适合开发游戏，svg 不适合游戏应用。

<canvas id="myCanvas" width="200" height="100"></canvas>

<script>
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');

    context.fillStyle = 'red';
    画一个矩形fillRect(x,y,width,height)
    context.fillRect(10, 10, 50, 50);
</script>

<svg width="100" height="100">
    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg>

五、Web存储

H5引入了两种新的客户端存储方式：LocalStorage和SessionStorage，可以在浏览器端存储数据，提供了比传统的Cookie更强大和便捷的数据存储方案。

LocalStorage | SessionStorage | cookie对比

存储期限：LocalStorage在没有手动删除的情况下可以无限期存储，SessionStorage当页面会话结束（如关闭浏览器标签或窗口）时数据会被清除,而cookie可以设置具体的过期时间。
隐私性：localStorage和SessionStorage不会随每个HTTP请求发送到服务器，而cookie会随每个请求发送，可能涉及隐私问题。
作用域：LocalStorage在同一域名下所有页面共享，SessionStorage在同一个域名下的同一页面的会话间共享，不同的页面会话不会共享，cookie的作用域遵循同源政策，可以在不同的页面间共享，但可以被设置为仅限于特定路径定。
容量：LocalStorage和SessionStorage的容量大于cookie。

<script>
    // 使用LocalStorage存储数据
    localStorage.setItem('username', 'JohnDoe');
    var username = localStorage.getItem('username');
</script>

六、地理位置和设备访问

H5通过Geolocation API和Device API，使得网页可以获取用户的地理位置信息和设备信息，为开发位置服务和设备特性相关的应用提供了便利。

<script>
    // 获取地理位置信息
    navigator.geolocation.getCurrentPosition(function(position) {
    
    
        console.log('Latitude:', position.coords.latitude);
        console.log('Longitude:', position.coords.longitude);
    });

    // 获取设备信息
    console.log('User Agent:', navigator.userAgent);
</script>