程序员经验分享-hwhale

web基础（二）---------列表、表格、表单

2023-11-09

目录

一、前言

二、正文

1、列表

（1）无序列表

（2）有序列表

（3）自定义标签

2、表格

3、表单

（1）input：根据type属性不同，展示不同效果

（2）input：占位符（提示信息）

（3）表单域(划分提交、重置的作用域)： form

（4）普通按钮修改文字，用value来设置文字内容

（5）select下拉菜单标签

（6）文本域

（7）label标签:用于绑定内容与表单标签的关系

（8）手机端经常使用的有语义的布局标签

（9）字符实体

三、案例

1、表格案例------班级信息

2、表单案例----用户注册

一、前言

这篇主要是对列表、表格、表单的使用来做一个记录！！

二、正文

1、列表

（1）无序列表

  • ul无序列表里面的列表：li
  • ul标签中只允许包含li标签，li标签可以包含任意内容

    <ul>

        <li>榴莲</li>

        <li>香蕉</li>

        <li>苹果</li>

        <li>哈密瓜</li>

        <li>火龙果</li>

    </ul>

（2）有序列表

  • ol无序列表里面的列表：li

    <ol>

        <li>张三:103</li>

        <li>李四:102</li>

        <li>王五:100</li>

    </ol>

（3）自定义标签

  • dl：表示自定义列表的整体，用于包裹dt、dd标签
  • dd：表示自定义列表的主题
  • dt：表示自定义列表的针对主题的每项内容

    <dl>

    <dt>帮助中心</dt>

    <dd>账户管理</dd>

    <dd>购物指南</dd>

    <dd>订单操作</dd>

    </dl>

2、表格

  • table 表格整体，可用于包裹多个tr
  • tr 表格每行，可用于包裹td
  • td 表格单元格，可用于包裹内容
  • 表格大标题：caption
  • 表头单元格：th
  • thead:表格头部
  • tbody:表格主体
  • tfoot:表格底部
  • 合并单元格：rowspan---跨行合并，把不同行的合并在一起;colspan---跨列合并，把不同列的合并在一起

  • 只有同一个结构标签中的单元格能合并， 不能跨结构标签合并（不能跨：thead、tbody、tfoot）

    <table border="1" width="500" height="20">

       <caption><h1>员工名单</h1></caption>

        <thead>  

            <tr>

            <th>姓名</th>

            <th>性别</th>

            <th>年龄</th>

            </tr>

        </thead>

        <tbody>

            <tr>

            <td>王五</td>

            <!-- 跨行合并 -->

            <td rowspan="2">男</td>

            <td>20</td>

            </tr>

            <tr>

            <td>李四</td>

            <td>23</td>

            </tr>

        </tbody>

        <tfoot>

            <tr>

                <td>总结</td>

                <!-- 跨列合并 -->

                <td colspan="2">都非常的优质</td>

            </tr>

        </tfoot>

    </table>

3、表单

（1）input：根据type属性不同，展示不同效果

    文本框：<input type="text">

    密码框：<input type="password">  

    单选框：<input type="radio">

    多选框：<input type="checkbox">

    上传文件：<input type="file">

    提交按钮：<input type="submit">

    重置按钮：<input type="reset">

    普通按钮：<input type="button">

（2）input：占位符（提示信息）

  • placeholder,提示用户输入内容的文本，占位符

<input type="text" placeholder="请输入账户">

<input type="password" placeholder="请输入密码">

  • name：分组，有相同name属性值的单选框为一组，一组同时只能有一个被选中
  • checked：默认选中

性别：<input type="radio" name="sex" checked>男<input type="radio" name="sex">女

同意：<input type="checkbox" checked>

  • multiple：上传多个文件

上传文件<input type="file" multiple>

（3）表单域(划分提交、重置的作用域)： form

  • input----提交、重置按钮,按钮用表单域来划分控制范围

    <form action="">

        账号：<input type="text">

        密码：<input type="password"><br>

        <input type="submit" value="确认">

        <input type="reset">

    </form>

（4）普通按钮修改文字，用value来设置文字内容

  • 注意点：谷歌浏览器中button默认是提交按钮

 <button>我是按钮</button>

        <button type="submit">提交按钮</button>

        <button type="reset">重置按钮</button>

        <button type="button">普通按钮，没有任何功能</button>

（5）select下拉菜单标签

  •  select标签：下拉菜单标签
  • option标签：下拉菜单的每一项
  • selected:下拉菜单的默认选中

    <select name="" id="">

        <option value="" selected>北京</option>

        <option value="" >上海</option>

        <option value="">广州</option>

    </select>

（6）文本域

  • textare文本域标签：在网页中提供可输入多行文本的表单控件
  • cols：文本域可见宽度
  • rows:文本域可见行数

  个性签名：<textarea name="" id="" cols="20" rows="10">请输入个性签名（50字以内）</textarea>

（7）label标签:用于绑定内容与表单标签的关系

  • 实现点击文字也能实现选中效果的方法如下：
  • 方法一：

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

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

  • 方法二：

    民族：

    <label><input type="radio" name="a"> 汉</label>

    <label><input type="radio" name="a">其他民族</label>

（8）手机端经常使用的有语义的布局标签

    <header>网页头部</header>

    <nav>网页导航</nav>

    <footer>网页底部</footer>

    <aside>网页侧边栏</aside>

    <section>网页区块</section>

    <article>网页文章</article>

（9）字符实体

  • 网页不认识多个空格，只认识一个
  • 空格：&nbsp;

 <p>这要放空格&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;，放好了</p>

三、案例

1、表格案例------班级信息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简单案例-----表格</title>
</head>
<body>
    <table border="1" width="500" height="50">
        <caption>
            <h1>优秀学生信息表格</h1>
        </caption>
        <thead>
            <tr>
                <th>年级</th>
                <th>姓名</th>
                <th>学号</th>
                <th>班级</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th rowspan="3">高三</th>
                <th>张三</th>
                <th>01</th>
                <th>一班</th>
            </tr>
            <tr>                
                <th>李四</th>
                <th>02</th>
                <th>一班</th>
            </tr>
            <tr>
                <th>王五</th>
                <th>03</th>
                <th>二班</th>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th>总人数</th>
                <th colspan="3">3</th>
            </tr>
        </tfoot>
    </table>

</body>
</html>

  • 演示效果：

2、表单案例----用户注册

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简单案例-----表单</title>
</head>
<body>
    <h1>欢迎注册</h1>
    <p>已有账号？<a href="#">登录</a></p>
    <form action="">
    <p>
        用户名:<input type="text" placeholder="请输入用户名">
    </p> 
    <p>
        密码：<input type="password" placeholder="请输入六位数密码">
    </p>
    <p>
        手机号：<input type="text" placeholder="+86">
    </p>
    <p>
        性别：<label>    <input type="radio" name="sex" checked>男</label>
             <label >    <input type="radio" name="sex">女<br></label>
    </p>
    <p>
        所在城市：
        <select name="" id="">
            <option value="" selected>广州</option>
            <option value="">上海</option>
            <option value="">深圳</option>
        </select>
    </p>
    <p>
        兴趣爱好：
        <label><input type="checkbox" checked>游泳 </label>
        <label><input type="checkbox">滑雪 </label>
        <label><input type="checkbox">赛马 </label>
        <label><input type="checkbox">篮球 </label>
        <label><input type="checkbox">其它 </label>        
    </p>
    <p>
        个人签名：<br>
        <textarea name="" id="" cols="30" rows="10">请输入个性签名（50字以内）</textarea>
    </p>
    <p>
        <button type="submit">提交注册</button>
        <input type="reset" value="重新注册">
    </p>
    <p>
        <label><input type="checkbox" >同意相关<a href="#">条款</a></label>
    </p>
    </form>
</body>
</html>
  • 演示效果：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

web开发

Web

html5

web基础（二）---------列表、表格、表单 的相关文章

  • 如何使用 mysql 从 php 中的表中返回多行

    我决定为我的家人建立一个梦幻足球网站 但我无法从数据库返回多行 我想要的 进行一次 sql 调用并获取整个玩家列表 以便我可以填充一个对象或对象列表 如果整个桌子都可以归还那就太好了 我的目标是简单地向用户显示待选秀的可用球员列表 目前 通

  • Firebase 9（模块化 sdk web ）替换 fieldPath

    我将以下代码与 Firebase SDK 8 一起使用 const db firebase firestore const collectionRef db collection collectionName var query colle

  • VM1550 installHook.js:1860 在控制台中记录为双行

    我正在使用反应应用程序并构建一个简单的应用程序 当我使用 console log 方法在控制台上记录某些内容时 控制台上会出现第二条日志 它似乎来自第 1860 行的文件名 installHook js 我已经尝试过寻找它 但我没有找到 我

  • Ant Design Collapse - 关闭按钮

    我是 Ant Design 的初学者 在使用 Ant Design 库中的 Collapse 和 Form 时遇到了这个问题 我已经设置了我的页面 其中添加新项目的表单位于折叠中 并且折叠下方有一个项目列表

  • 从网站获取数据的vba代码

    我是这个网站和 VBA 编程的新手 我遇到了一个问题 我必须从中获取数据这一页 http www kieskeurig nl zoeken index html q 4960999543345 我需要有超链接网址Check Rates 10

  • 使用 hg 存储库作为网站

    这与我的安全问题有些相关here https stackoverflow com questions 2361626 security deny access to hg via mod rewrite 对实时网站使用 hg Mercuri

  • 尝试访问我的网站时出现内部服务器错误

    我收到这个错误 内部服务器错误 服务器遇到内部错误或配置错误 无法完成您的请求 请联系服务器管理员 电子邮件受保护 cdn cgi l email protection和 告知他们错误发生的时间以及您可能会发生的任何事情 所做的事情可能导致

  • Electron 应用程序可以与 java 代码集成吗？

    由于node js仍然缺乏Java中存在的重要功能 因此我想使用Java而不是node js 并使用Web语言 html js css 创建客户端 Electron 是跨平台的 java 也是跨平台的 因此似乎有一个能够两全其美的解决方案

  • 创建默认应用程序时 FirebaseOptions 不能为 null

    我正在尝试在 Flutter 集成电子邮件和基于 google 的登录中尝试一个示例项目 并计划使用 firebase 初始化来执行此操作 同时我已按照教程中提到的所有步骤进行操作 一旦尝试使用 firebase 我就会收到此错误已初始化

  • WebUSB 和 RFID 读取器

    我想知道是否有人有让 RFID 读取器通过 WebUSB 工作的经验 我使用的阅读器是https www parallax com product 28340 https www parallax com product 28340 根据我

  • HTML if 语句在 CDN 失败时加载本地 JS/CSS

    当从 CDN 或任何外部服务器加载 CSS JS 文件时 有可能 即使概率很低 由于外部故障而丢失该文件 在这种情况下 html 页面将因缺乏适当的 CSS 和 JS 而被损坏 有没有一种实用的方法可以在 CDN 故障时加载本地版本 IF

  • 如何在odoo中重写js函数

    我想加载 shop checkout url 函数是 odoo define change info order website sale change info order function require use strict oe w

  • 我应该将标签存储在文本字段还是单独的表中？

    我有一个表 其中的行如下所示 id path tags 1 pictures pic1 jpg car bmw 3 pictures pic2 jpg cat animal pussy 4 pictures pic3 png gun 基本上

  • 为什么使用HTTP协议时需要指定端口号？

    即使我们使用HTTP协议 为什么还需要用IP地址指定端口号 例如 http xyz 8080 这到底是什么意思 我们已经知道 在使用 HTTP 时 请求将在端口 80 上提供服务 那么为什么我们要显式指定端口呢 HTTP 的默认端口为 80

  • 为什么要使用除 div 以外的任何东西？ [关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi

  • 在 Tomcat 上部署 Java Web 项目，无需 WAR 或 EAR

    我有一个 Java Web 项目 Struts Spring 在我的本地主机上完美运行 我必须将其部署在我的网站上 但虚拟主机提供的 Tomcat Manager 界面显示 由于安全原因 它无法上传 WAR 文件 当联系技术支持时 我被告知

  • 使用“邮递员”chrome 应用程序的肥皂请求正文

    假日网络服务 的肥皂请求正文会是什么样子 http www holidaywebservice com HolidayService v2 HolidayService2 asmx wsdl http www holidaywebservi

  • Magento：设置刚刚创建的网站的配置值？

    我正在以编程方式创建网站 用户等 问题是 创建网站时 我无法立即设置配置值 Code

  • Netty Nio java 中的通信

    我想在 Netty nio 中创建一个具有两个客户端和一个服务器的通信系统 更具体地说 首先 我希望当两个客户端与服务器连接时从服务器发送消息 然后能够在两个客户端之间交换数据 我正在使用本示例提供的代码 https github com

  • Safari 的“阅读器模式” - 开源解决方案？ [关闭]

    Closed 这个问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 Safari 有一个 阅读器模式 可以删除网站上除文本之外的所有内容 有谁知道提供相同功能的开源库 或

随机推荐

  • Opencv的基础操作

    一 图像填充 首先定义图像显示函数 def cv show name img cv2 imshow name img cv2 waitKey 0 cv2 destroyAllWindows 图像读取 img cat cv2 imread c

  • 一定能让你理解的素数筛法——埃氏筛法和欧式筛法

    先上代码 埃氏筛法 include

  • 卸载Docker方法

    卸载步骤 在安装Autoware库的时候安装了Docker 发现电脑硬盘容量被占用不少 现在想卸载一下docker 查找了很多资料 最终使用以下方法完整卸载 1 在配置autoware的时候其实安装的docker ce 所以需要执行 sud

  • Nginx基本使用

    一 Nginx作用 1 HTTP服务器 2 反向代理 3 负载均衡 4 正向代理 5 虚拟主机 等 二 Nginx安装 1 下载nginx最新稳定版 windows nginx 1 14 0 2 解压 备注 如上图 配置关键配置文件后 双击

  • 基于tensorflow实现手写数字识别

    实验目的 了解机器学习的相关知识 实现基于tensorflow的手写数字识别 实验环境 ubuntu16 04 或 windows python 3 默认安装版本 tensorflow 2 0 版本以上 或其他深度学习框架 实验内容 实现基

  • 内网穿透-Natapp实现免费远程桌面

    很多人都在使用Teamviewer访问远程桌面 但收费很贵 而且经常有一些安全漏洞 下面教大家一个免费安全的远程桌面方法 打开Natapp主页 https natapp cn 点击 立即下载 按钮 下载操作系统匹配的客户端 下载之后 解压至

  • 可能是史上最全的Kubernetes证书解析

    为了避免广告法 题目还是加个可能吧 想要安全就必须复杂起来 证书是少不了的 在Kubernetes中提供了非常丰富的证书类型 满足各种不同场景的需求 今天我们就来看一看Kubernetes中的证书 k8s证书分类 在说证书之前 先想想作为集

  • Shiro简单配置Springboot版（1）

    1 权限的管理 1 1 什么是权限管理 基本上涉及到用户参与的系统都要进行权限管理 权限管理属于系统安全的范畴 权限管理实现对用户访问系统的控制 按照安全规则或者安全策略控制用户可以访问而且只能访问自己被授权的资源 权限管理包括用户身份认证

  • 【论文速递】CCDC2021 - 轻量级网络的结构化注意知识蒸馏

    论文速递 CCDC2021 轻量级网络的结构化注意知识蒸馏 论文原文 Structured Attention Knowledge Distillation for Lightweight Networks 获取地址 https ieeex

  • 【文献调研】再入院预测（1）

    1 基于MIMIC 3数据库的心衰患者诊断与再入院模型研究 1 1 文献来源 太原理工大学 2022年6月 1 2 摘要 背景 利用深度学习去大规模的分析电子健康记录数据仍具有极大的挑战 基于大量医学文本 及时识别心力衰竭患者并建立再入院预

  • 高斯混合模型（GMM）和EM算法详解

    小白一枚 接触到GMM和EM 现将学习到的整理出来 如有错误 欢迎指正 文中涉及到公式的推导比较繁琐 故先在纸上推导出来再拍照发出来 希望大家多多交流 共同进步 接下来将按照思路一步一步进行介绍 1 单高斯模型GSM 一维 单高斯模型很简单

  • 车联网环境下自动驾驶的协同感知技术综述

    论文标题 Cooperative Perception Technology of Autonomous Driving in the Internet of Vehicles Environment A Review 发表期刊 会议 Se

  • SQLServer的基本语句(增，删，改)_02

    SQLserver语句不区分大小写 1 创建数据库 create database hhh hhh为数据库名称 创建一个名为hhh的数据库 2 删除数据库 drop database hhh 删除名为hhh的数据库 两者一般写为 if ex

  • 5、Nginx 配置实例-负载均衡

    文章目录 5 Nginx 配置实例 负载均衡 5 1 实现效果 5 2 准备工作 5 3 实验代码 5 3 1 轮询 默认 5 3 2 weight 5 3 3 ip hash 5 3 4 fair 第三方 尚硅谷 尚硅谷Nginx教程由浅

  • mesh和wifi中继的区别_科普：路由器的无线中继和Mesh的区别是什么？

    大户型和越层户型等改善型性房型越来越普及了 但是这些用户却也面临WiFi网络越来越差的窘境 如何改善WiFi网络就成为了迫在眉睫需要解决的问题 在无线路由的早期 不少人都习惯于使用无线中继的方式来解决这个问题 无线中继组网就是利用AP的无线

  • Web之html、css

    目录 前言 一 HTML 1 定义 2 标签 基本标签 表格标签 表单标签 其他标签及符号 3 属性 二 CSS 1 定义 2 标签选择器 3 基本样式设置 总结 前言 本文主要讲述后端开发者需要的基本web知识点 讲述了html css的

  • element ul中el-calendar日历组件自定义快捷选择年月

    需求 以日历形式展现当前页面 其中 年月可进行下拉选择 默认选中任意月份 用户可以自由点选日期 实现效果 时间筛选

  • linux 指令 间隔,Linux基础命令（五）

    Linux信息显示和搜索文件命令 1 uname 显示系统信息 参数 a显示所有信息 v显示内核版本 n显示主机名称 p显示处理器类型 r显示内核发行版本号 i显示硬件平台 m显示计算机硬件架构 root localhost dir una

  • Camera sensor 基本原理

    1 Camera 工作原理介绍 1 1 结构 一般来说 camera 主要是由 lens 和 sensor IC 两部分组成 其中有的 sensor IC 集成 了 DSP 有的没有集成 但也需要外部 DSP 处理 细分的来讲 camera

  • web基础（二）---------列表、表格、表单

    目录 一 前言 二 正文 1 列表 1 无序列表 2 有序列表 3 自定义标签 2 表格 3 表单 1 input 根据type属性不同 展示不同效果 2 input 占位符 提示信息 3 表单域 划分提交 重置的作用域 form 4 普通

热门标签