简介：
这份文档是关于使用HTML5、CSS和JavaScript进行网页开发的学习笔记，涵盖了从基础到高级的各种知识点与实用技巧。
HTML5是现代网页开发的基础技术之一，它包含了许多改进和新增的元素。HTML标签用于构建网页结构的关键部分，例如``标签作为整个文档的根元素，包含了`
`和``两个主要组成部分。而``声明则是用来指示浏览器所使用的HTML版本。
在HTML中，``标签定义了页面的主要内容区域，包括文字、图片以及链接等；相比之下，``标签则用于存放文档的元信息如标题（通过使用`
`元素）、描述和关键词。此外，在这里还可以设置默认的基础URL（利用`<base>`标签）来帮助处理相对路径的问题，并且可以添加各种类型的元数据以提高搜索引擎对页面的理解度。
对于样式设计，HTML提供了内联样式的定义方式——即在文档中直接插入CSS代码（通过使用`<style>`元素）。同时也可以链接到外部的CSS文件以实现更灵活的设计方案。至于动态效果，则可以通过JavaScript脚本完成，并且还可以利用`<script>`标签引入这些脚本。
关于标题，HTML5提供了从一级至六级的不同级别标题标签——即`<h1>``<h6>`；其中 `<h1>` 表示最重要的内容而 `<h6>` 则用于标记最不重要的部分。此外还有段落（通过使用`<p>`元素）、硬换行（利用`<br />`）以及各种文本样式标签如斜体、粗体等。
虽然在HTML5规范中已经不再推荐使用居中文本的`<center>`标签，但仍然可以继续沿用这一功能。同时也可以选择使用非破坏性空格来实现特定布局效果。而为了进行页面区域划分，则通常会采用`<div>`元素，并通过CSS对其进行样式控制。
至于链接创建方面，则可以通过`<a>`标签完成；其中的href属性用于指定目标地址，target属性则可以设置打开方式（例如在新窗口还是当前窗口中显示）。
除此之外，在前端开发过程中还需要掌握一些额外的技术如CSS和JavaScript。前者负责定义页面的外观与格式，而后者则用来实现网页上的动态行为以及交互性功能等。只有将这三者结合起来才能构造出美观且具备良好用户体验效果的网站结构。
</p></div>
</div>
<div data-v-88f98792=""
class="w-full p-5 mb-3 bg-white border border-gray-200 rounded-lg dark:bg-gray-800 dark:border-gray-700">
<div class="flex justify-center items-center mt-14 mb-7 text-gray-500 relative"><h2>全部评论
(<span>0</span>)</h2></div>
<div
class="w-full px-5 py-10 mb-3 bg-white border border-gray-200 rounded-lg dark:bg-gray-800 dark:border-gray-700">
<div class="flex items-center mt-10 mb-5 justify-center text-gray-400">还没有任何评论哟~</div>
</div>
</div>
</div>
<aside data-v-88f98792="" class="col-span-4 md:col-span-1 animate__animated animate__fadeInUp">
<div data-v-88f98792="" class="sticky top-[5.5rem]">
<div data-v-88f98792=""
class="w-full py-5 px-2 mb-3 bg-white border border-gray-200 rounded-lg dark:bg-gray-800 dark:border-gray-700">
<div>
<div class="flex flex-col items-center">
<div class="relative mb-4 mt-6">
<button class="px-4 py-2 rounded">点击登录</button>
</div>
<div class="flex justify-center gap-5 mb-2 dark:text-gray-400">
<div class="flex items-center flex-col gap-1 hover:text-sky-600 hover:scale-110 cursor-pointer">
<button class="text-sm"
style="width:80px;height:35px;border:1px solid #c9c9c9;background-color:#fff;color:#555">
下载历史
</button>
</div>
<div class="flex items-center flex-col gap-1 hover:text-sky-600 hover:scale-110 cursor-pointer">
<button class="text-sm"
style="width:80px;height:35px;border:1px solid #c9c9c9;background-color:#fff;color:#555">
积分购买
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</aside>
</div>
</main>
</div>
<div data-v-88f98792=""
class="border z-50 cursor-pointer fixed bottom-2 right-2 md:bottom-10 md:right-10 inline p-3 bg-white hover:bg-gray-100 rounded dark:bg-gray-800 dark:hover:bg-gray-900 dark:border-gray-700"
style="display:none">
<svg class="w-4 h-4 text-gray-500 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
fill="none" viewBox="0 0 10 14">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M5 13V1m0 0L1 5m4-4 4 4"></path>
</svg>
</div>
<div class="el-overlay" style="z-index:2001;display:none">
<div role="dialog" aria-modal="true" aria-label="下载码下载" aria-describedby="el-id-9941-0"
class="el-overlay-dialog"></div>
</div>
<div class="el-overlay" style="z-index:2002;display:none">
<div role="dialog" aria-modal="true" aria-label="付费下载" aria-describedby="el-id-9941-1"
class="el-overlay-dialog"></div>
</div>
<div class="el-overlay" style="z-index:2003;display:none">
<div role="dialog" aria-modal="true" aria-label="付费下载" aria-describedby="el-id-9941-2"
class="el-overlay-dialog"></div>
</div>
<div class="el-overlay" style="z-index:2004;display:none">
<div role="dialog" aria-modal="true" aria-label="选择支付方式" aria-describedby="el-id-9941-3"
class="el-overlay-dialog"></div>
</div>
<div class="el-overlay" style="z-index:2005;display:none">
<div role="dialog" aria-modal="true" aria-label="下载次数充值" aria-describedby="el-id-9941-4"
class="el-overlay-dialog"></div>
</div>
<footer data-v-88f98792="" class="bg-white mt-5 dark:bg-gray-800 text-right">
<div class="w-full mx-auto max-w-screen-xl py-1 px-4 flex justify-end"><span
class="text-sm text-gray-500 dark:text-gray-400">© 2025 <a href="https://www.itadn.com/"
class="hover:underline">技术社区</a> .All Rights Reserved.</span>
</div>
</footer>
</main>
<div class="customer-service">
<div class="icons"><img src="http://d.itadn.com/seoassets/customer-cb314396.png" alt="客服"></div>
<span style="color:#838b8b;font-size:12px">客服</span></div>
</div>
</div>
<script type="script" src="http://d.itadn.com/src/composables/echarts.min.js"></script>
<div data-v-0e1787d0="" class="popup-container">
<div data-v-0e1787d0="" class="popup-content">
<div data-v-0e1787d0="" class="activity-image"><img data-v-0e1787d0=""
src="http://d.itadn.com/seoassets/activecustomer-98ac7d5d.png"
alt="客服" class="top-image"><img data-v-0e1787d0=""
src="http://d.itadn.com/seoassets/close-5242d789.png"
alt="关闭"
class="top-right-close"
style="width:40px"></div>
</div>
</div>
<li data-v-abd0b829=""
class="border-solid border-2 border-gray-300 dark:border-gray-600 grid auto-rows-min grid-cols-9 hover:bg-gray-100 hover:rounded-lg dark:hover:bg-gray-700 listyle"
style="cursor: pointer;">
<div data-v-abd0b829=""
class="col-start-1 pt-1 col-end-2 row-span-2 place-self-center imgsize">
<svg data-v-abd0b829="" t="1721980773527" class="icon" viewBox="0 0 1024 1024"
version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="26446" width="55"
height="110">
<path data-v-abd0b829=""
d="M834.6624 409.6a40.8576 40.8576 0 0 0-13.7728-30.63808l-254.32064-254.32064a40.87296 40.87296 0 0 0-31.1552-11.84768c-0.97792-0.07168-1.9456-0.1536-2.93376-0.1536H230.4a40.96 40.96 0 0 0-40.96 40.96v716.8a40.96 40.96 0 0 0 40.96 40.96h563.2a40.96 40.96 0 0 0 40.96-40.96V419.84c0-1.62304-0.11776-3.21536-0.3072-4.79232a40.6528 40.6528 0 0 0 0.4096-5.44768zM578.56 252.48256L694.71744 368.64H578.56V252.48256zM271.36 829.44V194.56h225.28v215.04a40.96 40.96 0 0 0 40.96 40.96h215.04v378.88H271.36z"
p-id="26447" fill="#707070"></path>
<path data-v-abd0b829=""
d="M371.2 660.48h133.12a40.96 40.96 0 0 0 0-81.92h-133.12a40.96 40.96 0 0 0 0 81.92zM650.24 696.32H363.52a40.96 40.96 0 0 0 0 81.92h286.72a40.96 40.96 0 0 0 0-81.92z"
p-id="26448" fill="#707070"></path>
</svg>
</div>
<div data-v-abd0b829=""
class="col-start-2 p-1 col-end-8 items-center sm:flex text-base font-normal pt-1 text-gray-900 dark:text-white min-h-13 max-h-13 overflow-hidden">
<a data-v-abd0b829="" class="min-h-12 max-h-12 overflow-hidden ..."
title="<span style=color: #f73131>HTML5</span>+<span style=color: #f73131>CSS</span>+<span style=color: #f73131>JavaScript</span><span style=color: #f73131>前</span><span style=color: #f73131>端</span><span style=color: #f73131>学</span><span style=color: #f73131>习</span><span style=color: #f73131>笔</span><span style=color: #f73131>记</span>.<span style=color: #f73131>docx</span>"
href="https://d.itadn.com/i0_53393855479/B/1135215" target="_blank"><span style=color: #f73131>HTML5</span>+<span style=color: #f73131>CSS</span>+<span style=color: #f73131>JavaScript</span><span style=color: #f73131>前</span><span style=color: #f73131>端</span><span style=color: #f73131>学</span><span style=color: #f73131>习</span><span style=color: #f73131>笔</span><span style=color: #f73131>记</span>.<span style=color: #f73131>docx</span></a>
</div>
<div data-v-abd0b829="" class="col-start-9 col-end-10" style="float: left;"><span
data-v-abd0b829="" class="onestyle">优质</span></div>
<div data-v-abd0b829=""
class="col-start-2 col-end-9 p-1 text-gray-500 text-xs font-normal dark:text-white">
<div data-v-abd0b829="" class="min-h-8 max-h-8 overflow-hidden ...">
这份文档是关于使用HTML5、CSS和JavaScript进行网页开发的学习笔记，涵盖了从基础到高级的各种知识点与实用技巧。
HTML5是现代网页开发的基础技术之一，它包含了许多改进和新增的元素。HTML标签用于构建网页结构的关键部分，例如`<html>`标签作为整个文档的根元素，包含了`<head>`和`<body>`两个主要组成部分。而`<!DOCTYPE>`声明则是用来指示浏览器所使用的HTML版本。
在HTML中，`<body>`标签定义了页面的主要内容区域，包括文字、图片以及链接等；相比之下，`<head>`标签则用于存放文档的元信息如标题（通过使用`<title>`元素）、描述和关键词。此外，在这里还可以设置默认的基础URL（利用`<base>`标签）来帮助处理相对路径的问题，并且可以添加各种类型的元数据以提高搜索引擎对页面的理解度。
对于样式设计，HTML提供了内联样式的定义方式——即在文档中直接插入CSS代码（通过使用`<style>`元素）。同时也可以链接到外部的CSS文件以实现更灵活的设计方案。至于动态效果，则可以通过JavaScript脚本完成，并且还可以利用`<script>`标签引入这些脚本。
关于标题，HTML5提供了从一级至六级的不同级别标题标签——即`<h1>``<h6>`；其中 `<h1>` 表示最重要的内容而 `<h6>` 则用于标记最不重要的部分。此外还有段落（通过使用`<p>`元素）、硬换行（利用`<br />`）以及各种文本样式标签如斜体、粗体等。
虽然在HTML5规范中已经不再推荐使用居中文本的`<center>`标签，但仍然可以继续沿用这一功能。同时也可以选择使用非破坏性空格来实现特定布局效果。而为了进行页面区域划分，则通常会采用`<div>`元素，并通过CSS对其进行样式控制。
至于链接创建方面，则可以通过`<a>`标签完成；其中的href属性用于指定目标地址，target属性则可以设置打开方式（例如在新窗口还是当前窗口中显示）。
除此之外，在前端开发过程中还需要掌握一些额外的技术如CSS和JavaScript。前者负责定义页面的外观与格式，而后者则用来实现网页上的动态行为以及交互性功能等。只有将这三者结合起来才能构造出美观且具备良好用户体验效果的网站结构。
</div><!---->
</div>
</li>
<li data-v-abd0b829=""
class="border-solid border-2 border-gray-300 dark:border-gray-600 grid auto-rows-min grid-cols-9 hover:bg-gray-100 hover:rounded-lg dark:hover:bg-gray-700 listyle"
style="cursor: pointer;">
<div data-v-abd0b829=""
class="col-start-1 pt-1 col-end-2 row-span-2 place-self-center imgsize">
<svg data-v-abd0b829="" t="1721980773527" class="icon" viewBox="0 0 1024 1024"
version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="26446" width="55"
height="110">
<path data-v-abd0b829=""
d="M834.6624 409.6a40.8576 40.8576 0 0 0-13.7728-30.63808l-254.32064-254.32064a40.87296 40.87296 0 0 0-31.1552-11.84768c-0.97792-0.07168-1.9456-0.1536-2.93376-0.1536H230.4a40.96 40.96 0 0 0-40.96 40.96v716.8a40.96 40.96 0 0 0 40.96 40.96h563.2a40.96 40.96 0 0 0 40.96-40.96V419.84c0-1.62304-0.11776-3.21536-0.3072-4.79232a40.6528 40.6528 0 0 0 0.4096-5.44768zM578.56 252.48256L694.71744 368.64H578.56V252.48256zM271.36 829.44V194.56h225.28v215.04a40.96 40.96 0 0 0 40.96 40.96h215.04v378.88H271.36z"
p-id="26447" fill="#707070"></path>
<path data-v-abd0b829=""
d="M371.2 660.48h133.12a40.96 40.96 0 0 0 0-81.92h-133.12a40.96 40.96 0 0 0 0 81.92zM650.24 696.32H363.52a40.96 40.96 0 0 0 0 81.92h286.72a40.96 40.96 0 0 0 0-81.92z"
p-id="26448" fill="#707070"></path>
</svg>
</div>
<div data-v-abd0b829=""
class="col-start-2 p-1 col-end-8 items-center sm:flex text-base font-normal pt-1 text-gray-900 dark:text-white min-h-13 max-h-13 overflow-hidden">
<a data-v-abd0b829="" class="min-h-12 max-h-12 overflow-hidden ..."
title="<span style=color: #f73131>前</span><span style=color: #f73131>端</span><span style=color: #f73131>学</span><span style=color: #f73131>习</span><span style=color: #f73131>笔</span><span style=color: #f73131>记</span> - Vue, JS, HTML, <span style=color: #f73131>CSS</span>, CSS3, ES6；<span style=color: #f73131>前</span><span style=color: #f73131>端</span><span style=color: #f73131>笔</span><span style=color: #f73131>记</span>.rar"
href="https://d.itadn.com/i0_38617371482/B/80163" target="_blank"><span style=color: #f73131>前</span><span style=color: #f73131>端</span><span style=color: #f73131>学</span><span style=color: #f73131>习</span><span style=color: #f73131>笔</span><span style=color: #f73131>记</span> - Vue, JS, HTML, <span style=color: #f73131>CSS</span>, CSS3, ES6；<span style=color: #f73131>前</span><span style=color: #f73131>端</span><span style=color: #f73131>笔</span><span style=color: #f73131>记</span>.rar</a>
</div>
<div data-v-abd0b829="" class="col-start-9 col-end-10" style="float: left;"><span
data-v-abd0b829="" class="onestyle">优质</span></div>
<div data-v-abd0b829=""
class="col-start-2 col-end-9 p-1 text-gray-500 text-xs font-normal dark:text-white">
<div data-v-abd0b829="" class="min-h-8 max-h-8 overflow-hidden ...">
本资源包含了前端开发核心技能的学习笔记，涵盖了Vue框架、JavaScript编程、HTML/CSS基础及进阶（CSS3）、ES6等技术要点。适合初学者和中级开发者参考使用。文件格式为rar压缩包。
前端笔记：Vue、JavaScript、HTML、CSS 和 CSS3；还包括 ES6 相关的内容。
</div><!---->
</div>
</li>
<li data-v-abd0b829=""
class="border-solid border-2 border-gray-300 dark:border-gray-600 grid auto-rows-min grid-cols-9 hover:bg-gray-100 hover:rounded-lg dark:hover:bg-gray-700 listyle"
style="cursor: pointer;">
<div data-v-abd0b829=""
class="col-start-1 pt-1 col-end-2 row-span-2 place-self-center imgsize">
<svg data-v-abd0b829="" t="1721980773527" class="icon" viewBox="0 0 1024 1024"
version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="26446" width="55"
height="110">
<path data-v-abd0b829=""
d="M834.6624 409.6a40.8576 40.8576 0 0 0-13.7728-30.63808l-254.32064-254.32064a40.87296 40.87296 0 0 0-31.1552-11.84768c-0.97792-0.07168-1.9456-0.1536-2.93376-0.1536H230.4a40.96 40.96 0 0 0-40.96 40.96v716.8a40.96 40.96 0 0 0 40.96 40.96h563.2a40.96 40.96 0 0 0 40.96-40.96V419.84c0-1.62304-0.11776-3.21536-0.3072-4.79232a40.6528 40.6528 0 0 0 0.4096-5.44768zM578.56 252.48256L694.71744 368.64H578.56V252.48256zM271.36 829.44V194.56h225.28v215.04a40.96 40.96 0 0 0 40.96 40.96h215.04v378.88H271.36z"
p-id="26447" fill="#707070"></path>
<path data-v-abd0b829=""
d="M371.2 660.48h133.12a40.96 40.96 0 0 0 0-81.92h-133.12a40.96 40.96 0 0 0 0 81.92zM650.24 696.32H363.52a40.96 40.96 0 0 0 0 81.92h286.72a40.96 40.96 0 0 0 0-81.92z"
p-id="26448" fill="#707070"></path>
</svg>
</div>
<div data-v-abd0b829=""
class="col-start-2 p-1 col-end-8 items-center sm:flex text-base font-normal pt-1 text-gray-900 dark:text-white min-h-13 max-h-13 overflow-hidden">
<a data-v-abd0b829="" class="min-h-12 max-h-12 overflow-hidden ..."
title="<span style=color: #f73131>前</span><span style=color: #f73131>端</span><span style=color: #f73131>学</span><span style=color: #f73131>习</span><span style=color: #f73131>笔</span><span style=color: #f73131>记</span>：HTML、<span style=color: #f73131>CSS</span>、Vue、Node.js"
href="https://d.itadn.com/i0_21629083429/B/78683" target="_blank"><span style=color: #f73131>前</span><span style=color: #f73131>端</span><span style=color: #f73131>学</span><span style=color: #f73131>习</span><span style=color: #f73131>笔</span><span style=color: #f73131>记</span>：HTML、<span style=color: #f73131>CSS</span>、Vue、Node.js</a>
</div>
<div data-v-abd0b829="" class="col-start-9 col-end-10" style="float: left;"><span
data-v-abd0b829="" class="onestyle">优质</span></div>
<div data-v-abd0b829=""
class="col-start-2 col-end-9 p-1 text-gray-500 text-xs font-normal dark:text-white">
<div data-v-abd0b829="" class="min-h-8 max-h-8 overflow-hidden ...">
这本《前端学习笔记》涵盖了HTML、CSS基础语法与高级技巧，并深入讲解了Vue框架和Node.js服务器端开发技术。适合前端开发者进阶阅读。
前端笔记涵盖了HTML、CSS、Vue以及Node.js的内容。
</div><!---->
</div>
</li>
<li data-v-abd0b829=""
class="border-solid border-2 border-gray-300 dark:border-gray-600 grid auto-rows-min grid-cols-9 hover:bg-gray-100 hover:rounded-lg dark:hover:bg-gray-700 listyle"
style="cursor: pointer;">
<div data-v-abd0b829=""
class="col-start-1 pt-1 col-end-2 row-span-2 place-self-center imgsize">
<svg data-v-abd0b829="" t="1721980773527" class="icon" viewBox="0 0 1024 1024"
version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="26446" width="55"
height="110">
<path data-v-abd0b829=""
d="M834.6624 409.6a40.8576 40.8576 0 0 0-13.7728-30.63808l-254.32064-254.32064a40.87296 40.87296 0 0 0-31.1552-11.84768c-0.97792-0.07168-1.9456-0.1536-2.93376-0.1536H230.4a40.96 40.96 0 0 0-40.96 40.96v716.8a40.96 40.96 0 0 0 40.96 40.96h563.2a40.96 40.96 0 0 0 40.96-40.96V419.84c0-1.62304-0.11776-3.21536-0.3072-4.79232a40.6528 40.6528 0 0 0 0.4096-5.44768zM578.56 252.48256L694.71744 368.64H578.56V252.48256zM271.36 829.44V194.56h225.28v215.04a40.96 40.96 0 0 0 40.96 40.96h215.04v378.88H271.36z"
p-id="26447" fill="#707070"></path>
<path data-v-abd0b829=""
d="M371.2 660.48h133.12a40.96 40.96 0 0 0 0-81.92h-133.12a40.96 40.96 0 0 0 0 81.92zM650.24 696.32H363.52a40.96 40.96 0 0 0 0 81.92h286.72a40.96 40.96 0 0 0 0-81.92z"
p-id="26448" fill="#707070"></path>
</svg>
</div>
<div data-v-abd0b829=""
class="col-start-2 p-1 col-end-8 items-center sm:flex text-base font-normal pt-1 text-gray-900 dark:text-white min-h-13 max-h-13 overflow-hidden">
<a data-v-abd0b829="" class="min-h-12 max-h-12 overflow-hidden ..."
title="网页<span style=color: #f73131>前</span><span style=color: #f73131>端</span><span style=color: #f73131>学</span><span style=color: #f73131>习</span><span style=color: #f73131>笔</span><span style=color: #f73131>记</span>：<span style=color: #f73131>HTML5</span>+CSS3+JavaScript.pdf"
href="https://d.itadn.com/i0_18788893383/B/577747" target="_blank">网页<span style=color: #f73131>前</span><span style=color: #f73131>端</span><span style=color: #f73131>学</span><span style=color: #f73131>习</span><span style=color: #f73131>笔</span><span style=color: #f73131>记</span>：<span style=color: #f73131>HTML5</span>+CSS3+JavaScript.pdf</a>
</div>
<div data-v-abd0b829="" class="col-start-9 col-end-10" style="float: left;"><span
data-v-abd0b829="" class="onestyle">优质</span></div>
<div data-v-abd0b829=""
class="col-start-2 col-end-9 p-1 text-gray-500 text-xs font-normal dark:text-white">
<div data-v-abd0b829="" class="min-h-8 max-h-8 overflow-hidden ...">
本书籍为个人整理的网页前端学习资料，涵盖了HTML5、CSS3及JavaScript的核心知识点与实战技巧，适合初学者和进阶者参考使用。
本书是一本关于Web前端开发的学习笔记，基于杰瑞教育的前端课程大纲编写，深入浅出地讲解了HTML5、CSS3以及JavaScript等多项技术内容。全书分为三篇，并且每一章都配有课堂案例与练习题，帮助读者在学习过程中进行实践操作以增强动手能力。此外，本书还提供了配套的学习视频资源，对每个知识点进行了逐步解析和说明。对于那些希望开始Web前端开发之旅的读者而言，这本书无疑是一份宝贵的参考资料。
</div><!---->
</div>
</li>
<li data-v-abd0b829=""
class="border-solid border-2 border-gray-300 dark:border-gray-600 grid auto-rows-min grid-cols-9 hover:bg-gray-100 hover:rounded-lg dark:hover:bg-gray-700 listyle"
style="cursor: pointer;">
<div data-v-abd0b829=""
class="col-start-1 pt-1 col-end-2 row-span-2 place-self-center imgsize">
<svg data-v-abd0b829="" t="1721980773527" class="icon" viewBox="0 0 1024 1024"
version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="26446" width="55"
height="110">
<path data-v-abd0b829=""
d="M834.6624 409.6a40.8576 40.8576 0 0 0-13.7728-30.63808l-254.32064-254.32064a40.87296 40.87296 0 0 0-31.1552-11.84768c-0.97792-0.07168-1.9456-0.1536-2.93376-0.1536H230.4a40.96 40.96 0 0 0-40.96 40.96v716.8a40.96 40.96 0 0 0 40.96 40.96h563.2a40.96 40.96 0 0 0 40.96-40.96V419.84c0-1.62304-0.11776-3.21536-0.3072-4.79232a40.6528 40.6528 0 0 0 0.4096-5.44768zM578.56 252.48256L694.71744 368.64H578.56V252.48256zM271.36 829.44V194.56h225.28v215.04a40.96 40.96 0 0 0 40.96 40.96h215.04v378.88H271.36z"
p-id="26447" fill="#707070"></path>
<path data-v-abd0b829=""
d="M371.2 660.48h133.12a40.96 40.96 0 0 0 0-81.92h-133.12a40.96 40.96 0 0 0 0 81.92zM650.24 696.32H363.52a40.96 40.96 0 0 0 0 81.92h286.72a40.96 40.96 0 0 0 0-81.92z"
p-id="26448" fill="#707070"></path>
</svg>
</div>
<div data-v-abd0b829=""
class="col-start-2 p-1 col-end-8 items-center sm:flex text-base font-normal pt-1 text-gray-900 dark:text-white min-h-13 max-h-13 overflow-hidden">
<a data-v-abd0b829="" class="min-h-12 max-h-12 overflow-hidden ..."
title="HTML、<span style=color: #f73131>CSS</span>和<span style=color: #f73131>JavaScript</span><span style=color: #f73131>学</span><span style=color: #f73131>习</span><span style=color: #f73131>笔</span><span style=color: #f73131>记</span>"
href="https://d.itadn.com/i0_99437624145/B/655841" target="_blank">HTML、<span style=color: #f73131>CSS</span>和<span style=color: #f73131>JavaScript</span><span style=color: #f73131>学</span><span style=color: #f73131>习</span><span style=color: #f73131>笔</span><span style=color: #f73131>记</span></a>
</div>
<div data-v-abd0b829="" class="col-start-9 col-end-10" style="float: left;"><span
data-v-abd0b829="" class="onestyle">优质</span></div>
<div data-v-abd0b829=""
class="col-start-2 col-end-9 p-1 text-gray-500 text-xs font-normal dark:text-white">
<div data-v-abd0b829="" class="min-h-8 max-h-8 overflow-hidden ...">
《HTML、CSS和JavaScript学习笔记》是一本系统记录网页前端技术入门知识的手册，涵盖了基本语法、样式设计及交互编程技巧。适合初学者参考使用。
这份学习笔记旨在帮助大家快速掌握前端三大基础：HTML、CSS 和 JavaScript，并包含示例与操作截图。此外，还详细介绍了 jQuery 的相关知识。
</div><!---->
</div>
</li>
<li data-v-abd0b829=""
class="border-solid border-2 border-gray-300 dark:border-gray-600 grid auto-rows-min grid-cols-9 hover:bg-gray-100 hover:rounded-lg dark:hover:bg-gray-700 listyle"
style="cursor: pointer;">
<div data-v-abd0b829=""
class="col-start-1 pt-1 col-end-2 row-span-2 place-self-center imgsize">
<svg data-v-abd0b829="" t="1721980773527" class="icon" viewBox="0 0 1024 1024"
version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="26446" width="55"
height="110">
<path data-v-abd0b829=""
d="M834.6624 409.6a40.8576 40.8576 0 0 0-13.7728-30.63808l-254.32064-254.32064a40.87296 40.87296 0 0 0-31.1552-11.84768c-0.97792-0.07168-1.9456-0.1536-2.93376-0.1536H230.4a40.96 40.96 0 0 0-40.96 40.96v716.8a40.96 40.96 0 0 0 40.96 40.96h563.2a40.96 40.96 0 0 0 40.96-40.96V419.84c0-1.62304-0.11776-3.21536-0.3072-4.79232a40.6528 40.6528 0 0 0 0.4096-5.44768zM578.56 252.48256L694.71744 368.64H578.56V252.48256zM271.36 829.44V194.56h225.28v215.04a40.96 40.96 0 0 0 40.96 40.96h215.04v378.88H271.36z"
p-id="26447" fill="#707070"></path>
<path data-v-abd0b829=""
d="M371.2 660.48h133.12a40.96 40.96 0 0 0 0-81.92h-133.12a40.96 40.96 0 0 0 0 81.92zM650.24 696.32H363.52a40.96 40.96 0 0 0 0 81.92h286.72a40.96 40.96 0 0 0 0-81.92z"
p-id="26448" fill="#707070"></path>
</svg>
</div>
<div data-v-abd0b829=""
class="col-start-2 p-1 col-end-8 items-center sm:flex text-base font-normal pt-1 text-gray-900 dark:text-white min-h-13 max-h-13 overflow-hidden">
<a data-v-abd0b829="" class="min-h-12 max-h-12 overflow-hidden ..."
title="<span style=color: #f73131>前</span><span style=color: #f73131>端</span>Vue、<span style=color: #f73131>CSS</span>、JS<span style=color: #f73131>学</span><span style=color: #f73131>习</span><span style=color: #f73131>笔</span><span style=color: #f73131>记</span>及总结"
href="https://d.itadn.com/i0_49762090786/B/612496" target="_blank"><span style=color: #f73131>前</span><span style=color: #f73131>端</span>Vue、<span style=color: #f73131>CSS</span>、JS<span style=color: #f73131>学</span><span style=color: #f73131>习</span><span style=color: #f73131>笔</span><span style=color: #f73131>记</span>及总结</a>
</div>
<div data-v-abd0b829="" class="col-start-9 col-end-10" style="float: left;"><span
data-v-abd0b829="" class="onestyle">优质</span></div>
<div data-v-abd0b829=""
class="col-start-2 col-end-9 p-1 text-gray-500 text-xs font-normal dark:text-white">
<div data-v-abd0b829="" class="min-h-8 max-h-8 overflow-hidden ...">
本资源集成了前端开发中使用Vue框架时所需的CSS和JavaScript知识的学习与实践笔记，适合初学者系统掌握相关技能。
前端vue, css, js 学习笔记总结。
</div><!---->
</div>
</li>
<li data-v-abd0b829=""
class="border-solid border-2 border-gray-300 dark:border-gray-600 grid auto-rows-min grid-cols-9 hover:bg-gray-100 hover:rounded-lg dark:hover:bg-gray-700 listyle"
style="cursor: pointer;">
<div data-v-abd0b829=""
class="col-start-1 pt-1 col-end-2 row-span-2 place-self-center imgsize">
<svg data-v-abd0b829="" t="1721980773527" class="icon" viewBox="0 0 1024 1024"
version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="26446" width="55"
height="110">
<path data-v-abd0b829=""
d="M834.6624 409.6a40.8576 40.8576 0 0 0-13.7728-30.63808l-254.32064-254.32064a40.87296 40.87296 0 0 0-31.1552-11.84768c-0.97792-0.07168-1.9456-0.1536-2.93376-0.1536H230.4a40.96 40.96 0 0 0-40.96 40.96v716.8a40.96 40.96 0 0 0 40.96 40.96h563.2a40.96 40.96 0 0 0 40.96-40.96V419.84c0-1.62304-0.11776-3.21536-0.3072-4.79232a40.6528 40.6528 0 0 0 0.4096-5.44768zM578.56 252.48256L694.71744 368.64H578.56V252.48256zM271.36 829.44V194.56h225.28v215.04a40.96 40.96 0 0 0 40.96 40.96h215.04v378.88H271.36z"
p-id="26447" fill="#707070"></path>
<path data-v-abd0b829=""
d="M371.2 660.48h133.12a40.96 40.96 0 0 0 0-81.92h-133.12a40.96 40.96 0 0 0 0 81.92zM650.24 696.32H363.52a40.96 40.96 0 0 0 0 81.92h286.72a40.96 40.96 0 0 0 0-81.92z"
p-id="26448" fill="#707070"></path>
</svg>
</div>
<div data-v-abd0b829=""
class="col-start-2 p-1 col-end-8 items-center sm:flex text-base font-normal pt-1 text-gray-900 dark:text-white min-h-13 max-h-13 overflow-hidden">
<a data-v-abd0b829="" class="min-h-12 max-h-12 overflow-hidden ..."
title="<span style=color: #f73131>前</span><span style=color: #f73131>端</span><span style=color: #f73131>学</span><span style=color: #f73131>习</span>Markdown<span style=color: #f73131>笔</span><span style=color: #f73131>记</span>"
href="https://d.itadn.com/i0_90518001634/B/854150" target="_blank"><span style=color: #f73131>前</span><span style=color: #f73131>端</span><span style=color: #f73131>学</span><span style=color: #f73131>习</span>Markdown<span style=color: #f73131>笔</span><span style=color: #f73131>记</span></a>
</div>
<div data-v-abd0b829="" class="col-start-9 col-end-10" style="float: left;"><span
data-v-abd0b829="" class="onestyle">优质</span></div>
<div data-v-abd0b829=""
class="col-start-2 col-end-9 p-1 text-gray-500 text-xs font-normal dark:text-white">
<div data-v-abd0b829="" class="min-h-8 max-h-8 overflow-hidden ...">
这本笔记详细记录了在学习前端开发过程中关于Markdown语法的学习和实践内容，适合前端开发者参考使用。
学习笔记（持续更新）
验证你是否真正掌握一个知识的最好方法是看你能否用直白浅显的语言把复杂深奥的问题讲清楚——费曼技巧「以教为学」。
大纲：
- 前端杂记策略模式发布订阅者模式责任链模式
- 0.1+0.2为什么不等于0.3
- ==和===的区别...
- 浏览器HTTP的缓存机制Event Loop预编译进阶前端性能初探-h5工作笔记
- 百度地图换高德地图中遇到的问题复习正则vue路由守卫使用Dijkstra算法实现最短路线规划Flutterflutter路由详解加快启动速度flutter异步编程事件循环IsolateStream（流）ios数字键盘解决方案人生不止有技术理财
</div><!---->
</div>
</li>
<li data-v-abd0b829=""
class="border-solid border-2 border-gray-300 dark:border-gray-600 grid auto-rows-min grid-cols-9 hover:bg-gray-100 hover:rounded-lg dark:hover:bg-gray-700 listyle"
style="cursor: pointer;">
<div data-v-abd0b829=""
class="col-start-1 pt-1 col-end-2 row-span-2 place-self-center imgsize">
<svg data-v-abd0b829="" t="1721980773527" class="icon" viewBox="0 0 1024 1024"
version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="26446" width="55"
height="110">
<path data-v-abd0b829=""
d="M834.6624 409.6a40.8576 40.8576 0 0 0-13.7728-30.63808l-254.32064-254.32064a40.87296 40.87296 0 0 0-31.1552-11.84768c-0.97792-0.07168-1.9456-0.1536-2.93376-0.1536H230.4a40.96 40.96 0 0 0-40.96 40.96v716.8a40.96 40.96 0 0 0 40.96 40.96h563.2a40.96 40.96 0 0 0 40.96-40.96V419.84c0-1.62304-0.11776-3.21536-0.3072-4.79232a40.6528 40.6528 0 0 0 0.4096-5.44768zM578.56 252.48256L694.71744 368.64H578.56V252.48256zM271.36 829.44V194.56h225.28v215.04a40.96 40.96 0 0 0 40.96 40.96h215.04v378.88H271.36z"
p-id="26447" fill="#707070"></path>
<path data-v-abd0b829=""
d="M371.2 660.48h133.12a40.96 40.96 0 0 0 0-81.92h-133.12a40.96 40.96 0 0 0 0 81.92zM650.24 696.32H363.52a40.96 40.96 0 0 0 0 81.92h286.72a40.96 40.96 0 0 0 0-81.92z"
p-id="26448" fill="#707070"></path>
</svg>
</div>
<div data-v-abd0b829=""
class="col-start-2 p-1 col-end-8 items-center sm:flex text-base font-normal pt-1 text-gray-900 dark:text-white min-h-13 max-h-13 overflow-hidden">
<a data-v-abd0b829="" class="min-h-12 max-h-12 overflow-hidden ..."
title="狂神Java<span style=color: #f73131>学</span><span style=color: #f73131>习</span><span style=color: #f73131>笔</span><span style=color: #f73131>记</span>——<span style=color: #f73131>前</span><span style=color: #f73131>端</span>入门指南：HTML、<span style=color: #f73131>CSS</span>与<span style=color: #f73131>JavaScript</span>代码详解"
href="https://d.itadn.com/i0_74635613908/B/536495" target="_blank">狂神Java<span style=color: #f73131>学</span><span style=color: #f73131>习</span><span style=color: #f73131>笔</span><span style=color: #f73131>记</span>——<span style=color: #f73131>前</span><span style=color: #f73131>端</span>入门指南：HTML、<span style=color: #f73131>CSS</span>与<span style=color: #f73131>JavaScript</span>代码详解</a>
</div>
<div data-v-abd0b829="" class="col-start-9 col-end-10" style="float: left;"><span
data-v-abd0b829="" class="onestyle">优质</span></div>
<div data-v-abd0b829=""
class="col-start-2 col-end-9 p-1 text-gray-500 text-xs font-normal dark:text-white">
<div data-v-abd0b829="" class="min-h-8 max-h-8 overflow-hidden ...">
《狂神Java学习笔记》中的前端入门章节提供了详细的HTML、CSS和JavaScript教程及代码解析，适合初学者快速掌握网页开发基础。
此资源是我根据B站up主【遇见狂神说】的Java系列视频中的前端入门部分学习过程中所编写的内容，大部分与视频内容保持一致，并包含一些个人理解和扩展的部分。
</div><!---->
</div>
</li>
<li data-v-abd0b829=""
class="border-solid border-2 border-gray-300 dark:border-gray-600 grid auto-rows-min grid-cols-9 hover:bg-gray-100 hover:rounded-lg dark:hover:bg-gray-700 listyle"
style="cursor: pointer;">
<div data-v-abd0b829=""
class="col-start-1 pt-1 col-end-2 row-span-2 place-self-center imgsize">
<svg data-v-abd0b829="" t="1721980773527" class="icon" viewBox="0 0 1024 1024"
version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="26446" width="55"
height="110">
<path data-v-abd0b829=""
d="M834.6624 409.6a40.8576 40.8576 0 0 0-13.7728-30.63808l-254.32064-254.32064a40.87296 40.87296 0 0 0-31.1552-11.84768c-0.97792-0.07168-1.9456-0.1536-2.93376-0.1536H230.4a40.96 40.96 0 0 0-40.96 40.96v716.8a40.96 40.96 0 0 0 40.96 40.96h563.2a40.96 40.96 0 0 0 40.96-40.96V419.84c0-1.62304-0.11776-3.21536-0.3072-4.79232a40.6528 40.6528 0 0 0 0.4096-5.44768zM578.56 252.48256L694.71744 368.64H578.56V252.48256zM271.36 829.44V194.56h225.28v215.04a40.96 40.96 0 0 0 40.96 40.96h215.04v378.88H271.36z"
p-id="26447" fill="#707070"></path>
<path data-v-abd0b829=""
d="M371.2 660.48h133.12a40.96 40.96 0 0 0 0-81.92h-133.12a40.96 40.96 0 0 0 0 81.92zM650.24 696.32H363.52a40.96 40.96 0 0 0 0 81.92h286.72a40.96 40.96 0 0 0 0-81.92z"
p-id="26448" fill="#707070"></path>
</svg>
</div>
<div data-v-abd0b829=""
class="col-start-2 p-1 col-end-8 items-center sm:flex text-base font-normal pt-1 text-gray-900 dark:text-white min-h-13 max-h-13 overflow-hidden">
<a data-v-abd0b829="" class="min-h-12 max-h-12 overflow-hidden ..."
title="<span style=color: #f73131>前</span><span style=color: #f73131>端</span>开发HTML、<span style=color: #f73131>CSS</span>、JS<span style=color: #f73131>学</span><span style=color: #f73131>习</span><span style=color: #f73131>笔</span><span style=color: #f73131>记</span>与规划.zip"
href="https://d.itadn.com/i0_51471181777/B/67674" target="_blank"><span style=color: #f73131>前</span><span style=color: #f73131>端</span>开发HTML、<span style=color: #f73131>CSS</span>、JS<span style=color: #f73131>学</span><span style=color: #f73131>习</span><span style=color: #f73131>笔</span><span style=color: #f73131>记</span>与规划.zip</a>
</div>
<div data-v-abd0b829="" class="col-start-9 col-end-10" style="float: left;"><span
data-v-abd0b829="" class="onestyle">优质</span></div>
<div data-v-abd0b829=""
class="col-start-2 col-end-9 p-1 text-gray-500 text-xs font-normal dark:text-white">
<div data-v-abd0b829="" class="min-h-8 max-h-8 overflow-hidden ...">
这份资料包含了前端开发中的HTML、CSS和JavaScript的学习笔记以及详细的学习计划，适合初学者系统地掌握前端技术。
提供一份关于前端HTML、CSS、JS的笔记及学习规划文件，大小约为30多MB，下载解压后即可使用。
</div><!---->
</div>
</li>
<li data-v-abd0b829=""
class="border-solid border-2 border-gray-300 dark:border-gray-600 grid auto-rows-min grid-cols-9 hover:bg-gray-100 hover:rounded-lg dark:hover:bg-gray-700 listyle"
style="cursor: pointer;">
<div data-v-abd0b829=""
class="col-start-1 pt-1 col-end-2 row-span-2 place-self-center imgsize">
<svg data-v-abd0b829="" t="1721980773527" class="icon" viewBox="0 0 1024 1024"
version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="26446" width="55"
height="110">
<path data-v-abd0b829=""
d="M834.6624 409.6a40.8576 40.8576 0 0 0-13.7728-30.63808l-254.32064-254.32064a40.87296 40.87296 0 0 0-31.1552-11.84768c-0.97792-0.07168-1.9456-0.1536-2.93376-0.1536H230.4a40.96 40.96 0 0 0-40.96 40.96v716.8a40.96 40.96 0 0 0 40.96 40.96h563.2a40.96 40.96 0 0 0 40.96-40.96V419.84c0-1.62304-0.11776-3.21536-0.3072-4.79232a40.6528 40.6528 0 0 0 0.4096-5.44768zM578.56 252.48256L694.71744 368.64H578.56V252.48256zM271.36 829.44V194.56h225.28v215.04a40.96 40.96 0 0 0 40.96 40.96h215.04v378.88H271.36z"
p-id="26447" fill="#707070"></path>
<path data-v-abd0b829=""
d="M371.2 660.48h133.12a40.96 40.96 0 0 0 0-81.92h-133.12a40.96 40.96 0 0 0 0 81.92zM650.24 696.32H363.52a40.96 40.96 0 0 0 0 81.92h286.72a40.96 40.96 0 0 0 0-81.92z"
p-id="26448" fill="#707070"></path>
</svg>
</div>
<div data-v-abd0b829=""
class="col-start-2 p-1 col-end-8 items-center sm:flex text-base font-normal pt-1 text-gray-900 dark:text-white min-h-13 max-h-13 overflow-hidden">
<a data-v-abd0b829="" class="min-h-12 max-h-12 overflow-hidden ..."
title="渡一<span style=color: #f73131>前</span><span style=color: #f73131>端</span>HTML、<span style=color: #f73131>CSS</span>、JS<span style=color: #f73131>笔</span><span style=color: #f73131>记</span>与<span style=color: #f73131>学</span><span style=color: #f73131>习</span>计划.zip"
href="https://d.itadn.com/i0_10285148441/B/684818" target="_blank">渡一<span style=color: #f73131>前</span><span style=color: #f73131>端</span>HTML、<span style=color: #f73131>CSS</span>、JS<span style=color: #f73131>笔</span><span style=color: #f73131>记</span>与<span style=color: #f73131>学</span><span style=color: #f73131>习</span>计划.zip</a>
</div>
<div data-v-abd0b829="" class="col-start-9 col-end-10" style="float: left;"><span
data-v-abd0b829="" class="onestyle">优质</span></div>
<div data-v-abd0b829=""
class="col-start-2 col-end-9 p-1 text-gray-500 text-xs font-normal dark:text-white">
<div data-v-abd0b829="" class="min-h-8 max-h-8 overflow-hidden ...">
这份资源文件包含了作者在学习前端技术时总结的HTML、CSS和JavaScript相关知识点及个人学习规划，适合初学者参考使用。
学习前端技术包括HTML、CSS及JavaScript的笔记与规划如下：首先了解前端的基本概念，并掌握编程规范；其次熟练使用HTML中的常用标签并能够自定义标签；深入理解CSS底层原理，实现精准化布局为后续课程打下坚实的基础；最后要全面掌握ECMAScript部分的内容，彻底弄懂JS的底层原理，从而在工作和技术上进阶提升中奠定扎实的JavaScript基础。
</div><!---->
</div>
</li>
</body>
</html>
5星