列表

• 有序列表：ol、li

• 无序列表：ul、li

• 定义列表：dl、dt、dd

表格

表格最常见的是下面的元素:

table 表格、tr(table row) 表格中的行、td(table data) 行中的单元格

border-collapse: collapse合并单元格的边框

thead表格的表头、tbody表格的主体、tfoot表格的页脚、caption表格的标题、th表格的表头单元格

单元格的合并

跨列合并: 使用colspan、跨行合并: 使用rowspan

例子：

表单

表单最常见的是下面的元素:

from表单，其他相关元素都是它的后代元素、input单行文本输入框/单（复）选框/按钮等元素、textarea多行文本、select、option下拉选择框、button按钮、label表单元素标题

input

input实现按钮

input结合label:点击lebel就可以激活对应的input变成选中

<div>
  <label for="user">
    用户：<input id="user" type="text">
  </label>
</div>
<div>
  <label for="pwd">
    密码：<input id="pwd" type="password">
  </label>
</div>

单/复选框

<!--radio单选框： 如果name一样，那么两个radio就会互斥-->
<div>
  <label for="male">
    <input type="radio" id="male" name="sex">男
  </label>

  <label for="female">
    <input type="radio" id="female" name="sex">女
  </label>
</div>

<!--checkbox复选框-->
<div>
  <label for="fball">
    <input type="checkbox" id="fball"  name="hobby" value="football">足球
  </label>

  <label for="pball">
    <input type="checkbox" id="pball" name="hobby" value="pingpang">兵乓球
  </label>
</div>

select-option下拉框

<select name="fruits" id="">
  <!--value是提交给服务器的，文本是在页面展示的-->
  <!--selected默认选中-->
  <option value="apple" selected>苹果</option>
  <option value="banana">香蕉</option>
</select>

模拟百度一下

<!--点击按钮会跳转到百度搜索关键字的页面-->
<form action="http://www.baidu.com/s">
  <input type="text" name="wq">
  <button type="submit">百度一下</button>
</form>