Html5新增属性详解

<input type=“date” name=“date1” value=“2012-09-25”>
(11)time类型 time类型的input元素是一种专门用来输入时间的文本框，并且在提交时会对输 入时间的有效性进行检查。它的外观取决于浏览器，可能是简单的文本框，只在提交
时检查是否在其中输入有效的时间，也可以以时钟形式出现。
在Firefox等支持placeholder属性的浏览器中，提示文字会以浅灰色的样式显示 在输入框中，当页面失去焦点切换到输入框中，或者输入框中有值时，提示信息会消 失。
(2)autocomplete属性
浏览器通过autocomplete属性来确定是否应该保存输入值以备将来使用，例如不
保存的代码：
视觉设计 前端开发 设置完成后，控件可接受的输入值只能是初始值与5的倍数之和，也就是说只能 输入0、5、10...100，至于是输入框的形式还是滑动条的形式，则由浏览器来决定。 step属性的默认值取决于控件的类型，对于range控件，step默认值为1，为配合 step属性，html5引入了stepUp和stepDown两个函数对其进行控制，这两个函数的作 用分别是根据step属性的值来增加或减少控件的值。
div、input、p、hn …
body table 视觉设计 tbody、thead th、td tr col
使用CSS样式表替代
使用CSS样式表替代 使用CSS样式表替代 前端开发 使用CSS样式表替代 使用CSS样式表替代 使用CSS样式表替代 使用CSS样式表替代
<input type=“text ” name=“mr ” autocomplete=“ off ”>
autocomplete属性应该用来保护敏感的用户数据，避免本地浏览器对它们进行不 安全地存储，对于autocomplete属性，可以指定on、off与不指定三个值。 其中，不指定时，使用浏览器的默认值；属性为on时，可以显示指定候补输入的数据 列表。
(17)range输入类型 range类型的input元素是一种只允许输入一段范围内数值的文本框，它具有min 属性和max属性，可以设定最小值和最大值（默认为0和100），它还具有step属性，
可以指定每次拖动的布幅。
<input type=“range” name=“range1” value=“25” min=“0” max=“100” step=“5”> 前端开发 视觉设计
Html4中使用的属性
使用该属性的元素
Html5中的替代方案
align
link、text、bgcolor … align、bgcolor、border… align、char、height … bgcolor、width、height... align、bgcolor、char … align、char、width …
视觉设计
前端开发
注：只有当一个页面是以使用某个控件为主要目的时，才对该控价使用autofocus属 性，例如搜索页中的搜索文本框。
(4)list属性 在html5中，为单行文本框添加一个list属性，该属性的值为某个datalist元素 的id。datalist元素也是html5新增元素，该元素类似于选择框（select），但当用 户想要设置的值不在选择列表之内时，允许其自行输入。该元素本身并不显示，而是 当文本框获得焦点时以提示输入的方式显示。 视觉设计 前端开发
Text：<input type=“text ” name=“mr ” list=“mr ”> <datalist id=“greetings”> <option value=“下拉列表1”>下拉列表1</option> <option value=“下拉列表2”>下拉列表2</option> <option value=“下拉列表3”>下拉列表3</option> </datalist>
Html5新增属性详解
王国军
itwanggj@
新增的属性和废除的属性
新增与链接相关的属性
新增与表单相关的属性 新增的其他属性 废除的属性
1.与链接相关的属性
media属性：为<a>与<area>元素增加media属性，该属性规定目标URL是为什么类型的
媒介/设备进行优化的，只能在href属性存在时使用；
(7)required属性 一旦为某输入型控件设置了required属性，那么此项为必填项，否则无法提交表 单，以文本输入框为例，要将其设置为必填项，按照如下方式添加required属性即可：
<input type=“text ” id=“ firstname” name=“前端开发 mr ” required> 视觉设计
(18)search输入类型 search类型的input元素是一种专门用来输入搜索关键词的文本框。search类型 和text类型仅仅在外观上有区别，同时外观可以通过css样式表来改写。
(19)tel输入类型 tel类型的input元素被设计为用来输入电话号码的专用文本框，它没有特殊的校 验规则，它甚至不强调只输入数字，因为很多电话号码常常带有额外的字符，例如： 12-89564752，但是在实际的开发过程中，可以通过pattern属性来指定对输入的电话 号码格式进行验证。
<input type=“week” name=“week1” value=“2012-w39”>
(16)number输入类型 number类型的input元素是一种专门用来输入数字的文本框，并且在提交时会检 查其中的内容是不是数字，它与min、max、step属性能很好地协作。
<input type=“number ” name=“number1” value=“55” min=“10” max=“100” step=“5”> 前端开发 视觉设计
required属性。
<input type=“email” id=“email” value=“mingrisoft@ ”> 视觉设计
前端开发
(9)url输入类型 url类型的input元素是一种专门用来输入url地址的文本框，提交时如果该文本 框的内容不是url地址格式的文字，则不允许提交。
<input type=“time” name=“time1” value=“10:00”>
(12)datetime输入类型 datetime类型的input元素是一种专门用来输入UTC日期和时间的文本框，并且在 提交时会对输入的日期和时间进行有效性检查。
<input type=“datetime” name=“datetime1”>
charset属性：为<meta>元素增加了charset属性，该属性已经被广泛支持，而且为文 档的字符编码的指定提供一种比较良好的方式；
பைடு நூலகம்
type属性与label属性：为<menu>增加两个新的属性type与label，label属性为菜单 定义一个可见的标注，type属性让菜单可以以上下文菜单、工具条、列表等三种形式 显示；
<input type=“url” name=“url1” value=“”>
视觉设计
前端开发
(10)date类型
date输入类型是比较常见的一种元素，我们经常看到网页中要求我们输入的各种 各样的日期，例如生日、购买日期、订票日期等。date类型的input元素以日历的形 式方便用户输入。
(5)min和max属性 通过设置min和max属性，可以将range输入框的数值范围限定在最小值和最大值
之间，这两个属性既可以只设置一个，可以同时设置两个，也可以都不设置，输入控
件会根据设置的参数对值范围作出相应调整。例如，创建一个表示型大小的range控 件，值范围从0%--100%。
<input id=“confidence” name=“mr ” type=“range” min=“0” max=“100” value=“10”> // 默认min为0，max为100
2.与表单相关的属性
(1)placeholder属性 当用户还没有输入值的时候，input输入框中可以通过placeholder属性向用户显 示描述性说明或提示信息，除普通的text文本框之外，email、number、url等其他类 型的输入框也都支持placeholder属性。
<input type=“text ” palceholder =“write me” > 前端开发 视觉设计
sizes属性：为<link>元素增加了新属性sizes，该属性可以与icon元素结合使用（通
过rel属性），该属性指定关联图标（icon元素）的大小；
target属性：为<base>元素增加了target属性，主要目的是保持与<a>元素的一致性， 同时target元素在web应用程序中，尤其是在与iframe结合使用时，是非常有用的。
<input type=“month” name=“month1” value=“2012-09”>
(15)week输入类型 week类型的input元素是一种专门用来输入周号的文本框，并且在提交时会对输 入的周号进行有效性检查。有的浏览器会提供一种辅助输入的日历，可以在该日历中
选取日期，选取完毕文本框中自动显示周号。
<input type=“text ” name=“mr ” autocomplete=“ on” list=“mrs”>
(3)autofocus属性
给文本框、选择框或按钮控件加上该属性，当画面打开时，该控件自动获得光标 焦点，一个页面中只能有一个控件具有该属性。