表格

表格（table）标签：显示表格类数据
基本结构标签：
1. table：定义一个表格的区域
2. tr：定义表格的行
3. td：定义表格的单元格，放数据
4. th：定义表格中的表头单元格（文字加粗，居中）
5. thead：定义表头内容
6. tbody：定义主体内容
7. tfoot：定义脚注内容
8. caption：定义表格标题，写在table里面

语法：

<table>
    <tr>
        <td></td>
    <tr>
</table>

属性：
1. border：设置表格边框宽度（外边框）
2. width：设置表格宽度
3. height：设置表格高度
4. bgcolor: 规定表格背景颜色
5. cellpadding：规定单元的边框与其内容之间的距离
6. cellspacing：规定单元格与单元格之间的距离（一般项目中做细边框效果）
注意：
1. 在同一行中可以有多个td，td里如果没有数据建议使用   来占位
2. table>tr>td 结构固定，必须配合使用
3. 快速生成表格：
  1. table>(tr>td*5)*5: 五行五列
  2. table>(tr>(td{$})*5)*5: 带有内容（数字）的五行五列
表格合并：
1. 前提：必须保证有一个标准的表格（去掉结构化标签的表格）
2. 属性：
  1. colspan：跨列合并（横向），一个单元格占同一行中多个单元格位置
  2. rowspan：跨行合并（纵向），一个单元格占同一列中多个单元格位置
3. 跨列合并步骤：
  1. 确定需要合并开始位置加上属性colspan
  2. 确定需要合并单元格的个数写在colspan的值里
  3. 删除其后多余的单元格（删除的个数=合并个数-本身单元格）
4. 跨行合并步骤
  1. 确定需要合并开始位置加上属性rowspan
  2. 确定需要合并单元格的个数写在rowspan值里
  3. 删除其下多余的单元格
5. 注意：
  1. 必须去掉表格的结构化标签（td）
  2. 必须保证表格的完整性
  3. 注意区分colspan与rowspan

表单

表单（form）标签：用于采集数据
基本组成：
1. 表单标签：包括提交数据的url地址和提交方式
2. 表单域：包括文本框、复选框等
3. 表单按钮：提交按钮，复位按钮，一般按钮

基本语法：

<form action=”URL” method=”get|post”>

</form>

属性：
1. action：表示提交数据的地址（url）后台给定，可以暂时忽略
2. method：表示提交方式
  1. get（默认值）：会把提交到后台的数据在url地址栏显示（url地址带参数），
    1. 参数说明：单个参数，?标签name的值=输入的值(默认的value)；多个参数，?标签name的值1=输入的值1&标签name的值2=输入的值2，用&符号进行连接
    2. 特点：安全性低，所有参数会在url地址显示，传输数据量较小
3. post： url地址不显示参数
  1. 特点：安全性相对较高，传输数据量比较大
  2. enctype：表示提交数据的编码
    1. application/x-www-form-urlencoded（默认）
    2. 上传文件时需要设置成：multipart/form-data
  3. 注意：get和post之间的区别：url是否带参
注意：
1. 所有的表单域和表单按钮都必须放在form标签里面
2. 所有需要提交到后台的数据都必须有name属性
表单元素（重点）：
1. 输入框input（行内元素，单标签）
  1. 作用：用于搜集用户信息
  2. type属性：根据不同的type属性值，输入字段拥有很多种形式
    1. text：表示普通文本输入框
    2. password：表示密码框，默认带掩码
    3. submit：提交按钮
    4. reset：重置按钮，并不是清空，回到表单初始状态
    5. button：普通按钮，没有任何效果（结合js做点击事件）
    6. radio：单选框，同一组数据有相同的name值
    7. checkbox：多选框，同一组数据有相同的name值
    8. file：文件上传框（上传文件时必须将enctype改成multipart/form-data），提交方式改成post
    9. hidden：隐藏域，表示必须提交，又不需要让用户看到的数据
  3. name属性：表示控件的名称，有名称的标签数据才会提交到后台
    1. 规范：可以使用英文、数字、下划线，不能以数字开头，建议使用相应输入框的含义来命名（英文）
    2. 针对radio和checkbox必须是一组相同的name值
  4. value属性：
    1. 在text/password上，表示默认的值
    2. 在按钮上表示按钮的名称
    3. 单选和多选传到后台的值
  5. 其他属性：
    1. placeholder：输入框提示文字，和value同时存在时显示value
    2. maxlength：文本框最大输入长度
    3. readonly：只读（不可输入），可以提交到后台
    4. disabled：禁用（不可输入），不能提交到后台
    5. checked：单选或多选默认选中的
2. 下拉框select
  1. 语法：
```
<select name="">
    <option value=""></option>
</select>
```
  2. 运用场景：学历，职位，地区选择
  3. 属性：
    1. size：规定下拉框显示多少条信息
    2. name：规定下拉列表名称
    3. multiple：规定可选择多个选项
    4. disabled：禁用
    5. autofocus：页面加载后自动获取焦点
  4. 下拉选项option
    1. 属性：
      1. value：表示提交到后台的数据
      2. selected：表示默认选中
    2. 注意：
      1. 如果option不给value值，会将标签中的内容提交到后台，一般会指定value值
      2. select>option 配套使用
  5. 多行文本域textarea
    1. 作用：主要用于输入大量文字信息时使用
    2. 语法：<textarea></textarea>
    3. 注意：后期使用width和height来设置宽高，resize：none样式设置不能拖动
  6. Label标签
    1. 作用：主要用于改善鼠标用户的操作
  7. button标签：使用文本或图像来制作按钮的外观
    1. button标签在高版本浏览器中默认type类型为submit，在IE6及以下type默认为button，建议使用button时type设置为submit

框架

活动框架iframe
1. 概念：网页上创建包含另一个文档（网页）的内联框架
2. 语法：<iframe></iframe>
3. 属性：
  1. src：表示引入文档的网址
  2. frameborder：设置是否显示框架周围的边框
  3. name：设置 iframe 的名称，在<a>标签的 taget属性写这个名字会让连接在这个活动框架中打开网页。
  4. scrolling：设置是否在iframe中显示滚动条
框架集frameset
1. 在使用框架集时不需要使用body标签
2. 属性
  1. rows：表示分行，用”,”隔开
  2. cols：表示分列，用”,”隔开
3. frame标签
  1. 属性
    1. scrolling="yes" 表示是否要显示滚动条，滚动条是竖着的
    2. noresize="noresize" 表示不能拖动和缩小。

表格、表单、活动框架学习笔记

表格

表单

框架

猜你喜欢