Html5新增属性介绍.pptx

Html5新增属性介绍王国军itwanggj@163.com新增的属性和废除的属性 新增与链接相关的属性 新增与表单相关的属性 新增的其他属性 废除的属性1.与链接相关的属性media属性：为a与area元素增加media属性，该属性规定目标URL是为什么类型的媒介/设备进行优化的，只能在href属性存在时使用；sizes属性：为link元素增加了新属性sizes，该属性可以与icon元素结合使用（通过rel属性），该属性指定关联图标（icon元素）的大小；target属性：为base元素增加了target属性，主要目的是保持与a元素的一致性，同时target元素在web应用程序中，尤其是在与iframe结合使用时，是非常有用的。2.与表单相关的属性(1)placeholder属性 当用户还没有输入值的时候，input输入框中可以通过placeholder属性向用户显示描述性说明或提示信息，除普通的text文本框之外，email、number、url等其他类型的输入框也都支持placeholder属性。 在Firefox等支持placeholder属性的浏览器中，提示文字会以浅灰色的样式显示在输入框中，当页面失去焦点切换到输入框中，或者输入框中有值时，提示信息会消失。input type=“text” palceholder=“write me”前端开发 视觉设计 在不支持placeholder的浏览器中运行时，该属性会被忽略，以输入框的默认方式显示，同时在输入框输入内容之后，也不会显示。前端开发 视觉设计(2)autocomplete属性 浏览器通过autocomplete属性来确定是否应该保存输入值以备将来使用，例如不保存的代码： autocomplete属性应该用来保护敏感的用户数据，避免本地浏览器对它们进行不安全地存储，对于autocomplete属性，可以指定on、off与不指定三个值。其中，不指定时，使用浏览器的默认值；属性为on时，可以显示指定候补输入的数据列表。input type=“text” name=“mr” autocomplete=“ off”input type=“text” name=“mr” autocomplete=“ on” list=“mrs”(3)autofocus属性 给文本框、选择框或按钮控件加上该属性，当画面打开时，该控件自动获得光标焦点，一个页面中只能有一个控件具有该属性。 注：只有当一个页面是以使用某个控件为主要目的时，才对该控价使用autofocus属性，例如搜索页中的搜索文本框。input type=“text” 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前端开发 视觉设计(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(6)step属性 对于输入型控件，设置其step属性能够制定输入值递增或递减的梯度，例如按如下方式表示型大小range控件的step属性设置为5： 设置完成后，控件可接受的输入值只能是初始值与5的倍数之和，也就是说只能输入0、5、10...100，至于是输入框的形式还是滑动条的形式，则由浏览器来决定。 step属性的默认值取决于控件的类型，对于range控件，step默认值为1，为配合step属性，html5引入了stepUp和stepDown两个函数对其进行控制，这两个函数的作用分别是根据step属性的值来增加或减少控件的值。input id=“confidence” name=“mr” t