HTML/CSS 使用小技巧

HTML 实用小技巧

防止翻译：<p translate="no">Brand name</p>

点击链接自动下载: <a href="image.png" download>

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

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

关闭电话号码识别: <meta name="format-detection" content="telephone=no">

关闭邮箱识别: <meta name="format-detection" content="email=no">

忽略浏览器自动识别数字为电话号码 : <meta name="format-detection" content="telephone=no">

发送邮件: <a href="mailto:839626987@qq.com">发邮件给：839626987@qq.com</a>

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

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

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

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

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

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

此示例返回文档中所有<div>元素的列表，其中class包含”note”或”alert”： var matches = document.querySelectorAll("div.note, div.alert");

此示例使用属性选择器返回文档中属性名为”data-src”的div元素列表： var matches = document.querySelectorAll(“div[data-src]");

此示例使用自定义属性选择器返回文档中属性名为”is-name和is-age的元素列表： var matches = document.querySelectorAll('[is-name],[is-age]')

(new URL(document.location)).searchParams 等价于 new URLSearchParams(location.search)

HTML全局属性列表大全

HTML5自定义属性对象Dataset简介

CSS 小技巧

常用的颜色可以写在:root里面，后续用变量使用

:root {
    /* 这段CSS变量保留 */
    --blue: #23ABEC;
    --dark: #333333;
    --gray: #F5F5F5;
    --green: #01cf97;
    --orange: #f28c48;
    --red: #f4615c;
}

后续使用color: var(–blue, blue);，blue是默认值，当不支持的时候显示

事件有冒泡事件，那么css 同理也可以利用事件的冒泡。比如说

<div class="g-wrap">
    <div class="g-flag">FLAG</div>
    <div class="g-box" draggable="true"></div>
</div>

我们给g-wrap 添加一个 :active 或者 :hover 伪类，希望他在hover或者active的时候做处理某些事情。可以类似事件冒泡一样，当我们触发了子元素g-flag或者g-box的hover或者active的时候，会冒泡到父元素。即有像操作了父元素一样的效果

js

告别烦人的浮点数 toPrecision

Math.calc = function (result) {
  // 测试了一下 15位比较安全， 也能覆盖大部分计算
  return parseFloat(Number(result).toPrecision(15));
}
Math.calc(0.07 * 100) = 7

Math.calc(0.1 + 0.2) = 0.3

对String某个字符比较API的考察

['上海', '北京', '广州', '深圳'].sort((a,b) => new Intl.Collator().compare(a, b))

['上海', '北京', '广州', '深圳'].sort((a, b) => a.localeCompare(b, 'zh-CN'))

非左键点击的事件处理

// https://developer.mozilla.org/en-US/docs/Web/API/Element/auxclick_event

const button = document.querySelector('button');

function random(number) {
  return Math.floor(Math.random() * number);
}

function randomColor() {
    return `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
}

button.onclick = function() {
  button.style.backgroundColor = randomColor();
};

button.onauxclick = function(e) {
  e.preventDefault();
  button.style.color = randomColor();
}

button.oncontextmenu = function(e) {
  e.preventDefault();
}

sunseekers