表格
- 表格(table)标签:显示表格类数据
- 基本结构标签:
- table: 定义一个表格的区域
- tr: 定义表格的行
- td: 定义表格的单元格,放数据
- th: 定义表格中的表头单元格(文字加粗,居中)
- thead: 定义表头内容
- tbody: 定义主体内容
- tfoot: 定义脚注内容
- caption:定义表格标题,写在table里面
- 语法:
<table> <tr> <td></td> <tr> </table>
- 属性:
- border: 设置表格边框宽度(外边框)
- width: 设置表格宽度
- height: 设置表格高度
- bgcolor: 规定表格背景颜色
- cellpadding: 规定单元的边框与其内容之间的距离
- cellspacing: 规定单元格与单元格之间的距离(一般项目中做细边框效果)
- 注意:
- 在同一行中可以有多个td,td里如果没有数据建议使用 来占位
- table>tr>td 结构固定,必须配合使用
- 快速生成表格:
- table>(tr>td*5)*5: 五行五列
- table>(tr>(td{$})*5)*5: 带有内容(数字)的五行五列
- 表格合并:
- 前提:必须保证有一个标准的表格(去掉结构化标签的表格)
- 属性:
- colspan: 跨列合并(横向),一个单元格占同一行中多个单元格位置
- rowspan: 跨行合并(纵向),一个单元格占同一列中多个单元格位置
- 跨列合并步骤:
- 确定需要合并开始位置加上属性colspan
- 确定需要合并单元格的个数写在colspan的值里
- 删除其后多余的单元格(删除的个数=合并个数-本身单元格)
- 跨行合并步骤
- 确定需要合并开始位置加上属性rowspan
- 确定需要合并单元格的个数写在rowspan值里
- 删除其下多余的单元格
- 注意:
- 必须去掉表格的结构化标签(td)
- 必须保证表格的完整性
- 注意区分colspan与rowspan
表单
- 表单(form)标签:用于采集数据
- 基本组成:
- 表单标签:包括提交数据的url地址和提交方式
- 表单域:包括文本框、复选框等
- 表单按钮:提交按钮,复位按钮,一般按钮
- 基本语法:
<form action=”URL” method=”get|post”> </form>
- 属性:
- action: 表示提交数据的地址(url)后台给定,可以暂时忽略
- method: 表示提交方式
- get(默认值): 会把提交到后台的数据在url地址栏显示(url地址带参数),
- 参数说明:单个参数,?标签name的值=输入的值(默认的value);多个参数,?标签name的值1=输入的值1&标签name的值2=输入的值2,用&符号进行连接
- 特点:安全性低,所有参数会在url地址显示,传输数据量较小
- get(默认值): 会把提交到后台的数据在url地址栏显示(url地址带参数),
- post: url地址不显示参数
- 特点:安全性相对较高,传输数据量比较大
- enctype: 表示提交数据的编码
- application/x-www-form-urlencoded(默认)
- 上传文件时需要设置成:multipart/form-data
- 注意:get和post之间的区别:url是否带参
- 注意:
- 所有的表单域和表单按钮都必须放在form标签里面
- 所有需要提交到后台的数据都必须有name属性
- 表单元素(重点):
- 输入框input(行内元素,单标签)
- 作用: 用于搜集用户信息
- type属性:根据不同的type属性值,输入字段拥有很多种形式
- text: 表示普通文本输入框
- password: 表示密码框,默认带掩码
- submit: 提交按钮
- reset: 重置按钮,并不是清空,回到表单初始状态
- button: 普通按钮,没有任何效果(结合js做点击事件)
- radio: 单选框,同一组数据有相同的name值
- checkbox: 多选框,同一组数据有相同的name值
- file: 文件上传框(上传文件时必须将enctype改成multipart/form-data),提交方式改成post
- hidden: 隐藏域,表示必须提交,又不需要让用户看到的数据
- name属性:表示控件的名称,有名称的标签数据才会提交到后台
- 规范:可以使用英文、数字、下划线,不能以数字开头,建议使用相应输入框的含义来命名(英文)
- 针对radio和checkbox必须是一组相同的name值
- value属性:
- 在text/password上,表示默认的值
- 在按钮上表示按钮的名称
- 单选和多选传到后台的值
- 其他属性:
- placeholder: 输入框提示文字,和value同时存在时显示value
- maxlength: 文本框最大输入长度
- readonly: 只读(不可输入),可以提交到后台
- disabled: 禁用(不可输入),不能提交到后台
- checked: 单选或多选默认选中的
- 下拉框select
- 语法:
<select name=""> <option value=""></option> </select>
- 运用场景:学历,职位,地区选择
- 属性:
- size: 规定下拉框显示多少条信息
- name: 规定下拉列表名称
- multiple: 规定可选择多个选项
- disabled: 禁用
- autofocus: 页面加载后自动获取焦点
- 下拉选项option
- 属性:
- value: 表示提交到后台的数据
- selected: 表示默认选中
- 注意:
- 如果option不给value值,会将标签中的内容提交到后台,一般会指定value值
- select>option 配套使用
- 属性:
- 多行文本域textarea
- 作用: 主要用于输入大量文字信息时使用
- 语法:<textarea></textarea>
- 注意:后期使用width和height来设置宽高,resize:none样式设置不能拖动
- Label标签
- 作用: 主要用于改善鼠标用户的操作
- button标签:使用文本或图像来制作按钮的外观
- button标签在高版本浏览器中默认type类型为submit,在IE6及以下type默认为button,建议使用button时type设置为submit
- 语法:
- 输入框input(行内元素,单标签)
框架
- 活动框架iframe
- 概念:网页上创建包含另一个文档(网页)的内联框架
- 语法:<iframe></iframe>
- 属性:
- src: 表示引入文档的网址
- frameborder: 设置是否显示框架周围的边框
- name: 设置 iframe 的名称,在<a>标签的 taget属性写这个名字会让连接在这个活动框架中打开网页。
- scrolling: 设置是否在iframe中显示滚动条
- 框架集frameset
- 在使用框架集时不需要使用body标签
- 属性
- rows: 表示分行,用”,”隔开
- cols: 表示分列,用”,”隔开
- frame标签
- 属性
- scrolling="yes" 表示是否要显示滚动条,滚动条是竖着的
- noresize="noresize" 表示 不能拖动和缩小。
- 属性