前端基石：HTML+CSS+JS布局与页面切换技巧详解

本资源是一份详细的前端开发HTML、CSS和JavaScript总结笔记，旨在帮助前端学习者系统地掌握这三个核心技术。学习路径建议按照HTML构建页面结构、CSS负责样式设计和JavaScript实现交互逻辑的顺序进行。 1. **HTML基础与框架**: HTML主要负责页面内容的结构化，如标题、导航、主要内容区域和版权信息的组织。预定义标签如`<pre>`用于展示代码格式，`<marquee>`用于实现滚动的文字效果，`<dl>`和`<dt>`、`<dd>`用于定义列表（如咖啡的定义），`<label>`配合`<input>`创建表单元素，使用户输入时焦点自动跳转。 2. **CSS布局技术**: 流体布局是通过百分比宽度结合`float`属性实现元素随窗口尺寸变化而调整，如左右两侧自适应宽度。流体定位布局则是使用`position:absolute`，指定元素相对于其父元素定位。固定布局中，元素有固定大小并使用`float`，固定定位则利用`position: relative`与`absolute`，设置元素相对于文档的固定位置。 3. **页面切换与链接控制**: 页面切换通常涉及内容复用，虽然代码相同，但显示区域不同。通过`<a>`标签，可以控制链接跳转到内部或外部页面，并设定打开方式。`<img>`标签用于图片显示，包括静态图片、动态GIF和嵌入视频，还支持地图链接（通过`<map>`标签和`<area>`）。 4. **表格布局与细节**: `<table>`标签用于创建表格，通过`border`、`cellspacing`和`cellpadding`控制外观。在表格内，形状如圆形或矩形的链接区域可通过`<area>`定义。 这份笔记提供了前端开发者必备的基础知识，覆盖了从HTML的页面搭建、CSS的灵活布局到JavaScript的交互实现，对学习者理解和实践前端开发非常实用。无论是初学者还是有一定经验的开发者，都可以从中找到适合自己的学习资源和参考点。