CSS visibility display

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

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

 

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

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

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

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

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 表单提交方法

前端 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'];,完成对接。

CSS 模型和布局方案

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

项目名称 网站(中文) 描述
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 标签引用

// 禁止右键 
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;
}
};

CSS 定义事件

<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 a 事件

<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 动作

<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;" />

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

php Local 和 Global 作用域

Local 和 Global 作用域
函数之外声明的变量拥有 Global 作用域,只能在函数以外进行访问。
函数内部声明的变量拥有 LOCAL 作用域,只能在函数内部进行访问。

php 代码

<!DOCTYPE html>
<html>
<body>

<?php
$x=5; // global scope
  
function myTest() {
   $y=10; // local scope
   echo "<p> 在函数内部测试变量:</p>";
   echo " 变量 x 是:$x";
   echo "<br>";
   echo " 变量 y 是:$y";
} 

myTest();

echo "<p> 在函数之外测试变量:</p>";
echo " 变量 x 是:$x";
echo "<br>";
echo " 变量 y 是:$y";
?>

</body>
</html>

输出结果

在函数内部测试变量:

变量 x 是:
变量 y 是:10
在函数之外测试变量:

变量 x 是:5
变量 y 是:

php include 引入 html 文件套接生成页面

index.php 前端套接页面

<?php
include "header.php";
include "body.php";
include "footer.php"
?>

header.php 头部页面

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title> 这是标题</title>
  <style type="text/css">
    html,body,th{
      font-family: sans-serif;
      font-size: 12px;
      font-weight: 400;
    }
    .myPHP{
      padding: 20px 0 10px 0;
    }
  </style>
</head>

body.php 主体页面

<body>
  <div class="myPHP">
    这是 body 部分
  </div>
</body>

footer.php 页脚页面

<footer>
  这是 footer 部分
</footer>

</html>

通过 CSS 解决 HTML 页面的复选框或单选框与文字对齐问题

当文字 12px 时,单(复)选框 CSS 设置 height:13px; vertical-align:bottom; margin-bottom:.5px; margin-top:5px; 兼容当前 Chrome Firefox IE EDGE 浏览器显示对齐。
CSS

.checkbox_align{height:13px; vertical-align:bottom; margin-bottom:.5px; margin-top:5px;}

HTML

<div style="font-size:12px;">
<input class="checkbox_align" type="radio" /> 单选框 <input class="checkbox_align" type="checkbox" /> 复选框
</div>

 

当文字 14px 时,单(复)选框 CSS 设置 vertical-align:text-bottom; margin-bottom:2px; 兼容当前 Chrome Firefox IE EDGE 浏览器显示对齐。

CSS

.checkbox_align{vertical-align:text-bottom; margin-bottom:2px;}

 

当文字 12px 和 14px 以及 1em 时,单(复)选框 CSS 设置 vertical-align:middle; margin-top:-2px; margin-bottom:1px; 兼容当前 Chrome Firefox IE EDGE 浏览器显示对齐。

CSS

.checkbox_align{vertical-align:middle; margin-top:-2px; margin-bottom:1px;}

 

通用型

vertical-align: -5%;

Windows & Linux Web 服务集成环境

WampServer
WampServer 是集成 Apache、Mysql、PHP 于一体的 Windows Web 开发环境,即在 Windows 下的 Apache、PHP 和 Mysql 的服务器软件。同时,PhpMyAdmin 允许您轻松管理数据库。
应用环境:Windows

XAMPP/LAMPP
XAMPP(Apache+MySQL+PHP+PERL)是一个功能强大的建站集成软件包。这个软件包原来的名字是 LAMPP,但是为了避免误解,最新的几个版本就改名为 XAMPP 了。它可以在 Windows、Linux、Solaris、Mac OS X 等多种操作系统下安装使用。
应用平台:Windows、Linux、Mac OS X

phpStudy 
phpStudy 集成 Apache + Nginx + LightTPD + PHP + MySQL + phpMyAdmin + Zend Optimizer + Zend Loader,一次性安装,无须配置即可使用,是非常方便、好用的 PHP 调试环境。
应用平台:Windows、Linux、macOS

LNMP
LNMP 是一个用 Linux Shell 编写的可以为 CentOS/RHEL/Fedora/Aliyun/Amazon、Debian/Ubuntu/Raspbian/Deepin/Mint Linux VPS 或独立主机安装 LNMP(Nginx/MySQL/PHP)、LNMPA(Nginx/MySQL/PHP/Apache)、LAMP(Apache/MySQL/PHP) 生产环境的 Shell 程序。
应用平台:Linux

LAMP 
LAMP 一键安装包是一个用 Linux Shell 编写的可以为 Amazon Linux/CentOS/Fedora/Debian/Ubuntu 系统的 VPS 或服务器安装 LAMP(Linux + Apache + MySQL/MariaDB/Percona + PHP) 生产环境的 Shell 脚本。
应用平台:Linux

点击 a 链接执行动作事件

<a href="####"> 使用 2 个到 4 个 # 或 #all 表示无执行,1 个 # 代表默认锚点 #top 位置,点击后会回到顶部。</a>

// 点击 a 链接不执行任何动作事件

<a href="javascript:void(0)" onclick="window.open('https://hexingxing.cn')" > 点击链接弹出窗口且原页面不变</a>

// 点击 a 链接响应自定义动作事件

HTML CSS 字体列表顺序

为了实现在苹果电脑中显示苹方字体,在 windows 里显示微软雅黑,我给前端的全局字体顺序通常是这样的:

font-family: "Pingfang SC", "Hiragino Sans GB", "Helvetica", "Droid Sans", "Microsoft YaHei", "Arial", "sans-serif";

Pingfang SC:macOS 和 iOS 系统系统字体,最先显示该字体;

Hiragino Sans GB:苹方出来之前苹果系统的早期字体,考虑低版本系统中没有苹方字体的情况;

Helvetica:苹果系统中的英文字体;

Droid Sans:安卓系统默认中文字体(并不是网传的思源黑体哦), 与 Droid Sans Fallback 的区别是,Droid Sans Fallback 除了中文还兼容了日文、韩文;

Microsoft Yahei:Windows 系统字体;

Arial:苹果和 windows 系统中都有的无衬线英文字体;

Sans-serif:无衬线字体(字体的种类非字体),当前面所有字体都缺失时系统自动选用该类字体中的一种。