Web前端一套全部清晰 ⑤ day3 列表 表格 表单标签 综合案例

人生是一直向前无法倒退的旅程,所以可以偶尔回头,但一定要往前看

                                                                                                —— 24.4.29

一、综合案例1-体育新闻列表

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>体育新闻</title>
</head>
<body>
    <ul>
        <li>
            <img src="./案例1.1.jpg" alt="">
            <h3>
                主帅安东尼奥回西班牙休假,国青抵达海口进行隔离
            </h3>
        <li>
            <img src="./案例1.2.jpg" alt="">
            <h3>
                梅州主帅:申花有强有力的教练组,球员体能水平高
            </h3>
        </li>
        <li>
            <img src="./案例1.3.jpg" alt="">
            <h3>
                马德兴:00后球员将首登亚洲舞台,调整心态才务实
            </h3>
        </li>
    </ul>
</body>
</html>

页面显示

二、综合案例2 - 注册信息 

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册信息</title>
</head>
<body>
    <h1>
        注册信息
    </h1>
    <form action="">
        <!-- 表单控件 -->
        <!-- 个人信息 -->
        <h2>个人信息</h2>
            <!-- 提示文本,用label标签 -->
            <label>姓名:</label><input type="text" placeholder="请输入真实姓名">
            <br><br>
            <label>密码</label><input type="password" placeholder="请输入密码">
            <br><br>
            <label>确认密码</label><input type="password" placeholder="请输入确认密码">
            <br><br>
            <label>性别:</label>
            <!-- name属性让二选一 checked属性默认选择 -->
            <label><input type="radio" name="gender">男</label>
            <label><input type="radio" name="gender" checked>女</label>
            <br><br>
            <label>居住城市:</label>
            <select>
                <option>北京</option>
                <option>上海</option>
                <option>广州</option>
                <option>深圳</option>
                <option>成都</option>
            </select>
        <!-- 教育经历 -->
        <h2>教育经历</h2>
        <!-- 提示文本,用label标签 -->
        <label>最高学历:</label>
        <select>
            <option>博士</option>
            <option>硕士</option>
            <option>学士</option>
            <option>大专</option>
        </select>
        <br><br>
        <label>学校名称:</label>
        <input type="text">
        <br><br>
        <label>所学专业:</label>
        <input type="text">
        <br><br>
        <label>在校时间:</label>
        <select>
            <option>2015</option>
            <option>2016</option>
            <option>2017</option>
            <option>2018</option>
        </select>
        ——
        <select>
            <option>2019</option>
            <option>2020</option>
            <option>2021</option>
            <option>2022</option>
        </select>
        <!-- 工作经历 -->
        <h2>工作经历</h2>
        <label>公司名称:</label>
        <input type="text">
        <br><br>
        <label>工作描述</label>
        <br>
        <textarea></textarea>
        <br><br>
        <!-- 协议和按钮 -->
        <!-- 协议 -->
        <input type="checkbox">
        <label>已阅读并同意以下协议:</label>
        <ul>
            <li><a href="">《用户服务协议》</a></li>
            <li><a href="">《隐私政策》</a></li>
        </ul>
        <br><br>
        <button>免费注册</button>
        <!-- 清空重置功能 -->
        <button type="reset">重新填写</button>
    </form>
</body>
</html>

页面显示:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/584670.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

优化NGINX性能:使用NGINX_THREADS提高并发处理能力

目录标题 1. 什么是NGINX_THREADS&#xff1f;2. 配置NGINX_THREADS3. 使用NGINX_THREADS处理耗时操作4. 性能调优5. 结论 NGINX作为一个高性能的HTTP和反向代理服务器&#xff0c;在处理高并发请求时表现出色。但随着互联网应用对性能要求的不断提高&#xff0c;深入了解和优化…

AOSP源码开发

AOSP源码开发 Author: cpu_codeDate: 2020-07-11 16:18:27LastEditTime: 2020-07-12 21:08:41FilePath: \note\android_bottom\summary.mdGitee: https://gitee.com/cpu_codeGithub: https://github.com/CPU-CodeCSDN: https://blog.csdn.net/qq_44226094Gitbook: https://923…

【Leetcode每日一题】 综合练习 - 找出所有子集的异或总和再求和(难度⭐)(68)

1. 题目解析 题目链接&#xff1a;1863. 找出所有子集的异或总和再求和 这个问题的理解其实相当简单&#xff0c;只需看一下示例&#xff0c;基本就能明白其含义了。 2.算法原理 算法思路与实现 为了求解给定整数数组的所有子集并将其异或和相加&#xff0c;我们可以采用递…

【GO】命令行解析 os 与 flag

目录 OS解析命令 简单用法 进阶用法 flag命令解析 基础实例 1. 自定义数据类型 2. 创建多个 FlagSet 3. 整合环境变量和配置文件 os与flag 关键点解析 程序的作用 示例命令行调用 在 Go 语言中&#xff0c;命令行解析是一项基本且常用的功能&#xff0c;它允许开发者…

【Linux系统编程】第十一弹---编辑器vim使用

✨个人主页&#xff1a; 熬夜学编程的小林 &#x1f497;系列专栏&#xff1a; 【C语言详解】 【数据结构详解】【C详解】【Linux系统编程】 目录 1、vim的基本概念 2、vim的基本操作 3、vim插入模式命令集 4、vim正常(命令)模式命令集 5、vim末行模式命令集 6、vim操作…

C/C++程序设计实验报告综合作业 | 小小计算器

本文整理自博主本科大一《C/C程序设计》专业课的课内实验报告&#xff0c;适合C语言初学者们学习、练习。 编译器&#xff1a;gcc 10.3.0 ---- 注&#xff1a; 1.虽然课程名为C程序设计&#xff0c;但实际上当时校内该课的内容大部分其实都是C语言&#xff0c;C的元素最多可能只…

mac用Homebrew安装MySQL并配置远程登录

1. 简介 MySQL 是一个开源的关系型数据库管理系统&#xff08;RDBMS&#xff09;&#xff0c;由瑞典 MySQL AB 公司开发&#xff0c;后被 Oracle 公司收购。MySQL 使用 SQL&#xff08;Structured Query Language&#xff09;作为查询语言&#xff0c;并提供了强大的功能和性能…

鸿蒙开发面试真题——面向对象

鸿蒙开发面向对象的面试题是近年来在软件开发领域中备受关注的话题。作为一种新兴的操作系统&#xff0c;鸿蒙系统的开发者需要具备扎实的面向对象编程知识和丰富的开发经验。在面试中&#xff0c;面试官常常会通过一系列的问题来考察面试者对于鸿蒙开发面向对象的理解和应用能…

ES 深度分页问题及针对不同需求下的解决方案[ES系列] - 第509篇

历史文章&#xff08;文章累计500&#xff09; 《国内最全的Spring Boot系列之一》 《国内最全的Spring Boot系列之二》 《国内最全的Spring Boot系列之三》 《国内最全的Spring Boot系列之四》 《国内最全的Spring Boot系列之五》 《国内最全的Spring Boot系列之六》 《…

春游江淮 请来池州 | 五一池州文旅活动时间表大集合,都在这里

快到五一,想好去哪里玩吗?来池州,各景区缤纷活动登场&#xff0c; 速速划重点、敲黑板! 五一放大招!到底怎么玩?文旅活动、阅读推广 非遗展示......现在都已经为你整理好啦!这份超齐全的 五一假期文旅活动时间表,助力您玩转各景区,整个假期嗨不停~ 旅游惠民活动 表演类活动…

salesforce 如何访问lwc组件

访问lwc有哪些途径呢? Action ButtonTabAura use lwc(拓展)如何区分是新建页面还是编辑页面 Action Button xml文件中要配置tab<?xml version"1.0" encoding"UTF-8"?> <LightningComponentBundle xmlns"http://soap.sforce.com/2006/04/…

使用fitten code插件(vscode),替换通义千问,识别需求中的输入输出

今天我们介绍一个工具,具体介绍可以参考我的这篇文章的介绍,支持vs code 插件,Fitten Code是一款由非十科技开发的AI代码助手,旨在通过大模型驱动来提升编程效率和体验-免费神器-CSDN博客https://blog.csdn.net/lijigang100/article/details/137833223?spm=1001.2014.3001…

MySQL怎么看死锁记录

这个结果分成三部分&#xff1a; (1) TRANSACTION&#xff0c;是第一个事务的信息&#xff1b; (2) TRANSACTION&#xff0c;是第二个事务的信息&#xff1b; (3)WE ROLL BACK TRANSACTION (1)&#xff0c;是最终的处理结果&#xff0c;表示回滚了第一个事务。 第一个事务的信…

文件批量重命名:高效添加前缀顺序编号,让文件整理变得轻松简单

电脑中的文件数量日益增长&#xff0c;如何有效地管理和整理这些文件成为了许多人的难题。你是否曾在大量的文件中迷失&#xff0c;寻找某个特定文件时感到困惑和疲惫&#xff1f;现在&#xff0c;我们为您带来了一款全新的文件改名工具——"一键式文件改名神器"&…

计算机复试项目:SpringCloud实战高并发微服务架构设计

秒杀购物商城--环境搭建 秒杀购物商城基础服务组件--详细介绍 秒杀购物商城基础服务--权限中心 秒杀购物商城业务服务--收货地址 秒杀购物商城业务服务--秒杀活动服务 秒杀购物商城--购物车的功能设计及分析 秒杀购物商城基础服务-用户中心 秒杀购物商城业务服务--商品中…

通过共享网络使树莓派4联网

一、问题 尝试配置/boot/dhcpcd.conf文件无效&#xff0c;wifi依然无法联网&#xff0c;且通过桌面选择wifi输入密码后同样无法联网&#xff1b; 二、环境 1、可以通过网线连接电脑&#xff0c;并且可以连接串口&#xff1b; 2、可以通过静态地址通过网线访问树莓派ssh端口&…

misc学习

一.知识点 1.BMP文件 BMP文件主要有四部分组成&#xff0c;位图头、位图信息、调色板、位图数据。 bmp文件头(bmp file header)&#xff1a;提供文件的格式、大小等信息 位图信息头(bitmap information)&#xff1a;提供图像数据的尺寸、位平面数、压缩方式、颜色索引等信息…

[C++][算法基础]整数划分(统计动态规划)

一个正整数 &#x1d45b; 可以表示成若干个正整数之和&#xff0c;形如&#xff1a;&#x1d45b;&#x1d45b;1&#x1d45b;2…&#x1d45b;&#x1d458;&#xff0c;其中 &#x1d45b;1≥&#x1d45b;2≥…≥&#x1d45b;&#x1d458;,&#x1d458;≥1。 我们将这…

SDB2F5 1.5A,高达28V输出1.2MHz升压转换器芯片IC

一般说明 该SDB2F5是一个恒定的频率&#xff0c;5针SOT23电流模式升压转换器&#xff0c;低功耗应用。SDB2F5交换机位于1.2MHz&#xff0c;并允许使用高度小于或等于2mm的微小、低成本电容器和电感器。内部软启动的结果在小浪涌电流和延长电池寿命。 该SDB2F5操作从一个…

【15-聚类分析入门:使用Scikit-learn进行K-means聚类】

文章目录 前言K-means聚类的原理Scikit-learn中的K-means实现安装与导入生成模拟数据应用K-means聚类可视化聚类结果选择K的值总结前言 聚类分析是一种无监督学习方法,用于将数据集中的样本分组成若干个簇(cluster)。K-means是最广泛使用的聚类算法之一,其核心思想是将数据点…