Web前端开发基础

用户11873138

发布于 2026-01-13 21:39:49

8260

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键，能自动生成代码的主体框架

<!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 + /

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

2.3 标题标签h

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

语法：

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

2.4 段落p/换行标签br

段落标签p

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

语法：

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

换行标签br

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

语法：

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

2.5 格式化标签

2.5.1 加粗标签strong/b

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

语法：

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

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

2.5.2 倾斜标签em/i

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

语法：

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

2.5.3 删除标签del/s

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

语法：

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

2.5.4 下划线标签ins/u

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

语法：

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

2.6 图片标签img

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

src：指定图片URL(相对路径或绝对路径)
alt：图片无法加载时显示的替代文本

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

语法：

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

2.7 超链接标签a

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

href：指定链接的目标地址，可以是 URL、文件路径或锚点
target：控制链接的打开方式
- _self(默认)：当前标签页打开
- _blank：新标签页打开

语法：

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

2.8 表格标签table

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

专属属性：

colspan：横向合并单元格(从左往右)
rowspan：纵向合并单元格(从上往下)

语法：

<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：指定列表项的标记类型

语法：

<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可以自定义起始值

语法：

<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

语法：

<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：将表单中的所有输入字段恢复到它们的初始默认值

语法：

姓名<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属性

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

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

<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：设置默认选中的选项

语法：

<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：设置为只读，用户无法修改内容但可以选中和复制

语法：

<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标签名称

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

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

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

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

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

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

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

4.JavaScript

JavaScript (JS)

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

4.1 引入方式

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

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

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

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

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

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

4.2 输入输出

4.2.1 alert

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

语法：

alert("操作成功！");

4.2.2 console

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

语法：

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

4.2.3 prompt

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

语法：

let userInput = prompt(message, defaultText);

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

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

4.3 变量声明

var：函数作用域，可重新赋值，可重新声明，存在变量提升
let：块级作用域，可重新赋值，不可重新声明
const：块级作用域，不可重新赋值，不可重新声明
函数作用域：指的是在函数内部声明的变量，仅在该函数内部可见(作用域大于Java中的局部变量的作用域)

块级作用域：指的是在代码块内部声明的变量，仅在其所在的代码块内有效(更接近Java中的局部变量的作用域)

变量提升：指的是在代码执行前，变量和函数的声明会被提升到当前作用域的顶部。需要注意的是，变量提升仅作用于声明部分，而赋值操作会保留在原来的位置

4.4 函数

4.4.1 函数声明

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

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

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

4.4.2 箭头函数

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

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

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

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

4.5 对象

4.5.1 创建对象

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

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

2.使用new Object创建对象

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

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

//构造函数
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.通过点表示法访问对象属性

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

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

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

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2025-10-20，如有侵权请联系 cloudcommunity@tencent.com 删除

函数

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度

Web前端开发基础

Web前端开发基础

1.前端概论

1.1 什么是前端？

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

2.HTML

2.1 HTML结构

2.1.1 认识HTML标签

2.1.2 HTML文件结构

2.2 注释标签

2.3 标题标签h

2.4 段落p/换行标签br

2.5 格式化标签

2.5.1 加粗标签strong/b

2.5.2 倾斜标签em/i

2.5.3 删除标签del/s

2.5.4 下划线标签ins/u

2.6 图片标签img

2.7 超链接标签a

2.8 表格标签table

2.9 列表标签

2.9.1 无序列表ul

2.9.2 有序列表ol

2.10 表单标签

2.10.1 form标签

2.10.2 input标签

2.10.3 label标签

2.10.4 select标签

2.10.5 textarea标签

2.11 无语义标签

2.11.1 div标签

2.11.2 span标签

3.CSS

3.1 引入方式

3.2 选择器

4.JavaScript

4.1 引入方式

4.2 输入输出

4.2.1 alert

4.2.2 console

4.2.3 prompt

4.3 变量声明

4.4 函数

4.4.1 函数声明

4.4.2 箭头函数

4.5 对象

4.5.1 创建对象

4.5.2 访问属性

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐