HTML5

原创

于 2024-05-12 22:07:21 发布

· 1.2k 阅读

35 ·

版权

文章标签：

#html5 #前端 #html

文章目录

1、HTML5简介
2、新增语义化标签
3、新增表单功能
4、新增多媒体标签
- 4.1 视频标签
- 4.2 音频标签
5、新增全局属性
6、HTML5兼容性处理

1、HTML5简介

HTML5 是新一代的HTML 标准，2014年10月由万维网联盟（W3C）完成标准制定
官网地址：
https://www.w3.org/TR/html/index.html
https://whatwg-cn.github.io/html/multipage

优势：
1、针对JavaScript，新增了很多可操作的接口
2、新增了一些语义化标签，全局属性
3、新增了多媒体标签，可以很好的替代flash
4、更加侧重语义化，对于SEO更友好
5、可移植性好，可以大量应用移动设备上

兼容性：支持Chrome、Safari、Opera、Firefox等主流浏览器
注意：IE浏览器必须9及以上版本才支持HTML5，且IE9仅支持部分HTML5新特性

2、新增语义化标签

2.1 布局标签

在这里插入图片描述

例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>01_新增布局标签</title>
</head>
<body>
    <!-- 头部 -->
    <header class="page-header">
        <h1>尚品汇</h1>
    </header>
    <hr>
    <!-- 主导航 -->
    <nav>
        <a href="#">首页</a>
        <a href="#">订单</a>
        <a href="#">购物车</a>
        <a href="#">我的</a>
    </nav>
    <!-- 主要内容 -->
    <div class="page-content">
        <!-- 侧边栏导航 -->
        <aside style="float: right;">
            <nav>
                <ul>
                    <li><a href="#">秒杀专区</a></li>
                    <li><a href="#">会员专区</a></li>
                    <li><a href="#">领取优惠券</a></li>
                    <li><a href="#">品牌专区</a></li>
                </ul>
            </nav>
        </aside>
        <!-- 文章 -->
        <article>
            <h2>《如何一夜暴富》</h2>
            <section>
                <h3>第一种方式：通过做梦</h3>
                <p>你要这么做梦：xxxxxxxxxxxxxxxxxxxxxxx</p>
            </section>
            <section>
                <h3>第二种方式：通过买彩票</h3>
                <p>你要这么买彩票：xxxxxxxxxxxxxxxxxxxxxxx</p>
            </section>
            <section>
                <h3>第三种方式：通过学习前端</h3>
                <p>你要来到尚硅谷学前端：xxxxxxxxxxxxxxxxxxxxxxx</p>
            </section>
        </article>
    </div>
    <hr>
    <footer>
        <nav>
            <a href="#">友情链接1</a>
            <a href="#">友情链接2</a>
            <a href="#">友情链接3</a>
            <a href="#">友情链接4</a>
        </nav>
    </footer>
</body>
</html>

在这里插入图片描述

2.2、状态标签

2.2.1 meter标签

语义：定义已知范围内的标量测量，也被称为gauge（尺度），双标签。例如：电量、磁盘用量等。
常用属性如下：
在这里插入图片描述

2.2.2 progress标签

语义：显示某个任务完成的进度的指示器，一般用于表示进度条，双标签。例如：工作完成进度等。
常用属性：
在这里插入图片描述

例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>02_新增状态标签</title>
    <style>
        progress {
     
            <

最低0.47元/天解锁文章