• HTML入门篇---02列表、表格、表单标签

    文章目录

    1.列表标签

    有序列表

    无序列表

    自定义列表

    2.表格标签

    基本结构

    完整结构

    3.表单标签

    form标签

    input系列标签

    下拉列表

    文本域

    label标签

    1.列表标签

    有序列表

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

    ol，即ordered list（有序列表）。

    type属性（定义列表项符号）

    1. <ul type="属性值">
    2.     <li>列表项li>
    3.     <li>列表项li>
    4.     <li>列表项li>
    5. ul>

    c900ac501c2c42cfb9073952e7570e43.png

    无序列表

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

    ul，即unordered list（无序列表）。

    type属性（定义列表项符号）

    1. <ul type="属性值">
    2.     <li>列表项li>
    3.     <li>列表项li>
    4.     <li>列表项li>
    5. ul>

    ad8ba8a50f8447f4b01dde40047438e1.png

    实际开发中用到有序列表挺少，无序列表用的多，注意两个特点：

    （1）ul元素的子元素只能是li，不能是其他元素。

    （2）ul元素内部的文本，只能在li元素内部添加，不能在li元素外部添加。

    自定义列表

    1. <dl>
    2.     <dt>名词dt>
    3.     <dd>描述dd>
    4. dl>

    dl即definition list（定义列表），dt即definition term（定义名词），而dd即definition description（定义描述）。

    案例展示：

    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.     <ol>
    12.         <li>小李 100li>
    13.         <li>小明 99li>
    14.         <li>小红 88li>
    15.     ol>
    16.     
    17.     <ol type="A">
    18.         <li>小李 100li>
    19.         <li>小明 99li>
    20.         <li>小红 88li>
    21.     ol>
    22.     
    23.     <ul>
    24.         <li>香蕉li>
    25.         <li>苹果li>
    26.         <li>雪梨li>
    27.     ul>
    28.     
    29.     <ul type="circle">
    30.         <li>香蕉li>
    31.         <li>苹果li>
    32.         <li>雪梨li>
    33.     ul>
    34.     
    35.     <dl>
    36.         <dt>HTMLdt>   
    37.         <dd>控制网页的结构dd>
    38.         <dt>CSSdt>
    39.         <dd>控制网页的样式dd>
    40.         <dt>JavaScriptdt>
    41.         <dd>控制网页的行为dd>
    42.     dl>
    43. body>
    44. html>

    92d3b762e212418094a616d9a28e7b18.png

    2.表格标签

    基本结构

    表格标签有三部分组成

    （1）表格：table标签

    （2）行：tr标签

    （3）单元格：td标签

    1. <table>
    2.     <tr>
    3.         <td>单元格1td>
    4.         <td>单元格2td>
    5.     tr>
    6.     <tr>
    7.         <td>单元格3td>
    8.         <td>单元格4td>
    9.     tr>
    10. table>

    tr，指的是table row（表格行），td，指的是table data cell（表格单元格）。

    表格属性

    属性名属性值效果
    border数字边框宽度
    width数字表格宽度
    height数字表格高度

    完整结构

    表格标题（caption）

    一个表格只能有一个标题，位于整个表格内的第一行。

    表头单元格（th）

    th，指的是table header cell（表头单元格）。

    表格语义化

    thead、tbody和tfoot标签。分别表示：表头、表身、表脚。显示效果没区别，但是代码结构更清晰，更有可读性和有利于后期的维护。

    此外还方便分块来控制表格的CSS样式。

    合并行

    <td rowspan = "合并的行数">td>

    合并列

    <td colspan = "合并的列数">td>

    合并行和合并列内容默认的是前面一个，后面那些需要删去。

    案例演示：

    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.     <table border="1" width="200" height="100">
    11.         
    12.         <caption><strong>表格strong>caption>
    13.         
    14.         <thead>
    15.             <tr>
    16.                 
    17.                 <th>姓名th>
    18.                 <th>成绩th>
    19.                 <th>身份th>
    20.             tr> 
    21.         thead>
    22.         <tbody>
    23.             <tr>
    24.                 <td>小李td>
    25.                 <td>99td>
    26.                 <td>学生td>
    27.             tr>
    28.         tbody>
    29.         <tfoot>
    30.             <tr>
    31.                 <td>底部td>
    32.                 <td>底部td>
    33.                 <td>底部td>
    34.             tr>
    35.         tfoot>
    36.     table>
    37.     <table border="1" width="200" height="100">
    38.         <caption><strong>表格strong>caption>
    39.         <thead>
    40.             <tr>
    41.                 <td>姓名td>
    42.                 <td>成绩td>
    43.                 <td>身份td>
    44.             tr>
    45.         thead>
    46.         <tbody>
    47.             <tr>
    48.                 
    49.                 <th>姓名th>
    50.                 <th rowspan="2">成绩th>
    51.                 <th>身份th>
    52.             tr> 
    53.             <tr>
    54.                 <td>小李td>
    55.                 
    56.                 <td>学生td>
    57.             tr>
    58.         tbody>
    59.         <tfoot>
    60.             <tr>
    61.                 <td>底部td>
    62.                 <td colspan="2">底部td>
    63.                 
    64.             tr>
    65.         tfoot>
    66.     table>
    67. body>
    68. html>

    435c89c3a80c4fb5b7ec5f3ac8e6f7e3.png

    3.表单标签

    前面学的都是静态页面，下面终于接触到动态页面了。简单来说，如果一个页面仅仅供用户浏览，那就是静态页面。如果这个页面还能实现与服务器进行数据交互（像注册登录、话费充值、评论交流），那就是动态页面。

    form标签

    1. <form>
    2.     //各种表单标签
    3. form>

    创建表单需要把所有表单标签放在form标签内部。

    dca03abb493247e794abc762c5d30cc8.png

    name属性（给表单进行命名）

    <form name="myForm">form>

    method属性（指定表单数据使用哪一种http提交方法）

    method属性取值有两个：一个是“get”，一个是“post”。get的安全性较差，而post的安全性较好。实际开发中，使用post比较多。

    <form method="post">form>

    action属性（指定表单数据提交到哪一个地址进行处理）

    <form action="地址">form>

    target属性（指定窗口的打开方式）

    <form target="_blank">form>

    enctype（指定表单数据提交的编码方式）

    一般不用自己设置

    input系列标签

    79397ebf6ea64cdd8462c7f9e6fcf0f0.png

     文本框

    <input type="text" />

    文本框常用属性

    8ea2d75865404b7b9fc334630843c73d.png

     密码文本框（输入字符不可见）

    <input type="password" />

    单选框

    <input type="radio" name="组名" value="取值" checked />

    name属性能让单选框分为一组，这样就能几个之只能选一个，实现“单选”。

    value属性取值跟后面的文本是相同的。加上value属性，是为了方便JavaScript或者服务器操作数据用的。

    checked属性设置默认选中的框。

    多选框

    <input type="checkbox" name="组名" value="取值" />

    与单选框的name相同，列为一组，不过多选设定为多选，系统会自动识别。

    文件选择框

    <input type="file" multiple />

    multiple属性能选择多个文件上传。

    提交按钮

    <input type="submit" value="按钮的名字" />

    给服务器提交数据。

    重置按钮

    <input type="reset" value="按钮的名字" />

    清除用户在表单中输入的内容。

    普通按钮

    <input type="button" value="按钮的名字" />

    配合JavaScript来进行各种操作的。

    下拉列表

    1. <select>
    2.     <option>选项内容option>
    3.     <option>选项内容option>
    4. select>

    跟无序列表很像，其中无序列表是由ul和li这两个标签配合使用。

    9548b09759a34cfca14eea7e94c09a49.png

     4bff1068992349e4ad2fa961fb4ba324.png

     selected设置默认选择，即开头选中的。

    文本域

    <textarea rows="行数" cols="列数" value="取值">默认内容textarea>

    label标签

    <label for="">label>

    绑定内容与表格标签的关系，如单选框的时候可以鼠标点击文字（内容）来选定选项。

    使用方法1：label标签把内容包裹起来，在表格标签中添加id属性，在label标签for属性中设置对应的id属性值

    使用方法2：label标签直接把内容包裹起来，删去for属性。

    案例演示：

    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.     <form name="表单">
    11.         文本框：<input type="text" placeholder="用户名">
    12.         <br>
    13.         <br>
    14.         密码框：<input type="password" placeholder="密码">
    15.         <br>
    16.         <br>
    17.         性别：<input type="radio" name="sex">男 <input type="radio" name="sex" checked>女
    18.         <br>
    19.         <br>
    20.         爱好：<input type="checkbox" name="like">编程<input type="checkbox" name="like">熬夜
    21.         <br>
    22.         <br>
    23.         文件选择：<input type="file" multiple>
    24.         <br>
    25.         <br>
    26.         提交按钮：<input type="submit" value="注册">
    27.         <br>
    28.         <br>
    29.         重置按钮：<input type="reset" value="重新输入">
    30.         <br>
    31.         <br>
    32.         普通按钮：<input type="button" value="普通按钮">
    33.     form>
    34.     <select >
    35.         <option>上海option>
    36.         <option selected>北京option>
    37.         <option>南京option>
    38.     select>
    39.     <br>
    40.     <br>
    41.     <textarea cols="30" rows="10">默认内容textarea>
    42.     <br>
    43.     <br>
    44.     <label for="man">性别：<input type="radio" name="sex" id="man">男 label>
    45.     <label ><input type="radio" name="sex" checked>女label>
    46.  
    47. body>
    48. html>

    10c86ccf8df6430ab7635b656658ea0f.png

  • 相关阅读:
    【一起学Rust · 项目实战】命令行IO项目minigrep——接收命令行参数与读取文件内容
    视频批量加水印：保护版权，提升效率
    【数据结构复习】第五章树和二叉树
    浅议飞机状态监控
    Git手记
    Wireshark 4.0.0 新版本发布
    2024年csdn最新最全pytest系列——pytest-rerunfailures插件之测试用例失败重跑
    Vue监测数据改变原理
    cordic IP核中，sin and cos的使用
    探秘Nutch：揭秘开源搜索引擎的工作原理与无限应用可能（三）
  • 原文地址：https://blog.csdn.net/btufdycxyffd/article/details/126896439