前端开发的核心技术主要围绕 HTML、CSS、JavaScript 三大基础语言展开,同时结合现代前端开发的需求,还包括 前端框架、构建工具、前端安全和性能优化 等内容。下面,我们详细解析前端开发中的核心技术。
HTML(HyperText Markup Language)是前端开发的基础,用于构建网页的结构。HTML 由各种标签(Tag) 组成,每个标签都有不同的作用,主要用于定义文本、图片、链接、表单等网页元素。
一个标准的 HTML5 文档结构如下:
我的网页
欢迎来到我的网站
这是一个 HTML 示例页面。
:声明 HTML5 版本,确保浏览器按照标准模式解析网页。
:定义 HTML 文档,lang="zh-CN"
表示页面语言为中文。
:头部区域,包含网页的元信息(meta)、标题(title)、样式表等。
:网页的主体部分,包含可见内容(文本、图片、按钮等)。HTML 提供多种标签来定义网页上的文本内容:
一级标题
二级标题
这是一个段落。
加粗文本 强调文本
斜体文本 加重语气
下划线文本 删除线文本
高亮文本
~
:标题标签,h1
最大,h6
最小。
:段落标签,自动换行。
/
:加粗文本,
语义化更强。
/
:斜体文本,
语义化更强。
:下划线文本,
:高亮文本。超链接用于在网页之间跳转:
访问示例网站
href="URL"
:链接的目标地址。target="_blank"
:在新窗口打开链接。title="提示文本"
:鼠标悬停时显示提示信息。锚点链接(跳转到页面内特定位置):
跳转到第1部分
第1部分
id="section1"
:标记锚点目标位置。href="#section1"
:点击后跳转到该位置。HTML 中使用
标签插入图片:
src="image.jpg"
:图片路径。alt="示例图片"
:当图片加载失败时显示的文本(有利于 SEO)。width="300"
、height="200"
:设置图片大小。
)
- 苹果
- 香蕉
- 橘子
)
- 第一步
- 第二步
- 第三步
)
- HTML
- 超文本标记语言
- CSS
- 层叠样式表
HTML 中使用
姓名 | 年龄 |
---|---|
小明 | 20 |
小红 | 22 |
:定义表格。
:表格行。
:表头(加粗)。
:表格单元格。
(6) 表单标签
HTML 表单用于收集用户输入:
:
type="text"
:文本框
type="password"
:密码框
type="radio"
:单选框
type="checkbox"
:复选框
(7) HTML5 语义化标签
HTML5 引入了一些语义化标签,提升可读性和 SEO 友好性:
网站头部
主要内容
文章内容
:定义网页头部。
:页面的主要内容区域。
:独立的文章内容(如博客)。
3. HTML5 新特性
(1) 音频 & 视频
controls
:显示播放控制按钮。
(2) 画布(Canvas)
可用于绘制图形:
二.CSS(层叠样式表)详解
CSS(Cascading Style Sheets)用于美化网页,控制 HTML 元素的布局、颜色、字体、动画等。
1. CSS 基础
(1) CSS 语法
CSS 由 选择器 和 属性 组成:
选择器 {
属性: 值;
}
示例:
p {
color: blue; /* 设置文字颜色 */
font-size: 16px; /* 设置字体大小 */
}
(2) CSS 书写方式
① 内联样式(Inline CSS)
直接在 HTML 标签的 style
属性中定义:
这是红色文字
优点:单独控制某个元素
缺点:不利于代码复用和维护
② 内部样式(Internal CSS)
在 HTML 文档的
标签中定义:
适用于小型页面
影响代码的可读性
③ 外部样式(External CSS)
使用 .css
文件并在 HTML 通过
关联:
推荐方式,适用于大型项目
2. CSS 选择器
(1) 基本选择器
选择器
作用
示例
*
选中所有元素
* { color: red; }
element
选中所有该标签
p { font-size: 16px; }
.class
选中该类名的元素
.btn { background: blue; }
#id
选中该 ID 的元素
#header { height: 60px; }
示例:
h1 { color: blue; } /* 选中所有 h1 */
.red-text { color: red; } /* 选中 class="red-text" */
#main-title { font-size: 24px; } /* 选中 id="main-title" */
(2) 组合选择器
选择器
作用
示例
A, B
选中多个标签
h1, p { color: black; }
A B
选中 B 是 A 的子元素
div p { font-size: 14px; }
A > B
选中 B 是 A 的直接子元素
ul > li { color: red; }
A + B
选中紧跟在 A 之后的 B
h1 + p { font-weight: bold; }
A ~ B
选中所有 A 之后的 B
h1 ~ p { font-size: 12px; }
示例:
div p { color: green; } /* 选中 div 内所有 p */
ul > li { color: red; } /* 只选中 ul 直接子元素 li */
h1 + p { margin-top: 10px; } /* 选中紧跟 h1 之后的 p */
(3) 伪类选择器
选择器
作用
示例
:hover
鼠标悬停
button:hover { background: red; }
:focus
表单元素获取焦点
input:focus { border: blue; }
:first-child
选中第一个子元素
p:first-child { color: green; }
:nth-child(n)
选中特定位置元素
li:nth-child(2) { font-weight: bold; }
示例:
a:hover { color: orange; } /* 鼠标悬停变橙色 */
li:nth-child(odd) { background: lightgray; } /* 选中奇数项 */
(4) 伪元素选择器
选择器
作用
示例
::before
在元素前插入内容
p::before { content: " "; }
::after
在元素后插入内容
p::after { content: " ✅"; }
::first-letter
修改首字母
p::first-letter { font-size: 24px; }
示例:
h1::before { content: " "; }
p::after { content: " "; }
3. CSS 盒模型
(1) 盒模型结构
每个 HTML 元素都由以下部分组成:
+------------------+
| margin | (外边距)
+------------------+
| border | (边框)
+------------------+
| padding | (内边距)
+------------------+
| content | (内容)
+------------------+
示例:
.box {
width: 200px;
padding: 10px;
border: 2px solid black;
margin: 20px;
}
4. CSS 布局
(1) Flexbox(弹性布局)
弹性布局用于实现响应式布局:
.container {
display: flex;
justify-content: center; /* 居中 */
align-items: center; /* 垂直居中 */
}
属性
作用
display: flex;
开启 Flexbox
justify-content: center;
主轴对齐(居中)
align-items: center;
交叉轴对齐
(2) Grid(网格布局)
Grid 用于创建复杂布局:
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
}
属性
作用
display: grid;
开启 Grid
grid-template-columns
定义列
grid-gap
设置间距
5. CSS 动画
(1) 过渡效果
button {
background: blue;
transition: background 0.3s ease;
}
button:hover {
background: red;
}
(2) 关键帧动画
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.box {
animation: fadeIn 2s ease-in-out;
}
6. 响应式设计
(1) 媒体查询
@media (max-width: 600px) {
body {
background: lightgray;
}
}
(2) rem/em 相对单位
html { font-size: 16px; }
p { font-size: 1.5rem; } /* 1.5 × 16px = 24px */
三.JavaScript 详解
JavaScript(简称 JS)是前端开发的核心编程语言,主要用于网页交互、动态内容和后端开发(Node.js).
1. JavaScript 基础
(1) JavaScript 语法
JavaScript 代码可以写在
标签中:
或者存入外部文件 script.js
,并在 HTML 中引入:
(2) 变量与常量
① 变量(var
、let
、const
)
JavaScript 变量用于存储数据:
var name = "张三"; // 旧版,避免使用
let age = 25; // 推荐
const PI = 3.14; // 常量,不能修改
var
:有函数作用域,会变量提升,不推荐使用。
let
:有块级作用域,不会提升,推荐。
const
:定义常量,值不可更改。
2. 数据类型
(1) 基本数据类型
类型
说明
示例
Number
数字类型
let num = 100;
String
字符串类型
let str = "Hello";
Boolean
布尔类型
let isTrue = true;
Null
空值
let a = null;
Undefined
未定义
let b;
Symbol
唯一值
let s = Symbol();
BigInt
大整数
let big = 123n;
(2) 复杂数据类型
① 数组(Array)
let fruits = ["苹果", "香蕉", "橘子"];
console.log(fruits[0]); // 苹果
fruits.push("西瓜"); // 添加元素
fruits.pop(); // 移除最后一个元素
② 对象(Object)
let person = {
name: "张三",
age: 25,
sayHello: function() {
console.log("你好!");
}
};
console.log(person.name); // 张三
person.sayHello(); // 你好!
3. 运算符
运算符
作用
示例
+
加法
5 + 3 // 8
-
减法
5 - 2 // 3
*
乘法
4 * 2 // 8
/
除法
10 / 2 // 5
%
取余
10 % 3 // 1
++
自增
let a = 1; a++
--
自减
let b = 2; b--
==
等于(不检查类型)
"5" == 5 // true
===
严格等于(检查类型)
"5" === 5 // false
4. 条件语句
(1) if 语句
let age = 18;
if (age >= 18) {
console.log("可以投票");
} else {
console.log("未成年");
}
(2) switch 语句
let fruit = "苹果";
switch (fruit) {
case "苹果":
console.log("红色");
break;
case "香蕉":
console.log("黄色");
break;
default:
console.log("未知颜色");
}
5. 循环
(1) for 循环
for (let i = 0; i < 5; i++) {
console.log("循环次数:" + i);
}
(2) while 循环
let i = 0;
while (i < 5) {
console.log("循环次数:" + i);
i++;
}
6. 函数
(1) 普通函数
function add(a, b) {
return a + b;
}
console.log(add(3, 5)); // 8
(2) 箭头函数(ES6)
const add = (a, b) => a + b;
console.log(add(3, 5)); // 8
7. 事件处理
(1) 点击事件
(2) 监听事件
document.getElementById("myButton").addEventListener("click", function() {
alert("按钮点击!");
});
8. DOM 操作
(1) 获取元素
let element = document.getElementById("myDiv"); // 通过 ID
let elements = document.getElementsByClassName("myClass"); // 通过类名
let tags = document.getElementsByTagName("p"); // 通过标签名
let query = document.querySelector(".box"); // 通过 CSS 选择器
(2) 修改元素内容
document.getElementById("myDiv").innerHTML = "新内容";
document.getElementById("myDiv").style.color = "red";
9. 定时器
(1) setTimeout(延迟执行)
setTimeout(() => {
console.log("2 秒后执行");
}, 2000);
(2) setInterval(循环执行)
setInterval(() => {
console.log("每秒执行一次");
}, 1000);
10. AJAX & Fetch
(1) AJAX(XMLHttpRequest)
let xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.example.com/data", true);
xhr.onload = function () {
console.log(xhr.responseText);
};
xhr.send();
(2) Fetch(ES6 推荐)
fetch("https://api.example.com/data")
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.log(error));
11. 本地存储
(1) localStorage(长期存储)
localStorage.setItem("username", "张三");
console.log(localStorage.getItem("username")); // 张三
(2) sessionStorage(临时存储)
sessionStorage.setItem("token", "123456");
console.log(sessionStorage.getItem("token"));
12. ES6+ 新特性
特性
说明
let / const
块级作用域
箭头函数
() => {}
解构赋值
[a, b] = [1, 2]
模板字符串
Hello, ${name}!
Promise
异步处理
async/await
处理异步代码
四.总结
前端开发的核心技术围绕 HTML、CSS、JavaScript 展开,同时结合 框架、构建工具、安全优化,形成完整的开发体系。如果你想成为前端开发者,可以按照以下顺序学习:
- 掌握 HTML/CSS(基础网页布局)
- 学习 JavaScript + ES6(编程逻辑)
- 掌握前端框架(Vue/React)
- 理解前后端交互(AJAX、Fetch、Axios)
- 学习前端构建工具(Webpack、Vite)
- 优化性能和安全性
你可能感兴趣的:(前端)