html5的新增的标签和废除的标签简要概述

HTML5(Hyper Text Markup Language 5)是HTML(Hyper Text Markup Language)的第五个版本,它对之前版本的语言规范做了很多改进和增强。在HTML5中,新增了很多标签来帮助Web开发者更好地构建现代化、丰富多彩的网站。同时,也废除了一些不太常用、有性能问题或者安全隐患的标签。

新增标签

\<canvas>

\<canvas>标签是HTML5中新增的标签之一,它允许我们通过JavaScript的绘图API在网页上绘制二维图像和动画。以下是一个简单的示例:

<!DOCTYPE html>
<html>
<head>
    <title>Canvas Example</title>
    <style>
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <canvas id="myCanvas" width="200" height="200"></canvas>
    <script>
        var canvas = document.getElementById("myCanvas");
        var ctx = canvas.getContext("2d");
        ctx.fillStyle = "blue";
        ctx.fillRect(10, 10, 150, 150);
    </script>
</body>
</html>

上述代码会在页面上绘制一个宽度和高度分别为200个像素的矩形。

\<video>

\<video>标签是HTML5中另一个非常有用的标签,它允许我们在网页上播放视频。以下是一个示例:

<!DOCTYPE html>
<html>
<head>
    <title>Video Example</title>
</head>
<body>
    <video width="480" height="320" controls>
        <source src="movie.mp4" type="video/mp4">
        <source src="movie.ogg" type="video/ogg">
        Your browser does not support the video tag.
    </video>
</body>
</html>

上述代码会在页面上播放一个宽度和高度分别为480和320像素的视频。这里使用了两个\<source>标签来指定视频的源文件,分别是MP4格式和Ogg格式。为了让尽可能多的浏览器都可以播放视频,我们可以提供多个源文件。在\<video>标签中还使用了一个controls属性,这个属性会自动加入一个播放器控件,方便用户播放和控制视频。

废除标签

\<acronym>

\<acronym>标签在HTML4中被定义用来标记缩写词,但是由于很少被使用,而且在一些屏幕阅读器上会导致易读性问题,所以在HTML5中被废弃了。

\<applet>

\<applet>标签在HTML4时代被用来嵌入Java applet,但是由于Java applet的使用率越来越低,而且有安全隐患,所以在HTML5中被废弃了。

虽然废弃了一些不再使用的标签,但是在使用HTML5时,仍然需要注意这些标签的兼容性和易用性问题。

以上就是关于HTML5新增标签和废弃标签的简要概述。在实际应用中,可以根据自己的需求和场景使用适当的标签来构建丰富多彩的Web页面。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:html5的新增的标签和废除的标签简要概述 - Python技术站

(0)
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • HTML5 移动页面自适应手机屏幕宽度详解

    HTML5 移动页面自适应手机屏幕宽度是现代网页设计中的一个重要技术,并且在移动设备用户增长的背景下显得越来越重要。下面是一个完整的攻略,介绍了如何在HTML5中实现自适应手机屏幕宽度。 什么是HTML5移动页面自适应手机屏幕宽度? HTML5移动页面自适应手机屏幕宽度是一种通过HTML5结构和CSS样式定义来控制不同分辨率设备页面展示形式的技术。通过使用这…

    css 2023年6月10日
    00
  • AngularJS HTML编译器介绍

    AngularJS HTML编译器介绍 在AngularJS中,HTML编译器是一个非常重要的组成部分,它负责将包含AngularJS表达式的HTML模板转换成可执行的JavaScript代码并展示在浏览器上。下面将详细讲解AngularJS HTML编译器的工作原理和使用方法。 工作原理 AngularJS HTML编译器工作的基本原理是:将HTML DO…

    css 2023年6月9日
    00
  • 利用CSS定位背景图片 background-position

    下面是关于利用CSS定位背景图片background-position的完整攻略: 1. 概述 在网页制作中,背景图片的使用非常常见,使用背景图片可以丰富页面的视觉效果,而CSS的background-position属性则可以决定背景图片在元素中的位置。 2. 背景图片定位原理 CSS的background-position属性可以接受水平和垂直两个值,用…

    css 2023年6月9日
    00
  • CSS linear-gradient属性案例详解

    以下是“CSS linear-gradient属性案例详解”的完整攻略: 什么是CSS linear-gradient属性? CSS linear-gradient属性用于创建一个线性渐变背景色。它可以指定渐变的起点和终点,以及每个颜色所处的位置和数量。可以使用CSS的渐变方式在Web页面中创建一些酷炫的效果。 如何使用CSS linear-gradient…

    css 2023年6月10日
    00
  • HTML5中一些酷炫又有趣的新特性代码整理汇总

    HTML5是一种新一代的标准,它引入了很多新的特性和标签来增强Web页面的功能和表现效果。以下是一些HTML5中酷炫又有趣的新特性: 1. 色彩选择器 HTML5新增了一个type为color的input标签,可以让用户方便地选择颜色。它是一个可视化的颜色选择器,用户可以通过拖动鼠标来选择颜色,然后把选好的颜色作为值传给后端程序。以下是一个例子: <l…

    css 2023年6月9日
    00
  • 基于html和CSS3制作简单侧边导航栏

    基于HTML和CSS3制作简单侧边导航栏的攻略如下: 1. 开始准备 在编写代码之前,你需要准备一个文本编辑器,如Visual Studio Code、Sublime Text或Atom等,以便于编辑和保存代码。接下来,我们需要创建一个HTML文件,并在其中添加必要的HTML和CSS代码来构建一个侧边导航栏。 2. HTML 结构 导航栏的HTML结构通常包…

    css 2023年6月9日
    00
  • 网页制作经验分享:干净简洁的网页列表代码

    网页列表是网页设计中常用的元素之一,它可以用于展示文章、产品、服务等内容。干净简洁的网页列表可以提高用户体验和页面加载速度,下面是网页制作经验分享:干净简洁的网页列表代码的完整攻略,包括基本概念、使用方法、注意事项和示例说明。 1. 基本概念 网页列表是一种常用的网页元素,它可以用于展示文章、产品、服务等内容。网页列表通常包括标题、摘要、图片等信息,可以通过…

    css 2023年5月18日
    00
  • HTML5和CSS3实例教程总结(推荐)

    HTML5和CSS3实例教程总结(推荐)是一本让初学者上手HTML5和CSS3的好书。本书通过大量实例将HTML5和CSS3的基础知识融会贯通,并介绍了一些实际应用中的技巧和经验。下面提供一些攻略供初学者参考: 书籍概述 本书共分为10个章节,从HTML和CSS的基础知识入手逐步提高,让读者掌握HTML5和CSS3的用法和技巧,最终通过综合案例使用这两种语言…

    css 2023年6月9日
    00
合作推广
合作推广
分享本页
返回顶部