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

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

目录

[1 input 按钮 一](#1 input 按钮 一)

[2 input 按钮二](#2 input 按钮二)

[3 button 按钮](#3 button 按钮)

[4 链接a标签](#4 链接a标签)

[5 用其他元素做按钮](#5 用其他元素做按钮)

[6 用图片做一个按钮](#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 标签的形式,将这个图片给展示出来。那样就很漂亮啦。

相关推荐
糕冷小美n3 小时前
elementuivue2表格不覆盖整个表格添加固定属性
前端·javascript·elementui
小哥不太逍遥3 小时前
Technical Report 2024
java·服务器·前端
沐墨染3 小时前
黑词分析与可疑对话挖掘组件的设计与实现
前端·elementui·数据挖掘·数据分析·vue·visual studio code
anOnion3 小时前
构建无障碍组件之Disclosure Pattern
前端·html·交互设计
threerocks3 小时前
前端将死,Agent 永生
前端·人工智能·ai编程
问道飞鱼4 小时前
【前端知识】Vite用法从入门到实战
前端·vite·项目构建
爱上妖精的尾巴4 小时前
8-10 WPS JSA 正则表达式:贪婪匹配
服务器·前端·javascript·正则表达式·wps·jsa
Aliex_git5 小时前
浏览器 API 兼容性解决方案
前端·笔记·学习
独泪了无痕5 小时前
useStorage:本地数据持久化利器
前端·vue.js
程序员林北北5 小时前
【前端进阶之旅】JavaScript 一些常用的简写技巧
开发语言·前端·javascript