HTML代码片段

A. 模版类:

标准模版

                        
    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
            <meta http-equiv="X-UA-Compatible" content="ie=edge">
            <title>Title</title>
            <meta name="Keywords" content="Keywords">
            <meta name="Description" content="Description">
            <link rel="stylesheet" href="../css/xxx.css">
        </head>
        <body>
            ...
        </body>
    </html>
                        
                    

5秒后自动刷新/跳转页面

                        
    <meta http-equiv="Refresh" content="5; URL=page2.html">
                        
                    

1分钟刷新页面

                        
    <meta http-equiv="Refresh" content="60">
                        
                    

DNS预解析

                        
    <link rel="dns-prefetch" href="//mingsixue.com">
                        
                    

禁止页面缓存

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

B. 移动端:

拨打电话

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

发送短信

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

发送邮件

                        
    <a href="mailto:xxx@xxx.com">发送邮件给xx</a>
                        
                    

选择照片或拍摄照片

                        
    <input type="file" accept="image/*" />
                        
                    

选择视频或拍摄视频

                        
    <input type="file" accept="video/*" />
                        
                    

多选文件

                        
    <input type="file" multiple />
                        
                    

忽略自动识别电话

                        
    <meta name="format-detection" content="telephone=no" />
                        
                    

忽略自动识别邮箱

                        
    <meta name="format-detection" content="email=no" />
                        
                    

忽略自动识别电话和邮箱

                        
    <meta name="format-detection" content="telephone=no, email=no" />
                        
                    

纯数字带#和*,适合输入电话

                        
    <input type="tel" />
                        
                    

纯数字,适合输入验证码

                        
    <input pattern="\d*" />
                        
                    

禁止字母大写

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

打开微信

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

打开支付宝

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

打开支付宝的扫一扫

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

打开支付宝的蚂蚁森林

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

让:active有效,让:hover无效

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

                        
    <body ontouchstart></body>
                        
                    

C. Safari 浏览器相关:

设置Safari全屏,在iOS7+无效

                        
    <meta name="apple-mobile-web-app-capable" content="yes">
                        
                    

改变Safari状态栏样式,可选default/black/black-translucent,需在上述全屏模式下才有效

                        
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
                        
                    

添加页面启动占位图

                        
    <link rel="apple-touch-startup-image" href="pig.jpg" media="(device-width: 375px)">
                        
                    

保存网站到桌面时添加图标

                        
    <link rel="apple-touch-icon" sizes="76x76" href="pig.jpg">
                        
                    

保存网站到桌面时添加图标且清除默认光泽

                        
    <link rel="apple-touch-icon-precomposed" href="pig.jpg">
                        
                    

D. 其他浏览器相关:

强制QQ浏览器竖屏

                        
    <meta name="x5-orientation" content="portrait">
                        
                    

强制QQ浏览器全屏

                        
    <meta name="x5-fullscreen" content="true">
                        
                    

开启QQ浏览器应用模式

                        
    <meta name="x5-page-mode" content="app">
                        
                    

强制UC浏览器竖屏

                        
    <meta name="screen-orientation" content="portrait">
                        
                    

强制UC浏览器全屏

                        
    <meta name="full-screen" content="yes">
                        
                    

开启UC浏览器应用模式

                        
    <meta name="browsermode" content="application">
                        
                    

开启360浏览器极速模式

                        
    <meta name="renderer" content="webkit">