前端第二天 （序列 表格 表单）

无序列表 ul （重点）
无序列表的各个列表项之间没有顺序级别之分，是并列的。其基本语法格式如下：
 

<ul>  

    <li>列表项 1</li> 

    <li>列表项 2</li>  

    <li>列表项 3</li> 

</ul>

有序列表 ol （了解）

有序列表即为有排列顺序的列表，其各个列表项按照一定的顺序排列定义，有序列 表的基本语法格式如下：

<ol>  
    
     <li>列表项 1</li>  
     <li>列表项 2</li> 
     <li>列表项 3</li>

</ol> 

自定义列表（理解）

定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目 符号。其基本语法如下：

<dl>  
     <dt>名词 1</dt> 
          <dd>名词 1 解释 1</dd> 
          <dd>名词 1 解释 2</dd>  
      <dt>名词 2</dt>  
         <dd>名词 2 解释 1</dd> 
         <dd>名词 2 解释 2</dd> 
</dl> 

创建表格：

<table> <!--用于定义一个表格-->
       <tr>   <!--表示表格中的行-->
          <td>单元格内的文字</td> <!--表示表格中的列 即单元格-->
          <td>单元格内的文字</td> 
          <td>单元格内的文字</td> 
          <td>单元格内的文字</td> 
       </tr> 
       <tr>   
          <td>单元格内的文字</td> 
          <td>单元格内的文字</td>  
          <td>单元格内的文字</td> 
          <td>单元格内的文字</td> 
       </tr> 
 </table>
 <!--这个表格即为两行四列-->

表格属性：

border  设置表格的边框 （默认为零 无边框）

cellspacing  设置单元格与单元格边框之间的空白间距

cellpadding  设置单元格内容与单元格边框之间的空白间距

width  设置表格的宽度

height 设置表格的高度

align 设置表格在网页中的水平对齐方式

表单标签：

表单的目的在于收集用户的信息，在我们网页中， 我们也需要跟用户进行交互，收集用户资料，此时也需要表单。
在 HTML 中，一个完整的表单通常由表单控件（也称为表单元素）、提示信息和 表单域 3 个部分构成。

表单控件：包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、 重置按钮等。

提示信息：一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。

表单域：他相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过他定义处理 表单数据所用程序的 url 地址，以及数据提交到服务器的方法。如果不定义表单域， 表单中的数据就无法传送到后台服务器。

input 控件(重点)

  属性                属性值           描述

                       text               单行文本输入框

                       password      密码输入框

                       radio              单选按钮

  type              checkbox       复选框

                       button            普通按钮

                       submit           提交按钮

                       reset              重置按钮

                       image            图像形式的提交按钮 

                      file                   文件域

   name          自定义            控件名称

   value          自定义             input 默认文本

   size            正整数             input  控件在页面中的显示宽度

checked        checked          定义选择控件默认被选中的选项

maxlength      正整数            控制允许输入的最多字符

 

label  标签（理解）

label 标签为 input 元素定义标注（标签）

<label for="male">Male</label> 
<input type="radio" name="sex" id="male" value="male"> 

用于绑定一个表单元素, 当点击 label 标签的时候, 被绑定的表单元素就会获 得输入焦点。

textarea 控件(文本域)

如果需要输入大量的信息，就需要用到 textarea/textarea 标签。通过 textarea 控 件可以轻松地创建多行文本输入框，其基本语法格式如下：

<textarea cols="每行中的字符数" rows="显示的行数">   文本内容 </textarea> 

下拉菜单  select

<select>  
 
        <option>选项 1</option> 
        <option>选项 2</option> 
        <option>选项 3</option>  
 
</select>

表单域

在 HTML 中，form 标签被用于定义表单域，即创建一个表单，以实现用户信息的 收集和传递，form 中的所有内容都会被提交给服务器。创建表单的基本语法格式 如下

<form action="url 地址" method="提交方式" name="表单名称">   各种表单控件 </form>