表格标签

用于展示数据，而不是布局页面

表格基本标签

• <table></table>定义表格
• <tr></tr>定义一行
• <td></td>定义单元格
• <th></th>表头单元格标签，会居中加粗显示

表格结构标签

• 表格很长时，为了更好地表示语义，可以将表格分割成表格头部和表格主体两大部分
• 表格头部
  • <thead></thead>
  • 内部必须有<tr>标签，一般位于第一行
  • 注意与<th>区分，<th>是一格， <thead>是一行
• 表格主体
  • <tbody></tbody>

合并单元格

• 方式
  • 跨行合并：rowspan="合并单元格个数"，在最上侧单元格写
  • 跨列合并：colspan="合并单元格个数"，在最左侧单元格写
• 合并单元格三个步骤
  • 确定是跨行还是跨列
  • 往最上侧/最左侧单元格中添加代码，例如<td colspan="2"></td>
  • 删除多余的单元格（从这里来看，与其说是合并不如说是扩大）

列表标签

表格用来显示数据，列表用来布局

无序列表（常用）

• 列表使用<ul></ul>定义，列表项使用<li></li>定义
• 列表项之间没有顺序，都是并列的
• <ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的
• <li></li>是一个容器，可以容纳所有元素
• 无序列表会带有自己的样式属性（小黑圆点），可以使用CSS来设置
  • 例如list-style:none;去掉<li></li>前面的小圆点（css）

有序列表

• 列表使用<ol></ol>定义，列表项使用<li></li>定义
• 以数字排序
• 其余大致与无序列表相同

自定义列表

• 不常用，略过

表单标签

作用：收集用户信息

表单域

• 表单域是一个包含表单元素的区域
• <form></form>标签用于定义表单域，以实现用户信息的收集和传递，<form>会把它范围内的表单元素信息提交给服务器
• 常用属性
  • action，属性值为url地址，用于指定接受并处理表单数据的服务器程序的url地址
  • method，属性值为get/post，用于设置表单数据的提交方式
  • name，用于指定表单的名称，以区分同一个页面中的多个表单域

表单控件/表单元素

<input/>输入 （常用）

• 单标签
• 属性
  • 必需属性type，属性值不同可指定不同的控件类型，例如
    • text，文本，默认宽度为20个字符 （常用）
    • hidden，定义隐藏的输入字段
    • password，密码，该字段中的字符被掩码 （常用）
    • radio，单选按钮，多个单选按钮必须有相同的name属性才能实现多选一（常用）
    • checkbox，复选框（多选框） （常用）
    • button，按钮，多数情况下，用于通过javascript启动脚本 （常用）
    • submit，提交按钮，提交按钮会把表单数据发送到服务器
    • reset，重置按钮
    • file，定义输入字段和“浏览”按钮，供文件上传
  • 可选属性name
  • value，规定input元素的值
  • 注意
    • name和value是每个表单元素都有的属性，主要给后台人员使用
    • 单选按钮或复选框要有相同的name值
  • checked，默认勾选单选按钮和复选框，checkd="checked"或checked
  • maxlength，规定输入字段中字符的最大长度（较少使用）
  • placeholder （常用）
    • placeholder 属性是 HTML5 中的新属性
    • 用来提示用户该输入什么
    • 该提示会在输入字段为空时显示，并会在字段获得焦点时消失
    • placeholder 属性适用于以下的 <input> 类型：text, search, url, telephone, email 以及 password
    • 语法<input placeholder="text">

<label></label>标签 （常用）

• 可扩大表单元素的点击范围，用于提升用户体验
• 用法：绑定一个表单元素，当点击标签内的文本时，浏览器就会自动将光标聚焦于对应的表单元素上
• 例如<label for="sex">男</label> <input type="radio" name="sex" id="sex" />
• label的for值对应input的id，label双标签包围住要定义的内容

<select></select>下拉表单

• <option></option>定义选项
• 为<option>定义selected="selected"时，当前项即为默认选中项

<textarea></textarea>文本域标签

• 用于定义多行文本输入