Web跳转案例、表单案例

news2024/12/24 9:54:17

一、跳转案例

<img>:html元素将图像嵌入文档

<body>

    <img src="../images(1)/images/7.5-1.jpg">

</body>

使用a标签进行一个跳转链接

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>欢迎你来到此页面</title>

</head>

<body>

    <h1>欢迎来到此页面</h1>

    <span> <a href="./05-pic1.html">青山绿水</a> <a href="./06-pic2.html">冰山雪地</a> <a href="./07-pic3.html">冰川河流</a></span>

</body>

</html>

二、表单案例

作业代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>青春不常在,抓紧谈恋爱</title>

</head>

<body>

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

    <form action="#">

        <div>

            性别

            <input type="radio" name="gender" value="nan">男

            <input type="radio" name="gender" value="nv">女<br />

        </div>

        <div>

            <!-- 问题1:下拉菜单数据太多如何解决 -->

            <!-- select能不能使用placeholder属性 -->

            生日

            <select name="年">

                <option value="--请选择年--">--请选择年--</option>

                <option value="2001">2001</option>

                <option value="2002">2002</option>

                <option value="2003">2003</option>

            </select>  

            <select name="月">

                <option value="--请选择月--">--请选择月--</option>

                <option value="1">1</option>

                <option value="2">2</option>

            </select>

            <select name="日">

                <option value="--请选择日--">--请选择日--</option>

                <option value="1">1</option>

                <option value="2">2</option>

            </select>

        </div>

        <div>

            所在地区 <input type="text" name="user" value="">

        </div>

        婚姻状况

        <input type="radio" name="marry" value="weihun">未婚

        <input type="radio" name="marry" value="yihun">已婚

        <input type="radio" name="marry" value="lihun">离婚<br />

        学历 <input type="text" name="user" value=""><br />

        喜欢的类型<input type="checkbox" name="lovetype" id="wumei"><label for="wumei">妩媚的</label>

        <label><input type="checkbox" name="lovetype">可爱的</label>

        <label><input type="checkbox" name="lovetype">小鲜肉</label>

        <label><input type="checkbox" name="lovetype">老腊肉</label>

        <label><input type="checkbox" name="lovetype">都喜欢</label><br />

        自我介绍<input type="text" name="user" value=""><br />

        <button>免费注册</button><br />

        <input type="radio" name="right">我同意注册条款和会员加入标准<br />

        <a href="https://www.baidu.com/">我是会员,立即登录</a><br />

        <h1>我承诺</h1><br />

        <ul>

            <li>年满18岁、单身</li>

            <li>抱着严肃的态度</li>

            <li>真诚寻找另一半</li>

        </ul>

    </form>

</body>

</html>

 

作业存疑:

  1. 信息收集表单右边怎么对齐
  2. 下拉菜单数据太多如何解决 
  3. select能不能使用placeholder属性  

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

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

相关文章

7-3学习发布订阅模式,观察者模式

7-3学习发布订阅模式&#xff0c;观察者模式 1.发布订阅模式2.观察者模式 1.发布订阅模式 前端比较重要的两个设计模式&#xff0c;发布订阅模式和观察者模式。来简单的学习下。 let fs require(fs); let person {}let event {arr:[],on(fn){this.arr.push(fn);},emit(){t…

谷歌浏览器如何实现书签同步

推荐使用GIT仓库来当做中间介质&#xff0c;实现书签上传和下载&#xff0c;可以在不同机器上的谷歌浏览器之间同步书签 这里默认已经有了Git和谷歌浏览器&#xff0c;其中谷歌浏览器可以登陆账号也可以不登录。 GIT上创建私密仓库用于存储书签的json文件&#xff0c;生成秘钥…

回归预测 | MATLAB实现PSO-GCNN粒子群算法优化分组卷积神经网络的数据多输入单输出回归预测

回归预测 | MATLAB实现PSO-GCNN粒子群算法优化分组卷积神经网络的数据多输入单输出回归预测 目录 回归预测 | MATLAB实现PSO-GCNN粒子群算法优化分组卷积神经网络的数据多输入单输出回归预测效果一览基本介绍模型描述程序设计参考资料 效果一览 基本介绍 回归预测 | MATLAB实现…

数据结构课设---C语言为主体+引用

目录 一、设计要求 二、实现方法 三、实现过程 1.链栈的实现 2.前缀表达式变后缀表达式 3.括号匹配 4.链队列的实现 5.队列实现栈 6.应用代码实现汇总 7.小猫钓鱼 文章只写了代码的实现&#xff0c;并未进行原理的讲解&#xff0c;希望大家不喜勿喷 一、设计要求 1.…

C++读取一行内个数不定的整数的方式

&#x1f4af; 博客内容&#xff1a;C读取一行内个数不定的整数的方式 &#x1f600; 作  者&#xff1a;陈大大陈 &#x1f680; 个人简介&#xff1a;一个正在努力学技术的准前端&#xff0c;专注基础和实战分享 &#xff0c;欢迎私信&#xff01; &#x1f496; 欢迎大家&…

如何查询组织结构(组织结构树)

创建简单的组织表 字段1&#xff1a; 组织ID字段2&#xff1a;组织名称字段3&#xff1a;组织的父级ID -- 创建组织结构表 CREATE TABLE organization (id VARCHAR(36) PRIMARY KEY,name VARCHAR(100),parent_id VARCHAR(36) );插入几条数据 INSERT INTO organization (id, …

3D模型轻量化开发工具HOOPS与WebGL的对比分析

HOOPS是一种商业级的3D开发平台&#xff0c;由Tech Soft 3D公司开发。它提供了一套全面的工具和API&#xff0c;用于构建和展示高度复杂的3D场景和模型&#xff0c;可以在多个平台和环境中使用&#xff0c;包括Web、移动设备和桌面&#xff0c;这使得开发者能够在不同的设备上展…

Spring的事务隔离

随着应用程序复杂性的增加&#xff0c;数据库的并发读写需求也越来越高。对于一个电商平台而言&#xff0c;每天都会有数十万笔的交易数据需要处理&#xff0c;这就需要能够高效地处理并发事务。Spring作为一个强大的应用框架&#xff0c;提供了事务管理的功能&#xff0c;可以…

WhaleStudio 完成与涛思数据 TDengine 产品相互兼容性测试认证

近日&#xff0c;WhaleStudio 与涛思数据 TDengine 产品已完成相互兼容性测试认证。 白鲸开源与涛思数据的联合测试结果显示&#xff0c;Whalestudio 平台与涛思数据 TDengine 产品双方产品完全兼容&#xff0c;整体运行稳定高效。 WhaleStudio 是白鲸开源科技根据全球领先的 …

如何在海外推广一个新品牌?

在海外推广一个新品牌时&#xff0c;以下是一些步骤和策略可以帮助你&#xff1a; 1、 市场调研&#xff1a;了解目标海外市场的文化、消费者行为和偏好&#xff0c;以及竞争情况。这将帮助你了解如何定位你的品牌&#xff0c;并制定相应的推广策略。 2、 品牌定位和价值观&am…

ARM半主机模式介绍

文章目录 什么是半主机参考链接&#xff1a; 什么是半主机 半主机是一种机制&#xff0c;它使运行在arm目标上的代码能够在运行调试器的主机上通信和使用输入/输出功能。 这些工具包括键盘输入&#xff0c;屏幕输出和磁盘I/O。例如&#xff0c;你可以使用这种机制来启用C库中的…

华为OD机试真题 Python 实现【新员工座位安排系统】【2022Q4 100分】,附详细解题思路

目录 一、题目描述二、输入描述三、输出描述四、解题思路五、Python算法源码六、效果展示1、输入2、输出3、说明 一、题目描述 工位由序列F1,F2…Fn组成&#xff0c;Fi值为0、1或2。其中0代表空置&#xff0c;1代表有人&#xff0c;2代表障碍物。 1、某一空位的友好度为左右连…

【MySQL】幻读被彻底解决了吗?

一、MySQL 幻读被彻底解决了吗 MySQL InnoDB 引擎的默认隔离级别虽然是【可重复读】&#xff0c;但是它很大程度上避免幻读现象&#xff08;并不是完全解决了&#xff09;&#xff0c;解决的方案有两种&#xff1a; 针对快照读&#xff08;普通 select 语句&#xff09;&#…

Element-UI 在表单通过按钮动态增加Tree树形控件

文章目录 问题背景动态增加的Tree控件创建el-tree控件数据动态增加的el-tree控件编辑数据前需进行设置勾选状态新增/编辑请求前需转换格式 问题背景 在表单中动态增加的Tree控件中&#xff0c;注册一个 ref 引用&#xff0c;报错如下&#xff1a; this.$refs[‘showRegionsTre…

Linux下Qt breakpad编译使用

一、下载安装包 下载qbreakpad源码&#xff1a; git clone https://github.com/buzzySmile/qBreakpad.git下载breakpad源码 git clone https://github.com/google/breakpad下载linux-syscall-support 没有这个文件&#xff0c;编译报错 git clone https://github.com/adels…

Stable Diffusion WebUI Ubuntu 22.04 LTS RTX2060 6G 极限显存出图

模型 默认选中 chilloutmix_Ni.safetensors&#xff0c;重启webui.sh进程 正向词 best quality, ultra high res, (photorealistic:1.4), 1girl, <lora:koreanDollLikeness_v15:1> ,<lora:yaeMikoRealistic_yaemikoMixed:1>, 反向词 paintings, sketches, (…

数字万用表的四种妙用方法

数字万用表&#xff08;Digital Multimeter&#xff0c;简称DMM&#xff09;是一种在电子电路测试和维修中常用的仪器。它可以测量电压、电流、电阻等各种电信号参数&#xff0c;同时还可以测试二极管、晶体管等元器件。数字万用表使用数字显示&#xff0c;具有高精度、易读性好…

SQL高级教程第三章

SQL CREATE DATABASE 语句 CREATE DATABASE 语句 CREATE DATABASE 用于创建数据库。 SQL CREATE DATABASE 语法 CREATE DATABASE database_name SQL CREATE DATABASE 实例 现在我们希望创建一个名为 "my_db" 的数据库。 我们使用下面的 CREATE DATABASE 语句&…

SQL19 分组过滤练习题

selectuniversity,round(avg(question_cnt), 3) as avg_question_cnt,round(avg(answer_cnt), 3) as avg_answer_cnt fromuser_profile group byuniversity havingavg_question_cnt < 5or avg_answer_cnt < 20;

抖音矩阵系统源码部署技术分享--基于抖音开放平台

开发概述 开放平台基于开发者诉求和相关平台规则&#xff0c;提供了两种开放模式&#xff1a;能力开放、行业开放。 自研开发者介绍 自研开发者是指有自己的自营业务&#xff0c;或是有多种加盟方的角色&#xff0c;可以基于用户需求&#xff0c;提供完整的技术解决方案。 …