0429+0506 HTML标签 Part2

最新推荐文章于 2025-04-11 19:11:11 发布
最新推荐文章于 2025-04-11 19:11:11 发布
阅读量967 收藏 22
点赞数 28
文章标签： 前端 学习 前端框架 html vscode
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/POPORORO/article/details/138522413
版权

学习目标：

  • 能够书写表格
  • 能够写出无序列表
  • 能够写出3~4个常用input表单类型
  • 能够写出下拉列表表单
  • 能够使用表单元素实现注册页面
  • 能够独立查阅 W3C 文档

目录

1. 表格标签

1.1. 表格的主要作用

1.2. 表格的基本语法

1.3. 表头单元格标签

1.4. 表格属性（了解）

1.5. 案例：小说排行榜

1.6. 表格结构标签

1.7. 合并单元格

1.7.1. 合并单元格方式

1.7.2. 目标单元格(写合并代码)

1.7.3. 合并单元格的步骤

2. 列表标签

2.1. 无序列表（重要）

2.2. 有序列表（理解）

2.3. 自定义列表（重点）

2.4. 列表总结

3. 表单标签

3.1. 为什么需要表单

3.2. 表单的组成

3.2.1. 表单域

3.2.1.1. 语法

3.2.1.2. 常用属性

3.2.1.3. 简单实践

3.2.2. 表单控件/元素

3.2.2.1. input输入表单元素

3.2.2.1.1. 语法

3.2.2.1.2. type属性

3.2.2.1.3. input中四个基本属性

3.2.2.1.4. 表单提交和重置按钮

3.2.2.1.5. 普通按钮和文件域

3.2.2.2. label标签

3.2.2.3. select下拉表单元素

3.2.2.4. textarea 文本域元素

4. 综合案例

5. 查阅文档

1. 表格标签

表格是实际开发中非常常用的标签。

1.1. 表格的主要作用

表格主要用于显示、展示数据，因为它可以让数据显示的非常的规整，可读性非常好。特别是后台展示数据的时候，能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理。

通俗而言是用来展示数据的。

1.2. 表格的基本语法

<table>
  <tr>
    <td>单元格内的文字</td>
    ...
  </tr>
  ...
</table>
  • <table></table>是用于定义表格的标签
  • <tr></tr>标签用于定义表格中的行,必须嵌套在<table></table>标签中
  • <td></td>用于定义表格中的单元格，必须嵌套在<tr></tr>标签中
  • 字母 td 指表格数据(table data),即数据单元格的内容

1.3. 表头单元格标签

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

<th>标签表示 HTML表格的表头部分(table head 的缩写)

<table>
  <tr>
    <th>姓名</th>
  </tr>
</table>

1.4. 表格属性（了解）

表格标签这部分属性实际开发不常用，后面通过CSS 来设置。这里学习目的有2个:

  • 记住这些英语单词,后面CSS 会使用
  • 直观感受表格的外观形态

属性名

属性值

描述

align

left、center、right

规定表格相对周围元素的对齐方式

border

1 或 ""

规定表格单元是否拥有边框，默认为""，表示没有边框

cellpadding

像素值

规定单元边沿与其内容之间的空白，默认1像素

cellspacing

像素值

规定单元格之间的空白，默认2像素

width

像素值或百分比

规定表格的宽度

这属性是要写到table标签内。

💡 注意

cellpadding和cellspacing已经弃用，属于非法属性，现在要用collapse属性。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <table align="center" border="1" cellpadding="30" cellspacing="0" width="500" height="300">
        <!-- 第一行 -->
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>

        <!-- 第二行 -->
        <tr>
            <td>吴彦祖</td>
            <td>男</td>
            <td>50</td>
        </tr>

        <!-- 第三行 -->
        <tr>
            <td>刘亦菲</td>
            <td>女</td>
            <td>35</td>
        </tr>

    </table>

</body>

</html>

1.5. 案例：小说排行榜

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>0429_2_表格案例:小说排行榜</title>
</head>

<body>
    <table align="center" border="1" cellpadding="15" cellspacing="0" width="800">
        <tr>
            <th>排名</th>
            <th>关键词</th>
            <th>趋势</th>
            <th>今日搜索</th>
            <th>最近七天</th>
            <th>相关链接</th>
        </tr>
        <tr>
            <td>1</td>
            <td>鬼吹灯</td>
            <td><img src="images/DownE.png"> </td>
            <td>345</td>
            <td>123</td>
            <td> <a href="https://tieba.baidu.com/f?ie=utf-8&kw=%E9%AC%BC%E5%90%B9%E7%81%AF&fr=search"
                    target="_blank">贴吧</a> <a
                    href="https://img0.baidu.com/it/u=1991665454,2937857984&fm=253&fmt=auto&app=138&f=JPEG?w=583&h=500"
                    target="_blank">图片</a> <a
                    href="https://baike.baidu.com/item/%E9%AC%BC%E5%90%B9%E7%81%AF/10790?fr=ge_ala"
                    target="_blank">百科</a></td>
        </tr>
        <tr>
            <td>2</td>
            <td>盗墓笔记</td>
            <td><img src="images/DownE.png"> </td>
            <td>124</td>
            <td>675432</td>
            <td> <a href="https://tieba.baidu.com/f?ie=utf-8&kw=%E7%9B%97%E5%A2%93%E7%AC%94%E8%AE%B0&fr=search"
                    target="_blank">贴吧</a> <a
                    href="https://img0.baidu.com/it/u=2757422760,4079216815&fm=253&fmt=auto&app=138&f=JPEG?w=357&h=500"
                    target="_blank">图片</a> <a
                    href="https://baike.baidu.com/item/%E7%9B%97%E5%A2%93%E7%AC%94%E8%AE%B0/21859"
                    target="_blank">百科</a></td>
        </tr>
        <tr>
            <td>3</td>
            <td>西游记</td>
            <td><img src="images/UpE.png"> </td>
            <td>212</td>
            <td>7654</td>
            <td> <a href="https://tieba.baidu.com/f?ie=utf-8&kw=%E8%A5%BF%E6%B8%B8%E8%AE%B0&fr=search"
                    target="_blank">贴吧</a> <a
                    href="https://img2.baidu.com/it/u=3826058465,3031454957&fm=253&fmt=auto&app=120&f=JPEG?w=607&h=347"
                    target="_blank">图片</a> <a href="https://baike.baidu.com/item/%E8%A5%BF%E6%B8%B8%E8%AE%B0/5723"
                    target="_blank">百科</a></td>
        </tr>
        <tr>
            <td>4</td>
            <td>东游记</td>
            <td><img src="images/UpE.png"> </td>
            <td>23</td>
            <td>75645</td>
            <td> <a href="https://tieba.baidu.com/f?ie=utf-8&kw=%E4%B8%9C%E6%B8%B8%E8%AE%B0&fr=search"
                    target="_blank">贴吧</a> <a
                    href="https://img1.baidu.com/it/u=3699171940,1234807027&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=663"
                    target="_blank">图片</a> <a href="https://baike.baidu.com/item/%E4%B8%9C%E6%B8%B8%E8%AE%B0/10461211"
                    target="_blank">百科</a></td>
        </tr>
        <tr>
            <td>5</td>
            <td>甄嬛传</td>
            <td><img src="images/DownE.png"> </td>
            <td>121</td>
            <td>7676</td>
            <td> <a href="https://tieba.baidu.com/f?ie=utf-8&kw=%E7%94%84%E5%AC%9B%E4%BC%A0&fr=search"
                    target="_blank">贴吧</a> <a
                    href="https://img0.baidu.com/it/u=4029609978,3138792590&fm=253&fmt=auto&app=120&f=JPEG?w=513&h=770"
                    target="_blank">图片</a> <a href="https://baike.baidu.com/item/%E7%94%84%E5%AC%9B%E4%BC%A0/4701562"
                    target=" _blank">百科</a></td>
        </tr>
        <tr>
            <td>6</td>
            <td>水浒传</td>
            <td><img src="images/UpE.png"> </td>
            <td>576576</td>
            <td>1231421</td>
            <td> <a href="https://tieba.baidu.com/f?ie=utf-8&kw=%E6%B0%B4%E6%B5%92%E4%BC%A0&fr=search"
                    target="_blank">贴吧</a> <a
                    href="https://img1.baidu.com/it/u=3507588977,3249927496&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=722"
                    target="_blank">图片</a> <a href="https://baike.baidu.com/item/%E6%B0%B4%E6%B5%92%E4%BC%A0/348"
                    target="_blank">百科</a></td>
        </tr>
        <tr>
            <td>7</td>
            <td>三国演义</td>
            <td><img src="images/UpE.png"> </td>
            <td>234</td>
            <td>7686</td>
            <td> <a href="https://tieba.baidu.com/f?ie=utf-8&kw=%E4%B8%89%E5%9B%BD%E6%BC%94%E4%B9%89&fr=search"
                    target="_blank">贴吧</a> <a
                    href="https://img2.baidu.com/it/u=3536397260,2925037283&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=676"
                    target="_blank">图片</a> <a
                    href="https://baike.baidu.com/item/%E4%B8%89%E5%9B%BD%E6%BC%94%E4%B9%89/5782" target="_blank">百科</a>
            </td>
        </tr>

    </table>

</body>

</html>

1.6. 表格结构标签

使用场景:因为表格可能很长,为了更好的表示表格的语义，可以将表格分割成 表格头部和表格主体两大部分在表格标签中，分别用<thead>标签表示表格的头部区域、<tbody>标签表示表格的主体区域,这样可以更好的分清表格结构。

  • <thead></thead>:用于定义表格的头部。<thead>内部必须拥有<tr>标签。一般是位于第一行。
  • <tbody></tbody>:用于定义表格的主体，主要用于放数据本体。
  • 标签都是放在<table></table>标签中
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>0429_3_表格结构:小说排行榜</title>
</head>

<body>
    <table align="center" border="1" cellpadding="15" cellspacing="0" width="800">
        <thead>
            <tr>
                <th>排名</th>
                <th>关键词</th>
                <th>趋势</th>
                <th>今日搜索</th>
                <th>最近七天</th>
                <th>相关链接</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>1</td>
                <td>鬼吹灯</td>
                <td><img src="images/DownE.png"> </td>
                <td>345</td>
                <td>123</td>
                <td> <a href="https://tieba.baidu.com/f?ie=utf-8&kw=%E9%AC%BC%E5%90%B9%E7%81%AF&fr=search"
                        target="_blank">贴吧</a> <a
                        href="https://img0.baidu.com/it/u=1991665454,2937857984&fm=253&fmt=auto&app=138&f=JPEG?w=583&h=500"
                        target="_blank">图片</a> <a
                        href="https://baike.baidu.com/item/%E9%AC%BC%E5%90%B9%E7%81%AF/10790?fr=ge_ala"
                        target="_blank">百科</a></td>
            </tr>
            <tr>
                <td>2</td>
                <td>盗墓笔记</td>
                <td><img src="images/DownE.png"> </td>
                <td>124</td>
                <td>675432</td>
                <td> <a href="https://tieba.baidu.com/f?ie=utf-8&kw=%E7%9B%97%E5%A2%93%E7%AC%94%E8%AE%B0&fr=search"
                        target="_blank">贴吧</a> <a
                        href="https://img0.baidu.com/it/u=2757422760,4079216815&fm=253&fmt=auto&app=138&f=JPEG?w=357&h=500"
                        target="_blank">图片</a> <a
                        href="https://baike.baidu.com/item/%E7%9B%97%E5%A2%93%E7%AC%94%E8%AE%B0/21859"
                        target="_blank">百科</a></td>
            </tr>
            <tr>
                <td>3</td>
                <td>西游记</td>
                <td><img src="images/UpE.png"> </td>
                <td>212</td>
                <td>7654</td>
                <td> <a href="https://tieba.baidu.com/f?ie=utf-8&kw=%E8%A5%BF%E6%B8%B8%E8%AE%B0&fr=search"
                        target="_blank">贴吧</a> <a
                        href="https://img2.baidu.com/it/u=3826058465,3031454957&fm=253&fmt=auto&app=120&f=JPEG?w=607&h=347"
                        target="_blank">图片</a> <a href="https://baike.baidu.com/item/%E8%A5%BF%E6%B8%B8%E8%AE%B0/5723"
                        target="_blank">百科</a></td>
            </tr>
            <tr>
                <td>4</td>
                <td>东游记</td>
                <td><img src="images/UpE.png"> </td>
                <td>23</td>
                <td>75645</td>
                <td> <a href="https://tieba.baidu.com/f?ie=utf-8&kw=%E4%B8%9C%E6%B8%B8%E8%AE%B0&fr=search"
                        target="_blank">贴吧</a> <a
                        href="https://img1.baidu.com/it/u=3699171940,1234807027&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=663"
                        target="_blank">图片</a> <a
                        href="https://baike.baidu.com/item/%E4%B8%9C%E6%B8%B8%E8%AE%B0/10461211" target="_blank">百科</a>
                </td>
            </tr>
            <tr>
                <td>5</td>
                <td>甄嬛传</td>
                <td><img src="images/DownE.png"> </td>
                <td>121</td>
                <td>7676</td>
                <td> <a href="https://tieba.baidu.com/f?ie=utf-8&kw=%E7%94%84%E5%AC%9B%E4%BC%A0&fr=search"
                        target="_blank">贴吧</a> <a
                        href="https://img0.baidu.com/it/u=4029609978,3138792590&fm=253&fmt=auto&app=120&f=JPEG?w=513&h=770"
                        target="_blank">图片</a> <a
                        href="https://baike.baidu.com/item/%E7%94%84%E5%AC%9B%E4%BC%A0/4701562" target=" _blank">百科</a>
                </td>
            </tr>
            <tr>
                <td>6</td>
                <td>水浒传</td>
                <td><img src="images/UpE.png"> </td>
                <td>576576</td>
                <td>1231421</td>
                <td> <a href="https://tieba.baidu.com/f?ie=utf-8&kw=%E6%B0%B4%E6%B5%92%E4%BC%A0&fr=search"
                        target="_blank">贴吧</a> <a
                        href="https://img1.baidu.com/it/u=3507588977,3249927496&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=722"
                        target="_blank">图片</a> <a href="https://baike.baidu.com/item/%E6%B0%B4%E6%B5%92%E4%BC%A0/348"
                        target="_blank">百科</a></td>
            </tr>
            <tr>
                <td>7</td>
                <td>三国演义</td>
                <td><img src="images/UpE.png"> </td>
                <td>234</td>
                <td>7686</td>
                <td> <a href="https://tieba.baidu.com/f?ie=utf-8&kw=%E4%B8%89%E5%9B%BD%E6%BC%94%E4%B9%89&fr=search"
                        target="_blank">贴吧</a> <a
                        href="https://img2.baidu.com/it/u=3536397260,2925037283&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=676"
                        target="_blank">图片</a> <a
                        href="https://baike.baidu.com/item/%E4%B8%89%E5%9B%BD%E6%BC%94%E4%B9%89/5782"
                        target="_blank">百科</a>
                </td>
            </tr>
        </tbody>


    </table>

</body>

</html>

1.7. 合并单元格

特殊情况下,可以把多个单元格合并为一个单元格,这里会最简单的合并单元格即可

1.7.1. 合并单元格方式

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

1.7.2. 目标单元格(写合并代码)

  • 跨行：最上侧单元格为目标单元格,写合并代码
  • 跨列：最左侧单元格为目标单元格,写合并代码

1.7.3. 合并单元格的步骤

  • 先确定是跨行还是跨列合并。
  • 找到目标单元格，写上合并方式=合并的单元格数量。比如:<tdcolspan=“2”></td>。
  • 删除多余的单元格。
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>0429_Page_4_合并单元格</title>
</head>

<body>
    <table align="center" border="1" cellpadding="20" cellspacing="0" width="300">
        <thead>
            <tr>
                <!-- 跨列合并 -->
                <!-- 合并第二列和第三列的第一个单元格 -->
                <th></th>
                <th colspan="2"></th>
                <!-- <th></th> -->

            </tr>
        </thead>

        <tbody>
            <tr>
                <!-- 跨行合并 -->
                <!-- 合并第二行和第三行的第一个单元格 -->
                <td rowspan="2"></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <!-- <td></td> -->
            </tr>
        </tbody>


    </table>

</body>

</html>

2. 列表标签

表格是用来显示数据的，那么列表就是用来布局的。

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

根据使用情景不同，列表可以分为三大类：无序列表、有序列表和自定义列表。

2.1. 无序列表（重要）

<ul>标签表示 HTML 页面中项目的无序列表,一般会以项目符号呈现列表项，而列表项使用 <li>标签定义。无序列表的基本语法格式如下:

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ul>
  • 无序列表的各个列表项之间没有顺序级别之分，是并列的。
  • <ul></ul> 中只能嵌套 <li><li>，直接在 <ul></ul>标签中输入其他标签或者文字的做法是不被允许的。
  • <li>与 </li>之间相当于一个容器，可以容纳所有元素。
  • 无序列表会带有自己的样式属性，但在实际使用时，我们会使用CSS 来设置。
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>0429_Page_5_无序列表</title>
</head>

<body>
    <h1>最喜欢的水果排行榜：</h1>
    <ul>
        <li>榴莲</li>
        <li>西瓜</li>
        <li>芒果</li>
        <li>芭乐</li>
        <li>凤梨</li>
    </ul>

</body>

</html>

💡 注意

后面会用CSS将这些点去掉

2.2. 有序列表（理解）

有序列表即为有排列顺字的列表，其各个列表项会按照一定的顺序排列定义在 HTML 标签中，<ol>标签用于定义有序列表，列表排序以数字来显示，并且使用 <li>标签来定义列表项,有序列表的基本语法格式如下:

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

1.<ol></ol>中只能嵌套<li></i>，直接在<ol></ol>标签中输入其他标签或者文字的做法是不被允许的,

2.<li>与 </li>之间相当于一个容器，可以容统所有元素,

3.有序列表会带有自己样式属性，但在实际使用时，会使用CSS来设置

2.3. 自定义列表（重点）

自定义列表的使用场景:

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

<dl>
  <dt>名词1</dt>
  <dd>名词1解释1</dd>
  <dd>名词1解释2</dd>
</dl>
  • <dl></dl>里面只能包含<dt>和<dd>
  • <dt>和<dd>个数没有限制,经常是一个<dt>对应多个<dd>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>0429_Page_7_自定义列表</title>
</head>

<body>
    <dl>
        <dt>头1</dt>
        <dd>解释1</dd>
        <dd>解释2</dd>
        <dd>解释3</dd>

        <dt>头2</dt>
        <dd>解释1</dd>
        <dd>解释2</dd>
        <dd>解释3</dd>

        <dt>头3</dt>
        <dd>解释1</dd>
        <dd>解释2</dd>
        <dd>解释3</dd>
    </dl>

</body>

</html>

2.4. 列表总结

标签名

定义

说明

标签名

<ul></ul>

无序标签

里面只能包含li，没有顺序，使用较多。li里面可以包含任何标签

<ol></ol>

有序标签

里面只能包含li，有顺序，使用相对较少。li里面可以包含任何标签

<dl></dl>

自定义列表

里面只能包含dt和dd。dt和dd里面可以放任何标签

💡 注意

当碰到上面是个小标题，底下都是围绕这个标题进行解释的文字列表时，就可以使用自定义列表了；

列表布局在学习完CSS后再来完成。

3. 表单标签

3.1. 为什么需要表单

使用表单目的是为了收集用户信息；

在网页中，我们也需要跟用户进行交互，收集用户资料，此时就需要表单；

3.2. 表单的组成

在 HTML 中，一个完整的表单通常由表单域、表单控件(也称为表单元素)和提示信息3个部分构成。

3.2.1. 表单域

表单域是一个包含表单元素的区域；

在 HTML标签中，<form>标签用于定义表单域，以实现用户信息的收集和传递；

<form>会把它范围内的表单元素信息提交给服务器；

3.2.1.1. 语法
<form action="url地址" method="提交方式" name="表单域名称">
  各种表单元素控件
</form>
3.2.1.2. 常用属性

属性

属性值

作用

action

url地址

用于指定接收并处理表单数据的服务器程序的url地址。

method

get/post

用于设置表单数据的提交方式，其取值为get或post。

name

名称

用于指定表单的名称，以区分同一个页面中的多个表单域。

基础阶段暂时不用表单域提交数据，只需要写上 form 标签即可，等学习服务器编程阶段会重新学习。

3.2.1.3. 简单实践
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>0429_Page_8_表单</title>
</head>

<body>
    <form action="demo.php" method="post" name="name1">

    </form>

</body>

</html>

3.2.2. 表单控件/元素

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

3.2.2.1. input输入表单元素

在英文单词中，input是输入的意思，而在表单元素中<input>标签用于收集用户信息

在 <input>标签中，包含一个type属性,根据不同的type属性值,输入字段拥有很多种形式(可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等)。

3.2.2.1.1. 语法
<input type="属性值" />
3.2.2.1.2. type属性

<input/>标签为单标签，type 属性设置不同的属性值用来指定不同的控件类型。

属性值

描述

button

定义可点击按钮(多数情况下，用于通过JavaScript 启动脚本)

checkbox

定义复选框。

file

定义输入字段和“浏览”按钮，供文件上传。

hidden

定义隐藏的输入字段。

image

定义图像形式的提交按钮。

password

定义密码字段。该字段中的字符被掩码

radio

定义单选按钮。

reset

定义重置按钮。重置按钮会清除表单中的所有数据。

submit

定义提交按钮。提交按钮会把表单数据发送到服务器。

text

定义单行的输入字段，用户可在其中输入文本默认宽度为 20 个字符

3.2.2.1.3. input中四个基本属性

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

属性

属性值

描述

name

由用户自定义

定义 input 元素的名称。

value

由用户自定义

规定 input 元素的值。

checked

checked

规定此 input 元素首次加载时应当被选中。

maxlength

正整数

规定输入字段中的字符的最大长度。

💡 注意

name 和value 是每个表单元素都有的属性值,主要给后台人员使用；

name 为表单元素的名字，要求单选按钮和复选框要有相同的name值，这里实际上就是为这些表单的选项分配了key，单选中：选择的选项将会分配到这个key，就不会造成单选也能多选的情况了

checked属性主要针对于单选按钮和复选框，主要作用为一打开页面，就要可以默认选中某个表单元素

maxlength是用户可以在表单元素输入的最大字符数,一般较少使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>0429_Page_9_表单控件</title>
</head>

<body>
    <form>
        <!-- 定义可输入文字的文本框 -->
        用户名：<input type="text" name="username" value="请输入用户名" maxlength="6"> <br>

        <!-- 密码，隐藏显示 -->
        密码：<input type="password" name="pwd"> <br>

        <!-- 单选按钮和复选框都可以设置checked属性，当页面打开的时候就可以默认选中这个选项 -->

        <!-- 单选 每个单选按钮必须有相同的name属性才能实现多选一-->
        性别：<input type="radio" name="Gender" value="Man">Man <input type="radio" name="Gender" value="Female">Female
        <input type="radio" name="Gender" value="Others">Others <br>

        <!-- 复选框 可以实现多选，也可以实现简单的勾选(比如每次注册页面最后的“我同意xxx”) -->
        兴趣爱好：<input type="checkbox" name="hobby" value="walking">散步 <input type="checkbox" name="hobby"
            value="badminton">羽毛球 <input type="checkbox" name="hobby" value="basketball">篮球 <br>

        <!-- 设置提前选定按钮 -->
        <input type="checkbox" name="IsAgree" value="agree" checked="checked"> 我同意balabalabala

    </form>

</body>

</html>

3.2.2.1.4. 表单提交和重置按钮

reset

定义重置按钮。重置按钮会清除表单中的所有数据。

submit

定义提交按钮。提交按钮会把表单数据发送到服务器。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>0506_Page_1_表单提交和重置按钮</title>
</head>

<body>
    <form action="xxx.php" method="get">
        用户名：<input type="text" name="username" value="请输入您的注册用户名"> <br>
        密码：<input type="password" name="pwd" maxlength="6"> <br>
        性别：<input type="radio" name="Gender" value="Man"> 男 <input type="radio" name="Gender" value="Female"> 女 <br>
        爱好：<input type="checkbox" name="hobby" value="badminton"> 羽毛球 <input type="checkbox" name="hobby"
            value="soccer"> 足球 <br>
        <input type="checkbox" name="IsAgree" value="agree">我同意xxxx <br>

        <input type="submit" value="点击注册">
        <input type="reset" value="重置">

    </form>

</body>

</html>

3.2.2.1.5. 普通按钮和文件域

💡 注意

普通按钮后期搭配JS具体使用；

这里很多概念出现在一起，容易混杂，在编辑器中，红色的是标签，黄色的是属性，绿色的是值。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>0506_Page_1_表单提交和重置按钮</title>
</head>

<body>
    <form action="xxx.php" method="get">
        用户名：<input type="text" name="username" value="请输入您的注册用户名"> <br>
        密码：<input type="password" name="pwd" maxlength="6"> <br>
        性别：<input type="radio" name="Gender" value="Man"> 男 <input type="radio" name="Gender" value="Female"> 女 <br>
        爱好：<input type="checkbox" name="hobby" value="badminton"> 羽毛球 <input type="checkbox" name="hobby"
            value="soccer"> 足球 <br>
        <input type="checkbox" name="IsAgree" value="agree">我同意xxxx <br>


        <!-- 表单提交按钮 -->
        <input type="submit" value="点击注册">
        <!-- 表单重置按钮 -->
        <input type="reset" value="重置">

        <br>

        <!-- 普通按钮，后期结合js一起使用 -->
        <input type="button" value="点击获取短信验证码"> <br>

        <!-- 文件域，使用场景：上传文件使用的 -->
        <input type="file">


    </form>

</body>

</html>

3.2.2.2. label标签

<label>标签为 input元素定义标注(标签)

<label>标签用于绑定一个表单元素,当点击<label>标签内的文本时,浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上,用来增加用户体验.语法如下：

<label for="sex">男</label>
<input type="radio" name="sex" id="sex">

💡 注意

<label>标签的 for 属性应当与相关元素的id 属性相同；

简单来说，label标签就是扩大了点击的面积，直接点击选项即可进行输入或者按钮的选择；

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>0506_Page_2_label标签</title>
</head>

<body>
    <form>
        <label for="text">用户名：</label> <input type="text" name="username" id="text"> <br>

        性别：<input type="radio" name="Gender" value="Man" id="Man"> <label for="Man">男</label> <input type="radio"
            name="Gender" value="Female" id="Female"> <label for="Female">女</label>

    </form>

</body>

</html>

3.2.2.3. select下拉表单元素

使用场景：在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，我们可以使用<select>标签控件定义下拉列表。

1.<select>中至少包含一对<option>

2.在<option>中定义selected="selected"时，当前项即为默认选中项。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>0506_Page_3_下拉标签</title>
</head>

<body>

    <form>

        籍贯：
        <select>
            <option>陕西</option>
            <option>北京</option>
            <option selected="selected">湖北</option>

        </select>

    </form>

</body>

</html>

3.2.2.4. textarea 文本域元素

使用场景: 当用户输入内容较多的情况下，我们就不能使用文本框表单了，此时可以使用 <textarea>标签。在表单元素中，<textarea>标签是用于定义多行文本输入的控件。

使用多行文本输入控件，可以输入更多的文字，该控件常见于留言板，评论。

<textarea rows="3"cols="20">
文本内容
</textarea>

💡 注意

cols=“每行中的字符数”，rows=“显示的行数”，这两个参数在实际开发中不会使用，都是用 CSS 来改变大小。

4. 综合案例

结合了表格标签、表单标签和列表标签

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>0506_Page_5_综合案例之相亲网站注册</title>
</head>

<body>
    <h1>青春不常在，抓紧谈恋爱</h1>

    <form>

        <table cellpadding="15" cellspacing="0" width="800">
            <!-- 第一行 -->
            <tr>
                <td>性别</td>
                <td><input type="radio" name="Gender" value="Man" id="Man"> <label for="Man"> <img src="images\man.png">
                        男</label>
                    <input type="radio" name="Gender" value="Female" id="Female"> <label for="Female"> <img
                            src="images/female.png"> 女</label>
                </td>
            </tr>

            <!-- 第二行 -->
            <tr>
                <td>生日</td>
                <td>
                    <select name="Year">
                        <option>--请选择年份--</option>
                        <option>2000</option>
                        <option>1999</option>
                        <option>1998</option>
                        <option>1997</option>
                        <option>1996</option>
                        <option>1995</option>
                        <option>1994</option>
                        <option>1993</option>
                    </select>
                    <select name="月">
                        <option>--请选择月份--</option>
                        <option>12月</option>
                        <option>11月</option>
                        <option>10月</option>
                        <option>9月</option>
                        <option>8月</option>
                        <option>7月</option>
                        <option>6月</option>
                        <option>5月</option>
                        <option>4月</option>
                        <option>3月</option>
                        <option>2月</option>
                        <option>1月</option>
                    </select>
                    <select name="日">
                        <option>--请选择日期--</option>
                        <option>31日</option>
                        <option>30日</option>
                        <option>29日</option>
                        <option>28日</option>
                        <option>27日</option>
                        <option>26日</option>
                        <option>25日</option>
                        <option>24日</option>
                        <option>23日</option>
                        <option>22日</option>
                        <option>21日</option>
                        <option>20日</option>
                        <option>19日</option>
                        <option>18日</option>
                        <option>17日</option>
                        <option>16日</option>
                        <option>15日</option>
                        <option>14日</option>
                        <option>13日</option>
                        <option>12日</option>
                        <option>11日</option>
                        <option>10日</option>
                        <option>9日</option>
                        <option>8日</option>
                        <option>7日</option>
                        <option>6日</option>
                        <option>5日</option>
                        <option>4日</option>
                        <option>3日</option>
                        <option>2日</option>
                        <option>1日</option>
                    </select>
                </td>
            </tr>

            <!-- 第三行 -->
            <tr>
                <td>所在地区</td>
                <td> <input type="text" value="请输入您所在地区，如北京"> </td>
            </tr>

            <!-- 第四行 -->
            <tr>
                <td>婚姻状况</td>
                <td> <input type="radio" name="marrige" value="notMarried" id="notMarried"> <label
                        for="notMarried">未婚</label>
                    <input type="radio" name="marrige" value="married" id="married"> <label for="married">已婚</label>
                    <input type="radio" name="marrige" value="divorced" id="divorced"> <label for="divorced">离婚</label>
                </td>
            </tr>

            <!-- 第五行 -->
            <tr>
                <td>学历</td>
                <td> <input type="text" name="education" value="请输入您的最高学历"> </td>
            </tr>

            <!-- 第六行 -->
            <tr>
                <td>喜欢的类型</td>
                <td><input type="checkbox" name="LikeType" value="hot" id="hot"> <label for="hot">妩媚的</label>
                    <input type="checkbox" name="LikeType" value="cute" id="cute"> <label for="cute">可爱的</label>
                    <input type="checkbox" name="LikeType" value="young" id="young"> <label for="young">小鲜肉</label>
                    <input type="checkbox" name="LikeType" value="old" id="old"><label for="old">老腊肉</label>
                    <input type="checkbox" name="LikeType" value="all" id="all"><label for="all">都喜欢</label>
                </td>
            </tr>

            <!-- 第七行 -->
            <tr>
                <td>自我介绍</td>
                <td> <textarea>自我介绍</textarea> </td>
            </tr>

            <!-- 第八行 -->
            <tr>
                <td></td>
                <td>
                    <input type="submit" value="免费注册">
                </td>
            </tr>

            <!-- 第九行 -->
            <tr>
                <td></td>
                <td>
                    <input type="checkbox" name="IsAgree" value="agree" checked="checked"> 我同意注册条款和会员加入标准
                </td>
            </tr>

            <!-- 第十行 -->
            <tr>
                <td></td>
                <td>
                    <a href="http://www.baidu.com" target="_blank">我是会员，立即登录</a>
                </td>
            </tr>

            <!-- 第十一行 -->
            <tr>
                <td></td>
                <td>
                    <h2>我承诺</h2>
                    <ul>
                        <li>年满18岁、单身</li>
                        <li>抱着严肃的态度</li>
                        <li>真诚寻找另一半</li>
                    </ul>

                </td>
            </tr>

        </table>

    </form>

</body>

</html>

5. 查阅文档

可以利用搜索引擎查阅自己遗忘的标签的使用方法；

第三个实时更新，可以随时查，里面标注了哪里属性已经弃用

html学习_part2资料
08-13
在“html学习_part2资料”中，我们可以深入探讨HTML的重要概念、语法结构以及它在网络应用中的关键作用。 HTML由一系列元素组成，这些元素通过标签来定义。例如，`<html>`标签是文档的根元素，`<head>`包含元数据，...
HTML标签的overflow处理用应
09-28
然而，现代浏览器通常使用更复杂的方法来实现自定义滚动条样式，如使用伪元素`::webkit-scrollbar`和`::webkit-scrollbar-part`。这种方法在Chrome、Safari和Firefox等现代浏览器中是有效的，但在IE中无效。 以下是...
Tim-Part2
03-28
"Tim-Part2"可能是指一个关于HTML学习或项目的第二部分，由多个子文件组成，具体文件名未给出，但我们可以根据HTML的常规结构和组成部分来探讨相关知识点。 1. HTML基本结构：HTML文档通常以`<!DOCTYPE html>`声明...
HTML--PART-1:HTML基础
03-11
2. <html>: 这是整个HTML文档的根元素。 3. <head>: 包含元信息，如文档标题、字符集设置等，不直接显示在页面上。 4. <body>: 存放网页可见内容，如文本、图像、链接等。 三、HTML元素 HTML元素由开始标签、内容和...
data-lab4-part2-af
04-15
在本压缩包“data-lab4-part2-af”中，我们可以看到与HTML相关的学习资料。HTML（HyperText Markup Language）是网页制作的基础语言，用于描述网页内容和结构。让我们深入探讨HTML的一些核心概念和重要知识点。 1. ...
微前端的不断探索之路—— qiankun 实战与思考！
喵手的博客
04-10 589
前端世界的技术更新频率就像是一场没有终点的马拉松，快到你刚熟悉一个框架，下一个趋势就已经掀起了新的浪潮。而近年来，微前端作为“架构界的顶流”，用它的灵活性和模块化特性给我们带来了全新的开发思路。今天，咱们就来聊聊微前端框架中的**“网红”选手**——qiankun。从它的基础概念到实战案例，再到我们在实际开发中的一些思考，希望带你更深地感受这个框架的魅力。qiankun是基于single-spa简单易用：开箱即用，几乎没有学习成本；完整性：解决了主流微前端框架的坑点，比如样式隔离、JS 沙箱等；
react动态路由
2302_80798583的博客
04-08 415
4.根据用户是否是管理员，合并normalroutes得到hasRoutes数组。1.定义normalroutes数组，包含普通用户默认访问的页面。3.定义adminroutes数组，包含所有用户默认访问的页面。2.定义adminroutes数组，包含管理员默认访问的页面。在每个路由中使用相应的权限过滤规则。
2.4、Vue2计算属性
GQL___的博客
04-11 664
使用Vue的原有属性，经过一系列的运算/计算，最终得到了一个全新的属性，叫做计算属性。Vue的原有属性: data对象当中的属性可以叫做Vue的原有属性。全新的属性: 表示生成了一个新的属性，和data中的属性无关了，新的属性也有自己的属性名和属性值。(1) 以上比较大小的案例可以用computed完成，并且比watch还要简单。所以要遵守一个原则：computed和watch都能够完成的，优先选择computed。(2) 如果要开启异步任务，只能选择watch。因为computed依靠return。
前端学习10—Ajax
最新发布
weixin_49157844的博客
04-11 618
XML（可扩展标记语言），被设计用来传输和存储数据，XML 和 HTML 类似，不同的是 HTML 中都是预定义标签，而 XML 中没有预定义标签，全都是自定义标签，用来表示一些数据比如有个学生数据：name = "孙悟空";age = 18;gender = "男";
vue3的router.ts中，在children和不在的区别
qq_62893228的博客
04-09 374
【代码】vue3的router.ts中，在children和不在的区别。
JS 函数提升
vain_soloist的博客
04-09 247
在执行前会把当前作用域下的函数声明提升到最前面 ，不提升函数调用。特殊的，使用函数表达式声明的函数没有函数提升。函数在声明前就可被使用。
vue实现目录锚点且滚动到指定区域时锚点自动回显——双向锚点
yehaocheng520的博客
04-09 288
vue实现目录锚点且滚动到指定区域时锚点自动回显——双向锚点
Payload CMS 内容管理系统
qq_25547755的博客
04-10 621
Payload CMS 内容管理系统
⭐算法OJ⭐滑动窗口最大值【双端队列(deque)】Sliding Window Maximum
大葱的田地🌱
04-07 344
双端队列(deque，全称double-ended queue)是C++标准模板库(STL)中的一个容器适配器，它允许在队列的两端高效地进行插入和删除操作。滑动窗口最大值是一个经典的算法问题，我们需要找到数组中每个大小为k的滑动窗口中的最大值。我们可以使用双端队列(deque)来高效解决这个问题。主要思路是维护一个双端队列，队列中存储的是数组元素的索引，且队列中的元素按照从大到小的顺序排列。这样可以保证队列前端始终是当前窗口的最大值。
OpenBMC：BmcWeb 处理http请求7 完成http请求
风静如云的博客
04-09 204
上面说的特点其实是其析构函数，当最后一个被捕获的shared_ptr析构时(也就是完成了所有的响应数据的设置后)，shared_ptr会调用AsyncResp的析构函数，也就是调用了res.end();其实 AsyncResp类很简单，里面有一个crow::Response类型，用于保存响应数据。说过，由于AsyncResp设计的特点，需要捕获asyncResp的值[asyncResp]可以看到asyncResp是一个shared_ptr。1.AsyncResp类。构造了asyncResp。
传统项目纯前端实现导出excel之xlsx.bundle.js
qq_43016560的博客
04-10 308
自从vue问世后，使得前端开发更加简洁从容，极大的丰富组件样式和页面渲染效果，使得前端功能的可扩展性得到极大地加强。虽然vue的使用对于前后端分离的项目对于功能实现与扩展有了质的飞跃，但仍旧有些传统的项目步履维艰，功能延伸性开发束手束脚，效率相对低下，就比如在某些mvc+jsp页面要实现excel的导出功能，有时候会后端框架封装的约束，这个时候直接在前端实现excel导出，就变的极为方便。本文介绍一款js插件——xlsx.bundle.js
Element Plus 图标使用方式整理
爱的叹息的专栏
04-10 1102
Element Plus 图标使用方式整理
前端基础：React项目打包部署服务器教程
destinyol的博客
04-08 325
react项目服务器部署教程
用 Vue 3 + D3.js 实现动态数据流图
idree的博客
04-11 532
用 Vue 3 + D3.js 实现动态数据流图
深入探究HTML技术：Tim-Part2解析
资源摘要信息:"由于提供的文件信息中标题、描述和标签都是"Tim-Part2"，且未提供具体的文件内容或详细描述，因此无法直接生成具体的知识点。但根据文件的标签"HTML"，我们可以推测这个文件可能与HTML相关的教学、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值