HTML 代码：茄子食谱网页编写
一个关于茄子的简单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>美味茄子食谱</title>
<style>
body {
font-family: 'Microsoft YaHei', sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
background-color: #f5f5f5;
color: #333;
}
header {
background-color: #6a1b9a;
color: white;
text-align: center;
padding: 2rem 0;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
.eggplant-info {
background-color: white;
padding: 20px;
margin: 20px 0;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.recipe {
background-color: white;
padding: 20px;
margin: 20px 0;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.recipe img {
max-width: 100%;
height: auto;
border-radius: 5px;
margin: 10px 0;
}
h1, h2, h3 {
color: #6a1b9a;
}
footer {
text-align: center;
padding: 20px;
background-color: #6a1b9a;
color: white;
margin-top: 20px;
}
.nutrition {
background-color: #f8f9fa;
padding: 15px;
border-left: 4px solid #6a1b9a;
}
</style>
</head>
<body>
<header>
<h1>美味茄子食谱</h1>
<p>探索茄子的多种烹饪方式</p>
</header>
<img src="
https://bbs.csdn.net/topics/619712657
" alt="鱼香茄子">
<div class="container">
<section class="eggplant-info">
<h2>关于茄子</h2>
<img src="
https://bbs.csdn.net/topics/619712741
" alt="茄子图片" style="float:right; margin-left:20px; width:300px;">
<p>茄子（学名：Solanum melongena）是一种常见的蔬菜，原产于印度，现已在世界各地广泛种植。茄子属于茄科植物，与番茄、土豆和辣椒是近亲。</p>
<p>茄子有多种品种，颜色从深紫色到白色不等，形状也各异，有长形、圆形和椭圆形等。茄子肉质柔软，口感细腻，适合多种烹饪方式。</p>
<div class="nutrition">
<h3>营养价值</h3>
<ul>
<li>富含膳食纤维</li>
<li>含有多种维生素（如维生素B1、B6和K）</li>
<li>矿物质含量丰富（如钾、锰和铜）</li>
<li>低热量，适合减肥饮食</li>
</ul>
</div>
</section>
<section class="recipe">
<h2>经典食谱：鱼香茄子</h2>
<img src="
https://bbs.csdn.net/topics/619712902
" alt="鱼香茄子">
<h3>材料</h3>
<ul>
<li>茄子 2根</li>
<li>猪肉末 100克</li>
<li>葱 1根</li>
<li>姜 1小块</li>
<li>蒜 3瓣</li>
<li>豆瓣酱 1大勺</li>
<li>生抽、老抽、醋、糖、淀粉适量</li>
</ul>
<h3>做法</h3>
<ol>
<li>茄子洗净切条，用盐水浸泡10分钟，沥干水分</li>
<li>葱、姜、蒜切末备用</li>
<li>调鱼香汁：生抽2勺、老抽1勺、醋2勺、糖1勺、淀粉1勺、水半碗</li>
<li>热锅热油，放入茄子炸至金黄捞出</li>
<li>锅中留底油，放入肉末炒至变色，加入豆瓣酱炒出红油</li>
<li>加入葱姜蒜末炒香，倒入炸好的茄子</li>
<li>倒入鱼香汁，大火收汁即可</li>
</ol>
</section>
<section class="recipe">
<h2>健康食谱：烤茄子</h2>
<img src="
https://bbs.csdn.net/topics/619712742
" alt="烤茄子">
<h3>材料</h3>
<ul>
<li>茄子 2根</li>
<li>橄榄油 2大勺</li>
<li>大蒜 3瓣（切末）</li>
<li>柠檬汁 1大勺</li>
<li>盐和胡椒粉 适量</li>
<li>新鲜香草（如罗勒或欧芹）适量</li>
</ul>
<h3>做法</h3>
<ol>
<li>烤箱预热至200°C</li>
<li>茄子洗净，纵向切成两半</li>
<li>在茄子切面上划几刀（不要切透）</li>
<li>将橄榄油、大蒜、柠檬汁、盐和胡椒粉混合成调味汁</li>
<li>将调味汁均匀涂抹在茄子切面上</li>
<li>将茄子放在烤盘上，烤25-30分钟，直到茄子变软</li>
<li>出炉后撒上新鲜香草即可食用</li>
</ol>
</section>
</div>
<footer>
<p>© 2023 美味茄子食谱 | 版权所有</p>
</footer>
</body>
</html>
代码说明
这个HTML页面包含以下部分：
头部：包含标题和简介，使用紫色背景突出显示
茄子介绍：包括茄子的基本信息、图片和营养价值
两个食谱：
鱼香茄子（中式烹饪）
烤茄子（健康烹饪方式）
页脚：版权信息
样式特点
响应式设计，适应不同屏幕尺寸
使用柔和的紫色(#6a1b9a)作为主色调
卡片式布局，使内容更易读
包含营养价值的信息框
