常用的CSS属性
Id:用于为HTML元素指定一个唯一标识
<br>:插入一个换行,该标签可以指定id、class、style等核心属性
<hr>:定义水平线,该标签可以指定id、class、style等核心属性,还可以指定onclick等各种事件的属性。
<span>:与<div>基本相似,区别是该定义的节默认不会换行。该标签可以指定和<div>相同的属性。
<b>:定义粗文本。该标签可以指定id、class、style等核心属性,还可以指定onclick等各种事件属性。
<i>:定义斜体文本。该标签可以指定id、class、style等核心属性,还可以指定onclick等各种事件属性。d
<em>:定义强调文本,实际效果与斜体文本差不多。该标签可以指定id、class、style等核心属性,还可以指定onclick等各种事件属性。
<strong>:定义粗体文本。与<b>标签的作用和用法基本相同。使用strong标签代表重要文本
<sup>:定义上标文本。该标签可以指定id、class、style等核心属性,还可以指定onclick等各种事件属性。
<sub>:定义下标文本。该标签可以指定id、class、style等核心属性,还可以指定onclick等各种事件属性。
<bdo>:定义文本显示的方向。该标签可以指定id、class、style等核心属性,还可以指定onclick等各种事件属性。
<ul>:定义无序列表。该元素可以指定id、style、class等属性,还可以指定onclick等事件属性。该元素只能包含<li.../>子元素。
<ol>:定义有序列表。该元素可以指定id、style、class等属性,还可以指定onclick等事件属性。该元素只能包含<li.../>子元素。
<li>:定义列表项目。该元素可以指定id、style、class等属性,还可以指定onclick等事件属性。该元素里可以包含与<div.../>完全类似的内容，因此可以包含较多类型的子元素。
<dl>:也用于定义列表,该元素只能包含<dt.../>和<dd.../>两种子元素。该元素可以指定id、style、class等属性，还可以指定onclick等事件属性。
<dt>:定义标题列表项。该元素可以指定id、style、class等属性,还可以指定onclick等事件属性。
图像相关的属性
<src>:该属性指定图片文件所在的位置,该属性值既可以是相对路径,也可以是绝对路径。
alt:该属性指定一段文本,该文本将作为该图片的提示信息。
height:指定该图片的高度,该属性值可以是百分比,也可以是像素值
width:指定该图片的宽度,该属性值可以是百分比,也可以是像素值
href:用于确定该区域所链接的资源
alert:该属性指定一段文本,该文本将作为该图片的提示信息
table:用于定义表格
width:指定表格的宽度,该属性值既可以是像素值,也可以是百分比
<caption>:用于定义表格标题,该元素只能包含文本、图片、超链接、文本格式化元素和表单控件元素等
<tr>:定义表格行,该元素只能包含<td.../>或者<th.../>两种元素,该元素可以指定id、style、class等核心属性,还可以指定onclick等事件属性。
input元素
<input.../>元素是表单控件元素中功能最丰富的,如下几种输入元素都是通过<input.../>元素生成的。
单行文本框:指定<input.../>元素的type属性为text即可。
密码输入框:指定<input.../>元素的type属性为password即可。
隐藏域:指定<input.../>元素的type属性为hidden即可。
单选框:指定<input.../>元素的type属性为radio即可。
复选框:指定<input.../>元素的type属性为checkbox即可。
图像域:指定<input.../>元素的type属性为image即可。当type=“image”时,可以为<input.../>元素指定的width和height两个属性。
文件上传域:指定<input.../>元素的type属性为file即可。
提交、重设、无动作按钮:分别指定<input.../>元素的type属性为submit、reset、button即可。
注意:上面这些表单控件中,单行文本框、密码输入框都用于接收用户输入,而隐藏域不能接收用户输入,也不能生产可视化部分,它用于提交额外的请求参数,请求参数的值就是该隐藏域的value属性值,因此定义隐藏域的同时应指定value的属性值。
单选框、复选框不能接收用户输入,因此定义它们的同时也会指定value的属性值,用于设置它们所对应的请求参数值.对于单选框、复选框而言,当它们被勾选后,它们才会生成对应的请求参数。
文件上传域会生成一个单行文本框和一个"浏览"按钮,该文件上传域允许用户浏览本地磁盘文件,并将文件上传到服务器。
图像域和提交按钮的作用基本一样,单击它们都会导致表单被提交,区别是图像域是一个图像按钮。
重设按钮的作用是清空表单内用户的输入,将表单所在表单控件的值恢复到初始状态。
无动作按钮,看它的名称就知道,它只是一个按钮,在默认情况下,单击该按钮对表单不会有任何作用,通常我们可以为该按钮编写JavaScript脚本来响应它的单击、双击等事件,
<input.../>元素可以指定id、style、class等核心属性,也可以指定onclick等事件属性,还可以指定onfocus、onblur等焦点事件属性。除此之外,还可以指定如下几个属性。
checked:设置单选框、复选框初始状态是否处于选中状态,该属性值只能是checked,表示初始即被选中。只有当type属性值checkbox或radio时才可指定该属性。
disabled:设置首次加载时禁用次元素。该属性只能是disabled,表示该元素被禁用,则该元素无法获得输入焦点、无法选中、无法再其中输入文本,无法响应鼠标单击、双击等事件。当type="hidden"时不能指定该属性。
maxlength:该属性值是一个数字,指定文本框中所允许输入的最大字符数。
readonly:指定该文本框内的值不允许用户修改(可以使用JavaScript脚本修改)
size:该属性值是一个数字,指定该元素的宽度。当type="hidden"时不能指定该属性。
src:指定图像域所显示图像的URL,只有当type="image"时才可指定该属性.
HTML5新添加的input元素属性(type)
color:<input.../>元素生成一个颜色选择器。当用户在颜色选择器中选中指定颜色后,该文本框内自动显示用户选中的颜色,该文本框的value为该颜色的值,形如#xxxxxx的颜色值。
date:让<input>元素生成一个日期选择器。
time:让<input.../>元素生成一个时间选择器。
datetime:让<input.../>元素生成一个UTC日期、时间选择器。
datetime-local:让<input.../>元素生成一个本地日期、时间选择器。
week:让<input.../>元素生成一个供用户选择第几周的文本框。
month:让<input.../>元素生成一个月份选择器。
email:让<input.../>元素生成一个E-mail输入框。浏览器将会自动检查该文本框的value,如果用户在该文本框内输入的内容不符合E-mail格式,浏览器将不会允许提交表单,并自动生成提示。当指定type="email"时,<input.../>元素可指定如下属性。multiple:该属性的值可以是multiple或省略属性值。如果指定了该属性值,这表明该文本内允许输入多个E-mail地址。
tel:让<input.../>元素生成一个只能输入电话号码的文本框。但这种类型的文本框并没有提供额外的要求,也就是用户完全可以向type="tel"的文本框内输入任意字符串。浏览器并不会执行太多额外的检查。
url:让<input.../>元素生成一个URL输入框。浏览器将会自动检查该文本框的value,如果用户在该文本框内输入的内容不符合URL格式,浏览器将会不允许提交表单,并自动生成提示。
number:让<input.../>元素生成一个只能输入数字的文本框。
range:让<input.../>元素生成一个托动条,通过托动条使得用户只能输入指定范围、指定步长的值。当指定文本框的type="range"时,该文本框还可以指定如下3个属性:min:指定该拖动条的最小值。max:指定该拖动条的最大值。step:指定该拖动条的步长。
search:让<input.../>元素生成一个专门用户输入搜索关键字的文本框。这种类型的文本框与type="text"文本框并没有太大的区别。
HTML5新增的表单控件
<output>表单控件,该元素用于显示输出,比如计算结果或脚本输出。<output.../>元素必须属于某个表单,也就是说,该元素要么定义在表单内部,要么为它指定form属性。<output.../>元素除了可以指定id、style、class、form等属性之外,还可以指定如下属性。for:该属性指定该元素将会显示哪个元素的值。该属性值应该是其他元素的id.(与其他表单控件不同的是,<output.../>所生产的表单控件并不会生成请求参数,它只是用于显示输出。)
HTML5为type="file"的<input.../>元素添加了如下两个属性。
accept:该属性控制允许上传的文件类型。该属性值为一个或多个MIME类型字符串。多个MIME类型字符串之间应以逗号分隔。
multiple:该属性是否允许选择多个文件。
JavaScript可以通过files属性访问type="file"的<input.../>元素生成的文件上传域内的所有文件,该属性返回一个FileList对象,FileList对象相当于一个数组,开发者可以使用类似于数组的方法来访问该数组内的每个file对象。
File对象是一个JavaScript对象,JavaScript可以通过该对象获取用户浏览的所有文件的信息。
File对象包含如下常用属性:
name:返回该File对象对应的文件的文件名,不包括文件路径部分。
type:返回该File对象对应的文件MIME类型字符串。
size:返回该File对象对应的文件的大小。
FileReader读取文件内容
readAsText(file,encoding):以文本文件的方式来读取该文件,其中encoding参数指定读取该文件时所用的字符集,该参数的默认值是UTF-8。readAsBinaryString(file):以二进制方式来读取该文件。通过这种方式可以读取文件内容的二进制数据,这样就可以通过Ajax把数据上传到服务器。readAsDataURL(file):以DataURL方式来读取文件。这种方式也可以用于读取二进制文件,只是这种方式将会采用base64方式把文件内容编码成DataRUL格式的字符串。
abort():停止读取
FileReader的所有readXxx()方法都是异步方法,这些方法都不会直接返回读取的文件内容,程序必须以事件监听的方式来获取读取的结果。FileReader提供了如下事件来监听读取过程。
onloadstart:FileReader开始读取数据时触发该事件指定的函数。
onprogress:FileReader正在读取数据时触发该事件指定的函数。
onload:FileReader成功读取数据后触发该属性事件的函数。
onloadend:FileReader读取数据完成后触发该事件指定的函数,无论读取成功还是读取失败都将触发该事件指定的函数。
onerror:FileReader读取失败时触发该事件指定的函数。
为了获取成功读取文件后的文件内容,可以通过为onload属性绑定事件监听器来实现。在onload属性指定的事件监听函数中,程序代码可以通过FileReader的result属性访问读取文件的结果。
<button>按钮
<button.../>元素可以指定id、style、class等核心属性,还可以指定onclick等事件响应属性。除此之外,还可以指定如下几个属性。
disabled:指定是否禁用此按钮。该属性值只能是disabled,或者省略属性值。
name:指定该按钮的唯一名称。该属性值与id属性值保持一致。
type:指定该按钮属于哪种按钮,该属性值只能是button、reset或submit其中之一。
value:指定该按钮的初始值。此值可通过脚本进行修改。
列表框和下拉菜单
<select.../>元素用于创建列表框或下拉菜单,该元素必须和<option.../>元素结合使用,每个<option.../>元素代表一个列表项或菜单项。与其他表单控件不同的是,<select.../>元素本身并不能指定value属性,列表框或下拉菜单控件对应的参数值由<option.../>元素来生成,当用户选中了多个列表项或菜单项后,这些列表项或菜单的value值将作为该<select...>元素所对应的请求参数值。
<select.../>元素可以指定id、style、class等核心属性,该元素仅可以指定onchange事件属性,当该列表框或下拉列表项内的选中选项发生该改变时,触发onchange事件。
disabled:设置禁用该列表框和下拉菜单,该属性的值只能是disabled或省略属性值。
multiple:设置该列表框和下拉菜单是否允许多选,该属性的值只能是multiple,即表示允许多选。一旦设置允许多选,该属性的值只能是multiple,即表示允许多选。一旦设置允许多选,<select.../>元素就会自动生成列表框。
size:指定该列表框内可同时显示多个列表项。一旦指定该属性,<select.../>元素就会自动生成列表框.
selected:指定该列表项初始状态是否处于被选中状态。该属性的值只能是selected.
label:指定该选项组标签。这个属性必填。
disabled:设置禁用该选项组里的所有选项。该属性值只能是disabled或省略该属性值。
<textarea>定义文本域:可以指定id、style、class等核心属性,还可以指定onclick等事件属性。由于textarea的特殊性,它可以接收用户输入,用户可以选中文本域内的文本,所以还可以指定onselect、onchange两个属性,分别用于响应文本域内文本被选中、文本被修改事件。cols:指定文本域的宽度,该属性必填。rows:指定文本域的高度,该属性必填。disable:指定禁用该文本域。该属性值只能是disabled,当此文本域首次加载时禁用此文本域。readonly:指定该文本域只读。该属性只能是readonly。
autofocus属性:这是一个非常常用的属性.当某个表单控件增加该属性后,浏览器打开该页面时该组件就会自动获得焦点。(由于打开页面时只能有一个控件获得焦点,因此整个页面上最多只能有一个表单控件可设置该属性。)
placeholder属性:该属性的值就是单行文本框、多行文本域显示的提示信息。
list属性:HTML表单控件没有类似于ComboBox的组件(相当于文本框与下拉菜单结合的组件,该组件即允许用户输入,也允许用户通过下拉菜单进行选择)。HTML5的list属性弥补了这个不足,list属性的值应该是一个<datalist.../>组件的id.也就是说list属性必须与<datalist.../>元素结合使用。
<datalist.../>:该元素相当于一个"看不见"的<select.../>元素,用于生成一个隐藏的下拉菜单。<datalist.../>所能包含的子元素与<select.../>元素完全相同。该元素用于与指定了list属性的<input.../>元素结合使用。当双击指定了list属性的文本框时,该文本框会将显示<datalist.../>生成的下拉菜单。
autocomplete属性:该属性主要与list属性结合使用,当为文本框指定了有效的list属性之后,该文本框下面总会显示一个下拉菜单供用户选择。单在有些时候,可能处于安全性考虑,开发者不想让某些用户看到这个下拉菜单,则可以通过autocomplete属性来实现。该属性支持如下属性值:on:打开autocomplete,文本框下方会显示下拉菜单。off:关闭autocomplete,文本框下方不会显示下拉菜单。(注意目前只有opera的最新版本才支持该属性。)
HTML5新增的客户端校验
新增的校验属性
required:该属性指定该表单控件必须填写。该属性的值必须是required或完全省略属性值。
pattern:该属性指定该表单控件的值必须符合指定的正则表达式。该属性的值必须是一个合法的正则表达式。
调用checkValidity方法进行校验
如果表单对象调用checkValidity()方法返回true,则表明该表单内的所有表单控件都有效。只要有任意一个表单控件不能提供输入校验,表单对象的checkValidity()方法就会返回false。
如果表单对象调用checkValidity()方法返回true,则表明该表单控件可以通过输入校验;否则返回false。
自定义错误提示
调用setCustomValidity()方法来指定错误提示。
关闭校验
为<form.../>元素增加novalidate属性,该属性的值要么是novalidate,要么省略属性值。
为type=''submit''的<input.../>或<button.../>元素设置formnovalidate属性,该属性的值要么是novalidate,要么省略属性值。
注意:第一种方式将会直接关闭表单的输入校验功能,无论通过哪个按钮提交该表单,该表单都不会执行输入校验;第二种方式则由指定的提交按钮来关闭表单的输入校验,只有当用户通过了formnovalidate属性的按钮提交表单时才会关闭表单的输入校验。
大小相关的属性
height:用于设置目标对象的高度。该属性值可以是任何有效的距离值。
max-height:用于设置目标对象的最大高度。如果此属性的值小于min-height属性的值,将会被自动转换为min-height属性的值。该属性值可以是任何有效的距离值。
min-height:用于设置目标对象的最小高度。如果此属性的值大于max-height属性的值,将会被自动转换为max-height属性的值。该属性值可以是任何有效的距离值。
width:用于设置目标对象的宽度。该属性值可以是任何有效的距离值。
max-width:用于设置目标对象的最大宽度。如果此属性的值小于min-width属性的值,将会被自动转换为min-width属性的值。该属性值可以是任何有效的距离值。
min-width:用于设置目标对象的最小宽度。如果此属性的值大于max-width属性的值,将会被自动转换为max-width属性的值。该属性值可以是任何有效的距离值。
CSS3新增了box-sizing属性来设置width、height控制区域的宽度和高度。
content-box:设置width、height控制元素的内容区宽度和高度。
padding-box:设置width、height控制元素的内容区加内补丁区的宽度和高度。
border-box:设置width、height控制元素的内容区加内补丁区在家边框区的宽度和高度。
CSS3 新增的resize属性,该属性用于指定是否允许用户通过拖动来改变元素的大小。
none:设置不允许用户通过拖动来该边组件的大小。
both:设置不允许用户通过拖动来改变组件的高度和宽度。
horizontal:设置不允许用户通过拖动来改变组件的宽度。
vertical:设置不允许用户通过拖动来改变组件的高度。
inherit:继承自父元素的resize属性值。这是默认值。
轮廓相关属性
outline:这是一个复合属性,可全面设置目标对象轮廓的颜色、线型、线宽三个属性。
outline-color:用于设置组件的轮廓颜色。
outline-style:用于设置组件的轮廓线型。该属性支持的属性值有none、dotted、dashed、solid、double、groove、ridge、inset、outset,这些属性值与前面介绍边框线型时各属性值的意义完全相同。
outline-width:用于设置目标组件的轮廓宽度。
outline-offset:用于设置目标组件的轮廓偏移距(就是轮廓与边框的距离)。
控制光标的属性
通过CSS的cursor属性可以改变光标在目标组件上的形状。
all-scroll:代表十字箭头光标。
col-resize:代表水平拖动线光标。
crosshair:代表十字线光标。
move:代表移动十字箭头光标。
help:代表带问号的箭头光标。
no-drop:代表禁止光标。
not-allowed:代表禁止光标。
pointer:代表手型光标。
progress:代表带沙漏的箭头光标。
row-resize:代表垂直拖动线光标。
text:代表文本编辑光标。通常就是一个大写的I字光标。
vertical-text:代表垂直文本编辑光标。通常就是大写的I字光标旋转90度。
wait:代表沙漏光标。
*-resize:代表可在各种方向上拖动的光标。支持w-resize、s-resize、n-resize、e-resize、ne-resize、sw-resize、ne-resize、se-resize、nw-resize等各种属性值,其中n代表向上方向,s代表向下方向,e代表向右方向,w代表向左方向。
