WEb开发之H5+CSS篇

表格

问题1：表格的主要作用？

不是用来布局页面的，而是显示，展示数据的。

表格标签

• table 定义表格的标签 caption 表格标题

• tr 定义表格的行，必须嵌套在table中 th 表格的表头

• td 定义表格中的单元格，必须嵌套在tr中 thead 表格的页眉

• tbody 表格的主体 tfoot 表格的页脚

• col 表格列的属性 colgroup 表格列的组

  colspan 跨列合并

  rowspan 跨行合并

表格属性

属性名 属性值 说明

align left,center,right 表格相对于周围元素的对齐方式

border 1或者“ ” 表格单元是否拥有边框，默认没有

cellpadding px 单元边沿与其内容之间的空白，默认1像素

cellspacing px 单元格之间的空白，默认2像素

width px 表格的宽度

备注：单元格可以添加任何内容

列表

问题2：列表用来干嘛？

用来布局页面的

列表分类：

1. 无序列表

   ul 表示HTML页面中项目的无序列表

   li 列表项

2. 有序列表

   ol 定义有序列表

   li 列表项

3. 自定义列表

   dl 定义描述列表（或定义列表）

   dt 定义项目/名字

   dd 描述每一个项目/名字

表单

为了收集用户输入（信息）

表单的组成

表单域 form （ 定义表单的标签 ）

• action ：url地址
• method ：提交方式
• name ：表单域名称

表单控件（表单元素）

1. input 输入表单元素

   type=“属性值”

   ​ 编号 属性值 描述

   ​ 1 button 可点击按钮（多数情况下，用于通过JavaScript的启动脚本）

   ​ 2 checkbox 复选框

   ​ 3 file 输入字段和“浏览”按钮，供文件上传

   ​ 4 hidden 隐藏的输入字段

   ​ 5 image 图像形式的提交按钮

   ​ 6 password 密码字段（该字段的字符被掩码）

   ​ 7 radio 单选按钮

   ​ 8 reset 重置按钮，重置按钮会清除表单中的所有数据

   ​ 9 submit 提交按钮，提交按钮会把表单数据发送到服务器

   ​ 10 text 单行的输入字段，用户可以在其中输入文本，默认宽度为20字符

   name 表单元素的名字

   value input元素的值

   checked 规定此input元素首次加载时应当被选中

   maxlength 输入字段中字符的最大长度

   placeholder 输入提示信息

   label input元素定义标注

   输入限制

   disabled	规定输入字段应该被禁用。
   max	规定输入字段的最大值。
   maxlength	规定输入字段的最大字符数。
   min	规定输入字段的最小值。
   pattern	规定通过其检查输入值的正则表达式。
   readonly	规定输入字段为只读（无法修改）。
   required	规定输入字段是必需的（必需填写）。
   size	规定输入字段的宽度（以字符计）。
   step	规定输入字段的合法数字间隔。
   value	规定输入字段的默认值。

   ​ 备注： datalist元素为 元素规定预定义选项列表，用户会在他们输入数据时看到预定义选项的下拉列表。 元素的 list 属性必须引用 元素的 id 属性。

2. select下拉表单元素

   option 选项标签

   selected=“selected”默认选中

3. textarea文本域元素

下拉列表表单

表单元素实现注册页面

[橘子github地址：喜欢的记得star哦]

(https://github.com/designbyly/WEB-Development)

每日一言
纸上得来终觉浅，绝知此事要躬行！