HTML5系列-标签级介绍

最新推荐文章于 2022-12-13 20:00:00 发布

weixin_34242819

最新推荐文章于 2022-12-13 20:00:00 发布

阅读量155

点赞数

原文链接：https://my.oschina.net/tbd/blog/499823

版权

为什么80%的码农都做不了架构师？>>>

html5这个相信已经被嚼烂了！一提到ht5大家就会想到：

1.新的布局标签（nav、footer、section、artile、input的新类型等）

2.新功能标签（video、audio、canvas、svg等）

3.离线缓存，本地存储等

我了解到的做了简单分类，针对我们的ht5：

标签级：（我们主要了解部分）

一、section、nav布局标签等（优化布局处理）
二、canvas（画布绘制）
三、audio/video（音频视频播放）
四、svg（可伸缩的矢量标记绘图）
五、新表单（颜色，日历等）
六、编辑属性（标签的contenteditable属性）

存储级：

一、localStorage（类似于cookie，不过lo对象是作为window对象的属性，cookie作为document对象属性，本地存储）
二、sessionStorage （作为window属性，当前页面存储）
三、cache manifest（离线缓存，一般设置html标签的manifest属性指定manifest文件）

设备级：

一、音频处理 Web audio API（处理arraybuffer类型的音频处理，新的xhr2支持arraybuffer类型返回）
二、捕捉用户摄像头 - 媒体流 Media Capture（浏览器对象支持获取媒体方法，回调函数获取媒体流）
三、语音识别 Web Speech API
四、设备电量 Battery API
五、获取用户位置 - 地理位置 Geolocation API
六、环境光 Ambient Light API
七、陀螺仪 Deviceorientation
八、Websocket
九、NFC
十、震动 - Vibration API
十一、网络环境 Connection API

当你看到设备级别的功能时，任何人都是惊呆了的，不过几乎大部分都没有实现！我们的主要工作都是放在html5标签的项目使用处理。

一、基本知识

1.文件头部结构设置

我们的xhtml1.0的文件头结构如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

定义文档类型，模式，校验地址，编码类型等

到了html5.为我们做了非常简化的而处理，html5文件头部结构如下：

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" />

我们可以说是甚是喜欢啊！虽然xhml那一段也是软件生成的，几乎没人手打，不过看起来也是很碍眼。

注意：如果我们的页面没有对文档类型的定义，浏览器就会采用怪异模式解析页面，也就是浏览器自己的解析方式，ie的话就会采用ie5.5内核处理，我们的完美布局也就因此纵横交错了。

还有就是一些人还停留在html4.1的时代，如果采用4.1的文件头会导致一些css不被支持。

编码的问题大家应该很容易注意到，我们几乎都是采用utf-8。

‍2.浏览器模式问题‍

标准模式(strict mode)和怪异模式(quirks mode)了解：

所谓的标准模式是指，浏览器按W3C标准解析执行代码；怪异模式则是使用浏览器自己的方式解析执行代码，因为不同浏览器解析执行的方式不一样，所以我们称之为怪异模式。浏览器解析时到底使用标准模式还是怪异模式，与你网页中的DTD声明直接相关，DTD声明定义了标准文档的类型（标准模式解析）文档类型，会使浏览器使用相应的方式加载网页并显示，忽略DTD声明,将使网页进入怪异模式(quirks mode)。

3.meta标签--内核渲染处理

我们在很多页面都会看见这样的meta设置

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

指定渲染模式，这段标签意思就是：IE=edge告诉IE使用最新的引擎渲染网页（如果用户是ie9就采用ie9），chrome=1则可以激活Chrome Frame

（Google Chrome Frame是Google推出的一款免费的Internet Explorer专用插件。使用此插件，用户可以通过Internet Explorer的用户界面，以Chrome内核的渲染方式浏览网页。Chrome Frame 会把最新版的Chrome Webkit 内核和JavaScript 引擎注入到IE中）。

我们也可以指定特定的ie版本渲染：

<meta http-equiv="X-UA-Compatible" content="IE=7">

以上代码告诉IE浏览器，无论是否用DTD声明文档标准，IE8/9都会以IE7引擎来渲染页面。

<meta http-equiv="X-UA-Compatible" content="IE=8">

以上代码告诉IE浏览器，IE8/9都会以IE8引擎来渲染页面。

<meta http-equiv="X-UA-Compatible" content="IE=edge">

以上代码告诉IE浏览器，IE8/9及以后的版本都会以最高版本IE来渲染页面。

5.meta标签--http-equiv属性

http-equiv顾名思义，相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。

我们上面内核渲染采用的http信息就是对用户代理ua的处理，content定义了处理。

6.meta标签--name="viewport"作用

移动端随着html5盛行，我们在头部还如做出如下定义：

<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

浏览页面以viewport的方式预览，还有对宽度，缩放等的设置。

我们对照参数，看看他的功能：

1.width=device-width //应用程序的宽度和屏幕的宽度是一样的

2.height=device-height //应用程序的高度和屏幕的高是一样的

3.initial-scale=1.0 //应用程序启动时候的缩放尺度（1.0表示不缩放）

4.minimum-scale=1.0 //用户可以缩放到的最小尺度（1.0表示不缩放）

5.maximum-scale=1.0 //用户可以放大到的最大尺度（1.0表示不缩放）

6.user-scalable=no //用户是否可以通过他的手势来缩放整个应用程序，使应用程序的尺度发生一个改变（yes/no）

当然属性的设置还有其他。

针对移动端这种触摸设备，viewport的设置是必不可少的，我们的页面不做这种设置，pc宽度1000px的页面在手机上，正常情况下手机宽度小于1000px，页面是要出现滚动条的，没有设置，手机就会自己对页面进行缩放处理，不出现滚动条，保证我的大页面完全放入手机设备。如果进行viewport的设置，手机会做出实际处理，超过屏幕的部分显示滚动条，viewport后我们是在拖动可视窗口去看页面，不在是拖动结构滚动条去看页面。

7.css的引用

页面内css设置

<style>
	div{height:200px;}
</style>

外部css引用

<link rel="Stylesheet" type="text/css" href="1.css" />

link标签为单标签

8.js的引用

页面内js设置

<script type="text/javascript"> </script>

外部js引用

<script type="text/javascript" src="zepto.min.js"></script>

9.条件hack的使用

现在hack的使用相对较少了，我们知道在几年前hack也是使用不断，我们大部分都是使用行内hack，如：

针对ie6 处理 _的使用

div{height:200px;_height:200px;}

针对ie6 7处理 *的使用

div{height:200px;*height:200px;}

我们也可以采用条件hack的处理：

针对ie

<!--[if IE]>
	<link rel="Stylesheet" type="text/css" href="1.css" />
	<style>
		div{height:200px;}
	</style>
	<script type="text/javascript" src="zepto.min.js"></script>
	<script type="text/javascript"> </script>
<![endif]-->

针对ie6（可以其他）

<!--[if IE 6]>
	这段文字只在IE6浏览器显示
<![endif]-->

针对ie6以上

<!--[if gte IE 6]>
	这段文字只在IE6以上(包括)版本IE浏览器显示
<![endif]-->

针对非ie8

<!--[if ! IE 8]>
	这段文字在非IE8浏览器显示
<![endif]-->

针对非ie

<!--[if !IE]>
	这段文字只在非IE浏览器显示
<![endif]-->

条件hack内部不管是外部css，页面内css，外部js，页面内js都可很据条件进行针对处理

10.h1、h2等的作用

h标签可理解为优化标签，有利于网站的搜索，适当的h标签是不可少的。

二、浏览器和内核了解

Trident内核	IE6、IE7、IE8（Trident 4.0）、IE9（Trident 5.0）、IE10（Trident 6.0），还有很多国内浏览器如360等
Gecko内核	Mozilla Firefox、Mozilla SeaMonkey、Epiphany（早期版本）、Flock（早期版本）、K-Meleon
WebKit内核(Safari内核,Chrome内核原型,开源)	Apple Safari (Win/Mac/iPhone/iPad)、Symbian手机浏览器、Android 默认浏览器
Presto(Opera前内核)	Opera现已改用Google Chrome的Blink内核。
Blink内核	Chrome（以前采用webkit内核） Opera

微软在新一代操作系统Windows 10上整合新一代网络浏览器，它的开发代号叫做“Project Spartan（斯巴达项目）”，叫做斯巴达浏览器。在Windows 10正式版上成为默认浏览器，取代历史悠久的Internet Explorer。

针对浏览器我们在css3的处理时很多属性要加上对应前缀处理，同样我们痛恨的ie6 7也在列表中。

针对页面，进行各个浏览器的测试使我们的基本工作，了解这些基本的浏览器是我们基础的知识。

三、html5布局标签

<article>	定义文章。
<aside>	定义页面内容之外的内容。
<dialog>	定义对话框或窗口。
<figcaption>	定义 figure 元素的标题。
<figure>	定义媒介内容的分组，以及它们的标题。
<footer>	定义 section 或 page 的页脚。
<header>	定义 section 或 page 的页眉。
<nav>	定义导航链接。
<section>	定义 section。
<title>	定义文档的标题。

<bdi>	定义文本的文本方向，使其脱离其周围文本的方向设置。
<command>	定义命令按钮。
<details>	定义元素的细节。
<summary>	为 <details> 元素定义可见的标题。
<ruby>	定义 ruby 注释。
<rt>	定义 ruby 注释的解释。
<rp>	定义若浏览器不支持 ruby 元素显示的内容。
<mark>	定义有记号的文本。
<meter>	定义预定义范围内的度量。
<progress>	定义任何类型的任务的进度。

<wbr>	定义视频。
<video>	定义视频。
<track>	定义用在媒体播放器中的文本轨道。
<source>	定义媒介源。
<audio>	定义声音内容。
<datalist>	定义下拉列表。
<embed>	定义外部交互内容或插件。
<output>	定义输出的一些类型。
<time>	定义日期/时间。
<canvas>	定义图形。

针对html5，比较重要的就是音频视频和canvas的处理；

根据dom对其提供的api接口我们可以做出各种实现。

ruby、rt和rp的组合是对我们汉字和注音的支持，我们在一些特殊处理上，这套组合是最好的选择。

我们常用的组合标签还有：

ul li的列表处理

dl dt dd的图片，说明处理

fieldset legend 区块有左侧说明的处理

四、html5新表单

新的表单标签属性：

autocomplete

autofocus

form

form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)

height 和 width

list

min, max 和 step

multiple

pattern (regexp)

placeholder

required

我们可以简单看一下效果：

<input type="number" value="4" min="3"/>
   <input type="range" value="20" />
   <input type="date" />
   <input type="time"/>
   <input type="color"/>

   <input type="text" list="listdata" placeholder="search" />
    <datalist id="listdata">
        <option value="111">
        <option value="222">
    </datalist>

类型为number的做了最小值处理，只能选择到3

input通过list属性和datalist的id做绑定处理，我们以前会用到锚点a的href="#"属性和其他a的id绑定，label的for属性和其他表单id属性做绑定处理。

placeholder属性是水印效果的实现。

表单的各种实现为我们会省去很多的js处理。

我们表单如果含有上传操作：

enctype="multipart/from-data" 属性是要设置的。

五、html5其他

1.html5可编辑属性设置：

<p contenteditable="true">这是一段可编辑的段落。请试着编辑该文本。</p>

给元素设置contenteditable属性为true，可让元素处在可编辑状态。

同样的，处在可编辑状态的元素具有focus和blur事件，html5的各种处理，在DOM上都会有对应的处理接口。

2.html5布局标签说明和对比：

<article>标签定义外部的内容。比如来自一个外部的新闻提供者的一篇新的文章，或者来自 blog 的文本，或者是来自论坛的文本。亦或是来自其他外部源内容。
HTML5:<article></article>
HTML4:<div></div>
<aside>标签定义 article 以外的内容。aside 的内容应该与 article 的内容相关。
HTML5:<aside>Aside 的内容是独立的内容，但应与文档内容相关。</aside>
HTML4:<div>Aside 的内容是独立的内容，但应与文档内容相关。</div>
<audio> 标签定义声音，比如音乐或其他音频流。
HTML5:<audio src="someaudio.wav">您的浏览器不支持 audio 标签。</audio>
HTML4:<object type="application/ogg" data="someaudio.wav"><param name="src" value="someaudio.wav"></object>
<canvas> 标签定义图形，比如图表和其他图像。这个 HTML 元素是为了客户端矢量图形而设计的。它自己没有行为，但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上。
HTML5:<canvas id="myCanvas" width="200" height="200"></canvas>
HTML4:<object data="inc/hdr.svg" type="image/svg+xml" width="200" height="200"></object>
<command> 标签定义命令按钮，比如单选按钮、复选框或按钮。
HTML5: <command onclick=cut()" label="cut">
HTML4: none
<datalist> 标签定义可选数据的列表。与 input 元素配合使用，就可以制作出输入值的下拉列表。
HTML5: <datalist></datalist>
HTML4: see combobox.
<details> 标签定义元素的细节，用户可进行查看，或通过点击进行隐藏。与 <legend> 一起使用，来制作 detail 的标题。该标题对用户是可见的，当在其上点击时可打开或关闭 detail。
HTML5: <details></details>
HTML4: <dl style="display:hidden"></dl>
<embed> 标签定义嵌入的内容，比如插件。
HTML5: <embed src="horse.wav" />
HTML4: <object data="flash.swf"  type="application/x-shockwave-flash"></object>
<figcaption> 标签定义 figure 元素的标题。”figcaption” 元素应该被置于 “figure” 元素的第一个或最后一个子元素的位置。
HTML5: <figure><figcaption>PRC</figcaption></figure>
HTML4: none
<figure> 标签用于对元素进行组合。使用 <figcaption> 元素为元素组添加标题。
HTML5: <figure><figcaption>PRC</figcaption><p>The People's Republic of China was born in 1949...</p></figure>
HTML4: <dl><h1>PRC</h1><p>The People's Republic of China was born in 1949...</p></dl>
<footer> 标签定义 section 或 document 的页脚。典型地，它会包含创作者的姓名、文档的创作日期以及/或者联系信息。
HTML5: <footer></footer>
HTML4: <div></div>
<header> 标签定义 section 或 document 的页眉。
HTML5: <header></header>
HTML4: <div></div>
<hgroup> 标签用于对网页或区段（section）的标题进行组合。
HTML5: <hgroup></hgroup>
HTML4: <div></div>
<keygen> 标签定义生成密钥。
HTML5: <keygen>
HTML4: none
<mark>主要用来在视觉上向用户呈现那些需要突出的文字。<mark>标签的一个比较典型的应用就是在搜索结果中向用户高亮显示搜索关键词。
HTML5: <mark></mark>
HTML4: <span></span>
<meter> 标签定义度量衡。仅用于已知最大和最小值的度量。必须定义度量的范围，既可以在元素的文本中，也可以在 min/max 属性中定义。
HTML5: <meter></meter>
HTML4: none
<nav> 标签定义导航链接的部分。
HTML5: <nav></nav>
HTML4:<ul></ul>
<output> 标签定义不同类型的输出，比如脚本的输出。
HTML5: <output></output>
HTML4: <span></span>
<progress> 标签运行中的进程。可以使用 <progress> 标签来显示 JavaScript 中耗费时间的函数的进程。
HTML5: <progress></progress>
HTML4: none
<rp> 标签在 ruby 注释中使用，以定义不支持 ruby 元素的浏览器所显示的内容。
HTML5: <ruby>漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt></ruby>
HTML4: none
<rt> 标签定义字符（中文注音或字符）的解释或发音。
HTML5: <ruby>漢 <rt> ㄏㄢˋ </rt></ruby>
HTML4: none
<ruby> 标签定义 ruby 注释（中文注音或字符）。
HTML5: <ruby>漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt></ruby>
HTML4: none
<section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
HTML5: <section></section>
HTML4: <div></div>
<source> 标签为媒介元素（比如 <video> 和 <audio>）定义媒介资源。
HTML5: <source>
HTML4: <param>
<summary> 标签包含 details 元素的标题，”details” 元素用于描述有关文档或文档片段的详细信息。”summary” 元素应该是 “details” 元素的第一个子元素。
HTML5: <details><summary>HTML 5</summary>This document teaches you everything you have to learn about HTML 5.</details>
HTML4: none
<time> 标签定义日期或时间，或者两者。
HTML5: <time></time>
HTML4: <span></span>
<video> 标签定义视频，比如电影片段或其他视频流。
HTML5: <video src="movie.ogg" controls="controls">您的浏览器不支持 video 标签。</video>
HTML4:<object type="video/ogg" data="movie.ogv"><param name="src" value="movie.ogv"></object>

3.html5新表单预览：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>m</title>
<style>
</style>
</head>
<body>
<h2>新表单类型</h2>
<p>
 <p style="color:#09F;">input type=color</p>
    <p>color 类型用来选取颜色，它提供了一个颜色选取器，值为 16 进制符号，如：#ff0000。目前只在 Opera 和 Blackberry 浏览器中支持。</p>
    <input type="color" />
</p>
<p>
 <p style="color:#09F;">input type=date</p>
    <P>date 类型是一个日期选择器，有了这个就不需要用 JavaScript 编写日历控件了，非常方便。</P>
    <input type="date" name="date" />
</p>
<p>
 <p style="color:#09F;">input type=datetime</p>
    <P>datetime 类型是用来输入 UTC 日期和时间的文本框，而 datetime-local 类型是用来输入本地日期和时间的。它们与 date 类型的区别是后面多了一个时间框和“UTC”。</P>
    <input type="datetime" name="datetime" />
</p>
<p>
 <p style="color:#09F;">input type=datetime-local</p>
   
    <input type="datetime-local" name="datetime-local" />
</p>
<p>
 <p style="color:#09F;">input type=month</p>
     <P>month 类型是月份选择器，它的值为：年-月，如：2012-01；week 类型是周选择器，它的值为：年-W周数，如：2011-W02。</P>
   
    <input type="month" name="month" />
</p>
<p>
 <p style="color:#09F;">input type=week</p>
    <input type="week" name="week" />
</p>
<p>
 <p style="color:#09F;">input type=time</p>
    <P>time 类型是时间文本框，可以手动输入或用右边上线箭头控制。显示效果可以查看 datetime-local 效果的右边。</P>
    <input type="time" name="time" />
</p>
<p>
 <p style="color:#09F;">input type=email</p>
    <P>email 类型用来输入 E-mail 地址，它会验证文本框内的内容是否为合法的 E-mail 地址。 url 类型是用来输入 url 地址的，它会验证 url 地址是否合法。</P>
    <input type="email" name="email" />
</p>
<p>
 <p style="color:#09F;">input type=url</p>
    <input type="url" name="url" />
</p>
<p>
 <p style="color:#09F;">input type=number</p>
    <P>number 类型是专门用来输入数字的，并且在提交时会检验是否为数字。number 类型有 max、min 和 step 属性。max 是允许的最大值，min 是允许的最小值，step 是间隔。设置了这些属性后，如果手动填入的数字不符合这些属性条件，将不能提交。 range 类型是一个数字滑动条。它与 number 类型功能类似，也有 max、min 和 step 属性，在 Opera 中，可以用左右方向键控制。range 类型自身没有一个明显的“数值”表示当前值，但可以使用 output 输出当前值。</P>
    <input type="number" name="number" />
</p>
<p>
 <p style="color:#09F;">input type= range</p>
    <input type=" range" name=" range" />
</p>
<p>
 <p style="color:#09F;">input type= tel</p>
    <p>tel 类型是用来输入电话号码的，它没有特殊的验证规则，不强制输入数字，因为各个国家、地区的电话号码不一样，但可以根据具体情况用 pattern 属性来验证。
在 HTML 5 中，除了新增 input 元素的类型外，还新增了一些表单元素，如：datalist、keygen、output 等。</p>
    <input type=" tel" name=" tel" />
</p>
<p>
 <p style="color:#09F;">input type= datalist</p>
    <P>datalist 元素是用来辅助表单中文本框输入的，它本身是隐藏的，与表单文本框的“list”属性绑定，即将“list”属性值设置为 datalist 元素的 id 值。绑定成功后，当输入内容时，datalist 元素以列表的形式显示在文本框的底部，提示输入字符的内容。</P>
    <input type="text" list="work" name="work"/>
    <datalist id="work">
     <option>111</option>
        <option>222</option>
        <option>3333</option>
    </datalist>
</p>
<p>
 <p style="color:#09F;">input type= keygen</p>
    <p>keygen 用于生成页面的密钥。一般情况下，如果表单中使用了该元素，在表单提交时，该元素将生成一对密钥：一个保存在客户端，称为私密钥（Private Key）；另一个发送至服务器，由服务器进行保存，称为公密钥（Public Key），公密钥可以用于客户端证书的验证。</p>
    <input type=" keygen" name=" keygen" />
</p>
<p>
 <p style="color:#09F;">input type= output</p>
    <p>output 元素用于显示各种不同类型表单元素的内容，如输入的值、JavaScript 代码执行后的结果等。该元素必须从属于某个表单，或通过属性指定某个表单。为了获取表单的值，需要设置 output 元素的“onFormInput”事件，以便在表单输入框中输入内容是，监测到其中的值。</p>
    <input type=" output" name=" output" />
</p>
<p>
 <p style="color:#09F;">input type= range</p>
    <input type=" range" name=" range" />
</p>
<h2>新表单属性</h2>
<p>
 <p style="color:#09F;">autocomplete</p>
    <P>是否自动填充表单，默认值是 on。有些搜索引擎，如百度、google 等，它们会自动匹配当前热门搜素，所以禁止表单自动填充。此属性原本是 Microsoft 的专有属性，现在 HTML 5 也支持了。</P>
    <input type="text" autocomplete="on"/>
</p>
<p>
 <p style="color:#09F;">autofocus</p>
    <P>自动聚焦。加入这个属性后，页面加载时，光标会自动聚焦到加入了此属性的输入框。比如登录页面，加入此属性后，页面加载后就可以直接输入，而不需要点击鼠标或使用 Tab 键聚焦后再输入。</P>
    <input type="text" autofocus/>
</p>
<p>
 <p style="color:#09F;">form</p>
    <P>HTML 5 之前，表单元素必须在表单里面，如 input 必须在 form 里面，而 HTML 5 出现后，只要加上 form 属性，表单元素可以放到页面的任意位置。</P>
    <form id="aa">
     <input type="reset" value="重置" />
    </form>
    <input type="text" form="aa"/>
</p>
<p>
 <p style="color:#09F;">formnovalidate 和 novalidate</p>
    <P>表单的验证很重要，但有的时候出于某种特殊情况，不需要对表单验证时，可以使用 formnavalidate 或 novalidate，它们都可以不验证提交表单，却别在于：novalidate 用户 form 标签；formnavalidate 用于 submit 或 image 类型的提交按钮。</P>
</p>
<p>
 <p style="color:#09F;">formmethod、formenctype 、formnovalidate 和 formtarget</p>
    <P>这几个属性和 formnovalidate 类似，将这些属性添加到 submit 按钮将会覆盖 fomr 元素对应属性的值或默认值。例如，如果 form 元素中的 method 属性被设置为 post ，则当点击一个特定的按钮时，你可以使用 formmethod=”get” 覆盖它。</P>
</p>
<p>
 <p style="color:#09F;">list</p>
    <P>list 属性规定输入域的 datalist。datalist 是输入域的选项列表。效果可以查看 datalist</P>
    <input type="text" list="work" name="work"/>
    <datalist id="work">
     <option>111</option>
        <option>222</option>
        <option>3333</option>
    </datalist>
</p>
<p>
 <p style="color:#09F;">min、max 和 step 属性</p>
    <P>min、max 和 step 属性用于为包含数字或日期的 input 类型规定限定（约束）。 max 属性规定输入域所允许的最大值；min 属性规定输入域所允许的最小值；step 属性为输入域规定合法的数字间隔（如果 step=”3″，则合法的数是 -3,0,3,6 等）。</P>
    <input type="number" name="number" min="5" value="6" max="7" />
    <input type="number" step="3"/>
</p>
<p>
 <p style="color:#09F;">multiple</p>
    <P>当设置为 true 是，表单可以有多个值，用英文逗号分隔。例如，file 类型的表单中加入此属性后，选择文件时，可以按住 Ctrl 进行多选。</P>
    no<input type="file" />
    yes<input type="file" multiple="multiple" /> 
</p>
<p>
 <p style="color:#09F;">pattern</p>
    <P>使用正则表达式验证 input 元素的内容，和之前用 JavaScript 写正则验证一样，只是把正则表单写在 pattern 的值里。</P>
</p>
<p>
 <p style="color:#09F;">placeholder</p>
    <P>输入框占位符，常用作输入提示，如搜索框。在光标聚焦时，占位符自动消失，不要担心还需要手动删除。</P>
    <input type="text" placeholder="提示" />
</p>
<p>
 <p style="color:#09F;">required</p>
    <P>是否允许为空，加入了这个属性后，表单不允许为空。如果为空，在提交的时候会出现相应的提示，并聚焦到该表单域。上面的那些新增表单类型默认都不会验证是否为空，它们只会验证输入的内容是否合法。</P>
    <form>
    <input type="text" autofocus="autofocus"/>
    <input type="submit" value="ok" />
    </form>
</p>
</body>
</html>

转载于:https://my.oschina.net/tbd/blog/499823