H5新增特性大全

最新推荐文章于 2024-07-25 08:14:42 发布

小夏啥也不会

最新推荐文章于 2024-07-25 08:14:42 发布

阅读量876

点赞数 1

分类专栏： html中的新特性 video audio 文章标签： css html5 前端

本文链接：https://blog.csdn.net/weixin_61855876/article/details/131797037

版权

H5新增特性大全

摘要由CSDN通过智能技术生成

一、HTML概述

1.1 什么是HTML

HTML5 是HTML最新的修订版本（超文本标记语言的第五次重大修改），2014年10月由万维网联盟（W3C）完成标准制定。HTML5 的设计目的是为了在移动设备上支持多媒体。HTML5 简单易学，HTML5 是下一代 HTML 标准。

1.2HTML中的新特性

用于绘画的 canvas 元素
用于媒介回放的 video 和 audio 元素
对本地离线存储的更好的支持
新的特殊内容元素，比如 article、footer、header、nav、section
新的表单控件，比如 calendar、date、time、email、url、search

1.3块元素、自定义元素和HTML新标签的优点

1.3.1块元素

HTML5 定了 8 个新的 HTML 块级元素，为了能让旧版本的浏览器正确显示这些元素，你可以设置 CSS 的 display 属性值为 block。示例：

header, section, footer, aside, nav, main, article, figure {
   
            display: block;
        }

1.3.2 自定义元素

你可以为 HTML 自定义新的元素,并为该元素定义样式,元素名为xiaoxia，示例：

<head>
    <style>
        xiaoxia {
     
        color: red;
        font-size: 100px;
        }
        </style>
</head>
<body>
    <h1>h1</h1>
    <h2>h2</h2><br>
    <xiaoxia>我叫小夏</xiaoxia>
</body>

1.3.3 HTML新标签的优点

更注重于内容而不是形式：之前的标签更注重于怎么把内容显示到页面中，新标签更加容易明显的让人明白存放的是什么东西；
对人的友好：更加的语义化，高度的描述性，更加的直观，增加代码的可读性；
对计算机的友好：浏览器更容易解析，搜索引擎更容易抓取文档内容，之前的定义区块，都是使用div结合id和class使用，会出现各种各样的命名；
现在定义的新标签更规范；代码更加的简洁；

1.4 HTML特性

1.4.1 HTML的改进

新元素
新属性
完全支持 CSS3
Video 和 Audio
2D/3D 制图
本地存储
本地 SQL 数据
Web 应用

1.4.2 HTML多媒体

使用 HTML5 你可以简单的在网页中播放视频(video)与音频 (audio) 。

1.4.3 HTML应用

使用 HTML5 你可以简单地开发应用

本地数据存储
访问本地文件
本地 SQL 数据
缓存引用
Javascript 工作者
XHTMLHttpRequest 2

1.4.4 新语义元素

HTML5 添加了很多语义元素如下所示：

标签	描述
article	定义页面独立的内容区域。
aside	定义页面的侧边栏内容。
bdi	允许您设置一段文本，使其脱离其父元素的文本方向设置。
command	定义命令按钮，比如单选按钮、复选框或按钮
details	用于描述文档或文档某个部分的细节
dialog	定义对话框，比如提示框
summary	标签包含 details 元素的标题
figure	规定独立的流内容（图像、图表、照片、代码等等）。
figcaption	定义 figure元素的标题
footer	定义 section 或 document 的页脚。
header	定义了文档的头部区域
mark	定义带有记号的文本。
meter	定义度量衡。仅用于已知最大和最小值的度量。
progress	定义任何类型的任务的进度。
ruby	定义 ruby 注释（中文注音或字符）。
rt	定义字符（中文注音或字符）的解释或发音。
nav	定义导航链接的部分。
section	定义文档中的节（section、区段）。
time	定义日期或时间。

1.4.5 HTML表单

新表单元素, 新属性，新输入类型，自动验证。

二 HTML5新布局标签

许多现有网站都包含以下HTML代码： div id=“nav” ，div class=“header”，或者div id=“footer”，来指明导航链接，头部，以及尾部。现在可以直接使用nav、header、footer等。HTML5 提供了新的语义元素来明确一个Web页面的不同部分，点击查看：https://itseovn.com/attachments/layout-html5-6-jpg.31533/，使用header、nav、article、aside、figcaption、figure和footer可以更方便的检查代码，替代了之前的div。以下是大部分布局所用的结构：

<head>
    <style>
        /* 在代码中div代表的一个盒子，那么现在这些新布局标签等同于div的代名词 */
        * {
     
            margin: 0 auto;
            padding: 0;
            text-align: center;
            font-size: 20px;
        }
        header {
     
            width: 400px;
            height: 50px;
            background-color: aqua;
        }
        nav {
     
            width: 400px;
            height: 170px;
            background-color: red;
        }
        .nav {
     
            height: 50px;
        }
        section {
     
            width: 250px;
            height: 120px;
            background-color: #26ff00;
            float: left;
            font-size: 30px;
        }
        .heading {
     
            width: 230px;
            height: 35px;
            background-color: #52b470;
        }
        article {
     
            width: 230px;
            height: 35px;
            background-color: #2d9500;
        }
        aside {
     
            width: 150px;
            float: right;
            height: 120px;
            background-color: #00d0ff;
        }
        footer {
     
            width: 400px;
            height: 50px;
            background-color: #ff00ff;
        }
    </style>