xuduowei – 第9页 – 徐多蔚APP开发，合肥物联网项目开发，合肥网络开发，合肥项目高端定制，企业oa开发，合肥小程序开发，合肥公众号开发，合肥网络安防

2020年2月4日2020年2月4日

新手理解HTML、CSS、javascript之间的关系

最准确的网页设计思路是把网页分成三个层次，即：结构层(HTML)、表示层(CSS)、行为层(Javascript)。

一、HTML、CSS、JavaScript简介及简单分工

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。

1、什么是HTML（超文本标记语言 Hyper Text Markup Language），HTML 是用来描述网页的一种语言。
2、CSS(层叠样式表 Cascading Style Sheets),样式定义如何显示 HTML 元素，语法为：selector {property：value} (选择符 {属性：值})
3、JavaScript是一种脚本语言，其源代码在发往客户端运行之前不需经过编译，而是将文本格式的字符代码发送给浏览器由浏览器解释运行。

对于一个网页，HTML定义网页的结构，CSS描述网页的样子，JavaScript设置一个很经典的例子是说HTML就像一个人的骨骼、器官，而CSS就是人的皮肤，有了这两样也就构成了一个植物人了，加上javascript这个植物人就可以对外界刺激做出反应，可以思考、运动、可以给自己整容化妆（改变CSS）等等，成为一个活生生的人。如果说HTML是肉身、CSS就是皮相、Javascript就是灵魂。没有Javascript,HTML+CSS是植物人，没有Javascript、CSS是个毁容的植物人。
如果说HTML是建筑师，CSS就是干装修的，Javascript是魔术师。

二、HTML、CSS、JavaScript发展
1、HTML的版本
超文本标记语言（第一版）——在1993年6月作为互联网工程工作小组（IETF）工作草案发布（并非标准）：
HTML 2.0——1995年11月作为RFC 1866发布，在RFC 2854于2000年6月发布之后被宣布已经过时
HTML 3.2——1997年1月14日，W3C推荐标准
html 5
html 5
HTML 4.0——1997年12月18日，W3C推荐标准
HTML 4.01（微小改进）——1999年12月24日，W3C推荐标准
HTML 5——2014年10月28日，W3C推荐标准[4]

现在我们只说HTML 4.01和HTML5,因为2000年国际万维网联盟（W3C）公布发行了XHTML 1.0版本。XHTML 1.0是一种在HTML 4.0基础上优化和改进的的新语言，目的是基于XML应用。而XHTML 与 HTML 4.01 几乎是相同的，HTML从最初发展到XHTML的过程中变得更加的严谨，更加的灵活，与CSS结合的更好。原则上说现在能看到的大部分网页是使用HTML4或者HTML5这两个版本的。

总结 html 原本最终是要过渡到xml的，于是有了html->xhtml[html4]->xml 但是过渡不成功。所以直接有了html5。

HTML5
它是对HTML5的一次重大的修改，虽然HTML5 标准还在制定中，但不能阻碍其势不可挡的脚步。

2、CSS的版本（Level）

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

1996年W3C正式推出了CSS1；
1998年W3C正式推出了CSS2；
CSS2.1是W3C现在正在推荐使用的；
CSS3现在还处于开发中。

3、JavaScript的前世今生

JavaScript一种直译式脚本语言，它的解释器被称为JavaScript引擎，是浏览器的一部分，即：JavaScript是由客户端的浏览器解释执行的，所以在谈JavaScript的历史之前我们要先说一下浏览器，最早的web浏览器是创建于1991年的WorldWideWeb，后来改名为Nexus，之后出现了各类浏览器，直到1994年，网景公司（Netscape）发布了Navigator浏览器0.9版，这是历史上第一个比较成熟的网络浏览器，随后的1995年微软推出了IE浏览器，从此掀起了浏览器大战，微软采取操作系统捆绑IE浏览器，最终获得压倒性胜利，战争失利的Netscape在之后被收购、合并、解散。之后一段时间IE独领风骚，之后被Opera，Safari，Firefox，Chrome陆续瓜分掉一些市场份额，改变了一家独大的局面。

但是谈到JavaScript的历史，必须提到一个公司和一个人，那就是Netscape公司及其员工Brendan Eich，网景公司在发布了Navigator之后，急于解决浏览器与用户交互这个问题，Javascript之父Brendan Eich只用了10天的时间发明了livescript(让我辈情何以堪）,由于网景高层是java的粉丝，或者说为了抱上当时热炒的java的大腿，livascript更名为javascript,Brendan Eich他的思路是：
（1）借鉴C语言的基本语法；

　　（2）借鉴Java语言的数据类型和内存管理；

　　（3）借鉴Scheme语言，将函数提升到”第一等公民”（first class）的地位；

　　（4）借鉴Self语言，使用基于原型（prototype）的继承机制。
所以，Javascript语言实际上是两种语言风格的混合产物—-（简化的）函数式编程+（简化的）面向对象编程。
Javascript 1.0获得了巨大的成功，Netscape随后推出了1.1，之后作为竞争对手的微软在自家的 IE3 中加入了名为 JScript （名称不同是为了避免侵权）的JavaScript实现。由此JavaScript 的规范化被提上日程，1997年，以 JavaScript1.1 为蓝本的建议被提交给了欧洲计算机制造商协会（ECMA），ECMA牵头经过数月的努力完成了 ECMA-262 ——定义了一种名为 ECMAScript 的新脚本语言的标准。

虽然 JavaScript 和 ECMAScript 通常被人用来表达相同的意思，但 JavaScript 的含义去比 ECMA-262 中规定的多得多。

一个完整的 JavaScript 实现应由三个部分组成：

（1）核心（ECMAScript），描述了该语言的语法和基本对象。

（2）文档对象模型（DOM），描述处理网页内容的方法和接口。

（3）浏览器对象模型（BOM），描述与浏览器进行交互的方法和接口。

2020年1月9日

H5的音视频自动播放问题

1. 背景和问题由来

（chrome浏览器）项目中用到了一个短视频页面加载动画，一开始视频无声正常。接着需求变更，让视频动画加上一个背景音乐，然后就不能播放了。然后开始了各种尝试和api文档查询。为何一个带声音的视频文件在chrome浏览器里无法有声自动播放呢？
经过调研和尝试，发现：

video标签的有声自动播放在ie和firefox以及低版本的chrome浏览器都能正常。
video标签的有声自动播放在高版本的chrome浏览器里，第一次播放正常，第二次和之后不正常。强刷新（清理浏览器缓存）后又正常。
–video标签用js动态加载，本页面的url变化后，视频正常播放；不变化视频不能正常播放。有点像重定向的可播放的味道。

2.调研发现

首先看看MDN对video标签的相关属性的描述，你会发现，对autoplay的描述里，多了一些关于chrome浏览器的补充描述：
In some browsers (e.g. Chrome 70.0) autoplay doesn't work if no muted attribute is present.
大致意思就是：静音播放。
然后，查询些其他资料，发现chrome的版本更新里，也有相关描述，连接如下：
https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
不能翻墙的可以直接看下面截图：

里面也介绍了chrome浏览器对视频播放的一些限制：静音自动播放；手动触发播放等等。
查询了一下，发现chrome浏览器之所以加这种限制，也是为了解决用户痛点：各种自动播放视频广告。如果是移动端上自动播放，那么流量就是用户自己承担了，而用户还不自知。只能说该浏览器在关注用户体验方面走在了其他浏览器厂商的前面。

3.解决方法

暂时只有2种方式：

静音自动播放：<video src="xxx.mp4" autoplay muted></video>。
非静音手动触发播放。

2019年12月30日2019年12月30日

tp5中，如何实现js 等特殊字符自动html实体化。

一、application/config.php中设置如下

// 默认全局过滤方法用逗号分隔多个
‘default_filter’ => ‘trim,htmlspecialchars’,

二、KindEditor中，不要做任何特殊处理！！切忌。

<textarea name="content" class="input" style="height:450px; border:1px solid #ddd;">{$arr.content}</textarea>

三、非textarea或者 input显示中。记得htmlspecialchars_decode哦。

<?php echo htmlspecialchars_decode($con);?>

四、非textarea涉及到去除html标签，截取的，请按如下格式（其中 deleteHtmlTags为定义的去html标签函数）。

<?php 
                $con=pagecontent(1)['content'];
                echo deleteHtmlTags(htmlspecialchars_decode($con));?>

2019年12月22日

My设置密码报错：ERROR 1819 (HY000): Your password does not satisfy the current policy requir

英文翻译：错误1819（hy000）：您的密码不符合当前策略要求

validate_password_policy取值：

Policy Tests Performed
0 or LOW Length
1 or MEDIUM Length; numeric, lowercase/uppercase, and special characters
2 or STRONG Length; numeric, lowercase/uppercase, and special characters; dictionary file
默认是1，即MEDIUM，所以刚开始第一次设置的密码必须符合该参数的长度，并且必须含有数字、小写大写字母、特殊字符。
我设置的密码为：@wjb13191835106，很明显我错误的原因就是密码太过于简单，不符合mysql密码策略。

问题解决
注意：其实没有什么大问题存在，只是密码设置过于简单不符合mysql策略而已，改成复杂符合的就行了。
当然，如果我是普通的学习环境、测试环节，不需要如此复杂难记的密码，请看下面。

（1）修改validate_password_policy参数值为0（1为开启复杂策略）
注意：此参数（policy）必须优先修改，因为policy策略不修改为0会影响下面的length参数。

set global validate_password_policy=0;

（2）修改validate_password_length参数值为1

set global validate_password_length=1;

最后执行修改密码测试：

alter user ‘root’@’localhost’ identified by ‘@wjb13191835106’;

2019年12月7日

如何查看WINDOWS下的环境变量位置

在WINDOWS系统内，存在系统变量。系统变量是操作系统用来定义数据存储位置，这样不论谁登陆系统都能准确地使用相关数据。系统管理员可以更改系统变量，下面我们来看看系统变量的位置。

右键点击计算机（我的电脑），在弹出的菜单选择属性
出现的系统界面中选择”高级系统设置“
进入高级系统设置界面后，选择环境变量
进入环境变量界面，此时系统变量就藏在这里，你可以进行相关的修改
我们先查看系统变量里面有没有“Path”
如果没有Path,我们点击新建，在变量名中填写Path,然后变量值中写入%SystemRoot%;%SystemRoot%\System32; 记住几个变量值应该以分号分开

2019年12月7日

PuTTY实现Windows向Linux上传文件

PSCP工具

PuTTY小巧方便。但若需要向网络中的Linux系统上传文件，则可以使用PuTTY官方提供的PSCP工具来实现上传。PSCP基于ssh协议实现，其用法与SCP命令非常类似。

获取PSCP工具

在PuTTY官方网站的下载页中，找到PSCP，下载。

下载后，习惯性的将pscp.exe与Putty.exe文件放在一起。

首先需要保证在命令行下可以访问到pscp.exe。可以通过配置Windows的环境变量Path，或者直接通过命令行访问到pscp.exe。

示例：如下所示，在Windows中访问到pscp.exe

使用 ? 查看命令参数与选项：

传输文件

把本地文件file传输到Linxu服务器的目录中。

基本命令格式：pscp 文件用户名@LinuxIP:目录

使用“ -l ”选项可以指定用户名。

基本命令格式：pscp -l 用户名文件 LinuxIP:目录

使用“ -r ”选项可以用于传输目录。

基本命令格式：pscp -r 目录用户名@LinuxIP:目录

或使用命令格式：pscp -l 用户名 -r 目录 LinuxIP:目录

例：上传文件至Linux。

对相应的用户输入密码，即可开始上传。

在Linux相应的目录下查看，文件已经存在。

同理，PSCP也可以用于从Linux向Windows复制文件或目录。不再赘述。

PuTTY + Xming 实现Oracle图形安装 http://www.linuxidc.com/Linux/2015-08/121051.htm

使用PuTTY时对原始设置的几个简单实用修改 http://www.linuxidc.com/Linux/2014-02/96924.htm

如何通过PuTTY实现远程登录控制Linux平台 http://www.linuxidc.com/Linux/2013-06/85266.htm

PuTTY连接VMWare中Ubuntu的问题解决 http://www.linuxidc.com/Linux/2013-05/84819.htm

VMware+Linux+PuTTY环境配置 http://www.linuxidc.com/Linux/2013-05/84818.htm

使用PuTTY密钥认证机制远程登录Linux http://www.linuxidc.com/Linux/2015-03/114944.htm

来源：http://www.linuxidc.com/Linux/2016-08/133991.htm

2019年10月29日2019年10月29日

PHP数据类型转换, 保留小数

PHP的数据类型转换属于强制转换，允许转换的PHP数据类型有：

（int）、（integer）：转换成整形
（float）、（double）、（real）：转换成浮点型
（string）：转换成字符串
（bool）、（boolean）：转换成布尔类型
（array）：转换成数组
（object）：转换成对象

PHP数据类型有三种转换方式：

在要转换的变量之前加上用括号括起来的目标类型
使用3个具体类型的转换函数，intval()、floatval()、strval()
使用通用类型转换函数settype(mixed var,string type)

第一种转换方式： (int) (bool) (float) (string) (array) (object)

<?php   
$num1=3.14;   
$num2=(int)$num1;   
var_dump($num1); //输出float(3.14)   
var_dump($num2); //输出int(3)   
?>

第二种转换方式： intval() floatval() strval()

<?php   
    $str="123.9abc";   
    $int=intval($str);     //转换后数值：123   
    $float=floatval($str); //转换后数值：123.9   
    $str=strval($float);   //转换后字符串："123.9"    
?>

第三种转换方式： settype()

<?php   
    $num4=12.8;   
    $flg=settype($num4,"int");   
    var_dump($flg);  //输出bool(true)   
    var_dump($num4); //输出int(12)   
?>

php保留两位小数并且四舍五入

$num = 123213.666666; 
echo sprintf("%.2f", $num);

php保留两位小数并且不四舍五入

$num = 123213.666666; 
echo sprintf("%.2f",substr(sprintf("%.3f", $num), 0, -2));

php进一法取整

echo ceil(4.3); // 5 
echo ceil(9.999); // 10

php舍去法，取整数

echo floor(4.3); // 4 
echo floor(9.999); // 9

2019年10月29日

微信支付，公众号商城支付的3个坑！！！！！！

坑1：返回msg显示签名错误 , 第一反应官网提供的路径去生成了一下签名做比较 , 结果发现签名算法是没错的。

解决方法：重置商户API密钥。（本人亲测是这样解决了问题，tx真是个坑，我严重鄙视。）

坑2：官方sdk(php版本) WxPay.JsApiPay.php文件中 public function GetOpenid(){ } 方法中，大约第50行左右。

//触发微信返回code码
$baseUrl = urlencode(‘http://’.$_SERVER[‘HTTP_HOST’].$_SERVER[‘REQUEST_URI’].$_SERVER[‘QUERY_STRING’]);

这句对$baseUrl 的定义是有问题的！严重鄙视！！！

解决方法是修改：

$baseUrl = urlencode(‘换成你商户号申请微信支付的安全url目录’);

坑3：参考官方demo jsapi.php 文件代码使用中，你会发现订单号，金额只能写死，无法把参数传递过去[get,post都无效]。这是因为： $tools = new \JsApiPay(); $openId =$tools->GetOpenid(); 在获取openid的时候，页面来回跳转所致。

解决方法是：用session传递 1、session记录金额，订单号等信息；2、session记录openid [切忌，否则 1 依然无效]。

tips：没有看到官方对此有说明，所以总结了如上3个问题，希望有助大家解决问题。

原创作者：徐多蔚，转发请注明来源，谢谢。

2019年10月26日

微信支付–签名错误问题

最近在做微信支付，调用微信的统一下单支付接口http://mch.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=9_1时，老是返回“签名错误”，偶尔可以成功，不知道是怎么回事。我在日志中打印出生成的字符串和签名，然后用相同的数据在微信支付提供的在线支付调试工具生成签名，发现生成的签名结果一样！生成的最终xml也一样，但接口就是返回

POST给微信的xml内容:

首先 , 看到返回msg显示签名错误 , 第一反应官网提供的路径去生成了一下签名做比较 , 结果发现签名算法是没错的.

https://pay.weixin.qq.com/wiki/tools/signverify/

找了各种方法 , 百度谷歌搜索了一下午 , 发现很多同行都遇到了一样的问题 , 得到了以下解决方法

　1、确认公众号的appSecret和商户号的API密钥没有搞混。

　　2、重置商户API密钥。（本人亲测是这样解决了问题，tx真是个坑，我严重鄙视。）

　　3、确认公众号授权的域名和目录是正确的。

　　4、参数body含有中文字符，改换英文签名成功，那么就转换字符编码试试。

　　　　$dat = iconv(‘UTF-8′,’ISO8859-1’,array2xml($package));

然而 , 并没有解决问题 , 先吐槽一下微信支付这个巨坑 , 不是说它的api水平有多烂，但你至少说明白一点啊，每次看微信api都头痛。比阿里差的不是一个数量级的。调阿里api都是，优雅、简单、舒服，效率高。调微信api的感觉是，愤怒、头痛、恶心，想打人。

后续问题解决后会在该随笔追加解决方案 .

追加: 问题已解决 , 重置了三次商户密钥.(………………..)

在解决过程中又发现了一个较大的坑 , 在二维码支付模式中 , 本来的设计是生成二维码之后展示到页面上让用户去长按识别来支付 , 但是今天发现微信关闭了这个功能 , 只能是用另外一台手机去扫码支付 .

由于用户体验及其不好 , 后改用公众号支付模式 .

2019年10月18日2020年10月17日

mysql筛选指定时间段的数据，如一天，一周，一个月内的数据

一天：select * from 表名 where date(字段名)=date(now())

一周：select * from 表名 where DATE_SUB(CURDATE(), INTERVAL 7 DAY) <= date(字段名)

一月：select * from 表名 where DATE_SUB(CURDATE(), INTERVAL 1 MONTH) <= date(字段名)

原创