实习2

• 表格的使用

  • 创建表格
    table></table>、<tr></tr>、<td></td>，他们是创建表格的基本标签，缺一不可
    1.table 用于定义一个表格
    2.tr 是定义表格中的一行，必须嵌套在table标签内，table中包含几对tr就有几行表格
    3.td 就是单元格，必须嵌套在tr标签内，tr有几个td就表示有几个单元格(就是几列)
  • 表格的属性
    border边框 默认值为0 像素值(px)
    cellspacing 设置单元格和单元格之间的间距 像素
    cellpadding 设置单元格内容和单元格的间距 像素
    width 表格的宽度像素值height表格的高度 像素
    align 设置表格的水平对齐方式 left，center，right
  • 表头标签
    表头一般位于表格的第一行或第一列，其文本加粗居中，即为设置了表头的表格。设置表头非常简单，只需用表头标签<th></th>替代相应的单元格标签<td></td>即可。
  • 表格标题
    表格的标题： caption
    caption 标签必须紧随 table 标签之后。您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上
  • 合并单元格(难点)
  1. 跨行合并：rowspan 跨列合并：colspan
     合并单元格的思想：
     ​ 2. 将多个内容合并的时候，就会有多余的东西，把它删除。 例如 把 3个 td 合并成一个， 那就多余了2个，需要删除。
     ​ 3. 公式： 删除的个数 = 合并的个数 - 1
     4.合并的顺序 先上 先左

• input控件
  type的属性值：text(单行文本输入框)
  password(密码输入框)
  radio(单选按钮)
  checkbox(多选按钮)
  button(普通按钮)
  submit(提交按钮)
  reset(重置按钮)
  image(图像形式的提交按钮)
  file(文件域)
  name(由用户自定义控件的名称)
  value(由用户自定义input控件中的默认值)

size(正整数控件在页面中显示的宽度)
checkedchecked(定义选择控件中默认被选中的项)
maxlength(正整数控件允许输入的最大字符数)

• label标签
  label 标签为 input 元素定义标注（标签）
  作用： 用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点
  如何绑定元素呢？
  for 属性规定 label 与哪个表单元素绑定。

• HTML5新标签与特性
  1993标记语言第一版
  1995 2.0
  1996 3.2 w3c推荐标准
  1999 4.0
  2000 XHTML1.0 相比与html，更严格，扩展了html
  2001 xhtml1.1
  2008 HTML5

• 常用新标签
  w3c 手册中文官网 : http://w3school.com.cn/

• header：定义文档的页眉 头部

• nav：定义导航链接的部分

• footer：定义文档或节的页脚 底部

• article：定义文章。

• section：定义文档中的节（section、区段）

• aside：定义其所处内容之外的内容 侧边

• datalist 标签定义选项列表。请与 input 元素配合使用该元素

• fieldset 元素可将表单内的相关元素分组，打包 legend 搭配使用
  legend:标题

• 新增的input type属性值：
  email输入邮箱格式
  tel输入手机号码格式
  url******输入url格式
  number******输入数字格式
  earch******搜索框（体现语义化）
  range******自由拖动滑块
  time******小时分钟
  date******年月日
  datetime******时间
  month******月年
  week******星期 年

• 总结
  会使用表格 — 掌握常用表单 – html5的新特性