HTML5+CSS3基础教程该怎么学？-杰瑞科技汇

前言：为什么学习 HTML5 和 CSS3？

想象一下,你要盖一座房子。

（图片来源网络，侵删）

HTML (超文本标记语言) 就像是房子的钢筋骨架和结构，它定义了哪里是客厅（标题），哪里是卧室（段落），哪里是门窗（图片、链接），它负责网页的内容和结构。
CSS (层叠样式表) 就像是房子的装修和设计，它决定了墙壁是什么颜色，家具是什么样式，窗帘是什么材质，它负责网页的表现和样式。

HTML5 和 CSS3 是这两个技术的最新、最强大的版本，它们让网页不再仅仅是信息的展示，而是可以构建出功能丰富、美观炫酷、体验流畅的现代化应用。

第一部分：HTML5 基础

HTML 的核心是，标签用尖括号 < 和 > 包起来，如 <p>、<h1>。

第一个网页：HTML骨架

每个HTML文档都有一个基本的结构,创建一个名为 index.html 的文件，复制以下代码并用浏览器打开。

<!DOCTYPE html> <!-- 声明这是一个HTML5文档 -->
<html lang="zh-CN"> <!-- 整个HTML页面的根标签，lang属性声明语言为中文 -->
<head>
    <!-- 头部信息，不会直接显示在页面上 -->
    <meta charset="UTF-8"> <!-- 字符编码，确保中文等特殊字符能正确显示 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">我的第一个网页</title> <!-- 显示在浏览器标签页上的标题 -->
</head>
<body>
    <!-- 这里是网页的可见内容 -->
    <h1>欢迎来到我的世界！</h1>
    <p>这是一个段落，我正在学习HTML5。</p>
</body>
</html>

解释：

（图片来源网络，侵删）

<!DOCTYPE html>：HTML5 的标准声明，必须放在第一行。
<html>的容器。
<head>：存放元数据，如标题、字符编码、引入的CSS/JS文件等。
<body>：存放所有用户可见的内容。

常用HTML标签（文本与结构）

标签名	描述	示例
`<h1>` - `<h6>`	标题标签，h1最重要，h6最不重要	`<h1>主标题</h1>`
`<p>`	段落标签	`<p>这是一段文字。</p>`
`<a>`	链接标签	`<a href="https://www.google.com">访问谷歌</a>`
`<img>`	图片标签	`<img src="image.jpg" alt="一张图片">`
`<ul>`	无序列表（项目符号）	`<ul><li>苹果</li><li>香蕉</li></ul>`
`<ol>`	有序列表（数字/字母）	`<ol><li>第一步</li><li>第二步</li></ol>`
`<li>`	列表项，用在 `<ul>` 或 `<ol>` 中	`<li>列表项</li>`
`<strong>` / `<b>`	加粗文本 (strong有语义强调)	`<strong>重要</strong>`
`<em>` / `<i>`	斜体文本 (em有语义强调)	`<em>强调</em>`
`<br>`	换行标签（单标签）	`第一行<br>第二行`
`<hr>`	水平分割线（单标签）	`<hr>`

练习： 使用上述标签，创建一个简单的个人介绍页面。

HTML 表单

表单是用户与网站交互的主要方式。

<form action="/submit" method="post">
    <label for="username">用户名:</label>
    <input type="text" id="username" name="username" required>
    <label for="password">密码:</label>
    <input type="password" id="password" name="password">
    <label for="email">邮箱:</label>
    <input type="email" id="email" name="email">
    <label for="gender">性别:</label>
    <input type="radio" id="male" name="gender" value="male">
    <label for="male">男</label>
    <input type="radio" id="female" name="gender" value="female">
    <label for="female">女</label>
    <label for="hobbies">爱好:</label>
    <input type="checkbox" id="sports" name="hobbies" value="sports">
    <label for="sports">运动</label>
    <input type="checkbox" id="music" name="hobbies" value="music">
    <label for="music">音乐</label>
    <button type="submit">提交</button>
</form>

关键元素：

（图片来源网络，侵删）

<form>：表单容器，action 指定提交地址，method 指定提交方式。
<label>：为输入项提供标签，for 属性关联到输入框的 id，提升可访问性。
<input>：最常用的输入控件。
- type 属性决定输入类型：text, password, email, radio, checkbox, submit, button 等。
- name 属性是提交数据时的键名。
- id 属性是唯一的标识符，供 label 或 CSS/JS 使用。
- required 属性表示该字段为必填。
<button>：按钮。

第二部分：CSS3 基础

CSS 用于美化HTML，它通过选择器找到HTML元素，然后应用声明（属性:值）来改变其样式。

如何引入CSS

有三种方式,推荐使用外部样式表。

内联样式 (不推荐) 直接写在HTML标签的 style 属性里。

<p style="color: blue; font-size: 20px;">这是一段蓝色文字。</p>

内部样式表 写在HTML文档的 <head> 标签内的 <style> 标签里。

<head>
    <style>
        p {
            color: red;
            font-size: 16px;
        }
    </style>
</head>

外部样式表 (最佳实践) 创建一个单独的 .css 文件（如 style.css），然后在HTML中通过 <link> 标签引入。

<!-- index.html -->
<head>
    <link rel="stylesheet" href="style.css">
</head>
/* style.css */
p {
    color: green;
    font-size: 18px;
}

CSS选择器

选择器是CSS的核心,它决定了样式应用到哪些元素上。

选择器	示例	描述
元素选择器	`p { }`	选择所有 `<p>`
类选择器	`.my-class { }`	所有 `class="my-class"` 的元素
ID选择器	`#my-id { }`	`id="my-id"` 的唯一元素
后代选择器	`div p { }`	选择 `<div>` 内部的所有 `<p>`
子选择器	`div > p { }`	选择 `<div>` 的直接子元素 `<p>`
通用兄弟选择器	`h1 ~ p { }`	选择 `<h1>` 后面所有同级的 `<p>`
属性选择器	`input[type="text"] { }`	选择 `type` 属性为 `text` 的 `input`

优先级：ID选择器 > 类选择器 > 元素选择器，内联样式优先级最高。

常用CSS属性

盒模型 (Box Model) CSS中每个元素都是一个盒子，由 content, padding, border, margin 组成。

width / height区域的宽高。
padding：内边距，内容与边框的距离。
border：边框。
margin：外边距，盒子与盒子之间的距离。

.box {
    width: 200px;
    height: 200px;
    border: 1px solid black; /* 1px宽，实线，黑色边框 */
    padding: 20px;           /* 内边距20px */
    margin: 10px;            /* 外边距10px */
    background-color: lightblue;
}

CSS3 新特性与布局

Flexbox (弹性盒布局) 一维布局模型，非常灵活，用于在容器内排列项目。

<style>
  .container {
    display: flex; /* 声明为flex容器 */
    justify-content: space-around; /* 主轴对齐：项目平均分布 */
    align-items: center; /* 交叉轴对齐：居中 */
    height: 200px;
    background-color: #eee;
  }
  .item {
    width: 60px;
    height: 60px;
    background-color: skyblue;
    color: white;
    text-align: center;
    line-height: 60px;
  }
</style>
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

Grid (网格布局) 二维布局模型，非常适合复杂的页面布局。

<style>
  .grid-container {
    display: grid; /* 声明为grid容器 */
    grid-template-columns: 1fr 2fr 1fr; /* 三列，比例1:2:1 */
    grid-template-rows: 100px 100px; /* 两行，每行100px */
    gap: 10px; /* 项目之间的间距 */
  }
  .grid-item {
    background-color: orange;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>
<div class="grid-container">
  <div class="grid-item">Header</div>
  <div class="grid-item">Main</div>
  <div class="grid-item">Sidebar</div>
  <div class="grid-item">Footer</div>
</div>

其他CSS3酷炫特性

圆角: border-radius: 10px;
阴影: box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
渐变: background: linear-gradient(to right, #ff7e5f, #feb47b);
过渡: transition: all 0.3s ease; (配合hover等伪类使用，实现平滑动画)

第三部分：实战项目 - 个人作品集网页

让我们把学到的知识结合起来,创建一个简单的个人作品集网页。

文件结构：

my-portfolio/
├── index.html
└── style.css

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>
            <ul>
                <li><a href="#about">关于我</a></li>
                <li><a href="#projects">项目</a></li>
                <li><a href="#contact">联系我</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section id="about">
            <h2>关于我</h2>
            <p>你好！我是一名前端开发爱好者，热爱用代码创造美好的网页。</p>
        </section>
        <section id="projects">
            <h2>我的项目</h2>
            <div class="project-grid">
                <div class="project-card">
                    <h3>项目一</h3>
                    <p>这是一个关于电商网站的项目。</p>
                </div>
                <div class="project-card">
                    <h3>项目二</h3>
                    <p>这是一个关于任务管理工具的项目。</p>
                </div>
                <div class="project-card">
                    <h3>项目三</h3>
                    <p>这是一个关于数据可视化的项目。</p>
                </div>
            </div>
        </section>
    </main>
    <footer id="contact">
        <p>联系我: email@example.com</p>
        <p>&copy; 2025 张三. All rights reserved.</p>
    </footer>
</body>
</html>

style.css (样式)

/* 全局样式 */
body {
    font-family: "Microsoft YaHei", Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    background-color: #f4f4f4;
    color: #333;
}
/* 头部样式 */
header {
    background: #333;
    color: #fff;
    padding: 1rem 0;
    text-align: center;
}
header h1 {
    margin: 0;
}
header nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
header nav ul li {
    display: inline;
    margin: 0 15px;
}
header nav a {
    color: #fff;
    text-decoration: none;
    transition: color 0.3s;
}
header nav a:hover {
    color: #ff7e5f;
}
样式 */
main {
    max-width: 1100px;
    margin: 2rem auto;
    padding: 0 2rem;
}
section {
    background: #fff;
    padding: 2rem;
    margin-bottom: 2rem;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
/* 项目网格布局 */
.project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}
.project-card {
    background: #fff;
    border: 1px solid #ddd;
    padding: 1.5rem;
    text-align: center;
    border-radius: 5px;
    transition: transform 0.3s, box-shadow 0.3s;
}
.project-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
/* 页脚样式 */
footer {
    background: #333;
    color: #fff;
    text-align: center;
    padding: 1rem 0;
    margin-top: 2rem;
}

学习路径与资源推荐

动手实践：这是最重要的一步，看完教程，一定要自己敲代码，修改样式，看看效果。
查阅文档：遇到不懂的属性或标签，学会查阅官方文档。
- MDN Web Docs (Mozilla)：最权威、最全面的Web技术文档。
- Can I use...：查询某个CSS/JS特性在各个浏览器中的兼容性。
学习进阶：
- JavaScript：网页的“行为”，负责交互和动态效果，HTML + CSS + JavaScript 是前端开发的“三剑客”。
- 响应式设计：让你的网页在各种设备（手机、平板、电脑）上都有良好的显示效果，核心是 媒体查询 @media。
- CSS预处理器：如 Sass/SCSS，可以让你用更高级的语法（变量、嵌套、混合等）来写CSS，提高开发效率。
- CSS框架：如 Bootstrap, Tailwind CSS，它们提供了大量预定义的样式和组件，让你能快速搭建出美观的页面。

祝你学习愉快,早日成为前端高手！

HTML5+CSS3基础教程该怎么学？

前言：为什么学习 HTML5 和 CSS3？

第一部分：HTML5 基础

第一个网页：HTML骨架

常用HTML标签（文本与结构）

HTML 表单

第二部分：CSS3 基础

如何引入CSS

CSS选择器

常用CSS属性

CSS3 新特性与布局

第三部分：实战项目 - 个人作品集网页

学习路径与资源推荐

99ANYc3cd6

小米5换屏教程视频教程

shell java jar

NetBeans Java教程怎么学？新手入门指南？

Java replace如何替换空格？

Python urllib2如何抓取图片？

Java Socket编程实例具体怎么实现？

Blender Python怎么入门？基础教程有哪些？

Python Sublime如何设置断点调试？

ghostxp安装教程具体步骤是怎样的？

CAD 2025教程哪里能下载？

SSD装Win10，具体步骤是怎样的？

Java开发实战宝典PDF适合哪些人群学习？

Python如何操作PowerPoint？

PHP Python该学哪个版本？

Java EE 6权威指南核心是什么？

cad安装教程2006

HTML5+CSS3基础教程该怎么学？

前言：为什么学习 HTML5 和 CSS3？

第一部分：HTML5 基础

第一个网页：HTML骨架

常用HTML标签（文本与结构）

HTML 表单

第二部分：CSS3 基础

如何引入CSS

CSS选择器

常用CSS属性

CSS3 新特性与布局

第三部分：实战项目 - 个人作品集网页

学习路径与资源推荐

相关推荐

Java Socket编程实例具体怎么实现？