Web前端开发基础

1.前端概论

1.1 什么是前端？

概念：前端(Front-End)，也称为客户端(Client-Side)，指的是用户在使用网站或Web应用时直接看到并与之交互的部分 。它涵盖了屏幕上的一切内容，从文字、图片、按钮、布局到动画效果
一个简单的比喻：

前端就像是餐厅的用餐区、菜单、装潢和服务员。顾客在这里点餐、用餐并享受服务，这一切都是可见的

后端(Back-End)则是餐厅的厨房，负责处理订单、烹饪食物和管理库存，顾客通常看不到这个过程

前端开发的核心目标是：打造一个在视觉上吸引人、交互流畅、性能优异且可访问性强的用户体验(User Experience, UX)

1.2 核心技术基石(前端三剑客)

任何网站或应用的前端都构建在三大核心技术之上：

1.HTML (超文本标记语言)

定位：结构层 ，它是网页的骨架和基础

作用：定义网页的内容结构，如标题、段落、列表、图片、链接、表单等。它使用一系列标签来标记内容，告诉浏览器这里是什么

2.CSS (层叠样式表)

定位：表现层 ，它是网页的皮肤和衣服

作用：负责网页的样式和布局，控制HTML内容在屏幕上的呈现方式。包括颜色、字体、间距、大小、位置、响应式布局（适应不同屏幕尺寸）以及动画效果

3.JavaScript (JS)

定位：行为层 ，它是网页的肌肉和大脑

作用：让网页动起来，具有交互性和动态功能。例如：处理用户点击、输入验证、与后端服务器通信获取数据、实现复杂的动画等。JS是现代前端开发的灵魂

2.HTML

HTML (超文本标记语言)

定位：结构层 ，它是网页的骨架和基础

作用：定义网页的内容结构，如标题、段落、列表、图片、链接、表单等。它使用一系列标签来标记内容，告诉浏览器这里是什么

2.1 HTML结构

2.1.1 认识HTML标签

HTML 标签通常由以下几个部分组成：

开始标签：包含在尖括号 < > 内，用于标记元素的开始

结束标签：与开始标签类似，但在标签名前多了一个斜杠 /，用于标记元素的结束

属性：位于开始标签内，用于提供元素的额外信息，通常以键值对的形式出现

内容：位于开始标签和结束标签之间的部分，可以是文本、其他元素或两者混合

2.1.2 HTML文件结构

在Visual Studio Code 中创建xxx.html文件，输入英文符号!后点击tab 或者enter键，能自动生成代码的主体框架

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
</head>
<body>
    
</body>
</html>

< !DOCTYPE html >：文档类型声明，用于告诉浏览器使用的是HTML5版本

< html lang="en" >< /html >：HTML元素的容器，lang属性指定文档的语言(如en表示英语)

< head >< /head >：包含元数据(如标题、字符集)，不会直接显示在页面中

< meta charset="UTF-8" >：定义字符编码

< meta name="viewport" content="width=device-width, initial-scale=1.0" >

viewport：指的是设备的屏幕上能用来显示我们的网页的那一块区域

width=device-width：将视口的宽度设置为设备的屏幕宽度。这样网页的布局会基于设备的实际宽度进行渲染，而不是默认的桌面端宽度(通常为980px)。这能避免移动设备上出现横向滚动条或缩放不当的问题

initial-scale=1.0：设置网页首次加载时的缩放比例为1.0(即不缩放)。这能确保网页以原始尺寸显示，避免默认的缩放行为导致内容显示不全或模糊

< title >< /title > ：设置浏览器标签页标题

< body >< /body >：包含所有可见的页面内容

2.2 注释标签

作用：用于在源代码中添加说明或临时隐藏代码，不会在浏览器中显示
快捷键：Ctrl + /

html 复制代码

<!-- 这是一段代码示例 -->

2.3 标题标签h

作用：定义标题的标签，从< h1 >到< h6 >，数字越小表示层级越高，重要性越强

语法：

html 复制代码

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

2.4 段落p/换行标签br

段落标签p

作用：定义文本段落，浏览器会自动在段落前后添加空白间距，使内容更易阅读

语法：

html 复制代码

<p>
	第一段，这是第一段的内容
</p>
<p>
	第二段，这是第二段的内容
</p>

换行标签br

作用：强制换行，通常用于段落内或需要手动分隔内容的场景

语法：

html 复制代码

<p>
	第一段，这是第一行的内容</br>
	第一段，这是第二行的内容</br>
	第一段，这是第三行的内容</br>
</p>

2.5 格式化标签

2.5.1 加粗标签strong/b

strong：不仅会使文本加粗，还在语义上表示重要内容，适合用于强调关键信息
b：用于将文本加粗显示，但不具有语义上的强调作用，仅表示样式上的加粗

语法：

html 复制代码

<strong>这段文字会加粗并具有强调语义</strong></br>
<b>这段文字会加粗显示</b>

在 HTML5 中，< strong > 更推荐用于强调重要内容，而 < b > 仅用于样式加粗

2.5.2 倾斜标签em/i

em：表示强调内容，浏览器默认渲染为斜体，但实际语义是强调，适合重要文本
i：仅表示样式倾斜，无强调语义，常用于图标、术语或特殊文本

语法：

html 复制代码

<!-- 使用<em>强调重要内容 -->
<p>
	请务必在<em>周五之前</em>提交报告
</p>
<!-- 使用<i>实现无语义斜体 -->
<p>
	术语<i>量子纠缠</i>源自物理学
</p>

2.5.3 删除标签del/s

del：表示文档中已被删除的文本 ，通常用于标记内容的更新或修订，浏览器默认会为标签内的文本添加删除线，表示内容已被移除
s：表示不再准确或不再相关的内容 ，浏览器默认也会为标签内的文本添加删除线，但语义上更侧重于失效或过时，而非删除

语法：

html 复制代码

<del>这段文本已被删除</del></br>
<s>这段文本已过时</s>

2.5.4 下划线标签ins/u

ins：表示文档中新增的内容，通常用于版本对比或内容更新，浏览器默认渲染为下划线
u：仅表示纯视觉上的下划线，无特定逻辑含义

语法：

html 复制代码

<p>
	原价：<del>100元</del></br>
	现价：<ins>80元</ins>
</p>
<p>
	请特别注意：<u>截止日期</u>为本周五
</p>

2.6 图片标签img

作用：用于在网页上嵌入图像的核心元素，通过src属性指定图片路径，alt属性提供替代文本
专属属性：

src：指定图片URL(相对路径或绝对路径)

alt ：图片无法加载时显示的替代文本

title ：用于为图像提供额外的信息或描述。当用户将鼠标悬停在图像上时，会显示一个工具提示框，展示 title 属性的内容

语法：

html 复制代码

<img src="./R-C.jpg" alt="图片加载失败" title="这是一张图片">

2.7 超链接标签a

作用：是 HTML 中用于创建超链接的标签，通常用于跳转到其他页面、文件或同一页面的某个锚点
专属属性：

href：指定链接的目标地址，可以是 URL、文件路径或锚点

target ：控制链接的打开方式

_self(默认)：当前标签页打开

_blank：新标签页打开

语法：

html 复制代码

<!-- 新标签页打开 -->
<a href="https://www.baidu.com" target="_blank">跳转到百度</a>

2.8 表格标签table

作用：在HTML中定义表格，内部包含行(< tr >)、表头单元格(< th >)和数据单元格(< td >)
专属属性：

colspan：横向合并单元格(从左往右)

rowspan ：纵向合并单元格(从上往下)

语法：

html 复制代码

<table>
    <thead>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
    </thead>
    <tbody>
        <tr>
            <td>张三</td>
            <!-- 纵向合并2格 -->
            <td rowspan="2">男</td>
            <td>3</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>4</td>
        </tr>
        <tr>
        	<!-- 横向合并2格 -->
            <td colspan="2">王五/女</td>
            <td>5</td>
        </tr>
    </tbody>
</table>

2.9 列表标签

2.9.1 无序列表ul

作用：用于展示一组没有特定顺序的项目，通常以项目符号圆点、方块等标记每一项(默认显示为圆点符号)。适用于内容并列、无优先级区分的情况
专属属性：

type ：指定列表项的标记类型

disc：默认值，实心圆点(●)

circle：空心圆点(○)

square：实心方块(■)

语法：

html 复制代码

<ul type="square">
    <li>内容1</li>
    <li>内容2</li>
    <li>内容3</li>
</ul>

2.9.2 有序列表ol

作用：用于展示需要按顺序排列的项目，通常以数字或字母标记每一项(默认显示为数字序号)。适用于步骤、排名等有明确顺序的场景
专属属性：

type ：指定列表项的标记类型

1：默认值，数字编号(1, 2, 3...)

A：大写字母编号(A, B, C...)

a：小写字母编号(a, b, c...)

I：大写罗马数字(I, II, III...)

i：小写罗马数字(i, ii, iii...)

start ：指定有序列表的起始编号。默认情况下，列表从1开始编号，但通过start可以自定义起始值

语法：

html 复制代码

<ol type="A" start="10">
    <li>内容1</li>
    <li>内容2</li>
    <li>内容3</li>
</ol>

2.10 表单标签

2.10.1 form标签

作用：用于创建用户输入的表单，通常包含输入框、按钮等元素 ，用于收集用户数据并提交到服务器
专属属性：

action：指定表单数据提交的URL。若省略，默认提交到当前页面

method：定义数据提交的HTTP方法，常用GET或POST

target：指定响应显示的位置，如_blank(新窗口)或_self(当前窗口)

enctype: 控制表单数据的编码方式，尤其在上传文件时需设为multipart/form-data

语法：

html 复制代码

<form action="test.html" method="post" target="_blank">
<!-- form的内容 -->
</form>

2.10.2 input标签

作用：是HTML表单的核心元素，用于创建交互式控件，允许用户输入数据。其类型由type 属性决定，未指定时默认为text
专属属性：

type ：指定输入类型

text(默认)：单行文本输入框

password：密码输入框(内容显示为掩码)

checkbox：复选框，允许多选

radio：单选框，需通过 name 分组实现互斥选择

button：普通按钮

submit：提交表单数据

file：上传文件

reset：将表单中的所有输入字段恢复到它们的初始默认值

语法：

html 复制代码

姓名<input type="text"><br>
密码<input type="password"><br>
<!-- 单选框 -->
性别<input type="radio" name="gender">男
<input type="radio" name="gender" checked>女
<input type="radio" name="gender">保密<br>
<!-- 复选框 -->
爱好<input type="checkbox">吃饭
<input type="checkbox">睡觉
<input type="checkbox">玩游戏</br>

<input type="button" value="这是一个普通按钮" onclick="alert('Hello')"><br>
<input type="submit" value="提交">
<input type="reset" value="清空">
<input type="file" value="选择文件">

2.10.3 label标签

作用：通过将label与表单元素关联，用户可以点击标签来聚焦或选中对应的控件，提升用户体验和可访问性

语法：
隐式关联：将表单控件包裹在label标签内，无需使用for属性

html 复制代码

<label>
  用户名：
  <input type="text" name="username">
</label>

显式关联：通过for属性与表单元素的id属性关联

html 复制代码

<label for="male">男</label>
<input type="radio" name="sex" id="male">
<label for="female">女</label>
<input type="radio" name="sex" id="female">

2.10.4 select标签

作用：用于创建下拉列表，用户可以从预定义的选项中选择一个或多个值。通常与 < option > 标签配合使用
专属属性：

selected ：设置默认选中的选项

语法：

html 复制代码

<select name="" id="">
    <option value="">--请选择年份--</option>
    <option value="" selected>2021</option>
    <option value="">2022</option>
    <option value="">2023</option>
</select>

2.10.5 textarea标签

作用：用于创建多行文本输入框
专属属性：

rows：指定文本区域的可见行数，默认值为2

cols：指定文本区域的可见列数(宽度)，以字符数为单位，默认值为20

placeholder ：显示提示文本，当用户输入内容时消失

disabled：禁用文本区域，用户无法编辑

readonly：设置为只读，用户无法修改内容但可以选中和复制

语法：

html 复制代码

<textarea cols="20" rows="10" placeholder="请输入"></textarea>

2.11 无语义标签

2.11.1 div标签

作用：是HTML中的一个块级元素，用于将文档分割为独立的、可样式化的部分。它本身不携带任何语义，主要用于布局和样式控制

2.11.2 span标签

作用：是HTML中的一个行内元素，通常用于对文本或其他行内元素进行分组或样式化。它本身不会带来任何视觉变化，但可以与CSS或JavaScript结合使用，实现对特定内容的精确控制

3.CSS

CSS (层叠样式表)

定位：表现层 ，它是网页的皮肤和衣服

作用：负责网页的样式和布局，控制HTML内容在屏幕上的呈现方式。包括颜色、字体、间距、大小、位置、响应式布局（适应不同屏幕尺寸）以及动画效果

3.1 引入方式

内联样式：直接在HTML元素的style属性中编写CSS，优先级最高但不利于维护

内部样式表：在HTML文件的< head >标签内通过< style >标签定义CSS，适用于单页面样式

外部样式表：通过< link >标签引入独立的.css文件，实现样式与结构分离，推荐使用

3.2 选择器

作用：是CSS中用于定位和选择HTML元素的工具，允许开发者对特定元素应用样式或行为

类型：

元素选择器：直接匹配HTML标签名称

html 复制代码

<!-- 内部样式表 -->
<style>
    div{
        <!-- 自定义属性 -->
    }
</style>

类选择器：通过.前缀匹配class属性

html 复制代码

<style>
    .className{
        <!-- 自定义属性 -->
    }
</style>

id选择器：通过#前缀匹配唯一id属性

html 复制代码

<style>
    #id{
        <!-- 自定义属性 -->
    }
</style>

通配选择器：*匹配所有元素

html 复制代码

<style>
    *{
        <!-- 自定义属性 -->
    }
</style>

4.JavaScript

JavaScript (JS)

定位：行为层 ，它是网页的肌肉和大脑

作用：让网页动起来，具有交互性和动态功能。例如：处理用户点击、输入验证、与后端服务器通信获取数据、实现复杂的动画等。JS是现代前端开发的灵魂

4.1 引入方式

行内式：事件属性直接写在HTML标签中

html 复制代码

<button onclick="alert('行内式JS')">点击</button>

内嵌式：通过< script >标签在HTML文件内部编写JS代码，通常放在< head >或< body >末尾

html 复制代码

<script>
  console.log('内嵌式JS');
</script>

外部式：通过< script src >引入独立.js文件，实现结构与行为分离

html 复制代码

<script src="script.js"></script>

4.2 输入输出

4.2.1 alert

作用：用于在浏览器中弹出警告框，显示指定的消息。会阻塞代码执行，直到用户点击确定(仅支持字符串显示，复杂对象会被转换为[object

Object])

语法：

javascript 复制代码

alert("操作成功！");

4.2.2 console

作用：用于在浏览器的开发者工具控制台输出信息，支持多种日志级别(如

log、warn、error)

语法：

javascript 复制代码

console.log("调试信息"); // 输出普通日志
console.warn("警告内容"); // 输出黄色警告
console.error("错误详情"); // 输出红色错误

4.2.3 prompt

作用：用于显示一个对话框，提示用户输入文本。它会阻塞代码执行，直到用户关闭对话框

语法：

javascript 复制代码

let userInput = prompt(message, defaultText);

meassage：对话框中显示的提示文本
defaultText(可选)：输入框中的默认值

返回值：用户点击确定按钮时，prompt返回输入框中的字符串内容；如果用户点击取消按钮或关闭对话框，则返回null

4.3 变量声明

var：函数作用域 ，可重新赋值，可重新声明，存在变量提升

let：块级作用域，可重新赋值，不可重新声明

const：块级作用域，不可重新赋值，不可重新声明

函数作用域：指的是在函数内部声明的变量，仅在该函数内部可见(作用域大于Java中的局部变量的作用域)

块级作用域：指的是在代码块内部声明的变量，仅在其所在的代码块内有效(更接近Java中的局部变量的作用域)
变量提升：指的是在代码执行前，变量和函数的声明会被提升到当前作用域的顶部。需要注意的是，变量提升仅作用于声明部分，而赋值操作会保留在原来的位置

4.4 函数

4.4.1 函数声明

函数声明：JavaScript函数通过function关键字定义

javascript 复制代码

function functionName(parameters) {
  //函数体
  return value; //可选
}

命名函数：显式声明函数名，如function calculate() {}
匿名函数：可赋值给变量或作为回调，如const fn = function() {}。fn是函数指针，而不是函数的返回值

4.4.2 箭头函数

箭头函数(Arrow Function)是ES6引入的简洁函数语法，与传统函数相比具有独特特性

单参数简化：参数只有一个时可以省略括号；函数体只有一行时可以省略{}，此时自带return

javascript 复制代码

// 传统函数
const square = function(x) {
    return x * x;
};
// 箭头函数
const square = x => x * x;  //隐式返回结果,相当于return x * x

匿名性：箭头函数默认是匿名的，上述代码中的square是函数指针

4.5 对象

4.5.1 创建对象

1.使用字面量创建对象(常用)

javascript 复制代码

const person = {
    name: 'John',
    age: 30,
    greet: function() {
        console.log('Hello!');
  }
};

2.使用new Object创建对象

javascript 复制代码

const person = new Object();
person.name = 'John';
person.age = 30;
person.greet = function(){
    console.log('Hello!');
}

3.使用构造函数创建对象

javascript 复制代码

//构造函数
function Person(name,age){
    this.name = name;
    this.age = age;
    this.greet = function(){
        console.log('Hello');
    }
}
const person = new Person('John',30);

4.5.2 访问属性

1.通过点表示法访问对象属性

javascript 复制代码

console.log(person.name);//'John'
console.log(person.age);//30

2.通过方括号访问对象属性

javascript 复制代码

console.log(person['name']);//'John'
console.log(person['age']);//30