Web 前端开发基础知识_web前端开发的基础-优快云博客

本文链接：https://blog.youkuaiyun.com/xnxqwzy/article/details/146349624

Web 前端开发基础知识

Web 前端开发技术基础知识

一、HTML（超文本标记语言）

HTML（HyperText Markup Language）是构建网页结构和内容的基础语言。

1. 基本语法结构
- 标签：由尖括号 < 和 > 包围，如、、等。
- 元素：由开始标签、内容和结束标签组成，例如

这是一个段落

，其中

是开始标签，

是结束标签，中间的“这是一个段落”是内容。
- 属性：在开始标签中添加，用于提供关于元素的额外信息，例如示例图片

，其中 src 和 alt 是属性。

2. 文档结构
- 标签：整个 HTML 文档的根标签。
- 标签：包含关于文档的元数据，如页面标题、字符编码、外部样式表和脚本的链接等。
- 标签：用于定义页面的元信息，常见的有 charset （字符编码）、 viewport （视口设置）、 description （页面描述）等。
- 标签：设置网页的标题，显示在浏览器的标题栏。<br/> - 标签：包含网页的可见内容，如文本、图片、链接等。

3. 常用标签

- 文本相关
-

到

：用于定义不同级别的标题， h1 为最大级别， h6 为最小级别。
-

：段落标签。
-
：换行标签。
-

 ：预格式化文本标签，保留文本中的空格和换行。

- 列表

- 
  
  
   
    ：无序列表，使用  
   
   
 标签定义列表项。

- 
    
    
     
      ：有序列表，同样使用  
     
     
 标签定义列表项。

- 图像

-  ：用于插入图像，通过  src 属性指定图像的路径， alt 属性提供图像的替代文本，用于图像无法显示时的说明。

- 链接

-  ：超链接标签，通过  href 属性指定链接的目标地址，可以是另一个网页、文件或锚点。

- 表格

-  ：表格标签，内部包含   （行）和  
      
       （单元格）标签。
 - 表单
 - ：表单标签，用于收集用户输入的数据，包含各种表单元素，如 、 、 等。

二、CSS（层叠样式表）

CSS（Cascading Style Sheets）用于控制网页的样式和布局。

1. 引入方式
- 内联样式：直接在 HTML 元素的 style 属性中编写样式，例如

这是一个红色的块

。
- 内部样式表：在 HTML 文件的部分使用

- 外部样式表：将样式代码保存为独立的 .css 文件，然后在 HTML 文件的部分通过标签引入，例如：

2. 选择器
- 元素选择器：通过元素名称选择，如 p 选择所有的段落元素。
- 类选择器：以 .classname 的形式，可应用于具有指定类名的元素，例如 .red-text 。
- ID 选择器：以 #idname 的形式，每个页面中 ID 必须唯一，例如 #header 。
- 组合选择器
- 后代选择器：选择某个元素的后代元素，例如 div p 选择 div 元素内部的所有段落元素。
- 子代选择器：选择某个元素的直接子元素，例如 div > p 选择 div 元素的直接子段落元素。
- 相邻兄弟选择器：选择紧接在某个元素之后的同级元素，例如 h1 + p 选择紧跟在 h1 元素之后的第一个段落元素。
- 通用选择器： * 选择所有元素。

3. 样式属性

- 字体样式：包括 font-family （字体）、 font-size （字体大小）、 font-weight （字体粗细）、 font-style （字体样式，如斜体）等。
- 文本样式：如 color （文本颜色）、 text-align （文本对齐方式）、 text-decoration （文本装饰，如下划线、删除线等）、 line-height （行高）等。
- 背景样式： background-color （背景颜色）、 background-image （背景图片）、 background-repeat （背景图片重复方式）、 background-position （背景图片位置）等。
- 边框样式： border-width （边框宽度）、 border-style （边框样式，如实线、虚线等）、 border-color （边框颜色）。
- 盒模型相关： width （宽度）、 height （高度）、 padding （内边距）、 margin （外边距）。
- 定位和布局： position （定位方式）、 float （浮动）、 clear （清除浮动）、 display （显示方式，如 block 、 inline 、 inline-block 等）。

三、JavaScript

JavaScript 是一种脚本语言，用于为网页添加动态交互和逻辑功能。

1. 基本语法
- 变量声明：使用 var 、 let 、 const 关键字声明变量，例如 let num = 5; 。
- 数据类型：包括数字（ number ）、字符串（ string ）、布尔值（ boolean ）、对象（ object ）、数组（ array ）、函数（ function ）等。
- 操作符：算术运算符（如 + 、 - 、 * 、 / 等）、比较运算符（如 == 、 != 、 > 、 < 等）、逻辑运算符（如 && 、 || 、 ! ）等。
- 控制结构
- 条件语句： if-else 、 switch 。
- 循环语句： for 、 while 、 do-while 。
- 函数定义：可以使用函数声明或函数表达式的方式定义函数，例如 function myFunction() {… } 或 let myFunction = function() {… } 。

2. DOM（文档对象模型）操作
- 获取元素：通过 getElementById 、 getElementsByTagName 、 getElementsByClassName 等方法获取页面中的元素。
- 修改元素内容：可以修改元素的文本内容（ innerHTML 、 innerText ）、属性值（ getAttribute 、 setAttribute ）等。
- 事件处理：为元素添加事件监听器，如 click （点击）、 mouseover （鼠标悬停）、 keydown （按键按下）等，通过 addEventListener 方法添加事件处理函数。

3. 面向对象编程
- 创建对象：可以使用对象字面量、构造函数或 class 关键字创建对象。
- 继承：通过原型链或类继承实现对象之间的继承关系。

4. 异步编程

- Promise ：用于处理异步操作，并提供了一种更优雅的方式来处理异步操作的成功和失败。
- async/await ：基于 Promise ，提供了更类似于同步代码的异步编程方式。

四、网页布局

1. 浮动布局（Float）
- 原理：通过设置元素的 float 属性为 left 或 right ，使元素向左或向右浮动。
- 清除浮动：使用 clear 属性清除浮动的影响，常见的方法有在浮动元素后面添加一个空的元素并设置 clear: both ，或者使用 overflow: hidden 等方式。

2. 定位布局（Position）
- static ：默认值，元素按照正常文档流布局。
- relative ：相对定位，相对于元素在正常文档流中的位置进行偏移，不影响其他元素的布局。
- absolute ：绝对定位，相对于最近的已定位祖先元素进行定位，如果没有已定位的祖先元素，则相对于文档的初始包含块（通常是元素）定位。
- fixed ：固定定位，相对于浏览器窗口进行定位，滚动页面时元素位置不变。

3. Flex 布局
- 容器属性： display: flex 定义容器为 Flex 布局， flex-direction （主轴方向）、 justify-content （主轴对齐方式）、 align-items （交叉轴对齐方式）等。
- 项目属性： flex-grow （扩展比例）、 flex-shrink （收缩比例）、 flex-basis （项目的初始大小）等。

4. Grid 布局

- 定义网格容器：使用 display: grid 。
- 网格线定义：通过 grid-template-columns 和 grid-template-rows 定义列和行的大小和数量。
- 项目定位：使用 grid-column 和 grid-row 属性指定项目在网格中的位置。

五、响应式设计

1. 媒体查询（Media Queries）
- 根据不同的设备特性（如屏幕宽度、高度、方向、分辨率等）应用不同的 CSS 样式。
- 常见的媒体类型： screen （屏幕设备）、 print （打印设备）等。
- 例如： @media screen and (max-width: 600px) {… } 表示当屏幕宽度小于 600 像素时应用的样式。

2. 弹性布局和弹性单位
- 使用相对单位，如百分比（ % ）来设置元素的宽度和高度，使其能够自适应屏幕大小。
- em 和 rem 单位： em 基于父元素的字体大小， rem 基于根元素（）的字体大小。

3. 图片响应式

- 元素：根据不同的条件加载不同的图片源。
- srcset 属性：在标签中使用，提供多个图片源和对应的宽度描述，浏览器根据屏幕条件选择合适的图片加载。

六、前端框架和库

1. Vue.js
- 核心概念：组件化、数据驱动视图、指令、双向数据绑定等。
- 组件通信：父组件向子组件传递数据、子组件向父组件发送事件等。
- 路由管理：通过 Vue Router 实现页面的路由切换。
- 状态管理：使用 Vuex 管理应用的全局状态。

2. React
- 基于组件：使用函数组件或类组件构建用户界面。
- 虚拟 DOM：通过比较虚拟 DOM 和真实 DOM 的差异，实现高效的页面更新。
- 钩子函数：在函数组件中使用钩子函数（如 useState 、 useEffect 等）管理状态和副作用。
- 路由：可以使用 React Router 进行路由配置。

3. Angular
- 模块系统：将应用划分为不同的模块。
- 依赖注入：方便地管理组件之间的依赖关系。
- 模板和指令：强大的模板语法和丰富的指令集。
- 服务和路由：提供了内置的服务和路由功能。

4. jQuery

- 选择器：提供了简洁的方式选择 DOM 元素。
- 操作 DOM：方便地添加、删除、修改元素的属性和内容。
- 事件处理：简单地绑定和解绑各种事件。
- 动画效果：实现简单的动画效果，如淡入淡出、滑动等。

七、版本控制 - Git

1. 工作流程
- 初始化仓库：在项目目录中使用 git init 命令创建一个新的 Git 仓库。
- 添加和提交更改：使用 git add 命令将修改的文件添加到暂存区，然后使用 git commit 命令提交更改，并添加描述信息。
- 分支管理：创建、切换、合并分支，如 git branch 、 git checkout 、 git merge 等命令。
- 推送和拉取：将本地更改推送到远程仓库（ git push ），从远程仓库获取最新更改（ git pull ）。

2. 版本回退
- 查看历史：使用 git log 命令查看提交历史。
- 回退到特定版本：使用 git reset 命令回退到指定的提交。

3. 远程仓库

- 关联远程仓库：使用 git remote add 命令添加远程仓库的地址。
- 与远程仓库交互：如推送和拉取更改。

八、浏览器兼容性

1. 常见兼容性问题
- 盒模型差异：不同浏览器对盒模型的计算方式可能不同，如 width 和 height 的包含内容不同。
- CSS 样式解析差异：某些 CSS 属性在不同浏览器中的表现可能不一致，如 margin 、 padding 的合并和计算方式。
- JavaScript 新特性支持：某些较新的 JavaScript 特性在旧版本浏览器中可能不被支持。

2. 解决方法

- 重置样式表：使用通用的 CSS 重置样式表，统一不同浏览器的默认样式。
- 特性检测：通过 JavaScript 检测浏览器是否支持特定的功能，然后采取相应的处理方式。
- 渐进增强和优雅降级：先为支持新特性的浏览器提供更好的体验，然后为不支持的浏览器提供基本的功能。

九、性能优化

1. 图片优化
- 压缩图片：使用工具（如 Photoshop 、TinyPNG 等）压缩图片大小，减少文件体积。
- 选择合适的图片格式：根据图片的内容和用途选择合适的格式，如 JPEG 适用于照片，PNG 适用于透明图片，WebP 是一种高效的现代格式。

2. 代码压缩
- 去除空格和注释：在发布代码时，使用工具（如 UglifyJS 、Terser 等）去除代码中的空格、换行和注释，减小文件大小。

3. 缓存设置
- 设置 HTTP 缓存头：通过服务器配置（如 Apache 、Nginx ）或在代码中设置响应头，指示浏览器缓存资源，减少重复请求。

4. 减少 HTTP 请求

- 合并 CSS 和 JavaScript 文件：将多个 CSS 和 JavaScript 文件合并为一个文件，减少请求数量。
- 使用雪碧图（CSS Sprite）：将多个小图片合并为一张大图，通过 CSS 控制显示部分，减少图片请求。

十、开发工具

1. Visual Studio Code
- 扩展支持：拥有丰富的扩展生态，可以安装各种语言的插件，如 HTML、CSS、JavaScript 的语法高亮、代码提示等插件。
- 调试功能：支持通过安装插件进行 JavaScript 调试。
- 版本控制集成：与 Git 等版本控制系统集成，方便进行代码管理。

2. WebStorm
- 智能代码提示：提供强大的代码自动完成和智能提示功能。
- 集成开发环境：具有完善的项目管理、调试、测试等功能。
- 代码重构支持：方便地进行代码重构操作，提高代码质量。

3. 浏览器的开发者工具

- 元素审查：查看和修改页面元素的样式和结构。
- 控制台：输出调试信息，执行 JavaScript 代码。
- 网络面板：查看页面的网络请求和响应，分析加载性能。
- 性能面板：分析页面的性能指标，如加载时间、内存使用等。

综上所述，这些 Web 前端开发的基础知识涵盖了从页面结构构建到样式设计、交互实现、性能优化以及开发工具的使用等多个方面，是成为一名优秀的 Web 前端开发人员的必备基石。