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

yizhihongxing

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日

相关文章

  • BOOTSTRAP时间控件显示在模态框下面的bug修复

    针对“BOOTSTRAP时间控件显示在模态框下面的bug修复”的问题,我提供以下完整攻略: 问题描述 在使用BOOTSTRAP时间控件时,当该控件被放置在模态框(Modal)中时,会出现控件被模态框遮挡,无法选取的bug。这是因为模态框Z-index值的默认设置会使得该控件表现异常。 修复步骤 要解决这个问题,我们可以通过以下步骤: 首先,需要将BOOTST…

    css 2023年6月10日
    00
  • 如何解决外边距margin叠加的问题探讨

    下面是“如何解决外边距margin叠加的问题探讨”的完整攻略。 问题探讨 外边距margin叠加是指当两个相邻的元素具有相同的方向的外边距时,会出现两个边框之间外边距的加合大于单个边框的情况。 例如,当两个垂直方向相邻的元素分别具有30px和50px的外边距时,它们之间的外边距为50px,而不是30px+50px=80px。 这种现象在页面布局中经常会出现,…

    css 2023年6月10日
    00
  • jQuery页面图片伴随滚动条逐渐显示的小例子

    接下来我将为您详细介绍使用jQuery制作页面图片伴随滚动条逐渐显示的小例子的完整攻略。 准备工作 在开始制作之前,您需要准备以下内容: 一份jQuery的库文件。 要显示的图片文件。 其中,jQuery库文件可以前往jQuery官网下载,图片文件可以自行准备或者从网络上下载。 制作过程 制作过程主要分为两个部分,即页面主体部分和jQuery代码部分。 页面…

    css 2023年6月10日
    00
  • 超级兔子让浮动层消失的前因后果

    背景 超级兔子是一款游戏,游戏中有个浮动层,我们希望通过点击超级兔子让这个浮动层消失。然而,有些用户在这个过程中遇到了问题,即无法消失该浮动层。本文将会针对这个问题给出完整攻略与示例说明。 前提要求 在正式开始攻略前,需要确保以下操作已经完成: 安装了jQuery库并成功引入。 本页面已经有浮动层和超级兔子元素,并且它们分别有唯一的id属性,且浮动层的初始状…

    css 2023年6月10日
    00
  • CSS之定位布局(position,定位布局技巧)

    当我们在进行页面布局时,经常需要对元素进行定位,这就需要用到CSS的position属性。position属性有以下值: static (默认值):元素没有定位,遵循普通文档流布局,left、top、right、bottom、z-index属性不起作用 relative:元素相对于自己原来存在的位置进行定位,left、top、right、bottom、z-i…

    css 2023年6月9日
    00
  • 简单的cookie计数器实现源码

    讲解“简单的cookie计数器实现源码”的攻略如下: 1. 简单介绍cookie 在实现cookie计数器之前,需要先介绍一下cookie。Cookie(也叫HTTP Cookie),指的是服务器发送到用户浏览器并保存在本地的一小块数据,会在浏览器下次向同一服务器再发起请求时被携带上,用于标记用户在Web站点上的活动。因为cookie是存储在浏览器本地的,所…

    css 2023年6月10日
    00
  • 判断横屏竖屏(三种)

    下面是关于判断横屏和竖屏的三种方法的完整攻略: 1. 使用CSS3媒体查询 可以使用CSS3媒体查询来检测并设置横竖屏的样式。首先,需要在CSS文件中添加媒体查询,并使用@media规则将其包装。例如,以下的媒体查询可以检测到设备是否处于横屏状态: @media screen and (orientation: landscape) { /* 竖屏样式 */…

    css 2023年6月9日
    00
  • hCalendar微格式 关于事件和基于时间或地点的活

    hCalendar是一种微格式,用于标记网页上的事件和活动,以便用户和搜索引擎更轻松地识别和使用。下面是使用hCalendar微格式的攻略: 标记 hCalendar微格式的标记包括一个class属性为”vevent”的HTML元素和多个包含事件信息的子元素。以下是一个基本的例子: <div class="vevent"> &…

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