HTML-表格-列表-结构标记-表单

1.表格
  1.表格语法
    1.标记
      1.表格
        <table></table>
      2.行
        <tr></tr>--table row
      3.单元格/列
        <td></td>--table data
      练习：
        1.创建一个4行4列的表格
 2.在table标记中嵌套tr
 3.在tr中嵌套td
    2.属性
      1.table属性
        border:表格边框
 width:宽度
 height:高度
 align:设置表格的水平对齐方式
       left/center/right
        bgcolor:设置表格的背景颜色
 cellpadding:设置单元格的内边距（内容与td之间的间距）
 cellspacing:设置单元格外边距（td边框外的间距）
      练习：
  在练习一的基础上将表格的样式设置如下:
     1.设置表格尺寸为400*400px
     2.设置背景颜色为orange
     3.设置表格水平居中对齐
     4.设置内边距为5px
     5.设置外边距为10px
      2.tr属性
        1.align 设置当前行内容的水平对齐方式
                 left/center/right
        2.valign 设置当前行内容的垂直对齐方式
          top/middle/bottom
 3.bgcolor 设置当前行的背景颜色
 练习：在练习二的基础上
   1.设置第二行的数据靠右对齐
   2.第二行背景颜色为紫色purple
   3.设置第三行垂直方向靠上对齐 
      3.td属性
        width:宽度
 height:高度
 align:水平对齐方式
 valign:垂直对齐方式
 bgcolor:背景颜色
 colspan:跨列
 rowspan:跨行
      4.表格的复杂应用
        1.行分组
   可以将连续的几个行，划分到一个组中，并进行统一管理
   1.表头行
     表格中最上面一行进行分组的话，可以放在表头行中。
     <thead></thead>
   2.表主体行
     表格中将若干行放在tbody中，进行统一管理
     <tbody></tbody>
   3.表尾行
            将表格中最后一行进行分组管理的话，可以放在表尾行中。
     <tfoot></tfoot>
 2.不规则表格使用
   1.跨列
     colspan 从指定单元格位置处开始，横向向右合并几个单元格（包含自己），被合并掉的单元格要删除。
   2.跨行
     rowspan 从指定单元格位置处开始，纵向向下合并几个单元格（包含自己），被合并掉的单元格要删除。
   注意：
    如果表格进行了分组管理，不能将不同组设置跨行操作。
      5.可选标记
        1.表格标题
   <caption></caption>
   如果设置表格标题，则必须将<caption>放于<table>下的第一个子元素位置处。
 2.行/列标题
   <th></th>所有的td都可以用th取代
      6.表格嵌套
        表格的嵌套，在td中取嵌套另一个表格
2.列表
  1.列表的作用
    按照从上到下（从左到右）的方式来显示所有的数据，并且可以在数据前增加显示的标识。
  2.列表组成
    1.列表都是由"列表类型"和"列表项"来组成。
      1.列表类型
        有序列表：<ol></ol>--order list
 无序列表：<ul></ul>--unorder list
      2.列表项
        用于展示数据（嵌套在列表类型中）
 <li></li>--list item
        练习：
   创建有序列表，4个列表项，每个列表项中分别写上四大名著的名称
    2.列表属性
      1.有序列表
        1.type 指定列表标识的类型。
   取值：
      1 数字，默认值
      a 小写字母
      A 大写字母
      I 大写罗马数字
      i 小写罗马数字
       2.start 指定起始编号从第 几 位置开始排序。
     2.无序列表
       1.type 指定列表的标识类型
         取值：
     1.disc 实心圆点
     2.circle 空心圆
     3.square 实心方块
     4.none 不显示标识
    3.列表嵌套
      在一个列表项（li）中去嵌套另一个列表.
      语法：
        <ol>
   <li>
     <ul>
        <li>内容</li>
        <li>内容</li>
     </ul>
   </li>
 </ol>
  3.定义列表
    1.什么是定义列表
      定义列表常用于给出一类事物或对名词的解释说明。
    2.语法
      1.<dl></dl> 表示定义列表
      2.<dt></dt> 表示定义列表中要解释说明的名词
      3.<dd></dd> 表示定义列表中对名词解释的内容
      <dl>
         <dt>名词</dt>
  <dd>解释名词的具体内容</dd>
      </dl>
      使用场合：图文混排时使用
3.结构标记
  1.结构标记的作用
    用于描述整个网页的结构（取代div做布局）
    提升标记的语义性和可读性。
  2.常用的结构标记
    1.<header></header>
      作用：定义网页或某部分内容的头部。
    2.<nav></nav>
      作用：定义网页的导航链接部分。
    3.<section><section>
      作用：定义网页主体内容。
    4.<aside></aside>
      作用：定义页面中侧边栏的信息，靠近边缘。
    5.<footer></footer>
      作用：定义网页中偏底部的内容，比如：备案号，解释说明，联系方式等。
    6.<article></article>
      作用：定义与文字相关的内容，如：论坛帖子，微博条目，用户评论等。
4.表单
 1.作用
  1.提供可以与用户交互的可视化控件（用户名和密码输入框，登录按钮等）
  2.收集用户信息并提交给服务器
 2.表单的组成部分
   1.前端部分
     表单控件，与用户交互的可视化控件
   2.服务器端部分
     对收集的数据进行提交（提交数据的处理）
   3.表单
     标记：<form></form>
     属性：
        1.action
   作用：定义表单被提交时发生的动作，通常定义的是服务器上处理程序的地址（url）,默认提交给本页
 2.method
   作用：指定表单数据的提交方式
   取值：
      1.get(默认值)
        1.明文提交，待提交的数据会显示在浏览器的地址栏中。
        2.安全性不高
        3.提交数据有大小限制，限制2KB
        4.向服务器要数据时使用get方式
      2.post
        1.隐式提交，提交的数据不会显示在地址栏中。
        2.安全性较高
        3.提交数据无大小限制
        4.要传递数据给服务器时使用。

3.delete 一般禁用
      4.put 一般禁用

3.enctype
   作用：指定表单数据的编码方式，允许将什么样的数据提交给服务器。
   取值：
     1.application/x-www-form-urlencoded
      默认值，允许将任意的字符提交给服务器（文件无法提交）
     2.multipart/form-data
       允许将文件提交给服务器
     3.text/plain
       只能将普通文本提交给服务器
   4.表单控件
     能够与用户进行交互的可视化控件。
     1.分类
       1.input 元素
       2.textarea-多行文本域元素
       3.select和option-选项框元素
       4.其它元素
     2.input元素
       1.作用
         在页面中提供各种各样的输入控件。如：文本框，密码框，单选按钮，复选框...
       2.语法
         1.标记<input>或<input/>
  2.属性：
    1.type 指定创建输入控件的类型
      ex:
      type="text"
      type="password"
    2.name 为控件定义名称，服务器端使用（必须值）
    3.value 控件的值，服务器端使用
    4.disabled 禁用控件，不能操作并且数据也不能提交给服务器。
      无值属性，只要出现在标记中，就是禁用。
 3.详解
   1.文本框和密码框
     文本框：<input type="text">
     密码框：<input type="password">
     属性：
       1.maxlength
         指定限制输入的字符数
       2.readonly
         只读，只能看，不能改，但允许被提交。
  无值属性，直接将属性放在标记中。
       3.placeholder
         占位符，即默认显示在控件上的文本。
   2.按钮
     1.提交按钮
       <input type="submit">
       功能：将表单中的数据，提交给服务器程序使用
     2.重置按钮
       <input type="reset">
       功能：将表单中的数据恢复到初试化状态。
     3.普通按钮
       <input type="button">
       没有功能
      注意：
        属性：value 定义按钮上显示的文字。
          3.单选按钮和复习框
     单选按钮：<input type="radio">
     复选框：<input type="checkbox">
     属性：
        name 除了定义控件的名称之外，还能起到分组的作用。
        checked 设置默认被选中，无值属性。