Html+Css

//确保适当的绘制和触屏缩放 <meta name="viewport" content="width=device-width, initial-scale=1.0">  // 不让放大缩小,user-scalable=no"

//禁用缩放 <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">

简体中文页面：html lang=zh-cmn-Hans

繁体中文页面：html lang=zh-cmn-Hant

英语页面：html lang=en

唤起qq <a href="tencent://message/?uin=603660895&Site=****&Menu=yes" class="rl">联系我</a>

改变选项卡图标  <link  rel="shortcut icon" href="./favicon.ico">

// 鼠标禁止选中文字:   

暂时不能用//window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();

html,body{-moz-user-select: none; -khtml-user-select: none; user-select: none;} 

// 超出省略号 ...

.ellipsisStyle{ white-space:nowrap; overflow: hidden;text-overflow:ellipsis;}

// 超出2行省略号 ...

.ellipsis-2{text-overflow: -o-ellipsis-lastline; overflow: hidden;text-overflow: ellipsis; display: -webkit-box;-webkit-line-clamp: 2; //这儿的数字代表的是所需要实现效果的第N行  -webkit-box-orient: vertical;}

resize 属性规定是否可由用户调整元素的尺寸。

none用户无法调整元素的尺寸。both用户可调整元素的高度和宽度。

horizontal用户可调整元素的宽度。vertical用户可调整元素的高度。

outline-offset 属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。

outline:2px solid red; //颜色

outline-offset:30px;  //外围距离

media媒体查询

@media screen and (min-width: 480px) {}

all用于所有多媒体类型设备.

print用于打印机 

screen用于电脑屏幕，平板，智能手机等。

speech用于屏幕阅读器

移动端安卓和苹果解决页面缩放一般用meta标签来解决

//确保适当的绘制和触屏缩放<meta name="viewport" content="width=device-width, initial-scale=1.0">

//禁用缩放<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">

css设置变量实现主体色 

设置    body { --mainColor: red; --lsColor: hotpink; }

使用 color: var( --mainColor )

修改 document.body.style.setProperty("--mainColor","black")

移动端适配rem  // 页面大小为320//  html{ font-size:calc(100vw / 320); };   12rem就为 12px

:nth-of-type( odd || even )

/deep/ 选取组件内所有对应元素

自动刷新页面的方法:<meta http-equiv="refresh" content="20">每隔20秒刷新一次页面.

页面自动跳转:<meta http-equiv="refresh" content="20;url=http://www.jb51.net">