`

html中的按钮标签及input标签

    博客分类:
  • html
阅读更多

在HTML中,我们经常会用到按钮。

而我们常用的按钮标签有以下几种:

1):button标签

例:

<button >按钮</button>

<button>标签定义一个按钮。

在button元素内部,可以放置内容,如文本或者图像。

<button>与</button>标签之间的所有内容都是按钮的内容,其中包括文本和多媒体内容。

.button {
    font-size: 15px;
    height: 50px;
    width: 110px;
    background-color: black;
    color: #FFFFFF;
    border: 0px;
    background-image: url(../images/shopping_cart.png);
    background-repeat: no-repeat;
    background-size: 19px 19px;
    background-position: 10px 14px;
}

    <button onclick="javascript:window.location.href='abc.html';">这是一个按钮</button> 

    <button onclick="window.open('pos_home.html','_blank');">主页</button>

    看到abc.html了吗?改成你想要链接到的页面URL

         如果在 HTML 表单中使用 button 元素,不同的浏览器会提交不同的值。Internet Explorer 将提交 <button> 与 <button/> 之间的文本,而其他浏览器将提交 value 属性的内容。所以在HTML中使用 input 元素来创建按钮。

2):a标签:

<a>标签定义超链接,用于从一张页面链接到另一张页面。

<a> 元素最重要的属性是 href 属性,它指示链接的目标。

用A标签来写

html:

<a href="###">按钮</a>

css:

a{background-color:blue;}    /*默认时a标签是蓝色的*/

a:hover{background-color:red;}    /*鼠标放上去的时候a标签变成红色*/

a:active{background-color:black;}    /*鼠标按下去时a标签变成黑色*/

3):input标签

1.如果让本页转向新的页面则用:

<input type=button onclick="window.location.href('连接')"> 

2.如果需要打开一个新的页面进行转向,则用:

<input type=button onclick="window.open('连接')">

分享到:
评论

相关推荐

    JS+HTML实现自定义上传图片按钮并显示图片功能的方法分析

    在web开发中,上传文件功能通过type为file的input标签即可实现。但input的显示效果仅为一个按钮,且不能修改UI。如果要实现自定义上传按钮,一般需要设置input为不可见,然后将input与自定义界面放在同一个div中,并...

    详解HTML的input 标签及其禁用方法

    HTML 与 XHTML 之间的差异在 HTML 中,&lt;input&gt; 标签没有结束标签。在 XHTML 中,&lt;input&gt; 标签必须被正确地关闭。实例一个简单的 HTML 表单,包含两个文本输入框和一个提交按钮: XML/HTML Code复制内容...

    jQuery实现点击按钮文字变成input框点击保存变成文字

    废话不多说,直接给大家贴代码了。...点击按钮文字变成input框,点击保存变成文字&lt;/title&gt;  &lt;style type="text/css"&gt;  table{ text-align: center; font-size: 14px;}  table&gt;thead&gt;tr&gt;th{

    HTML标签新特性之input标签type属性值大全

    关注重工黑大帅,学习不迷路 一、代码 请输入文字: ... 请进行单选: 请进行多选: ... 隐藏提交按钮: 请选择图片: 二、实现结果: 三、代码 请输入搜索的内容: 请输入邮件:

    BootStrap按钮标签及基本样式

    按钮标签 在,&lt;button&gt;或input元素上使用按钮class。但是为了避免跨浏览器的不一致性,建议使用&lt;button&gt;标签。 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Bootstrap 模板&lt;/title&...

    HTML_CSS学习笔记.docx

    5.3. 标签 target属性:在窗口中打开链接 17 5.4. 家族:为网页添加表格 18 5.5. 、、标签:定义表格的表头、表身、表尾 19 6. HTML5表单标签 20 6.1. 标签:创建表单,与用户交互 20 6.2. 输入框:文本输入框、密码...

    CSS3复选和单选样式工具Magic-Input.zip

    在线demo源码:https://github.com/dcsite/magic-input使用$ npm install magic-input你需要引入 dist/magic-input.css或者dist/magic-input.min.css 文件到你的工程或者HTML中。如果你使用Stylus 你就可以...

    Owl 学习笔记之六--表单输入绑定 我们经常需要能够从 html input(或 textarea, or select)中

    此外,如果您需要与复选框、单选按钮或选择标签进行交互,则管道代码略有不同。 为了帮助解决这种情况,Owl 有一个内置指令t-model:它的值应该是组件中的观察值(通常是state.someValue)。使用该t-model指令,...

    html中的input标签的checked属性jquery判断代码

    虽然会有这样的错误,但是如果再仔细测试一下,会发现input标type属性设为button时,还是具有checked属性的,而且默认为false 代码如下所示: 代码如下: [removed][removed] [removed] $(function () { $(“#...

    很全面的HTML小结文档

    input 文本标签(用type来区分是文本框、密码框、还是按钮) br 换行(是一个单标签,可不用&lt;/br&gt; 或 而直接用 )。 &nbsp;表是一个空格 reset 表示取消。 submit表示提交。 form 表示表单。(表单...

    HTML+CSS及表单知识 软件条件:VSCode、Goole浏览器

    form设置为autocomplete="on"使input标签实现内容自动记忆补全,input根据内容选择相应的类型,table放标签button实现注册按钮 步骤三:对于div-topic、sign里面的大标题、小标语、图片、标签、文字大小等等内容进行...

    HTML中button标签点击实现页面跳转的三种方法

    input type=button value=按钮 onclick=javascrtpt:[removed].href='http://www.baidu.com/' /&gt;  或者直接使用button标签 &lt;button onclick=[removed].href = 'https://www.baidu.com/'&gt;百度&lt;/button&...

    本项目包含了 HTML、CSS、JavaScript、JQuery、Vue 等相关知识和小实例,大家一起学习,一起讨论

    简单又令人惊艳的hover效果表单案例 HTML+CSS实现3D旋转卡片 HTML+CSS打造伸缩式导航栏 有点小酷的input输入框动画 HTML+CSS制作闪亮的玻璃图标悬浮效果 HTML+CSS制作富有弹性的导航栏标签 HTML+CSS制作弹性旋转菜单...

    input button文字的行高在FF下的显示问题

    最近国外有开发者发现Firefox和Opera的一个BUG:无法改变按钮里文字的行高(包括input type=”sumbit”和HTML的button标签)。举个例子,对一个按钮使用以下样式: 复制代码代码如下: input#button { border: 2px ...

    用jquery设置按钮的disabled属性的实现代码

    在html标签中设置按钮被禁用,可以使用如下代码 &lt;input type=’button’ id=’test’ value=’disabled’&gt; 在jquery中可以使用attr()函数修改按钮的disable属性 $(“#test”).attr(‘disabled’,false); ...

    html&css;&JavaScript;基础笔记

    Head中常用的标签 4 Body体上的标签 4 Body体里面的标签 4 1. 锚点标签 4 2. 分割线 5 3. 标题字体 5 4. 字体设置 5 5. 设置文字显示 5 6. 特殊字符 5 7. 文字布局 6 8. 对齐方式 6 9.图片插入 运行截图如上面 7 ...

    HTML中的input type="reset"标签失效(不起作用)的可能原因。

    使用&lt;html:reset&gt;标签,有时候我们会发现reset按钮... 原因在此: w3c网站有这样的描述(http://www.w3school.com.cn/htmldom/dom_obj_reset.asp) "在 HTML 表单中 &lt;input type="reset"&gt; 标签每出现一次,一

    css笔记课程笔记2019,5,22

    input type="image" src=""/&gt; * 普通按钮 type="button" 6、div和span * div: 自动换行 * span:在一行显示 CSS 1、css的简介 * css: 层叠样式表 ** 层叠:一层一层的 ** 样式表: 很多的属性和...

    js实现网页的两个input标签内的数值加减(示例代码)

    DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; [removed] [removed]=function(){ var oIput1=document.getElementById('put1'); var oIput2=document....

    使用css美化html表单控件详细示例(表单美化)

    在input标签里设置type="submit"即可设置此表单控件为按钮。 submit按钮代码: 复制代码代码如下:&lt;input name=”” type=”submit” value=”提交” /&gt; submit按钮效果截图 html submit按钮效果截图 2、html...

Global site tag (gtag.js) - Google Analytics