整理html5知识点3

Posted Rand Tsui

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了整理html5知识点3相关的知识，希望对你有一定的参考价值。

1、====================================================================html5 新的 Input 类型
HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。
本章全面介绍这些新的输入类型：
color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week
注意:并不是所有的主流浏览器都支持新的input类型，不过您已经可以在所有主流的浏览器中使用它们了。即使不被支持，仍然可以显示为常规的文本域。


Input 类型: color
color 类型用在input字段主要用于选取颜色，如下所示：
<!DOCTYPE html>
<html>
<body>
<form action="demo-form.php">
  选择你喜欢的颜色: <input type="color" name="favcolor"><br>
  <input type="submit">
</form>
</body>
</html>




Input 类型: date
date 类型允许你从一个日期选择器选择一个日期。
<!DOCTYPE html>
<html>
<body>
<form action="demo-form.php">
  生日: <input type="date" name="bday">
  <input type="submit">
</form>
</body>
</html>


Input 类型: datetime
datetime 类型允许你选择一个日期（UTC 时间）。
<!DOCTYPE html>
<html>
<body>
<form action="demo-form.php">
  生日 (日期和时间): <input type="datetime" name="bdaytime">
  <input type="submit">
</form>
</body>
</html>


Input 类型: datetime-local
datetime-local 类型允许你选择一个日期和时间 (无时区).
<!DOCTYPE html>
<html>
<body>
<form action="demo-form.php">
  生日 (日期和时间): <input type="datetime-local" name="bdaytime">
  <input type="submit">
</form>
</body>
</html>


Input 类型: email
email 类型用于应该包含 e-mail 地址的输入域。
<!DOCTYPE html>
<html>
<body>
<form action="demo-form.php">
  E-mail: <input type="email" name="usremail">
  <input type="submit">
</form>
<p><b>注意:</b> Internet Explorer 9  及更早IE版本不支持type="email" 。</p>
</body>
</html>


Input 类型: month
month 类型允许你选择一个月份。
<!DOCTYPE html>
<html>
<body>
<form action="demo-form.php">
  生日 ( 月和年 ): <input type="month" name="bdaymonth">
  <input type="submit">
</form>
</body>
</html>


Input 类型: number
number 类型用于应该包含数值的输入域。
您还能够设定对所接受的数字的限定：
<!DOCTYPE html>
<html>
<body>
<form action="demo-form.php">
  数量 ( 1 到 5 之间): <input type="number" name="quantity" min="1" max="5">
  <input type="submit">
</form>
<p><b>注意:</b>Internet Explorer 9 及更早IE版本不支持 type="number" 。</p>
</body>
</html>
使用下面的属性来规定对数字类型的限定：
max- 规定允许的最大值
min - 规定允许的最小值
step - 规定合法的数字间隔（如果 step="3"，则合法的数是 -3,0,3,6 等）
value - 规定默认值
<!DOCTYPE html>
<html>
<body>
<form action="demo_form.php" method="get">
<input type="number" name="points" min="0" max="10" step="3" value="6">
<input type="submit">
</form>
</body>
</html>


Input 类型: range
range 类型用于应该包含一定范围内数字值的输入域。
range 类型显示为滑动条。
<!DOCTYPE html>
<html>
<body>
<form action="demo-form.php" method="get">
Points: <input type="range" name="points" min="1" max="10">
<input type="submit">
</form>
<p><b>注意:</b> Internet Explorer 9 及更早IE版本不支持 type="range"。</p>
</body>
</html>


Input 类型: search
search 类型用于搜索域，比如站点搜索或 Google 搜索。
<!DOCTYPE html>
<html>
<body>
<form action="demo-form.php">
  Search Google: <input type="search" name="googlesearch" value="cxc"><br>
  <input type="submit">
</form>
</body>
</html>


Input 类型: tel
<!DOCTYPE html>
<html>
<body>
<form action="demo-form.php">
  电话号码: <input type="tel" name="usrtel"><br>
  <input type="submit">
</form>
</body>
</html>


Input 类型: time
time 类型允许你选择一个时间。
<!DOCTYPE html>
<html>
<body>
<form action="demo-form.php">
  选择时间: <input type="time" name="usr_time">
  <input type="submit">
</form>
</body>
</html>


Input 类型: url
url 类型用于应该包含 URL 地址的输入域。
在提交表单时，会自动验证 url 域的值。
<!DOCTYPE html>
<html>
<body>
<form action="demo-form.php">
  添加你的主页: <input type="url" name="homepage"><br>
  <input type="submit">
</form>
<p><b>注意:</b> Internet Explorer 9及更早IE版本不支持 type="url" 。</p>
</body>
</html>


Input 类型: week
week 类型允许你选择周和年。
<!DOCTYPE html>
<html>
<body>
<form action="demo-form.php">
  选择周: <input type="week" name="year_week">
  <input type="submit">
</form>
</body>
</html>


属性
New : HTML5新标签。
属性 值 描述
accept audio/* video/* image/* MIME_type 规定通过文件上传来提交的文件的类型。 (只针对type="file")
align left right top middle bottom HTML5已废弃，不赞成使用。规定图像输入的对齐方式。 (只针对type="image")
alt text 定义图像输入的替代文本。 (只针对type="image")
autocompleteNew on off autocomplete 属性规定 <input> 元素输入字段是否应该启用自动完成功能。
autofocusNew autofocus 属性规定当页面加载时 <input> 元素应该自动获得焦点。
checked checked checked 属性规定在页面加载时应该被预先选定的 <input> 元素。 (只针对 type="checkbox" 或者 type="radio")
disabled disabled disabled 属性规定应该禁用的 <input> 元素。
formNew form_id form 属性规定 <input> 元素所属的一个或多个表单。
formactionNew URL 属性规定当表单提交时处理输入控件的文件的 URL。(只针对 type="submit" 和 type="image")
formenctypeNew application/x-www-form-urlencoded multipart/form-data text/plain 属性规定当表单数据提交到服务器时如何编码(只适合 type="submit" 和 type="image")。
formmethodNew get post 定义发送表单数据到 action URL 的 HTTP 方法。 (只适合 type="submit" 和 type="image")
formnovalidateNew formnovalidate formnovalidate 属性覆盖 <form> 元素的 novalidate 属性。
formtargetNew _blank _self _parent _top framename 规定表示提交表单后在哪里显示接收到响应的名称或关键词。(只适合 type="submit" 和 type="image")
heightNew pixels 规定 <input>元素的高度。(只针对type="image")
listNew datalist_id 属性引用 <datalist> 元素，其中包含 <input> 元素的预定义选项。
maxNew number date 属性规定 <input> 元素的最大值。
maxlength number 属性规定 <input> 元素中允许的最大字符数。
minNew number date 属性规定 <input>元素的最小值。
multipleNew multiple 属性规定允许用户输入到 <input> 元素的多个值。
name text name 属性规定 <input> 元素的名称。
patternNew regexp pattern 属性规定用于验证 <input> 元素的值的正则表达式。
placeholderNew text placeholder 属性规定可描述输入 <input> 字段预期值的简短的提示信息 。
readonly readonly readonly 属性规定输入字段是只读的。
requiredNew required 属性规定必需在提交表单之前填写输入字段。
size number size 属性规定以字符数计的 <input> 元素的可见宽度。
src URL src 属性规定显示为提交按钮的图像的 URL。 (只针对 type="image")
stepNew number step 属性规定 <input> 元素的合法数字间隔。
type button 
checkbox 
color 
date 
datetime 
datetime-local 
email 
file 
hidden 
image 
month 
number 
password 
radio 
range 
reset 
search 
submit 
tel 
text 
time 
url 
week type 属性规定要显示的 <input> 元素的类型。
value text 指定 <input> 元素 value 的值。
widthNew pixels width 属性规定 <input> 元素的宽度。 (只针对type="image")




窗口事件属性（Window Event Attributes）
由窗口触发该事件 (适用于 <body> 标签):
属性 值 描述
onafterprintNew script 在打印文档之后运行脚本
onbeforeprintNew script 在文档打印之前运行脚本
onbeforeonloadNew script 在文档加载之前运行脚本
onblur script 当窗口失去焦点时运行脚本
onerrorNew script 当错误发生时运行脚本
onfocus script 当窗口获得焦点时运行脚本
onhaschangeNew script 当文档改变时运行脚本
onload script 当文档加载时运行脚本
onmessageNew script 当触发消息时运行脚本
onofflineNew script 当文档离线时运行脚本
ononlineNew script 当文档上线时运行脚本
onpagehideNew script 当窗口隐藏时运行脚本
onpageshowNew script 当窗口可见时运行脚本
onpopstateNew script 当窗口历史记录改变时运行脚本
onredoNew script 当文档执行再执行操作（redo）时运行脚本
onresizeNew script 当调整窗口大小时运行脚本
onstorageNew script 当 Web Storage 区域更新时（存储空间中的数据发生变化时）运行脚本
onundoNew script 当文档执行撤销时运行脚本
onunloadNew script 当用户离开文档时运行脚本


表单事件(Form Events)
表单事件在HTML表单中触发 (适用于所有 HTML 元素, 但该HTML元素需在form表单内):
属性 值 描述
onblur script 当元素失去焦点时运行脚本
onchange script 当元素改变时运行脚本
oncontextmenuNew script 当触发上下文菜单时运行脚本
onfocus script 当元素获得焦点时运行脚本
onformchangeNew script 当表单改变时运行脚本
onforminputNew script 当表单获得用户输入时运行脚本
oninputNew script 当元素获得用户输入时运行脚本
oninvalidNew script 当元素无效时运行脚本
onreset script 当表单重置时运行脚本。HTML 5 不支持。
onselect script 当选取元素时运行脚本
onsubmit script 当提交表单时运行脚本


键盘事件（Keyboard Events）
属性 值 描述
onkeydown script 当按下按键时运行脚本
onkeypress script 当按下并松开按键时运行脚本
onkeyup script 当松开按键时运行脚本


鼠标事件（Mouse Events）
通过鼠标触发事件, 类似用户的行为:
属性 值 描述
onclick script 当单击鼠标时运行脚本
ondblclick script 当双击鼠标时运行脚本
ondragNew script 当拖动元素时运行脚本
ondragendNew script 当拖动操作结束时运行脚本
ondragenterNew script 当元素被拖动至有效的拖放目标时运行脚本
ondragleaveNew script 当元素离开有效拖放目标时运行脚本
ondragoverNew script 当元素被拖动至有效拖放目标上方时运行脚本
ondragstartNew script 当拖动操作开始时运行脚本
ondropNew script 当被拖动元素正在被拖放时运行脚本
onmousedown script 当按下鼠标按钮时运行脚本
onmousemove script 当鼠标指针移动时运行脚本
onmouseout script 当鼠标指针移出元素时运行脚本
onmouseover script 当鼠标指针移至元素之上时运行脚本
onmouseup script 当松开鼠标按钮时运行脚本
onmousewheelNew script 当转动鼠标滚轮时运行脚本
onscrollNew script 当滚动元素的滚动条时运行脚本


多媒体事件(Media Events)
通过视频（videos），图像（images）或者音频（audio） 触发该事件，多应用于HTML媒体元素比如 <audio>, <embed>, <img>, <object>, 和<video>):
属性 值 描述
onabort script 当发生中止事件时运行脚本
oncanplayNew script 当媒介能够开始播放但可能因缓冲而需要停止时运行脚本
oncanplaythroughNew script 当媒介能够无需因缓冲而停止即可播放至结尾时运行脚本
ondurationchangeNew script 当媒介长度改变时运行脚本
onemptiedNew script 当媒介资源元素突然为空时（网络错误、加载错误等）运行脚本
onendedNew script 当媒介已抵达结尾时运行脚本
onerrorNew script 当在元素加载期间发生错误时运行脚本
onloadeddataNew script 当加载媒介数据时运行脚本
onloadedmetadataNew script 当媒介元素的持续时间以及其他媒介数据已加载时运行脚本
onloadstartNew script 当浏览器开始加载媒介数据时运行脚本
onpauseNew script 当媒介数据暂停时运行脚本
onplayNew script 当媒介数据将要开始播放时运行脚本
onplayingNew script 当媒介数据已开始播放时运行脚本
onprogressNew script 当浏览器正在取媒介数据时运行脚本
onratechangeNew script 当媒介数据的播放速率改变时运行脚本
onreadystatechangeNew script 当就绪状态（ready-state）改变时运行脚本
onseekedNew script 当媒介元素的定位属性 [1] 不再为真且定位已结束时运行脚本
onseekingNew script 当媒介元素的定位属性为真且定位已开始时运行脚本
onstalledNew script 当取回媒介数据过程中（延迟）存在错误时运行脚本
onsuspendNew script 当浏览器已在取媒介数据但在取回整个媒介文件之前停止时运行脚本
ontimeupdateNew script 当媒介改变其播放位置时运行脚本
onvolumechangeNew script 当媒介改变音量亦或当音量被设置为静音时运行脚本
onwaitingNew script 当媒介已停止播放但打算继续播放时运行脚本


其他事件
属性 值 描述
onshowNew script 当 <menu> 元素在上下文显示时触发
ontoggleNew script 当用户打开或关闭 <details> 元素时触发


2、====================================================================HTML5 表单元素
HTML5 新的表单元素
HTML5 有以下新的表单元素:
<datalist>
<keygen>
<output>
注意:不是所有的浏览器都支持HTML5 新的表单元素，但是你可以在使用它们，即使浏览器不支持表单属性，仍然可以显示为常规的表单元素。


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


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


HTML5 <keygen> 元素
<keygen> 元素的作用是提供一种验证用户的可靠方法。
<keygen>标签规定用于表单的密钥对生成器字段。
当提交表单时，会生成两个键，一个是私钥，一个公钥。
私钥（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>


HTML5 <output> 元素
<output> 元素用于不同类型的输出，比如计算或脚本输出：
<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>


HTML5 新表单元素
标签 描述
<datalist> <input>标签定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。
<keygen> ><keygen> 标签规定用于表单的密钥对生成器字段。
<output> <output> 标签定义不同类型的输出，比如脚本的输出。


3、=====================================================================HTML5 表单属性
HTML5 新的表单属性
HTML5 的 <form> 和 <input>标签添加了几个新属性.
<form>新属性：
autocomplete
novalidate
<input>新属性：
autocomplete
autofocus
form
formaction
formenctype
formmethod
formnovalidate
formtarget
height and width
list
min and max
multiple
pattern (regexp)
placeholder
required
step

以上是关于整理html5知识点3的主要内容，如果未能解决你的问题，请参考以下文章

Chart.js | HTML5 图表绘制工具库（知识整理中文注释中文文档）

移动端 Web 开发前端知识整理

整理涵盖很全很广的前端知识点

Web缓存相关知识整理

熬夜总结了 “HTML5画布” 的知识点（共10条）

html5小知识点