这份文档是关于使用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。前者负责定义页面的外观与格式，而后者则用来实现网页上的动态行为以及交互性功能等。只有将这三者结合起来才能构造出美观且具备良好用户体验效果的网站结构。
</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>HTML</span>、<span style=color: #f73131>CSS</span>和<span style=color: #f73131>JS</span>（<span style=color: #f73131>含</span><span style=color: #f73131>jQuery</span>），结合<span style=color: #f73131>Ajax</span>技术，后<span style=color: #f73131>端</span>..."
href="https://d.itadn.com/i0_58187845045/B/19014" target="_blank">购物网站开发：<span style=color: #f73131>前</span><span style=color: #f73131>端</span>采用<span style=color: #f73131>HTML</span>、<span style=color: #f73131>CSS</span>和<span style=color: #f73131>JS</span>（<span style=color: #f73131>含</span><span style=color: #f73131>jQuery</span>），结合<span style=color: #f73131>Ajax</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（含jQuery）构建用户界面，并运用Ajax实现动态数据交互；后端则通过Python Flask框架处理业务逻辑与数据库操作。
本项目是一个完整的购物网站，前端页面使用HTML、CSS及JavaScript（结合jQuery）进行开发，并采用Ajax技术发起请求；后端则通过Servlet处理前端的请求响应。该系统实现了基本用户登录与注册功能，允许浏览商品并查看具体详情，支持搜索功能以及管理员登录和管理界面等功能。此外，预留了大量待开发接口以供进一步完善。
在管理页面中主要实现的是添加商品模块，并且可以同时上传多个文件；整个项目采用MVC架构设计，代码清晰易读性高，适合初学者下载学习使用。系统所需工具包括：IDEA、Tomcat服务器和MySQL数据库等。具体操作步骤如下：
1. 根据提供的sql.sql脚本搭建网站所需的数据库环境。
2. 管理员账户目前只能通过直接修改数据库语句来添加，后续可以考虑加入分配功能以增强灵活性；
3. 由于web.xml配置了首页路径与实际文件位置不一致的问题，在本地浏览器中打开可能无法正常显示页面效果，请在Tomcat服务器上部署后访问使用。
</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>CSS</span>与<span style=color: #f73131>HTML</span>布局<span style=color: #f73131>笔</span><span style=color: #f73131>记</span>"
href="https://d.itadn.com/i0_79394639795/B/797910" target="_blank"><span style=color: #f73131>前</span><span style=color: #f73131>端</span><span style=color: #f73131>CSS</span>与<span style=color: #f73131>HTML</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 ...">
本笔记涵盖了使用CSS和HTML进行高效网页设计的关键技巧和最佳实践，旨在帮助初学者掌握响应式布局、样式表优化及交互元素的设计方法。
前端笔记涵盖了HTML与CSS的核心内容：
在CSS部分有三种样式编写方式：
1. 内联样式：直接将样式代码加入到标签的style属性中，如`<p style=color:red;></p>`。这种方式仅对特定元素有效，并且不利于后期维护和复用。
2. 内部样式表：将所有需要使用的CSS规则写在HTML文档头部的<style>标签内。这种方法可以集中管理多个元素的样式设置，便于后续更新与调整。
3. 外部样式表：创建独立的.css文件并将该文件链接到HTML页面中使用`<link rel=stylesheet type=text/css href=路径>`来引入CSS代码。这种方式可实现跨页面统一风格，并且利于维护和重用，推荐采用。
选择器用于指定要应用样式的元素：
- 元素选择器：根据标签名选取特定的HTML元素。
- ID选择器：通过唯一ID值定位单个DOM节点。
- 类选择器：基于class属性来匹配一组相似或不同类型的多个元素实例。
- 通配符(*)、并集（,）、交集组合以及后代与子级等高级选择方法也提供了灵活的选择方式。
CSS声明块定义了具体样式：
每个声明由名称和值组成，用冒号分隔，并以分号结尾。例如`color: red; font-size: 20px;`
HTML语言用于构建网页结构：
- HTML文档的基本组成部分包括<html>、<head>（含<title>, <meta>等元素）以及<body>
- 常见的标签如标题(<h1>-<h6>)，段落(p)和换行(br)，水平线(hr), 内联框架(iframe)
- 超链接(a)通过href属性指定跳转地址并可选target控制打开方式
- 图片(img)使用src加载外部图片资源且需提供alt描述以备显示错误或搜索引擎抓取
此外，还介绍了xHTML语法标准和几种特殊的文本标签及列表类型。
</div><!---->
</div>
</li>
</body>
</html>
5星
