前端开发 之 HTML基础（三）

文章简要：

• 表格
• 表单
• 常用元素

表格

基本结构

表格语法

<table width="value" height="value" border="value" bgcolor="value" cellspacing="value" cellpadding="value">
    <tr>
          <td></td>
          <td></td>
    <tr>
</table>

表格标记

• tr 表示一行
• td 表示一列（一个单元格）

表格属性说明

1. width="表格的宽度"
2. height="表格的高度"
3. border="表格的边框"
4. bgcolor="表格的背景色"
5. cellspacing="单元格与单元格之间的间距"
6. cellpadding="单元格与内容之间的空隙"
7. 对齐方式：align="left/center/right"
8. 合并单元格属性：
   colspan="所要合并的单元格的列数" 合并列
   rowspan="所要合并的单元格的行数" 合并行

表单

作用 —— 用来收集用户的信息

语法结构

<form name="表单名称" method="post/get" action="">
    <!-- 表单域：一般放表单标记 -->
</form>

属性说明

• name 属性定义表单名称
• method 属性定义表单的提交方式
  post 隐式提交
  get 显式提交
• action 属性定义要提交数据的地址

表单域中的表单标记

<u>表单标签类型：</u>input 普通标记；select 下拉列表；textarea 多文本框。

input 普通标记

1）语法

    <input type="" name="" value="" size="" maxlength="" />

2）说明
input 是表单中功能最为丰富的一个标记，使用 input 标记可以创建按钮、文本输入框、选择框等各种输入字段。
name 属性标识表单域的名称，type 属性标识表单域的类型，value 属性定义表单域的值，其他属性根据type 的不同而有所变化。
type 可以是文本输入框 text 、password、复选框 checkbox 、单选框radio 、提交表单 submit 和重置键 reset。
maxlength 控制最多输入的字符数。
size 控制框的宽度。
3）类别

• 文本框

  <input type="text" value="默认值"/>
  

• 密码框

  <input type="password" />
  

• 单选框/单选按钮

  <input type="radio" name="ral" />
  <input type="radio" name="ral" checked="checked" />（默认选中）
  

• 复选框

  <input type="checkbox" name="like" />
  <input type="checkbox" name="like" disabled="disabled" />
    (disabled="disabled":禁用)
    (checked="checked":默认选中)
  

• 提交按钮

  <input type="submit" value="按钮内容" />
  

• 重置按钮

  <input type="reset" value="按钮内容" />
  

select下拉列表

语法

<select name="">
      <option>下拉选项1</option>
      <option>下拉选项2</option>
      ……
</select>

说明
表示下拉列表时，name属性不是必须的

textarea 多文本框

语法

<textarea name="" cols="" rows=""></textarea>

说明
多行文本。rows属性和cols属性用来设置文本输入窗口的高度和宽度，单位是字符。

常用元素

div

语法

<div></div>

说明

<div id="di名" class="class名"></div>
文档区域，文档布局对象

span

语法

<span></span>

说明

文本节点，可以是某一小段文本，也可以是某一个字。