• 【第一部分 | HTML】3：表格、列表和表单

    目录

    | 表格

    表格 · 基本语法

    表格 · 属性（了解）

    表格 · 合并单元格

    表格 · 总结

    | 列表

    列表 · 简介

    列表 · 三大列表语法

    列表 · 总结

    | 表单

    表单 · 简介

    表单 · 表单域

    表单 · input

    表单 · input 各属性的使用场景

    表单 · label标签

    表单 · select textarea

    HTML 总结

    本章介绍一下 HTML语言常用的三种元素：表格、列表和表单


    | 表格

    表格 · 基本语法

    基本语法

    表格不是用来布局页面的，是用来展示数据的

     表头标签

     结构标签

    我们可以通过表格结构标签，把表格的代码编写分为 [表头] 和 [表体] 两大部分

     

     

    表格 · 属性（了解）

    今后，表格的 align border width height 等属性都是在CSS中定义的

    需要注意的是： cellpadding cellspacing无法写在CSS中

    • cellpadding：把文字看作一个矩形、其矩形与该单元格之间的距离为cellpadding

    • cellspacing：单元格和单元格之间的距离

     

    表格 · 合并单元格

     

     

     代码示例

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8. head>
    9. <body>
    10.  
    11.     <p>原始表格p>
    12.     <table border="1" cellspacing="0" width="100" height="100">
    13.         <tr>   <td>@td>   <td>@td>   <td>@td>   tr>
    14.         <tr>   <td>@td>   <td>@td>   <td>@td>   tr>
    15.         <tr>   <td>@td>   <td>@td>   <td>@td>   tr>
    16.     table>
    17.  
    18.     <p>跨列合并单元格p>
    19.     <table border="1" cellspacing="0" width="100" height="100">
    20.         <tr>   <td>@td>   <td colspan="2">@td>     tr>
    21.         <tr>   <td>@td>   <td>@td>               <td>@td>          tr>
    22.         <tr>   <td>@td>   <td>@td>               <td>@td>          tr>
    23.     table>
    24.  
    25.     <p>跨行合并单元格p>
    26.     <table border="1" cellspacing="0" width="100" height="100">
    27.         <tr>   <td>@td>                <td>@td>    <td>@td>   tr>
    28.         <tr>   <td rowspan="2">@td>    <td>@td>    <td>@td>   tr>
    29.         <tr>            <td>@td>    <td>@td>   tr>
    30.     table>
    31. body>
    32. html>

    表格 · 总结

     

    | 列表

    列表 · 简介

     

    列表 · 三大列表语法

    无序列表（重要）

     

    有序列表

    • 注意事项和无序列表一致

     

    自定义列表

    • 注意事项和无序列表一致

    • 自定义列表相当于给一个列表加了一个列表头~~

     

     

    列表 · 总结

     

     

    | 表单

    表单 · 简介

    • 表单的作用：让用户填写信息，收集用户的信息

    • 表单的构成：表单域（整个表单写在这里面）、表单控件（用户输入）、提示信息

    • 表单的种类：inpuit输入元素、select下拉表单元素、textarea文本域元素

     

    表单 · 表单域

     

     

    表单 · input

    input的基本简介

    基本语法：

    input的 type属性详解

    • 注意：多个type=”radio”的input必须要有相同的名字，才能多选一

     input示例

     

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8. head>
    9. <body>
    10.     
    11.     <h3>input表单元素h3>
    12.     <form action="#" method="get" name="表单域名称">
    13.         input的text属性 <input type="text"> <br>
    14.         input的password属性 <input type="password"><br>
    15.         input的button属性 用于触发按钮响应 <input type="button" value="button"><br>
    16.         input的submit属性 用于提交数据到服务器 <input type="submit" value="submit"><br>
    17.         input的radio属性 用于单选按钮的定义        【A】<input type="radio" >  【B】<input type="radio"><br>
    18.         对于同名name的radio属性，会被视为一组，无法多选        
    19.         【A】<input type="radio" name="1" value="送到后台的值">  【B】<input type="radio" name="1" value="XXX" checked><br>
    20.         input的checkBox属性，用于多选  【A】<input type="checkbox" name="1"> 【B】<input type="checkbox" name="1"> 【C】<input type="checkbox" name="1">
    21.     form>
    22.  
    23. body>
    24. html>

     

    表单 · input 各属性的使用场景

     

    表单 · label标签

    作用：增加用户体验

    比如选择男女性别的时候，可以让用户点击头像就可以选中标签

    在输入text文本的时候，点击文本的提示信息，就可以把光标放在输入栏内。

     

    表单 · select textarea

     示例：

     

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8. head>
    9. <body>
    10.  
    11.     
    12.     <h4>下拉表单元素selecth4>
    13.     <form>
    14.         购买课程：
    15.         <select>
    16.             <option>Java基础option>
    17.             <option>Java后端基础option>
    18.             <option>Java后端option>
    19.             <option>Java前端option>
    20.             <option>Java互联网技术option>
    21.         select>
    22.         <input type="submit" value="购买"/>
    23.     form>
    24.  
    25.  
    26.  
    27.     <h4>文本域表单元素textareah4>
    28.     <form>
    29.         备忘录：
    30.         <textarea cols="10" rows="3">textarea中间写的东西作为默认文字展示textarea>
    31.     form>
    32.  
    33.  
    34. body>
    35. html>

     

     

    HTML 总结

     

  • 相关阅读:
    直播的多样性
    Windows NT 3.5程序员讲述微软标志性“3D管道”屏幕保护程序的起源故事
    2026. 低质量的问题
    GEE开发之Landsat8_NDVI的数据分析
    数据结构-字符串详解
    从键盘输入两个数，求它们的和并输出 &&从键盘输入三个数到a,b,c中，按公式值输出
    彻底解决Maven依赖爆红（依赖不能被解析识别）问题亲测有效
    【Spring Boot】SpringBoot 2.6.6 集成 SpringDoc 1.6.9 生成swagger接口文档
    Java中List如何转数组呢？
    Android WebSocket
  • 原文地址：https://blog.csdn.net/m0_57265007/article/details/127112345