跳到主要内容Web前端基础入门：HTML、CSS与JavaScript核心知识 | 极客日志HTML / CSS大前端
Web前端基础入门：HTML、CSS与JavaScript核心知识
Web前端开发的基础知识，涵盖HTML结构定义、CSS样式布局及JavaScript交互逻辑。内容包括HTML基本标签与文档结构，CSS选择器、盒模型、Flex/Grid布局及响应式设计，以及JavaScript变量、数据类型、DOM操作等核心语法。适合初学者快速掌握前端“三剑客”的基本用法与最佳实践。
人间失格3 浏览 HTML
定义
HTML（超文本标记语言）是用来描述网页结构的标记语言。
- 它用标签（带角号标签 例如）来定义页面的各个部分，比如标题、段落、图片、链接等。
- HTML 本身不负责样式和交互，样式由 CSS 负责，交互由 JavaScript 负责。
基本结构
一个标准的 HTML5 页面结构如下：
<!DOCTYPE html>
< =>
页面标题
这是一级标题
这是一个段落。
html
lang
"zh-CN"
<head>
<meta charset="UTF-8">
<title>
</title>
</head>
<body>
<h1>
</h1>
<p>
</p>
</body>
</html>
CSS
定义
CSS（层叠样式表）是用来描述 HTML 或 XML 文档样式的语言。
它控制网页的外观：颜色、字体、布局、间距、动画等。
CSS 与 HTML 分工明确：HTML 负责结构，CSS 负责样式。
基本语法
选择器 {
属性名：属性值;
属性名：属性值;
}
p {
color: red;
font-size: 16px;
}
- 选择器
"p"：选中所有 "
" 标签。
- 声明块：
"{}" 内的样式规则。
- 属性名
"color"：要设置的样式属性（文字颜色）。
- 属性值
"red"：属性的具体值。
CSS 的三种引入方式
3.1 内联样式
直接在 HTML 标签中用 "style" 属性定义样式：
- 优点：优先级最高，适合临时覆盖样式。
- 缺点：难以维护，代码冗余。
3.2 内部样式表
<head>
<style>
p {
color: green;
font-size: 16px;
}
</style>
</head>
- 优点：适合单个页面的样式管理。
- 缺点：多个页面无法共享样式。
3.3 外部样式表
将 CSS 代码保存在独立的 ".css" 文件中，通过 "" 标签引入：
<head>
<link rel="stylesheet" href="styles.css">
</head>
p {
color: purple;
font-size: 18px;
}
- 优点：样式可复用，便于维护和缓存。
- 推荐使用：大型项目必备。
CSS 选择器
4.1 基础选择器
- 元素选择器：
"p { ... }"（选中所有 "
" 标签）。
- 类选择器：
".intro { ... }"（选中所有 "class="intro"" 的元素）。
- ID 选择器：
"#header { ... }"（选中 "id="header"" 的元素）。
- 通配符选择器：
"* { ... }"（选中所有元素）。
4.2 组合选择器
- 后代选择器：
"div p { ... }"（选中 "
- 子元素选择器：
"div > p { ... }"（选中 "
- 相邻兄弟选择器：
"h1 + p { ... }"（选中紧跟在 "
" 后的第一个 "
"）。
- 通用兄弟选择器：
"h1 ~ p { ... }"（选中 "
" 后的所有同级 "
"）。
4.3 伪类与伪元素
- 伪类：
":hover"（鼠标悬停）、
":active"（激活状态）、
":first-child"（第一个子元素）。
- 伪元素：
"::before"（在元素前插入内容）、
"::after"（在元素后插入内容）。
CSS 盒模型
每个 HTML 元素都可以看作一个矩形盒子，由四部分组成：
- Content（内容）：元素的实际内容（文字、图片等）。
- Padding（内边距）：内容与边框之间的空间。
- Border（边框）：围绕内容和内边距的边界线。
- Margin（外边距）：元素与其他元素之间的空间。
box {
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid black;
margin: 30px;
}
总宽度 = "width + padding-left + padding-right + border-left + border-right + margin-left + margin-right"。
CSS 布局
5.1 普通流
默认布局方式，元素按照 HTML 顺序从上到下、从左到右排列。
5.2 Flexbox（弹性布局）
.container {
display: flex;
justify-content: center;
align-items: center;
}
5.3 Grid（网格布局）
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 10px;
}
5.4 浮动（Float）
早期用于图文混排，现在逐渐被 Flexbox 和 Grid 取代：
img {
float: left;
margin-right: 10px;
}
5.5 定位（Position）
"static"：默认值，正常流。
"relative"：相对定位，相对于自身原位置偏移。
"absolute"：绝对定位，相对于最近的定位祖先元素。
"fixed"：固定定位，相对于浏览器窗口。
"sticky"：粘性定位，滚动时在阈值范围内固定。
CSS 响应式设计
6.1 媒体查询
.container {
width: 100%;
}
@media (min-width: 768px) {
.container {
width: 750px;
}
}
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}
6.2 相对单位
"%"：相对于父元素尺寸。
"em"：相对于当前元素字体大小。
"rem"：相对于根元素（""）字体大小。
"vw/vh"：相对于视口宽度/高度的 1%。
CSS 预处理器（Sass/SCSS）
CSS 预处理器扩展了 CSS 的功能，如变量、嵌套、混合等：
$primary-color: #007BFF;
.nav {
ul {
margin: 0;
padding: 0;
list-style: none;
li {
display: inline-block;
a {
color: $primary-color;
&:hover {
color: darken($primary-color, 10%);
}
}
}
}
}
CSS 动画与过渡
1. 过渡
.button {
transition: background-color 0.3s ease;
}
.button:hover {
background-color: #0056b3;
}
2. 动画
@keyframes slidein {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
.element {
animation: slidein 0.5s ease-out;
}
CSS 最佳实践
- 语义化 HTML：用合适的标签表达内容结构。
- 分离关注点：HTML 负责结构，CSS 负责样式，JS 负责交互。
- 命名规范：使用 BEM（Block__Element--Modifier）等方法提高可读性。
- 性能优化：减少重排（reflow）和重绘（repaint），压缩 CSS 文件
JavaScript
定义
JavaScript（简称 JS）是一种脚本语言，主要用于为网页添加交互功能。
- 与 HTML（结构）、CSS（样式）并列，是前端开发的三大核心技术之一。
- 现在也可用于后端开发（Node.js）、移动端开发（React Native）、桌面应用（Electron）等。
JavaScript 的三种引入方式
2.1 内联脚本
在 HTML 标签中直接使用 "onclick" 等事件属性：
<button onclick="alert('Hello')">点击</button>
2.2 内部脚本
2.3 外部脚本
将 JS 代码保存在 ".js" 文件中，通过 "" 引入：
<script src="app.js"></script>
JavaScript 基础语法
3.1 变量与常量
- "let"：可变变量（块级作用域）。
- "const"：不可变常量（块级作用域）。
- "var"（旧版，不推荐）：函数作用域，容易引发问题。
let name = 'Alice';
const age = 25;
3.2 数据类型
- 原始类型：
"string"、
"number"、
"boolean"、
"null"、
"undefined"、
"symbol"（ES6）、
"bigint"（ES2020）。
- 引用类型：
"object"（包括数组、函数等）。
let str = "Hello";
let num = 42;
let isDone = true;
let obj = { key: "value" };
let arr = [1, 2, 3];
3.3 运算符
- 算术："+"、"-"、"*"、"/"、"%"、"**"（幂）
- 比较："=="（宽松相等）、"==="（严格相等）、"!="、"!=="、">"、"<"
- 逻辑："&&"（与）、"||"（或）、"!"（非）。
流程控制
4.1 条件语句
if (age >= 18) {
console.log("成年人");
} else {
console.log("未成年人");
}
4.2 循环语句
for (let i = 0; i < 5; i++) {
console.log(i);
}
let j = 0;
while (j < 5) {
console.log(j);
j++;
}
5. 函数
5.1 函数声明
function greet(name) {
return "Hello, " + name;
}
console.log(greet("Bob"));
5.2 箭头函数
const add = (a, b) => a + b;
console.log(add(2, 3));
6. 对象与数组
6.1 对象
let person = {
name: "Alice",
age: 25,
sayHi: function() {
console.log("Hi, I'm " + this.name);
}
};
person.sayHi();
6.2 数组
let fruits = ["apple", "banana", "orange"];
fruits.push("grape");
console.log(fruits[1]);
7. DOM 操作（前端核心）
DOM（Document Object Model）是 HTML 文档的对象表示，JS 可以通过 DOM API 操作页面元素。
7.1 选择元素
let title = document.getElementById("title");
let items = document.querySelectorAll(".item");
7.2 修改内容
title.textContent = "新标题";
title.style.color = "red";
7.3 事件监听
let btn = document.querySelector("button");
btn.addEventListener("click", function() {
alert("按钮被点击");
});
前端开发常见代码
1. HTML 基础结构
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>页面标题</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>网站标题</h1>
</header>
<main>
<p>这是一个段落。</p>
</main>
<footer>
<p>版权 © 2026</p>
</footer>
<script src="app.js"></script>
</body>
</html>
2. CSS 常用样式
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
line-height: 1.6;
background-color: #f4f4f4;
}
.container {
width: 80%;
margin: 0 auto;
padding: 20px;
}
.btn {
display: inline-block;
padding: 10px 20px;
background: #007BFF;
color: white;
text-decoration: none;
border-radius: 5px;
transition: background 0.3s;
}
.btn:hover {
background: #0056b3;
}
3. JavaScript 基础
const btn = document.querySelector('.btn');
const output = document.getElementById('output');
btn.addEventListener('click', () => {
output.textContent = '按钮被点击了！';
});
setTimeout(() => {
console.log('3秒后执行');
}, 3000);
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(n => n * 2);
console.log(doubled);
微信扫一扫，关注极客日志
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
相关免费在线工具
- Base64 字符串编码/解码
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
- Base64 文件转换器
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online
- Markdown 转 HTML
将 Markdown（GFM）转为 HTML 片段，浏览器内 marked 解析；与 HTML 转 Markdown 互为补充。 在线工具，Markdown 转 HTML在线工具，online
- HTML 转 Markdown
将 HTML 片段转为 GitHub Flavored Markdown，支持标题、列表、链接、代码块与表格等；浏览器内处理，可链接预填。 在线工具，HTML 转 Markdown在线工具，online
- JSON 压缩
通过删除不必要的空白来缩小和压缩JSON。 在线工具，JSON 压缩在线工具，online
- JSON美化和格式化
将JSON字符串修饰为友好的可读格式。 在线工具，JSON美化和格式化在线工具，online
