Html5_在html5表单中,以下哪个类型的输入框可用于接受数字输入并确保输入的值在指定范围-CSDN博客

本文链接：https://blog.csdn.net/Ulrica_Amaris/article/details/107838945

什么是Html5

1.HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。
2.HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。
3.HTML5 是 W3C 与 WHATWG 合作的结果：
（1）W3C 指 World Wide Web Consortium，万维网联盟。
（2）WHATWG 指 Web Hypertext Application Technology Working Group。
（3）WHATWG 致力于 web 表单和应用程序，而 W3C 专注于 XHTML 2.0。

新特性

1.用于绘画的 canvas 元素
2.用于媒介回放的 video 和 audio 元素
对本地离线存储的更好的支持
3.新的特殊内容元素，比如 article、footer、header、nav、section
4.新的表单控件，比如 calendar、date、time、email、url、search。

Html视频

1.HTML5 规定了一种通过 video 元素来包含视频的标准方法。
在这里插入图片描述
Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件

MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件

WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件。
2.如何工作：

<video src="movie.ogg" controls="controls">
</video>

3.controls 属性供添加播放、暂停和音量控件。
4. 标签的属性：
在这里插入图片描述
4.HTML5 元素同样拥有方法、属性和事件。

HTML 5 音频

1.支持音频格式：
在这里插入图片描述
2.如何工作：

<audio src="song.ogg" controls="controls">
</audio>

实例：

<!DOCTYPE HTML>
<html>
<body>

<audio src="/i/song.ogg" controls="controls">
Your browser does not support the audio element.
</audio>

</body>
</html>

在这里插入图片描述
3. 标签的属性：

HTML 5 拖放

1.拖放（Drag 和 drop）是 HTML5 标准的组成部分。任何元素都能够拖放。
2.方法：
（1）设置元素为可拖放：<img draggable="true" />
（2）拖动什么 - ondragstart
（3）置被拖数据的数据类型和值：setData()
（4）放到何处 - ondragover，默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。
实例：

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#div1 {width:198px; height:66px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script type="text/javascript">
function allowDrop(ev)
{
ev.preventDefault();
}

function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

<p>请把 W3School 的图片拖放到矩形中：</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br />
<img id="drag1" src="/i/eg_dragdrop_w3school.gif" draggable="true" ondragstart="drag(event)" />

</body>
</html>

拖动前
拖动后
代码解释：
调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）

通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。

被拖数据是被拖元素的 id ("drag1")

把被拖元素追加到放置元素（目标元素）中。

HTML 5 Canvas

1.HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
2.创建 Canvas 元素：<canvas id="myCanvas" width="200" height="100"></canvas>
3.通过 JavaScript 来绘制：canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>

（1）JavaScript 使用 id 来寻找 canvas 元素：

`var c=document.getElementById("myCanvas");`

（2）创建 context 对象：

var cxt=c.getContext("2d");

（3）getContext(“2d”) 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

HTML5 内联 SVG

1.SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
2.在 HTML5 中，能够将 SVG 元素直接嵌入 HTML 页面中：
实例：

<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
  <polygon points="100,10 40,180 190,60 10,60 160,180"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>

</body>
</html>

HTML5 地理定位

1.HTML5 Geolocation API 用于获得用户的地理位置。鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的。
2.getCurrentPosition() 方法来获得用户的位置。
在这里插入图片描述

HTML 5 Web 存储

1.HTML5 提供了两种在客户端存储数据的新方法：
localStorage - 没有时间限制的数据存储

sessionStorage - 针对一个 session 的数据存储。

HTML 5 应用程序缓存

1.使用 HTML5，通过创建 cache manifest 文件，可以轻松地创建 web 应用的离线版本。这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。

HTML5 新的 Input 类型

1.color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week
2.color 类型用在input字段主要用于选取颜色
3.date 类型允许你从一个日期选择器选择一个日期
4.datetime 类型允许你选择一个日期
5.atetime-local 类型允许你选择一个日期和时间
6.email 类型用于应该包含 e-mail 地址的输入域
7.month 类型允许你选择一个月份
8.number 类型用于应该包含数值的输入域,还能够设定对所接受的数字的限定：
在这里插入图片描述
9.range 类型用于应该包含一定范围内数字值的输入域。range 类型显示为滑动条。
10.search 类型用于搜索域，比如站点搜索或 Google 搜索
11.tel定义输入电话号码字
12.time 类型允许你选择一个时间
13.url 类型用于应该包含 URL 地址的输入域
14.week 类型允许你选择周和年.

HTML5 表单元素

元素: 元素规定输入域的选项列表。属性规定 form 或 input 域应该拥有自动完成功能。当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项：使用元素的列表属性与元素绑定:

<input list="browsers">
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

在这里插入图片描述
2. 元素: 元素的作用是提供一种验证用户的可靠方法。标签规定用于表单的密钥对生成器字段。当提交表单时，会生成两个键，一个是私钥，一个公钥。私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。

<form action="demo_keygen.asp" method="get">
用户名: <input type="text" name="usr_name">
加密: <keygen name="security">
<input type="submit">
</form>

在这里插入图片描述
3. 元素:用于不同类型的输出，比如计算或脚本输出：

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100 +
<input type="number" id="b" value="50">=
<output name="x" for="a b"></output>
</form>

在这里插入图片描述