HTML——列表、表格、表单

目录

一、列表

1、无序列表（ul）

2、有序列表（ol）

二、表格

三、表单

1、表单

2、表单的提交

---

一、列表

1、无序列表（ul）

    
    
列表标题一
    
列表标题二
    
列表标题三

2、有序列表（ol）

    
    
列表标题一
    
列表标题二
    
列表标题三

二、表格

标签：表示一个表。 

表示一行

列

border-collapse 设置表格的边线合并，如：border-collapse:collapse;

姓名	年龄
张三	18

三、表单

1、表单

表单用于搜集不同类型的用户输入(用户输入的数据)，然后可以把用户数据提交到web服务器 。

表单相关标签的使用

• 标签 表示表单标签，定义整体的表单区域

• 标签 表示表单元素的文字标注标签，定义文字标注

• 标签 表示表单元素的用户输入标签，定义不同类型的用户输入数据方式

  • type属性

    • type="text" 定义单行文本输入框

    • type="password" 定义密码输入框

    • type="radio" 定义单选框

    • type="checkbox" 定义复选框

    • type="file" 定义上传文件

    • type="submit" 定义提交按钮

    • type="reset" 定义重置按钮

    • type="button" 定义一个普通按钮

• </code>标签 表示表单元素的多行文本输入框标签 定义多行文本输入框</p> </li> <li> <p><code><select></code>标签 表示表单元素的下拉列表标签 定义下拉列表</p> </li> <li> <p><code><option></code>标签 与<code><select></code>标签配合，定义下拉列表中的选项</p> </li> </ul> <pre><code class="language-html"><form> <p> <label>姓名：</label><input type="text"> </p> <p> <label>密码：</label><input type="password"> </p> <p> <label>性别：</label> <input type="radio"> 男 <input type="radio"> 女 </p> <p> <label>爱好：</label> <input type="checkbox"> 唱歌 <input type="checkbox"> 跑步 <input type="checkbox"> 游泳 </p> <p> <label>照片：</label> <input type="file"> </p> <p> <label>个人描述：</label> <textarea>

  籍贯： 北京 上海 广州 深圳

  2、表单的提交

  标签 表示表单标签，定义整体的表单区域。

  • action属性 设置表单数据提交地址

  • method属性 设置表单提交的方式，一般有“GET”方式和“POST”方式, 不区分大小写。

  • name属性 设置表单元素的名称，该名称是提交数据时的参数名

  • value属性 设置表单元素的值，该值是提交数据时参数名所对应的值

  
     
  
         姓名：
     
     
  
         密码：
     
     
  
         性别：
          男
          女
     
     
  
         爱好：
          唱歌
          跑步
          游泳
     
     
  
         照片：
         
     
     
  
         个人描述：
         
     
     
  
         籍贯：
         
             北京
             上海
             广州
             深圳