HTML 开发技巧

# meta 标签功能

<meta charset="utf-8">

<!--主要是强制让文档的宽度与设备宽度保持1:1，最大宽度1.0，禁止屏幕缩放。-->
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">

<!--这个也是iphone私有标签，允许全屏浏览。-->
<meta content="yes" name="apple-mobile-web-app-capable">

<!--iphone的私有标签，iphone顶端状态条的样式。-->
<meta content="black" name="apple-mobile-web-app-status-bar-style">

<!--禁止数字自动识别为电话号码，这个比较有用，因为一串数字在iphone上会显示成蓝色，样式加成别的颜色也是不生效的。-->
<meta content="telephone=no" name="format-detection">

<!--禁止email识别-->
<meta content="email=no" name="format-detection">

<!-- 忽略自动识别电话 -->
<meta name="format-detection" content="telephone=no">

<!-- 忽略自动识别邮箱 -->
<meta name="format-detection" content="email=no">

<!-- 忽略自动识别电话和邮箱 -->
<meta name="format-detection" content="telephone=no, email=no">

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

写背景图时最好加上top left 或者0 0 不然写运动效果时容易出现跳

# 禁止页面缓存

Cache-Control 指定请求和响应遵循的缓存机制，不想使用浏览器缓存就禁止呗！

<meta http-equiv="Cache-Control" content="no-cache">

# 调用系统功能

使用<a>能快速调用移动设备的电话/短信/邮件三大通讯功能，使用<input>能快速调用移动设备的的图库/文件。

这些功能方便了页面与系统的交互，关键在于调用格式一定要准确，否则会被移动端浏览器忽略。

<!-- 拨打电话 -->
<a href="tel:10086">拨打电话给10086小姐姐</a>

<!-- 发送短信 -->
<a href="sms:10086">发送短信给10086小姐姐</a>

<!-- 发送邮件 -->
<a href="mailto:young.joway@aliyun.com">发送邮件给JowayYoung</a>

<!-- 选择照片或拍摄照片 -->
<input type="file" accept="image/*">

<!-- 选择视频或拍摄视频 -->
<input type="file" accept="video/*">

<!-- 多选文件 -->
<input type="file" multiple>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# 弹出数字键盘

使用<input type="tel">弹起数字键盘会带上#和*，适合输入电话。推荐使用<input type="number" pattern="\d*">弹起数字键盘，适合输入验证码等纯数字格式。

<!-- 纯数字带#和* -->
<input type="tel">

<!-- 纯数字 -->
<input type="number" pattern="\d*">

1
2
3
4
5

# 唤醒原生应用

通过location.href与原生应用建立通讯渠道，这种页面与客户端的通讯方式称为URL Scheme，其基本格式为scheme://[path][?query]，《H5与App的通讯方式》 (opens new window)讲述URL Scheme的使用。

scheme：应用标识，表示应用在系统里的唯一标识
path：应用行为，表示应用某个页面或功能
query：应用参数，表示应用页面或应用功能所需的条件参数

URL Scheme一般由前端与客户端共同协商。唤醒原生应用的前提是必须在移动设备里安装了该应用，有些移动端浏览器即使安装了该应用也无法唤醒原生应用，因为它认为URL Scheme是一种潜在的危险行为而禁用它，像Safari和微信浏览器。还好微信浏览器可开启白名单让URL Scheme有效。

若在页面引用第三方原生应用的URL Schema，可通过抓包第三方原生应用获取其URL。

<!-- 打开微信 -->
<a href="weixin://">打开微信</a>

<!-- 打开支付宝 -->
<a href="alipays://">打开支付宝</a>

<!-- 打开支付宝的扫一扫 -->
<a href="alipays://platformapi/startapp?saId=10000007">打开支付宝的扫一扫</a>

<!-- 打开支付宝的蚂蚁森林 -->
<a href="alipays://platformapi/startapp?appId=60000002">打开支付宝的蚂蚁森林</a>

1
2
3
4
5
6
7
8
9
10
11

# 禁止字母大写

有时在输入框里输入文本会默认开启首字母大写纠正，就是输入首字母小写会被自动纠正成大写，特么的烦。直接声明autocapitalize=off关闭首字母大写功能和autocorrect=off关闭纠正功能。

<input autocapitalize="off" autocorrect="off">

# 让:active有效，让:hover无效

有些元素的:active可能会无效，而元素的:hover在点击后会一直处于点击状态，需点击其他位置才能解除点击状态。给<body>注册一个空的touchstart事件可将两种状态反转。

<body ontouchstart></body>

# 经典的1px边框

原理：一般是采用伪元素模拟的方式，把原先元素的 border 去掉，然后利用 :before 或者 :after 重做 border ，并 transform 的 scale 缩小一半，原先的元素相对定位，新做的 border 绝对定位。

  .scale{
    position: relative;
    border:none;
  }
  .scale:after{
    content: '';
    position: absolute;
    bottom: 0;
    background: #000;
    width: 100%;
    height: 1px;
    transform: scaleY(0.5);
    transform-origin: 0 0;
  }

1
2
3
4
5
6
7
8
9
10
11
12
13
14

上次更新: 2021/12/07, 11:04:14