HTML与CSS基础：构建网页的基石 = 飞龙博客

HTML与CSS基础：构建网页的基石

(5) feilong.org 修订于2026-08-30 09:58:28 建站程序

什么是HTML与CSS？
HTML（HyperText Markup Language）是用于创建网页结构的标准标记语言。通过标签定义文本、图像、链接等元素，为浏览器提供内容框架。CSS（Cascading Style Sheets）则负责美化页面，控制布局、颜色、字体等视觉表现。二者共同构成现代网页的基石，是前端开发的核心技能。

HTML基础语法
HTML文档以

<!DOCTYPE html>

1	<!DOCTYPE html>

声明类型，包含

<html>

<html>

根标签，内部通过

<head>

<head>

定义元信息（如标题）和

<body>

<body>

承载页面内容。

示例代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>我的第一个网页</title>
</head>
<body>
    <h1>欢迎来到我的网站</h1>
    <p>这是一个使用HTML和CSS构建的简单页面。</p>
    <ul>
        <li>项目一</li>
        <li>项目二</li>
    </ul>
</body>
</html>

<!DOCTYPE html>

<head>

<title>我的第一个网页</title>

</head>

<body>

<h1>欢迎来到我的网站</h1>

<p>这是一个使用HTML和CSS构建的简单页面。</p>

<ul>

</ul>

</body>

</html>

关键标签说明：
-

<h1>

<h1>

至

<h6>

<h6>

定义标题层级，

<p>

<p>

表示段落。
-

<ul>

<ul>

和

<ol>

<ol>

分别用于无序/有序列表，子项通过

<li>

<li>

定义。
-

<a href="...">

1	<a href="...">

创建超链接，

<img src="..." alt="...">

1	<img src="..." alt="...">

插入图像。

CSS基础与样式应用
CSS通过选择器定位HTML元素，并通过属性值设置样式。常见嵌入方式包括内联（行内样式）、内部（

<style>

<style>

标签）和外部（独立CSS文件）。

示例代码：

/* 内部样式表 */
body {
    font-family: "微软雅黑", sans-serif;
    background-color: #f0f0f0;
}

h1 {
    color: #3366cc;
    text-align: center;
}

/* 内部样式表 */

body {

font-family: "微软雅黑", sans-serif;

background-color: #f0f0f0;

}

h1 {

color: #3366cc;

text-align: center;

}

核心概念解析：
- 选择器类型：类选择器（.class）、ID选择器（

#id

#id

）、标签选择器（p）等。
- 盒模型：元素由内容区、内边距（padding）、边框（border）和外边距（margin）组成，可通过

box-sizing: border-box;

1	box-sizing: border-box;

优化布局计算。
- 继承与层叠：样式规则按优先级（!important > 内联 > ID > 类 > 标签）应用，同名属性值会覆盖。

布局实践：Flexbox与Grid
现代网页布局依赖CSS Flexbox和Grid模块，实现响应式设计。

Flexbox基础示例：

.container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.container {

display: flex;

justify-content: space-between;

align-items: center;

}

效果说明：
-

justify-content

1	justify-content

控制主轴（水平）对齐方式，如

space-between

1	space-between

将元素分散排列。
-

align-items

1	align-items

调整交叉轴（垂直）对齐，如center垂直居中。

Grid布局进阶：

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.grid-container {

display: grid;

grid-template-columns: repeat(3, 1fr);

gap: 20px;

}

特性优势：
- 通过

grid-template-columns

1	grid-template-columns

定义列数，gap设置间距。
- 支持复杂二维布局，如响应式图片网格或卡片式界面。

常见问题与最佳实践
1. 语义化标签应用：使用

<header>

、

<nav>

<nav>

、

<main>

<main>

等语义标签提升可访问性与SEO优化。
2. 避免过度嵌套：层级过深的HTML结构会增加维护成本，建议保持简洁。
3. 响应式设计基础：通过媒体查询（Media Queries）适配不同设备屏幕尺寸。

响应式示例：

@media (max-width: 768px) {
    .container {
        flex-direction: column;
    }
}

@media (max-width: 768px) {

.container {

flex-direction: column;

}

当屏幕宽度小于768像素时，Flex容器将垂直排列子元素。

结语
HTML与CSS是构建网页的起点，掌握其核心语法和布局技巧后，可进一步学习JavaScript实现交互功能。建议通过实际项目（如个人博客、作品集）巩固知识，并关注现代框架（如Vue.js、React）对前端开发的影响。技术迭代迅速，持续实践与学习是提升的关键路径。

更新网址：https://feilong.org/html-css-fundamentals
最初发布：20260830 09:58:28 feilong.org 于广州

加入收藏夹，查看更方便。

新作：JavaScript核心概念：实现动态交互

旧文：建站程序入门：搭建你的第一个网站

飛龍博客