HTML5新元素

最新推荐文章于 2024-09-11 22:31:16 发布

路痴先森

最新推荐文章于 2024-09-11 22:31:16 发布

阅读量49

点赞数

文章标签： html5 前端 html

本文链接：https://blog.csdn.net/qq_57162921/article/details/133278864

版权

本文介绍了HTML5带来的新元素，如<canvas>用于图形绘制、<audio>和<video>支持多媒体、表单的<datalist>和<command>等，以及语义结构元素的更新。同时，也提到了HTML4.01中被废弃的元素。

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

HTML5新元素

自1999年以后HTML 4.01 已经改变了很多,今天，在HTML 4.01中的几个已经被废弃，这些元素在HTML5中已经被删除或重新定义。

为了更好地处理今天的互联网应用，HTML5添加了很多新元素及功能，比如: 图形的绘制，多媒体内容，更好的页面结构，更好的形式处理，和几个api拖放元素，定位，包括网页应用程序缓存，存储，网络工作者，等。

<canvas> 新元素

描述：标签定义图形，比如图标和其他图像。该标签基于JavaScript的绘图API。

<canvas> 标签只是图形容器，必须使用脚本来绘制图形。

例：通过 <canvas> 元素来显示一个红色的矩形

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>标题</title>
</head>

<body>

    <canvas id="myCanvas">你的浏览器不支持 HTML5 canvas 标签。</canvas>

    <script>
        var c = document.getElementById('myCanvas');
        var ctx = c.getContext('2d');
        ctx.fillStyle = '#FF0000';
        ctx.fillRect(0, 0, 80, 100);
    </script>

</body>

</html>

新多媒体元素

标签	描述
<audio>	定义音频内容，比如音乐或其他音频流。
<video>	定义视频（video或者movie）
<source>	定义多媒体<video>和<audio>
<embed>	定义嵌入的内容，比如插件。
<track>	为如<video>和<audio>元素之类的媒介规定外部文本轨道。

新表单元素

标签	描述
<datalist>	定义选项列表。与input元素配合使用该元素，来定义input可能的值。
<keygen>	规定用于表单的密钥对生成器字段。
<output>	定义不同类型的输出，比如脚本的输出

新的语义和结构元素

HTML5提供了新的元素来创建更好的页面结构：

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