每一个学习前端的人对于前端三剑客《html css JavaScript》都不会陌生，可以说这是前端的世界，就没有前端解决不了的，而在前端的世界里就没有javascript实现不了的。
关于JavaScript有一句话：凡是可以用javascript来写的应用，最终都会用javascript，javascript可运行在所有的主要平台上，也可以运行在每一个主流操作的服务器上。现如今我们在网站写任何一个主要功能的时候都需要有懂够用JavaScript写前端的开发人员。
下面我们就来了解下这三门技术都有什么用？
1. HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。
2. CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
3. JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。
什么是HTML？
- HTML 指的是超文本标记语言 (Hyper Text Markup Language)
- HTML 不是一种编程语言，而是一种标记语言 (markup language)
- 标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
HTML标签
HTML 标签是由尖括号包围的关键词，比如
HTML 标签通常是成对出现的，标签对中的第一个标签是开始标签，第二个标签是结束标签
标签与标签之间是可以嵌套的，但先后顺序必须保持一致，如：
的前面。
HTML基本结构
一个HTML文件是有自己固定的结构，如下所示：
<html><head>...head><body>...body>html>
代码讲解：
1. 称为根标签，所有的网页标签都在中。
2.
标签用于定义文档的头部，它是所有头部元素的容器。头部元素有
、<script>、 </p>
<style>、<link>、 <meta>等标签，头部标签在之后会详细介绍。</p>
<p id="e081444e-3c27-4da2-93b9-0c020b42926b" style="font-weight:400;text-align:left;line-height:1.667;margin:20px 0px;font-size:18px;">3. 在<body>和</body>标签之间的内容是网页的主要内容，如</p>
<h1>、</p>
<p>、<a>、<img>等网页内容标签，在这里的标签中的内容会在浏览器中显示出来。</p>
<p id="0867e60a-0292-4a39-8ba7-aaac7b2c8ab5" style="font-weight:400;text-align:left;line-height:1.667;margin:20px 0px;font-size:18px;"><strong id="1447e3e9-bd21-4bdc-8a84-edd04eee9eae" style="font-size:18px;margin:20px 0px;font-weight:700;">在head中设置网页标题和字符集编码</strong></p>
<pre id="23eecdf3-20d6-4f68-91a2-265a9e80b9d2" style="font-size:18px;margin:20px 0px;text-align:left;"><code id="ae8f693d-5165-45cf-a8ce-923e3c8279f1" style="font-size:18px;margin:20px 0px;text-align:left;"><span id="eebf9895-534b-4a03-9778-9fae05861e1f" style="font-size:18px;margin:20px 0px;text-align:left;"><<span id="c3e332d8-50a0-4c03-9e9c-7b6cba3ea9f4" style="font-size:18px;margin:20px 0px;text-align:left;">head</span>></span><span id="d1c0894f-62a5-4994-8580-2c4caf64d9e6" style="font-size:18px;margin:20px 0px;text-align:left;"><<span id="9c6bd762-c876-43f9-95f1-67056b300319" style="font-size:18px;margin:20px 0px;text-align:left;">title</span>></span>这里是标题<span id="9dc4a803-eb1b-4375-ae7c-bcd607c53fba" style="font-size:18px;margin:20px 0px;text-align:left;"></<span id="648f5d64-3ed5-4a68-8d8b-f556da1e42cd" style="font-size:18px;margin:20px 0px;text-align:left;">title</span>></span><span id="64e3e857-a632-426a-99fd-2984b875d3cc" style="font-size:18px;margin:20px 0px;text-align:left;"><<span id="e516fb99-4ef9-4678-b5e8-a2f26766abde" style="font-size:18px;margin:20px 0px;text-align:left;">meta</span><span id="7e2da2f1-4a82-483a-84cb-cff3068f7d02" style="font-size:18px;margin:20px 0px;text-align:left;">charset</span>=<span id="28dad2b4-27fc-4c9d-a7bc-b324d127419a" style="font-size:18px;margin:20px 0px;text-align:left;">"utf-8"</span>/></span><span id="25aeb900-c76e-46a3-afff-1ab4dad4e8a1" style="font-size:18px;margin:20px 0px;text-align:left;"></<span id="9c6184f1-68a2-4da8-add2-df1eb03aea74" style="font-size:18px;margin:20px 0px;text-align:left;">head</span>></span></code></pre>
<h1 id="53737ec5-e197-449e-a887-a36ba1f4a512" style="font-size:20px;margin:20px 0px;font-weight:700;">什么是CSS (层叠样式表)？</h1>
<blockquote id="0ff594b1-d74a-4553-b2f9-854842df8059" style="font-size:18px;margin:20px 0px;text-align:left;">
<p id="3ab2dad7-2316-4668-8cb3-2620cd2ab5e9" style="font-weight:400;text-align:left;line-height:1.667;margin:20px 0px;font-size:18px;">CSS：全名Cascading Style Sheet 又被称为层叠样式表</p>
</blockquote>
<p id="624e79ef-8956-4051-a8b5-1c116a8c80b1" style="font-weight:400;text-align:left;line-height:1.667;margin:20px 0px;font-size:18px;">是一组样式设置的规则，用于控制页面的外观样式</p>
<h1 id="1590e660-2502-4104-b8f8-5d02dc2b7585" style="font-size:20px;margin:20px 0px;font-weight:700;">为什么使用CSS？</h1>
<ul id="1459abc1-71e5-4c41-9b1a-a4144a5089a1" style="font-size:18px;margin:20px 0px;text-align:left;">
<li id="5e62ed6f-65fd-41bd-8d33-6da0e1019207" style="font-size:18px;margin:20px 0px;text-align:left;">在制作网页时可以实现内容与样式的分离，便于团队开发</li>
<li id="d8b027c7-5c41-4681-acf6-cbec0edb2031" style="font-size:18px;margin:20px 0px;text-align:left;">样式复用，减少代码量，便于网站的后期维护</li>
<li id="13b153c3-ef19-442e-a94d-449d23f62406" style="font-size:18px;margin:20px 0px;text-align:left;">页面样式的精确控制，让页面更精美</li>
</ul>
<h1 id="57d68097-9f38-43c6-9216-58ce2e616e00" style="font-size:20px;margin:20px 0px;font-weight:700;">CSS的作用</h1>
<ul id="96d85c9a-8962-4ead-8976-9929e3253938" style="font-size:18px;margin:20px 0px;text-align:left;">
<li id="afc83a35-a0c1-4518-bacd-8481775db649" style="font-size:18px;margin:20px 0px;text-align:left;">页面外观美化</li>
<li id="6267c620-5efa-4f15-bd9b-9fcccdb1dea8" style="font-size:18px;margin:20px 0px;text-align:left;">布局和定位</li>
</ul>
<h1 id="13bee903-a5df-4a62-9416-51e5db6924ec" style="font-size:20px;margin:20px 0px;font-weight:700;">CSS的基本结构</h1>
<p id="29bcedf7-3c0d-4ce9-8e18-131eb76595fa" style="font-weight:400;text-align:left;line-height:1.667;margin:20px 0px;font-size:18px;"><span id="87d7e749-9583-44ea-8635-7a8a13e1e5dc" style="font-size:18px;margin:20px 0px;text-align:left;">在style标签中定义你需要的样式</span></p>
<pre id="51c0b71c-b1bc-48e5-9052-3854a0cc9eca" style="font-size:18px;margin:20px 0px;text-align:left;"><code id="eb141deb-182b-423e-a84b-ec34b84dfe13" style="font-size:18px;margin:20px 0px;text-align:left;"><span id="7b0a391b-5c14-4ad0-a7fb-5fbc5dec851f" style="font-size:18px;margin:20px 0px;text-align:left;"><<span id="347637b4-2d42-40c6-b392-62b220348df7" style="font-size:18px;margin:20px 0px;text-align:left;">style</span><span id="a6c4e155-8e28-4755-a292-a38a782c73ef" style="font-size:18px;margin:20px 0px;text-align:left;">type</span>=<span id="6cef7643-79b5-4547-8b7d-c90be644e342" style="font-size:18px;margin:20px 0px;text-align:left;">"text/css"</span>></span>样式<span id="582d317e-bfd6-4546-8002-c513ff25a8ad" style="font-size:18px;margin:20px 0px;text-align:left;"></<span id="387bd723-399d-4a48-930d-da4cac8c2cbe" style="font-size:18px;margin:20px 0px;text-align:left;">style</span>></span></code></pre>
<h1 id="40229dc7-ff11-4018-b94c-539f979d6c35" style="font-size:20px;margin:20px 0px;font-weight:700;">JavaScript是什么？</h1>
<p id="6566a7d7-3927-4fd6-bab1-4574fd017250" style="font-weight:400;text-align:left;line-height:1.667;margin:20px 0px;font-size:18px;">JavaScript(LiveScript)一种解释性脚本语言，是一种动态类型、弱类型、基于原型继承的语言，内置支持类型。它的解释器被称为JavaScript引<span id="c5cdade0-da2d-46a2-9d95-11e04e904091" style="font-size:18px;margin:20px 0px;text-align:left;">擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。</span></p>
<h1 id="9f0ebea5-957c-4b84-ac4a-67c436f1024d" style="font-size:20px;margin:20px 0px;font-weight:700;">JavaScript的作用</h1>
<ul id="9370957c-f8bf-4a0d-811d-dfd553069505" style="font-size:18px;margin:20px 0px;text-align:left;">
<li id="6bca7c5c-3029-40b7-b1cc-7f0bcc8a8ba5" style="font-size:18px;margin:20px 0px;text-align:left;">JavaScript 能够改变 HTML 内容</li>
<li id="87e67956-7ade-4112-b183-77c19a68b0d1" style="font-size:18px;margin:20px 0px;text-align:left;">JavaScript 能够改变 HTML 属性</li>
<li id="0ede8306-6f63-429a-a1ac-55a84db7a0ed" style="font-size:18px;margin:20px 0px;text-align:left;">JavaScript 能够改变 HTML 样式 (CSS)</li>
<li id="1a203ca8-4ed9-422f-882b-c7da24c5880f" style="font-size:18px;margin:20px 0px;text-align:left;">JavaScript 能够隐藏 HTML 元素</li>
<li id="ea6a045f-e6e6-4743-a5d6-d20a5bffc02e" style="font-size:18px;margin:20px 0px;text-align:left;">JavaScript 能够显示 HTML 元素</li>
</ul>
<h1 id="9a4e3916-57b4-4703-a099-16bdac2b2317" style="font-size:20px;margin:20px 0px;font-weight:700;">web前端全套学习资料：</h1>
<blockquote id="e17d218e-93db-4d1c-9e9d-3e155a3814d1" style="font-size:18px;margin:20px 0px;text-align:left;">
<p id="e9d19b6e-b93c-4911-901e-2c62a1a1a376" style="font-weight:400;text-align:left;line-height:1.667;margin:20px 0px;font-size:18px;">http://www.bjpowernode.com/?toutiaoweb.chai</p>
</blockquote>
<p></body></html></p>
</div>
<div id="pay-single-box"></div>
<div class="ripro_gg_wrap pc"><fieldset><legend>2021服务器优惠</legend><p><strong><span style="color: #ff6600;">阿里云：</span></strong><a href="https://www.aliyun.com/daily-act/ecs/activity_selection?userCode=yl9oi3of" target="_blank" title="阿里云服务器优惠">2核2G5M服务器60元/年、2核4G 200元/年、4核8G服务器365元/年 更多...</a><br>
<span style="color: #006eff;">腾讯云：</span><a href="https://cloud.tencent.com/act/cps/redirect?redirect=1077&cps_key=a9dd15029bda048463f3605da38c5b6f&from=console" target="_blank" title="腾讯云服务器优惠">云产品限时秒杀，爆款1核2G云服务器，首年74元 更多...</a></p>
<div class="clear"></div></fieldset>
</div><div class="article-footer">
<div class="author-box">
<div class="author-image">
<img alt='runsly' data-src='https://www.9502669.com/wp-content/uploads/avatar/avatar-1.jpg' class='lazyload avatar avatar-140 photo gravatar' height='140' width='140' /> </div>
<div class="author-info">
<h4 class="author-name">
<a href="javascript:;">runsly</a>
<span class="label label-warning"><i class="fa fa-diamond"></i> 钻石</span> </h4>
</div>
</div>
</div> </div>
</div>
</article>
<div class="entry-navigation">
<nav class="article-nav">
<span class="article-nav-prev">上一篇<br><a href="https://www.9502669.com/91065.html" rel="prev">初学者必修的知识——HTML简介</a></span>
<span class="article-nav-next">下一篇<br><a href="https://www.9502669.com/91069.html" rel="next">什么是html</a></span>
</nav>
</div>
<!-- # 标准网格模式... -->
<div class="related-posts-grid">
<h4 class="u-border-title">相关推荐</h4>
<div class="row">
<div class="col-6 col-sm-3 col-md-3 mt-10 mb-10">
<article class="post">
<div class="entry-media">
<div class="placeholder" style="padding-bottom: 66.666666666667%;">
<a href="https://www.9502669.com/91135.html">
<img class="lazyload" data-src="https://p4.itc.cn/q_70/images03/20211111/fefc02631244461f81d100251af2423f.jpeg" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="如何使用HTML向你的网站添加脚本">
</a>
</div>
<div class="entry-star"><a href="javascript:;" title="收藏文章" etap="star" data-postid="91135" class="ripro-star"><i class="fa fa-star-o"></i></a></div> </div>
<div class="entry-wrapper">
<header class="entry-header">
<h4 class="entry-title"><a href="https://www.9502669.com/91135.html" title="如何使用HTML向你的网站添加脚本" rel="bookmark">如何使用HTML向你的网站添加脚本</a></h4> </header> </div>
</article>
</div>
<div class="col-6 col-sm-3 col-md-3 mt-10 mb-10">
<article class="post">
<div class="entry-media">
<div class="placeholder" style="padding-bottom: 66.666666666667%;">
<a href="https://www.9502669.com/92635.html">
<img class="lazyload" data-src="https://src.9502669.com/wp-content/uploads/2022/04/1651025845-0bcc568e00041a9.png" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="HTML基础知识(三)HTML标签知识">
</a>
</div>
<div class="entry-star"><a href="javascript:;" title="收藏文章" etap="star" data-postid="92635" class="ripro-star"><i class="fa fa-star-o"></i></a></div> </div>
<div class="entry-wrapper">
<header class="entry-header">
<h4 class="entry-title"><a href="https://www.9502669.com/92635.html" title="HTML基础知识(三)HTML标签知识" rel="bookmark">HTML基础知识(三)HTML标签知识</a></h4> </header> </div>
</article>
</div>
<div class="col-6 col-sm-3 col-md-3 mt-10 mb-10">
<article class="post">
<div class="entry-media">
<div class="placeholder" style="padding-bottom: 66.666666666667%;">
<a href="https://www.9502669.com/90952.html">
<img class="lazyload" data-src="https://pic2.zhimg.com/v2-39b69b8cb637dfacefae22047b964f39_s.jpg?source=12a79843" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="CSS现状和如何学习">
</a>
</div>
<div class="entry-star"><a href="javascript:;" title="收藏文章" etap="star" data-postid="90952" class="ripro-star"><i class="fa fa-star-o"></i></a></div> </div>
<div class="entry-wrapper">
<header class="entry-header">
<h4 class="entry-title"><a href="https://www.9502669.com/90952.html" title="CSS现状和如何学习" rel="bookmark">CSS现状和如何学习</a></h4> </header> </div>
</article>
</div>
<div class="col-6 col-sm-3 col-md-3 mt-10 mb-10">
<article class="post">
<div class="entry-media">
<div class="placeholder" style="padding-bottom: 66.666666666667%;">
<a href="https://www.9502669.com/91710.html">
<img class="lazyload" data-src="https://src.9502669.com/wp-content/uploads/2022/04/1650243072-bcdeddf053c3d80.jpeg" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="认识 HTML">
</a>
</div>
<div class="entry-star"><a href="javascript:;" title="收藏文章" etap="star" data-postid="91710" class="ripro-star"><i class="fa fa-star-o"></i></a></div> </div>
<div class="entry-wrapper">
<header class="entry-header">
<h4 class="entry-title"><a href="https://www.9502669.com/91710.html" title="认识 HTML" rel="bookmark">认识 HTML</a></h4> </header> </div>
</article>
</div>
</div>
</div>
</main>
</div>
</div>
<div class="sidebar-column col-lg-3">
<aside class="widget-area">
<div id="search-2" class="widget widget_search"><form method="get" class="search-form inline" action="https://www.9502669.com/">
<input type="search" class="search-field inline-field" placeholder="输入关键词，回车..." autocomplete="off" value="" name="s" required="required">
<button type="submit" class="search-submit"><i class="mdi mdi-magnify"></i></button>
</form></div><div id="cao_widget_post-2" class="widget cao-widget-posts"><h5 class="widget-title">最新动态</h5><div class="posts"><div class="left"> <div class="entry-media">
<div class="placeholder" style="padding-bottom: 66.666666666667%;">
<a href="https://www.9502669.com/126078.html">
<img class="lazyload" data-src="https://src.9502669.com/wp-content/uploads/2023/12/3dd57195710dd1cf6358891150dbc9ef.jpg" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="从零开始学习HTML编程的简单网页代码">
</a>
</div>
<div class="entry-star"><a href="javascript:;" title="收藏文章" etap="star" data-postid="126078" class="ripro-star"><i class="fa fa-star-o"></i></a></div> </div>
<a href="https://www.9502669.com/126078.html" rel="bookmark" title="从零开始学习HTML编程的简单网页代码">从零开始学习HTML编程的简单网页代码</a></div><div class="left"> <div class="entry-media">
<div class="placeholder" style="padding-bottom: 66.666666666667%;">
<a href="https://www.9502669.com/126076.html">
<img class="lazyload" data-src="https://src.9502669.com/wp-content/uploads/2023/12/3dd57195710dd1cf6358891150dbc9ef.jpg" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="CSS3D立体动画效果的实现方法和技巧">
</a>
</div>
<div class="entry-star"><a href="javascript:;" title="收藏文章" etap="star" data-postid="126076" class="ripro-star"><i class="fa fa-star-o"></i></a></div> </div>
<a href="https://www.9502669.com/126076.html" rel="bookmark" title="CSS3D立体动画效果的实现方法和技巧">CSS3D立体动画效果的实现方法和技巧</a></div><div class="left"> <div class="entry-media">
<div class="placeholder" style="padding-bottom: 66.666666666667%;">
<a href="https://www.9502669.com/126073.html">
<img class="lazyload" data-src="https://src.9502669.com/wp-content/uploads/2023/12/3dd57195710dd1cf6358891150dbc9ef.jpg" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="HTML中如何编写点击显示文字的代码片段">
</a>
</div>
<div class="entry-star"><a href="javascript:;" title="收藏文章" etap="star" data-postid="126073" class="ripro-star"><i class="fa fa-star-o"></i></a></div> </div>
<a href="https://www.9502669.com/126073.html" rel="bookmark" title="HTML中如何编写点击显示文字的代码片段">HTML中如何编写点击显示文字的代码片段</a></div><div class="left"> <div class="entry-media">
<div class="placeholder" style="padding-bottom: 66.666666666667%;">
<a href="https://www.9502669.com/126072.html">
<img class="lazyload" data-src="https://src.9502669.com/wp-content/uploads/2020/05/1590650547-b351bb9b0af6e4f.png" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="css样式控制网页设置">
</a>
</div>
<div class="entry-star"><a href="javascript:;" title="收藏文章" etap="star" data-postid="126072" class="ripro-star"><i class="fa fa-star-o"></i></a></div> </div>
<a href="https://www.9502669.com/126072.html" rel="bookmark" title="css样式控制网页设置">css样式控制网页设置</a></div><div class="left"> <div class="entry-media">
<div class="placeholder" style="padding-bottom: 66.666666666667%;">
<a href="https://www.9502669.com/126071.html">
<img class="lazyload" data-src="https://src.9502669.com/wp-content/uploads/2020/05/1590650547-b351bb9b0af6e4f.png" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="css样式滤镜在哪找">
</a>
</div>
<div class="entry-star"><a href="javascript:;" title="收藏文章" etap="star" data-postid="126071" class="ripro-star"><i class="fa fa-star-o"></i></a></div> </div>
<a href="https://www.9502669.com/126071.html" rel="bookmark" title="css样式滤镜在哪找">css样式滤镜在哪找</a></div><div class="left"> <div class="entry-media">
<div class="placeholder" style="padding-bottom: 66.666666666667%;">
<a href="https://www.9502669.com/126070.html">
<img class="lazyload" data-src="https://src.9502669.com/wp-content/uploads/2020/05/1590650547-b351bb9b0af6e4f.png" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="css样式模板 表格内线">
</a>
</div>
<div class="entry-star"><a href="javascript:;" title="收藏文章" etap="star" data-postid="126070" class="ripro-star"><i class="fa fa-star-o"></i></a></div> </div>
<a href="https://www.9502669.com/126070.html" rel="bookmark" title="css样式模板 表格内线">css样式模板 表格内线</a></div></div></div><div id="tag_cloud-2" class="widget widget_tag_cloud"><h5 class="widget-title">标签</h5><div class="tagcloud"><a href="https://www.9502669.com/tag/cms%e7%b3%bb%e7%bb%9f" class="tag-cloud-link tag-link-4616 tag-link-position-1" style="font-size: 11.305555555556pt;" aria-label="cms系统 (128个项目)">cms系统</a>
<a href="https://www.9502669.com/tag/css" class="tag-cloud-link tag-link-3860 tag-link-position-2" style="font-size: 13.541666666667pt;" aria-label="css (368个项目)">css</a>
<a href="https://www.9502669.com/tag/css3" class="tag-cloud-link tag-link-3864 tag-link-position-3" style="font-size: 8.7291666666667pt;" aria-label="css3 (37个项目)">css3</a>
<a href="https://www.9502669.com/tag/css%e7%9f%a5%e8%af%86" class="tag-cloud-link tag-link-955 tag-link-position-4" style="font-size: 8.7291666666667pt;" aria-label="css知识 (37个项目)">css知识</a>
<a href="https://www.9502669.com/tag/html" class="tag-cloud-link tag-link-1390 tag-link-position-5" style="font-size: 12.8125pt;" aria-label="HTML (263个项目)">HTML</a>
<a href="https://www.9502669.com/tag/html5" class="tag-cloud-link tag-link-1072 tag-link-position-6" style="font-size: 9.0208333333333pt;" aria-label="HTML5 (43个项目)">HTML5</a>
<a href="https://www.9502669.com/tag/it%e6%95%99%e7%a8%8b%e5%a4%a7%e5%85%a8" class="tag-cloud-link tag-link-4445 tag-link-position-7" style="font-size: 17.479166666667pt;" aria-label="IT教程大全 (2,417个项目)">IT教程大全</a>
<a href="https://www.9502669.com/tag/it%e9%97%ae%e7%ad%94" class="tag-cloud-link tag-link-4620 tag-link-position-8" style="font-size: 10.673611111111pt;" aria-label="IT问答 (94个项目)">IT问答</a>
<a href="https://www.9502669.com/tag/java" class="tag-cloud-link tag-link-1017 tag-link-position-9" style="font-size: 9.9444444444444pt;" aria-label="java (67个项目)">java</a>
<a href="https://www.9502669.com/tag/javascript" class="tag-cloud-link tag-link-3854 tag-link-position-10" style="font-size: 13.930555555556pt;" aria-label="JavaScript (442个项目)">JavaScript</a>
<a href="https://www.9502669.com/tag/jquery" class="tag-cloud-link tag-link-689 tag-link-position-11" style="font-size: 10.479166666667pt;" aria-label="jQuery (87个项目)">jQuery</a>
<a href="https://www.9502669.com/tag/nodejs" class="tag-cloud-link tag-link-3952 tag-link-position-12" style="font-size: 9.5069444444444pt;" aria-label="nodejs (54个项目)">nodejs</a>
<a href="https://www.9502669.com/tag/ps" class="tag-cloud-link tag-link-1126 tag-link-position-13" style="font-size: 12.277777777778pt;" aria-label="PS (201个项目)">PS</a>
<a href="https://www.9502669.com/tag/ps%e6%8a%80%e5%b7%a7" class="tag-cloud-link tag-link-1087 tag-link-position-14" style="font-size: 12.375pt;" aria-label="ps技巧 (214个项目)">ps技巧</a>
<a href="https://www.9502669.com/tag/typecho" class="tag-cloud-link tag-link-4425 tag-link-position-15" style="font-size: 10.284722222222pt;" aria-label="Typecho (79个项目)">Typecho</a>
<a href="https://www.9502669.com/tag/vue" class="tag-cloud-link tag-link-3950 tag-link-position-16" style="font-size: 8.1458333333333pt;" aria-label="vue (28个项目)">vue</a>
<a href="https://www.9502669.com/tag/vuejs" class="tag-cloud-link tag-link-3953 tag-link-position-17" style="font-size: 8.7291666666667pt;" aria-label="vuejs (37个项目)">vuejs</a>
<a href="https://www.9502669.com/tag/web%e5%bc%80%e5%8f%91" class="tag-cloud-link tag-link-89 tag-link-position-18" style="font-size: 10.479166666667pt;" aria-label="Web开发 (87个项目)">Web开发</a>
<a href="https://www.9502669.com/tag/xunruicms" class="tag-cloud-link tag-link-4741 tag-link-position-19" style="font-size: 10.381944444444pt;" aria-label="XunRuiCMS (82个项目)">XunRuiCMS</a>
<a href="https://www.9502669.com/tag/%e5%88%9b%e6%84%8f%e6%96%87%e6%a1%88" class="tag-cloud-link tag-link-4457 tag-link-position-20" style="font-size: 8.2916666666667pt;" aria-label="创意文案 (30个项目)">创意文案</a>
<a href="https://www.9502669.com/tag/%e5%9b%be%e6%a1%88%e7%ac%a6%e5%8f%b7%e5%a4%a7%e5%85%a8" class="tag-cloud-link tag-link-1012 tag-link-position-21" style="font-size: 8.2916666666667pt;" aria-label="图案符号大全 (30个项目)">图案符号大全</a>
<a href="https://www.9502669.com/tag/%e5%ae%89%e5%8d%93" class="tag-cloud-link tag-link-1018 tag-link-position-22" style="font-size: 9.75pt;" aria-label="安卓 (60个项目)">安卓</a>
<a href="https://www.9502669.com/tag/%e5%b8%9d%e5%9b%bd" class="tag-cloud-link tag-link-4753 tag-link-position-23" style="font-size: 22pt;" aria-label="帝国 (20,322个项目)">帝国</a>
<a href="https://www.9502669.com/tag/%e5%b8%9d%e5%9b%bdcms%e6%95%99%e7%a8%8b" class="tag-cloud-link tag-link-662 tag-link-position-24" style="font-size: 12.034722222222pt;" aria-label="帝国cms教程 (181个项目)">帝国cms教程</a>
<a href="https://www.9502669.com/tag/%e5%bc%80%e5%9c%ba%e7%99%bd" class="tag-cloud-link tag-link-990 tag-link-position-25" style="font-size: 8.6319444444444pt;" aria-label="开场白 (35个项目)">开场白</a>
<a href="https://www.9502669.com/tag/%e6%8a%80%e6%9c%af%e6%80%bb%e7%bb%93" class="tag-cloud-link tag-link-1231 tag-link-position-26" style="font-size: 12.131944444444pt;" aria-label="技术总结 (188个项目)">技术总结</a>
<a href="https://www.9502669.com/tag/%e6%8a%80%e6%9c%af%e7%ac%94%e8%ae%b0" class="tag-cloud-link tag-link-1232 tag-link-position-27" style="font-size: 12.131944444444pt;" aria-label="技术笔记 (188个项目)">技术笔记</a>
<a href="https://www.9502669.com/tag/%e6%b7%98%e5%ae%9d%e7%be%8e%e5%b7%a5" class="tag-cloud-link tag-link-960 tag-link-position-28" style="font-size: 8.5347222222222pt;" aria-label="淘宝美工 (34个项目)">淘宝美工</a>
<a href="https://www.9502669.com/tag/%e6%ba%90%e7%a0%81%e6%a8%a1%e6%9d%bf" class="tag-cloud-link tag-link-1145 tag-link-position-29" style="font-size: 10.430555555556pt;" aria-label="源码模板 (84个项目)">源码模板</a>
<a href="https://www.9502669.com/tag/%e6%bc%94%e8%ae%b2%e5%bc%80%e5%9c%ba%e7%99%bd" class="tag-cloud-link tag-link-991 tag-link-position-30" style="font-size: 8.6319444444444pt;" aria-label="演讲开场白 (35个项目)">演讲开场白</a>
<a href="https://www.9502669.com/tag/%e7%89%b9%e6%ae%8a%e7%ac%a6%e5%8f%b7" class="tag-cloud-link tag-link-992 tag-link-position-31" style="font-size: 9.1180555555556pt;" aria-label="特殊符号 (45个项目)">特殊符号</a>
<a href="https://www.9502669.com/tag/%e7%9b%b8%e5%85%b3%e6%a0%87%e7%ad%be%ef%bc%9acss" class="tag-cloud-link tag-link-1468 tag-link-position-32" style="font-size: 14.5625pt;" aria-label="相关标签：css (595个项目)">相关标签：css</a>
<a href="https://www.9502669.com/tag/%e7%9b%b8%e5%85%b3%e6%a0%87%e7%ad%be%ef%bc%9ahtml" class="tag-cloud-link tag-link-1522 tag-link-position-33" style="font-size: 12.8125pt;" aria-label="相关标签：html (264个项目)">相关标签：html</a>
<a href="https://www.9502669.com/tag/%e7%9b%b8%e5%85%b3%e6%a0%87%e7%ad%be%ef%bc%9ajavascript" class="tag-cloud-link tag-link-1628 tag-link-position-34" style="font-size: 12.958333333333pt;" aria-label="相关标签：javascript (283个项目)">相关标签：javascript</a>
<a href="https://www.9502669.com/tag/%e7%9b%b8%e5%85%b3%e6%a0%87%e7%ad%be%ef%bc%9ajquery" class="tag-cloud-link tag-link-1896 tag-link-position-35" style="font-size: 10.090277777778pt;" aria-label="相关标签：jquery (71个项目)">相关标签：jquery</a>
<a href="https://www.9502669.com/tag/%e7%9b%b8%e5%85%b3%e6%a0%87%e7%ad%be%ef%bc%9ajs" class="tag-cloud-link tag-link-2374 tag-link-position-36" style="font-size: 8pt;" aria-label="相关标签：js (26个项目)">相关标签：js</a>
<a href="https://www.9502669.com/tag/%e7%9f%a2%e9%87%8f%e5%9b%be" class="tag-cloud-link tag-link-37 tag-link-position-37" style="font-size: 8.4861111111111pt;" aria-label="矢量图 (33个项目)">矢量图</a>
<a href="https://www.9502669.com/tag/%e7%ac%a6%e5%8f%b7" class="tag-cloud-link tag-link-993 tag-link-position-38" style="font-size: 11.791666666667pt;" aria-label="符号 (162个项目)">符号</a>
<a href="https://www.9502669.com/tag/%e7%ac%a6%e5%8f%b7%e5%9b%be%e6%a1%88" class="tag-cloud-link tag-link-1011 tag-link-position-39" style="font-size: 8.2916666666667pt;" aria-label="符号图案 (30个项目)">符号图案</a>
<a href="https://www.9502669.com/tag/%e7%ac%a6%e5%8f%b7%e5%a4%a7%e5%85%a8" class="tag-cloud-link tag-link-986 tag-link-position-40" style="font-size: 9.1666666666667pt;" aria-label="符号大全 (46个项目)">符号大全</a>
<a href="https://www.9502669.com/tag/%e7%bb%87%e6%a2%a6%e6%95%99%e7%a8%8b" class="tag-cloud-link tag-link-560 tag-link-position-41" style="font-size: 11.743055555556pt;" aria-label="织梦教程 (157个项目)">织梦教程</a>
<a href="https://www.9502669.com/tag/%e7%be%8e%e5%b7%a5%e7%9f%a5%e8%af%86" class="tag-cloud-link tag-link-1118 tag-link-position-42" style="font-size: 8.3888888888889pt;" aria-label="美工知识 (31个项目)">美工知识</a>
<a href="https://www.9502669.com/tag/%e7%be%8e%e5%b7%a5%e8%ae%be%e8%ae%a1" class="tag-cloud-link tag-link-1117 tag-link-position-43" style="font-size: 8.3888888888889pt;" aria-label="美工设计 (31个项目)">美工设计</a>
<a href="https://www.9502669.com/tag/%e8%af%ad%e8%a8%80%e7%ac%a6%e5%8f%b7" class="tag-cloud-link tag-link-1014 tag-link-position-44" style="font-size: 8.3888888888889pt;" aria-label="语言符号 (31个项目)">语言符号</a>
<a href="https://www.9502669.com/tag/%e8%af%ad%e8%a8%80%e7%ac%a6%e5%8f%b7%e5%a4%a7%e5%85%a8" class="tag-cloud-link tag-link-1015 tag-link-position-45" style="font-size: 8.3888888888889pt;" aria-label="语言符号大全 (31个项目)">语言符号大全</a></div>
</div></aside> </div>
</div>
</div>
</div><!-- end sitecoent -->
<footer class="site-footer">
<div class="container">
<div class="footer-widget">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-3 widget--about">
<div class="widget--content">
<div class="footer--logo mb-20">
<img class="tap-logo" src="https://src.9502669.com/wp-content/uploads/2020/05/1588479904-ec4a4c7bdaac2a6.png" data-dark="https://src.9502669.com/wp-content/uploads/2020/05/1588479904-ec4a4c7bdaac2a6.png" alt="美工之家">
</div>
<p class="mb-10">加入美工之家发布作品/付费下载/余额管理/积分换码，大家一起技术交流，共同进步。美工素材基地9502669.com</p>
</div>
</div>
<!-- .col-md-2 end -->
<div class="col-xs-12 col-sm-3 col-md-2 col-md-offset-1 widget--links">
<div class="widget--title">
<h5>本站导航</h5>
</div>
<div class="widget--content">
<ul class="list-unstyled mb-0">
<li><a href="https://www.9502669.com/jingpin">精品资源</a></li><li><a href="https://www.9502669.com/sucai">美工素材</a></li><li><a href="https://www.9502669.com/zuopin">个人作品</a></li> </ul>
</div>
</div>
<!-- .col-md-2 end -->
<div class="col-xs-12 col-sm-3 col-md-2 widget--links">
<div class="widget--title">
<h5>友情链接</h5>
</div>
<div class="widget--content">
<ul class="list-unstyled mb-0">
<li><a href="https://www.99zt.cn/">高端源码</a></li><li><a href="https://www.52fw.cn">免费范文</a></li><li><a href="https://www.443.net.cn">免费外链</a></li> </ul>
</div>
</div>
<!-- .col-md-2 end -->
<div class="col-xs-12 col-sm-12 col-md-4 widget--newsletter">
<div class="widget--title">
<h5>快速搜索</h5>
</div>
<div class="widget--content">
<form class="newsletter--form mb-30" action="https://www.9502669.com/" method="get">
<input type="text" class="form-control" name="s" placeholder="关键词">
<button type="submit"><i class="fa fa-arrow-right"></i></button>
</form>
<h6>美工之家-美工素材交流分享首选平台，设计师互相学习区。</h6>
</div>
</div>
</div>
</div> <div class="site-info">
© 2020 9502669.com All rights reserved. <a href="https://www.9502669.com/">美工之家</a> 版权所有
<a href="https://beian.miit.gov.cn" target="_blank" class="text" rel="noreferrer nofollow"> 鲁ICP备18023744号-2</a>
<br>
</div>
</div>
</footer>
<div class="rollbar">
<div class="rollbar-item tap-dark" etap="tap-dark" title="夜间模式"><i class="mdi mdi-brightness-4"></i></div>
<div class="rollbar-item tap-click-qiandao"><a class="click-qiandao" title="签到" href="javascript:;"><i class="fa fa-calendar-check-o"></i></a></div>
<div class="rollbar-item tap-pencil"><a target="_blank" title="投稿赚钱" href="https://www.9502669.com/wp-admin/post-new.php"><i class="fa fa-pencil"></i></a></div>
<div class="rollbar-item tap-qq" etap="tap-qq"><a target="_blank" title="QQ咨询" href="http://wpa.qq.com/msgrd?v=3&uin=9502669&site=qq&menu=yes"><i class="fa fa-qq"></i></a></div>
<div class="rollbar-item tap-blog-style" etap="tap-blog-style" data-id="0" title="博客模式"><i class="fa fa-list"></i></div>
<div class="rollbar-item" etap="to_full" title="全屏页面"><i class="fa fa-arrows-alt"></i></div>
<div class="rollbar-item" etap="to_top" title="返回顶部"><i class="fa fa-angle-up"></i></div>
</div>
<div class="dimmer"></div>
<div id="popup-signup" class="popup-signup fade" style="display: none;">
<div class="register-login-modal" role="document">
<div class="modal-content">
<div class="modal-body">
<img class="popup-logo" src="https://src.9502669.com/wp-content/uploads/2021/07/1626753463-96d6f2e7e1f705a.png" data-dark="https://src.9502669.com/wp-content/uploads/2021/07/1626753463-96d6f2e7e1f705a.png" alt="美工之家">
<!-- Nav tabs -->
<ul class="nav nav-tabs">
<li class="active"><a href="#login" data-toggle="login">登录</a>
</li>
<li><a href="#signup" data-toggle="signup">注册</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane fade in active" id="login">
<div class="signup-form-container text-center">
<form class="mb-0">
<div class="open-oauth text-center"><a href="https://www.9502669.com/oauth/qq?rurl=https://www.9502669.com/91067.html" class="btn btn-qq"><i class="fa fa-qq"></i></a></div><div class="or-text"><span>or</span></div> <a href="#" class="forget-password">仅开放社交账号登录</a>
</form>
<!-- form end -->
</div>
<!-- .signup-form end -->
</div>
<div class="tab-pane fade in" id="signup">
<form class="mb-0">
<div class="open-oauth text-center"><a href="https://www.9502669.com/oauth/qq?rurl=https://www.9502669.com/91067.html" class="btn btn-qq"><i class="fa fa-qq"></i></a></div><div class="or-text"><span>or</span></div> <a href="#" class="forget-password">仅开放社交账号注册</a>
</form>
<!-- form end -->
</div>
</div>
<a target="_blank" href="https://www.9502669.com/wp-login.php?action=lostpassword" class="rest-password">忘记密码？</a>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
</div>
<div class="off-canvas">
<div class="canvas-close"><i class="mdi mdi-close"></i></div>
<div class="logo-wrapper">
<a href="https://www.9502669.com/">
<img class="logo regular" src="https://src.9502669.com/wp-content/uploads/2021/07/1626753463-96d6f2e7e1f705a.png" alt="美工之家">
</a>
</div>
<div class="mobile-menu hidden-lg hidden-xl"></div>
<aside class="widget-area">
</aside>
</div>
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?6e3e432e6b34baedf97226f570ecbb67";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
<script type="text/javascript">
((function() {
var callbacks = [],
timeLimit = 50,
open = false;
setInterval(loop, 1);
return {
addListener: function(fn) {
callbacks.push(fn);
},
cancleListenr: function(fn) {
callbacks = callbacks.filter(function(v) {
return v !== fn;
});
}
}
function loop() {
var startTime = new Date();
debugger;
if (new Date() - startTime > timeLimit) {
if (!open) {
callbacks.forEach(function(fn) {
fn.call(null);
});
}
open = true;
window.stop();
alert('不要扒我了');
window.location.reload();
} else {
open = false;
}
}
})()).addListener(function() {
window.location.reload();
});
</script>
<script type='text/javascript' src='https://www.9502669.com/wp-content/themes/ripro/assets/js/plugins.js?ver=8.0.0' id='plugins-js'></script>
<script type='text/javascript' id='app-js-extra'>
/* <![CDATA[ */
var caozhuti = {"site_name":"\u7f8e\u5de5\u4e4b\u5bb6","home_url":"https:\/\/www.9502669.com","ajaxurl":"https:\/\/www.9502669.com\/wp-admin\/admin-ajax.php","is_singular":"1","tencent_captcha":{"is":"","appid":""},"infinite_load":"\u52a0\u8f7d\u66f4\u591a","infinite_loading":"<i class=\"fa fa-spinner fa-spin\"><\/i> \u52a0\u8f7d\u4e2d...","site_notice":{"is":"0","color":"#1e73be","html":"<div class=\"notify-content\"><h3>\u7f8e\u5de5\u4e4b\u5bb6\u6700\u65b0\u516c\u544a<\/h3><div>\u7f8e\u5de5\u3001\u8bbe\u8ba1\u5e08\u805a\u96c6\u5730\u3002\u8d44\u6e90\u4ea4\u6362\uff0c\u53d1\u5e03\u81ea\u5df1\u7684\u6536\u85cf\u6362\u53d6\u4ed6\u4eba\u7684\u6536\u85cf\uff0c\u540c\u65f6\u5356\u51fa\u53ef\u4ee5\u6d3b\u52a8\u6536\u5165\u54e6\uff01QQ\u4e00\u952e\u767b\u5f55\uff0c\u5feb\u6765\u5c1d\u8bd5 \u4e00\u4e0b\u5427<\/div><\/div>"},"pay_type_html":{"html":"<div class=\"pay-button-box\"><div class=\"pay-item\" id=\"alipay\" data-type=\"6\"><i class=\"alipay\"><\/i><span>\u652f\u4ed8\u5b9d<\/span><\/div><\/div><p style=\"font-size: 13px; padding: 0; margin: 0;\">\u5f53\u524d\u4e3a\u6e38\u5ba2\u8d2d\u4e70\u6a21\u5f0f<\/p>","alipay":6,"weixinpay":0}};
/* ]]> */
</script>
<script type='text/javascript' src='https://www.9502669.com/wp-content/themes/ripro/assets/js/app.js?ver=8.0.0' id='app-js'></script>
<script type='text/javascript' src='https://www.9502669.com/wp-content/themes/ripro/assets/js/plugins/jquery.fancybox.min.js?ver=8.0.0' id='fancybox-js'></script>
<script type='text/javascript' src='https://www.9502669.com/wp-includes/js/comment-reply.min.js?ver=5.7.2' id='comment-reply-js'></script>
<script type='text/javascript' id='QAPress-js-js-extra'>
/* <![CDATA[ */
var QAPress_js = {"ajaxurl":"https:\/\/www.9502669.com\/wp-admin\/admin-ajax.php","ajaxloading":"https:\/\/www.9502669.com\/wp-content\/plugins\/QAPress\/images\/loading.gif"};
/* ]]> */
</script>
<script type='text/javascript' src='https://www.9502669.com/wp-content/plugins/QAPress/js/scripts.min.js?ver=2.3.1' id='QAPress-js-js'></script>
</body>
</html> 
runsly