HTML5 新特性及已移除元素

HTML5 引入了许多新特性，同时也废弃了一些元素。

新特性：

语义化标签：header, footer, nav, section, article, aside
表单控件：email, url, number, range, date, time, datetime-local, month, week, time, datetime, datetime-local, color
多媒体标签：video, audio
Canvas 绘图：<canvas> 标签用于绘制图形
本地存储：localStorage, sessionStorage
新的表单元素属性：placeholder, required, pattern, min, max, step
应用程序缓存：manifest
新的JS API：Geolocation, Web Workers, Web Sockets

已移除元素：

一些过时的元素：basefont, big, center, font, s, strike, tt, u
对于旧浏览器的标记：applet, frame, frameset, iframe, noframes

示例代码：




<!DOCTYPE html>
<html>
<head>
    <title>HTML5 新特性示例</title>
</head>
<body>
    <!-- 语义化标签 -->
    <header>头部信息</header>
    <nav>导航链接</nav>
    <section>
        <article>文章内容</article>
        <aside>侧边内容</aside>
    </section>
    <footer>底部信息</footer>
    
    <!-- 表单控件 -->
    <form>
        <input type="email" name="userEmail" placeholder="请输入电子邮件">
        <input type="url" name="userURL" required pattern="https?://.+">
        <input type="number" name="quantity" min="1" max="5" step="1">
        <input type="date" name="userDate">
        <input type="time" name="userTime">
        <!-- 更多表单控件... -->
    </form>
    
    <!-- 多媒体 -->
    <video width="320" height="240" controls>
        <source src="movie.mp4" type="video/mp4">
        <source src="movie.ogg" type="video/ogg">
        您的浏览器不支持 video 标签。
    </video>
    
    <!-- Canvas 绘图 -->
    <canvas id="myCanvas" width="200" height="100">
        您的浏览器不支持 Canvas。
    </canvas>
    
    <!-- 本地存储 -->
    <script>
        localStorage.setItem('key', 'value');
        console.log(localStorage.getItem('key'));
    </script>
    
    <!-- 应用程序缓存 -->
    <html manifest="example.appcache">
    <!-- 其他内容 -->
    </html>
    
    <!-- JS API -->
    <script>
        navigator.geolocation.getCurrentPosition(function(position) {
            console.log("纬度: " + position.coords.latitude + 
            ", 经度: " + position.coords.longitude);
        });
    </script>
</body>
</html>

以上代码展示了HTML5的一些新特性，包括语义化标签、表单控件、多媒体元素、Canvas绘图、本地存储、应用程序缓存以及JavaScript API的使用。

HTML5 新特性及已移除元素

评论已关闭

推荐阅读