在网络服务中，为了保护用户私密信息，会要求用户输具有一点安全几级别的密码，这样为了防止他人盗用，例如:一些游戏账号的，如果输入纯6位数字和6为字符就会提示强度太低，要求重新输入，一般计算密码强度验证的方式都是计算字符，然后分类加权重。权重越高相应的强度越高。 //设置提示文字颜色 function setColor(_this, cssOption) { //判断节点类型(防止我们传的节点类型是 空 || 文本 || 注释 || 文本节点(非htmL元素)) if (!_this || _this.nodeType === 3 || _this.nodeType === 8 || !_this.style) { return } for (var cs in cssOption) { _this.style[cs] = cssOption[cs] } return _this } //检测密码强度(第一个参数时密码框，第二个参数是显提示文字) function pwdstrength(pwdStrength, showStrength) { const self = this pwdStrength.onkeyup = function() { //按键抬起就去判断确认密码和密码时候样一致 inconsistent.className = (pwd.value === confimpwd.value) ? 'hidden' : 'show' let _color = ['red', 'yellow', 'orange', 'green'] let tipmess = ['密码太短', '弱', '中', '强'] _strength = 0 //密码强度值 _v = pwd.value.trim() _vL = _v.length //获取强度值 let charStrength = function(char) { //数字 if (char >= 48 && char <= 57) { return 1 } if (char >= 97 && char <= 122) { //小写 return 2 } else { return 3 } } //密码长度小于6个字符 显示密码太短 if (_vL < 6) { showStrength.innerText = tipmess[0] setColor(showStrength, { 'color': _color[0] }) } else { for (let i = 0; i < _vL; i++) { _strength += charStrength(_v.toLowerCase().charCodeAt(i)) } if (_strength < 10) { //强度小于10 showStrength.innerText = tipmess[1] setColor(showStrength, { 'color': _color[1] }) } if (_strength >= 10 && _strength <= 15) { //强度小于10 showStrength.innerText = tipmess[2] setColor(showStrength, { 'color': _color[2] }) } if (_strength > 15) { //强度小于10 showStrength.innerText = tipmess[3] setColor(showStrength, { 'color': _color[3] }) } } } }上面就是实现功能的核心代码:代码说明: setColor(_this,cssOption) 来配置显示强度文字的样式,第一个参数接收是目标元素(html) 第二个参数接收的是一个对象通过 for  in 来拿到属性与属性值。pwdstrength(pwdStrength, showStrength)pwdStrength接收参数是操作目标 showStrength参数是显示文字样式强度计算规则:字符权重 :  数字 1  字母2   其他字符为 3  当密码长度小于6显示不合格(可以做样式提示)当字符长度>=6 强度小于 10 强度  ’弱‘当字符长度>=10 强度小于 15 强度 ’中‘当字符长度>=15  强度 ’强‘

WebSocketWebSocket是HTML5开始提供的一种浏览器与服务器间进行全双工通讯的网络技术。现很多网站为了实现即时通讯，所用的技术都是轮询(polling)。轮询是在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP请求，然后由服务器返回最新的数据给客服端的浏览器，这种方式有一个很大的弊端，就是会占用很多的带宽。最新的轮询效果是Comet – 用了AJAX。但这种技术虽然可达到全双工通信，但依然需要发出请求。使用WebSocket，浏览器和服务器只需要要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道，两者之间就直接可以数据互相传送。而且它为我们实现即时服务带来了两大好处：节省资源：互相沟通的Header是很小的-大概只有 2 Bytes。推送信息：不需要客户端请求，服务器可以主动传送数据给客户端。socket.ioSocket.IO是一个WebSocket库，包括了客户端的js和服务器端的nodejs，它的目标是构建可以在不同浏览器和移动设备上使用的实时应用。socket.io的特点易用性：socket.io封装了服务端和客户端，使用起来非常简单方便。跨平台：socket.io支持跨平台，这就意味着你有了更多的选择，可以在自己喜欢的平台下开发实时应用。自适应：它会自动根据浏览器从WebSocket、AJAX长轮询、Iframe流等等各种方式中选择最佳的方式来实现网络实时应用，非常方便和人性化，而且支持的浏览器最低达IE5.5。WebSocket 安装部署1npm install socket.io服务监听socket.io的服务端启动非常的简单，引用socket.io模块。1var io = require('socket.io');然后调用listen函数，传入监听的端口号，开始服务监听。启用了80端口用于测试：1var io = require('socket.io')(80);注册事件12345io.on('connection', function (socket) {  socket.on('disconnect', function () {   })})connection事件在客户端成功连接到服务端时触发，有了这个事件，我们可以随时掌握用户连接到服务端的信息。当客户端成功建立连接时，在connection事件的回调函数中，我们还是可以为socket注册一些常用的事件,如：disconnect事件，它在客户端连接断开是触发，这时候我就知道用户已经离开了。WebSocket 启动服务目前为止，我们已经搭建好了一个最简单的socket服务器，为了在浏览器中能够访问到我们的服务，我们还需要在服务端搭建一个简单的web服务器，让浏览器能够访问我们的客户端页面。为了便捷，我们选用node.js中常用的express框架来实现web服务，示例如下：1234567891011var express = require('express');var app = express();app.get('/', function (req, res) {  res.status(200).send('成功连接！')});var server = require('http').createServer(app);var io = require('socket.io')(server);io.on('connection', function (socket) { });server.listen(80);WebSocket 客户端引用服务端构建完毕，下面看一看客户端应该如何使用。服务端运行后会在根目录动态生成socket.io的客户端js文件，客户端可以通过固定路径/socket.io/socket.io.js添加引用。首先添加网页index.html,并在网页中引用客户端js文件：1<script src="//cdn.bootcss.com/socket.io/2.0.2/socket.io.js"></script>WebSocket 连接服务当客户端成功加载socket.io客户端文件后会获取到一个全局对象io，我们将通过io.connect函数来向服务端发起连接请求。1234567var socket = io.connect('/');socket.on('connect',function(){  //连接成功});socket.on('disconnect',function(data){  //连接断开});connect函数可以接受一个url参数，url可以socket服务的http完整地址，也可以是相对路径，如果省略则表示默认连接当前路径。与服务端类似，客户端也需要注册相应的事件来捕获信息，不同的是客户端连接成功的事件是connect。了解了客户端如何使用，下面我们创建网页index.html，并添加如下内容(保存):123456789101112131415<html><head>  <script src="//cdn.bootcss.com/socket.io/2.0.2/socket.io.js"></script>  <script>    window.onload = function(){      var socket = io.connect('/');      socket.on('connect',function(){        document.write('连接成功!');      });    };  </script></head><body></body></html>页面添加完毕还要记得在服务端app.js中为它添加路由，让我们可以访问测试网页：123app.get('/index',function(req,res){  res.sendFile('index.html',{root:__dirname});});WebSocket 实时通讯服务端和客户端都构建完毕了，下面开始发送消息。当我们成功建立连接后，我们可以通过socket对象的send函数来互相发送消息，示例-客户端向服务端发送消息(index.html)：12345678var socket = io.connect('/');socket.on('connect',function(){  //客户端连接成功后发送消息'hello world!'  socket.send('hello world!');});socket.on('message',function(data){  alert(data);});连接成功后，我们向服务端发送消息hello world!，还为socket注册了message事件，它是send函数对应的接收消息的事件，当服务端向客户端send消息时，我们就可以在message事件中接收到发送过来的消息。服务端向客户端发送消息也可以通过send的方式，示例 - 服务端向客户端发送消息(app.js)：1234567var io = require('scoket.io');io.on('connection', function (socket) {  socket.send('Hello World!');  socket.on('message', function (data) {    console.log(data);  })});与客户端相同，服务端也需要为socket注册message事件来接收客户端发送过来的消息。WebSocket 发送信息socket.io既然是用来实现通讯的，那么如何发送、接收信息才是根本。在socket.io中，emit函数用于发送数据，我们使用send的方式实现了信息的互发，其实send函数只是emit的封装，实际上还是使用了emit，且看send函数是如何实现的：123456function send(){ var args = toArray(arguments); args.unshift('message'); this.emit.apply(this, args); return this;}在send函数中，获取到原来的参数，并在原来的基础上插入了一个参数message，然后调用了emit函数。通过send函数的实现，我们也学会了emit函数的用法，它有多个参数，第一个参数是事件名称，在接收端注册该事件就可以接收到发送过去的信息，事件名称可以自由定义，在不同的场景下，我们可以定义不同的事件来接收消息。第二个参数才是发送的数据。了解清楚了工作原理，下面来将send替换成emit函数发送信息：123456//app.jsio.on('connection',function(socket){   socket.emit('message','连接成功！');   socket.on('message',function(data){  });});WebSocket 服务端事件事件监听是实现通讯的基础，因此充分了解socket.io的事件，学习如何在正确的时候使用它们至关重要。在一些关键的的状态下，socket.io可以注册相应的事件，通过事件监听，我们可以在这些事件中作出反应，常用的事件如下：connection——客户端成功连接到服务器。message——捕获客户端send信息。。disconnect——客户端断开连接。error——发生错误。WebSocket 客户端较服务端而言，客户端提供更多的监听事件，在实时应用中，我们可以为这些事件注册监听并作出反应，例如：connect提示用户连接成功，disconnect时提示用户停止服务等等。connection——成功连接到服务器。connecting——正在连接。disconnect——断开连接。connect_failed——连接失败。error——连接错误。message——监听服务端send的信息。reconnect_failed——重新连接失败。reconnect——重新连接成功。reconnecting——正在重连。那么客户端socket发起连接时的顺序是怎么样的呢？当第一次连接时，事件触发顺序为： connecting → connect；当失去连接时，事件触发顺序为：disconnect → reconnecting → connecting → reconnect → connect。WebSocket 命名空间命名空间着实是一个非常实用好用的功能。我们可以通过命名空间，划分出不同的房间，在房间里的广播和通信都不会影响到房间以外的客户端。那么如何创建房间呢？在服务端，通过of("")的方式来划分新的命名空间：12io.of('chat').on('connection',function(socket){});示例中，我们创建一个名为chat的房间，客户端可以通过如下方式连接到指定的房间：1var socket = io.connect('/chat');虽然连接到指定的房间，但是我们也可以在服务端操作，自由的进出房间：12socket.join('chat');//进入chat房间socket.leave('chat');//离开chat房间WebSocket 广播消息在实时应用中，广播是一个不可或缺的功能，socket.io提供两种服务端广播方式。第一种广播方式可以称之为'全局广播'，顾名思义，全局广播就是所有连接到服务器的客户端都会受到广播的信息：1socket.broadcast.emit('DATA',data);但是，在实际应用场景中，我们很多时候并不需要所有用户都收到广播信息，有的广播信息只发送给一部分客户端，比如某个房间里面的用户，那么可以使用如下方式：1socket.broadcast.to('chat').emit('DATA',data);中间件socket.io提供中间件功能，我们可以通过中间件来对请求进行预处理，比如身份验证：1234io.use(function(socket, next){ if (socket.request.headers.cookie) return next(); next(new Error('Authentication error'));});示例中展示了通过中间件进行身份验证，当没有cookie的时候抛出异常。传递参数在很多应用场景中，客户端发起连接请求时都需要传递参数，这些参数可能是身份验证、初始化设置等等，那么socket.io发起连接时如何传递参数呢？1var socket = io.connect('/');由于connect函数发起连接的参数是一个url，你可能会想到把参数拼接到url上，如http://xxxx?xx=xxxx，但是很遗憾这样是行不通的，我们可以通过这样的方式来传递参数：1var socket = io.connect('/',{ _query:'sid=123456' });在服务端可以这样获取到传递的参数:1234io.use(function(socket){   var query = socket.request._query;   var sid = query.sid; });客户端传递的参数已经被解析成了一个json对象，这个对象就是_query。

如题。比如说我用其它的一些网页编辑软件做好一个html页面，同时还生成了一些css，js文件这样的，可以把这些一起上传然后作为网站里的一个页面吗？谢谢。

对事件做出反应我们可以在事件发生时执行 JavaScript，比如当用户在 HTML 元素上点击时。如需在用户点击某个元素时执行代码，请向一个 HTML 事件属性添加 JavaScript 代码：onclick=JavaScriptHTML 事件的例子：当用户点击鼠标时当网页已加载时当图像已加载时当鼠标移动到元素上时当输入字段被改变时当提交 HTML 表单时当用户触发按键时在本例中，当用户在 <h1> 元素上点击时，会改变其内容：实例<!DOCTYPE html><html><body><h1 onclick="this.innerHTML='Ooops!'">点击文本!</h1></body></html>本例从事件处理器调用一个函数：实例<!DOCTYPE html><html><head><script>function changetext(id){    id.innerHTML="Ooops!";}</script></head><body><h1 onclick="changetext(this)">点击文本!</h1></body></html>HTML 事件属性如需向 HTML 元素分配 事件，您可以使用事件属性。实例向 button 元素分配 onclick 事件：<button onclick="displayDate()">点这里</button>在上面的例子中，名为 displayDate 的函数将在按钮被点击时执行。使用 HTML DOM 来分配事件HTML DOM 允许您使用 JavaScript 来向 HTML 元素分配事件：实例向 button 元素分配 onclick 事件：<script>document.getElementById("myBtn").onclick=function(){displayDate()};</script>在上面的例子中，名为 displayDate 的函数被分配给 id="myBtn" 的 HTML 元素。按钮点击时Javascript函数将会被执行。onload 和 onunload 事件onload 和 onunload 事件会在用户进入或离开页面时被触发。onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。onload 和 onunload 事件可用于处理 cookie。实例<body onload="checkCookies()">onchange 事件onchange 事件常结合对输入字段的验证来使用。下面是一个如何使用 onchange 的例子。当用户改变输入字段的内容时，会调用 upperCase() 函数。实例<input type="text" id="fname" onchange="upperCase()">

HTML 事件HTML 事件可以是浏览器行为，也可以是用户行为。以下是 HTML 事件的实例：HTML 页面完成加载HTML input 字段改变时HTML 按钮被点击通常，当事件发生时，你可以做些事情。在事件触发时 JavaScript 可以执行一些代码。HTML 元素中可以添加事件属性，使用 JavaScript 代码来添加 HTML 元素。单引号:<some-HTML-element some-event='JavaScript 代码'>双引号:<some-HTML-element some-event="JavaScript 代码">在以下实例中，按钮元素中添加了 onclick 属性 (并加上代码):实例<button onclick="getElementById('demo').innerHTML=Date()">现在的时间是?</button>以上实例中，JavaScript 代码将修改 id="demo" 元素的内容。在下一个实例中，代码将修改自身元素的内容 (使用 this.innerHTML):实例<button onclick="this.innerHTML=Date()">现在的时间是?</button>Note    JavaScript代码通常是几行代码。比较常见的是通过事件属性来调用：实例<button onclick="displayDate()">现在的时间是?</button>

我们在发送邮件的时候可能用到图片与文字混发，注意发送的时候需要对模板做一些处理。1、简单邮件不使用模板的时候注意这里。对于图片路径需要放置转义，方法如下。用一个r"路径"也可以参考这个课程https://education.huaweicloud.com/courses/course-v1:HuaweiX+CBUCNXE246+Self-paced/about2、如果是需要绚一点的样子，需要一个html模板来支持。可以参考这个课程，虽然有点老，原理是一样的。https://ilearningx.huawei.com/courses/course-v1:HuaweiX+AntRobot-cn-201+Self-paced/courseware/eb9b90840ab34e8e88ff4fc0aa721bde/338ac2ef34a6444ab1a66d71dc9a811a/3、如果你的邮件内容是个可变的表格，那么需要自己根据每次的表格数量生成不同的html文件，再用此文件发送。不变部分的html保存好，动态拼接表格部分内容，然后生成一个新html文件即可，亲测可用。4、如果是2.17版本，发送的中文文件名的附件变为“未命名的附件 000xx.dat”，则需要替换一下这个文件。文件在本文的附件里。

$GLOBALS 是PHP的一个超级全局变量组，在一个PHP脚本的全部作用域中都可以访问。$GLOBALS 是一个包含了全部变量的全局组合数组。变量的名字就是数组的键。以下实例介绍了如何使用超级全局变量 $GLOBALS:实例<?php $x = 75; $y = 25; function addition() {     $GLOBALS['z'] = $GLOBALS['x'] + $GLOBALS['y']; } addition(); echo $z; ?>以上实例中 z 是一个$GLOBALS数组中的超级全局变量，该变量同样可以在函数外访问。PHP $_SERVER$_SERVER 是一个包含了诸如头信息(header)、路径(path)、以及脚本位置(script locations)等等信息的数组。这个数组中的项目由 Web 服务器创建。不能保证每个服务器都提供全部项目；服务器可能会忽略一些，或者提供一些没有在这里列举出来的项目。以下实例中展示了如何使用$_SERVER中的元素:实例<?php echo $_SERVER['PHP_SELF'];echo "<br>";echo $_SERVER['SERVER_NAME'];echo "<br>";echo $_SERVER['HTTP_HOST'];echo "<br>";echo $_SERVER['HTTP_REFERER'];echo "<br>";echo $_SERVER['HTTP_USER_AGENT'];echo "<br>";echo $_SERVER['SCRIPT_NAME'];?>PHP $_REQUESTPHP $_REQUEST 用于收集HTML表单提交的数据。以下实例显示了一个输入字段（input）及提交按钮(submit)的表单(form)。 当用户通过点击 "Submit" 按钮提交表单数据时, 表单数据将发送至<form>标签中 action 属性中指定的脚本文件。 在这个实例中，我们指定文件来处理表单数据。如果你希望其他的PHP文件来处理该数据，你可以修改该指定的脚本文件名。 然后，我们可以使用超级全局变量 $_REQUEST 来收集表单中的 input 字段数据:实例<html><body> <form method="post" action="<?php echo $_SERVER['PHP_SELF'];?>">Name: <input type="text" name="fname"><input type="submit"></form> <?php $name = $_REQUEST['fname']; echo $name; ?> </body></html>PHP $_POSTPHP $_POST 被广泛应用于收集表单数据，在HTML form标签的指定该属性："method="post"。以下实例显示了一个输入字段（input）及提交按钮(submit)的表单(form)。 当用户通过点击 "Submit" 按钮提交表单数据时, 表单数据将发送至<form>标签中 action 属性中指定的脚本文件。 在这个实例中，我们指定文件来处理表单数据。如果你希望其他的PHP文件来处理该数据，你可以修改该指定的脚本文件名。 然后，我们可以使用超级全局变量 $_POST 来收集表单中的 input 字段数据:实例<html><body> <form method="post" action="<?php echo $_SERVER['PHP_SELF'];?>">Name: <input type="text" name="fname"><input type="submit"></form> <?php $name = $_POST['fname']; echo $name; ?> </body></html>PHP $_GETPHP $_GET 同样被广泛应用于收集表单数据，在HTML form标签的指定该属性："method="get"。$_GET 也可以收集URL中发送的数据。假定我们有一个包含参数的超链接HTML页面：<html><body><a href="test_get.php?subject=PHP&web=runoob.com">Test $GET</a></body></html>当用户点击链接 "Test $GET", 参数 "subject" 和 "web" 将发送至"test_get.php",你可以在 "test_get.php" 文件中使用 $_GET 变量来获取这些数据。以下实例显示了 "test_get.php" 文件的代码:实例<html><body> <?php echo "Study " . $_GET['subject'] . " @ " . $_GET['web'];?> </body></html>

1. 保证Studio能访问html文件首先需要进入Chrome的扩展程序当中，路径：chrome://extensions/，之后进入WeAutomate Web 2.0.2详情页面中，如下图：然后启用“允许访问文件网址”，如下图：2. 获取邮件之后，可用桌面应用程序的控件Click相关操作打开邮件的html文件，或者直接拼接 ‘file:///’和 邮件的绝对地址，用openurl控件（或open控件，不建议使用）打开html文件；3. 可用网页的getTable控件，定位邮件中的表格；4. 将getTable获取的表格用excelWriteRange写入到excel中。

【功能模块】 我现在要实现使用javascript   sip库 在前端html5页面实现基于sip协议 的实时语音，拔通连在cloud usm平台某一台坐机有没有什么开发例子能提供给我

漏洞名称 : Microsoft MSHTML远程代码执行漏洞 CVE-2021-40444组件名称 : Microsoft MSHTML漏洞类型 : 远程代码执行影响范围 :Windows 7 for 32/x64-based Systems Service Pack 1Windows RT 8.1Windows 8.1/10 for 32/x64-based SystemsWindows 10 Version 1607 for 32/x64-based SystemsWindows 10 Version 2004/1809/1909/20H2/21H1 for 32/x64/ARM64-based SystemsWindows Server 2012/2012 R2/2016/2022Windows Server 2008 R2 for x64-based Systems Service Pack 1/2Windows Server 2004/2012/2012 R2/2016/2019/20H2/2022 (Server Core installation)利用条件 :1、用户认证：不需要用户认证2、触发方式：远程综合评价 :<综合评定利用难度>：未知。<综合评定威胁等级>：高危，能造成远程代码执行。漏洞分析：1、组件介绍    MSHTML 是微软的窗口操作系统（Windows）搭载的网页浏览器—Internet Explorer的排版引擎的名称。MSHTML是微软公司的一个COM组件，该组件封装了HTML语言中的所有元素及其属性，通过其提供的标准接口，可以访问指定网页的所有元素。ActiveX控件是微软公司的COM架构下单产物。其在Windows操作系统中应用广泛，Windows中的Office套件，IE浏览器等产品中有广泛应用。通过ActiveX控件可以与微软的MSHTML组件进行交互。2、漏洞描述    今日，安全团队监测到一则Microsoft MSHTML组件存在远程代码执行漏洞的信息，漏洞编号：CVE-2021-40444，漏洞威胁等级：高危。    该漏洞的是由于组件自身缺陷而引起的，攻击者可利用该漏洞，通过构造恶意的Office文档发送给被攻击方，最终导致远程代码执行。影响范围:微软ActiveX控件是微软公司的COM架构下单产物。其在Windows操作系统中应用广泛，Windows中的Office套件，IE浏览器等产品中有广泛应用。通过ActiveX控件可以与微软的MSHTML组件进行交互，从而引起安全问题。Windows作为全球安装用户量最大的操作系统，使用范围遍及世界各地，涉及用户量多，导致该漏洞的危害等级较高。目前受影响的版本：Windows 7 for 32/x64-based Systems Service Pack 1Windows RT 8.1Windows 8.1/10 for 32/x64-based SystemsWindows 10 Version 1607 for 32/x64-based SystemsWindows 10 Version 2004/1809/1909/20H2/21H1 for 32/x64/ARM64-based SystemsWindows Server 2012/2012 R2/2016/2022Windows Server 2008 R2 for x64-based Systems Service Pack 1/2Windows Server 2004/2012/2012 R2/2016/2019/20H2/2022 (Server Core installation)解决方案：1、临时解决方案    当前官方已发布临时修复方案1、创建一个.reg类型的文件，并写入如下内容：Windows Registry Editor Version 5.00[HKEY_LOCAL_MACHINE\SOFTWARE\Policies\Microsoft\Windows\CurrentVersion\Internet Settings\Zones\0]"1001"=dword:00000003"1004"=dword:00000003[HKEY_LOCAL_MACHINE\SOFTWARE\Policies\Microsoft\Windows\CurrentVersion\Internet Settings\Zones\1]"1001"=dword:00000003"1004"=dword:00000003[HKEY_LOCAL_MACHINE\SOFTWARE\Policies\Microsoft\Windows\CurrentVersion\Internet Settings\Zones\2]"1001"=dword:00000003"1004"=dword:00000003[HKEY_LOCAL_MACHINE\SOFTWARE\Policies\Microsoft\Windows\CurrentVersion\Internet Settings\Zones\3]"1001"=dword:00000003"1004"=dword:000000032、保存并双击该文件。3、重启操作系统参考链接:https://msrc.microsoft.com/update-guide/vulnerability/CVE-2021-40444

简单分页如果你的网站有很多个页面，你就需要使用分页来为每个页面做导航。以下实例演示了如何使用 HTML 和 CSS 来创建分页：CSS 实例ul.pagination {    display: inline-block;    padding: 0;    margin: 0;}ul.pagination li {display: inline;}ul.pagination li a {    color: black;    float: left;    padding: 8px 16px;    text-decoration: none;}点击及鼠标悬停分页样式«1234567»如果点击当前页，可以使用 .active 来设置当前页样式，鼠标悬停可以使用 :hover 选择器来修改样式：CSS 实例ul.pagination li a.active {    background-color: #4CAF50;    color: white;}ul.pagination li a:hover:not(.active) {background-color: #ddd;}CSS 实例ul.pagination li a.active {    background-color: #4CAF50;    color: white;}ul.pagination li a:hover:not(.active) {background-color: #ddd;}圆角样式«1234567»可以使用 border-radius 属性为选中的页码来添加圆角样式:CSS 实例ul.pagination li a {    border-radius: 5px;}ul.pagination li a.active {    border-radius: 5px;}鼠标悬停过渡效果«1234567»我们可以通过添加 transition 属性来为鼠标移动到页码上时添加过渡效果:CSS 实例ul.pagination li a {    transition: background-color .3s;}带边框分页«1234567»我们可以使用 border 属性来添加带边框分页:CSS 实例ul.pagination li a {    border: 1px solid #ddd; /* Gray */}圆角边框提示: 在第一个分页链接和最后一个分页链接添加圆角：«1234567»CSS 实例.pagination li:first-child a {    border-top-left-radius: 5px;    border-bottom-left-radius: 5px;}.pagination li:last-child a {    border-top-right-radius: 5px;    border-bottom-right-radius: 5px;}分页间隔提示: 你可以使用 margin 属性来为每个页码直接添加空格：«1234567»CSS 实例ul.pagination li a {    margin: 0 4px; /* 0 对应的是头部与底部，可以修改它看看效果 */}分页字体大小«1234567»我们可以使用 font-size 属性来设置分页的字体大小:CSS 实例ul.pagination li a {    font-size: 22px;}居中分页«1234567»如果要让分页居中，可以在容器元素上 (如 <div>) 添加 text-align:center 样式：CSS 实例div.center {    text-align: center;}更多实例CSS 实例面包屑导航首页 前端 HTML 教程 HTML 段落另外一种导航为面包屑导航，实例如下：CSS 实例ul.breadcrumb {    padding: 8px 16px;    list-style: none;    background-color: #eee;}ul.breadcrumb li {display: inline;}ul.breadcrumb li+li:before {    padding: 8px;    color: black;    content: "/\00a0";

如何自定义提示文字用户名<input type="text" id="username" required oninvalid="setCustomValidity('请输入您的姓名');" oninput="setCustomValidity('');">如何让required失效1:把按钮类型变成button而不是submit2:提交按钮添加formnovalidate属性<form method="post" action="">         用户名<input type="text" id="username" required="required"><br>         密码<input type="password" id="password" required><br>         <input type="submit" value="登录" formnovalidate >     </form>3:在元素中添加novalidate属性，禁用整个表单的验证功能<form method="post" action="" novalidate>         用户名<input type="text" id="username" required="required"><br>         密码<input type="password" id="password" required><br>         <input type="submit" value="登录" >     </form>4，pattern属性 - 使用正则表达式验证（1）不必使用^和$字符表示要匹配字段值得开头和结尾。（2）只设置pattern的话，空值也会通过。如果不允许空，则还要加上required属性。

　　浏览器兼容性问题　　出现浏览器兼容性问题的主要原因，是不同浏览器对同一段代码的有不同解析，造成的页面显示效果不统一。　　在大多数情况下，我们的需求是，无论用户在什么浏览器上查看我们的网站或登录我们的系统，显示效果都应该是一致的。所以浏览器兼容性问题是我们web前端开发人员经常会碰到和必须解决的问题。　　什么是css hack　　不同的浏览器对CSS的解析结果是不同的，因此会导致相同的CSS输出的页面效果不同，这就需要CSS Hack来解决浏览器局部的兼容性问题。而这个针对不同的浏览器写不同的CSS 代码的过程，就叫CSS Hack。　　常见的兼容性问题　　· 浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。　　· png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8.　　· Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示, 可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。 （可通过加入 CSS 属性transform: scale(0.75,0.75); 解决）　　· IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。解决方案是在float的标签样式控制中加入 display:inline;将其转化为行内属性。　　· 在ie6，ie7中元素高度超出自己设置高度。原因是IE8以前的浏览器中会给元素设置默认的行高的高度导致的。解决方案是加上overflow:hidden或设置line-height为更小的高度。　　· min-height在IE6下不起作用。解决方案是添加 height:auto !important;height:xxpx;其中xx就是min-height设置的值。　　· 透明性IE用filter:Alpha(Opacity=60)，而其他主流浏览器用 opacity:0.6;　　· a(有href属性)标签嵌套下的img标签，在IE下会带有边框。解决办法是加上a img{border:none;}样式。　　· input边框问题。去掉input边框一般用border:none;就可以，但由于IE6在解析input样式时的BUG(优先级问题)，在IE6下无效。　　· ie6的默认CSS样式，涉及到border的有border-style:inset;border-width:2px;浏览器根据自己的内核解析规则，先解析自身的默认CS再 解析开发者书写的CSS，达到渲染标签的目的。IE6对INPUT的渲染存在bug，border:none;不被解析，当有border-width或border-colo r设置的时候才会令IE6去解析border-style:none;。解决方案是用:border:0或border:0 none;或border:none:border-color:transparent;，推荐用第三种方案。　　常用hack的技巧　　CSS Hack常见的有三种形式　　CSS属性Hack、CSS选择符Hack以及IE条件注释Hack， Hack主要针对IE浏览器。　　1、属性级Hack：比如IE6能识别下划线””和星号” * “，IE7能识别星号” * “，但不能识别下划线””，而firefox两个都不能认识。　　2、选择符级Hack：比如IE6能识别html .class{}，IE7能识别+html .class{}或者*:first-child+html .class{}。　　3、IE条件注释Hack：IE条件注释是微软从IE5开始就提供的一种非标准逻辑语句。比如针对所有IE：<!–[if IE]><!–您的代码–><![endif]–>，针对IE6及以下版本：<!–[if lt IE 7]><!–您的代码–><![endif]–>，这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都 会生效。　　PS：条件注释只有在IE浏览器下才能执行，这个代码在非IE浏览下被当做注释视而不见。可以通过IE条件注释载入不同的CSS、JS、HTML和服务器代码等。

"""example02 - bs4Author: AsusDate: 2021/8/17"""import requestsimport bs4# bs4: Beautiful Soup 4 ---> 可以从HTML或者XML中提取数据。html = """The Dormouse's storyOnce upon a time there were three little sisters; and their names were,Lacie andTillie;and they lived at the bottom of a well...."""soup = bs4.BeautifulSoup(html, 'lxml')# print(soup, type(soup), sep='\n')# prettify(): 格式化HTML源码print(soup.prettify())# 打印标签: 只打印第一个标签的内容print(soup.head.title)# 打印标签内容: 4种 ---> string、get_text()、text、contentsprint(soup.head.title.string)print(soup.head.title.get_text())print(soup.head.title.text)print(soup.head.title.contents)# 选择标签内容方法:#     select:使用（id、class、标签、属性、父子、后代、兄弟、相邻兄弟选择器）去选择标签 ---> list#     select_one:使用（id、class、标签、属性、父子、后代、兄弟、相邻兄弟选择器）去选择标签 ---> select结果中的第一个元素p_list = soup.select('body > p')print(p_list)p_list1 = soup.select('body > .title')print(p_list1)p = soup.select_one('body > p')print(p)

    HTML 事件是发生在 HTML 元素上的事情。当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。HTML 事件HTML 事件可以是浏览器行为，也可以是用户行为。以下是 HTML 事件的实例：HTML 页面完成加载HTML input 字段改变时HTML 按钮被点击通常，当事件发生时，你可以做些事情。在事件触发时 JavaScript 可以执行一些代码。HTML 元素中可以添加事件属性，使用 JavaScript 代码来添加 HTML 元素。单引号:双引号:在以下实例中，按钮元素中添加了 onclick 属性 (并加上代码):实例现在的时间是?以上实例中，JavaScript 代码将修改 id="demo" 元素的内容。在下一个实例中，代码将修改自身元素的内容 (使用 this.innerHTML):实例现在的时间是?Note    JavaScript代码通常是几行代码。比较常见的是通过事件属性来调用：实例现在的时间是?