何星星

2019-07-202019-07-24 • 何星星 • 暂无评论 • 何星星

我推荐的 9 本科普读物

2020-05-272020-05-27 • 知识维新 • 暂无评论 • 何星星

万物解释者 @兰道尔·门罗

what if? @兰道尔·门罗

how to @兰道尔·门罗

薛定谔的猫 @亚当·哈特-戴维斯

巴甫洛夫的狗 @亚当·哈特-戴维斯

知识边缘 @马库斯·杜·桑托伊

人类愚蠢辞典 @皮耶尔乔治·奥迪弗雷迪

中科院科普：1 分钟物理 @中科院物理所

95% 的问题 @豪尔赫·陈丹尼尔·怀特森

CSS visibility display

2020-05-222020-05-22 • 前端开发 • 暂无评论 • 何星星

visibility，显示空白占位空间，显示内容后页面布局不发生变化

a div.img{
	visibility:hidden; //隐藏对象
}
a:hover div.img{
	visibility:visible; //显示对象
}

display，不显示占位空间，显示内容后使页面重新适应布局

a div.img{
	display:none; //隐藏对象
}
a:hover div.img{
	display:block; //显示对象
}

2020 知名的领先反病毒软件厂商免费提供反病毒和基本保护

2020-05-182020-05-18 • 知识维新 • 暂无评论 • 何星星

Kaspersky（卡巴斯基）

为您的 PC 免费提供反病毒和基本保护，主要帮助您的 PC 抵御病毒，保护您的个人信息；阻止危险文件和应用程序，提供防护的同时不会牺牲性能；向您发出关于可疑网站的警告。
支持中文语言；
免费版适用于 Windows 和 Android
免费版下载：https://www.kaspersky.com.cn/free-antivirus

Bitdefender（比特梵德）

迅速，免费使用，并且仅加载了每台计算机所需的准系统保护功能。只需几秒钟即可安装，以最高速度运行，而不会降低 PC 的速度；适用于游戏，图像和视频编辑以及资源密集型应用程序；轻巧的解决方案中包含强大的保护功能。
暂无中文语言；
免费版适用于 Windows、Mac 和 Android
免费版下载：https://www.bitdefender.com/solutions/free.html

Comodo（科摩多）

具有出色的安全功能，使其成为 IT 安全行业中最好的免费防病毒软件。选择 Comodo 有助于成功保护您的 PC 免受病毒，特洛伊木马，蠕虫，间谍软件，后门程序，rootkit，广告软件和其他恶意软件的感染，包括最危险的零日威胁。
暂无中文语言；
免费版适用于 Windows 和 Android
免费版下载：https://antivirus.comodo.com/free-antivirus.php

Avira（小红伞）

屡获殊荣的防护且永久免费；顶级杀毒软件 – 拦截间谍软件、广告软件、勒索软件等。实时防护和更新；轻且快：不会降低 PC 运行速度。
支持中文语言；
免费版适用于 Windows、Mac、Android 和 iOS
免费版下载：https://www.avira.com/zh-cn/free-antivirus

Avast（爱维士）由 Avast + AVG 组成

屡获殊荣的云端免费病毒防护，配备最大型威胁检测网络、机器学习病毒保护、轻松的密码管理和家庭网络安全，不会减慢您的 PC 速度。
支持中文语言；
免费版适用于 Windows、Mac、Android 和 iOS
免费版下载：https://www.avast.com/zh-cn/free-antivirus-download

DNS 预解析 dns-prefetch，优化页面数据载入速度

2020-04-302020-04-30 • 何星星 • 暂无评论 • 何星星

<meta charset="utf-8" />
<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="dns-prefetch" href="//x1.hexingxing.cn">
<link rel="dns-prefetch" href="//dns.hexingxing.cn">
<link rel="dns-prefetch" href="//api.hexingxing.cn">
<link rel="dns-prefetch" href="//static.hexingxing.cn">

0. 当浏览器请求一个 URL 的时候大概有以下几个过程：阻挡、域名解析、建立连接、发送请求、等待响应、接收数据。一般取决于用户的网络情况和网站服务器处理速度有关。

1. 阻挡：解决方案 —— 提高浏览器并发连接数

阻挡：不同的浏览器对单个域名的最大并发连接数有一定的限制，HTTP/1.0 和 HTTP/1.1 也不相同。比如 HTTP/1.1 协议下，IE6 的并发连接数限制是 2 个；而在 HTTP/1.0 下，IE6 的并发连接数可以达到 4 个。在其它浏览器也有类似的限制，一般是 4~8 个。这个时候，如果浏览器同时对某一域名发起多个请求，超过了限制就会出现等待，也就是阻挡。

那么为了解决阻挡这一问题，我们可以对某些 URL 的域名分散处理，比如我们的图片域名，一般用类似 img.hexingxing.cn 的域名，当一个页面包含 20 多张图片的时候，那至少有 10 几个请求会被阻挡，而如果我们分散到 img0.hexingxing.cn/img1.hexingxing.cn/img2.hexingxing.cn/…等不同域名的时候，至少这 20 个图片请求会并发进行，网站打开速度会明显提升很多。类似的，可以对一些 CSS 和 JS 的域名同样处理。

2. 域名解析：解决方案 —— DNS 预解析

域名解析：从域名查询 IP 的过程，这个过程一般都很快的，但也会引起延迟。一般浏览器会适当的对解析结果缓存，并对页面中出现的新域名进行预解析，但并不是所有的浏览器都会这么做，为了帮助其它浏览器对某些域名进行预解析，你可以在页面的 html 标签中添加 dns-prefetch 告诉浏览器对指定域名预解析：

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

一般大型网站都会看到此类配置，以下是常见大型网站的 DNS 预解析配置信息：

百度

<link rel="dns-prefetch" href="//s1.bdstatic.com"/>
<link rel="dns-prefetch" href="//t1.baidu.com"/>
<link rel="dns-prefetch" href="//t2.baidu.com"/>
<link rel="dns-prefetch" href="//t3.baidu.com"/>
<link rel="dns-prefetch" href="//t10.baidu.com"/>
<link rel="dns-prefetch" href="//t11.baidu.com"/>
<link rel="dns-prefetch" href="//t12.baidu.com"/>
<link rel="dns-prefetch" href="//b1.bdstatic.com"/>

京东

<link rel="dns-prefetch" href="//static.360buyimg.com"/>
<link rel="dns-prefetch" href="//misc.360buyimg.com"/>
<link rel="dns-prefetch" href="//img10.360buyimg.com"/>
<link rel="dns-prefetch" href="//img11.360buyimg.com"/>
<link rel="dns-prefetch" href="//img12.360buyimg.com"/>
<link rel="dns-prefetch" href="//img13.360buyimg.com"/>
<link rel="dns-prefetch" href="//img14.360buyimg.com"/>
<link rel="dns-prefetch" href="//img20.360buyimg.com"/>
<link rel="dns-prefetch" href="//img30.360buyimg.com"/>
<link rel="dns-prefetch" href="//d.3.cn"/>
<link rel="dns-prefetch" href="//d.jd.com"/>

淘宝

<link rel="dns-prefetch" href="//g.alicdn.com" />
<link rel="dns-prefetch" href="//img.alicdn.com" />
<link rel="dns-prefetch" href="//tce.alicdn.com" />
<link rel="dns-prefetch" href="//gm.mmstat.com" />
<link ref="dns-prefetch" href="//tce.taobao.com" />
<link rel="dns-prefetch" href="//log.mmstat.com" />
<link rel="dns-prefetch" href="//tui.taobao.com" />
<link rel="dns-prefetch" href="//ald.taobao.com" />
<link rel="dns-prefetch" href="//gw.alicdn.com" />
<link rel="dns-prefetch" href="//atanx.alicdn.com"/>
<link rel="dns-prefetch" href="//dfhs.tanx.com"/>
<link rel="dns-prefetch" href="//ecpm.tanx.com" />
<link rel="dns-prefetch" href="//res.mmstat.com" />

3. cookie 隔离

那就是为什么用 g.alicdn.com 这个域名，而不是 g.taobao.com 呢？这个得从 cookie 说起，淘宝的 cookie 已经非常大了，据说曾接近 1K，如果用后面的域名，那每次请求图片都会带上长长的 cookie，后果可想而知，不仅使得网络请求变慢，而且还浪费了带宽，而淘宝图片服务器并不需要这些 cookie。这就是所说的 cookie 污染，为了解决这一问题，单独的域名是很有必要的。

4. DNS 预解析解决方案

DNS 预解析是浏览器试图在用户访问链接之前解析域名，这是计算机的正常 DNS 解析机制。域名解析后，如果用户确实访问该域名，那么 DNS 解析时间将不会有延迟。

最明显的例子，DNS 预解析在某个页面中包含非常多的域名非常有效，如搜索结果页。遇到网页中的超链接，DNS prefetching 从中提取域名并将其解析为 IP 地址，这些工作在用户浏览网页时，使用最少的 CPU 和网络在后台进行解析。当用户点击这些已经预解析的域名，可以平均减少 200 毫秒耗时（假设用户最近还未访问过该域名），更重要的是用户不会遇到 DNS 解析最坏的情况（往往超过 1 秒）。

DNS Prefetch，即 DNS 预获取，是前端优化的一部分。一般来说，在前端优化中与 DNS 有关的有两点：
1. 减少 DNS 的请求次数
2. 进行 DNS 预获取

DNS 作为互联网的基础协议，其解析的速度似乎很容易被网站优化人员忽视。现在大多数新浏览器已经针对 DNS 解析进行了优化，典型的一次 DNS 解析需要耗费 20-120 毫秒，减少 DNS 解析时间和次数是个很好的优化方式。
DNS Prefetching 是让具有此属性的域名不需要用户点击链接就在后台解析，而域名解析和内容载入是串行的网络操作，所以这个方式能减少用户的等待时间，提升用户体验。浏览器对网站第一次的域名 DNS 解析查找流程依次为：浏览器缓存——系统缓存——路由器缓存——ISP DNS 缓存——递归搜索。

默认情况下浏览器会对页面中和当前域名（正在浏览网页的域名）不在同一个域的域名进行预获取，并且缓存结果，这就是隐式的 DNS Prefetch。如果想对页面中没有出现的域进行预获取，那么就要使用显示的 DNS Prefetch。

5. 预解析的实现

5.1. 用 meta 信息来告知浏览器, 当前页面要做 DNS 预解析:

<meta http-equiv="x-dns-prefetch-control" content="on" />

5.2. 在页面 header 中使用 link 标签来强制对 DNS 预解析:

<link rel="dns-prefetch" href="http://x1.hexingxing.cn" />

5.3. 如果需要禁止隐式的 DNS Prefetch，可以使用以下的标签：

<meta http-equiv="x-dns-prefetch-control" content="off">

CSS 设置 HTML 背景图片自适应居中全屏

2020-04-302020-04-30 • 前端开发 • 暂无评论 • 何星星

background-image: url(https://images6.alphacoders.com/404/404677.jpg);
position: fixed;
top: 0;
left: 0;    
width: 100%;
height: 100%;
min-width: 1000px;
z-index: -10;
zoom: 1;
background-color: #fff;
background-repeat: no-repeat;
background-position: center 0;
background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;

PHP cURL 获取 Location: 重定向的最终 URL

2020-04-302020-04-30 • 前端开发 • 暂无评论 • 何星星

PHP 代码：

$url = 'https://www.baidu.com/link?url=6Ajd8F6TZ-n2p7SVuGxhKyLN5-RKI6FITj6RHWyH1l3';
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_NOBODY, 1); //不返回 BODY 页面内容
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); //不直接输出
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1); //返回最后的 Location
curl_exec($ch);
$info = curl_getinfo($ch,CURLINFO_EFFECTIVE_URL);
curl_close($ch);
echo $info;

以上 URL 最终重定向到 https://hexingxing.cn/

PHP 表单提交方法

2020-04-302020-04-30 • 前端开发 • 暂无评论 • 何星星

前端 html 信息提交页面 index.html

<form method="post" action="myWeb/name.php"> <!-- 将信息提交到 myWeb/name.php -->
Name: <input type="text" name="fname">
<input type="submit">
</form>

后端 php 信息接收页面 name.php

<?php 
$name = $_POST['fname']; // $_POST['fname']; 为接收前端提交的信息
echo $name; // 打印 name --> $_POST['fname']; --> 表单
?>

关键点：
html 信息页面与 php 信息页面关联点为 "name"，由前端 name="fname" 提交到 $_POST['fname'];，完成对接。

NSLookup 使用方法

2020-04-282020-04-28 • 系统运维 • 暂无评论 • 何星星

NSLookup 可以指定查询的类型，可以查到 DNS 记录的生存时间还可以指定使用那个 DNS 服务器进行解释。

如何用本地计算机查询 DNS 记录?
打开命令提示符窗口 (开始– 运行— 输入 CMD– 回车)

nslookup 的语法为 nslookup –qt=类型目标域名 (注意 qt 必须小写)

类型主要有:
A 地址记录 (Ipv4)
AAAA 地址记录（Ipv6）
CNAME 别名记录
HINFO 硬件配置记录，包括 CPU、操作系统信息
ISDN 域名对应的 ISDN 号码
MB 存放指定邮箱的服务器
MG 邮件组记录
MINFO 邮件组和邮箱的信息记录
MR 改名的邮箱记录
MX 邮件服务器记录
NS 名字服务器记录
PTR 反向记录
RP 负责人记录
SRV TCP 服务器信息记录
TXT 域名对应的文本信息
比如你要查询 baidu.com 的 MX 记录, 那在命令符提示窗口输入：nslookup -qt=mx baidu.com 则可以查到域名 baidu.com 的 mx 记录

如何使用指定 DNS 服务器查询?
语法为 nslookup -qt=类型目标域名指定的 DNS 服务器 IP 或域名

实际使用：

nslookup -qt=mx baidu.com 1.2.4.8


服务器:  public1.sdns.cn
Address:  1.2.4.8

非权威应答:
baidu.com       MX preference = 20, mail exchanger = mx1.baidu.com
baidu.com       MX preference = 10, mail exchanger = mx.maillb.baidu.com
baidu.com       MX preference = 20, mail exchanger = mx50.baidu.com
baidu.com       MX preference = 15, mail exchanger = mx.n.shifen.com
baidu.com       MX preference = 20, mail exchanger = jpmx.baidu.com

baidu.com       nameserver = ns2.baidu.com
baidu.com       nameserver = ns4.baidu.com
baidu.com       nameserver = ns3.baidu.com
baidu.com       nameserver = ns7.baidu.com
baidu.com       nameserver = dns.baidu.com
mx1.baidu.com   internet address = 220.181.3.85
mx1.baidu.com   internet address = 111.202.115.85
jpmx.baidu.com  internet address = 12.0.243.41
mx50.baidu.com  internet address = 180.76.13.18
dns.baidu.com   internet address = 202.108.22.220
ns2.baidu.com   internet address = 220.181.33.31
ns3.baidu.com   internet address = 112.80.248.64
ns4.baidu.com   internet address = 14.215.178.80
ns7.baidu.com   internet address = 180.76.76.92

CSS 模型和布局方案

2020-04-282020-04-28 • 前端开发 • 暂无评论 • 何星星

1.CSS 标准盒子模型

CSS 盒子模型又称为框模型（Box Model），包含元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。

模型中内层是 content 依次是 padding border margin。通常我们设置背景时就是内容、内边距、边框这三部分，如果 border 设置颜色的时候会显示 boder 颜色当 boder 颜色是透明时会显示 background-color 的颜色。而该元素的子元素的是从 content 开始的。而外边距是透明的，不会遮挡其他元素。

元素框的总宽度 = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right;

元素框的总高度 = height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom;

2.CSS 所有选择器及其优先级、使用场景，哪些可以继承，如何运用 at 规则

CSS 选择器种类有：

通用选择器：*{}

id 选择器：#header{}

class 选择器：.header{}

元素选择器：div{}

子选择器：ul > li{}

后代选择器：div p{}

伪类选择器：:hover、::selection、.action、:first-child、:last-child、:first-of-type、:last-of-type、:nth-of-type(n)、:nth-of-last-type(n) 等, 例如 a:hover{}

伪元素选择器: :after、:before 等, 例如：li:after

属性选择器: input[type=”text”]

组合选择器：E,F/E F（后代选择器）/E>F（子元素选择器）/E+F（直接相邻元素选择器—-匹配之后的相邻同级元素）/E~F（普通相邻元素选择器—-匹配之后的同级元素）

层次选择器：p~ul 选择前面有 p 元素的每个 ul 元素

CSS 选择器优先级：

选择器优先级由高到低分别为：
!important > 作为 style 属性写在元素标签上的内联样式 >id 选择器> 类选择器> 伪类选择器> 属性选择器> 标签选择器> 通配符选择器（* 应少用）> 浏览器自定义；

当比较多个相同级别的 CSS 选择器优先级时，它们定义的位置将决定一切。下面从位置上将 CSS 优先级由高到低分为六级：
1、位于<head/> 标签里的<style/> 中所定义的 CSS 拥有最高级的优先权。
2、第二级的优先属性由位于 <style/> 标签中的 @import 引入样式表所定义。
3、第三级的优先属性由<link/> 标签所引入的样式表定义。
4、第四级的优先属性由<link/> 标签所引入的样式表内的 @import 导入样式表定义。
5、第五级优先的样式有用户设定。
6、最低级的优先权由浏览器默认。

使用场景：

class 使用场景：需要某些特定样式的标签则放在同一个 class 中，需要此样式的标签可再添加此类。（class 不可被 javascript 中的 GetElementByID 函数所调用）
id 使用场景：1、根据提供的唯一 id 号快速获取标签对象，如：document.getElementById(id) ；2、用于充当 label 标签 for 属性的值：示例：<label for=’userid’> 用户名：</label>，表示单击此 label 标签时，id 为 userid 的标签获得焦点

CSS 哪些属性可以继承？
css 继承特性主要是指文本方面的继承 (比如字体、颜色、字体大小等)，盒模型相关的属性基本没有继承特性。

不可继承的：
display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、top、bottom、left、right、z-index、float、clear、 table-layout、vertical-align、page-break-after、page-bread-before 和 unicode-bidi。

所有元素可继承的：
visibility 和 cursor

终极块级元素可继承的：
text-indent 和 text-align

内联元素可继承的：
letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction

列表元素可继承的：
list-style、list-style-type、list-style-position、list-style-image

常用 at 规则及使用示例：

/*定义字符集*/
@charset "utf-8"    
/*导入 css 文件*/ 
@import "base.css"
/*自定义字体*/
@font-face {}
/*声明 CSS3 animation 动画关键帧*/
@keyframes fadeIn {}
/*媒体查询*/
@media{}

3.CSS 伪类和伪元素有哪些，它们的区别和实际应用

伪类的例子有：
:hover
:active
:first-child
:visited 等。

伪元素的例子有：
:first-line
:first-letter
:after
:before

伪类和伪元素的根本区别在于：
它们是否创造了新的元素 (抽象)。从我们模仿其意义的角度来看，如果需要添加新元素加以标识的，就是伪元素，反之，如果只需要在既有元素上添加类别的，就是伪类。
伪元素在一个选择器里只能出现一次，并且只能出现在末尾;
伪类则是像真正的类一样发挥着类的作用，没有数量上的限制，只要不是相互排斥的伪类，也可以同时使用在相同的元素上。

实际使用：
伪类用一个冒号表示 :first-child
伪元素则使用两个冒号表示 ::first-line

4.CSS 定位的规则、定位参照物、对文档流的影响

a. static – 普通流定位
position: static;

b. float – 浮动定位
float: left;
有两个取值：left(左浮动) 和 right(右浮动)。浮动元素会在没有浮动元素的上方，效果上看是遮挡住了没有浮动的元素，有 float 样式规则的元素是脱离文档流的，它的父元素的高度并不能有它撑开。

c. relative – 相对定位
position: relative;
相对本元素的左上角进行定位，top,left,bottom,right 都可以有值。虽然经过定位后，位置可能会移动，但是本元素并没有脱离文档流，还占有原来的页面空间。可以设置 z-index。使本元素相对于文档流中的元素，或者脱离文档流但是 z-index 的值比本元素的值要小的元素更加靠近用户的视线。
相对定位最大的作用是为了实现某个元素相对于本元素的左上角绝对定位，本元素需要设置 position 为 relative。

d. absolute – 绝对定位
position: absolute;
相对于祖代中有 relative(相对定位) 并且离本元素层级关系上是最近的元素的左上角进行定位，如果在祖代元素中没有有 relative 定位的，就默认相对于 body 进行定位。
绝对定位是脱离文档流的，与浮动定位是一样的效果，会压在非定位元素的上方。可以设置 z-index 属性。

5.CSS 水平垂直居中的方案

行内元素水平居中：
首先看它的父元素是不是块级元素，如果是，则直接给父元素设置 text-align: center;
如果不是，则先将其父元素设置为块级元素，再给父元素设置 text-align: center;

块级元素水平居中 – 定宽度：
1. 需要谁居中，给其设置 margin: 0 auto;（作用：使盒子自己居中）
2. 首先设置父元素为相对定位，再设置子元素为绝对定位，设置子元素的 left:50%，即让子元素的左上角水平居中；
设置绝对子元素的 margin-left: -元素宽度的一半 px; 或者设置 transform: translateX(-50%);

块级元素水平居中 – 不定宽度：
1. 默认子元素的宽度和父元素一样，这时需要设置子元素为 display: inline-block; 或 display: inline; 即将其转换成行内块级/行内元素，给父元素设置 text-align: center;
2. 首先设置父元素为相对定位，再设置子元素为绝对定位，设置子元素的 left:50%，即让子元素的左上角水平居中；
利用 CSS3 新增属性 transform: translateX(-50%);

使用 flexbox 布局实现水平居中 – 宽度定不定都可以:
使用 flexbox 布局，只需要给待处理的块状元素的父元素添加属性 display: flex; justify-content: center;

单行的行内元素垂直居中:
只需要设置单行行内元素的” 行高等于盒子的高” 即可；

多行的行内元素垂直居中:
使用给父元素设置 display:table-cell; 和 vertical-align: middle; 属即可；

块级元素垂直居中方法一：使用定位
首先设置父元素为相对定位，再设置子元素为绝对定位，设置子元素的 top: 50%，即让子元素的左上角垂直居中；

定高度：设置绝对子元素的 margin-top: -元素高度的一半 px; 或者设置 transform: translateY(-50%);
不定高度：利用 css3 新增属性 transform: translateY(-50%);

块级元素垂直居中方法二：使用 flexbox 布局实现 – 高度定不定都可以
使用 flexbox 布局，只需要给待处理的块状元素的父元素添加属性 display: flex; align-items: center;

水平垂直居中-已知高度和宽度的元素：

方法一：
设置父元素为相对定位，给子元素设置绝对定位，top: 0; right: 0; bottom: 0; left: 0; margin: auto;

方法二：
设置父元素为相对定位，给子元素设置绝对定位，left: 50%; top: 50%; margin-left: –-元素宽度的一半 px; margin-top: –-元素高度的一半 px;

水平垂直居中-未知高度和宽度的元素：

方法一：使用定位属性
设置父元素为相对定位，给子元素设置绝对定位，left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%);

方案二：使用 flex 布局实现
设置父元素为 flex 定位，justify-content: center; align-items: center;

6.CSS 函数有哪些？

属性函数：attr()；

背景图片函数：linear-gradient()、radial-gradient()、conic-gradient()、repeating-linear-gradient()、repeating-radial-gradient()、repeating-conic-gradient()、image-set()、image()、url()、element()；

颜色函数：rgb()、rgba()、hsl()、hsla()、hwb()、color-mod()；

图形函数：circle()、ellipse()、inset()、polygon()、path()

滤镜函数：blur()、brightness()、contrast()、drop-shadow()、grayscale()、hue-rotate()、invert()、opacity()、saturate()、sepia()；

转换函数：matrix()、matrix3d()、perspective()、rotate()、rotate3d()、rotateX()、rotateY()、rotateZ()、scale()、scale3d()、scaleX()、scaleY()、scaleZ()、skew()、skewX()、skewY()、translate()、translateX()、translateY()、translateZ()、translate3d()；

数学函数：calc()、min()、max()、mixmax()、repeat()；

缓动函数：cubic-bezier()、steps()；

其他函数：counter()、counters()、toggle()、var()、 symbols()。

7.CSS 浏览器兼容性写法

a. 浏览器 CSS 样式初始化

由于每个浏览器的 CSS 默认样式不尽相同，所以最简单有效的方式就是对其进行初始化，相信很多朋友都写过这样的代码，在所有 CSS 开始前，先把 marin 和 padding 都设为 0，以防不同浏览器的显示效果不一样。

*{ 
 margin: 0; 
 padding: 0; 
}

关于浏览器 CSS 样式初始化，经验不丰富的话，可能也不知道该初始化什么，这里给大家推荐一个库，Normalize.css，github star 数量接近 3.4 万，选取展示其中几个样式设置，如下：

html { 
 line-height: 1.15; /* Correct the line height in all browsers */ 
 -webkit-text-size-adjust: 100%; /* Prevent adjustments of font size after orientation changes in iOS. */ 
} 
 
body { 
 margin: 0; 
} 
 
a { 
 background-color: transparent; /* Remove the gray background on active links in IE 10. */ 
} 
 
img { 
 border-style: none; /* Remove the border on images inside links in IE 10. */ 
}

b. CSS 样式浏览器的私有属性

为了兼容浏览器的私有属性，我们经常会在某个 CSS 的属性前添加一些前缀，比如-webkit-，-moz- ，-ms-，这些就是浏览器的私有属性。为什么会出现私有属性呢？这是因为制定 HTML 和 CSS 标准的组织 W3C 动作是很慢。通常，有 W3C 组织成员提出一个新属性，比如说圆角 border-radius，大家都觉得好，但 W3C 制定标准，要走很复杂的程序，审查等。

然而浏览器商市场推广时间紧，如果一个属性已经够成熟了，就会在浏览器中加入支持。但是为避免日后 W3C 公布标准时有所变更，会加入一个私有前缀，比如-webkit-border-radius，通过这种方式来提前支持新属性。等到日后 W3C 公布了标准，border-radius 的标准写法确立之后，再让新版的浏览器支持 border-radius 这种写法。

常用的前缀有：
-moz 代表 Firefox 浏览器私有属性；
-ms 代表 Internet Explorer 浏览器私有属性；
-webkit 代表 Chrome 和 Safari 浏览器私有属性；
-o 代表 Opera 私有属性；
实际应用时，对于私有属性的顺序要注意，把标准写法放到最后，兼容性写法放到前面。

 -webkit-transform:rotate(-3deg); /*为 Chrome/Safari*/ 
 -moz-transform:rotate(-3deg); /*为 Firefox*/ 
 -ms-transform:rotate(-3deg); /*为 IE*/ 
 -o-transform:rotate(-3deg); /*为 Opera*/ 
 transform:rotate(-3deg);

前端构建平台和环境 Vue React Angular npm Node Webpack

2020-03-232020-03-23 • 前端开发 • 暂无评论 • 何星星

项目名称	网站（中文）	描述
Vue.js	cn.vuejs.org	Vue.js 是一个构建数据驱动的渐进式 JavaScript 框架。
React	zh-hans.reactjs.org	React 是一个用于构建用户界面的 JavaScript 库。
Angular	angular.cn	Angular 是一个用于构建移动和桌面 Web 应用程序的平台。
npmjs	npmjs.cn	npm 是一个 JavaScript 世界的包管理工具，并且是 Node.js 平台的默认包管理工具。
Node.js	nodejs.org/zh-cn	Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。
Webpack	webpackjs.com	Webpack 是一个模块打包器。Webpack 的主要目标是将 JavaScript 文件打包在一起，打包后的文件用于在浏览器中使用，但它也能够胜任转换 (transform)、打包 (bundle) 或包裹 (package) 任何资源 (resource or asset)。

JS 禁止右键、图片拖放、选择文本、frame 标签引用

2020-03-222020-05-22 • 前端开发 • 暂无评论 • 何星星

// 禁止右键 
document.oncontextmenu = function(){return false};

// 禁止图片拖放
document.ondragstart = function(){return false};

// 禁止frame标签引用
if (parent.frames.length > 0) top.location.replace(document.location);

// 禁止选择文本
document.onselectstart=function(){
if (event.srcElement.type != "text" && event.srcElement.type != "textarea" && event.srcElement.type != "password")
return false
else return true;
};

// 禁止选择文本: 火狐
if (window.sidebar){
document.onmousedown=function(e){
var obj=e.target;
if (obj.tagName.toUpperCase() == "INPUT" || obj.tagName.toUpperCase() == "TEXTAREA" || obj.tagName.toUpperCase() == "PASSWORD")
return true;
else
return false;
}
};

解决 html 和 php 页面乱码问题

2020-03-122020-05-18 • 何星星 • 暂无评论 • 何星星

hmtl 页面

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
	<title>title</title>
</head>
<body>

</body>
</html>

php 页面

<?php 
header("Content-Type: text/html;charset=utf-8");
?>

php 文件名

<?php 
$file_name=iconv("gb2312","gbk",$file_name);    
?>

CSS 定义事件

2020-03-12 • 前端开发 • 暂无评论 • 何星星

<style type="text/css">
	.outline{
		outline-color: #ccc; /*outline: none;*/
	}
</style>

//定义输入框和按钮边框线颜色

<style type="text/css">
input::-webkit-input-placeholder {
    color: #ffffff66;
}

input:-moz-placeholder { 
    color: #ffffff66;
}

input::-moz-placeholder { 
    color: #ffffff66;
}

input:-ms-input-placeholder { 
    color: #ffffff66;
}</style>

//definifion placeholder font color

<style type="text/css">
input[type=checkbox] {
  margin-right: 0px;
  cursor: pointer;
  font-size: 12px;
  width: 12px;
  height: 12px;
  position: relative;
}
 
input[type=checkbox]:after {
  position: absolute;
  width: 7px;
  height: 9px;
  right: 1px;
  content: " ";
  color: #fff;
  display: inline-block;
  visibility: visible;
  padding: 0px 1px;
  border-radius: 1px;
  background:#ffc107;
  border:1px solid #ffffff;
}
 
input[type=checkbox]:checked:after {
  content: "\2713"; /*markup is ✓*/
  font-size: 7px;
  font-weight:700;
  background-color: #63a2ff;
}</style>

//definifion bottom style

/* definifion input savepasswd bgcolor*/

<style type="text/css">
input:-webkit-autofill {
 box-shadow: 0 0 0px 1000px white inset !important;
}  
input:-webkit-autofill:focus {
 box-shadow: 0 0 0px 1000px white inset !important;
}  </style>

input 自动填充颜色改变或透明之白色背景

<style type="text/css">
2. 设置透明：
input:-internal-autofill-previewed,
input:-internal-autofill-selected {
    -webkit-text-fill-color: #FFFFFF !important;
    transition: background-color 5000s ease-in-out 0s !important;
}</style>

//input 自动填充颜色改变或透明之透明

<style type="text/css">
input:-webkit-autofill {
 box-shadow: 0 0 0px 1000px white inset !important;
}  
input:-webkit-autofill:focus {
 box-shadow: 0 0 0px 1000px white inset !important;
}  </style>

//input 自动填充颜色改变或透明之白色背景

<style type="text/css">
input:-internal-autofill-previewed,
input:-internal-autofill-selected {
    -webkit-text-fill-color: #FFFFFF !important;
    transition: background-color 5000s ease-in-out 0s !important;
}</style>

//input 自动填充颜色改变或透明之透明

<style type="text/css">
input{
    caret-color:red;
}</style>

//定义 input 光标颜色

<style type="text/css">
input{
    color:red;
}</style>

//定义 input 字体和光标颜色

HTML/PHP 前端获取当前年份代码

2020-03-122020-05-18 • 前端开发 • 暂无评论 • 何星星

PHP

<?php echo date("Y")?>

<script type="text/javascript">document.write((new Date()).getFullYear());</script>

html 全局定义事件

2020-03-122020-03-12 • 前端开发 • 暂无评论 • 何星星

<html lang="zh-CN" onclick="javascript:location.reload();">

//点击页面任意位置刷新

html a 事件

2020-03-122020-03-12 • 前端开发 • 暂无评论 • 何星星

<a href='javascript:window.print()'> 打印</a>

//打印当前页面

<a href="###" onclick=window.close();return false)> 关闭本窗口</a>

//关闭当前页面

<a href="javascript:void(0)" onclick="location.reload(true)"></a>

//点击刷新页面

<a href="javascript:void(0);" onclick="js_method()"></a>

//点击无效

html input 动作

2020-03-122020-03-12 • 前端开发 • 暂无评论 • 何星星

<input type="submit" value=" 输入值" onMouseOut=this.style.color="blue" onMouseOver=this.style.color="red" />

//鼠标激活和经过按钮颜色变换

<input type="text" value=" 输入值" onmouseover="javascript:this.focus();" />

//鼠标划过激活输入框

<input type="text" value=" 输入值" onmouseover="this.focus();this.select();" />

//鼠标划过激活并选中输入框内容

<input type="text" value=" 输入值" onfocus="this.select()" />

//选中输入框即选择内容

<input type="text" value=" 输入值" onclick="if(this.value==' 预置值')this.value=' 提示值'" />

//如果输入值等于预置值则显示提示值

<input type="text" value=" 输入值" onclick="if(this.value!=' 预置值')this.value=' 提示值'" />

//如果输入值不等于预置值则显示提示值

<input type="text" value="" onblur="if(this.value==''){this.value=' 自动填充内容';}" />

//鼠标激活并离开输入框后显示预置内容

<input type="text" value=" 输入值" onclick=javascript:this.value="" />

//激活输入框后清空内容

<input type="text" value=" 输入值" style="outline: none;" />

//去掉输入框和按钮边框默认淡蓝色框线

通过百度统计找到知乎链接我网站文章的知乎专栏文章

2020-03-122020-03-12 • 信息价值 • 暂无评论 • 何星星

今天在检查统计数据时，发现我有一篇文章来自知乎多条访问记录，来路链接来自知乎 https://link.zhihu.com/?target=xxx，遂想看看是哪一篇知乎内容在链接我的文章。

通过提取百度统计上的来路链接，再经过 URL 转码（encodeURIComponent）后得到一个明朗的链接地址：https://link.zhihu.com/?target=https://hexingxing.cn/srgb-adobe-rgb-ntsc-dci-p3-rec-2020-pro-photo-rgb-colorspace/&source=https://www.zhihu.com/appview/p/110281051?xxx（尾部 “?” 后的一大串是识别信息和用户本地信息，在此就略过了）。

由此可知道在 URL 中 “source” 后的 “https://www.zhihu.com/appview/p/110281051” 即是链接我文章的知乎专栏文章了，此时打开将是一个适用 app 阅读的页面，原因是当时浏览者是通过手机浏览器访问的，所以也就生成了 app 端的链接，此时只需将链接转换为知乎专栏子域名即可：https://www.zhihu.com/appview/ —> https://zhuanlan.zhihu.com/，最终呈现为 https://zhuanlan.zhihu.com/p/110281051。

全球四大根 WHOIS 服务器
机构缩写	Whois 服务器*	机构全名	地点	提供查询内容
ARIN	whois.arin.net	美国互联网号码注册机构	美国弗吉尼亚州森特维尔市	美洲区 (加拿大和美国及加/北**)
RIPE	whois.ripe.net	欧洲 IP 域名网络协调中心	荷兰阿姆斯特丹	欧洲区 (欧洲和中东及中亚部分地区)
APNIC	whois.apnic.net	亚洲与太平洋地区网络信息中心	澳大利亚昆士兰州南布里斯班	亚太区 (亚洲***及太平洋地区)
AFRINIC	whois.afrinic.net	非洲网络信息中心	毛里求斯埃比昂共和国网络城	非洲区 (非洲地区)
LACNIC	whois.lacnic.net	拉丁美洲及加勒比网络信息中心	巴西圣保罗	拉美区 (拉丁美洲和加勒比部分地区)

NIC 和亚太地区重要 WHOIS 服务器
机构缩写	Whois 服务器*	机构全名	地点	提供查询内容
INTERNIC	whois.internic.net	互联网络信息中心	美国洛杉矶市	.com,.net,.org,.biz,.info,.name
CNNIC	whois.cnnic.net.cn	中国互联网络信息中心	中科院计算机网络信息中心	.cn 域名 (除.edu.cn) 信息
CERNIC	whois.edu.cn	中国教育和科研计算机网网络中心	清华大学	.edu.cn 域名和中国教育网 IP 地址信息
JPNIC	whois.nic.ad.jp	日本互联网络信息中心	日本东京	.jp 域名和日本境内的 IP 地址信息
KRNIC	whois.krnic.net	韩国互联网络信息中心	韩国首尔	.kr 域名和韩国境内的 IP 地址信息
TWNIC	whois.twnic.net	台湾互联网络信息中心	中国台湾台北	.tw 域名和部分台湾岛内 IP 地址信息

我推荐的 9 本科普读物

CSS visibility display

最新可用显示 .ai .psd .eps 等格式文件缩略图预览的插件

2020 知名的领先反病毒软件厂商免费提供反病毒和基本保护

最新域名和 IP 地址的 WHOIS 服务信息

DNS 预解析 dns-prefetch，优化页面数据载入速度

1. 阻挡：解决方案 —— 提高浏览器并发连接数

2. 域名解析：解决方案 —— DNS 预解析

3. cookie 隔离

4. DNS 预解析解决方案

5. 预解析的实现

CSS 设置 HTML 背景图片自适应居中全屏

PHP cURL 获取 Location: 重定向的最终 URL

PHP 表单提交方法

NSLookup 使用方法

CSS 模型和布局方案

1.CSS 标准盒子模型

2.CSS 所有选择器及其优先级、使用场景，哪些可以继承，如何运用 at 规则

常用 at 规则及使用示例：

3.CSS 伪类和伪元素有哪些，它们的区别和实际应用

4.CSS 定位的规则、定位参照物、对文档流的影响

5.CSS 水平垂直居中的方案

6.CSS 函数有哪些？

7.CSS 浏览器兼容性写法

a. 浏览器 CSS 样式初始化

b. CSS 样式浏览器的私有属性

前端构建平台和环境 Vue React Angular npm Node Webpack

JS 禁止右键、图片拖放、选择文本、frame 标签引用

解决 html 和 php 页面乱码问题

CSS 定义事件

HTML/PHP 前端获取当前年份代码

html 全局定义事件

html a 事件

html input 动作

通过百度统计找到知乎链接我网站文章的知乎专栏文章