HTML入门（2）

表单标签

• form标签
  

基本控件

• 单行文本框标签

1. type属性被设置为"text"的input元素
2. value属性表示填好的值
3. placeholder属性表示提示
4. disabled属性表示锁死，用户改不了
   
   

• 单选按钮
  type属性为radio的input元素
  

1. 互斥的单选按钮name值需要相同
2. 如果加上checked属性，会默认选中
   

• label标签
  将文字和单选按钮进行绑定
  此时点女也可以
  
  注意不能有for
  如果是html4
  
  需要设置id 和 for
• 复选框
  type属性为checkbox
  
  
• 密码框
  type属性为password
  和文本框相同但是显示会被屏蔽
  
  
• 下拉框菜单
  select标签表示下拉菜单 ，option是他内部的选项
  
  
• 多行文本框
  textarea标签表示多行文本框
  rows和cols属性，用于定义行数和列数
  
  
• 三种按钮
  也是input标签
  
  
  

input小总结

html5中的新增type

• 颜色选择
  
  
• 日期选择
  
  
• 时间选择
  
  
• 电子邮件
  
  
• 必填
  
  
• 数字
  
  
• 拖拽条
  
  
• 搜索框
  
  
• 网址
  
  
• datalist控件
  可以为输入框提供一些备选内容，当输入相同字会有提示
  
  

表格标签

• border属性
  边框
  
  
  默认是双线表格
  如果给css加上boder-collapse:collapse;
  则会变成单线表格
• caption属性
  表示表格标题
  和tr是同一级的
  
  
• th标签
  标题小格
  是在tr里面的，默认样式加粗
  
  
• colspan属性
  设置td或者th的列跨度（横着跨）
  
  代码如下

<!--学习列跨度-->
<table width="400" border="1">
    <tr>
        <td colspan="2">a</td>
        <td>b</td>
        <td>c</td>
    </tr>
    <tr>
        <td>d</td>
        <td colspan="3">e</td>
    </tr>
    <tr>
        <td>f</td>
        <td>g</td>
        <td>h</td>
        <td>i</td>
    </tr>
</table>

• rowspan属性
  用来设置td或者th行跨度
  
  需要搞清楚每行有几个小格
  要实现这个效果代码如下
  
• 同时拥有这两个属性
  
  代码如下
  
• thead
  表头
• tbody
  表核心内容
• tfoot
  表脚