• 【HTML】笔记2-表格、列表、表单标签

    目录

    一、表格标签

    1.表格主要作用

    2.基本语法

    3.表头单元格标签

    4.表格属性

     5.表格结构标签

    5.合并单元格

    二、列表标签 

    1.无序列表

    2.有序列表

    3.自定义列表

    三、表单

    1.表单域

    2.表单控件（表单元素）

    2.1input输入表单元素

    2.2标签

    2.3.select下拉表单元素

    2.4textarea

    四、综合案例-注册页面

    目标

    书写表格

    写出无序列表

    常用input表单

    下拉表表单

    使用表单元素实现注册页面

    独立查阅W3C文档

    一、表格标签

    1.表格主要作用

    显示、展示数据。不是布局页面

    2.基本语法

    • table 用来定义表格的标签
    • tr 用来定义表格中的行，必须嵌套在
       标签中
    • td 用来定义表格中的单元格，必须嵌套在 标签中
    • th 用来定义表格中的表头，表头单元格里面的内容加粗居中显示
    1.  <table>
    2.         <tr><td>姓名</td><td>性别</td><td>年龄</td></tr>
    3.         <tr><td>李</td><td>男</td><td>18</td></tr>
    4.         <tr><td>张</td><td>女</td><td>20</td></tr>
    5.     </table>

    3.表头单元格标签

    一般表头单元格位于表格的第一行或第一列，表头单元格里的文本内容加粗居中显示

    table head缩写

    4.表格属性

    属性名    属性值    描述
    align    left,center,right    规定表格相对周围元素的对齐方式
    border    1或者’’ ‘’    规定表格单元是否拥有边框，默认为" "，表示没有边框
    cellpadding    像素值    规定单元边沿与其内容之间的空白，默认1像素
    cellspacing    像素值    规定单元格之间的空白，默认2像素
    width    像素值或百分比    规定表格的宽度

    1. <table align="center" border="1" cellpadding="20" cellspacing="0" width="500" height="249">
    2.         <tr>
    3.             <th>姓名</th>
    4.             <td>性别</td>
    5.             <td>年龄</td>
    6.         </tr>
    7.         <tr>
    8.             <td>李</td>
    9.             <td>男</td>
    10.             <td>18</td>
    11.         </tr>
    12.         <tr>
    13.             <td>张</td>
    14.             <td>女</td>
    15.             <td>20</td>
    16.         </tr>
    17.     </table>

     5.表格结构标签

    为了更好的表示表格的语义，可以将表格分割成 表格头部 和表格主体两大部分

    • 用 标签表示表格的头部区域，内部必须拥有标签，一般是位于第一行
    • 用 标签表示表格的主体区域，主要是用于放数据本体
    • 以上标签都是放在
      标签中
    1.  <table align="center" border="1" cellpadding="20" cellspacing="0" width="500" height="249">
    2.         <thead>
    3.             <tr>
    4.                 <th>姓名</th>
    5.                 <td>性别</td>
    6.                 <td>年龄</td>
    7.             </tr>
    8.         </thead>
    9.         <tbody>
    10.             <tr>
    11.                 <td>李</td>
    12.                 <td>男</td>
    13.                 <td>18</td>
    14.             </tr>
    15.             <tr>
    16.                 <td>张</td>
    17.                 <td>女</td>
    18.                 <td>20</td>
    19.             </tr>
    20.         </tbody>
    21.  
    22.     </table>

    5.合并单元格

    特殊情况下，可以把多个单元格合并为一个单元格

    （1）合并单元格方式

    • 跨行合并：rowspan=“合并单元格的个数”
    • 跨列合并：colspan="合并单元格的个数"

    （2）目标单元格

    （3）合并单元格步骤

    • 先确定是跨行还是跨列合并
    • 找到目标单元格写上合并方式=合并单元格数量，
    • 删除多余的单元格
    1.    <table width="500" height="249" border="1" cellspacing="0">
    2.         <thead>
    3.             <tr>
    4.                 <th>姓名</th>
    5.                 <td colspan="2"></td>
    6.  
    7.             </tr>
    8.         </thead>
    9.         <tbody>
    10.             <tr>
    11.                 <td rowspan="2">李</td>
    12.                 <td>男</td>
    13.                 <td>18</td>
    14.             </tr>
    15.             <tr>
    16.                 <td>女</td>
    17.                 <td>20</td>
    18.             </tr>
    19.         </tbody>
    20.     </table>

    二、列表标签 

    列表是用来布局的

    列表最大的特点就是整齐、整洁、有序、它作为布局会更加自由和方便

    根据使用场景，分为无序列表、有序列表、自定义列表

    1.无序列表

      ，一般会以项目符合呈现列表项，而列表项使用
    • 标签定义

      基本语法如下

      1. <ul>
      2.     <li>列表项</li>
      3.     <li>列表项</li>
      4.     <li>列表项</li>
      5. </ul>

      （1）各个列表之间没有顺序之分，是并列的

      （2）

        中只能嵌套
      • ,直接在其中输入其他标签或者文字不被允许

        （3）

      • 与
        • 直接相当于一个容器，可以容纳所有元素

        （4）无序列表会带有自己的样式属性，单实际使用会使用CSS来设置

        2.有序列表

          ,列表排序以数字来显示，使用
        1. 定义列表项

          语法

          1.  <ol>
          2.         <li>列表项</li>
          3.         <li>列表项</li>
          4.         <li>列表项</li>
          5.     </ol>

          （1）.

            中只能嵌套
          1. ,直接在其中输入其他标签或者文字不被允许

            （2）.

          2. 与
            3. 直接相当于一个容器，可以容纳所有元素

            （3）有序列表会带有自己的样式属性，单实际使用会使用CSS来设置

            3.自定义列表

            用于定义描述列表活定义列表，会与
            和
            （描述每个项目名字）一起使用

            1. <dl>
            2.         <dt>关注我们</dt>
            3.         <dd>新浪微博</dd>
            4.         <dd>官方微信</dd>
            5.     </dl>

            （1）

            中只能包含
            和

            （2）

            和
            个数没有限制，经常是一个
            对应多个

            三、表单

            目的是为了收集用户信息，用户交互

            表单组成：表单域、表单控件和提示信息

            1.表单域

            包含表单元素的区域

             

            标签用于定义表单域，以实现用户信息收集和传递

            会吧它范围内的表单元素信息提交黑服务器

            1. <form action="url地址" method="提交方式" name="表单域的名称">
            2.     各自表单元素控件
            3. </form>

            2.表单控件（表单元素）

            在表单域中可以定义各种表单元素，这些表单元素就是润旭用户在表单中输入或者选择的内容控件

            2.1input输入表单元素

            单标签

            • input是个单标签，type 属性设置不同的属性用来指定不同的控件类型(文本字段、复选框、单选按钮、按钮等),必写

             type属性和描述

            除 type 属性外， 标签还有很多其他很多属性，其常用属性如下

            • name 和 value 是每个表单元素都有的属性值，主要给后端人员使用。
            • name 是表单元素的名字，要求 单选框和复选框要有相同的name值
            • checked 属性主要针对于单选框和复选框，主要作用是一打开页面，就可以默认选中某个表单元素
            • maxlength是用户可以在表单元素输入的最大字符数，一般较少使用

            submit点击提交按钮，可以把表单域form元素里的值提交给后台服务器 

            reset重置按钮可以还原表单元素初始默认状态

            button普通按钮button

            file：上传文件

            1. html>
            2. <html lang="en">
            3.  
            4. <head>
            5.     <meta charset="UTF-8">
            6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
            7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
            8.     <title>Documenttitle>
            9. head>
            10.  
            11. <body>
            12.     <form method="get">
            13.         
            14.         用户名<input type="text" name="username" value="请输入用户名" maxlength="6"><br>
            15.         
            16.         密码<input type="password" name="pwd"><br>
            17.         
            18.         
            19.         性别：男<input type="radio" name="sex" value="男" checked="checked"> 女<input type="radio" name="sex" value="女"><br>
            20.         
            21.         爱好 吃饭<input type="checkbox" name="hobby" value="吃饭">睡觉<input type="checkbox" name="hobby" value="睡觉">打豆豆<input
            22.             type="checkbox" name="hobby" value="打豆豆"><br>
            23.         
            24.         <input type="submit" value="免费注册">
            25.         
            26.         <input type="reset" value="重新填写">
            27.         
            28.         <input type="button" value="获取验证码"><br>
            29.         
            30.         上传头像<input type="file">
            31.  
            32.     form>
            33. body>
            34.  
            35. html>

            2.2标签

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

            • label标签用于绑定一个表单元素，当点击标签内的文本时，浏览器就会自动将焦点(光标)转到表单元素上，用来增加用户体验
            • label标签的 for属性 应当与相关元素的id 属性相同
            1. <label for="sex"> 男 lable>
            2. <input type="radio" name="sex" id="sex" />

            2.3.select下拉表单元素

            • 下拉表单元素