button标签详解

一、button标签样式

button标签是一个非常常用的HTML标签，通过它我们可以创建各种样式的按钮。

在HTML中，我们可以使用自定义的CSS样式来改变button标签的外观，比如字体大小、背景颜色、边框样式等，通常可以通过以下方式设置样式：

    <style>
        button {
            font-size: 16px;
            background-color: #4CAF50;
            color: white;
            border-radius: 5px;
            padding: 10px 20px;
            border: none;
        }
    </style>

上面的代码设置了按钮的字体大小、背景颜色、字体颜色、圆角、内边距和边框。

除了使用CSS样式来设置button标签的样式之外，我们也可以使用一些CSS框架如Bootstrap来快速创建漂亮的按钮样式。

二、button标签字体垂直居中

在设计按钮样式的过程中，我们常常会遇到按钮文字不垂直居中的问题。

为了解决这个问题，我们可以使用CSS的flex布局来实现按钮文字的垂直居中，具体代码如下：

    <style>
        button {
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>

使用以上代码后，我们可以看到按钮文字会自动垂直居中。

三、button标签属性

除了样式之外，button标签还有一些常用的属性，比如type、disabled、value等。

type属性

type属性用于指定按钮的类型，有以下几个取值：

• submit：将按钮作为表单提交按钮，在点击时提交表单内容；
• reset：将按钮作为表单重置按钮，点击时重置表单内容；
• button：将按钮作为普通按钮，不与表单交互。

例如：

    <button type="submit">提交</button>
    <button type="reset">重置</button>
    <button type="button">普通按钮</button>

disabled属性

disabled属性用于指定按钮是否被禁用，取值为true或false。

例如：

    <button disabled="true">禁用</button>
    <button disabled="false">启用</button>

value属性

value属性用于指定按钮的值，一般用于表单提交时把按钮的值同时提交到服务器。

例如：

    <button value="1">男</button>
    <button value="2">女</button>

四、button标签用法

button标签的用法很灵活，既可以作为表单提交按钮，也可以作为普通按钮使用。

作为表单提交按钮：

    <form action="submit.php" method="post">
        <input type="text" name="username">
        <input type="password" name="password">
        <button type="submit">提交</button>
    </form>

作为普通按钮：

    <button onclick="alert('Hello World!')">点我</button>

五、button标签和input

在HTML中，还有一个常用的表单按钮是input标签，它和button标签的区别在哪里呢？

首先，input标签只能创建submit和reset两种类型的按钮，而button标签还可以创建普通按钮。

其次，input标签的用法是在form标签内使用，而button标签的用法并不限定于form标签内。

最后，input标签不能设置按钮文字，而button标签可以通过在标签内添加文本或者嵌套其他HTML标签来实现按钮的文字呈现。

六、button标签怎么居中

我们可以使用多种方法让button标签水平和垂直居中。

一种简单的方法就是使用text-align和line-height属性，代码如下：

    <button style="text-align: center; line-height: 50px;">居中</button>

使用以上代码后，按钮的文字会水平和垂直居中，但是如果按钮的宽度过宽或者高度过高，这种方法就不太适用。

我们还可以使用CSS的flex布局来实现水平和垂直居中，代码如下：

    <div style="display:flex; justify-content: center; align-items:center;">
        <button>居中</button>
    </div>

使用以上代码后，按钮会自动居中，不会受按钮宽度或高度的影响。

七、button标签里怎么加链接

在button标签中，我们可以通过在按钮内嵌套标签来创建一个带链接的按钮。

    <button><a href="http://www.example.com">链接</a></button>

    <button>...</button>

    <style>
        button {
            position:fixed;
            right:20px;
            bottom:20px;
        }
    </style>

    <button style="margin-top:10px; margin-left:10px">调整位置</button>