Html5新增属性详解课件.ppt

Html5新增属性详解王国军itwanggj@新增与链接相关的属性新增与表单相关的属性新增的其他属性废除的属性新增的属性和废除的属性media属性:为<a>与<area>元素增加media属性,该属性规定目标URL是为什么类型的媒介/设备进行优化的,只能在href属性存在时使用;sizes属性:为<link>元素增加了新属性sizes,该属性可以与icon元素结合使用(通过rel属性),该属性指定关联图标(icon元素)的大小;target属性:为<base>元素增加了target属性,主要目的是保持与<a>元素的一致性,同时target元素在web应用程序中,尤其是在与iframe结合使用时,是非常有用的。(1)placeholder属性当用户还没有输入值的时候,input输入框中可以通过placeholder属性向用户显示描述性说明或提示信息,除普通的text文本框之外,email、number、url等其他类型的输入框也都支持placeholder属性。在Firefox等支持placeholder属性的浏览器中,提示文字会以浅灰色的样式显示在输入框中,当页面失去焦点切换到输入框中,或者输入框中有值时,提示信息会消失。<inputtype=“text”palceholder=“writeme”>(2)plete属性来确定是否应该保存输入值以备将来使用,例如不保存的代码:plete属性应该用来保护敏感的用户数据,避免本地浏览器对它们进行不安全地存储,plete属性,可以指定on、off与不指定三个值。其中,不指定时,使用浏览器的默认值;属性为on时,可以显示指定候补输入的数据列表。<inputtype=“text”name=“mr”plete=“off”><inputtype=“text”name=“mr”plete=“on”list=“mrs”>前端开发视觉设计(3)autofocus属性给文本框、选择框或按钮控件加上该属性,当画面打开时,该控件自动获得光标焦点,一个页面中只能有一个控件具有该属性。注:只有当一个页面是以使用某个控件为主要目的时,才对该控价使用autofocus属性,例如搜索页中的搜索文本框。<inputtype=“text”autofocus>前端开发视觉设计(4)list属性在html5中,为单行文本框添加一个list属性,该属性的值为某个datalist元素的id。datalist元素也是html5新增元素,该元素类似于选择框(select),但当用户想要设置的值不在选择列表之内时,允许其自行输入。该元素本身并不显示,而是当文本框获得焦点时以提示输入的方式显示。Text:<inputtype=“text”name=“mr”list=“mr”><datalistid=“greetings”><optionvalue=“下拉列表1”>下拉列表1</option><optionvalue=“下拉列表2”>下拉列表2</option><optionvalue=“下拉列表3”>下拉列表3</option></datalist>(5)min和max属性通过设置min和max属性,可以将range输入框的数值范围限定在最小值和最大值之间,这两个属性既可以只设置一个,可以同时设置两个,也可以都不设置,输入控件会根据设置的参数对值范围作出相应调整。例如,创建一个表示型大小的range控件,值范围从0%--100%。<inputid=“confidence”name=“mr”type=“range”min=“0”max=“100”value=“10”>//默认min为0,max为100前端开发视觉设计(6)step属性对于输入型控件,设置其step属性能够制定输入值递增或递减的梯度,例如按如下方式表示型大小range控件的step属性设置为5:设置完成后,控件可接受的输入值只能是初始值与5的倍数之和,也就是说只能输入0、5、10...100,至于是输入框的形式还是滑动条的形式,则由浏览器来决定。step属性的默认值取决于控件的类型,对于range控件,step默认值为1,为配合step属性,html5引入了stepUp和stepDown两个函数对其进行控制,这两个函数的作用分别是根据step属性的值来增加或减少控件的值。<inputid=“confidence”name=“mr”type=“range”min=“0”max=“100”step=“5”value=“20”>前端开发视觉设计(7)required属性一旦为某输入型控件设置了required属性,那么此项为必填项,否则无法提交表单,以文本输入框为例,要将其设置为必填项,按照如下方式添加required属性