HTML对象简介

### HTML对象简介 #### 一、HTML常用对象 在网页设计与开发中，HTML对象扮演着极其重要的角色，它们构成了网页的基本元素。以下是一些常用的HTML对象及其简要介绍： - **Form**: 表单对象，用于收集用户输入的数据。通过`<form>`标签定义表单，通常包含多个子对象如`input`、`textarea`等。 - **Frame**: 框架对象，用于在一个页面中显示多个文档。`<frame>`标签定义了单个框架。 - **Input**: 输入对象，用于获取用户的输入。常见的类型有文本框(`type="text"`), 密码框(`type="password"`), 单选按钮(`type="radio"`), 复选框(`type="checkbox"`), 提交按钮(`type="submit"`)等。 - **Select**: 下拉列表对象，用于提供一组选项供用户选择。通过`<select>`标签定义，并且可以包含多个`<option>`标签来定义可选项目。 - **CheckBox**: 复选框对象，允许用户选择一个或多个选项。 - **Div**: 分区对象，用于将内容分组并应用样式。`<div>`标签定义了一个区块级别的容器。 - **Table**: 表格对象，用于展示数据的行和列。`<table>`标签定义了表格，而`<tr>`表示行，`<td>`表示单元格。 - **Button**: 按钮对象，通常用于触发某些操作，如提交表单或执行JavaScript函数。 #### 二、HTML对象常用属性 每个HTML对象都有自己的属性集，这些属性决定了对象的行为和外观。以下列举了一些常用的属性： - **Name**: 名称属性，用于标识表单控件。 - **Id**: 唯一标识符属性，用于CSS选择器或JavaScript脚本中的唯一引用。 - **Width/Height**: 尺寸属性，用于指定对象的宽度和高度。 - **Value**: 值属性，用于设置或获取对象的值。 - **Style**: 样式属性，用于定义CSS样式。 - **TabIndex**: 制定访问顺序的属性，定义了当页面获得焦点时对象的顺序。 - **ReadOnly**: 只读属性，如果设置为`true`，则该字段不可编辑。 - **Type**: 类型属性，用于指定对象的类型，如`text`, `password`, `radio`等。 - **Disabled**: 禁用属性，如果设置为`true`，则对象被禁用，无法交互。 - **InnerHTML/OuterHTML**: 内容属性，`innerHTML`获取或设置元素内部的HTML，`outerHTML`获取或设置元素本身的HTML以及它的所有后代。 #### 三、HTML的常用方法 HTML对象也支持一些内置的方法，这些方法可以用来控制对象的行为或响应用户交互。常见的方法包括： - **Focus()**: 将焦点设置到对象上。 - **Blur()**: 移除对象的焦点。 - **Click()**: 触发点击事件。 #### 四、HTML常用的事件 事件是浏览器响应特定用户动作或其他动作的方式。以下是常见的HTML事件： - **Onload**: 当页面加载完毕后触发。 - **Onblur**: 当元素失去焦点时触发。 - **Onchange**: 当元素的内容发生改变时触发。 - **Onclick**: 当用户点击元素时触发。 - **Onfocus**: 当元素获得焦点时触发。 - **Onkeydown/Onkeypress/Onkeyup**: 键盘按键相关的事件，分别在按下键、按下并释放键、释放键时触发。 - **Onresize**: 当窗口大小发生变化时触发。 #### 示例代码 以下是一些示例代码，展示了如何使用上述HTML对象： - **Form**: `<form name="form1" method="post" action=""></form>` - **Table**: `<table width="599" height="89" border="1" cellpadding="2" cellspacing="3"><tr><td>&nbsp;</td><td>&nbsp;</td></tr></table>` - **Input**: `<input name="" type="text" onBlur="" onSelect="" onChange="" onClick="">` - **Select**: `<select name="select"><option value="01">增值税</option></select>` - **Div**: `<div name="" style="visibility='hidden'"></div>` - **Button**: `<button name="" onClick="">test</button>` #### window事件 - **事件对象**: `window.event`，用于获取事件的相关信息。 - **事件键盘码**: `event.keyCode`，用于获取按键的编码。 - **事件源**: `event.srcElement`，用于获取触发事件的对象。 这些HTML对象、属性、方法和事件是构建交互式网页的基础，掌握它们对于任何Web开发者来说都是至关重要的。通过合理地组合使用这些元素，可以创建出功能强大、用户友好的网页应用。