Day30、列表、表格与表单

1、列表

        1.1、什么是列表

                列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷地获得相应的信息

        1.2、列表的分类

                1）无序列表

                2）有序列表

                3）定义列表

        1.3、列表的应用

                1.3.1、无序列表

                特征：1）没有顺序，每个<li>标签独占一行（块元素）

                        2）默认<li>标签项前面有个实心小圆点

                        3）一般用于无序类型的列表，如导航、侧边栏新闻、有规律的图文组合模块等

                1.3.2、有序列表

                特征：1）有顺序，每个<li>标签独占一行（块元素）

                        2）默认<li>标签项前面有顺序标记

                        3）一般用于排序类型的列表，如试卷、问卷选项等

                1.3.3、定义列表

                特征：1）没有顺序，每个<dt>标签、<dd>标签独占一行（块元素）

                        2）默认没有标记

                        3）一般用于一个标题下有一个或多个列表项的情况

                1.3.4、列表对比

 

2、表格

        2.1、为什么使用表格

                1）简单通用

                2）结构稳定

        2.2、基本结构

                1）单元格

                2）行

                3）列

        2.3、表格的基本语法

                1）语法

<table>
    <tr>
         <td>第1个单元格的内容</td>
         <td>第2个单元格的内容</td>
        ……
    </tr>
    <tr>
         <td>第1个单元格的内容</td>
         <td>第2个单元格的内容</td>
        ……
    </tr>
</table>

                2）大致效果

         2.4、表格的跨列

                1）语法

<table>
  <tr>
    <td colspan="n">单元格内容</td>
  </tr>
  <tr>
    <td>单元格内容</td>
     ……
  </tr>
   ......
</table>

                 2）大致效果

        2.5、表格的跨行

                1）语法

<table >
  <tr>
    <td rowspan="n">&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>

                 2）大致效果

        2.6、表格的跨行和跨列

                1）语法

……
<tr>
        <td colspan="3">学生成绩</td>
</tr>
<tr>
        <td rowspan="2">张三</td>
        <td>语文</td>
        <td>98</td>
</tr>
……

                2）大致效果

3、表单

        3.1、 表单语法

<form  method="post" action="result.html">
   <p>  名字：<input name="name" type="text" >  </p>
   <p>  密码：<input name="pass" type="password" >  </p>
   <p>
      <input type="submit" name="Button" value="提交"/>
      <input type="reset" name="Reset" value="重填“/> 
   </p>
</form>

                1）post：规定如何发送表单数据 常用值：get  | post

                2）result.html：表示向何处发送表单数据

        3.2、表单元素格式

                1）语法

                2）图解

 

         3.3、文本框

 

        3.4、 密码框

 

         3.5、单选按钮

 

        3.6、 复选框

 

        3.7、 列表框

 

        3.8、 按钮

 

         3.9、多行文本域

 

        3.10、 文件域

4、 表单的高级应用

        4.1、隐藏域

 

         4.2、只读和禁用

 

         4.3、表单元素的标注

                1）增强鼠标的可用性

                2）自动将焦点转移到与该标注相关的表单元素上