【HTML入门】第十六课 - 网页中的按钮们

news2024/12/23 9:58:03

这一小节,我们说一说 html网页 中的按钮。按钮的作用,就是让用户点呗,点了以后触发一些事件,可以做一些事情。

目录

1 input 按钮 一

2 input 按钮二

3 button 按钮

4 链接a标签

5 用其他元素做按钮

6 用图片做一个按钮


1 input 按钮 一

没错,input这个控件,可以做输入框,也可以做按钮。可以把type的属性值设置为 submit

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>我的第一个网页</title>
        <style type="text/css">
            
        </style>
    </head>
    <body>
        <form method="get" action="http://www.aatest.com/setUser" target="_blank">
            <input type="submit" value="提交" />
        </form>
    </body>
</html>

2 input 按钮二

我们还可以把type的属性值设置为 button 。同样也可以展示出按钮的效果。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>我的第一个网页</title>
        <style type="text/css">
            
        </style>
    </head>
    <body>
        <form method="get" action="http://www.aatest.com/setUser" target="_blank">
            <input type="button" value="button的提交" />
        </form>
    </body>
</html>

3 button 按钮

我们还可以用button来做一个按钮,没错,就是 button 标签。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>我的第一个网页</title>
        <style type="text/css">
            
        </style>
    </head>
    <body>
        <button>这是一个button按钮哦</button>
    </body>
</html>

4 链接a标签

有时候,我们看见的可点击的按钮,不一定都是按钮的形状,而是一个简单的链接a标签。虽然说a标签主要用于做链接跳转,但仍然有很多网站,用这种样式来做一个可点击的按钮,但却不是用来做跳转的。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>我的第一个网页</title>
        <style type="text/css">
            
        </style>
    </head>
    <body>
        <a href="#">注册</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">登录</a>
    </body>
</html>

怎么样,这种样式的按钮,见过吧。而且他不是用来做跳转的,就是做按钮使用的。

5 用其他元素做按钮

看这个按钮,他就是通过一些html标签元素,再通过一定的css样式开发出的。后续我们学了css,就可以自己做一个按钮了。

6 用图片做一个按钮

我们日常看见的一些按钮,都是比较闺女的,顶多就是四个边角做成一个圆角的,有的是直角的。但架不住UI和产品人员思路五花八门,有的思路就是新颖,他们想出来的按钮各种各样。比如我们玩冰封王座,比如玩一些其他游戏。按钮就非常奇特。

所以,还可以让UI给我们一张图片,我们通过 img 标签的形式,将这个图片给展示出来。那样就很漂亮啦。

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

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

相关文章

为什么要从C语言开始编程

在开始前刚好我有一些资料&#xff0c;是我根据网友给的问题精心整理了一份「C语言的资料从专业入门到高级教程」&#xff0c; 点个关注在评论区回复“888”之后私信回复“888”&#xff0c;全部无偿共享给大家&#xff01;&#xff01;&#xff01;很多小伙伴在入门编程时。都…

Python学习—open函数,json与pickle知识点,Os模块详解

目录 1. Open函数 2.json与pickle模块 json模块 1. json.dumps() 2. json.dump() 3. json.loads() 4. json.load() pickle 模块 1. pickle.dumps() 2. pickle.dump() 3. pickle.loads() 4. pickle.load() 3.Os模块 1. Open函数 在Python中&#xff0c;open() 函数…

【大数据】JSON文件解析,对其文本聚类/情感分析

目录 引言 JSON&#xff08;JavaScript Object Notation&#xff09; 文本聚类K-means 基本步骤 优点 缺点 实际应用 情感分析 核心任务与应用场景 算法原理与技术 json数据集 情感分析实现 文本聚类实现 引言 JSON&#xff08;JavaScript Object Notation&#…

AIoTedge 智能边缘物联网平台

AIoTedge智能边缘物联网平台是一个创新的边云协同架构&#xff0c;它为智能设备和系统提供了强大的数据处理和智能决策能力。这个平台的核心优势在于其边云协同架构设计&#xff0c;它优化了数据处理速度&#xff0c;提高了系统的可靠性和灵活性&#xff0c;适用于多种场景&…

华为OD机考题(HJ61 放苹果)

前言 经过前期的数据结构和算法学习&#xff0c;开始以OD机考题作为练习题&#xff0c;继续加强下熟练程度。 描述 把m个同样的苹果放在n个同样的盘子里&#xff0c;允许有的盘子空着不放&#xff0c;问共有多少种不同的分法&#xff1f; 注意&#xff1a;如果有7个苹果和3…

uniapp bug解决:uniapp文件查找失败:‘uview-ui‘ at main.js:14

文章目录 报错内容解决方法main.js 文件中 uView 主 JS 库引入 uView 的全局 SCSS 主题文件内容修改引入 uView 基础样式内容修改配置 easycom 内容修改 报错内容 10:50:51.795 文件查找失败&#xff1a;uview-ui at main.js:14 10:59:39.570 正在差量编译... 10:59:43.213 文…

【Jmeter】记录一次Jmeter实战测试

Jmeter实战 1、需求2、实现2.1、新建线程组2.2、导入参数2.3、新建HTTP请求2.4、添加监听器2.5、结果 1、需求 查询某个接口在高并发场景下的响应时间(loadtime)&#xff0c;需求需要响应在50ms以内&#xff0c;接下来用Jmeter测试一下 Jmeter安装见文章《Jemeter安装教程&am…

[集成学习]基于python的Stacking分类模型的客户购买意愿分类预测

1 导入必要的库 import pandas as pd import numpy as np import missingno as msno import matplotlib.pyplot as plt from matplotlib import rcParams import seaborn as sns from sklearn.metrics import roc_curve, auc from sklearn.linear_model import LogisticRegres…

C++ | Leetcode C++题解之第240题搜索二维矩阵II

题目&#xff1a; 题解&#xff1a; class Solution { public:bool searchMatrix(vector<vector<int>>& matrix, int target) {int m matrix.size(), n matrix[0].size();int x 0, y n - 1;while (x < m && y > 0) {if (matrix[x][y] targ…

Linux--实现线程池(万字详解)

目录 1.概念 2.封装原生线程方便使用 3.线程池工作日志 4.线程池需要处理的任务 5.进程池的实现 6.线程池运行测试 7.优化线程池&#xff08;单例模式 &#xff09; 单例模式概念 优化后的代码 8.测试单例模式 1.概念 线程池:* 一种线程使用模式。线程过多会带来调度…

QT--事件(丰富操作,高级功能)

一、事件 1.事件与信号的区别 事件来自外部&#xff0c;是随机发生的。信号来自内部&#xff0c;是主动发生的。有点像外中断和内中断的区别。事件&#xff1a;适用于处理系统级别的输入和状态变化&#xff0c;种类繁多&#xff0c;能够应对复杂的交互需求。信号/槽&#xff…

学习并测试SqlSugar的单库事务功能

SqlSugar支持单库事务、多租户事务、多库事务&#xff0c;本文学习并测试单库事务的基本用法。   使用SqlSugarClient类、ISqlSugarClient接口都可以创建SqlSugarClient数据库操作实例&#xff0c;其区别在于&#xff0c;针对单库而言&#xff0c;SqlSugarClient类支持调用Be…

硬件开发笔记(二十七):AD21导入DC座子原理图库、封装库,然后单独下载其3D模型融合为3D封装

若该文为原创文章&#xff0c;转载请注明原文出处 本文章博客地址&#xff1a;https://hpzwl.blog.csdn.net/article/details/140541464 长沙红胖子Qt&#xff08;长沙创微智科&#xff09;博文大全&#xff1a;开发技术集合&#xff08;包含Qt实用技术、树莓派、三维、OpenCV…

睿考网:2024年城乡规划师考试时间

2024年城乡规划师报名时间已经结束&#xff0c;考试时间以及考试科目为&#xff1a; 2024年9月7日&#xff1a; 9.00-11.30&#xff0c;城乡规划原理(客观题) 14.00-16.30&#xff0c;城乡规划相关知识(客观题) 2024年9月8日&#xff1a; 9.00-11.30&#xff0c;城乡规划管…

AV1技术学习:Intra Prediction

对于帧内预测模式编码块&#xff0c;亮度分量的预测模式和色度分量的预测模式在比特流中分别发出信号。亮度预测模式是基于相邻左侧和上侧两个编码块预测上下文的概率模型进行熵编码的。色度预测模式的熵编码取决于色度预测模式的状态。帧内预测以变换块为单位&#xff0c;并使…

PyTorch张量拼接方式【附维度拼接/叠加的数学推导】

文章目录 1、简介2、torch.cat3、torch.stack4、数学过程4.1、维度拼接4.1.1、二维张量4.1.2、三维张量4.1.3、具体实例 4.2、维度叠加4.2.1、0维叠加4.2.2、1维叠加4.2.3、2维叠加&#xff08;非常重要⭐&#xff09; &#x1f343;作者介绍&#xff1a;双非本科大三网络工程专…

Android14之调试广播实例(二百二十五)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 优质专栏&#xff1a;多媒…

Linux的热插拔UDEV机制和守护进程

目录 一、Linux的热插拔UDEV机制 二、守护进程 2.1 守护进程概念和基本特点&#xff1a; 2.2 显示进程信息&#xff1a; 2.3 守护进程和后台进程的区别&#xff1a; 2.4 创建守护进程的步骤和守护进程的特征&#xff1a; 2.4.1 创建守护进程的步骤&#xff1a; 2.4.2 守…

京东Android一面凉经(2024)

京东Android一面凉经(2024) 笔者作为一名双非二本毕业7年老Android, 最近面试了不少公司, 目前已告一段落, 整理一下各家的面试问题, 打算陆续发布出来, 供有缘人参考。今天给大家带来的是《京东Android一面凉经(2024)》。 面试职位: Android开发工程师 技术一面 面试时长: 50…

Plant simulation 中快速创建相同属性轨道的方法

问题&#xff1a;默认的轨道宽度是0.3m&#xff0c;默认轨道是水平的。如果要创建大量宽度1m&#xff0c;竖着的轨道有没有效率的方法呢&#xff1f;答案肯定是有的&#xff0c;按下面方法操作即可。 1、复制两个轨道模型到用户对象中&#xff0c;命名为水平轨道和竖直轨道。 …