HTML基础控件介绍.docx

HTML 基础控件介绍1.input标签input 标签用于搜集用户信息。根据不同的 type 属性值，输入字段拥有很多种形式。可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。type属性如下：type=text：文本区域　　　　readonly属性：是否只读。password：密码区域，输入的文本以*展示checkbox：复选框　　　　checked属性：是否选中；radio：单选框；　　　　name属性：指定多个单选框的在一个区域里进行单选操作reset：重置当前form表单里所有标签到初始化状态(如清除文本区域内容)sumit：提交当前form表单信息到指定页面button：普通按钮　　　　value属性：button按钮显示的文本file：文件选择标签hide：隐藏区域，可以把一些不展示给用户，而自己使用的信息存放于此image：图片区域　　　　src属性：指定图片存放的路径；　　　　title属性：鼠标移到图上显示的文本；　　　　alt：图片加载失败或关闭时，显示的文本；?2.select标签?select元素可创建单选或多选菜单。类似于winform的combox或listbox属性介绍：size：默认展示的下拉列表尺寸。默认的为combox样式；大于1时，就是listbox样式。multiple：多项选择,按住Ctrl+左键进行多选。子项：optgroup:选择项的类别，不能被选中。　　　　label属性：类别展示的名称　　　　title属性：鼠标移到选择项上去，要展示的信息option:可选的项目　　　　vlaue属性：选择项具体的名称　　　　title属性：鼠标移到选择项上去，要展示的信息代码示例：h3select标签/h3select id=province multiple=multiple size=6 optgroup label=直辖市/optgroupoption value=bj title=北京市北京/optionoption value=sh上海/optionoptgroup label=省市/optgroupoption value=zj浙江/optionoption value=fj福建/option/select效果图：?2.2 获取选中项的value??1$(#province).val() 　　3.textarea标签?textarea：多行文本区域可以通过 cols 和 rows 属性来设定 textarea 的尺寸属性：rows：表示显示的行数cols：表示显示的列数readonly：是否只读??4.label标签?相当于一个展示文本框。重要的属性：for：关联对应的控件id；当点击此label标签时，绑定id的控件会获取焦点；tabletrtdlabel for=username姓名：/label/tdtdinput type=text id=username//td/trtrtdlabel for=userpwd密码：/label/tdtdinput type=password id=userpwd //td/tr/table?5.fieldset标签?类似于winform中的groupBox控件。子项：legend/legend：表示抬头的名称。h3fieldset标签/h3fieldset style=width:130px legend性别/legendinput type=radio name=sex value=boy /男input type=radio name=sex value=girl /女/fieldset??6.ul、ol、li 列表标签?ul：unordered list （无序列表）ol：ordered list ?（有序列表））li：list item （列表项目），基于上面2个列表子项目。代码示例：ul type=circleliul1/liliul2/liliul3/li/ulol type=1lili1/lilili2/lilili3/li/ol属性说明：type：定义了li 标签前面的符号样式。ul：type 有：circle 空心圆，disc 实心圆，square 实心正方形， none ：前面无符号;ol：type 有：1 ：表示有序的1,2,3； a ：表示有序的a，b，c；i ：罗马数字i,ii,iii；虽然还可以定义为：circle、disc、square、none但现实都为1,2,3等序列；??HTML 页面源代码布局介绍此介绍以google首页源代码截图为例：从上到下依次介绍：1.!DOCTYPE html此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。?XHTML规范：必须小写，有开始结束标