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

news2024/7/6 19:55:50

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

                                                                                                —— 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>

页面显示:

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

2024-04学习笔记

1.sql优化-子查询改为外连接 1.改之前 改之前是这样&#xff0c;那针对查出来的每一条数据&#xff0c;都要执行一次箭头所指的函数 执行的sql很慢 2.改之后 改之后是这样&#xff0c;整体做外连接&#xff0c;不用每一条都再执行一次查询 执行时间缩短了好几倍 2.Mybatis中…

21.Nacos集群搭建

模拟Nacos三个节点&#xff0c;同一个ip,启动三个不同的端口&#xff1a; 节点 nacos1, 端口&#xff1a;8845 节点 nacos2, 端口&#xff1a;8846 节点 nacos3, 端口&#xff1a;8847 1.搭建数据库&#xff0c;初始化数据库表结构 这里我们以单点的数据库为例 首先新建一…

Facebook全攻略:从注册到养号再到防封,一篇搞定!

作为海外热门的社交媒体平台之一&#xff0c;Facebook已经成为品牌营销的重要渠道。很多新手小白在拿到Facebook账号后还是不知道如何操作&#xff0c;今天为大家准备了一份Facebook操作全攻略&#xff0c;从注册、养号到防封号&#xff0c;让你的Facebook跨境之旅更加顺畅&…

小程序地理位置接口怎么开通?

小程序地理位置接口有什么功能&#xff1f; 如果我们提审后驳回理由写了“当前提审小程序代码包中地理位置相关接口( chooseAddress、getLocation )暂未开通&#xff0c;建议完成接口开通后或移除接口相关内容后再进行后续版本提审”&#xff0c;如果你也碰到类似问题&#xf…

Ansys Speos|进行智能手机镜头杂散光分析

本例的目的是研究智能手机Camera系统的杂散光。杂散光是指光向相机传感器不需要的散光光或镜面光&#xff0c;是在光学设计中无意产生的&#xff0c;会降低相机系统的光学性能。 在本例中&#xff0c;光学透镜系统使用Ansys Zemax OpticStudio (ZOS)进行设计&#xff0c;并使用…

使用 GitHub Actions 实现项目的持续集成(CI)

目录 什么是 GitHub Actions 基础概念 Workflow 文件 Workflow 语法 实例&#xff1a;编译 OpenWrt 什么是 GitHub Actions GitHub Actions 是 GitHub 推出的持续集成&#xff08;Continuous Integration&#xff0c;简称 CI&#xff09;服务它允许你创建自定义工作流&am…

源码编译framework.jar 并成功导入android studio 开发

一、不同安卓版本对应路径 Android N/O: 7 和 8 out/target/common/obj/JAVA_LIBRARIES/framework_intermediates/classes.jar Android P/Q: 9 和 10 out/soong/.intermediates/frameworks/base/framework/android_common/combined/framework.jar Android R: 11以上 out/so…

Qt下使用7Z源码进行压缩和解压缩

7Z压缩是一款常用的压缩算法和工具&#xff0c;本文主要介绍一款在qt环境下进行编译的压缩方法。 本人测试是可以正常跑通的&#xff0c;具体代码部分请下载&#xff1a;下载链接&#xff0c;提取码&#xff1a;ev9t 7z源码网址&#xff1a;7-Zip 7z简介&#xff1a; 7z 是…

有趣的大模型之我见 | Llama AI Model

Llama 开源吗&#xff1f; 我在写《有趣的大模型之我见 | Mistral 7B 和 Mixtral 8x7B》时曾犹豫&#xff0c;在开源这个事儿上&#xff0c;到底哪个大模型算鼻祖&#xff1f;2023 年 7 月 18 日&#xff0c;Meta 推出了最受欢迎的大型语言模型&#xff08;LLM&#xff09;的第…

opencv_23_高斯模糊

void ColorInvert::gaussian_blur(Mat& image) { Mat dst; GaussianBlur(image, dst, Size(0, 0), 15); // Size(2, 2), imshow("图像模糊2", dst); }

MySQL中SELECT语句的执行过程

2.1.1. 一条SELECT语句的执行过程 MySQL 的架构共分为两层&#xff1a;Server 层和存储引擎层 Server层负责建立连接、分析和执行SQL存储引擎层负责数据的存储和提取&#xff0c;支持 InnoDB、MyISAM、Memory 等多个存储引擎&#xff0c;MySQL5.5以后默认使用InnoDB&#xff0…

什么是DDoS攻击?怎么防御DDoS攻击?

在网络安全领域&#xff0c;DDoS攻击一直是热门话题&#xff0c;随着网络技术的不断发展和网络环境的复杂化演变&#xff0c;DDoS攻击变得愈加频繁、更具破坏性。根据2023年网络安全态势研判分析年度综合报告&#xff0c;全年全网网络层的DDoS攻击次数达2.51亿次&#xff01;本…

五一前的最后一个工作日

最近在学习 Elasticsearch 的使用&#xff0c;也更了几篇文章了&#xff0c;后续的话应该要等到节后再说了&#xff08;因为真的背不动电脑回家&#xff09; 再来看下这次五一假期的组成&#xff0c;1 号到 5 号&#xff0c;共五天&#xff0c;其中 2 号是 28 号周日调休来的&a…

【leetcode面试经典150题】74. 填充每个节点的下一个右侧节点指针 II(C++)

【leetcode面试经典150题】专栏系列将为准备暑期实习生以及秋招的同学们提高在面试时的经典面试算法题的思路和想法。本专栏将以一题多解和精简算法思路为主&#xff0c;题解使用C语言。&#xff08;若有使用其他语言的同学也可了解题解思路&#xff0c;本质上语法内容一致&…

【人工智能】AI赋能城市交通 未来城市的驱动力

前言 随着城市化进程的不断加速&#xff0c;交通拥堵、环境污染等问题日益凸显&#xff0c;人们对交通系统的效率和可持续性提出了更高的要求。在这样的背景下&#xff0c;智能交通技术正成为改善城市交通的重要驱动力。本文将探讨智能交通技术在解决城市交通挑战方面的应用和未…

信息化工作人员必备常识12——远程桌面的使用与技巧

信息化工作人员必备常识12——远程桌面的使用与技巧 前言信息化人员必备常识回顾&#xff08;不想看回顾的直接往下滑哦~&#xff09;pingtelnetnslookup命令ipconfig命令域名DNS本机DNS缓存查看与清理DNS劫持DNS污染&#xff08;域名服务器缓存投毒&#xff09; 远程桌面开启远…

Python多线程并不是真的并行执行

Python多线程虽然能够利用多个CPU核执行计算&#xff0c;但并不能真正执行多线程并行计算。因为在Python中&#xff0c;有一个全局解释锁&#xff08;GlobalInterpreter Lock&#xff0c;GIL&#xff09;&#xff0c;该锁的存在使得在同一个时间只有一个线程执行任务&#xff0…

TiDB 利用binlog 恢复-反解析binlog

我们知道TiDB的binlog记录了所有已经执行成功的dml语句&#xff0c;类似mysql binlog row模式 &#xff0c;TiDB官方也提供了reparo可以进行解析binlog&#xff0c;如下所示: [2024/04/26 20:58:02.136 08:00] [INFO] [config.go:153] ["Parsed start TSO"] [ts449…

软考中级之数据库系统工程师笔记总结(五)网络基础

作者&#xff1a;Maynor 博客之星大数据领域Top1,GitHub项目awesome-chatgpt-project作者, 腾讯云TDSQL-C数据库开发者, 全网技术矩阵粉丝7w 公众号&#xff1a;Maynor996随着信息技术的飞速发展&#xff0c;数据库已成为现代企业和组织不可或缺的数据管理工具。对于许多专业人…

pycharm安装pandas包

import pandas时提示未安装pandas&#xff0c;点击下图红框选项&#xff0c;进行pandas安装 pycharm底部会有安装中的提示 pycharm底部提示红框的内容&#xff0c;说明安装成功 这个时候就可以看到import pandas不再报错了