示例1：最简单的网页 - "你好，世界！"
这是一个最基础的网页,只包含标题和一些段落，没有复杂的样式。
（图片来源网络，侵删）
代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">我的第一个网页</title>
</head>
<body>
<h1>欢迎来到我的网站！</h1>
<p>这是一个段落，HTML是网页的骨架。</p>
<p>这是另一个段落，用来展示一些文本。</p>
</body>
</html>
代码解释：
<!DOCTYPE html>: 声明这是一个 HTML5 文档。<html>: 整个网页的根元素。<head>: 包含网页的元数据，比如标题、字符编码等，这些内容不会直接显示在页面上。<title>: 显示在浏览器标签页上的标题。<body>: 包含网页所有可见的内容，如标题、段落、图片等。<h1>: 一级标题，最重要的标题。<p>: 段落标签。
示例2：添加CSS样式 - 个人简介卡片
这个例子将展示如何使用 CSS 来美化 HTML 内容，我们将创建一个简单的个人简介卡片。
代码：
（图片来源网络，侵删）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">个人简介卡片</title>
<style>
/* 这是CSS样式代码 */
body {
font-family: 'Microsoft YaHei', sans-serif; /* 设置字体 */
background-color: #f0f2f5; /* 设置页面背景色 */
display: flex; /* 使用弹性布局 */
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
height: 100vh; /* 让body高度占满整个视口 */
margin: 0; /* 移除body默认的外边距 */
}
.card {
width: 350px;
background-color: #ffffff;
border-radius: 10px; /* 圆角 */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 阴影效果 */
padding: 25px; /* 内边距 */
text-align: center; /* 文本居中 */
}
.card h2 {
color: #333; /* 标题颜色 */
border-bottom: 2px solid #007bff; /* 标题下划线 */
padding-bottom: 10px;
}
.card p {
color: #666; /* 段落颜色 */
line-height: 1.6; /* 行高 */
}
.avatar {
width: 100px;
height: 100px;
border-radius: 50%; /* 将图片裁剪成圆形 */
margin-bottom: 15px;
border: 3px solid #007bff; /* 图片边框 */
}
</style>
</head>
<body>
<div class="card">
<img src="https://via.placeholder.com/100" alt="头像" class="avatar">
<h2>张三</h2>
<p>你好！我是一名前端开发爱好者。</p>
<p>我喜欢用代码创造美观且实用的网页。</p>
<p>很高兴认识你！</p>
</div>
</body>
</html>
代码解释：
<style>: 标签位于<head>内部，用于编写 CSS 代码。body { ... }: 选择body元素，并为其设置样式。font-family: 设置网页的默认字体。background-color: 设置背景颜色。display: flex; justify-content: center; align-items: center;: 这是一个非常流行的居中方法，可以让.card在页面中完美居中。height: 100vh: 让body的高度等于浏览器窗口的高度。
.card { ... }: 选择所有class属性为card的元素（即<div class="card">）。width: 设置宽度。background-color: 设置卡片的背景色为白色。border-radius: 添加圆角，10px是圆角的大小。box-shadow: 添加阴影，让卡片看起来有立体感。padding: 设置内边距，让内容与卡片边缘有一定距离。
.card h2 { ... }: 选择在class为card的元素内部的所有<h2>.avatar { ... }: 选择class为avatar的元素（即头像图片）。border-radius: 50%: 这是将任何正方形或矩形元素变成圆形的“魔法”。
<div class="card">:div是一个通用的容器，我们给它class="card"，就可以用上面的 CSS.card选择器来为它设置样式了。<img src="...">: 图片标签。src属性指向图片的路径，这里我使用了https://via.placeholder.com/100，这是一个在线占位图服务，会生成一个 100x100 像素的灰色图片，你可以替换成自己的图片路径。
示例3：稍复杂的布局 - 导航栏和内容区
这个例子将展示如何创建一个带有导航栏和两栏布局的网页,这是许多网站的基础结构。
代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">带导航栏的网页</title>
<style>
/* 全局样式 */
body {
font-family: Arial, sans-serif;
margin: 0;
background-color: #e9ecef;
color: #333;
}
/* 导航栏样式 */
.navbar {
background-color: #343a40;
padding: 10px 20px;
display: flex;
justify-content: space-between; /* 两端对齐 */
align-items: center;
}
.navbar a {
color: white;
text-decoration: none; /* 移除下划线 */
padding: 8px 15px;
border-radius: 5px;
transition: background-color 0.3s; /* 过渡效果 */
}
.navbar a:hover {
background-color: #495057; /* 鼠标悬停时变色 */
}
/* 主要内容区域样式 */
.main-container {
display: flex; /* 使用弹性布局创建两栏 */
max-width: 1200px;
margin: 20px auto; /* 水平居中 */
gap: 20px; /* 两栏之间的间距 */
}
/* 侧边栏样式 */
.sidebar {
flex: 0 0 250px; /* 不伸缩，基础宽度250px */
background-color: #f8f9fa;
padding: 20px;
border-radius: 5px;
height: fit-content; /* 高度适应内容 */
}
/* 主内容区样式 */
.content {
flex: 1; /* 占据剩余所有空间 */
background-color: white;
padding: 20px;
border-radius: 5px;
}
/* 页脚样式 */
.footer {
text-align: center;
padding: 20px;
background-color: #343a40;
color: white;
margin-top: 20px;
}
</style>
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar">
<div class="logo">我的Logo</div>
<div class="nav-links">
<a href="#home">首页</a>
<a href="#about">lt;/a>
<a href="#services">服务</a>
<a href="#contact">联系</a>
</div>
</nav>
<!-- 主要内容区 -->
<div class="main-container">
<!-- 侧边栏 -->
<aside class="sidebar">
<h3>侧边栏</h3>
<p>这里是一些额外的链接或信息。</p>
<ul>
<li><a href="#">链接 1</a></li>
<li><a href="#">链接 2</a></li>
<li><a href="#">链接 3</a></li>
</ul>
</aside>
<!-- 主内容 -->
<main class="content">
<h1>欢迎访问</h1>
<p>这是网页的主要内容区域，我们使用了 Flexbox 布局来创建这个两栏结构。</p>
<p>侧边栏的宽度是固定的，而主内容区会自动占据剩余的空间。</p>
<p>这种布局非常灵活和强大，是现代网页设计的基石之一。</p>
</main>
</div>
<!-- 页脚 -->
<footer class="footer">
<p>© 2025 我的网站. 保留所有权利.</p>
</footer>
</body>
</html>
代码解释：
（图片来源网络，侵删）
- 导航栏 (
.navbar):display: flex; justify-content: space-between;: 将导航栏内的 Logo 和链接分成两部分，并分别靠左和靠右显示。a:hover: 这是一个伪类选择器，当鼠标移动到链接上时才会应用其样式，这里我们改变了背景色，并添加了transition使变化更平滑。
- 区 (
.main-container):display: flex;: 将内部的.sidebar和.content变成并排的“弹性盒子”。gap: 20px;: 在两个弹性盒子之间创建一个 20px 的间隙。
- 侧边栏 (
.sidebar):flex: 0 0 250px;: 这是一个简写，意思是：flex-grow: 0;：不增长，占据固定空间。flex-shrink: 0;：不收缩，即使空间不够也不变小。flex-basis: 250px;：基础宽度为 250px。
- 区 (
.content):flex: 1;: 这也是一个简写，相当于flex: 1 1 0;，它告诉这个元素要占据所有剩余的可用空间。
- 页脚 (
.footer):text-align: center;: 使页脚内的文本居中。
如何使用这些代码
- 创建文件: 在你的电脑上创建一个新的文本文档。
- 复制粘贴: 将你喜欢的示例代码完整地复制并粘贴到这个文本文档中。
- 保存文件:
- 点击“文件” -> “另存为”。
- 在“保存类型”中，选择“所有文件(*.*)”。
- 在“文件名”中，输入
index.html（或者任何你喜欢的名字，但后缀必须是.html）。
- 打开网页: 找到你保存的
index.html文件，双击它，它就会在你的默认浏览器中打开。
希望这些例子能帮助你开始学习 HTML 和 CSS！从简单开始，逐步尝试添加更多的元素和样式，你会很快上手。
