HTML标签的基础知识2

一、表格

（1）表格属性

（2）表格结构

<table border="n" width=" " height=" " cellspacing=" " cellpadding="">
<caption align="left | right |top |bottom" valign="top |bottom |middle |baseline">标题</caption>
<tr>
    <th>表头1</th>
    ......
    <th>表头n</th>
</tr>
<tr>
    <th>表项1</th>
    ......
    <th>表项n</th>
</tr>
.......
<tr>
    <th>表项1</th>
    ......
    <th>表项n</th>
</tr>
</table>

解释：
caption标签：可以为每个表格指定唯一的标题
border:表格边框的宽度
height：表格边框的高度
cellspacing：单元格之间的空白
cellpadding:单元格边框与内容之间的空白
valign：数据单元垂直对齐方式

（3）表格跨行、跨列

1. 结构：
   跨行

    <table>
       <tr>
           <td rowspan="所跨的行数">内容</td>
       </tr>
   </table>

跨列

    <table>
       <tr>
           <td colspan="所跨的列数">内容</td>
       </tr>
   </table>

2. 示例
   

（4）表格分组标签

1. 描述：表格数据分组标签：< thead>定义表格的头部 。< tbody>定义表格的主体 。< tfoot>定义表格的脚步
2. 结构

    <table>
       <caption></caption>
       <thead>
           <tr>
               <th></th>
           </tr>
       </thead>
       <tbody>
           <tr>
               <td></td>
           </tr>
       </tbody>
       <tfoot>
           <tr>
               <td></td>
           </tr>
       </tfoot>
   </table>

二、表单

（1）常见的表单元素

< form>	定义供用户输入的表单
< input>	规定用户可输入的字段，例如，文本域、密码域、复选框、单选框、按钮
< textarea>	定义文本域 (一个多行的输入控件)
< label>	定义了 元素的标签，一般为输入标题
< fieldset>	定义了一组相关的表单元素，并使用外框包含起来
< legend>	定义了 元素的标题
< select>	定义了下拉选项列表
< optgroup>	定义选项组
< option>	定义下拉列表中的选项
< button>	定义一个点击按钮
< datalist>	指定一个预先定义的输入控件选项列表
< keygen>	定义了表单的密钥对生成器字段
< output>	定义一个计算结果

详细解说

（1）表单标签

< from name=“表单名” action=“URL” method=“get |post”>< /from>
解说：
action ：将表单发送到那个地方
method :指定表单处理数据的方法

(2）< input>标签

< input type=“表项类型” name=“表项名称” value=" " size=" " maxlength=" " />
解说：

size	文本框显示的长度，以字符为单位
maxlength	文本框中最多可以输入多少个子数
value	文本框的默认值

< input>表项类型

描述：主要有9中类型：text、submit、reset、password、checkbox、radio、image、hidden、file

1. 文本域
   < input type=“text” name=" 文本域名">
   如：
   

2. 密码域
   < input type=“password” name=" 密码域名">
   如：
   

3. 提交按钮
   < input type=“submit” name=" 按钮名">
   如：
   

4. 重置按钮
   < input type=“reset” name=" 按钮名">
   如：
   

5. 普通按钮
   < input type=button" name=" 按钮名">

6. 图片按钮
   < input type=“image” src=“图片路径”>

7. 隐藏域
   < input type=“hidden” name=“隐藏域名” value=“提交值”>

8. 单选按钮
   < input type=“radio” name=“单选钮名” value=“提交值” checked=“checked”>
   解说：checked="checked"表示默认选中
   

9. 复选框
   < input type=“checkbox” name=“复选钮名” value=“提交值” checked=“checked”>
   解说：checked="checked"表示默认选中
   

10. 文件域
    < input type=“file” name=“文件域名” >

多行文本域

<textarea name="文本域名" rows="行数" cols="列数">
        发表你的言论
</textarea>

代码示例：

下拉框

<select size=" " name=" 下拉列表名字" multiple="multiple" >
  <option value=""></option>
  <option value=""></option>
</select>

解说：multiple=“multiple” 表示可以从列表中多选