html5 新特性

Now？！

于 2024-05-08 17:20:48 发布

阅读量283

点赞数 6

文章标签： html5 前端 html

本文链接：https://blog.csdn.net/weixin_66130560/article/details/138562512

版权

html5 ：HTML最新的修订版本

部分新特性：

语义化标签
表单增强
多媒体支持
canvas
本地存储

下面代码中的注释可以看看，全网很多道友都总结了html5的新特性，非常的全面，所以本文单纯分享一下个人的笔记。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 修改placeholder的样式 */
        #e::placeholder {
                color: red;
        }

    </style>
</head>
<body>
    <!-- 1 -->
    <!-- 语义化标签：提供更加精准和结构化的文档描述 -->
    <!-- 语义化标签并没有特定的样式，比如header标签，它不是固定在头部；footer标签页不是固定在尾部 -->
    <!-- 语义化标签作用：增强网页可读性，有利于搜索引擎优化（SEO） -->
    <!-- 下面几个都是块级标签 -->
    <footer>你好啊</footer>
    <header>头部</header>
    <article>内容</article>
    <aside>侧边栏</aside>

    <!-- 2 -->
    <!-- 表单增强:新添加了一些input类型和属性 -->
    <!-- multiple：可选多个值，适用于email和file输入类型-->
    <!-- 对于<input type="file">要选择多个文件时，在选择时按住Ctrl即可多选 ； 对于email，则使用“ , ” 隔开每个邮箱即可-->
    <input type="number" required max="90" min="60" step="10">
    <input type="date" autofocus>
    <input type="email" multiple placeholder="请填写邮箱号" id="e">
    <input type="tel" placeholder="请填写手机号">
    <input type="search" autocomplete="on">
    <input type="color">
    <input type="range">
    <input type="url">

    <textarea cols="30" rows="10" placeholder="填写"></textarea>

    <!-- 3 -->
    <!-- 多媒体支持:新增了视频video ，音频audio 标签 -->
    <video src="XXX.mp4" controls width="200" height="200" ></video>

    <!-- 4 -->
    <!-- canvas:用于绘制图像，通过脚本，如js -->
    <!-- canvas本身没有绘制能力，必须使用脚本来完成绘图 -->
    <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>

    <!-- 5 -->
    <!-- 本地存储:localStorage,sessionStorage -->
    <button id="btn">清除b</button>
    <button id="btn2">清除所有</button>
    
</body>
<script>
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.fillStyle="#FF0000";
    ctx.fillRect(0,0,150,75);

    // localStorage
    // 设置值
    localStorage.setItem('a','aaaaa')
    localStorage.setItem('b','bbbbb')
    // 获取值
    console.log(localStorage.getItem('a'));
    console.log(localStorage.getItem('b'));
    let btn=document.querySelector('#btn')
    let btn2=document.querySelector('#btn2')
    btn.onclick=()=>{
        // 清除某一个值
        localStorage.removeItem('b')
        // 获取第几位的键名
        console.log(localStorage.key(0));
    }
    btn2.onclick=()=>{
        // 清除全部
        localStorage.clear()
    }
    // sessionStorage用法上和 localStorage 相同
   
</script>
</html>