目录
-
第一部分：HTML - 网页的骨架
（图片来源网络，侵删）- 什么是 HTML？
- 你的第一个 HTML 页面
- 常用 HTML 标签详解
- HTML 语义化
- HTML5 新特性简介
-
第二部分：CSS3 - 网页的衣裳
- 什么是 CSS？
- 如何将 CSS 应用到 HTML
- CSS 选择器
- 盒模型
- 常用 CSS 属性
- 布局基础：Flexbox
- 响应式设计入门
-
第三部分：综合实践
- 项目：制作一个简单的个人介绍页面
- 推荐学习资源
第一部分：HTML - 网页的骨架
什么是 HTML？
HTML 的全称是 HyperText Markup Language（超文本标记语言），它不是一种编程语言，而是一种标记语言,用来描述网页的结构和内容。
你可以把它想象成盖房子的设计图纸，图纸本身不包含复杂的逻辑，但它定义了哪里是墙壁（<div>），哪里是窗户（<img>），哪里是门（<a>）。
（图片来源网络，侵删）
你的第一个 HTML 页面
创建一个网页非常简单，只需要一个文本编辑器（如 VS Code, Sublime Text, 或者记事本）和一个浏览器。
步骤：
- 创建一个新文件，命名为
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>
</head>
<body>
<h1>你好，世界！</h1>
<p>欢迎来到 HTML 的世界。</p>
</body>
</html>
保存文件，然后用浏览器（如 Chrome, Firefox）打开它，你将看到一个标题为“我的第一个网页”的页面，内容是“你好，世界！”。
代码解析：
（图片来源网络，侵删）
<!DOCTYPE html>: 声明文档类型，告诉浏览器这是一个 HTML5 文档。<html>: 根元素，包裹了整个页面的内容。lang="zh-CN": 指定页面的语言为中文,有助于搜索引擎和屏幕阅读器。
<head>: 头部，包含页面的元数据（metadata），这些数据不会直接显示在页面上，但提供关于页面的信息。<meta charset="UTF-8">: 指定字符编码为 UTF-8,可以正确显示中文等特殊字符。<meta name="viewport" ...>: 响应式设计必需,确保在移动设备上正确缩放。<title>: 页面的标题,会显示在浏览器标签页上。
<body>: 主体，包含了所有在页面上可见的内容。<h1>: 一级标题,最重要的标题。<p>: 段落标签。
常用 HTML 标签详解
| 名称 | 描述 | 示例 | |
|---|---|---|---|
<h1> - <h6> |
表示六级标题，<h1>最重要 |
<h2>这是一个二级标题</h2> |
|
<p> |
段落 | 包含一段文本 | <p>这是一个段落。</p> |
<a> |
锚点/链接 | 创建到其他页面、文件或页面内部位置的链接 | <a href="https://www.google.com">访问谷歌</a> |
<img> |
图像 | 在页面上嵌入一张图片 | <img src="image.jpg" alt="一张美丽的风景"> |
<ul> / <ol> / <li> |
列表 | 无序列表 / 有序列表 / 列表项 | <ul><li>苹果</li><li>香蕉</li></ul> |
<div> |
分区 | 一个通用的块级容器，用于布局和分组内容 | <div>这是一个独立的区域</div> |
<span> |
内联容器 | 一个通用的内联容器，用于对文本的一部分进行样式设置 | <p>你好，<span style="color:red;">红色</span>的世界。</p> |
<strong> / <em> |
强调 | <strong> 表示强烈重要性（通常加粗），<em> 表示强调（通常斜体） |
<strong>重要</strong> / <em>注意</em> |
<br> |
换行 | 插入一个单行的换行符 | 第一行<br>第二行 |
<hr> |
水平线 | 创建一条水平分割线 | <hr> |
HTML 语义化
语义化 HTML 指的是使用有意义的标签来标记内容，用 <nav> 标签包裹导航链接，用 <article> 标签包裹一篇文章。
好处：
- 可读性高：代码更容易被人类读懂。
- SEO 友好：搜索引擎能更好地理解页面内容,提升排名。
- 可访问性：屏幕阅读器等辅助技术可以为残障人士更好地解析页面。
常用语义化标签 (HTML5):
<header>: 页面或区域的头部。<nav>: 导航链接区域。<main>: 页面的主要内容。<article>: 独立的内容，如博客文章、新闻。<section>: 页面中的一个独立区域。<aside>: 侧边栏或与主要内容相关的内容。<footer>: 页面或区域的底部。
HTML5 新特性简介
HTML5 带来了许多强大的新功能，让网页更“像应用”。
- 多媒体支持：原生支持
<video>和<audio>标签，无需 Flash。 - Canvas API：通过 JavaScript 在网页上绘制图形。
- SVG：用于绘制可缩放的矢量图形。
- 本地存储：
localStorage和sessionStorage可以在浏览器中存储数据。 - Geolocation API：获取用户的地理位置。
第二部分：CSS3 - 网页的衣裳
什么是 CSS？
CSS 的全称是 Cascading Style Sheets（层叠样式表），它用来描述 HTML 元素在屏幕上如何显示——包括颜色、字体、间距、布局等。
继续用盖房子的比喻，如果说 HTML 是设计图纸，CSS 就是装修和家具，它决定了墙壁刷什么颜色，家具怎么摆放,窗帘是什么样式。
如何将 CSS 应用到 HTML
有三种主要方式：
-
内联样式：直接在 HTML 标签的
style属性中写 CSS。- 缺点：代码混乱，难以维护,不推荐使用。
- 示例：
<p style="color: blue; font-size: 20px;">这是一段蓝色文字。</p>
-
内部样式表：在 HTML 文件的
<head>部分使用<style>- 缺点：只对当前页面有效,不适用于多页面网站。
- 示例：
<head> <style> p { color: green; } </style> </head>
-
外部样式表 (推荐)：创建一个独立的
.css文件，然后在 HTML 中通过<link>标签引入。- 优点：代码分离,便于维护和复用。
- 示例：
- 在
styles.css文件中：p { color: purple; } - 在
index.html文件的<head>中：<link rel="stylesheet" href="styles.css">
- 在
CSS 选择器
选择器是 CSS 用来定位 HTML 元素的“瞄准镜”。
| 选择器 | 示例 | 描述 |
|---|---|---|
| 元素选择器 | p |
选择所有 <p>
|
| 类选择器 | .intro |
所有 class="intro" 的元素。 |
| ID 选择器 | #header |
id="header" 的唯一元素。 |
| 后代选择器 | div p |
选择 <div> 内部的所有 <p>
|
| 子选择器 | div > p |
选择 <div> 的直接子元素 <p>。 |
| 通用选择器 | 选择页面上的所有元素。 | |
| 伪类选择器 | a:hover |
鼠标悬停在链接上时的样式。 |
盒模型
这是 CSS 布局的核心概念，每个 HTML 元素都可以看作一个矩形的盒子,它由以下几部分组成：
- Content (内容): 文本、图片等实际内容。
- Padding (内边距): 内容与边框之间的空间。
- Border (边框): 围绕内容和内边距的线。
- Margin (外边距): 盒子与其他元素之间的空间。
关键点：width 和 height 属性只控制 Content 区域的大小。box-sizing: border-box; 是一个非常有用的属性，它会将 width 和 height 应用到整个盒子（包括 padding 和 border）,让布局计算变得简单。
.box {
width: 300px;
height: 100px;
padding: 20px;
border: 5px solid black;
/* 默认是 content-box, 推荐使用 border-box */
box-sizing: border-box;
}
/* 使用 border-box 后，这个盒子的总宽度就是 300px */
常用 CSS 属性
-
文本属性:
color: 文本颜色。font-family: 字体系列。font-size: 字体大小。text-align: 文本对齐方式。line-height: 行高。
-
背景属性:
background-color: 背景颜色。background-image: 背景图片。background-size: 背景图片大小。
-
布局属性:
display: 元素的显示方式（block,inline,inline-block,flex,grid）。margin: 外边距。padding: 内边距。width/height: 宽度 / 高度。float: 浮动（旧布局方式，现代布局中多被 Flexbox/Grid 替代）。
布局基础：Flexbox
Flexbox（弹性盒子布局）是一维布局模型，非常灵活和强大,用于在容器内排列项目。
基本概念:
- 创建 Flex 容器: 给父元素设置
display: flex;。 - Flex 项目: 容器的直接子元素自动成为 Flex 项目。
常用 Flex 属性 (应用于容器):
justify-content: 主轴对齐方式（水平方向）。flex-start(默认),flex-end,center,space-between,space-around。
align-items: 交叉轴对齐方式（垂直方向）。stretch(默认),flex-start,flex-end,center。
flex-direction: 主轴方向。row(默认, 水平),column(垂直)。
示例:
.container {
display: flex;
justify-content: space-between; /* 两端对齐 */
align-items: center; /* 垂直居中 */
height: 200px;
border: 1px solid #ccc;
}
.item {
width: 100px;
height: 100px;
background-color: lightblue;
}
响应式设计入门
响应式设计让你的网页在不同尺寸的设备（桌面、平板、手机）上都能有良好的显示效果。
核心技术：媒体查询
媒体查询允许你根据设备的特定条件（如屏幕宽度）应用不同的 CSS 样式。
/* 默认样式，适用于所有设备 */
body {
font-size: 16px;
}
/* 当屏幕宽度小于等于 768px 时（平板或手机） */
@media (max-width: 768px) {
body {
font-size: 14px;
}
.container {
flex-direction: column; /* 改为垂直排列 */
}
}
视口单位:
vw: viewport width (视口宽度的 1%)。vh: viewport height (视口高度的 1%)。width: 50vw;表示元素的宽度是视口宽度的一半。
第三部分：综合实践
项目：制作一个简单的个人介绍页面
让我们把学到的知识结合起来,创建一个简单的个人介绍页面。
步骤 1：创建文件结构
my-portfolio/
├── index.html
└── styles.css步骤 2：编写 HTML (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="styles.css">
</head>
<body>
<header>
<h1>张三</h1>
<p>前端开发爱好者</p>
</header>
<nav>
<ul>
<li><a href="#about">关于我</a></li>
<li><a href="#skills">技能</a></li>
<li><a href="#contact">联系方式</a></li>
</ul>
</nav>
<main>
<section id="about">
<h2>关于我</h2>
<p>你好！我叫张三，是一名充满激情的前端开发学习者，我喜欢用代码创造美观且实用的网页。</p>
</section>
<section id="skills">
<h2>我的技能</h2>
<ul>
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript (学习中...)</li>
</ul>
</section>
</main>
<footer id="contact">
<p>联系我: email@example.com</p>
</footer>
</body>
</html>
步骤 3：编写 CSS (styles.css)
为 HTML 添加样式,并实现响应式设计。
/* 全局样式和基础设置 */
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
line-height: 1.6;
margin: 0;
background-color: #f4f4f4;
color: #333;
}
/* 布局容器 */
.container {
width: 80%;
max-width: 960px;
margin: 20px auto;
padding: 0 20px;
box-sizing: border-box;
}
/* 头部样式 */
header {
background-color: #333;
color: #fff;
text-align: center;
padding: 50px 20px;
border-radius: 5px;
}
header h1 {
margin: 0;
font-size: 2.5em;
}
header p {
margin: 10px 0 0;
font-size: 1.2em;
color: #ddd;
}
/* 导航栏样式 */
nav ul {
background-color: #444;
list-style-type: none;
padding: 0;
margin: 0;
text-align: center;
border-radius: 5px;
}
nav ul li {
display: inline; /* 让列表项水平排列 */
}
nav ul li a {
display: inline-block;
color: #fff;
text-decoration: none;
padding: 15px 20px;
}
nav ul li a:hover {
background-color: #555;
}
区域样式 */
main section {
background: #fff;
padding: 20px;
margin-bottom: 20px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
main section h2 {
border-bottom: 2px solid #eee;
padding-bottom: 10px;
}
/* 页脚样式 */
footer {
text-align: center;
padding: 20px;
background-color: #333;
color: #fff;
margin-top: 20px;
border-radius: 5px;
}
/* 响应式设计 */
@media (max-width: 768px) {
.container {
width: 95%;
}
header h1 {
font-size: 2em;
}
nav ul li {
display: block; /* 在小屏幕上让列表项垂直排列 */
width: 100%;
}
nav ul li a {
display: block; /* 让链接占满整行 */
padding: 15px;
}
}
步骤 4：查看效果
将两个文件保存在同一个文件夹中，用浏览器打开 index.html，你应该能看到一个样式良好、并且在调整浏览器窗口大小时会自适应布局的个人主页。
推荐学习资源
- MDN Web Docs (Mozilla Developer Network): 最权威、最全面的 Web 技术文档，强烈推荐作为查询手册。
- W3Schools: 另一个非常流行的在线教程和参考网站,例子丰富。
- freeCodeCamp: 提供免费的、交互式的编程课程,包含大量项目实践。
- Codecademy: 互动性强的学习平台,部分课程免费。
- 练习平台:
- CodePen: 在线编辑和分享 HTML, CSS, 代码的绝佳工具。
- JSFiddle: 类似 CodePen 的在线编辑器。
祝你学习愉快！从模仿开始，多写多练,你很快就能掌握网页开发的基础。
