m① R②
x① R②
① 表示屏幕尺寸，一般有 15、17 等
② 表示第几代，对应 CPU 和显卡的不同，数字越大越新
相同 ① 与 ② 的情况下仍有细分款式，对应内存、硬盘、屏幕分辨率刷新率等不同
x 系列是全新的系列，是 m 系列的更新款（m 系列不再更新），相比 m 系列提升了散热性能
| 屏幕尺寸 | 型号 | 处理器 | 显卡 | 发布时间 |
| 14.0 英寸 | x14 R1 | 12 代 i7 | 30 系 | 2022年1月 |
| 15.6 英寸 | m15 R4 | 10 代 i7/i9 | 30 系 | |
| m15 R5 | 锐龙 R7-5800H | 30 系 | ||
| m15 R6 | 11 代 i7 | 30 系 | ||
| m15 R7 | 12 代 i7 | 30 系 | 2022年2月 | |
| x15 R1 | 11 代 i7/i9 | 30 系 | ||
| x15 R2 | 12 代 i9 | 30 系 | 2022年2月 | |
| 16.0 英寸 | m16 | 13 代 i7/i9 | 40 系 | 2023年2月 |
| x16 | 13 代 HK | 40 系 | 2023年2月 | |
| 17.3 英寸 | m17 R3 | 10 代 i7 | 20 系 | |
| m17 R4 | 10 代 i7 | 30 系 | ||
| m17 R5 | 锐龙 R7/R9 | 30 系 | 2022年3月 | |
| x17 R1 | 11 代 i7/i9 | 30 系 | ||
| x17 R2 | 12 代 i9K | 30 系 | 2022年2月 | |
| 18英寸 | m18 | 13 代 i9 | 40 系 | 2023年2月 |
x15 是板载内存，x17 是卡槽内存
x 系列屏幕有 1K165Hz / 1K360Hz / 2K240Hz（15寸独有）/ 4K120Hz（17寸独有）
x 系列有 2 个 M.2 硬盘位，没有 2.5 寸硬盘位
Area-51m R(数字)：可拆 CPU
Area-51m R2：10 代 i7，20 系显卡
以上规则整理于 2021 年 7 月，随着时间的推移，以上信息将逐渐失效。
前言：本文源于前几天看到的一条微博：
对于这种言论我并不赞同。我大学学的是化学，没有学习过计算机专业的课程，但我认为至少这个问题并不需要多么高端的计算机专业知识，只要中学数学没有全还给老师，就应该能给出至少一种解法。比如说，我就随便涂了一个多边形和一个点，现在我要找出一种通用的方法来判断这个点是不是在多边形内部（别告诉我用肉眼观察……）。
首先想到的一个解法是从这个点做一条射线，计算它跟多边形边界的交点个数，如果交点个数为奇数，那么点在多边形内部，否则点在多边形外。
这个结论很简单，那它是怎么来的？其实，对于平面内任意闭合曲线，我们都可以直观地认为，曲线把平面分割成了内、外两部分，其中“内”就是我们所谓的多边形区域。
基于这一认识，对于平面内任意一条直线，我们可以得出下面这些结论：
直线穿越多边形边界时，有且只有两种情况：进入多边形或穿出多边形。
在不考虑非欧空间的情况下，直线不可能从内部再次进入多边形，或从外部再次穿出多边形，即连续两次穿越边界的情况必然成对。
直线可以无限延伸，而闭合曲线包围的区域是有限的，因此最后一次穿越多边形边界，一定是穿出多边形，到达外部。
现在回到我们最初的题目。假如我们从一个给定的点做射线，还可以得出下面两条结论：
如果点在多边形内部，射线第一次穿越边界一定是穿出多边形。
如果点在多边形外部，射线第一次穿越边界一定是进入多边形。
把上面这些结论综合起来，我们可以归纳出：
当射线穿越多边形边界的次数为偶数时，所有第偶数次（包括最后一次）穿越都是穿出，因此所有第奇数次（包括第一次）穿越为穿入，由此可推断点在多边形外部。
当射线穿越多边形边界的次数为奇数时，所有第奇数次（包括第一次和最后一次）穿越都是穿出，由此可推断点在多边形内部。
到这里，我们已经了解这个解法的思路了，下面接着看算法实现的一些具体问题和边界条件的处理。
点在多边形的边上
上面我们讲到，这个解法的主要思路就是计算射线穿越多边形边界的次数，那么对于点在多边形的边上这种特殊情况，射线出发的这一次，是否应该算作穿越呢？
看了上面的图就会发现，不管算不算穿越，都会陷入两难的境地——同样落在多边形边上的点，可能会得到相反的结果。这显然是不正确的，因此对这种特殊情况需要特殊处理。
点和多边形的顶点重合
这其实是第一种情况的一个特例。
射线经过多边形顶点
射线刚好经过多边形顶点的时候，应该算一次还是两次穿越？这种情况比前两种复杂，也是实现中的难点。
射线刚好经过多边形的一条边
这是上一种情况的特例，也就是说，射线连续经过了多边形的两个相邻顶点。
解决方案：
判断点是否在线上的方法有很多，比较简单直接的就是计算点与两个多边形顶点的连线斜率是否相等，中学数学都学过。
点和多边形顶点重合的情况更简单，直接比较点的坐标就行了。
顶点穿越看似棘手，其实我们换一个角度，思路会大不相同。先来回答一个问题，射线穿越一条线段需要什么前提条件？没错，就是线段两个端点分别在射线两侧。只要想通这一点，顶点穿越就迎刃而解了。这样一来，我们只需要规定被射线穿越的点都算作其中一侧。
如上图，假如我们规定射线经过的点都属于射线以上的一侧，显然点 D 和发生顶点穿越的点 C 都位于射线 Y 的同一侧，所以射线 Y 其实并没有穿越 CD 这条边。而点 C 和点 B 则分别位于射线 Y 的两侧，所以射线 Y 和 BC 发生了穿越，由此我们可以断定点 Y 在多边形内。同理，射线 X 分别与 AD 和 CD 都发生了穿越，因此点 X 在多边形外，而射线 Z 没有和多边形发生穿越，点 Z 位于多边形外。
解决了第三点，这一点就毫无难度了。根据上面的假设，射线连续经过的两个顶点显然都位于射线以上的一侧，因此这种情况看作没有发生穿越就可以了。由于第三点的解决方案实际上已经覆盖到这种特例，因此不需要再做特别的处理。
这种简单直观的算法通常叫做射线法或奇偶法，下面给出 JavaScript 的算法实现。
/**
* @description 射线法判断点是否在多边形内部
* @param {Object} p 待判断的点，格式：{ x: X 坐标, y: Y 坐标 }
* @param {Array} poly 多边形顶点，数组成员的格式同 p
* @return {String} 点 p 和多边形 poly 的几何关系
*/function rayCasting(p, poly) {
var px = p.x,
py = p.y,
flag = false
for(var i = 0, l = poly.length, j = l - 1; i < l; j = i, i++) {
var sx = poly[i].x,
sy = poly[i].y,
tx = poly[j].x,
ty = poly[j].y
// 点与多边形顶点重合
if((sx === px && sy === py) || (tx === px && ty === py)) {
return 'on'
}
// 判断线段两端点是否在射线两侧
if((sy < py && ty >= py) || (sy >= py && ty < py)) {
// 线段上与射线 Y 坐标相同的点的 X 坐标
var x = sx + (py - sy) * (tx - sx) / (ty - sy)
// 点在多边形的边上
if(x === px) {
return 'on'
}
// 射线穿过多边形的边界
if(x > px) {
flag = !flag
}
}
}
// 射线穿过多边形边界的次数为奇数时点在多边形内
return flag ? 'in' : 'out'}除了射线法还有很多其他的方法，下面再介绍一种回转数法。
平面中的闭合曲线关于一个点的回转数（又叫卷绕数），代表了曲线绕过该点的总次数。下面这张图动态演示了回转数的概念：图中红色曲线关于点（人所在位置）的回转数为 2。
回转数是拓扑学中的一个基本概念，具有很重要的性质和用途。本文并不打算在这一点上展开论述，这需要具备相当的数学知识，否则会非常乏味和难以理解。我们暂时只需要记住回转数的一个特性就行了：当回转数为 0 时，点在闭合曲线外部（回转数大于 0 时所代表的含义，大家可以自己想一想，还是很有趣的）。
对于给定的点和多边形，回转数应该怎么计算呢？
用线段分别连接点和多边形的全部顶点。
计算所有点与相邻顶点连线的夹角。
计算所有夹角和。注意每个夹角都是有方向的，所以有可能是负值。
最后根据角度累加值计算回转数。看过前面的介绍，很容易理解 360°（2π）相当于一次回转。
思路介绍完了，下面两点是实现中需要留意的问题。
JavaScript 的数只有 64 位双精度浮点这一种。对于三角函数产生的无理数，浮点数计算不可避免会造成一些误差，因此在最后计算回转数时需要做取整操作。
通常情况下，平面直角坐标系内一个角的取值范围是 -π 到 π 这个区间，这也是 JavaScript 三角函数
Math.atan2()返回值的范围。但 JavaScript 并不能直接计算任意两条线的夹角，我们只能先计算两条线与 X 正轴夹角，再取两者差值。这个差值的结果就有可能超出 -π 到 π 这个区间，因此我们还需要处理差值超出取值区间的情况。
这里也给出回转数法的 JavaScript 实现。
/**
* @description 回转数法判断点是否在多边形内部
* @param {Object} p 待判断的点，格式：{ x: X 坐标, y: Y 坐标 }
* @param {Array} poly 多边形顶点，数组成员的格式同 p
* @return {String} 点 p 和多边形 poly 的几何关系
*/function windingNumber(p, poly) {
var px = p.x,
py = p.y,
sum = 0
for(var i = 0, l = poly.length, j = l - 1; i < l; j = i, i++) {
var sx = poly[i].x,
sy = poly[i].y,
tx = poly[j].x,
ty = poly[j].y
// 点与多边形顶点重合或在多边形的边上
if((sx - px) * (px - tx) >= 0 && (sy - py) * (py - ty) >= 0 && (px - sx) * (ty - sy) === (py - sy) * (tx - sx)) {
return 'on'
}
// 点与相邻顶点连线的夹角
var angle = Math.atan2(sy - py, sx - px) - Math.atan2(ty - py, tx - px)
// 确保夹角不超出取值范围（-π 到 π）
if(angle >= Math.PI) {
angle = angle - Math.PI * 2
} else if(angle <= -Math.PI) {
angle = angle + Math.PI * 2
}
sum += angle
}
// 计算回转数并判断点和多边形的几何关系
return Math.round(sum / Math.PI) === 0 ? 'out' : 'in'}也有人问到像下面这种复杂多边形有没有办法？答案是肯定的。至于为什么，就留给大家思考吧。
类参考：http://lbs.tianditu.gov.cn/api/js4.0/opensource/class/ImageOverlay.html
资源引用：http://lbs.tianditu.gov.cn/api/js4.0/opensource/openlibrary/ImageOverlay.js
压缩文件：http://lbs.tianditu.gov.cn/api/js4.0/opensource/openlibrary/ImageOverlay.min.js
示例：http://lbs.tianditu.gov.cn/api/js4.0/opensource/demo/ImageOverlay.html
添加图片覆盖物：
map = new T.Map('mapDiv');
map.centerAndZoom(new T.LngLat(116.390750, 39.916980), zoom);
var bd = new T.LngLatBounds(
new T.LngLat(116.385360, 39.911380),
new T.LngLat(116.395940, 39.921400));
img = new T.ImageOverlay("http://lbs.tianditu.gov.cn/images/openlibrary/gugong.jpg", bd, {
opacity: 1,
alt: "故宫博物院"
});
map.addOverLay(img);修改图片地址：
img.setImageUrl(imgBase64);.menu-nav 包裹
<ul class="menu-nav">
...
</ul>.menu-section 区段
<li class="menu-section">
<h4 class="menu-text">区段</h4>
<i class="menu-icon ki ki-bold-more-hor icon-md"></i>
</li>.menu-item 菜单
<li class="menu-item" aria-haspopup="true">
<a href="###" class="menu-link">
<span class="svg-icon menu-icon">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect x="0" y="0" width="24" height="24" />
<path d="M3,16 L5,16 C5.55228475,16 6,15.5522847 6,15 C6,14.4477153 5.55228475,14 5,14 L3,14 L3,12 L5,12 C5.55228475,12 6,11.5522847 6,11 C6,10.4477153 5.55228475,10 5,10 L3,10 L3,8 L5,8 C5.55228475,8 6,7.55228475 6,7 C6,6.44771525 5.55228475,6 5,6 L3,6 L3,4 C3,3.44771525 3.44771525,3 4,3 L10,3 C10.5522847,3 11,3.44771525 11,4 L11,19 C11,19.5522847 10.5522847,20 10,20 L4,20 C3.44771525,20 3,19.5522847 3,19 L3,16 Z" fill="#000000" opacity="0.3" />
<path d="M16,3 L19,3 C20.1045695,3 21,3.8954305 21,5 L21,15.2485298 C21,15.7329761 20.8241635,16.200956 20.5051534,16.565539 L17.8762883,19.5699562 C17.6944473,19.7777745 17.378566,19.7988332 17.1707477,19.6169922 C17.1540423,19.602375 17.1383289,19.5866616 17.1237117,19.5699562 L14.4948466,16.565539 C14.1758365,16.200956 14,15.7329761 14,15.2485298 L14,5 C14,3.8954305 14.8954305,3 16,3 Z" fill="#000000" />
</g>
</svg>
</span>
<span class="menu-text">一级菜单（无子菜单）</span>
</a>
</li>其中，<svg /> 可以替换成其它图标库，如：
<li class="menu-item" aria-haspopup="true">
<a href="###" class="menu-link">
<span class="svg-icon menu-icon">
<i class="fab fa-app-store-ios"></i>
</span>
<span class="menu-text">一级菜单（无子菜单）</span>
</a>
</li>并修正样式：
.aside-menu .menu-nav > .menu-item > .menu-heading .menu-icon i,
.aside-menu .menu-nav > .menu-item > .menu-link .menu-icon i { height: 23px; width: 23px; line-height: 23px; text-align: center; vertical-align: middle; font-size: 1.25rem; }.menu-item-submenu 表示该 .menu-item 有子菜单，即内部包含 .menu-submenu。该规则在任意一级菜单均有效。
.menu-item-open 表示该 .menu-item 当前是打开状态（高亮），否则为闭合状态，需配合 <i class="menu-arrow"></i> 使用。该规则在任意一级菜单均有效。
.menu-item-active 表示该 .menu-item 对应当前页面，效果为灰色背景且文字持续高亮。
.menu-item-parent 作为一级菜单在不同设备上展示的替代，位于一级菜单下的 .menu-submenu 下的 .menu-subnav 内部。
.menu-link 表示可点击（hover 效果），用于 .menu-item 下的 <a /> 或 .menu-item-parent 下的 <span />。
aria-haspopup="true" 每个 .menu-item 都有。
data-menu-toggle="hover" 每个 .menu-item-submenu 都有。
.menu-icon 一级菜单项的左侧图标，支持 <svg /> 或 <i />。
.menu-bullet 非一级菜单项的左侧图标，与 .menu-text 同级，可选 .menu-bullet-line / .menu-bullet-dot。
.menu-text 菜单文字。
.menu-label 菜单项右侧徽章，与 .menu-text 同级。
.menu-arrow 菜单项右侧箭头（当包含子菜单时使用），与 .menu-text 同级。
.menu-toggle 放在 .menu-item-submenu 内部的 .menu-link，与 .menu-item-submenu 上的 data-menu-toggle="hover" 同时出现。
完整示例：
<ul class="menu-nav">
<li class="menu-item" aria-haspopup="true">
<a href="index.html" class="menu-link">
<span class="svg-icon menu-icon">
<!--begin::Svg Icon | path:assets/media/svg/icons/Design/Layers.svg-->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<polygon points="0 0 24 0 24 24 0 24" />
<path d="M12.9336061,16.072447 L19.36,10.9564761 L19.5181585,10.8312381 C20.1676248,10.3169571 20.2772143,9.3735535 19.7629333,8.72408713 C19.6917232,8.63415859 19.6104327,8.55269514 19.5206557,8.48129411 L12.9336854,3.24257445 C12.3871201,2.80788259 11.6128799,2.80788259 11.0663146,3.24257445 L4.47482784,8.48488609 C3.82645598,9.00054628 3.71887192,9.94418071 4.23453211,10.5925526 C4.30500305,10.6811601 4.38527899,10.7615046 4.47382636,10.8320511 L4.63,10.9564761 L11.0659024,16.0730648 C11.6126744,16.5077525 12.3871218,16.5074963 12.9336061,16.072447 Z" fill="#000000" fill-rule="nonzero" />
<path d="M11.0563554,18.6706981 L5.33593024,14.122919 C4.94553994,13.8125559 4.37746707,13.8774308 4.06710397,14.2678211 C4.06471678,14.2708238 4.06234874,14.2738418 4.06,14.2768747 L4.06,14.2768747 C3.75257288,14.6738539 3.82516916,15.244888 4.22214834,15.5523151 C4.22358765,15.5534297 4.2250303,15.55454 4.22647627,15.555646 L11.0872776,20.8031356 C11.6250734,21.2144692 12.371757,21.2145375 12.909628,20.8033023 L19.7677785,15.559828 C20.1693192,15.2528257 20.2459576,14.6784381 19.9389553,14.2768974 C19.9376429,14.2751809 19.9363245,14.2734691 19.935,14.2717619 L19.935,14.2717619 C19.6266937,13.8743807 19.0546209,13.8021712 18.6572397,14.1104775 C18.654352,14.112718 18.6514778,14.1149757 18.6486172,14.1172508 L12.9235044,18.6705218 C12.377022,19.1051477 11.6029199,19.1052208 11.0563554,18.6706981 Z" fill="#000000" opacity="0.3" />
</g>
</svg>
<!--end::Svg Icon-->
</span>
<span class="menu-text">Dashboard</span>
</a>
</li>
<li class="menu-section">
<h4 class="menu-text">区段 A（一级菜单示例）</h4>
<i class="menu-icon ki ki-bold-more-hor icon-md"></i>
</li>
<li class="menu-item" aria-haspopup="true">
<a href="item1" class="menu-link">
<span class="svg-icon menu-icon">
<i class="fas fa-dice-one"></i>
</span>
<span class="menu-text">菜单 A</span>
</a>
</li>
<li class="menu-item" aria-haspopup="true">
<a href="item2" class="menu-link">
<span class="svg-icon menu-icon">
<i class="fas fa-dice-two"></i>
</span>
<span class="menu-text">菜单 B（带徽章）</span>
<span class="menu-label">
<span class="label label-rounded label-primary">6</span>
</span>
</a>
</li>
<li class="menu-item menu-item-active" aria-haspopup="true">
<a href="item2" class="menu-link">
<span class="svg-icon menu-icon">
<i class="fas fa-dice-three"></i>
</span>
<span class="menu-text">菜单 C（高亮）</span>
</a>
</li>
<li class="menu-section">
<h4 class="menu-text">区段 B（二级菜单示例）</h4>
<i class="menu-icon ki ki-bold-more-hor icon-md"></i>
</li>
<li class="menu-item menu-item-submenu" aria-haspopup="true" data-menu-toggle="hover">
<a href="javascript:;" class="menu-link menu-toggle">
<span class="svg-icon menu-icon">
<i class="fas fa-dice-one"></i>
</span>
<span class="menu-text">一级菜单（默认关闭）</span>
<i class="menu-arrow"></i>
</a>
<div class="menu-submenu">
<i class="menu-arrow"></i>
<ul class="menu-subnav">
<li class="menu-item menu-item-parent" aria-haspopup="true">
<span class="menu-link">
<span class="menu-text">一级菜单（默认关闭）</span>
</span>
</li>
<li class="menu-item" aria-haspopup="true">
<a href="custom/apps/inbox.html" class="menu-link">
<i class="menu-bullet menu-bullet-line"><span></span></i>
<span class="menu-text">二级菜单 a</span>
</a>
</li>
<li class="menu-item" aria-haspopup="true">
<a href="custom/apps/inbox.html" class="menu-link">
<i class="menu-bullet menu-bullet-line"><span></span></i>
<span class="menu-text">二级菜单 b（带徽章）</span>
<span class="menu-label">
<span class="label label-danger label-inline">new</span>
</span>
</a>
</li>
</ul>
</div>
</li>
<li class="menu-item menu-item-submenu menu-item-here menu-item-open" aria-haspopup="true" data-menu-toggle="hover">
<a href="javascript:;" class="menu-link menu-toggle">
<span class="svg-icon menu-icon">
<i class="fas fa-dice-two"></i>
</span>
<span class="menu-text">一级菜单（高亮/默认打开）</span>
<i class="menu-arrow"></i>
</a>
<div class="menu-submenu">
<i class="menu-arrow"></i>
<ul class="menu-subnav">
<li class="menu-item menu-item-parent" aria-haspopup="true">
<span class="menu-link">
<span class="menu-text">一级菜单（高亮/默认打开）</span>
</span>
</li>
<li class="menu-item menu-item-active" aria-haspopup="true">
<a href="custom/apps/inbox.html" class="menu-link">
<i class="menu-bullet menu-bullet-line"><span></span></i>
<span class="menu-text">二级菜单 c（高亮）</span>
</a>
</li>
<li class="menu-item" aria-haspopup="true">
<a href="custom/apps/inbox.html" class="menu-link">
<i class="menu-bullet menu-bullet-line"><span></span></i>
<span class="menu-text">二级菜单 d（带徽章）</span>
<span class="menu-label">
<span class="label label-danger label-inline">new</span>
</span>
</a>
</li>
</ul>
</div>
</li>
<li class="menu-section">
<h4 class="menu-text">区段 C（三级菜单示例）</h4>
<i class="menu-icon ki ki-bold-more-hor icon-md"></i>
</li>
<li class="menu-item menu-item-submenu menu-item-open menu-item-here" aria-haspopup="true" data-menu-toggle="hover">
<a href="javascript:;" class="menu-link menu-toggle">
<span class="svg-icon menu-icon">
<i class="fas fa-dice-one"></i>
</span>
<span class="menu-text">一级菜单</span>
<i class="menu-arrow"></i>
</a>
<div class="menu-submenu">
<i class="menu-arrow"></i>
<ul class="menu-subnav">
<li class="menu-item menu-item-parent" aria-haspopup="true">
<span class="menu-link">
<span class="menu-text">一级菜单</span>
</span>
</li>
<li class="menu-item menu-item-submenu menu-item-open menu-item-here" aria-haspopup="true" data-menu-toggle="hover">
<a href="javascript:;" class="menu-link menu-toggle">
<i class="menu-bullet menu-bullet-line"><span></span></i>
<span class="menu-text">二级菜单（默认打开）</span>
<span class="menu-label">
<span class="label label-rounded label-primary">6</span>
</span>
<i class="menu-arrow"></i>
</a>
<div class="menu-submenu">
<i class="menu-arrow"></i>
<ul class="menu-subnav">
<li class="menu-item" aria-haspopup="true">
<a href="custom/apps/user/list-default.html" class="menu-link">
<i class="menu-bullet menu-bullet-dot"><span></span></i>
<span class="menu-text">三级菜单 1</span>
</a>
</li>
<li class="menu-item menu-item-active" aria-haspopup="true">
<a href="custom/apps/user/list-datatable.html" class="menu-link">
<i class="menu-bullet menu-bullet-dot"><span></span></i>
<span class="menu-text">三级菜单 2（高亮）</span>
</a>
</li>
</ul>
</div>
</li>
<li class="menu-item menu-item-submenu" aria-haspopup="true" data-menu-toggle="hover">
<a href="javascript:;" class="menu-link menu-toggle">
<i class="menu-bullet menu-bullet-line"><span></span></i>
<span class="menu-text">二级菜单（默认关闭）</span>
<i class="menu-arrow"></i>
</a>
<div class="menu-submenu">
<i class="menu-arrow"></i>
<ul class="menu-subnav">
<li class="menu-item menu-item-submenu" aria-haspopup="true" data-menu-toggle="hover">
<a href="javascript:;" class="menu-link menu-toggle">
<i class="menu-bullet menu-bullet-dot"><span></span></i>
<span class="menu-text">二级菜单（默认关闭）</span>
<i class="menu-arrow"></i>
</a>
<div class="menu-submenu">
<i class="menu-arrow"></i>
<ul class="menu-subnav">
<li class="menu-item" aria-haspopup="true">
<a href="custom/apps/profile/profile-1/overview.html" class="menu-link">
<i class="menu-bullet menu-bullet-line"><span></span></i>
<span class="menu-text">三级菜单 3</span>
</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
</ul>效果：
关于手风琴功能：Metronic 菜单已实现手风琴功能，即当展开一个闭合的菜单时，非当前页面所在菜单项的房系菜单会自动闭合。
在升级 kernel 后若无法启动系统，网站无法打开，SSH 无法连接，无法 ping 通。
使用 VNC 进入操作界面：
一种界面是可选择次新的内核版本：
应该能正常启动。
另一种界面提示：
Give root password for maintenance
输入密码后可启动。
阿里云工程师的建议：
1、当前默认是以最新内核启动的，由于新版内核文件存在异常无法正常运行，在手动选择低内核版本启动后，可以先更改下默认内核引导顺序，配置默认使用低版本内核运行，避免重启再次出现问题。 修改内核引导顺序 https://help.aliyun.com/knowledge_detail/41463.html 2、升级内核本身属于高危操作，建议操作前先做好快照备份，同时更新时可以参考下文档方案 避免Linux实例升级内核系统无法启动的方法 https://help.aliyun.com/knowledge_detail/59360.html
Discuz! 数据库加索引
待优化的 SQL：（pre_forum_thread 表有 150 万条数据）
SELECT * FROM pre_forum_thread WHERE `fid`='62' AND `displayorder` IN('0','1','2','3','4') ORDER BY displayorder DESC, dateline DESC LIMIT 20, 20加索引前，
EXPLAIN 结果 Extra 为：Using index condition; Using where; Using filesort
> 时间: 0.915s
加索引后：`fid`, `displayorder`, `dateline`
EXPLAIN 结果 Extra 为：Using where 或 Using index condition
> 时间: 0.001s
magapp 数据库加索引
待优化的 SQL：（mag_score_action_log 表有 200 万条数据）
SELECT COUNT(*) AS tp_count
FROM `mag_score_action_log`
WHERE action_id = 20
AND user_id = 650070
AND create_time >= 1534953600
AND create_time < 1535040000
LIMIT 1加索引前，
EXPLAIN 结果 Extra 为：?????
> 时间: 70s
加索引后：`action_id`, `user_id`, `create_time`
EXPLAIN 结果 Extra 为：Using where; Using index
> 时间: 0.073s
待优化的 SQL：（mag_score_mission_log 表有约 55 万条数据）
SELECT COUNT(*) AS tp_count
FROM `mag_score_mission_log`
WHERE mission_id = 7
AND user_id = 650070
AND create_time >= 1534953600
AND create_time < 1535040000
LIMIT 1加索引前，
EXPLAIN 结果 rows 为：549178
> 时间: 17.719s
加索引后：`mission_id`, `user_id`, `create_time`
EXPLAIN 结果 rows 为：1
> 时间: 0.025s
待优化的 SQL：（mag_score_mission_user 表有约 28 万条数据）
SELECT *
FROM `mag_score_mission_user`
WHERE `user_id` = 431779
AND `mission_id` = 5
AND `create_time` >= 1534953600
ORDER BY complete_count DESC
LIMIT 1不加索引
1SIMPLEmag_score_mission_userALL282436Using where; Using filesort
> 时间: 7.325s
`user_id`, `mission_id`
1SIMPLEmag_score_mission_userrefix_us_miix_us_mi10const,const7Using where; Using filesort
时间: 0.014s
`user_id`, `mission_id`, `create_time`
1SIMPLEmag_score_mission_userrangeix_us_miix_us_mi151Using index condition; Using filesort
时间: 0.023s
`user_id`, `mission_id`, `complete_count`
1SIMPLEmag_score_mission_userrefix_us_miix_us_mi10const,const7Using where
> 时间: 0.014s
`user_id`, `mission_id`, `complete_count`, `create_time`
1SIMPLEmag_score_mission_userrefix_us_miix_us_mi10const,const7Using where
> 时间: 0.028s
`user_id`, `mission_id`, `create_time`, `complete_count`
1SIMPLEmag_score_mission_userrangeix_us_miix_us_mi151Using index condition; Using filesort
> 时间: 0.025s
其它就不一一举例了，根据 SHOW FULL PROCESSLIST 的慢查询自行加索引就行了。
苹果宣布 2017 年 1 月 1 日开始所有上架的应用必须启用 ATS 安全传输功能。ATS 要求服务器必须支持传输层安全(TLS)协议 1.2 以上版本；证书必须使用 SHA256 或更高的哈希算法签名；必须使用 2048 位以上 RSA 密钥或 256 位以上 ECC 算法等等，不满足条件的证书，ATS 都会拒绝连接。查看具体要求
微信小程序进入开发公测阶段，同样要求提供 HTTPS 方式安全连接。
证书类型对比
| DV SSL 域名验证型 | OV SSL 组织验证型 | EV SSL 扩展验证型 | ||
| 申请条件 | 申请对象 | 个人 / 企业 | 企业 | 企业 |
| 证明域名所有权 | √ | √ | √ | |
| 价格 | 免费 / 低 | 中 | 高 | |
| 提交审核 | 提交资料 | 邮箱、姓名、手机等 | DV 所需资料以及： 组织机构资料（企业执照）等 | OV 所需资料以及： 法律相关文件 |
| 审核时间 | 自动审核 1小时内 | 人工审核 3~5工作日 | 人工审核 3~5工作日 | |
| 可信标识 | 地址栏挂锁 | √ | √ | √ |
| 地址栏公司名称 | × | × | √ | |
| 绿色地址栏（IE） | × | × | √ | |
| 保护范围 | 单域名 | √ | √ | √ |
| 多域名 | √ | √ | √ | |
| 通配符/泛域名 | √ | √ | × | |
| 推荐用途 | 个人及小型网站 | 一般组织或中小型企业 | 金融、电商、大型企业或受信组织 | |
* 表格中，单域名指单个子域名（如：123.abc.com），多域名指多个子域名（可以不属于同一个顶级域名，如：123.abc.com / 456.abc.com / 456.def.com），通配符指单个顶级域名的所有子域名（如：*.abc.com）。
* 若 https 的网页中包含 http 资源，则地址栏的锁可能会消失。
* 浏览器上点击地址栏的锁可以查看具体的证书详情。
证书颁发机构（CA）
| 机构 | 简介 | 谁在用 |
| Let's Encrypt | 公益组织，免费，每 90 天续约 | 越来越多的中小网站 |
| Symantec | 赛门铁克 | 百度、支付宝、阿里云、Apple（EV）、微软 |
| GlobalSign | 公众信任服务行业的领头羊 | 淘宝、天猫（OV）、阿里云、京东（OV） |
| GeoTrust | 全球第二大？ | 微信 |
| Comodo | 价格实惠 | |
| GoDaddy | 全球互联网域名注册商 | |
| DigiCert | 不颁发 DV，在非 DV 市场份额中是老大 | Facebook、Twitter（EV）、Mozilla（EV）、GitHub（EV）等 |
| 沃通 WoSign | 国产 | 360搜索（EV） |
| Other |
* 赛门铁克收购了 VeriSign，VeriSign 又收购了 GeoTrust，所以 Symantec 和 GeoTrust 在 SSL 认证服务上就不知道是什么关系了，请自行百度。
* 代理商也可以购买，或许价格优惠，或许申请方便，如：阿里云、腾讯云等，甚至上淘宝购买。
* 查看：Netcraft 统计的市场份额
* 网上说使用 Let's Encrypt 的 SSL 在遇到国内第三方 DNS 解析服务时会超时，我认为只是在申请证书时偶尔超时（DNS query timed out），重试即可，证书部署后访问网站时应该没有问题，请知情者告知实情。
下一步
知其然，才能使其安——王震
常见的攻击手法
SQL 注入
文件上传
弱口令
Nday 攻击
XSS
社会工程学
等等……
被黑原因总结
| 不知道 | 不及时 | 不在意 |
| 不知道自用系统安全动态 | 不及时更新系统安全补丁 | 不在意个人信息安全 |
| 不知道常见黑客攻击手段 | 不及时修复漏洞 | 不在意用户数据安全 |
| 不知道该如何修复 | 不及时排查被黑系统 | 不在意各种安全软件提示、提醒 |
| 不知道今后该如何防御 | 不在意细节 |
那些年，醉人的“三字经”
| 网站渗透娱乐版 | 针对企业的实战版 |
|
进谷歌 找注入 没注入 就旁注 没旁注 用0day 没0day 猜目录 没目录 就嗅探 爆账户 找后台 传小马 放大马 拿权限 挂页面 放暗链 清数据 |
搞企业 先扫描 默认密 都知道 社工库 找一找 邮箱号 先列好 九头蛇 跑一跑 搞不定 放大招 发邮件 凭伪造 没邮箱 搞网站 二级域 皆可爆 老漏洞 没修好 新漏洞 刷一票 干研发 Git 找 原代码 全都要 CDN 可以跳 防火墙 可以撬 堡垒机 可以绕 云防护 可以秒 是企业 没有哪家搞不了 |
攻击手法统计
Nday攻击：45%
漏洞攻击：35%
其他攻击：15%
0day攻击：5%
一些箴言
80%的安全问题都是已知的安全问题，但是能抵御已知安全问题的网站只有20%
弱口令虽然看起来很弱，但是忽视弱口令只会让你的网站变得更弱
没有百分之百的安全，你所做的一切不是为了让自己无坚不摧，只是让自己不再弱不禁风
80%的系统安全问题都是可以通过升级补丁来解决，但是能做到这点的人只有20%
SQL注入存在十几年了，依然是主流攻击手段，可见安全比的不是谁更先进，而是谁更细心
不要得罪你的开发人员，这就跟你吃饭不要得罪服务员一样，你不知道他下一秒会不会在你的菜里吐口水
还有一句
永远不要觉得你安装的安全防护软件真的可以保护你的安全
服务器安全注意事项
不安装不必要的软件
排查所有系统弱口令
关闭不常用的端口
控制目录权限
不在服务器上下载、打开非官方提供软件
不在服务器上打开他人发来的网页链接
如何排查暗链？
利用查看网站的源代码来检查黑链
使用站长工具“网站死链检测”功能来检查黑链
用 FTP 查看网站文件的修改时间来检查黑链
接入 webscan.360.cn 检测
后门排查
Windows 下，D 盾、安全狗、主机卫士
Linux 下，Seay 一句话扫描脚本、主机卫士 Linux 版
用 FTP 查看网站文件的修改时间来排查恶意后门
接入 webscan.360.cn 等在线检测
安全类书籍推荐
《Web 安全深度剖析》——张炳帅 著
《白帽子讲 Web 安全》——吴瀚清 著
《Web 前端黑客技术揭秘》——钟晨呜（余弦）著
《黑客攻防技术宝典 Web 实战篇》——国外某黑客 著
联系方式
| 分辨率 | 宽高比值 | 最简宽高比 |
|---|---|---|
| 7680×4320（8K） | 1.777777777777778 | 16:9 |
| 3840×2160（QFHD 4K） | 1.777777777777778 | 16:9 |
| 2048×1536（QXGA 2K） | 1.333333333333333 | 4:3 |
| 2560×1600（WQXGA 2K） | 1.6 | 8:5 |
| 2560×1440（1440p Quad HD 2K） | 1.777777777777778 | 16:9 |
| 1920×1080（1080p Full HD） | 1.777777777777778 | 16:9 |
| 1680×1050 | 1.6 | 8:5 |
| 1366×768 | 1.778645833333333 | 约16:9 |
| 1360×768 | 1.770833333333333 | 约16:9 |
| 1280×1024 | 1.25 | 5:4 |
| 1280×800 | 1.6 | 8:5 |
| 1280×768 | 1.666666666666667 | 5:3 |
| 1280×720（720p HD） | 1.777777777777778 | 16:9 |
| 1024×768 | 1.333333333333333 | 4:3 |
| 800×600 | 1.333333333333333 | 4:3 |
| 2436×1125 | 2.165333333333333 | 约13:6 |