HTML5新特性

简介: 在之前Html基础上增加的一些新特性

1. 语义化标签

image.png

注意:section是大号的div标签

image.pngimage.png

2. 视频标签


image.png

image.pngimage.png

注意:在谷歌浏览器中将autoplay自动播放功能给禁止掉可以通过muted来解决

poster用于加载等待时的画面图片

image.pngimage.png

3. input新增

image.png

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>Document</title></head><body><!-- 我们验证的时候必须添加form表单域 --><formaction=""><ul><li>邮箱: <inputtype="email"/></li><li>网址: <inputtype="url"/></li><li>日期: <inputtype="date"/></li><li>时间: <inputtype="time"/></li><li>数量: <inputtype="number"/></li><li>手机号码: <inputtype="tel"/></li><li>搜索: <inputtype="search"/></li><li>颜色: <inputtype="color"/></li><!-- 当我们点击提交按钮就可以验证表单了 --><li><inputtype="submit"value="提交"></li></ul></form></body></html>

4. 新增表单属性

image.png

placeholder属性:默认显示值

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>HTML5新增表单属性</title><style>input::placeholder {
color: pink;
        }
</style></head><body><formaction=""><inputtype="search"name="sear"id=""required="required"placeholder="pink老师"autofocus="autofocus"autocomplete="off"><inputtype="file"name=""id=""multiple="multiple"><inputtype="submit"value="提交"></form></body></html>
相关文章
|
8月前
|
存储 移动开发 前端开发
HTML5的部分特性
【4月更文挑战第9天】HTML5的部分特性
61 1
|
8月前
|
JavaScript 容器
html常见的兼容性问题
html常见的兼容性问题
|
2月前
|
存储 移动开发 前端开发
html5有哪些新特性?
【10月更文挑战第19天】
|
4月前
|
存储 移动开发 API
HTML5的新特性
HTML5引入了众多新特性和增强功能,简化并强化了网页开发。新增结构元素如`&lt;header&gt;`、`&lt;footer&gt;`、`&lt;article&gt;`等使页面布局更清晰;表单增强支持更多输入类型及属性;内置音频视频播放无需插件;`&lt;canvas&gt;`与SVG支持提升了图形处理能力;Geolocation API和Web存储改善了用户体验;离线应用、拖放功能及Web Workers则进一步提升了网页应用的实用性和交互性。HTML5令网页开发更为现代化,为开发者提供了丰富的工具集。
|
5月前
|
存储 移动开发 前端开发
HTML5 的新特性
【8月更文挑战第24天】
72 0
|
8月前
|
XML 移动开发 前端开发
HTML版本
【4月更文挑战第16天】HTML版本
57 4
|
8月前
|
存储 移动开发 编解码
html5的新特性详解
HTML5是构建和呈现互联网内容的语言描述方式,HTML5在HTML4的基础上增加了许多新特性,使其更具语义化、更加标准化,同时也提高了用户体验和开发效率。以下是HTML5的部
|
存储 移动开发 编解码
html5新特性有哪些?
新增语义化标签:header、nav、aside、article、section、footer 2. 拖放属性:drag/drop.拖放是一种常见的特性,即抓取对象以后拖到另一个位置。在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放。 3. 音/视频标签:audio/video 4. 画布(Canvas): HTML5 \<canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成. \<canvas> 标签只是图形容器,您必须使用脚本来绘制图形。你可以通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像。
html5新特性有哪些?
|
存储 移动开发 前端开发
HTML5的新特性有哪些?
HTML5是近年来Web开发标准最巨大的飞跃。与以前的版本不同,HTML5并非仅仅用来表示Web内容,它的新使命是将Web带入一个成熟的应用平台,在HTML5平台上,视频、音频、图像、动画,以及同计算机的交互都被标准化。
124 0
HTML5的新特性有哪些?
|
XML 存储 移动开发
html5的几种新特性
html5的几种新特性