HTML5中新特性有哪些

发布时间：2021-11-03 10:57:57 来源：亿速云阅读：166 作者：小新栏目：编程语言

这篇文章主要介绍HTML5中新特性有哪些，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

一、语义标签

HTML5中新特性有哪些

HTML4 到HTML5语义化标签迁移

HTML5中新特性有哪些
二、增强型表单

（1）新的input type

（ 2）新的表单元素<input><textarea><select><option>....
<datalist>：数据列表，为input提供输入建议列表
<progress>：进度条，展示连接/下载进度
<meter>：刻度尺/度量衡，描述数据所处的阶段，红色(危险)=>黄色(警告)=>绿色(优秀)
<output>：输出内容，语义上表示此处的数据是经过计算而输出得到的
（3）表单元素的新属性
通用属性：
placeholder：占位提示文字
mutiple：是否允许多个输入
autofocus：自动获得输入焦点
form：指定输入元素所从属的表单，可以实现输入框放在表单外部并能被提交的效果
验证属性(了解一下)：
required：输入框内容不能为空
min：允许输入的数字最小值
max：允许输入的数字最大值
minlength：允许输入的字符串最小长度
maxlength：允许输入的字符串最大长度
pattern：输入框内容必须符合的正则表达式

三、视频和音频

视频播放：<video src=""><video>
查看视频的所有属性、方法、事件：console.log(videoBirds);
音频播放：<audio src=""></audio>
查看视频的所有属性、方法、事件：console.log(bgMusic);

新的多媒体标签

video	audio
source	embed
track

代码示例：

<audio controls>
<!--source多配合audio video内部标签使用 -->
   <source src="horse.ogg" type="audio/ogg">
 你的浏览器不支持音频文件 
</audio> 

<track kind="subtitles" src="subs_chi.srt" srclang="zh" label="Chinese">
<!--主浏览器都不支持，track目前不用深究-->

<!--标签定义嵌入的内容，比如插件-->
<embed src="" />

四、Canvas绘图

H5原生技术，基于网页画布2D位图绘图技术，善于表现细腻颜色，可用于统计图表、页面游戏、地图应用、网页特效等。

使用Canvas的步骤：

Canvas自身是一个300*150的inline-block元素；注意：Canvas画布尺寸不能使用CSS设置，会对整个图像进行扭曲！

使用H5 Canvas API进行绘图：

var ctx = c2.getContext('2d');

//绘制矩形

ctx.fillStyle = '#000' 填充颜色/渐变色对象

ctx.strokeStyle = '#000' 描边颜色/渐变色对象

ctx.lineWidth = 1 描边线宽度

ctx.fillRect(x, y, w, h)：填充矩形

ctx.strokeRect(x, y, w, h)：描边矩形

ctx.clearRect(x, y, w, h)：描边矩形

//绘制文本

ctx.font = '10px sans-serif'

ctx.textBaseline = 'alphabetic/top/bottom'

ctx.fillStyle = '#000'

ctx.strokeStyle = '#000'

ctx.fillText(txt, x, y) 填充文本

ctx.strokeText(txt, x, y) 描边文本

ctx.measureText(txt).width 测量文本基于当前字体设置的宽度

//绘制路径——概念上类似于PS中的钢笔工具

ctx.beginPath()

ctx.moveTo()

ctx.lineTo()

ctx.arc()

ctx.rect()

ctx.ellipse()

ctx.closePath()

ctx.stroke() 基于现有路径进行描边

ctx.fill() 基于现有路径进行填充

ctx.clip() 基于现有路径进行裁切

//绘制图像

ctx.drawImage(img, x, y) 绘制图像(原始尺寸)

ctx.drawImage(img, x, y, w, h) 绘制图像(指定尺寸)

//绘图上下文变形和状态保持

ctx.rotate() 图像旋转

ctx.translate() 图像平移

ctx.scale() 图像缩放

ctx.save() 绘图上下文的保存

ctx.restore() 绘图上下文的恢复

Chart.js 简介，推荐官网查询https://www.chartjs.org/

五、SVG绘图

Scalable Vector Graphic，可缩放向量图

在H5标准之前的使用方法：SVG标签不能直接书写在网页中，只能编写在独立的XML文档中；

网页中使用<img src="x.svg">进行添加

纳入H5标准后的使用方法：SVG标签可以直接书写在网页中。

常用的SVG图形：

(1)矩形

(2)圆形

(3)椭圆

(4)直线（没有fill只有stroke）

(5)折线（fill必须设置透明/stroke必须手动指定）

(6)多边形

<polygon points="100,150 100,300 400,300 400,150 250,220" fill="#f0f" fill-opacity=".4" stroke="#00f" stroke-width="6" stroke-opacity=".4"></polygon>
(7)文本

(8)图像

SVG与Canvas区别：

（1）SVG适用于描述XML中的2D图形的语言

（2）Canvas随时随地绘制2D图形(使用JavaScript)

（3）SVG是基于XML的，这意味着每个元素在SVG DOM中都可用。你可以为每个元素添加JavaScript事件处理程序

（4）在SVG中，每个绘制的形状都会被记忆为一个对象。如果SVG对象的书香发生变化，浏览器可以自动重新渲染形状。

（5）Canvas是一像素一像素地渲染。在画布中，一旦图形绘制好了，就会被浏览器遗忘。如果你想改变某一个的位置，整个场景都需要重新绘制，包括可能已经被图形覆盖的任何对象。

六、新的HTML5的API

(Application Programming Interface)--应用程序编程接口

(1)HTML Geolocation 地理位置

通过浏览器获取当前用户的所在地理坐标，以实现“LBS服务”（Location Based Service），如实时导航、周边推荐。

(2)HTML Drag & Drop拖放

H5之前没有拖放API，可以使用“鼠标按下 + 鼠标移动”两个事件来模拟用户拖动事件。

H5之后专门提供了七个鼠标拖动相关事件句柄。

(3)HTML Local Storage 本地存储

(4)HTML Application Cache 应用程序缓存

(5)HTML Web Workers web工作者

(6)HTNL SSE

七、浏览器的支持度

现有浏览器都支持HTML5 。

八、HTML5删除/废弃不能用的元素

删除的元素	被以下替代
<acronym> 首字母缩写	<abbr>
<applet>	<object>
<basefont> 页面上默认字体颜色和字号	CSS样式
<big>	CSS样式
<center> 文本水平居中	CSS样式
<dir> 目录列表	CSS样式
<font> 字体外观，尺寸，颜色
<frame> 定义子窗口
<frameset> 定义框架集
<noframes> 向浏览器显示无法处理框架的提示文本，位于frameset元素中
<strike> 文本添加删除线	CSS样式，<s>或<del>
<tt> 定义打字机文本	CSS样式

以上是“HTML5中新特性有哪些”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注亿速云行业资讯频道！

向AI问一下细节

HTML5中新特性有哪些

HTML4 到HTML5语义化标签迁移

现有浏览器都支持HTML5 。

猜你喜欢

最新资讯

相关推荐

相关标签