描述 HTML、CSS、DOM、JavaScript分别表示的含义-繁依Fanyi

JavaWeb作业。。。。

1. 请描述 HTML、CSS、DOM、JavaScript分别表示的含义

① HTML

  1. HTML,英文全称 Hyper Text Markup Language,翻译过来就是**超文本标记语言**,这是一种用于创建网页的标准标记语言。

    • 超文本:超文本就是用超链接的方法,将各种不同空间的文字信息组织在一起的网状文本

    • 标记语言

      • 标记语言由标签构成的语言,例如 html,xml等,都是标签语言。
        • 标记语言不是编程语言。
  2. HTML 的优点:

    • 简易性:HTML版本升级采用超集方式,从而更加灵活方便。
    • 可扩展性:HTML语言的广泛应用带来了加强功能,增加标识符等要求,HTML采取子类元素的方式,为系统扩展带来保证。
    • 平台无关性:DOM为HTML文档定义了一个与平台无关的程序接口,使用该接口不可以控制文档的结构。

学会 HTML 对写博客非常有帮助,比如这篇作业就是使用 markdown 编写的,在markdown中可以内嵌HTML标签,来让自己的文章更好看。例如下面我就使用了 标签来处理了部分文字。
在这里插入图片描述

② CSS

  1. CSS,英文全称 Cascading Style Sheet,翻译过来就是 层叠样式表

    • 层叠:多个样式可以作用在同一个html的元素上,同时生效
    • 样式表:样式表(style sheet)是关于文件对标题和正文的默认字体、大小、颜色、前页外观、单个部分的排列间隔、行间距、四周页边距、标题间距离等元素的定义。
  2. CSS 的优点:

    • 功能强大
    • 将内容展示和样式控制分离
      • 降低耦合度(解耦)
      • 让分工协作更容易
      • 提高开发效率

③ DOM

  1. DOM,英文全称 Document Object Model,翻译过来就是 文档对象模型,是W3C组织推荐的处理可扩展标记语言(HTML 或 XML) 的标准编程接口。W3C 已经定义了一系列的DOM 接口,通过这些DOM 接口可以改变网页的内容、结构和样式。

  2. DOM 树

    DOM HTML tree

    • 文档:一个页面就是一个文档,DOM 中使用document 表示
    • 元素:页面中的所有标签都是元素,DOM 中使用element 表示
    • 节点:网页中的所有内容都是节点(标签、属性、文本、注释等),DOM 中使用 node 表示

④ JavaScript

  1. JavaScript 是一门**客户端脚本语言**,现在几乎所有的 HTML 都使用 JavaScript。它可以来增强用户和html页面的交互过程,可以来控制html元素,让页面有一些动态的效果,增强用户的体验。
    • 客户端:运行在客户端浏览器中的。每一个浏览器都有JavaScript的解析引擎
    • 脚本语言:不需要编译,直接就可以被浏览器解析执行了
    • 为什么 JavaScript 和 Java一点关系都没有却还带有“Java”?
      • 当然是为了蹭热度!JavaScript 一开始叫 LiveScript,后来请了 SUN公司的专家修改 LiveScript,并想推广 LiveScript,便蹭了 Java 的热度改名为 JavaScript。
  2. JavaScript 的特点:
    • 解释性执行
      • JavaScript是一种解释性脚本语言语言,但在使用前,不需要先编译,而是在程序运行过程中被逐行地解释。JavaScript与HTML标识结合在一起,从而方便用户的使用操作。
    • 基于对象
      • JavaScript是一种基于对象的面向对象的脚本语言。可以通过创建对象实现指定的操作。
    • 简单弱类型
      • JavaScript对用户的响应,是以事件驱动的方式进行的。能响应键盘、鼠标以及浏览器窗口等事件。当事件发生后,可能会引起相应的事件响应,执行某些对应的脚本,就称为是事件驱动。
    • 相对安全
      • JavaScript是一种基于Java基本语句和控制流之上的简单而紧凑的设计,从而对于使用者学习Java或其他C语系的编程语言是一种非常好的过渡,而对于具有C语系编程功底的程序员来说,JavaScript上手也非常容易;其次,其变量类型是采用弱类型,并未使用严格的数据类型。所以javaScript开发起来也比较简单。
    • 事件驱动
      • JavaScript作为一种安全性语言,不被允许访问本地的硬盘,且不能将数据存入服务器,不允许对网络文档进行修改和删除,只能通过浏览器实现信息浏览或动态交互。从而有效地防止数据的丢失或对系统的非法访问。
    • 跨平台性
      • JavaScript脚本的正确运行依赖于浏览器本身,与操作环境无关,只要客户端能装有支持JavaScript的浏览器,就可正确执行javaScript脚本。

2. 请列举出 HTML 常用的标记。(至少10个)

img

一个完整的页面几乎包含上述所有标签,其次还有表格,列表,超链接,图像,引入CSS和脚本文件的标签等,总结在下表。

标签 作用
声明为 HTML5 文档
元素是 HTML 页面的根元素
元素包含了文档的元(meta)数据
</code></td> <td>元素描述了文档的标题</td> </tr> <tr> <td><code><body></code></td> <td>元素包含了可见的页面内容</td> </tr> <tr> <td><code></p> <h1></code></td> <td>元素定义一个大标题</td> </tr> <tr> <td><code></p> <p></code></td> <td>元素定义一个段落</td> </tr> <tr> <td><code></p> <table></code></td> <td>定义表格</td> </tr> <tr> <td><code></p> <ul></code></td> <td>定义无序列表</td> </tr> <tr> <td><code></p> <ol></code></td> <td>定义有序列表</td> </tr> <tr> <td><code><img></code></td> <td>定义图像</td> </tr> <tr> <td><code></p> <div></code></td> <td>块级元素,它可用于组合其他 HTML 元素的容器。</td> </tr> <tr> <td><code><span></code></td> <td>内联元素,可用作文本的容器</td> </tr> <tr> <td><code></p> <style></code></td> <td>定义文本样式</td> </tr> <tr> <td><code>{w3tc_lazyload_64a60d2c39a2b9648f8f64f523f5d3d1_5} <style> /*翻页按钮*/ .pagenav .current { background: linear-gradient(90deg, #7de4d7 0%, #ff89ee 100%); color: #fff !important; } </style> <style> body:after { content: " "; position: fixed; inset: 0; background-color: white; z-index: 999; background-image: url(/wp-content/plugins/WaiMaoLa_Diy/img/index/1154045358.svg); background-repeat: no-repeat; background-position: center; background-size: 30%; animation: fadeOut 3s; animation-fill-mode: forwards; -webkit-transition: fadeOut 3s; transition: fadeOut 3s; pointer-events: none; } @keyframes fadeOut { 50% { opacity: 1; } 100% { opacity: 0; } } </style> <script src="https://www.easyhub.top/wp-content/plugins/WaiMaoLa_Diy//js/fengye.js"></script> <link rel="stylesheet" href="https://www.easyhub.top/wp-content/plugins/WaiMaoLa_Diy//css/yuansufuhao.css" /> <script> $('head').before('<div class="container1"><div class="inner-container1"><div class="shape"></div></div><div class="inner-container1"><div class="shape"></div></div></div>'); </script> <script src="https://www.easyhub.top/wp-content/plugins/WaiMaoLa_Diy//js/yuansufuhao.min.js"></script> <script> $(document).ready(function() { var html = ''; for (var i = 1; i <= 50; i++) { html += '<div class="shape-container--' + i + ' shape-animation"><div class="random-shape"></div></div>' } document.querySelector('.shape').innerHTML += html }); </script> </script> <div class="dimmer"></div> <style> #landlord .landlord-close { opacity: 0; visibility: hidden; width: 20px; height: 20px; line-height: 20px; background: rgb(0, 0, 0); text-align: center; color: #fff; position: absolute; top: 3px; right: 0; border-radius: 50%; font-size: 10px; cursor: pointer; z-index: 1; transition: .2s; } #landlord { user-select: none; position: fixed; left: 30px; bottom: 150px; z-index: 10000; font-size: 0; transition: all .3s ease-in-out; } #landlord .message { opacity: 0; width: 172px; height: auto; margin: auto; padding: 7px; top: -200px; left: -20px; text-align: center; color: #fff; border-radius: 12px; background-color: #0005; box-shadow: 0 3px 15px 2px #eae6e6; font-size: 13px; font-weight: 400; text-overflow: ellipsis; text-transform: uppercase; overflow: hidden; position: absolute; } @media (max-width: 767px) { #landlord .message { display: none; } } </style> <div id="landlord" style="display: block;"> <span class="landlord-close iconfont icon-guanbi" onclick="$('#landlord').hide();$('#flost-landlord').show();"></span> <div class="message" style="opacity: 1;">欢迎访问本站<br>您的访问时本站的荣幸<br>希望您能在本站<br>找到您想要的资源</div> </div> <script type="text/javascript"> jQuery(function () { var text; var now = (new Date()).getHours(); if (now > 24 || now <= 5) { text = '外贸啦提示您 午夜骚年,快睡觉去,妹纸等你太久了会不耐烦的哦!'; } else if (now > 5 && now <= 10) { text = '早上好~今天又是元气满满的一天哦!先去尝尝鲜</a>~'; } else if (now > 10 && now <= 12) { text = '最难的任务适合在上午时段攻克哦,期待您的订单~'; } else if (now > 12 && now <= 14) { text = '中午拿什么填补我空虚的胃和心灵?<br />停下手中的工作,快去吃饭吧,晚了就没的吃了'; } else if (now > 14 && now <= 17) { text = '下午时段外贸啦正在优化细节,力求做一个人见人爱的“细节控”哦~'; } else if (now > 17 && now <= 19) { text = '快要下班了吧?休息会扒根烟喝杯茶~'; } else if (now > 19 && now <= 21) { text = '晚安~音乐、运动、阅读,睡前时间放松一下,灵感也许会悄悄到来!'; } else if (now > 21 && now <= 24) { text = '累了就早点休息~<br />晚间22:00-5:00是最佳睡眠时间哦'; } showMessage(text, 12000); }); function showMessage(text, timeout) { if (Array.isArray(text)) text = text[Math.floor(Math.random() * text.length + 1) - 1]; //console.log('showMessage', text); $('.message').stop(); if (text != undefined) { $('.message').html(text).fadeTo(200, 1); } if (timeout === null) timeout = 6000; hideMessage(timeout); } function hideMessage(timeout) { $('.message').stop().css('opacity', 1); if (timeout === null) timeout = 6000; $('.message').delay(timeout).fadeTo(200, 0); } </script> <style> span.icon-circle { display: none; } </style> <style> .tab-content .posts-item:not(article) { transition: all 0.3s; } .tab-content .posts-item:not(article):hover { transform: translateY(-10px); box-shadow: 0 8px 10px #FFD1D8; } </style> <style> .tab-content .posts-item:not(article):hover { opacity: 1; z-index: 99; border-radius: 20px; transform: translateY(-5px); box-shadow: 0 3px 20px rgba(0, 0, 0, .25); animation: index-link-active 1s cubic-bezier(0.315, 0.605, 0.375, 0.925) forwards; } @keyframes index-link-active { 0% { transform: perspective(2000px) rotateX(0) rotateY(0) translateZ(0); } 16% { transform: perspective(2000px) rotateX(10deg) rotateY(5deg) translateZ(32px); } 100% { transform: perspective(2000px) rotateX(0) rotateY(0) translateZ(65px); } } </style> <style> .theme-pagination .ajax-next a, .theme-pagination .order-ajax-next a { border-radius: 30px; padding: 15px 0; color: var(--muted-color); background-color: var(--main-bg-color); color: #FF0033; display: block; opacity: 1; font-weight: bold; } </style> <style> .item-thumbnail:before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0); transition: background .35s; border-radius: 8px; z-index: 2; max-width: 765px; margin: 0 auto; pointer-events: none; } .item-thumbnail:after { content: ''; position: absolute; top: 50%; left: 50%; width: 50px; height: 50px; margin: -25px 0 0 -25px; background: url(/wp-content/plugins/WaiMaoLa_Diy/img/index/st.png); background-repeat: no-repeat; background-size: 100% 100%; z-index: 3; -webkit-transform: scale(2); transform: scale(2); transition: opacity .35s, -webkit-transform .35s; transition: transform .35s, opacity .35s; transition: transform .35s, opacity .35s, -webkit-transform .35s; opacity: 0; pointer-events: none; } .item-thumbnail:hover:before { background: rgba(0, 0, 0, .5) } .item-thumbnail:hover:after { -webkit-transform: scale(1); transform: scale(1); opacity: 1 } </style> <style> .posts-item { position: relative; } .posts-item.card::before { content: ""; display: block; background: #fc625d; top: 10px; left: 15px; border-radius: 50%; width: 10px; height: 10px; box-shadow: 16px 0 #fdbc40, 32px 0 #35cd4b; position: absolute; } .posts-item.card { padding: 26px 10px 10px 10px; } </style> <style> ul.nav { font-weight: 650; } </style> <style> .navbar-nav>li:first-child:before { width: 30px; } .navbar-nav>li:before { width: 60px; top: 23px; background: rgba(0, 0, 0, 0); height: 4px; left: 10px; border-radius: unset; } .navbar-top li.current-menu-item>a, .navbar-top li:hover>a { color: var(--focus-color); } </style> <style>@media screen and (min-width: 1000px){.header-layout-1{position:relative;background-image:url("/wp-content/plugins/WaiMaoLa_Diy/img/navbg/navbg1.gif");background-position:center right;background-size:100% 100%;}}</style> <style> #maomao { position: fixed; bottom: 40px; right: -5px; width: 57px; height: 70px; background-image: url(https://www.easyhub.top/wp-content/plugins/WaiMaoLa_Diy//img/right/mao.svg); background-position: center; background-size: cover; background-repeat: no-repeat; transition: background .3s; z-index: 99999999999999 } #maomao:hover { background-position: 60px 50%; } </style> <div id="maomao" onmouseout="duoMaomao()" style="bottom: 60vh;"></div> <script> var randomNum = function(minNum, maxNum) { switch (arguments.length) { case 1: return parseInt(Math.random() * minNum + 1, 10); break; case 2: return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10); break; default: return 0; break; }; }; var duoMaomao = function() { var maomao = $('#maomao'); maomao.css('bottom', randomNum(1, 90) + 'vh'); }; </script> <style> #tiaopill { position: fixed; bottom: 40px; right: -5px; width: 57px; height: 70px; background-image: url(https://www.easyhub.top/wp-content/plugins/WaiMaoLa_Diy//img/right/decorate1.png); background-position: center; background-size: cover; background-repeat: no-repeat; transition: background .3s; z-index: 99999999999999 } #tiaopill:hover { background-position: 60px 50%; } </style> <div id="tiaopill" onmouseout="duoMaomao()" style="bottom: 60vh;"></div> <script> var randomNum = function(minNum, maxNum) { switch (arguments.length) { case 1: return parseInt(Math.random() * minNum + 1, 10); break; case 2: return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10); break; default: return 0; break; }; }; var duoMaomao = function() { var tiaopill = $('#tiaopill'); tiaopill.css('bottom', randomNum(1, 90) + 'vh'); }; </script> <style> /*悬浮按钮渐变颜色*/ .float-right .float-btn { width: 40px; line-height: 40px; display: block; font-size: 1.4em; --this-color: #fff; --this-bg: var(--float-btn-bg); background: linear-gradient(90deg, #fdfffc73 0%, #ff5683 100%); position: relative; color: var(--this-color) !important; } /*悬浮按钮圆形样式*/ .float-right.round .float-btn { margin-top: 5px; border-radius: 20px; } </style> <style> span.float-btn.more-btn.hover-show.nowave { margin-top: 0 } .float-right.round.position-bottom { background: #fff; border-radius: var(--main-radius); transition: 0s; right: 1px; bottom: 170px; border-radius: 20px 0 0 20px; box-shadow: -5px 3px 10px 0 rgb(5 5 5 / 15%) } .float-right.round .float-btn { border-radius: 8px 0 0 17px } .float-right .float-btn { background: #fff } .float-right.round.position-bottom::before { content: ''; width: 30px; height: 60px; background: url(/wp-content/plugins/WaiMaoLa_Diy/img/right/aa1.gif); background-size: cover; display: block; margin: 5px 3px 0 7px; } .dark-theme .float-right.round.position-bottom { background: #414141; border: 1px solid #4a4a4a; transition: 0s } .dark-theme .float-right .float-btn { background: #414141 } .dark-theme .float-right.round.position-bottom a:hover { background: #505255; --this-color: var(--muted-2-color) } .dark-theme .float-right.round.position-bottom span:hover { background: #505255; --this-color: var(--muted-2-color) } span.newadd-btns.hover-show.float-btn.add-btn .hover-show-con.dropdown-menu.drop-newadd>a:hover { background-color: #d8d8d836; border-radius: 8px } a.float-btn.ontop.fade { display: none } </style> <style> .wp-posts-content img:hover { box-shadow: 0px 0px 8px #63B8FF; } </style> <style> .enlighter::before { content: ""; display: block; background: #fc625d; top: 9px; left: 15px; border-radius: 50%; width: 15px; height: 15px; box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b; margin: 0px 2px -7px; z-index: 1; position: absolute; } .enlighter-overflow-scroll.enlighter-v-standard .enlighter { padding: 35px 0 12px 0; } </style> <style> textarea#comment {background-color:transparent;background:linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05)),url("/wp-content/plugins/WaiMaoLa_Diy/img/comments/comment_bg.gif") right 30px bottom 0px no-repeat;-moz-transition:ease-in-out 0.45s;background-size:35%;-webkit-transition:ease-in-out 0.45s;-o-transition:ease-in-out 0.45s;-ms-transition:ease-in-out 0.45s;transition:ease-in-out 0.45s;}textarea#comment:focus {background-position-y:789px;-moz-transition:ease-in-out 0.45s;-webkit-transition:ease-in-out 0.45s;-o-transition:ease-in-out 0.45s;-ms-transition:ease-in-out 0.45s;transition:ease-in-out 0.45s;}';</style> <style> body { --acg-color: #fff8fa; --acg-color2: #f8fdff; } .dark-theme { --acg-color: #323335; --acg-color2: #323335; } #postcomments .commentlist .comment { border-top: 1px solid rgb(50 50 50 / 0%); border-radius: 15px; margin: 0 15px 15px; border: 1px solid; display: flow-root; background-image: url(https://www.easyhub.top/wp-content/plugins/WaiMaoLa_Diy//img/comments/shading_blue.png); border-color: #71baff80; background-color: var(--acg-color2); } #postcomments .commentlist .comment+.comment { border-top: 1px solid rgb(50 50 50 / 0%); padding: 0 0 15px 0; border-radius: 15px; margin: 0 15px 15px; border: 1px solid; display: flow-root; padding: 10px; } #postcomments .commentlist .comment+.comment:nth-child(odd) { background-image: url(https://www.easyhub.top/wp-content/plugins/WaiMaoLa_Diy//img/comments/shading_red.png); border-color: #ff8bb5; background-color: var(--acg-color); } #postcomments .commentlist .comment+.comment:nth-child(even) { background-image: url(https://www.easyhub.top/wp-content/plugins/WaiMaoLa_Diy//img/comments/shading_blue.png); border-color: #71baff80; background-color: var(--acg-color2); } #postcomments .children { background: rgb(116 116 116 / 0%); margin-bottom: 6px; border-radius: 15px; display: flow-root; } #postcomments .children:nth-child(even) { background-image: url(https://www.easyhub.top/wp-content/plugins/WaiMaoLa_Diy//img/comments/shading_blue.png); border-color: #71baff80; } #postcomments .children:nth-child(odd) { background-image: url(https://www.easyhub.top/wp-content/plugins/WaiMaoLa_Diy//img/comments/shading_red.png); border-color: #ff8bb5; background-color: var(--acg-color); } </style> <script> var a_idx = 0; jQuery(document).ready(function($) { $("body").click(function(e) { var a = new Array("🍉富强🍉", "🎉虎虎生威🎉", "🍉民主🍉", "🍉文明🍉", "🧧恭喜发财🧧", "🎉金虎送福🎉", "🍉和谐🍉", "🍉自由🍉", "🍉平等🍉", "🎉龙腾虎跃🎉", "关注关注🙈", "🍉公正🍉", "🍉法治🍉", "🍉欢迎光临🍉", "🍉爱国🍉", "🍉诚信🍉", "🍉友善🍉"); var b = new Array("red", "blue", "yellow", "green", "pink", "blue", "orange"); var $i = $("<span/>").text(a[a_idx]); a_idx = (a_idx + 1) % a.length; b_idx = (a_idx + 1) % 7; var x = e.pageX, y = e.pageY; $i.css({ "z-index": 9999, "top": y - 20, "left": x, "position": "absolute", "font-weight": "bold", "color": b[b_idx] }); $("body").append($i); $i.animate({ "top": y - 180, "opacity": 0 }, 1500, function() { $i.remove(); }); }); }); </script> <div class="mouse-cursor cursor-outer"></div> <div class="mouse-cursor cursor-inner"></div> <script src="https://www.easyhub.top/wp-content/plugins/WaiMaoLa_Diy//js/mouse_follow.js"></script> <style> .mouse-cursor { position: fixed; left: 0; top: 0; pointer-events: none; border-radius: 50%; -webkit-transform: translateZ(0); transform: translateZ(0); visibility: hidden; } .cursor-inner { margin-left: -3px; margin-top: -3px; width: 6px; height: 6px; z-index: 10000001; background: #123eed; -webkit-transition: width .3s ease-in-out, height .3s ease-in-out, margin .3s ease-in-out, opacity .3s ease-in-out; transition: width .3s ease-in-out, height .3s ease-in-out, margin .3s ease-in-out, opacity .3s ease-in-out; } .cursor-inner.cursor-hover { margin-left: -18px; margin-top: -18px; width: 36px; height: 36px; background: #123eed !important; opacity: .3; } .cursor-outer { margin-left: -15px; margin-top: -15px; width: 30px; height: 30px; border: 2px solid #123eed !important; -webkit-box-sizing: border-box; box-sizing: border-box; z-index: 10000000; opacity: .5; -webkit-transition: all .08s ease-out; transition: all .08s ease-out; } .cursor-outer.cursor-hover { opacity: 0; } .main-wrapper[data-magic-cursor=hide] .mouse-cursor { display: none; opacity: 0; visibility: hidden; position: absolute; z-index: -1111; } </style> <style> a { text-decoration: none; } div.usercm { background-repeat: no-repeat; background-position: center center; background-size: cover; background-color: #fff; font-size: 13px !important; width: 130px; -moz-box-shadow: 1px 1px 3px rgba(0, 0, 0, .3); box-shadow: 0px 0px 15px #333; position: absolute; display: none; z-index: 10000; opacity: 0.9; border-radius: 8px; } div.usercm ul { list-style-type: none; list-style-position: outside; margin: 0px; padding: 0px; display: block } div.usercm ul li { margin: 0px; padding: 0px; line-height: 35px; } div.usercm ul li a { color: #666; padding: 0 15px; display: block } div.usercm ul li a:hover { color: #fff; background: rgba(170, 222, 18, 0.88) } div.usercm ul li a i { margin-right: 10px } a.disabled { color: #c8c8c8 !important; cursor: not-allowed } a.disabled:hover { background-color: rgba(255, 11, 11, 0) !important } div.usercm { background: #fff !important; } </style> <div class="usercm" style="left: 199px; top: 5px; display: none;"> <ul> <li><a href="/"><i class="fa fa-home fa-fw"></i><span>首页</span></a></li> <li><a href="javascript:void(0);" onclick="getSelect();"><i class="fa fa-copy fa-fw"></i><span>复制</span></a> </li> <li><a href="javascript:history.go(1);"><i class="fa fa-arrow-right fa-fw"></i><span>前进</span></a></li> <li><a href="javascript:history.go(-1);"><i class="fa fa-arrow-left fa-fw"></i><span>后退</span></a></li> <li style="border-bottom:1px solid gray"><a href="javascript:window.location.reload();"><i class="fa fa-refresh fa-fw"></i><span>刷新</span></a></li> <li><a href="javascript:void(0);" onclick="baiduSearch();"><i class="fa fa-paw fa-fw"></i><span>百度</span></a> </li> <li><a href="javascript:void(0);" onclick="googleSearch();"><i class="fa fa-google fa-fw"></i><span>谷歌</span></a></li> <li style="border-bottom:1px solid gray"><a target="_blank" href=""><i class="fa fa-refresh fa-fw"></i><span></span></a></li> </ul> </div> <script> (function(a) { a.extend({ mouseMoveShow: function(b) { var d = 0, c = 0, h = 0, k = 0, e = 0, f = 0; a(window).mousemove(function(g) { d = a(window).width(); c = a(window).height(); h = g.clientX; k = g.clientY; e = g.pageX; f = g.pageY; h + a(b).width() >= d && (e = e - a(b).width() - 5); k + a(b).height() >= c && (f = f - a(b).height() - 5); a("html").on({ contextmenu: function(c) { 3 == c.which && a(b).css({ left: e, top: f }).show() }, click: function() { a(b).hide() } }) }) }, disabledContextMenu: function() { window.oncontextmenu = function() { return !1 } } }) })(jQuery); function getSelect() { "" == (window.getSelection ? window.getSelection() : document.selection.createRange().text) ? layer.msg("请选择需要百度的内容!"): document.execCommand("Copy") } function baiduSearch() { var a = window.getSelection ? window.getSelection() : document.selection.createRange().text; "" == a ? layer.msg("请选择需要百度的内容!") : window.open("https://www.baidu.com/s?wd=" + a) } function googleSearch() { var a = window.getSelection ? window.getSelection() : document.selection.createRange().text; "" == a ? layer.msg("请选择需要谷歌的内容!") : window.open("https://www.google.com/search?q=" + a) } $(function() { for (var a = navigator.userAgent, b = "Android;iPhone;SymbianOS;Windows Phone;iPad;iPod".split(";"), d = !0, c = 0; c < b.length; c++) if (0 < a.indexOf(b[c])) { d = !1; break } d && ($.mouseMoveShow(".usercm"), $.disabledContextMenu()) }); </script> <style> body {cursor: url(https://www.easyhub.top/wp-content/plugins/WaiMaoLa_Diy//img/mouse/mouse1_1.png), default;} a:hover {cursor: url(https://www.easyhub.top/wp-content/plugins/WaiMaoLa_Diy//img/mouse/mouse1_2.png), pointer;} </style> <style> @font-face {font-family: 'zti';src:url('https://www.easyhub.top/wp-content/plugins/WaiMaoLa_Diy/font/AlimamaDaoLiTi.woff2');} body {font-family: 'zti' !important;} </style> <style> .avatar-img { border-radius: 50%; animation: light 4s ease-in-out infinite; transition: 0.5s; } .avatar-img:hover { transform: scale(1.15) rotate(720deg); } @keyframes light { 0% { box-shadow: 0 0 4px #f00; } 25% { box-shadow: 0 0 16px #0f0; } 50% { box-shadow: 0 0 4px #00f; } 75% { box-shadow: 0 0 16px #0f0; } 100% { box-shadow: 0 0 4px #f00; } } </style> <style> .display-name { background-image: -webkit-linear-gradient(90deg, #07c160, #fb6bea 25%, #3aedff 50%, #fb6bea 75%, #28d079); -webkit-text-fill-color: transparent; -webkit-background-clip: text; background-size: 100% 600%; animation: wzw 10s linear infinite; } @keyframes wzw { 0% { background-position: 0 0; } 100% { background-position: 0 -300%; } } </style> <style> /*小工具头像跳动*/ .user-avatar .avatar-img, .img-ip:hover, .w-a-info img { -webkit-animation: swing 3s .4s ease both; -moz-animation: swing 3s .4s ease both; } @-webkit-keyframes swing { 20%, 40%, 60%, 80%, 100% { -webkit-transform-origin: top center } 20% { -webkit-transform: rotate(15deg) } 40% { -webkit-transform: rotate(-10deg) } 60% { -webkit-transform: rotate(5deg) } 80% { -webkit-transform: rotate(-5deg) } 100% { -webkit-transform: rotate(0deg) } } @-moz-keyframes swing { 20%, 40%, 60%, 80%, 100% { -moz-transform-origin: top center } 20% { -moz-transform: rotate(15deg) } 40% { -moz-transform: rotate(-10deg) } 60% { -moz-transform: rotate(5deg) } 80% { -moz-transform: rotate(-5deg) } 100% { -moz-transform: rotate(0deg) } } </style> <style> .navbar-brand { position: relative; overflow: hidden; margin: 0 0 0 0; } .navbar-brand:before { content: ""; position: absolute; left: -665px; top: -460px; width: 200px; height: 15px; background-color: rgba(255, 255, 255, .5); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-animation: searchLights 6s ease-in 0s infinite; -o-animation: searchLights 6s ease-in 0s infinite; animation: searchLights 6s ease-in 0s infinite; } @-moz-keyframes searchLights { 50% { left: -100px; top: 0; } 65% { left: 120px; top: 100px; } } @keyframes searchLights { 40% { left: -100px; top: 0; } 60% { left: 120px; top: 100px; } 80% { left: -100px; top: 0; } } </style> <style> .navbar-logo { animation: hue 4s infinite; } @keyframes hue { from { filter: hue-rotate(0deg); } to { filter: hue-rotate(-360deg); } } </style> <style> .navbar-logo { filter: invert(1); } </style> <style> .navbar-logo { filter: drop-shadow(0 0 10px dodgerblue); } </style> <style> .dark-theme .navbar-logo { filter: invert(1); } </style> <script> // 日夜间切换提示 $(".toggle-theme").click(function() { var toggleThemeText = "当前为日间模式"; if (!$("body").hasClass('dark-theme')) { toggleThemeText = "当前为夜间模式"; } layer.msg(toggleThemeText, { time: 2000, anim: 1 }); }); </script> <!--日夜间切换提示--> <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/layui/2.6.8/layui.min.js"></script> <script src="/wp-content/plugins/WaiMaoLa_Diy/js/copy-one.js"></script> <link rel="stylesheet" href="/wp-content/plugins/WaiMaoLa_Diy/css/copy-one.css" /> <script>function copy_remind(){toastr.success("撰文不易,若要转载请务必保留原文链接,谢谢!", "复制成功!"); clear_toastr(1600); function clear_toastr(time){setTimeout(function(){toastr.clear();}, time); }}document.addEventListener("copy",function(e){ if(window.getSelection(0).toString()){ copy_remind();} else{toastr.info("当前未选择复制的内容!", "温馨提示");}});</script> <script> var OriginTitile = document.title, titleTime; document.addEventListener("visibilitychange", function() { if (document.hidden) { document.title = "你别走吖 Σ(っ °Д °;)っ"; clearTimeout(titleTime) } else { document.title = "(/≧▽≦/)你又回来啦!"; titleTime = setTimeout(function() { document.title = OriginTitile }, 2000) } }); </script> <script> console.log("\n %c KEKC博客 %c https://www.kekc.cn \n","color: #fadfa3; background: red; padding:5px 0; font-size:12px;","background: #9FEE00; padding:5px 0; font-size:12px;"); console.log("\n %c 终结网络 %c https://www.dift.cn \n","color: #fadfa3; background: #8371DA; padding:5px 0; font-size:12px;","background: #DA71C9; padding:5px 0; font-size:12px;"); </script> <script type="text/javascript"> window._win = { views: '939', www: 'https://www.easyhub.top', uri: 'https://www.easyhub.top/wp-content/themes/zibll', ver: '8.1', imgbox: '1', imgbox_type: 'group', imgbox_thumbs: '1', imgbox_zoom: '1', imgbox_full: '1', imgbox_play: '1', imgbox_down: '1', sign_type: 'modal', signin_url: 'https://www.easyhub.top/user-sign?tab=signin&redirect_to=https%3A%2F%2Fwww.easyhub.top%2F939.html', signup_url: 'https://www.easyhub.top/user-sign?tab=signup&redirect_to=https%3A%2F%2Fwww.easyhub.top%2F939.html', ajax_url: 'https://www.easyhub.top/wp-admin/admin-ajax.php', ajaxpager: '', ajax_trigger: '<i class="fa fa-angle-right"></i>加载更多', ajax_nomore: '没有更多内容了', qj_loading: '1', highlight_kg: '1', highlight_hh: '', highlight_btn: '1', highlight_zt: 'enlighter', highlight_white_zt: 'enlighter', highlight_dark_zt: 'dracula', upload_img_size: '3', img_upload_multiple: '6', upload_video_size: '30', upload_file_size: '30', upload_ext: 'jpg|jpeg|jpe|gif|png|bmp|tiff|tif|webp|avif|ico|heic|heif|heics|heifs|asf|asx|wmv|wmx|wm|avi|divx|flv|mov|qt|mpeg|mpg|mpe|mp4|m4v|ogv|webm|mkv|3gp|3gpp|3g2|3gp2|txt|asc|c|cc|h|srt|csv|tsv|ics|rtx|css|vtt|dfxp|mp3|m4a|m4b|aac|ra|ram|wav|ogg|oga|flac|mid|midi|wma|wax|mka|rtf|pdf|class|tar|zip|gz|gzip|rar|7z|psd|xcf|doc|pot|pps|ppt|wri|xla|xls|xlt|xlw|mdb|mpp|docx|docm|dotx|dotm|xlsx|xlsm|xlsb|xltx|xltm|xlam|pptx|pptm|ppsx|ppsm|potx|potm|ppam|sldx|sldm|onetoc|onetoc2|onetmp|onepkg|oxps|xps|odt|odp|ods|odg|odc|odb|odf|wp|wpd|key|numbers|pages', user_upload_nonce: '7b44a6fe95', is_split_upload: '1', split_minimum_size: '20', comment_upload_img: '' } </script> <div class="float-right round position-bottom filter"><span style="--this-bg:rgba(255, 111, 6, 0.2);" class="float-btn more-btn hover-show nowave" data-placement="left" title="本站同款主题模板" href="javascript:;"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-gift-color"></use></svg><div style="width:240px;" class="hover-show-con dropdown-menu"><a href="https://www.zibll.com/" target="_blank"> <div class="flex c-red"> <img class="flex0 lazy" alt="zibll子比主题" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201%201'%3E%3C/svg%3E" data-src="https://www.easyhub.top/wp-content/themes/zibll/img/favicon.png" height="30"> <div class="flex1 ml10"> <dt>本站同款主题模板</dt> <div class="px12 mt10 muted-color">zibll子比主题是一款漂亮优雅的网站主题模板,功能强大,配置简单。</div> <div class="but mt10 p2-10 c-blue btn-block px12">查看详情</div> </div> </div> </a></div></span><a style="--this-color:#f2c97d;--this-bg:rgba(62,62,67,0.9);" class="float-btn signin-loader" data-toggle="tooltip" data-placement="left" title="开通会员" href="javascript:;"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-vip_1"></use></svg></a><span class="newadd-btns hover-show float-btn add-btn"> <svg class="icon" aria-hidden="true"><use xlink:href="#icon-add-ring"></use></svg> <div class="hover-show-con dropdown-menu drop-newadd"><a rel="nofollow" class="btn-newadd" href="https://www.easyhub.top/newposts"><icon class="jb-green"><i class="fa fa-pencil-square"></i></icon><text>发布文章</text></a><a class="signin-loader btn-newadd" href="javascript:;"><icon class="jb-pink"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-topic"></use></svg></icon><text>创建话题</text></a><a class="signin-loader plate-add btn-newadd" href="javascript:;"><icon class="jb-yellow"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-plate-fill"></use></svg></icon><text>创建版块</text></a><a rel="nofollow" class="btn-newadd" href="https://www.easyhub.top/posts-edit"><icon class="jb-blue"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-posts"></use></svg></icon><text>发布帖子</text></a></div> </span><a class="float-btn service-wechat hover-show nowave" title="扫码添加微信" href="javascript:;"><i class="fa fa-wechat"></i><div class="hover-show-con dropdown-menu"><img class="radius4 relative" width="100%" class="lazyload" src="https://www.easyhub.top/wp-content/themes/zibll/img/thumbnail-sm.svg" data-src="https://www.easyhub.top/wp-content/themes/zibll/img/qrcode.png" alt="扫码添加微信-Easy 补给站"></div></a><span class="float-btn qrcode-btn hover-show service-wechat"><i class="fa fa-qrcode"></i><div class="hover-show-con dropdown-menu"><div class="qrcode" data-size="100"></div><div class="mt6 px12 muted-color">在手机上浏览此页面</div></div></span><a class="float-btn ontop fade" data-toggle="tooltip" data-placement="left" title="返回顶部" href="javascript:(scrollTopTo());"><i class="fa fa-angle-up em12"></i></a></div><div mini-touch="nav_search" touch-direction="top" class="main-search fixed-body main-bg box-body navbar-search nopw-sm"><div class="container"><div class="mb20"><button class="close" data-toggle-class data-target=".navbar-search" ><svg class="ic-close" aria-hidden="true"><use xlink:href="#icon-close"></use></svg></button></div><div remote-box="https://www.easyhub.top/wp-admin/admin-ajax.php?action=search_box" load-click><div class="search-input"><p><i class="placeholder s1 mr6"></i><i class="placeholder s1 mr6"></i><i class="placeholder s1 mr6"></i></p><p class="placeholder k2"></p> <p class="placeholder t1"></p><p><i class="placeholder s1 mr6"></i><i class="placeholder s1 mr6"></i><i class="placeholder s1 mr6"></i><i class="placeholder s1 mr6"></i></p><p class="placeholder k1"></p><p class="placeholder t1"></p><p></p> <p class="placeholder k1" style="height: 80px;"></p> </div></div></div></div> <div class="modal fade" id="u_sign" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="sign-content"> <div class="sign zib-widget blur-bg relative"> <button class="close" data-dismiss="modal"> <svg class="ic-close" aria-hidden="true" data-viewBox="0 0 1024 1024" viewBox="0 0 1024 1024"><use xlink:href="#icon-close"></use></svg> </button> <div class="tab-content"><div class="tab-pane fade active in" id="tab-sign-in"><div class="box-body"><div class="title-h-left fa-2x">登录</div><a class="muted-color px12" href="#tab-sign-up" data-toggle="tab">没有账号?立即注册<i class="em12 ml3 fa fa-angle-right"></i></a></div><div id="sign-in"><form><div class="relative line-form mb10"><input type="text" name="username" class="line-form-input" tabindex="1" placeholder=""><i class="line-form-line"></i><div class="scale-placeholder">用户名或邮箱</div></div><div class="relative line-form mb10"><input type="password" name="password" class="line-form-input" tabindex="2" placeholder=""><div class="scale-placeholder">登录密码</div><div class="abs-right passw muted-2-color"><i class="fa-fw fa fa-eye"></i></div><i class="line-form-line"></i></div><input machine-verification="slider" type="hidden" name="captcha_mode" value="slider" slider-id=""><div class="relative line-form mb10 em09"><span class="muted-color form-checkbox"><input type="checkbox" id="remember" checked="checked" tabindex="4" name="remember" value="forever"><label for="remember" class="ml3">记住登录</label></span><span class="pull-right muted-2-color"><a rel="nofollow" class="muted-2-color" href="https://www.easyhub.top/user-sign?tab=resetpassword&redirect_to=https%3A%2F%2Fwww.easyhub.top%2F939.html">找回密码</a></span></div><div class="box-body"><input type="hidden" name="action" value="user_signin"><button type="button" class="but radius jb-blue padding-lg signsubmit-loader btn-block"><i class="fa fa-sign-in mr10"></i>登录</button></div></form><p class="social-separator separator muted-3-color em09">社交账号登录</p><div class="social_loginbar"><a rel="nofollow" title="微信登录" href="https://www.easyhub.top/oauth/weixingzh?rurl=https%3A%2F%2Fwww.easyhub.top%2F939.html" class="social-login-item weixingzh toggle-radius qrcode-signin"><i class="fa fa-weixin" aria-hidden="true"></i></a></div></div></div><div class="tab-pane fade" id="tab-sign-up"><div class="box-body"><div class="title-h-left fa-2x">注册</div><a class="muted-color px12" href="#tab-sign-in" data-toggle="tab">已有账号,立即登录<i class="em12 ml3 fa fa-angle-right"></i></a></div><form id="sign-up"><div class="relative line-form mb10"><input type="text" name="name" class="line-form-input" tabindex="1" placeholder=""><i class="line-form-line"></i><div class="scale-placeholder">设置用户名</div></div><div class="relative line-form mb10"><input type="password" name="password2" class="line-form-input" tabindex="3" placeholder=""><div class="scale-placeholder">设置密码</div><div class="abs-right passw muted-2-color"><i class="fa-fw fa fa-eye"></i></div><i class="line-form-line"></i></div><div class="relative line-form mb10"><input type="password" name="repassword" class="line-form-input" tabindex="4" placeholder=""><div class="scale-placeholder">重复密码</div><div class="abs-right passw muted-2-color"><i class="fa-fw fa fa-eye"></i></div><i class="line-form-line"></i></div><input machine-verification="slider" type="hidden" name="captcha_mode" value="slider" slider-id=""><div class="box-body"><input type="hidden" name="action" value="user_signup"><button type="button" class="but radius jb-green padding-lg signsubmit-loader btn-block"><svg class="icon mr10" aria-hidden="true" data-viewBox="0 0 1024 1024" viewBox="0 0 1024 1024"><use xlink:href="#icon-signup"></use></svg>注册</button></div></form></div><div class="tab-pane fade" id="tab-qrcode-signin"><div class="box-body"><div class="title-h-left fa-2x">扫码登录</div><span class="muted-3-color px12">使用<a class="muted-color" href="#tab-sign-in" data-toggle="tab">其它方式登录</a>或<a class="muted-color" href="#tab-sign-up" data-toggle="tab">注册</a></span><a class="muted-color px12 hide" href="#tab-qrcode-signin" data-toggle="tab">扫码登录</a></div><div class="qrcode-signin-container box-body text-center"><p class="placeholder" style="height:180px;width:180px;margin:auto;"></p><p class="placeholder" style="height:27px;width:200px;margin:15px auto 0;"></p></div></div></div> </div> </div> </div> </div> <div class="modal fade" id="modal-system-notice" tabindex="-1" role="dialog"> <div class="modal-dialog modal-sm" style="" role="document"> <div class="modal-content"> <div class="modal-body"> <div style="padding: 1px;"><div class="modal-colorful-header colorful-bg jb-yellow"><button class="close" data-dismiss="modal"><svg class="ic-close" aria-hidden="true"><use xlink:href="#icon-close"></use></svg></button><div class="colorful-make"></div><div class="text-center"><div class="em2x"><i class="fa fa-heart" aria-hidden="true"></i></div><div class="mt10 em12 padding-w10">主题模板推荐</div></div></div><div><p class="c-yellow">欢迎光临 EasyHub 补给站</p></div></div> </div> <div class="modal-buts box-body notop text-right"><a type="button" class="but c-blue" href="https://www.easyhub.top/">了解本站</a><a type="button" class="but c-green" href="https://www.easyhub.top/wp-admin/admin.php?page=zibll_options#tab=常用功能">立即设置</a></div> </div> </div> </div> <script type="text/javascript">window.onload = function(){ setTimeout(function () {$('#modal-system-notice').modal('show'); $.cookie("showed_system_notice","showed", {path: "/",expires: 1}); }, 500)};</script><script type="text/javascript" src="https://www.easyhub.top/wp-content/themes/zibll/js/libs/bootstrap.min.js?ver=8.1" id="bootstrap-js"></script> <script type="text/javascript" src="https://www.easyhub.top/wp-content/themes/zibll/js/loader.js?ver=8.1" id="_loader-js"></script> <script type="text/javascript" src="https://www.easyhub.top/wp-content/themes/zibll/inc/functions/bbs/assets/js/main.min.js?ver=8.1" id="forums-js"></script> <!--FOOTER_CODE_START--> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?0b2111cd7082eaa10f30353367f96b14"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <!--FOOTER_CODE_END--> <!--baidu_push_js--> <script type="text/javascript"> (function() { var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> <!--baidu_push_js--> <script type="text/javascript"> console.log("数据库查询:10次 | 页面生成耗时:1748.141ms"); </script> <script>window.w3tc_lazyload=1,window.lazyLoadOptions={elements_selector:".lazy",callback_loaded:function(t){var e;try{e=new CustomEvent("w3tc_lazyload_loaded",{detail:{e:t}})}catch(a){(e=document.createEvent("CustomEvent")).initCustomEvent("w3tc_lazyload_loaded",!1,!1,{e:t})}window.dispatchEvent(e)}}</script><script async src="https://www.easyhub.top/wp-content/plugins/w3-total-cache/pub/js/lazyload.min.js"></script></body> </html> <!-- Page supported by LiteSpeed Cache 7.0.0.1 on 2025-07-09 11:59:08 --> <!-- Performance optimized by W3 Total Cache. Learn more: https://www.boldgrid.com/w3-total-cache/ 使用页面缓存Disk: Enhanced 延迟加载 Served from: www.easyhub.top @ 2025-07-09 11:59:08 by W3 Total Cache -->