新手入门：Web前端开发基石与Vue框架详解

需积分: 0 11 浏览量更新于2024-06-26 2 收藏 175KB DOCX 举报

"web前端开发学霸笔记"是一份全面且适合新手入门的教程，主要关注HTML、CSS、JavaScript以及Vue.js等核心技术的学习。该资源旨在帮助读者建立起扎实的前端基础，通过理解并掌握这些关键技术，提升开发效率。 1. **HTML基础知识**： HTML（超文本标记语言）是构建网页内容结构的基础。它负责组织和展示页面内容，包括文本、图像、链接等元素。HTML使用单标记和双标记形式，如`<a>`用于创建超链接，`<img>`用于插入图片，其中`src`属性指定图片地址，`alt`属性则提供了图片不可用时的替代文本。 2. **CSS：样式与布局**： CSS（层叠样式表）主要用于控制网页的外观和布局。它能够设置元素的颜色、字体、大小、位置等，使得HTML内容具有视觉吸引力。CSS允许对多个元素应用统一的样式，方便管理和维护复杂的页面样式。 3. **JavaScript：动态交互**： JavaScript是运行在浏览器端的脚本语言，用于实现页面的动态交互。开发者可以通过JavaScript处理用户的输入，实现页面响应和操作DOM（文档对象模型），进行动画效果、数据验证等工作。 4. **Vue.js框架**： Vue.js是一个轻量级的前端开发框架，其特点之一是双向数据绑定，简化了数据管理，提高了开发效率。同时，资源库如Bootstrap和Element UI提供了预设的样式和组件，便于快速构建界面。 5. **环境搭建与工具**：开发者无需特殊环境，常用的开发工具有HBuilderX、Visual Studio Code（VSCode）和WebStorm，它们提供代码编辑、调试、自动补全等功能，简化了开发流程。 6. **常用开发元素**：学习过程中还会涉及如`<!DOCTYPE html>`声明文档类型，`<meta charset="utf-8">`设置字符编码，`<title>`定义页面标题，`<body>`承载页面主要内容，以及`<br>`实现换行。此外，地图元素 `<map>`与 `<area>`结合使用，可以创建自定义链接区域。这份笔记对于希望进入前端开发领域的学习者来说是一份实用的学习指南，涵盖了从基础语法到框架应用的全方位内容，有助于新手快速入门并建立起前端开发技能体系。

等

Thead 表示：表头（标题）

在 thead 中，仍然使用 tr 组织“行”；th 是标题行中的“列”；默认加粗并居中

tbody 表示：表体（内容）

Tfoot 表示：表尾（注脚）

在 tbody 和 tfoot 中，使用 tr 表示行，使用 td 表示列，默认不加粗，靠左显示

Caption：在表格中给表格添加标题，放在表头前，标题会居中显示

Eg：<table border="1" width="600px" height="300px" cellspacing="0">

<caption>学生信息统计表</caption>

<thead>

<tr>

</tr>

</thead>

<tbody>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</tbody>

<tfoot>

<tr>

</tr>

</tfoot>

</table>

单元格合并：

Rowspan：可以实现“行合并”

Colspan：可以实现“列合并”

合并时将多余的单元格删掉，合并顺序自上而下，从左到右，合并时们不能跨 thead、

tbody、tfoot

补充：

可以在 table 里设置整个表格的行高/列宽

也可以单独设置行高，若不设置整体的行高列宽，默认内容够用即可，设置了整体的行高列

表，再单独设置某一行的行高，剩下的行的行高均分整体行高剩余的高度，由于行是依附列

的存在，没有列，就不存在行，所以，不能单独设置某一行的宽度，可以设置列的宽度。

层布局

“层”泛指页面上任意可以独立存在的双标记，按照设计需要对其进行位置的设置

常用标记：div，没有默认样式，独立成行，是一个块状元素，具有阻塞的性质

有点：独立性，单独成行，在页面布局中，table 也可以进行布局，但是 table 布局在加载页

面加载时，会将所有的 td 加载出来之后在一起显示，体验感较差，而用 div，因 div 具有独

立性，会单独加载呈现

Div 为三维布局，立体感更好

Span 也可以用于层布局，以列的方式呈现，但不能改变列宽，想让内容一起显示就使用 table，

互补影响的话就使用 div

框架布局：

作用：使多个页面内容在同一浏览器（选项卡）中同时显示，并可以根据需要分割，布局。

常用标记：

Framset：不能和 body 同时出现，、

Framset 标签的作用，使当前页面进行其他页面内容的显示设置，页面本身的 body 标签失

效；有 body 无框架，有框架无 body；

常用属性：rows 对多个页面进行“行”布局

Cols 对多个页面进行“列”布局

Eg：<frameset rows="30%,*" frameborder="0">

-----使用 rows 属性，页面上下显示，第一个页面占 30%，第二个占剩下的。可以使用 cols

进行左右布局

--------framset 内部可以嵌套使用 framset 标签，添加后，此页面为上，左右布局

剩余44页未读，继续阅读

三亚天涯龙之主信息科技工作室

粉丝: 1w+
资源: 102

新手入门：Web前端开发基石与Vue框架详解

Web前端开发初级：理论与实操样题集

1+X Web前端开发实操题集锦与技巧分析

Web前端开发：现状、挑战与未来展望

达16年Web前端开发精华笔记：HTML5-CSS3-JavaScript

Web前端笔记.js

掌握前端技能：1+X Web前端开发实战例题解析

提升团队协作的Web前端开发规范指南

Web前端开发实战：后台管理系统构建

2020年Web前端开发面试题全面解析

HTML5入门：开启Web前端开发之旅

最新资源