web 基础

作者 : admin 本文共2623个字,预计阅读时间需要7分钟 发布时间: 2024-06-12 共1人阅读

一、认识web

(一)国际上常用的浏览器有:

        1.IE浏览器 → Edge浏览器

        2.谷歌(Chrome)浏览器

        3.safari浏览器

        4.火狐(Firfox)浏览器

        5.Opera浏览器

  被称为五大浏览器,其中谷歌浏览器在全球市场上占有率最高,开发人员一般使用的都是谷歌浏览器来进行测试。

(二)浏览器的组成部分

        1. 用户界面

        2. 浏览器引擎(渲染引擎)

        3. JS 解释器

        4. 网络功能模块

        5. 数据持久化存储

(三)web标准:

        HTML(行为)   CSS(表现)   JS(交互)

二、HTML

  HTML全称超文本标记语言

        文档中最大的标签,我们称为根标签。

        元素提供了关于这篇文档的信息。

        定义页面标题。</p><p>        定义文档的主体,用户所看到的内容。</p><p>HTML5.5</p><h3>(一)HTML元素</h3><blockquote><p>     </p></blockquote><h4>1、排版标签</h4><p>  1.1 标题标签</p><blockquote><p>       </p><h1>一级标题</h1></p><p>       </p><h2>二级标题</h2></p><p>      </p><h3>三级标题</h3></p><p>       </p><h4>四级标题</h4></p><p>      </p><h5>五级标题</h5></p><p>       </p><h6>六级标题</h6></p></blockquote><p>  其中一个<a href="http://www.xu0.com/tag/html" title="【查看更多[html]标签的文章】" target="_blank">html</a>中一级标题只能有一个</p><p>  1.2 段落标签</p><p>    段落通常在文档中表示为文本块,会自动在其前后创建一些空白。</p><blockquote><p><p>  文本内容  </p></p></blockquote><p>  1.3 水平线标签</p><p>    hr是单标签</p><blockquote><hr></blockquote><p>  1.4 换行标签</p><p>     br是单标签</p><blockquote><p></p></blockquote><p>  1.5 div标签</p><p>    div标签是块级元素,竖排,独占一行,用来为HTML文档内大块的内容提供结构。</p><p>    div包裹独立的块内容</p><blockquote><p> 这是块内容</p><p> 这是块内容</p><p> 这是块内容</p></blockquote><p>   </p><p>标记里不能嵌套</p><p>    div包裹盒子,包裹任何标签</p><p>1.6 span标签</p><p>    span标签是行内元素,横排,跨度</p><p>    span则是包裹文本文字</p><blockquote><p><span> 文本内容 </span></p><p><span> 文本内容 </span></p><p><span> 文本内容 </span></p></blockquote><h4><img title="web 基础插图" alt="web 基础插图" src="//www.xu0.com/wp-content/uploads/2024/06/1718483156-630d904d44ed409.png" />  2、文本格式化标签</h4><blockquote><p>    <b>粗体</b></p><p>    <strong>也是粗体</strong></p><p>    <i>斜体</i></p><p>    <em>也是斜体</em></p><p>    <s>删除</s></p><p>    <del>也是删除</del></p><p>    <u>下划线</u></p><p>    <ins>也是下划线</ins></p></blockquote><p>> 注意:</p><p>> strong、em 、del 、ins 标签(推荐使用)有语义,起到加重语气的效果;</p><p>> b、 i 、s、 u标签是没有的语气</p><h4>  3、图像标签<img title="web 基础插图(1)" alt="web 基础插图(1)" src="//www.xu0.com/wp-content/uploads/2024/06/1718483157-166b5b2f8fa3e1e.png" /></p></blockquote><p>          本地地址</p><blockquote><p>    <img title="web 基础插图(2)" alt="web 基础插图(2)" src="https://blog.csdn.net/2301_77482582/article/details/img/a.png" /></p></blockquote><p style="text-align:center"><img title="web 基础插图(3)" alt="web 基础插图(3)" src="//www.xu0.com/wp-content/uploads/2024/06/1718483157-1daa999715f2722.png" /></p><p>> 注意引入路径问题:</p><p>> 1. 图像文件和HTML文件位于同一文件夹:只需输入图像文件的名称即可,如<img title="web 基础插图(4)" alt="web 基础插图(4)" src="https://blog.csdn.net/2301_77482582/article/details/logo.gif" />。  </p><p>> 2. 图像文件位于HTML文件的下一级文件夹:输入文件夹名和文件名,之间用“/”隔开,如<img title="web 基础插图(5)" alt="web 基础插图(5)" src="//blog.csdn.net/2301_77482582/article/details/logo.gif" />。  </p><p>> 3. 图像文件位于HTML文件的上一级文件夹:在文件名之前加入“../” ,如果是上两级,则需要使用 “../ ../”,以此类推,如<img title="web 基础插图(5)" alt="web 基础插图(5)" src="//blog.csdn.net/2301_77482582/article/details/logo.gif" />。</p><h5>  4、链接标签</h5><p><img title="web 基础插图(6)" alt="web 基础插图(6)" src="//www.xu0.com/wp-content/uploads/2024/06/1718483158-02503c7d377c56f.png" /></p><h5>  5、icon图标</h5><p>      元素包含了所有的头部标签元素,使用link标签添加icon图标,meta标签添加网站相关信息。</p><blockquote><p> </p></blockquote><h5>    6、使用特殊字符</h5><h5><img title="web 基础插图(7)" alt="web 基础插图(7)" src="//www.xu0.com/wp-content/uploads/2024/06/1718483158-0c46fd22a025534.png" />  7、HTML标签的语义化</h5><p>       >1. 方便代码的阅读和维护</p><p>       >2. 同时让浏览器可以很好地解析,从而更好分析其中的内容</p><p>       >3. 使用语义化标签会具有更好地搜索引擎优化</p><h3>(二)列表</h3><h4>1、无序列表</h4><p>   ul li 无序列表 ul里只能嵌套li ,li里可以包裹其他元素</p><blockquote><p>   </p><ul><p>       </p><li>妲己</li><p>       </p><li>貂蝉</li><p>       </p><li>瑶妹</li><p>   </ul></p></blockquote><h4> 2、有序列表 </h4><blockquote><ol><p>   </p><li>你</li><p>   </p><li>我</li><p>   </p><li>他</li></ol></blockquote><h4>  3、自定义列表</h4><blockquote><p>   </p><p>     </p><p>   </p><dl><p>       </p><dt>售后中心</dt></p><p>       </p><dd>手机售后</dd></p><p>       </p><dd>电视售后</dd></p><p>       </p><dd>电脑售后</dd></p><p>   </dl></p></blockquote><p>> – 所有特性基本与ul 一致。  </p><p>> – 但是实际工作中, 较少用 ol ,因此我们用一句话来总结下 ol:</p><p>> – 有序列表中默认的type类型是数字,而且是从1开始的。它有两个属性:type、start。  </p><p>> – type:有五个属性值:1、a、A、i、I(罗马数字),表示列表前缀的格式;</p><p>> – start:属性值位数字, 表示从type类型的第几个数字开始,比如当你选的type=“a”,start=“3”。</p><h3>(三)表单</h3><p style="text-align:center"><img title="web 基础插图(8)" alt="web 基础插图(8)" src="//www.xu0.com/wp-content/uploads/2024/06/1718483159-735d924327890e3.png" /></p><h5>1、input控件</h5><blockquote><p>   </p></blockquote><p style="text-align:center"> <img title="web 基础插图(9)" alt="web 基础插图(9)" src="//www.xu0.com/wp-content/uploads/2024/06/1718483159-a934c6a5127eab8.png" /></p><p style="text-align:center"><h5>2、label 标签和<button> 标签</h5><p>  label 标签为input 元素定义标注(标签)</p><p>作用:  用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点</p><p>  <button> 标签定义一个按钮。</p><p>在 <button> 元素内部,您可以放置内容,比如文本或图像。这是该元素与使用 元素创建的按钮之间的不同之处。</p><p style="text-align:center"><img title="web 基础插图(10)" alt="web 基础插图(10)" src="//www.xu0.com/wp-content/uploads/2024/06/1718483160-226193581a943e4.png" /></p><blockquote><p>   </p><p>     <label for="user">用户名:</label></p><p>   </p><p>   </p><p>   </p><p>     </p><p>   </p><p>    密码:</p><p>   </p><p>   </p><p>     </p><p>   </p><p>     <button>注册</button></p><p>     <button></p><p>        <img title="web 基础插图(11)" alt="web 基础插图(11)" src="https://blog.csdn.net/day0612/img/b.jpg" /></p><p>     </button></p></blockquote><h2> 三、CSS</h2><h3>  1、CSS是层叠样式表,  CSS3.0</h3><h3>  2、 CSS使用方式</h3><h4>    2.1 行内样式</h4><blockquote><p>   </p><p>     <p style="font-size: 30px; color: red;font-weight: 700; line-height: 50px;</p><p>     font-style: italic;”></p><p>        关于迷茫</p><p>        当你不知如何抉择时</p><p>        假象五年后回顾青春</p><p>        你就知道如何抉择</p><p>     </p></p></blockquote><p>> 行内样式需要写到标签的 style 属性值中。</p><h4>    2.2、内部样式表</h4><blockquote><p>   </p><p>     </p><p>        div {</p><p>            font-size: 30px;</p><p>            color:blue;</p><p>            font-weight: 700;</p><p>            line-height: 50px;</p><p>            font-style: italic;</p><p>        }</p><p>     </p></blockquote><p>> 内部样式需要写到 “ 标签中。</p><h4>   2.3、外部样式表  </h4><p>链接式:将样式写到单独的文件中,文件的扩展名为 `.css`</p><p>    在里写</p><blockquote><p>     </p><p>     </p></blockquote><p>    在里写</p><blockquote><p>    <span>span元素</span></p><p>    <span>span元素</span></p><p>    <span>span元素</span></p></blockquote><p>    在另一个css里写</p><blockquote><p>span{</p><p>    color: green;</p><p>}</p></blockquote><p>  </p><p>– 定义在外部文件(外链样式):开发中主要是通过这种形式定义样式。(推荐)</p><p>– 在页面的头部定义(内联样式):通过这种形式定义的样式只在本页面内生效。</p><p>– 定义在特定的元素身上(行内样式):这种形式多用于测试,可维护性较差。(不推荐)</p><p style="text-align:center"><h3>3、基本选择器</h3><h4>  3.1 标签选择器</h4><p>> 选择页面中所有的 `</p><p>` 元素,给它们设置字体大小和颜色。</p><h4>  3.2  Class 选择器</h4><p>> 选择页面中 class 属性值中包含 box 类名的所有元素,给它们设置字体大小和颜色。</p><h4>  3.3  ID 选择器</h4><p>> 选择页面中 id 属性值是 nav 的元素,给它设置字体大小和颜色。</p><p>W3C标准规定,在同一个页面内,不允许有相同名字的id对象出现,但是允许相同名字的class。</p><p>类选择器(class) 好比人的名字,  是可以多次重复使用的。</p><p>id选择器 好比人的身份证号码,  全中国是唯一的, 不得重复。 只能使用一次。</p><p style="text-align:center"><img title="web 基础插图(12)" alt="web 基础插图(12)" src="//www.xu0.com/wp-content/uploads/2024/06/1718483161-55abc50726868c9.png" /></p><h4>  3.4 通配符选择器</h4><p style="text-align:center"><img title="web 基础插图(13)" alt="web 基础插图(13)" src="//www.xu0.com/wp-content/uploads/2024/06/1718483161-ac5a662d0357189.png" /></p></p><p> </p></article><div id="pay-single-box"></div><div class="entry-tags"> <a href="http://www.xu0.com/tag/html" rel="tag"> html </a></div><div class="article-copyright">本站无任何商业行为<br/><a href="http://www.xu0.com">个人在线分享</a> » <a href="http://www.xu0.com/134979.html">web 基础</a></div><div class="article-footer"><div class="author-box"><div class="author-image"> <img alt='admin' data-src='http://xu0.com/wp-content/uploads/avatar/avatar-1.png' class='lazyload avatar avatar-140 photo gravatar' height='140' width='140' /></div><div class="author-info"><h4 class="author-name"> <a href="http://www.xu0.com/author/admin">admin</a> <span class="label label-warning"><i class="fa fa-diamond"></i> 钻石</span></h4></div></div><div class="xshare"> <span class="xshare-title">分享到:</span> <a href="" etap="share" data-share="qq" class="share-qq"><i class="fa fa-qq"></i></a> <a href="" etap="share" data-share="weibo" class="share-weibo"><i class="fa fa-weibo"></i></a></div></div></div></div></div></main><div class="entry-navigation"><nav class="article-nav"> <span class="article-nav-prev">上一篇<br><a href="http://www.xu0.com/179252.html" rel="prev">#07【面试问题整理】嵌入式软件工程师</a></span> <span class="article-nav-next">下一篇<br><a href="http://www.xu0.com/192895.html" rel="next">大型语言模型(LLMs)的后门攻击和防御技术</a></span></nav></div></div><div class="coments" style="margin-top:20px;"></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="http://www.xu0.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="tag_cloud-2" class="widget widget_tag_cloud"><h5 class="widget-title">标签</h5><div class="tagcloud"><a href="http://www.xu0.com/tag/android" class="tag-cloud-link tag-link-2417 tag-link-position-1" style="font-size: 9.410071942446pt;" aria-label="android (1,133个项目)">android</a> <a href="http://www.xu0.com/tag/c" class="tag-cloud-link tag-link-2388 tag-link-position-2" style="font-size: 14.244604316547pt;" aria-label="C++ (3,406个项目)">C++</a> <a href="http://www.xu0.com/tag/css" class="tag-cloud-link tag-link-2368 tag-link-position-3" style="font-size: 11.625899280576pt;" aria-label="css (1,876个项目)">css</a> <a href="http://www.xu0.com/tag/c-yu-yan" class="tag-cloud-link tag-link-2360 tag-link-position-4" style="font-size: 9.8129496402878pt;" aria-label="c语言 (1,241个项目)">c语言</a> <a href="http://www.xu0.com/tag/docker" class="tag-cloud-link tag-link-2464 tag-link-position-5" style="font-size: 10.115107913669pt;" aria-label="docker (1,314个项目)">docker</a> <a href="http://www.xu0.com/tag/html" class="tag-cloud-link tag-link-2375 tag-link-position-6" style="font-size: 12.330935251799pt;" aria-label="html (2,187个项目)">html</a> <a href="http://www.xu0.com/tag/ava" class="tag-cloud-link tag-link-267 tag-link-position-7" style="font-size: 18.172661870504pt;" aria-label="Java (8,382个项目)">Java</a> <a href="http://www.xu0.com/tag/javascript" class="tag-cloud-link tag-link-2361 tag-link-position-8" style="font-size: 18.273381294964pt;" aria-label="javascript (8,468个项目)">javascript</a> <a href="http://www.xu0.com/tag/leetcode" class="tag-cloud-link tag-link-2864 tag-link-position-9" style="font-size: 8.705035971223pt;" aria-label="leetcode (960个项目)">leetcode</a> <a href="http://www.xu0.com/tag/linux" class="tag-cloud-link tag-link-2465 tag-link-position-10" style="font-size: 14.244604316547pt;" aria-label="linux (3,402个项目)">linux</a> <a href="http://www.xu0.com/tag/mysql" class="tag-cloud-link tag-link-2485 tag-link-position-11" style="font-size: 10.215827338129pt;" aria-label="mysql (1,361个项目)">mysql</a> <a href="http://www.xu0.com/tag/python" class="tag-cloud-link tag-link-2362 tag-link-position-12" style="font-size: 16.561151079137pt;" aria-label="python (5,736个项目)">python</a> <a href="http://www.xu0.com/tag/spring" class="tag-cloud-link tag-link-2398 tag-link-position-13" style="font-size: 9.7122302158273pt;" aria-label="spring (1,200个项目)">spring</a> <a href="http://www.xu0.com/tag/springboot" class="tag-cloud-link tag-link-2400 tag-link-position-14" style="font-size: 12.532374100719pt;" aria-label="springboot (2,266个项目)">springboot</a> <a href="http://www.xu0.com/tag/uni-app" class="tag-cloud-link tag-link-2446 tag-link-position-15" style="font-size: 9.3093525179856pt;" aria-label="uni-app (1,088个项目)">uni-app</a> <a href="http://www.xu0.com/tag/vue" class="tag-cloud-link tag-link-2411 tag-link-position-16" style="font-size: 8.705035971223pt;" aria-label="vue (944个项目)">vue</a> <a href="http://www.xu0.com/tag/vuejs" class="tag-cloud-link tag-link-2371 tag-link-position-17" style="font-size: 16.561151079137pt;" aria-label="vue.js (5,713个项目)">vue.js</a> <a href="http://www.xu0.com/tag/web-an-quan" class="tag-cloud-link tag-link-2504 tag-link-position-18" style="font-size: 8.9064748201439pt;" aria-label="web安全 (1,006个项目)">web安全</a> <a href="http://www.xu0.com/tag/windows" class="tag-cloud-link tag-link-2418 tag-link-position-19" style="font-size: 8pt;" aria-label="windows (819个项目)">windows</a> <a href="http://www.xu0.com/tag/ren-gong-zhi-neng" class="tag-cloud-link tag-link-15 tag-link-position-20" style="font-size: 16.661870503597pt;" aria-label="人工智能 (5,918个项目)">人工智能</a> <a href="http://www.xu0.com/tag/qian-duan" class="tag-cloud-link tag-link-2366 tag-link-position-21" style="font-size: 22pt;" aria-label="前端 (19,994个项目)">前端</a> <a href="http://www.xu0.com/tag/qian-duan-kuang-jia" class="tag-cloud-link tag-link-2397 tag-link-position-22" style="font-size: 9.0071942446043pt;" aria-label="前端框架 (1,031个项目)">前端框架</a> <a href="http://www.xu0.com/tag/dan-pian-ji" class="tag-cloud-link tag-link-2943 tag-link-position-23" style="font-size: 8.2014388489209pt;" aria-label="单片机 (856个项目)">单片机</a> <a href="http://www.xu0.com/tag/hou-duan" class="tag-cloud-link tag-link-2401 tag-link-position-24" style="font-size: 13.035971223022pt;" aria-label="后端 (2,565个项目)">后端</a> <a href="http://www.xu0.com/tag/da-shu-ju" class="tag-cloud-link tag-link-2450 tag-link-position-25" style="font-size: 12.028776978417pt;" aria-label="大数据 (2,037个项目)">大数据</a> <a href="http://www.xu0.com/tag/xue-xi" class="tag-cloud-link tag-link-2435 tag-link-position-26" style="font-size: 13.338129496403pt;" aria-label="学习 (2,761个项目)">学习</a> <a href="http://www.xu0.com/tag/an-quan" class="tag-cloud-link tag-link-2568 tag-link-position-27" style="font-size: 11.021582733813pt;" aria-label="安全 (1,615个项目)">安全</a> <a href="http://www.xu0.com/tag/rong-qi" class="tag-cloud-link tag-link-2463 tag-link-position-28" style="font-size: 9.1079136690647pt;" aria-label="容器 (1,045个项目)">容器</a> <a href="http://www.xu0.com/tag/xiao-cheng-xu" class="tag-cloud-link tag-link-2459 tag-link-position-29" style="font-size: 9.6115107913669pt;" aria-label="小程序 (1,171个项目)">小程序</a> <a href="http://www.xu0.com/tag/qian-ru-shi-ying-jian" class="tag-cloud-link tag-link-2944 tag-link-position-30" style="font-size: 8.3021582733813pt;" aria-label="嵌入式硬件 (874个项目)">嵌入式硬件</a> <a href="http://www.xu0.com/tag/kai-fa-yu-yan" class="tag-cloud-link tag-link-2372 tag-link-position-31" style="font-size: 17.971223021583pt;" aria-label="开发语言 (7,904个项目)">开发语言</a> <a href="http://www.xu0.com/tag/wei-xin-xiao-cheng-xu" class="tag-cloud-link tag-link-2424 tag-link-position-32" style="font-size: 8.6043165467626pt;" aria-label="微信小程序 (934个项目)">微信小程序</a> <a href="http://www.xu0.com/tag/%e6%95%b0%e6%8d%ae%e5%ba%93" class="tag-cloud-link tag-link-304 tag-link-position-33" style="font-size: 14.748201438849pt;" aria-label="数据库 (3,785个项目)">数据库</a> <a href="http://www.xu0.com/tag/shu-ju-jie-gou" class="tag-cloud-link tag-link-2460 tag-link-position-34" style="font-size: 10.517985611511pt;" aria-label="数据结构 (1,458个项目)">数据结构</a> <a href="http://www.xu0.com/tag/fu-wu-qi" class="tag-cloud-link tag-link-2436 tag-link-position-35" style="font-size: 13.841726618705pt;" aria-label="服务器 (3,066个项目)">服务器</a> <a href="http://www.xu0.com/tag/ji-qi-xue-xi" class="tag-cloud-link tag-link-2603 tag-link-position-36" style="font-size: 9.7122302158273pt;" aria-label="机器学习 (1,202个项目)">机器学习</a> <a href="http://www.xu0.com/tag/shen-du-xue-xi" class="tag-cloud-link tag-link-2469 tag-link-position-37" style="font-size: 10.820143884892pt;" aria-label="深度学习 (1,559个项目)">深度学习</a> <a href="http://www.xu0.com/tag/bi-ji" class="tag-cloud-link tag-link-2587 tag-link-position-38" style="font-size: 11.827338129496pt;" aria-label="笔记 (1,960个项目)">笔记</a> <a href="http://www.xu0.com/tag/suan-fa" class="tag-cloud-link tag-link-2386 tag-link-position-39" style="font-size: 14.446043165468pt;" aria-label="算法 (3,536个项目)">算法</a> <a href="http://www.xu0.com/tag/wang-luo" class="tag-cloud-link tag-link-853 tag-link-position-40" style="font-size: 13.035971223022pt;" aria-label="网络 (2,577个项目)">网络</a> <a href="http://www.xu0.com/tag/wang-luo-xie-yi" class="tag-cloud-link tag-link-2437 tag-link-position-41" style="font-size: 8.8057553956835pt;" aria-label="网络协议 (971个项目)">网络协议</a> <a href="http://www.xu0.com/tag/wang-luo-an-quan" class="tag-cloud-link tag-link-2505 tag-link-position-42" style="font-size: 8pt;" aria-label="网络安全 (814个项目)">网络安全</a> <a href="http://www.xu0.com/tag/yun-wei" class="tag-cloud-link tag-link-2477 tag-link-position-43" style="font-size: 14.345323741007pt;" aria-label="运维 (3,493个项目)">运维</a> <a href="http://www.xu0.com/tag/mian-shi" class="tag-cloud-link tag-link-2445 tag-link-position-44" style="font-size: 9.0071942446043pt;" aria-label="面试 (1,027个项目)">面试</a> <a href="http://www.xu0.com/tag/yin-shi-pin" class="tag-cloud-link tag-link-2438 tag-link-position-45" style="font-size: 8.8057553956835pt;" aria-label="音视频 (969个项目)">音视频</a></div></div><div id="calendar-2" class="widget widget_calendar"><div id="calendar_wrap" class="calendar_wrap"><table id="wp-calendar" class="wp-calendar-table"><caption>2024年七月</caption><thead><tr><th scope="col" title="星期一">一</th><th scope="col" title="星期二">二</th><th scope="col" title="星期三">三</th><th scope="col" title="星期四">四</th><th scope="col" title="星期五">五</th><th scope="col" title="星期六">六</th><th scope="col" title="星期日">日</th></tr></thead><tbody><tr><td colspan="6" class="pad"> </td><td>1</td></tr><tr><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td id="today">8</td></tr><tr><td>9</td><td>10</td><td>11</td><td>12</td><td>13</td><td>14</td><td>15</td></tr><tr><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td><td>21</td><td>22</td></tr><tr><td>23</td><td>24</td><td>25</td><td>26</td><td>27</td><td>28</td><td>29</td></tr><tr><td>30</td><td class="pad" colspan="6"> </td></tr></tbody></table><nav aria-label="上个月及下个月" class="wp-calendar-nav"> <span class="wp-calendar-nav-prev"><a href="http://www.xu0.com/date/2024/06">« 6月</a></span> <span class="pad"> </span> <span class="wp-calendar-nav-next"> </span></nav></div></div></aside></div></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="http://www.xu0.com/135043.html"> <img class="lazyload" data-src="http://www.xu0.com/wp-content/uploads/2024/06/1718483382-55b27c6ca032a74.gif" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="原生js实现复选框(全选/全不选/反选)效果【含完整代码】"> </a></div></div><div class="entry-wrapper"><header class="entry-header"><h4 class="entry-title"><a href="http://www.xu0.com/135043.html" title="原生js实现复选框(全选/全不选/反选)效果【含完整代码】" rel="bookmark">原生js实现复选框(全选/全不选/反选)效果【含完整代码】</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="http://www.xu0.com/124911.html"> <img class="lazyload" data-src="http://www.xu0.com/wp-content/uploads/2024/06/1718469474-552aec165aa6039.png" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="重温react-01"> </a></div></div><div class="entry-wrapper"><header class="entry-header"><h4 class="entry-title"><a href="http://www.xu0.com/124911.html" title="重温react-01" rel="bookmark">重温react-01</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="http://www.xu0.com/65775.html"> <img class="lazyload" data-src="/images/2024/0610/184ce25ebb3f41f48e945a751d99b4f7.png" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="【CSS】盒子模型阴影 ( box-shadow: 水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内外阴影; )"> </a></div></div><div class="entry-wrapper"><header class="entry-header"><h4 class="entry-title"><a href="http://www.xu0.com/65775.html" title="【CSS】盒子模型阴影 ( box-shadow: 水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内外阴影; )" rel="bookmark">【CSS】盒子模型阴影 ( box-shadow: 水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内外阴影; )</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="http://www.xu0.com/69201.html"> <img class="lazyload" data-src="/images/2024/0610/e9ec40622d4282acd4b4c65b4115655f.png" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="html网页设计小作业(个人主页)"> </a></div></div><div class="entry-wrapper"><header class="entry-header"><h4 class="entry-title"><a href="http://www.xu0.com/69201.html" title="html网页设计小作业(个人主页)" rel="bookmark">html网页设计小作业(个人主页)</a></h4></header></div></article></div></div></div> E--></div><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="http://www.xu0.com/wp-content/uploads/2024/06/1718412997-7db64bdd170b2cd.png" data-dark="http://www.xu0.com/wp-content/uploads/2024/06/1718412997-7db64bdd170b2cd.png" alt="个人在线分享"></div><p class="mb-10">本站无任何商业行为</p></div></div><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"></ul></div></div><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"></ul></div></div><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="http://www.xu0.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>本站由<a href="http://ritheme.com/" target="_blank" rel="noreferrer nofollow">RiPro主题</a>强力驱动</h6><h6><div class="payment"></div></h6></div></div></div></div><div class="site-info"> © 2018 Theme by - <a href="http://ritheme.com/" target="_blank" rel="noreferrer nofollow">本站无任何商业行为</a> & WordPress Theme. All rights reserved <a href="https://beian.miit.gov.cn" target="_blank" class="text">蒙ICP备2023002302号-2 <br></a><div class="footer-shouquan">「虚灵个人在线分享」 XU0.COM 提供免费学习资料分享,本站资料全部由网上搜集,仅供学习使用, 不得用来做违法违纪,如有侵权请联系,立即删除</div></div></div></footer><div class="dimmer"></div><div class="off-canvas"><div class="canvas-close"><i class="mdi mdi-close"></i></div><div class="logo-wrapper"> <a href="http://www.xu0.com/"> <img class="logo regular" src="http://www.xu0.com/wp-content/uploads/2024/06/1717773004-dc1d71bbb5c4d2a.png" alt="个人在线分享"> </a></div><div class="mobile-menu hidden-lg hidden-xl"></div><aside class="widget-area"></aside></div> <script defer src="data:text/javascript;base64,DQogICAgICAgIGNvbnNvbGUubG9nKCJcbiAlYyBSaVByby3lrZDkuLvpopggVjguMSAlYyBodHRwczovL3p5Zng4LmNuIFxuXG4iLCAiY29sb3I6ICNmYWRmYTM7IGJhY2tncm91bmQ6ICMwMzAzMDc7IHBhZGRpbmc6NXB4IDA7IiwgImJhY2tncm91bmQ6ICNmYWRmYTM7IHBhZGRpbmc6NXB4IDA7Iik7DQogICAgICAgIGNvbnNvbGUubG9nKCJTUUwg6K+35rGC5pWw77yaOTciKTsNCiAgICAgICAgY29uc29sZS5sb2coIumhtemdoueUn+aIkOiAl+aXtu+8miA0Ni4wNDEzNiIpOw0KICAgIA=="></script> <script defer src="data:text/javascript;base64,alF1ZXJ5KGRvY3VtZW50KS5yZWFkeShmdW5jdGlvbigkKXskKCcuY3QgaDMgc3BhbicpLmNsaWNrKGZ1bmN0aW9uKCl7JCh0aGlzKS5hZGRDbGFzcygic2VsZWN0ZWQiKS5zaWJsaW5ncygpLnJlbW92ZUNsYXNzKCk7JCgnLmN0ID4gdWwnKS5lcSgkKHRoaXMpLmluZGV4KCkpLmFkZENsYXNzKCdzaG93Jyk7JCgnLmN0ID4gdWwnKS5lcSgkKHRoaXMpLmluZGV4KCkpLnNpYmxpbmdzKCkucmVtb3ZlQ2xhc3MoJ3Nob3cnKTt9KTskKCJwcmUgPiBjb2RlIikuYWRkQ2xhc3MoImxhbmd1YWdlLXBocCIpO30pO2pRdWVyeSgiLmhlYWRlci1kcm9wZG93biIpLmhvdmVyKGZ1bmN0aW9uKCl7alF1ZXJ5KHRoaXMpLmFkZENsYXNzKCdhY3RpdmUnKTt9LGZ1bmN0aW9uKCl7alF1ZXJ5KHRoaXMpLnJlbW92ZUNsYXNzKCdhY3RpdmUnKTt9KTskKCcuaC1zY3JlZW4gbGknKS5jbGljayhmdW5jdGlvbigpeyQodGhpcykuYWRkQ2xhc3MoIm9uIikuc2libGluZ3MoKS5yZW1vdmVDbGFzcygpOyQoJy5jdCA+IHVsJykuZXEoJCh0aGlzKS5pbmRleCgpKS5hZGRDbGFzcygnc2hvdycpOyQoJy5jdCA+IHVsJykuZXEoJCh0aGlzKS5pbmRleCgpKS5zaWJsaW5ncygpLnJlbW92ZUNsYXNzKCdzaG93Jyk7fSk7JCgiLmgtc291cCBsaSBpIikuY2xpY2soZnVuY3Rpb24oKXt2YXIgc291cEJ0bj0kKHRoaXMpLnBhcmVudCgpOyQoIi5oLXNvdXAgbGkiKS5yZW1vdmVDbGFzcygib3BlbiIpO3NvdXBCdG4uYWRkQ2xhc3MoIm9wZW4iKTt9KTs="></script> <script defer src="data:text/javascript;base64,JChmdW5jdGlvbigpe3ZhciBuYXZIZWlnaHQ9JCgiI25hdkhlaWdodCIpLm9mZnNldCgpLnRvcDt2YXIgbmF2Rml4PSQoIiNuYXZIZWlnaHQiKTtpZihuYXZIZWlnaHQ+MzYpe25hdkZpeC5hZGRDbGFzcygibmF2Rml4Iik7fQp3aW5kb3cub25zY3JvbGw9ZnVuY3Rpb24oKXtpZigkKHRoaXMpLnNjcm9sbFRvcCgpPm5hdkhlaWdodHx8JCh0aGlzKS5zY3JvbGxUb3AoKT4zNyl7bmF2Rml4LmFkZENsYXNzKCJuYXZGaXgiKTt9ZWxzZXtuYXZGaXgucmVtb3ZlQ2xhc3MoIm5hdkZpeCIpO319fSkKJChkb2N1bWVudCkucmVhZHkoZnVuY3Rpb24oKXt9KQp2YXIgbmR0PSQoIiNoZWxwIGR0Iik7dmFyIG5kZD0kKCIjaGVscCBkZCIpO25kZC5lcSgwKS5zaG93KCk7bmR0LmNsaWNrKGZ1bmN0aW9uKCl7bmRkLmhpZGUoKTskKHRoaXMpLm5leHQoKS5zaG93KCk7fSk7"></script> <script defer type='text/javascript' src='http://www.xu0.com/wp-content/cache/autoptimize/js/autoptimize_single_27154160b5352fe140fcf82df293b2c3.js?ver=2.0'></script> <script defer type='text/javascript' src='http://www.xu0.com/wp-content/cache/autoptimize/js/autoptimize_single_f4168d76f155c6b079459b12937ec426.js?ver=8.1'></script> <script defer src="data:text/javascript;base64,Ci8qIDwhW0NEQVRBWyAqLwp2YXIgY2Fvemh1dGkgPSB7InNpdGVfbmFtZSI6Ilx1NGUyYVx1NGViYVx1NTcyOFx1N2ViZlx1NTIwNlx1NGVhYiIsImhvbWVfdXJsIjoiaHR0cDpcL1wvd3d3Lnh1MC5jb20iLCJhamF4dXJsIjoiaHR0cDpcL1wvd3d3Lnh1MC5jb21cL3dwLWFkbWluXC9hZG1pbi1hamF4LnBocCIsImlzX3Npbmd1bGFyIjoiMSIsInRlbmNlbnRfY2FwdGNoYSI6eyJpcyI6IiIsImFwcGlkIjoiIn0sImluZmluaXRlX2xvYWQiOiJcdTUyYTBcdThmN2RcdTY2ZjRcdTU5MWEiLCJpbmZpbml0ZV9sb2FkaW5nIjoiPGkgY2xhc3M9XCJmYSBmYS1zcGlubmVyIGZhLXNwaW5cIj48XC9pPiBcdTUyYTBcdThmN2RcdTRlMmQuLi4iLCJzaXRlX25vdGljZSI6eyJpcyI6IjAiLCJjb2xvciI6InJnYigzMywgMTUwLCAyNDMpIiwiaHRtbCI6IjxkaXYgY2xhc3M9XCJub3RpZnktY29udGVudFwiPjxoMz5SaVByb1x1NjcwMFx1NjViMFx1NzI0OFx1NjcyY1x1NjZmNFx1NjViMFx1NjVlNVx1NWZkNzxcL2gzPjxkaXY+XHU4ZmQ5XHU2NjJmXHU0ZTAwXHU2NzYxXHU3ZjUxXHU3YWQ5XHU1MTZjXHU1NDRhXHVmZjBjXHU1M2VmXHU1NzI4XHU1NDBlXHU1M2YwXHU1ZjAwXHU1NDJmXHU2MjE2XHU1MTczXHU5NWVkXHVmZjBjXHU1M2VmXHU4MWVhXHU1YjlhXHU0ZTQ5XHU4MGNjXHU2NjZmXHU5ODljXHU4MjcyXHVmZjBjXHU2ODA3XHU5ODk4XHVmZjBjXHU1MTg1XHU1YmI5XHVmZjBjXHU3NTI4XHU2MjM3XHU5OTk2XHU2YjIxXHU2MjUzXHU1ZjAwXHU1MTczXHU5NWVkXHU1NDBlXHU0ZTBkXHU1MThkXHU5MWNkXHU1OTBkXHU1ZjM5XHU1MWZhXHVmZjBjXHU2YjY0XHU1OTA0XHU1M2VmXHU0ZjdmXHU3NTI4aHRtbFx1NjgwN1x1N2I3ZS4uLjxcL2Rpdj48XC9kaXY+In0sInBheV90eXBlX2h0bWwiOnsiaHRtbCI6IjxkaXYgY2xhc3M9XCJwYXktYnV0dG9uLWJveFwiPjxcL2Rpdj48cCBzdHlsZT1cImZvbnQtc2l6ZTogMTNweDsgcGFkZGluZzogMDsgbWFyZ2luOiAwO1wiPlx1NTE0ZFx1OGQzOVx1NjIxNlx1OTRiYlx1NzdmM1x1NTE0ZFx1OGQzOVx1OGQ0NFx1NmU5MFx1NGVjNVx1OTY1MFx1NGY1OVx1OTg5ZFx1NjUyZlx1NGVkODxcL3A+IiwiYWxpcGF5IjowLCJ3ZWl4aW5wYXkiOjB9fTsKLyogXV0+ICovCg=="></script> <script defer type='text/javascript' src='http://www.xu0.com/wp-content/cache/autoptimize/js/autoptimize_single_3d63ae9fc20c9541c081782157cba6ee.js?ver=8.1'></script> <script defer type='text/javascript' src='http://www.xu0.com/wp-content/themes/ripro/assets/js/plugins/jquery.fancybox.min.js?ver=8.1'></script> <script defer src="data:text/javascript;base64,Ci8qIDwhW0NEQVRBWyAqLwp2YXIgc29jaWFsUm9ja2V0ID0geyJhamF4X3VybCI6Imh0dHA6XC9cL3d3dy54dTAuY29tXC93cC1hZG1pblwvYWRtaW4tYWpheC5waHAiLCJ3aGVyZV93ZV9hdCI6eyJpZCI6MTM0OTc5LCJ0eXBlIjoicG9zdCIsInVybCI6Imh0dHA6XC9cL3d3dy54dTAuY29tOjgxXC8xMzQ5NzkuaHRtbCIsInNldHRpbmdzX2tleSI6InBvc3RfdHlwZV9wb3N0In19OwovKiBdXT4gKi8K"></script> <script defer type='text/javascript' src='http://www.xu0.com/wp-content/cache/autoptimize/js/autoptimize_single_1d5d2ad4f5dbdf913ba6de4401f4735d.js?ver=1.3.4'></script> <script defer type='text/javascript' src='http://www.xu0.com/wp-content/cache/autoptimize/js/autoptimize_single_da7438dbb3b8b182b57a5e1060df6f34.js?ver=8.1'></script> <script defer type='text/javascript' src='http://www.xu0.com/wp-content/themes/ripro-child/assets/js/pace.min.js?ver=8.1'></script> <script defer type='text/javascript' src='http://www.xu0.com/wp-content/cache/autoptimize/js/autoptimize_single_da612dba276a3e4d6ce92172f36c2e3b.js?ver=8.1'></script> <script defer type='text/javascript' src='http://www.xu0.com/wp-content/themes/ripro-child/assets/js/swiper.min.js?ver=8.1'></script> <script defer type='text/javascript' src='http://www.xu0.com/wp-content/cache/autoptimize/js/autoptimize_single_a286291139f4b6620b3a05c35bfc300c.js'></script> <script defer type='text/javascript' src='http://www.xu0.com/wp-content/cache/autoptimize/js/autoptimize_single_6223ec2de1bab9aaa9718f10b8bdd3bf.js'></script> <script defer type='text/javascript' src='http://www.xu0.com/wp-content/cache/autoptimize/js/autoptimize_single_348a660b84948fec7cb3af646936d009.js'></script> </body></html><!-- WP Fastest Cache file was created in 46.504697084427 seconds, on 09-07-24 4:34:27 -->