h5新特性有哪些

最新推荐文章于 2024-07-18 15:09:36 发布

BEICUIDEMOZI

最新推荐文章于 2024-07-18 15:09:36 发布

阅读量780

点赞数 15

文章标签： html5

本文链接：https://blog.csdn.net/m0_74394878/article/details/132134819

版权

1. 语义化标签

（1）比如：header、conent、footer、aside、nav、section、article等语义化标签。

（2）语义化标签的好处：结构清楚，易于阅读，可维护性更高，有利于SEO的优化。

2. 表单新特性

（1）input控件新增输入类型：date，color，month，email，tel，url、search、number等。

（2）新增表单元素：keygen（公钥私钥），datalist，progress，meter，output等。

（3）新增表单属性：placeholder，min/max，pattern，required，width，height，multitype等。

1.HTML5表单新特性之——新的input type

HTML5之前已有的input type:

text、password、radio、checkbox、file、submit、reset、button、image、hidden

HTML5新增的input type:

1.Email：邮件输入域，在表单提交时提供简单的邮箱格式验证，并弹出一个提示矿口(可定制内容不能定制样式)

2.url:URL地址输入域。在表单提交时提供简单的URL地址格式验证，并弹出一个提示窗口

3.number:数字输入域，在表单提交时提供简单的数字格式验证，并弹出一个提示窗口

4.tel:电话号码输入域，在手机浏览器中弹出数字键盘

5.search:搜索输入域，在手机浏览器中右下角呈现搜索按键

6.range：范围选择控件，帮助用户在一定范围内选择一个数字

(7)color：颜色选择控件，浏览器并未自己实现颜色选择框，而是使用操作系统自带的颜色选择控件

(8)date：日期选择控件，FF没有实现，推荐使用第三方插件代替，如jQueryUI-datepicker、laydate等

(9)month：月份选择控件，FF没有实现

(10)week：星期选择控件，FF没有实现

HTML5新特性之表单新特性——新的表单元素

HTML5之前FORM可以有的标签——用于数据提交：

INPUT、TEXTAREA、SELECT/OPTION、BUTTON

HTML5新增表单元素——用于信息提示，不能用于数据提交：

(1)datalist：数据列表，配合option使用，本身为不可见元素，为普通的input提供输入建议列表

(2)progress：进度条，未指定value属性则显示为“进行中”样式；若指定了value（默认在0~1之间）就可以控制其显示的进度

(3)meter：刻度尺/度量衡，用红黄绿三色表示出一个数值所处的范围：不可接受/可以接受/最优范围

(4)output：输出，用于描述表单中的计算结果，语义标签，样式与SPAN无异。

HTML5新特性表单新特性——表单元素新的属性——重点

HTML5之前表单元素可用的属性：

id、class、title、style、type、name、value、checked、selected、disabled、readonly

HTML5之前表单元素新增的属性：

(1)autocomplete：on/off，自动补全，是否自动记录之前提交的数据，以用于下一次输入建议

(2)placeholder：站位符，用于在输入框中显示提示性文字，与value不同，不能被提交

(3)autofocus：false/true，自动获得输入焦点

(4)multiple：false/true，是否允许多个输入值，若声明了该属性，输入框中（如email）就允许输入用逗号分隔的多个值

(5)form：为一个元素指定form属性，值为某个表单的ID，则此输入域可以放到表单的外部

(6)required：false/true，必需的/必填项，在表单提交时会验证是否有输入，没有输入则弹出提示消息

(7)maxlength：最大长度，在有输入的情况下，限定输入域中字符的个数

(8)minlength：最小长度，在有输入的情况下，限定输入域中字符的个数，不是HTML5标准属性，仅部分浏览器支持（如Chrome）

(9)min：限定输入的数字的最小值

(10)max：限定输入的数字的最大值

(11)step：限定输入的数字的步长，与min属性连用

(12)pattern：指定一个正则表达式，对输入进行验证

3. vedio和audio

多媒体表单元素，可用于播放mp3、mp4文件

video标签的属性

src: 用于告诉video标签需要播放的视频地址

autoplay: 用于告诉video标签是否需要自动播放视频

controls: 用于告诉video标签是否需要显示控制条

poster: 用于告诉video标签视频没有播放之前显示的占位图片

loop: 一般用于做广告视频, 用于告诉video标签视频播放完毕之后是否需要循环播放

preload: 预加载视频, 但是需要注意preload和autoplay相冲, 如果设置了autoplay属性, 那么preload属性就会失效

用于缓冲大文件;它可以采用以下三个值之一：

"none"不缓冲文件
"auto"缓冲媒体文件
"metadata"仅缓冲文件的元数据
muted:静音

width/height: 和img标签中的一模一样

audio属性

src: 用于告诉audio标签需要播放的音频地址

autoplay: 用于告诉audio标签是否需要自动播放音频

controls: 用于告诉audio标签是否需要显示控制条

loop: 一般用于做广告视频, 用于告诉video标签音频播放完毕之后是否需要循环播放

preload: 预加载音频, 但是需要注意preload和autoplay相冲, 如果设置了autoplay属性, 那么preload属性就会失效。

muted:静音

4. canvas画布

用于绘制2D、3D图形

<canvas>看起来和<img>标签一样，只是 <canvas> 只有两个可选的属性 width、heigth 属性，而没有 src、alt 属性。

如果不给<canvas>设置widht、height属性时，则默认 width为300、height为150,单位都是px。也可以使用css属性来设置宽高，但是如宽高属性和初始比例不一致，他会出现扭曲。所以，建议永远不要使用css属性来设置<canvas>的宽高。

绘制两个长方形。

<html>
<head>
    <title>Canvas tutorial</title>
    <style type="text/css">
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<canvas id="tutorial" width="300" height="300"></canvas>
</body>
<script type="text/javascript">
    function draw(){
        var canvas = document.getElementById('tutorial');
        if(!canvas.getContext) return;
        var ctx = canvas.getContext("2d");
        ctx.fillStyle = "rgb(200,0,0)";
          //绘制矩形
        ctx.fillRect (10, 10, 55, 50);
 
        ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
        ctx.fillRect (30, 30, 55, 50);
    }
    draw();
</script>
</html>

原文链接：https://blog.csdn.net/m0_52622108/article/details/125094331