文介绍了网页编程中的按钮使用方法。按钮是网页中最常用的控件之一，点击后会触发某些程序。即使没有学习过编程，大家也应该知道按钮的概念。按钮的最大功能是点击后触发程序。这篇文章主要介绍了如何在网页中插入按钮，并讲解了按钮的属性和使用方法。

先来看看今天的实例效果。页面被分为三部分：按钮、按钮和按钮的共有属性。

首先是普通按钮，点击后文本框的内容发生了变化，但页面并没有刷新。接着是重置按钮，点击后文本框的内容恢复到初始状态，但页面仍然没有刷新。提交按钮点击后，页面重新加载，提交了表单中的内容。

接着是按钮，点击后文本框的内容发生了变化，但页面没有刷新。按钮包含一个图片且为灰色状态，无法点击。

现在来看看实现的代码。

输入和按钮的写法非常相似，这里只展示了最基本的写法。对于初学者来说，看一眼就明白了。

按钮有三个类型：普通、重置和提交。按钮的名称和值会提交到服务器端。

提交时提交的是按钮的值。ID和name是控制按钮的命名。

点击按钮时会触发onclick事件。autofocus属性会在页面加载完成后自动获取焦点。

disabled属性可以设置按钮是否可用，不设置时默认可用。

form属性用于设置提交到哪个URL、是否绕过验证、以及表单的相关设置。

相关属性的优先级高于在表单中设置的属性。

以上就是今天的分享内容，希望对大家有所帮助。import和button在网页中插入按钮的功能是相同的，两者的外观也没有明显的区别，但是它们的属性设置却存在一定的重叠。

为什么需要这两个标签呢？而阿里巴巴标签是HTML 5中新增加的标签，它的必要性体现在哪里呢？同学们要注意，阿里巴巴标签不是input，它不是一个封闭的标签，而是一个唯一的标签，可以包含文字或其他标签。

例如，可以使用阿里巴巴标签来插入图片。注意，由于用户使用的浏览器不同，底层的type值是必须填写的，绝对不能使用默认值。

今天的分享就到这里，希望各位同学能够认真练习，做到不看视频也能够正确地写出代码。所有的案例和相关文档都可以向我索取，下期再见，想学编程就关注我吧。

言

在遇到公祭日或其它特殊日子的时候，我们需要将我们的网站、小程序变成灰色（黑白）模式，如果是在网页端比较简单，只需设置*、html最外层标签的样式设置filter: grayscale(100%)即可。但是在小程序中如果直接设置page的样式的话会导致小程序内使用flex失效，布局出现错位的情况。

如何解决错位问题？以及如何通过服务端动态控制灰色模式开关请看下文。

注：此方式无法控制非自定义导航栏颜色，如想要实现更完美的效果，请配合使用自定义导航栏。

原生小程序前端设置灰色模式：

wxml

<view class="grayscale">
  <view class="content"></view>
  ...小程序代码
</view>

wxss

.grayscale .content,
.grayscale text,
.grayscale button {
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
}

第三方UI组件/库（如：vant）

.grayscale .van-goods-action,
.grayscale .van-submit-bar,
.grayscale .van-swipe-cell {
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
}

切忌直接设置

page {
  filter: grayscale(100%);
}

小结：简单来说，就是把样式控制明确到具体的标签。

服务端动态控制

接下来讲我们利用小程序的数据预拉取来实现动态开关。

之所以选择使用数据预拉取来控制，是因为灰色模式并不是我们日常运营所需，如果单独封装到一个请求中去，会造成不必要的资源浪费，而且数据预拉取会在用户每次访问小程序的时候都会执行一次，所以能够保证尽可能实时获取到最新的状态，但是因为本身也是异步请求，所以无法100%保证页面加载完之前，就能够实时响应，所以返回的class并没有直接设置在全局变量globalData中，而是先存到本地存储Storage里，当我们在小程序后台关闭数据预拉取后，小程序端便不会再去请求相关接口，这样就做到了随时控制开关的效果了。

实现方式：

app.js

App({
  onLaunch: async function (options) {
    // 此处用于服务端鉴权，可根据自身情况设置
    wx.setBackgroundFetchToken({
      token: 'grayscale'
    })
    wx.onBackgroundFetchData((res) => {
      if(res.fetchedData && res.fetchedData.class) {
        wx.setStorageSync('class', res.fetchedData.class);
      }
    })
  },
  globalData: {
    grayscale: wx.getStorageSync("class").grayscale || ""
  }
})

需要灰色模式的wxml

<view class="{{grayscale}}">
  <view class="content"></view>
  ...小程序代码
</view>

需要灰色模式的js

const app = getApp()
Page({
  data: {
    grayscale: app.globalData.class.grayscale
  }
})

服务端（node.js）接收到微信推送的get请求后返回数据

ctx.body = {
  class: {
    grayscale: "grayscale"
  }
}

PS：以上方案仅供参考，当前方案在微信开发者工具中因缓存问题无法实时控制，iOS端基本上是没什么大问题，如果其它更好的方案可自行处理。

人人都是产品经理【起点学院】，BAT实战派产品总监手把手系统带你学产品、学运营。

产品设计时细节是产品经理最头疼的问题，一个button，一个链接都要考虑太多的细节问题。作者整理了常见的一些功能设计问题，一篇文章看懂这些功能设计。来学习吧。

定义

链接也称为超链接，所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。而在一个网页中用来超链接的对象，可以是一段文本或者是一个图片。当浏览者单击已经链接的文字或图片后，链接目标将显示在浏览器上，并且根据目标的类型来打开或运行。

样式

链接可以是一个字或是一段字这样的文本，也可以是一个按钮，一张图片，当你点击后跳转到另一个目标，当你把鼠标指针移到某个链接时会变成一个小手，当然在手机上没有这一特点。

1. 文本样式的链接

文本样式的链接一般在搜索引擎的网站呈现蓝色字样，大多会在下面加上下划线以便识别，不过现如今考虑到不影响文本的可读性与用户体验，逐渐取消了下划线。而在一些别的网站考虑到界面设计风格各方面的因素而不用蓝色。

谷歌的文本链接是蓝色，没有下划线

百度的文本链接也是蓝色，关键词是红色，有下划线

而京东的文本链接有灰色，有白色，有黑色

2. 按钮样式的链接

按钮样式的链接比文本样式的更容易识别，每一个按钮都是一样链接。

按钮样式链接

3. 图片样式的链接

图片样式的链接可以是单独的一张图片，也可以是文字与按钮一起组成一张图片，只是鼠标指针扫过图片的任何一个部位都会变成小手。

如桌面弹出这种游戏小窗口的图片式链接

由文字/图/按钮样式一起构成的一张图片式按钮，鼠标可以点击图中任何一部位

打开方式

链接打开的方式有三种：第一种是在当前页面刷新跳转，国外的网站大多是这样的打开式；第二种是在新标签页面打开链接，国内大多采用这种；第三种是提示用APP打开。当然现在出现了一种新的打开方式，那就是二维码扫描。

提示用美拍APP打开

类型

按照连接路径的不同，网页中超链接一般分为以下3种类型：内部链接，锚点链接和外部链接。

链接还可以分为动态链接和静态链接。动态超链接指的是可以通过改变HTML代码来实现动态变化的链接，例如我们可以实现将鼠标移动到某个文字链接上，文字就会象动画一样动起来或改变颜色的效果，也可以实现鼠标移到图片上图片就产生反色或朦胧等等的效果。而静态链接，顾名思义，就是没有动态效果的链接。

1. 内部链接

与外部链接（即反向链接）相反，内部链接是指同一网站域名下的内容页面之间互相链接。如频道、栏目、终极内容页之间的链接，乃至站内关键词之间的Tag链接都可以归类为内部链接，因此内部链接我们也可以称之为站内链接，对内部链接的优化其实就是对网站的站内链接的优化。

2. 锚点链接

HTML中的链接，正确的说法应该称作"锚点"，它命名锚点链接（也叫书签链接）常常用于那些内容庞大繁琐的网页，通过点击命名锚点，不仅让我们能指向文档，还能指向页面里的特定段落，更能当作"精准链接"的便利工具，让链接对象接近焦点。便于浏览者查看网页内容。类似于我们阅读书籍时的目录页码或章回提示。在需要指定到页面的特定部分时，标记锚点是最佳的方法。

3. 外部链接

外部链接，又常被称为：“反向链接”或“导入链接”，是指通过其他网站链接到你的网站的链接。

外部链接指的是针对搜索引擎，与其它站点所做的友情链接。高质量的外部链接指：和你的网站建立链接的网站知名度高，访问量大，同时相对的外部链接较少，有助于快速提升你的网站知名度和排名的其他网站的友情链接。

如果按照使用对象的不同，网页中的链接又可以分为：文本超链接，图像超链接，E-mail链接，锚点链接，多媒体文件链接，空链接等。

链接是一种对象，它以特殊编码的文本或图形的形式来实现链接，如果单击该链接，则相当于指示浏览器移至同一网页内的某个位置，或打开一个新的网页，或打开某一个新的WWW网站中的网页。

链接状态

链接在交互上一般会呈现4种状态，即默认状态/悬停时状态/点击时状态/点击后状态。比如谷哥网站的交互体验。如下图：

点击前

悬停时，下面浮现半透明线条

点击时，有波纹晕开的动态效果

点击后，下面线条粗

有时候是3种状态，比如百度网和知乎应用：

默认状态

点击时链接变红

点击后链接变成紫色

IOS系统知乎应用的3种状态，而在Android系统没有用力点击这一状态。

默认状态

点击状态

用力点击会弹出预览小窗口

有些时候只有2种状态，如下图谷歌网：

默认和点击后状态一样

鼠标悬停时出现下划线

默认状态

点击时

而有时候比如在APP里有时候就一直只有一种状态，也可以称静态链接，之前的可以称之为动态链接。在不同的使用场景会因为当时的情况选择最合适的交互体验设计。有的情况下还会加上点击的音效，使用户体验更畅快，这在移动端用的使用情况多一些。

总之链接是网页不可缺少的构成部分，每一个链接的呈现都是经过深思熟虑的。

作者：潘瑶琼（简书作者）

本文由 @潘瑶琼 授权发布于人人都是产品经理，未经作者许可，禁止转载。