HTML与CSS3基础教程，如何快速入门掌握核心技能？-建站教程-锦华智联科技

教程导览

Web 的基石：HTML 与 CSS 是什么？
理解它们各自的角色和关系。
（图片来源网络，侵删）
第一部分：HTML (网页的骨架)
- 什么是 HTML？
- 基本结构：<!DOCTYPE>, <html>, <head>, <body>
- 常用标签：标题、段落、链接、图片、列表、div 和 span
- 表单元素：输入框、按钮等
- HTML5 语义化标签
第二部分：CSS3 (网页的化妆师)
- 什么是 CSS？
- 如何将 CSS 应用到 HTML？
- CSS 选择器：元素、类、ID、后代等
- 常用 CSS 属性：文本、颜色、背景、盒模型
- 布局基础：Flexbox (弹性盒子)
- CSS3 新特性：圆角、阴影、过渡
实战演练：创建你的第一个网页
将所学知识整合,动手做一个简单的个人主页。
学习资源与下一步

Web 的基石：HTML 与 CSS 是什么？

想象一下建造一座房子：

HTML (HyperText Markup Language - 超文本标记语言)：就像是房子的钢筋骨架和砖块，它定义了网页的结构和内容，比如哪里是标题，哪里是段落，哪里是图片，浏览器读取 HTML,然后知道如何组织这些内容。
CSS (Cascading Style Sheets - 层叠样式表)：就像是房子的装修、油漆和家具，它负责网页的视觉表现，比如文字的颜色、大小、字体，元素的间距、背景颜色、边框等,它让网页变得美观。

关系：HTML 是基础，CSS 是装饰，两者结合，才能构成一个完整、美观的网页。

第一部分：HTML (网页的骨架)

什么是 HTML？

HTML 不是一种编程语言，而是一种标记语言，它使用一系列的“标签”（Tags）来“标记”内容的含义，用 <h1> 标签告诉浏览器“这是一个一级标题”，用 <p> 标签告诉“这是一个段落”。

（图片来源网络，侵删）

基本 HTML 文件结构

每个 HTML 文件都有一个固定的基本结构,这是所有网页的起点。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">我的第一个网页</title>
</head>
<body>
    <!-- 在这里放置你的网页内容 -->
</body>
</html>

解释一下：

<!DOCTYPE html>：声明文档类型，告诉浏览器使用 HTML5 规范,这是必须的。
<html lang="zh-CN">：整个 HTML 文档的根元素，lang 属性用于指定网页的语言。
<head>：文档的“头部”，包含不直接显示在页面上的元信息，如标题、字符编码、引入的 CSS 文件等。
<meta charset="UTF-8">：非常重要！确保浏览器能正确显示中文等非英文字符。
<title>：显示在浏览器标签页上的标题。
<body>：文档的“身体”,所有在页面上可见的内容都放在这里。

常用 HTML 标签

标签** <h1> 到 <h6>，表示六个不同级别的重要性，<h1> 最重要。

<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>

段落与换行 <p> 用于定义一个段落。<br> 用于换行（单标签）。

（图片来源网络，侵删）

<p>这是一个段落，这是同一段落的另一句话。</p>
<p>这是另一个新的段落。<br>这里有一个换行。</p>

链接 <a> 标签用于创建超链接。

<a href="https://www.google.com">点击访问 Google</a>

href 属性指定链接的目标地址。

图片 <img> 标签用于在页面中显示图片（单标签）。

<img src="image.jpg" alt="一张美丽的风景图">

src (source)：图片的路径。
alt (alternative)：图片的替代文本，如果图片无法加载，会显示这段文字，对屏幕阅读器（为视障人士设计）非常重要。

列表

无序列表：项目符号列表

<ul>
    <li>苹果</li>
    <li>香蕉</li>
    <li>橙子</li>
</ul>

有序列表：数字或字母排序的列表

<ol>
    <li>第一步</li>
    <li>第二步</li>
    <li>第三步</li>
</ol>

div 和 span

<div>：块级容器，没有特定含义，用于组合其他元素，方便 CSS 进行样式布局,它会独占一行。
<span>器，也没有特定含义，用于包裹一行内的文本或元素，方便 CSS 进行样式设置,它不会独占一行。

<div style="border: 1px solid black; padding: 10px;">
    这是一个 div 块。
    <span style="color: red;">这是一个 span，可以改变部分文字的颜色。</span>
</div>

HTML5 语义化标签

HTML5 引入了许多具有明确含义的标签，这有助于搜索引擎理解页面结构,也提高了代码的可读性。

<header>：页面或区域的头部。
<nav>：导航链接区域。
<main>：页面的主要内容。
<article>：独立的文章内容。
<section>：文档中的一个区域。
<aside>：侧边栏或相关内容。
<footer>：页面或区域的底部。

示例：

<body>
    <header>
        <h1>我的网站</h1>
        <nav>
            <a href="#">首页</a> | <a href="#">lt;/a> | <a href="#">联系</a>
        </nav>
    </header>
    <main>
        <article>
            <h2>文章标题</h2>
            <p>这里是文章内容...</p>
        </article>
    </main>
    <footer>
        <p>&copy; 2025 我的网站</p>
    </footer>
</body>

第二部分：CSS3 (网页的化妆师)

什么是 CSS？

CSS 是一种样式表语言，用于描述 HTML 元素在屏幕上如何显示，它将内容和表现分离,使得网页维护更加方便。

如何将 CSS 应用到 HTML？

有三种方式，其中外部样式表是最佳实践。

外部样式表 (推荐) 创建一个 .css 文件（style.css），然后在 HTML 的 <head> 中通过 <link> 标签引入。

HTML (index.html):

<head>
    <link rel="stylesheet" href="style.css">
</head>

CSS (style.css):

body {
    background-color: #f0f0f0;
    font-family: Arial, sans-serif;
}
h1 {
    color: blue;
}

内部样式表 在 HTML 文件的 <head> 部分使用 <style>

<head>
    <style>
        body {
            background-color: #f0f0f0;
        }
    </style>
</head>



内联样式
直接在 HTML 标签的 style 属性中写 CSS，不推荐，因为它会破坏 HTML 和 CSS 的分离。
<p style="color: red; font-size: 20px;">这是一段红色文字。</p>


CSS 选择器
选择器是 CSS 用来找到你想要样式的 HTML 元素的“瞄准镜”。
元素选择器
根据 HTML 标签选择。
p {
    color: green;
}
/* 所有 <p> 元素都会变成绿色 */
类选择器
根据元素的 class 属性选择，以点  开头,一个元素可以有多个类。
.highlight {
    background-color: yellow;
}
/* 所有 class="highlight" 的元素背景色变为黄色 */
ID 选择器
根据元素的 id 属性选择，以  开头，一个页面的 id 必须是唯一的。
#main-title {
    text-align: center;
}
/* id="main-title" 的元素文本居中 */
后代选择器
选择某个元素内部的后代元素。
div p {
    font-size: 16px;
}
/* 所有在 <div> 标签内部的 <p> 标签字体大小为 16px */
常用 CSS 属性
文本属性
p {
    color: #333;          /* 文字颜色 */
    font-size: 18px;      /* 字体大小 */
    font-family: "Times New Roman", serif; /* 字体族 */
    text-align: center;   /* 文本对齐 */
    line-height: 1.5;     /* 行高 */
}
颜色与背景
body {
    background-color: #ffffff; /* 背景颜色 */
    background-image: url('background.jpg'); /* 背景图片 */
}
盒模型
CSS 中每个元素都可以看作一个盒子，由 margin (外边距), border (边框), padding (内边距), 和 content (内容) 组成。
div {
    width: 300px;
    height: 200px;
    border: 2px solid black; /* 边框 */
    padding: 20px;           /* 内边距：内容与边框的距离 */
    margin: 20px auto;       /* 外边距：元素与其他元素的距离，auto 可用于水平居中 */
}
布局基础：Flexbox (弹性盒子)
Flexbox 是一种强大的布局模式，可以轻松实现一维布局（行或列）。
如何使用：

给父元素设置 display: flex;，使其成为一个 flex 容器。
通过调整子元素的属性来控制布局。

示例：
<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
</div>
.container {
    display: flex;              /* 启用 Flexbox */
    justify-content: space-around; /* 主轴（水平方向）上的对齐方式 */
    align-items: center;        /* 交叉轴（垂直方向）上的对齐方式 */
    height: 200px;
    border: 1px solid grey;
}
.item {
    width: 80px;
    height: 80px;
    background-color: lightblue;
    text-align: center;
    line-height: 80px;
    font-size: 24px;
}
效果： 三个蓝色方块会在容器中水平均匀分布,并且垂直居中。
CSS3 新特性
圆角
div {
    border-radius: 10px; /* 四个角都是 10px 圆角 */
}
阴影

box-shadow: 给元素加阴影div {
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3); /* x偏移 y偏移 模糊程度 颜色 */
}

text-shadow: 给文字加阴影h1 {
    text-shadow: 2px 2px 4px #000000;
}


过渡
让 CSS 属性的变化在一定时间内平滑完成,而不是瞬间完成。
.button {
    background-color: blue;
    color: white;
    padding: 10px 20px;
    transition: background-color 0.3s ease; /* 当背景色变化时，过渡持续 0.3 秒 */
}
.button:hover {
    background-color: darkblue; /* 鼠标悬停时触发颜色变化，从而触发过渡效果 */
}

第三部分：实战演练：创建你的第一个网页
让我们动手创建一个简单的个人介绍页面。
文件结构：
my-website/
├── index.html
└── style.css
步骤 1: 创建 index.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">张三的个人主页</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>你好，我是张三</h1>
        <nav>
            <a href="#about">关于我</a> | <a href="#hobbies">我的爱好</a> | <a href="#contact">联系方式</a>
        </nav>
    </header>
    <main>
        <section id="about">
            <h2>关于我</h2>
            <p>我是一名前端开发爱好者，喜欢用代码创造美好的网页，目前正在学习 HTML 和 CSS。</p>
            <img src="https://via.placeholder.com/150" alt="张三的头像">
        </section>
        <section id="hobbies">
            <h2>我的爱好</h2>
            <ul>
                <li>编程</li>
                <li>阅读</li>
                <li>摄影</li>
            </ul>
        </section>
    </main>
    <footer>
        <p>&copy; 2025 张三的个人主页</p>
    </footer>
</body>
</html>
步骤 2: 创建 style.css
/* 基础样式重置 */
body, h1, h2, p, ul, li {
    margin: 0;
    padding: 0;
}
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.6;
    background-color: #f4f4f4;
    color: #333;
}
/* 头部样式 */
header {
    background-color: #333;
    color: #fff;
    padding: 1rem;
    text-align: center;
}
header h1 {
    margin-bottom: 1rem;
}
header nav a {
    color: #fff;
    text-decoration: none;
    margin: 0 15px;
    transition: color 0.3s ease;
}
header nav a:hover {
    color: #ddd;
}
区域样式 */
main {
    max-width: 800px;
    margin: 2rem auto;
    padding: 0 1rem;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
section {
    padding: 2rem;
    border-bottom: 1px solid #eee;
}
section:last-child {
    border-bottom: none;
}
section h2 {
    margin-bottom: 1rem;
    color: #333;
}
section img {
    float: left;
    margin-right: 1rem;
    border-radius: 50%; /* 让图片变成圆形 */
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
/* 清除浮动，防止父元素高度塌陷 */
section::after {
    content: "";
    display: table;
    clear: both;
}
/* 页脚样式 */
footer {
    text-align: center;
    padding: 1rem;
    margin-top: 2rem;
    background-color: #333;
    color: #fff;
}
步骤 3: 查看效果
将这两个文件放在同一个文件夹下，然后用浏览器打开 index.html 文件，你应该能看到一个设计简洁、布局合理的个人主页了！

学习资源与下一步
在线编辑器 (无需安装，即可上手):

CodePen: https://codepen.io/
JSFiddle: https://jsfiddle.net/
StackBlitz: https://stackblitz.com/

推荐教程:

MDN Web Docs (Mozilla 开发者网络): https://developer.mozilla.org/zh-CN/这是最权威、最全面的 Web 技术文档，HTML 和 CSS 的所有知识点都能在这里找到详细解释。
W3Schools: https://www.w3schools.com/非常适合初学者，提供大量简单的实例和“试一试”功能。

下一步学什么？
当你掌握了 HTML 和 CSS 的基础后，下一步就是 JavaScript，JavaScript 是一种编程语言，它能让你的网页“动”起来,实现交互功能，

用户点击按钮后弹出提示框。
实时更新页面内容（如天气预报）。
制作动画和游戏。

HTML (结构) + CSS (表现) + JavaScript (行为) = 现代 Web 开发的“三剑客”。
祝你学习愉快！