每一个学习前端的人对于前端三剑客《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 class="entry-copyright">
<i class="fas fa-info-circle me-1"></i>声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。</div>
</article>
<div class="entry-social">
<div class="row mt-2 mt-lg-3">
<div class="col">
<a class="share-author" href="https://www.9502669.com/author/0802231394e251be">
<div class="avatar me-1"><img class="avatar-img rounded-circle border border-white border-3 shadow" src="//www.9502669.com/wp-content/uploads/avatar/avatar-1.jpg" alt="">
</div>runsly </a>
</div>
<div class="col-auto">
<a class="btn btn-sm btn-info-soft post-share-btn" href="javascript:void(0);"><i class="fas fa-share-alt me-1"></i>分享</a>
<a class="btn btn-sm btn-success-soft post-fav-btn" href="javascript:void(0);" data-is="1"><i class="far fa-star me-1"></i></i>收藏</a>
<a class="btn btn-sm btn-danger-soft post-like-btn" href="javascript:void(0);" data-text="已点赞"><i class="far fa-heart me-1"></i>点赞(<span class="count">0</span>)</a>
</div>
</div>
</div> </div>
<div class="tab-pane fade" id="pills-faq" role="tabpanel" aria-labelledby="pills-faq-tab">
<ol class="list-group list-group-numbered">
<li class="list-group-item list-group-item-info d-flex justify-content-between align-items-start">
<div class="ms-2 me-auto">
<div class="fw-bold">免费下载或者VIP会员资源能否直接商用？</div>
<div class="text-muted">本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。</div>
</div>
</li>
<li class="list-group-item list-group-item-info d-flex justify-content-between align-items-start">
<div class="ms-2 me-auto">
<div class="fw-bold">提示下载完但解压或打开不了？</div>
<div class="text-muted">最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量，若小于网盘提示的容量则是这个原因。这是浏览器下载的bug，建议用百度网盘软件或迅雷下载。 若排除这种情况，可在对应资源底部留言，或联络我们。</div>
</div>
</li>
<li class="list-group-item list-group-item-info d-flex justify-content-between align-items-start">
<div class="ms-2 me-auto">
<div class="fw-bold">找不到素材资源介绍文章里的示例图片？</div>
<div class="text-muted">对于会员专享、整站源码、程序插件、网站模板、网页模版等类型的素材，文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买，且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况，但部分素材会在素材包内有一份字体下载链接清单。</div>
</div>
</li>
<li class="list-group-item list-group-item-info d-flex justify-content-between align-items-start">
<div class="ms-2 me-auto">
<div class="fw-bold">付款后无法显示下载地址或者无法查看内容？</div>
<div class="text-muted">如果您已经成功付款但是网站没有弹出成功提示，请联系站长提供付款信息为您处理</div>
</div>
</li>
<li class="list-group-item list-group-item-info d-flex justify-content-between align-items-start">
<div class="ms-2 me-auto">
<div class="fw-bold">购买该资源后，可以退款吗？</div>
<div class="text-muted">源码素材属于虚拟商品，具有可复制性，可传播性，一旦授予，不接受任何形式的退款、换货要求。请您在购买获取之前确认好 是您所需要的资源</div>
</div>
</li>
</ol>
</div>
</div>
</div>
<div class="entry-navigation">
<div class="row g-3">
<div class="col-lg-6 col-12">
<a class="entry-page-prev" href="https://www.9502669.com/91065.html" title="初学者必修的知识——HTML简介">
<div class="entry-page-icon"><i class="fas fa-arrow-left"></i></div>
<div class="entry-page-info">
<span class="d-block rnav">上一篇</span>
<div class="title">初学者必修的知识——HTML简介</div>
</div>
</a>
</div>
<div class="col-lg-6 col-12">
<a class="entry-page-next" href="https://www.9502669.com/91069.html" title="什么是html">
<div class="entry-page-info">
<span class="d-block rnav">下一篇</span>
<div class="title">什么是html</div>
</div>
<div class="entry-page-icon"><i class="fas fa-arrow-right"></i></div>
</a>
</div>
</div>
</div>
<div class="related-posts">
<h2 class="related-posts-title"><i class="fab fa-hive me-1"></i>相关文章</h2>
<div class="row g-2 g-md-3 row-cols-2 row-cols-md-3 row-cols-lg-4">
<div class="col">
<article class="post-item item-grid">
<div class="tips-badge position-absolute top-0 start-0 z-1 m-2">
</div>
<div class="entry-media ratio ratio-3x2">
<a target="" class="media-img lazy bg-cover bg-center" href="https://www.9502669.com/90978.html" title="22考研调剂信息汇总（126所）！含29所双一流大学" data-bg="https://p9.toutiaoimg.com/origin/tos-cn-i-tjoges91tu/SibPGunCgbnXF7?from=pc">
<!-- 音视频缩略图 -->
</a>
</div> <div class="entry-wrapper">
<div class="entry-cat-dot"><a href="https://www.9502669.com/css%e7%9f%a5%e8%af%86">css知识</a></div>
<h2 class="entry-title">
<a target="" href="https://www.9502669.com/90978.html" title="22考研调剂信息汇总（126所）！含29所双一流大学">22考研调剂信息汇总（126所）！含29所双一流大学</a>
</h2>
<div class="entry-desc">昨天，研招网公布了22考研调剂系统开放时间 22考研调剂即将开始，以下是学姐帮大...</div>
<div class="entry-meta">
<span class="meta-date"><i class="far fa-clock me-1"></i><time class="pub-date" datetime="2022-04-15T07:31:32+08:00">3 年前</time></span>
<span class="meta-likes d-none d-md-inline-block"><i class="far fa-heart me-1"></i>0</span>
<span class="meta-fav d-none d-md-inline-block"><i class="far fa-star me-1"></i>0</span>
<span class="meta-views"><i class="far fa-eye me-1"></i>18</span>
</div> </div>
</article>
</div>
<div class="col">
<article class="post-item item-grid">
<div class="tips-badge position-absolute top-0 start-0 z-1 m-2">
</div>
<div class="entry-media ratio ratio-3x2">
<a target="" class="media-img lazy bg-cover bg-center" href="https://www.9502669.com/91920.html" title="如何避免 JS 内存泄漏？" data-bg="https://www.9502669.com/wp-content/uploads/2022/04/1650408877-8bc1e3c2d277c46-150x150.png">
<!-- 音视频缩略图 -->
</a>
</div> <div class="entry-wrapper">
<div class="entry-cat-dot"><a href="https://www.9502669.com/css%e7%9f%a5%e8%af%86">css知识</a></div>
<h2 class="entry-title">
<a target="" href="https://www.9502669.com/91920.html" title="如何避免 JS 内存泄漏？">如何避免 JS 内存泄漏？</a>
</h2>
<div class="entry-desc">很多开发者可能平时并不关心自己维护的页面是否存在内存泄漏，原因可能是刚开始简单的...</div>
<div class="entry-meta">
<span class="meta-date"><i class="far fa-clock me-1"></i><time class="pub-date" datetime="2022-04-20T06:54:36+08:00">3 年前</time></span>
<span class="meta-likes d-none d-md-inline-block"><i class="far fa-heart me-1"></i>0</span>
<span class="meta-fav d-none d-md-inline-block"><i class="far fa-star me-1"></i>0</span>
<span class="meta-views"><i class="far fa-eye me-1"></i>17</span>
</div> </div>
</article>
</div>
<div class="col">
<article class="post-item item-grid">
<div class="tips-badge position-absolute top-0 start-0 z-1 m-2">
</div>
<div class="entry-media ratio ratio-3x2">
<a target="" class="media-img lazy bg-cover bg-center" href="https://www.9502669.com/92501.html" title="web前端培训开发者要掌握的CSS技巧有哪些" data-bg="https://www.9502669.com/wp-content/uploads/2022/04/1650931213-634b1d25f322a82-150x150.jpeg">
<!-- 音视频缩略图 -->
</a>
</div> <div class="entry-wrapper">
<div class="entry-cat-dot"><a href="https://www.9502669.com/css%e7%9f%a5%e8%af%86">css知识</a></div>
<h2 class="entry-title">
<a target="" href="https://www.9502669.com/92501.html" title="web前端培训开发者要掌握的CSS技巧有哪些">web前端培训开发者要掌握的CSS技巧有哪些</a>
</h2>
<div class="entry-desc">undefined</div>
<div class="entry-meta">
<span class="meta-date"><i class="far fa-clock me-1"></i><time class="pub-date" datetime="2022-04-26T07:59:10+08:00">3 年前</time></span>
<span class="meta-likes d-none d-md-inline-block"><i class="far fa-heart me-1"></i>0</span>
<span class="meta-fav d-none d-md-inline-block"><i class="far fa-star me-1"></i>0</span>
<span class="meta-views"><i class="far fa-eye me-1"></i>11</span>
</div> </div>
</article>
</div>
<div class="col">
<article class="post-item item-grid">
<div class="tips-badge position-absolute top-0 start-0 z-1 m-2">
</div>
<div class="entry-media ratio ratio-3x2">
<a target="" class="media-img lazy bg-cover bg-center" href="https://www.9502669.com/91746.html" title="CSS 自定义属性：基础篇" data-bg="https://www.9502669.com/wp-content/themes/ripro-v5/assets/img/thumb.jpg">
<!-- 音视频缩略图 -->
</a>
</div> <div class="entry-wrapper">
<div class="entry-cat-dot"><a href="https://www.9502669.com/css%e7%9f%a5%e8%af%86">css知识</a></div>
<h2 class="entry-title">
<a target="" href="https://www.9502669.com/91746.html" title="CSS 自定义属性：基础篇">CSS 自定义属性：基础篇</a>
</h2>
<div class="entry-desc">译者注：CSS 自定义属性系列有三篇1. CSS 自定义属性：基础篇2. CSS...</div>
<div class="entry-meta">
<span class="meta-date"><i class="far fa-clock me-1"></i><time class="pub-date" datetime="2022-04-18T18:52:38+08:00">3 年前</time></span>
<span class="meta-likes d-none d-md-inline-block"><i class="far fa-heart me-1"></i>0</span>
<span class="meta-fav d-none d-md-inline-block"><i class="far fa-star me-1"></i>0</span>
<span class="meta-views"><i class="far fa-eye me-1"></i>19</span>
</div> </div>
</article>
</div>
</div>
</div>
</div>
<div class="sidebar-wrapper col-md-12 col-lg-3 h-100" data-sticky>
<div class="sidebar">
<div id="recent-posts-2" class="widget widget_recent_entries">
<h5 class="widget-title">近期文章</h5>
<ul>
<li>
<a href="https://www.9502669.com/93134.html">crmeb通过用户名和密码注册会员的功能</a>
</li>
<li>
<a href="https://www.9502669.com/93130.html">CRMEB安装和使用教程</a>
</li>
<li>
<a href="https://www.9502669.com/93125.html">CRMEB PRO首页支持DIY设计方法</a>
</li>
<li>
<a href="https://www.9502669.com/93123.html">Trae安装教程</a>
</li>
<li>
<a href="https://www.9502669.com/93119.html">REST API 教程大全</a>
</li>
<li>
<a href="https://www.9502669.com/93117.html">Web前端技术图谱</a>
</li>
</ul>
</div><div id="tag_cloud-7" 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: 13.19801980198pt;" 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: 16.386138613861pt;" aria-label="css (370 项)">css</a>
<a href="https://www.9502669.com/tag/css3" class="tag-cloud-link tag-link-3864 tag-link-position-3" style="font-size: 9.5247524752475pt;" aria-label="css3 (37 项)">css3</a>
<a href="https://www.9502669.com/tag/html" class="tag-cloud-link tag-link-1390 tag-link-position-4" style="font-size: 15.346534653465pt;" aria-label="HTML (260 项)">HTML</a>
<a href="https://www.9502669.com/tag/html5" class="tag-cloud-link tag-link-1072 tag-link-position-5" style="font-size: 9.9405940594059pt;" 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-6" style="font-size: 22pt;" 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-7" style="font-size: 12.29702970297pt;" aria-label="IT问答 (94 项)">IT问答</a>
<a href="https://www.9502669.com/tag/java" class="tag-cloud-link tag-link-1017 tag-link-position-8" style="font-size: 11.257425742574pt;" aria-label="java (67 项)">java</a>
<a href="https://www.9502669.com/tag/javascript" class="tag-cloud-link tag-link-3854 tag-link-position-9" style="font-size: 16.871287128713pt;" aria-label="JavaScript (439 项)">JavaScript</a>
<a href="https://www.9502669.com/tag/jquery" class="tag-cloud-link tag-link-689 tag-link-position-10" style="font-size: 11.950495049505pt;" aria-label="jQuery (84 项)">jQuery</a>
<a href="https://www.9502669.com/tag/nodejs" class="tag-cloud-link tag-link-3952 tag-link-position-11" style="font-size: 10.633663366337pt;" aria-label="nodejs (54 项)">nodejs</a>
<a href="https://www.9502669.com/tag/ps" class="tag-cloud-link tag-link-1126 tag-link-position-12" style="font-size: 14.584158415842pt;" 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-13" style="font-size: 14.722772277228pt;" aria-label="ps技巧 (214 项)">ps技巧</a>
<a href="https://www.9502669.com/tag/typecho" class="tag-cloud-link tag-link-4425 tag-link-position-14" style="font-size: 11.742574257426pt;" aria-label="Typecho (79 项)">Typecho</a>
<a href="https://www.9502669.com/tag/vue" class="tag-cloud-link tag-link-3950 tag-link-position-15" style="font-size: 8.6930693069307pt;" aria-label="vue (28 项)">vue</a>
<a href="https://www.9502669.com/tag/vuejs" class="tag-cloud-link tag-link-3953 tag-link-position-16" style="font-size: 9.5247524752475pt;" 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-17" style="font-size: 12.019801980198pt;" aria-label="Web开发 (87 项)">Web开发</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-18" style="font-size: 8.9009900990099pt;" 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-19" style="font-size: 8.9009900990099pt;" 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-20" style="font-size: 10.980198019802pt;" aria-label="安卓 (60 项)">安卓</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-21" style="font-size: 13.475247524752pt;" aria-label="帝国cms教程 (140 项)">帝国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-22" style="font-size: 9.3861386138614pt;" 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-23" style="font-size: 12.643564356436pt;" aria-label="技术总结 (105 项)">技术总结</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-24" style="font-size: 12.643564356436pt;" aria-label="技术笔记 (105 项)">技术笔记</a>
<a href="https://www.9502669.com/tag/%e6%95%b0%e5%ad%a6%e7%ac%a6%e5%8f%b7" class="tag-cloud-link tag-link-1008 tag-link-position-25" style="font-size: 8pt;" aria-label="数学符号 (22 项)">数学符号</a>
<a href="https://www.9502669.com/tag/%e6%95%b0%e5%ad%a6%e7%ac%a6%e5%8f%b7%e5%a4%a7%e5%85%a8" class="tag-cloud-link tag-link-1009 tag-link-position-26" style="font-size: 8pt;" aria-label="数学符号大全 (22 项)">数学符号大全</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-27" style="font-size: 9.2475247524752pt;" 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-28" style="font-size: 11.950495049505pt;" 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-29" style="font-size: 9.3861386138614pt;" 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-30" style="font-size: 10.079207920792pt;" aria-label="特殊符号 (45 项)">特殊符号</a>
<a href="https://www.9502669.com/tag/%e7%96%91%e9%9a%be%e8%a7%a3%e7%ad%94" class="tag-cloud-link tag-link-4508 tag-link-position-31" style="font-size: 8.3465346534653pt;" aria-label="疑难解答 (25 项)">疑难解答</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: 17.841584158416pt;" 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: 15.346534653465pt;" 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: 15.554455445545pt;" 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: 11.465346534653pt;" 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: 8.4851485148515pt;" 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: 9.1782178217822pt;" 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: 13.891089108911pt;" 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.9009900990099pt;" 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: 10.148514851485pt;" 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: 13.821782178218pt;" 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: 9.039603960396pt;" 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: 9.039603960396pt;" 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: 9.039603960396pt;" 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: 9.039603960396pt;" aria-label="语言符号大全 (31 项)">语言符号大全</a></div>
</div> </div>
</div>
</div>
</div>
</main>
<!-- **************** MAIN CONTENT END **************** -->
<!-- =======================
Footer START -->
<footer class="site-footer py-md-4 py-2 mt-2 mt-md-4">
<div class="container">
<div class="row d-none d-lg-flex mb-3">
<div class="col-md-4">
<div class="logo-wrapper">
</div>
<div class="logo-wrapper">
<a rel="nofollow noopener noreferrer" href="https://www.9502669.com/"><img class="logo regular" data-light="https://www.9502669.com/wp-content/themes/ripro-v5/assets/img/logo.png" data-dark="https://www.9502669.com/wp-content/themes/ripro-v5/assets/img/logo-dark.png" src="https://www.9502669.com/wp-content/themes/ripro-v5/assets/img/logo.png" alt="学习园地|美工之家"></a></div>
<p class="small mb-0">学习园地|美工之家提供学习资料，美工素材、模版插件等优质资源</p>
</div>
<div class="col-md-2">
<h4 class="widget-title">快速导航</h4>
<ul class="list-unstyled widget-links">
<li><a href="https://www.9502669.com/user">个人中心</a></li><li><a href="https://www.9502669.com/tags">标签云</a></li><li><a href="https://www.9502669.com/links">网址导航</a></li> </ul>
</div>
<div class="col-md-2">
<h4 class="widget-title">关于本站</h4>
<ul class="list-unstyled widget-links">
<li><a href="https://www.9502669.com/vip-prices">VIP介绍</a></li><li><a href="https://www.9502669.com/user/ticket">客服咨询</a></li><li><a href="https://www.9502669.com/user/aff">推广计划</a></li> </ul>
</div>
<div class="col-md-4">
<h4 class="widget-title">联系我们</h4>
<div class=""><!--img width="80" height="80" src="https://www.9502669.com/wp-content/themes/ripro-v5/assets/img/ritheme-qr.png" style="float: left;" title="二维码"><img width="80" height="80" src="https://www.9502669.com/wp-content/themes/ripro-v5/assets/img/ritheme-qr.png" style="float: left;" title="二维码">-->微信：dilingdiling123<br>如有BUG或建议可与我们在线联系或登录本站账号进入个人中心提交工单。</div>
</div>
</div>
<div class="text-center small w-100">
<div>Copyright © 2025 <a href="http://www.9502669.com/">美工之家</a> - All rights reserved</div>
<div class=""><a href="https://beian.miit.gov.cn" target="_blank" rel="noreferrer nofollow">鲁ICP备18023744号-2</a> - <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=112888848" target="_blank" rel="noreferrer nofollow">鲁公网安备 112888848</a></div>
</div>
</div>
</footer>
<!-- =======================
Footer END -->
<!-- Back to top rollbar-->
<div class="rollbar">
<ul class="actions">
<li><a target="" href="https://www.9502669.com/" rel="nofollow noopener noreferrer"><i class="fas fa-home"></i><span>首页</span></a></li><li><a target="" href="https://www.9502669.com/user" rel="nofollow noopener noreferrer"><i class="far fa-user"></i><span>用户中心</span></a></li><li><a target="" href="https://www.9502669.com/vip-prices" rel="nofollow noopener noreferrer"><i class="fa fa-diamond"></i><span>会员介绍</span></a></li><li><a target="" href="http://wpa.qq.com/msgrd?v=3&uin=6666666&site=qq&menu=yes" rel="nofollow noopener noreferrer"><i class="fab fa-qq"></i><span>QQ客服</span></a></li><li><a target="" href="https://ritheme.com/" rel="nofollow noopener noreferrer"><i class="fab fa-shopware"></i><span>购买主题</span></a></li> </ul>
</div>
<div class="back-top"><i class="fas fa-caret-up"></i></div>
<!-- m-navbar -->
<div class="m-navbar">
<ul>
<li><a target="" href="https://www.9502669.com" rel="nofollow noopener noreferrer"><i class="fas fa-home"></i><span>首页</span></a></li><li><a target="" href="https://www.9502669.com/tags" rel="nofollow noopener noreferrer"><i class="fas fa-layer-group"></i><span>分类</span></a></li><li><a target="" href="https://www.9502669.com/vip-prices" rel="nofollow noopener noreferrer"><i class="far fa-gem"></i><span>会员</span></a></li><li><a target="" href="https://www.9502669.com/user" rel="nofollow noopener noreferrer"><i class="fas fa-user"></i><span>我的</span></a></li> </ul>
</div>
<!-- dimmer-->
<div class="dimmer"></div>
<div class="off-canvas">
<div class="canvas-close"><i class="fas fa-times"></i></div>
<!-- logo -->
<div class="logo-wrapper">
<a rel="nofollow noopener noreferrer" href="https://www.9502669.com/"><img class="logo regular" data-light="https://www.9502669.com/wp-content/themes/ripro-v5/assets/img/logo.png" data-dark="https://www.9502669.com/wp-content/themes/ripro-v5/assets/img/logo-dark.png" src="https://www.9502669.com/wp-content/themes/ripro-v5/assets/img/logo.png" alt="学习园地|美工之家"></a></div>
<div class="mobile-menu d-block d-lg-none"></div>
</div>
<script type="speculationrules">
{"prefetch":[{"source":"document","where":{"and":[{"href_matches":"\/*"},{"not":{"href_matches":["\/wp-*.php","\/wp-admin\/*","\/wp-content\/uploads\/*","\/wp-content\/*","\/wp-content\/plugins\/*","\/wp-content\/themes\/ripro-v5\/*","\/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]}
</script>
<script src="https://www.9502669.com/wp-content/themes/ripro-v5/assets/js/highlight.min.js?ver=11.7.0" id="highlight-js"></script>
<script src="https://www.9502669.com/wp-content/themes/ripro-v5/assets/js/vendor.min.js?ver=9.3" id="vendor-js"></script>
<script id="main-js-extra">
var zb = {"home_url":"https:\/\/www.9502669.com","ajax_url":"https:\/\/www.9502669.com\/wp-admin\/admin-ajax.php","theme_url":"https:\/\/www.9502669.com\/wp-content\/themes\/ripro-v5","singular_id":"91067","post_content_nav":"0","site_popup_login":"1","site_notify_auto":"0","current_user_id":"0","ajax_nonce":"e9e052a071","gettext":{"__copypwd":"\u5bc6\u7801\u5df2\u590d\u5236\u526a\u8d34\u677f","__copybtn":"\u590d\u5236","__copy_succes":"\u590d\u5236\u6210\u529f","__comment_be":"\u63d0\u4ea4\u4e2d...","__comment_succes":"\u8bc4\u8bba\u6210\u529f","__comment_succes_n":"\u8bc4\u8bba\u6210\u529f\uff0c\u5373\u5c06\u5237\u65b0\u9875\u9762","__buy_be_n":"\u8bf7\u6c42\u652f\u4ed8\u4e2d\u00b7\u00b7\u00b7","__buy_no_n":"\u652f\u4ed8\u5df2\u53d6\u6d88","__is_delete_n":"\u786e\u5b9a\u5220\u9664\u6b64\u8bb0\u5f55\uff1f"}};
</script>
<script src="https://www.9502669.com/wp-content/themes/ripro-v5/assets/js/main.min.js?ver=9.3" id="main-js"></script>
<script src="https://www.9502669.com/wp-includes/js/comment-reply.min.js?ver=6.8.2" id="comment-reply-js" async data-wp-strategy="async"></script>
<!-- 自定义js代码 统计代码 -->
<!-- 自定义js代码 统计代码 END -->
</body>
</html>
