html5技术有哪些新特性,HTML5的十大新特性

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

(1)语义标签

语义化标签使得页面的内容结构化,见名知义标签描述

定义了文档的头部区域

定义了文档的尾部区域

定义文档的导航

定义文档中的节(section、区段)

定义页面独立的内容区域

定义页面的侧边栏内容

用于描述文档或文档某个部分的细节

标签包含 details 元素的标题

定义对话框,比如提示框

(2)增强型表单

HTML5 拥有多个新的表单 Input 输入类型。这些新特性提供了更好的输入控制和验证。输入类型描述

color主要用于选取颜色

date从一个日期选择器选择一个日期

datetime选择一个日期(UTC 时间)

datetime-local选择一个日期和时间 (无时区)

email包含 e-mail 地址的输入域

month选择一个月份

number数值的输入域

range一定范围内数字值的输入域

search用于搜索域

tel定义输入电话号码字段

time选择一个时间

urlURL 地址的输入域

week选择周和年

HTML5 也新增以下表单元素表单元素描述

元素规定输入域的选项列表

使用 元素的 list 属性与

提供一种验证用户的可靠方法

标签规定用于表单的密钥对生成器字段。

用于不同类型的输出

比如计算或脚本输出

HTML5 新增的表单属性placehoder 属性,简短的提示在用户输入值前会显示在输入域上。即我们常见的输入框默认提示,在用户输入后消失。

required  属性,是一个 boolean 属性。要求填写的输入域不能为空

pattern 属性,描述了一个正则表达式用于验证 元素的值。

min 和 max 属性,设置元素最小值与最大值。

step 属性,为输入域规定合法的数字间隔。

height 和 width 属性,用于 image 类型的 标签的图像高度和宽度。

autofocus 属性,是一个 boolean 属性。规定在页面加载时,域自动地获得焦点。

multiple 属性 ,是一个 boolean 属性。规定 元素中可选择多个值。

(3)视频和音频HTML5 提供了播放音频文件的标准,即使用

control 属性供添加播放、暂停和音量控件。

在 之间你需要插入浏览器不支持的

目前,

HTML5 规定了一种通过 video 元素来包含视频的标准方法。

1

2

3

4

5'320' height='240' controls>

'movie.mp4' type='video/mp4'>

'movie.ogg' type='video/ogg'>

您的浏览器不支持Video标签。

control 提供了 播放、暂停和音量控件来控制视频。也可以使用dom操作来控制视频的播放暂停,如 play() 和 pause() 方法。

同时 video 元素也提供了 width 和 height 属性控制视频的尺寸.如果设置的高度和宽度,所需的视频空间会在页面加载时保留。如果没有设置这些属性,浏览器不知道大小的视频,浏览器就不能再加载时保留特定的空间,页面就会根据原始视频的大小而改变。

与 标签之间插入的内容是提供给不支持 video 元素的浏览器显示的。

video 元素支持多个source 元素. 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式( MP4, WebM, 和 Ogg)

(4)Canvas绘图

标签只是图形容器,必须使用脚本来绘制图形。Canvas - 图形创建一个画布,一个画布在网页中是一个矩形框,通过 元素来绘制。默认情况下 元素没有边框和内容。

1'myCanvas' width='200' height='100' style='border:1px solid #000000;'>

标签通常需要指定一个id属性 (脚本中经常引用), width 和 height 属性定义的画布的大小,使用 style 属性来添加边框。你可以在HTML页面中使用多个 元素

使用Javascript来绘制图像,canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML5HTML的第五个版本,引入了许多新的特性和功能。以下是HTML5的一些主要新特性: 1. 语义化标签:HTML5引入了一些新的语义化标签,如<header>、<nav>、<section>、<article>、<footer>等,使得网页结构更加清晰明了。 2. 视频和音频支持:HTML5提供了<video>和<audio>标签,使得在网页中嵌入视频和音频变得更加简单,不再需要依赖第三方插件。 3. Canvas绘图:HTML5的<canvas>元素允许通过JavaScript来绘制图形、动画和游戏,为开发者提供了更多的绘图功能。 4. 本地存储:HTML5引入了本地存储机制,包括localStorage和sessionStorage,可以在客户端存储数据,减少对服务器的请求。 5. 表单增强:HTML5为表单元素提供了一些新的属性和类型,如placeholder、required、email、date等,使得表单验证和用户输入更加方便。 6. 地理定位:HTML5提供了Geolocation API,可以获取用户的地理位置信息,用于开发基于位置的应用。 7. Web存储:HTML5引入了Web Storage API,可以在浏览器中存储大量的数据,比传统的cookie更加高效和安全。 8. Web Workers:HTML5的Web Workers允许在后台运行脚本,提高了网页的性能和响应速度。 9. WebSocket:HTML5的WebSocket提供了全双工的通信通道,使得浏览器和服务器之间可以进行实时的双向通信。 10. CSS3支持:虽然CSS3不是HTML5的一部分,但HTML5的出现推动了CSS3的发展,使得网页设计更加丰富多样。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值