粤菜文化探索：一个简单的H5介绍页面
需积分: 10 7 浏览量
更新于2024-09-11
收藏 16KB DOCX 举报
"H5菜品推荐（粤菜）.docx"
这篇文档介绍了一个关于粤菜的H5页面制作，其中包含了HTML和CSS的基本代码，目的是为了展示一个简单的H5页面，用于介绍粤菜的相关信息。H5，即HTML5，是超文本标记语言的第五次重大修订，增强了网页的交互性和多媒体支持。
1. HTML代码解析：
- `<!DOCTYPE html>`：声明文档类型为HTML5。
- `<html lang="en">`：定义文档的语言为英语，这里可以根据实际需要更改。
- `<head>`：包含文档的元数据，如标题和样式表链接。
- `<meta charset="UTF-8">`：设置字符编码为UTF-8，确保中文字符正确显示。
- `<title>`：定义页面标题，这里是“粤菜网站”。
- `<style>`：内联样式，用于设置图片的宽度和高度。
- `<link rel="stylesheet" type="text/css" href="css/yc1.css">`：引入外部CSS样式表，用于页面的进一步美化。
2. CSS代码解析：
- `body`：设置页面主体的样式。
- `margin: 0; padding: 0;`：清除默认边距和内边距，使得布局更加可控。
- `background-image`：给body添加背景图片，路径为"C:/Users/孙宇航/Desktop/H5实训/img/tou1.jpg"。
- `.wrapper`：定义一个类名为“wrapper”的div，用于包裹内容。
- `width: 1024px;`：设置wrapper的宽度为1024像素。
- `padding: 30px;`：设置内边距，让内容与边框有一定的距离。
- `line-height: 1.75em;`：设置行高，影响文本的垂直排列。
- `margin: 0 auto;`：将wrapper水平居中显示，通过自动填充左右边距实现。
- `color: #333;`：设置文字颜色为深灰色。
3. 粤菜介绍：
- 粤菜，又称广东菜，是中国传统四大菜系之一，源于岭南地区。
- 粤菜由广州菜、潮州菜和东江菜组成，各有独特风味。
- 粤菜历史悠久，源自汉初，受中原饮食文化影响，并结合本地特色发展。
- 广东丰富的物产和对鲜活食材的喜好，是粤菜的一大特点。
- 近百年来，粤菜已成为国内外具有广泛影响力的饮食文化。
这个H5页面的制作，不仅展示了HTML5和CSS的基础应用，还融入了对中国传统美食文化的介绍，是学习和实践Web前端技术的好例子。通过这样的项目，我们可以了解到如何利用HTML和CSS构建一个基本的交互式网页，同时也能增进对中国传统美食的了解。
首页程序源代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<tle>粤菜网站</tle>
<style type="text/css">
img{ width: 100%; height: 100%; }
</style>
<link rel="stylesheet" type="text/css" href="css/yc1.css ">
</head>
<body>
<div class="wrapper">
<a href="yc2.html" target="_slef">
<h1>粤菜简介</h1>
</a>
<p> 粤菜即广东菜，是中国传统四大菜系、八大菜系之一，发源于岭南。粤菜由
广州菜(也称广府菜)、潮州菜(也称潮汕菜)、东江菜(也称客家菜) 三种地方风味组成，三种
风味各具特色 。在世界各地粤菜与法国大餐齐名，由于广东海外华侨数量占全国六成，因
此世界各国的中菜馆多数是以粤菜为主。</p>
<p> 粤菜历史悠久，起源可远溯至距今两千多年的汉初。早在中原的移民到来之
前，岭南先民就已有独特的饮食风格。广东物产特别丰富，唾手可得，烹而食之，由此养
成的喜好鲜活、生猛的饮食习惯。随着历史变迁和朝代更替，中原移民不断南迁，带来
了"烩不厌细，食不厌精"的中原饮食风格。漫长的岁月，使广东既继承了中原饮食文化的
传统，又博采外来及各方面的烹饪精华，再根据本地的口味、嗜好、习惯，不断吸收、积
累、改良、创新，从而形成了菜式繁多、烹调考究、质优味美的饮食特色。近百年来已成
为国内最具代表性和最有世界影响的饮食文化之一。</p>
</div>
</body>
</html>
首页 CSS 样式代码：
body{
margin: 0; /*外边距为 0*/
padding: 0; /*内边距为 0*/
}
/*给整个 body 设置一张背景图*/
body{
background-image: url(C:/Users/孙宇航/Desktop/H5 实训/img/tou1.jpg)
}
.wrapper {
width: 1024px;
padding: 30px; /*上下左右的内边距都是 30px;*/
line-height: 1.75em;/*行高为 1.75em*/
下载后可阅读完整内容，剩余6页未读，立即下载
2022-07-11 上传
2024-05-17 上传
༺ད星ཌ༻
- 粉丝: 0
- 资源: 1
我的内容管理
展开
最新资源
- 探索AVL树算法：以Faculdade Senac Porto Alegre实践为例
- 小学语文教学新工具：创新黑板设计解析
- Minecraft服务器管理新插件ServerForms发布
- MATLAB基因网络模型代码实现及开源分享
- 全方位技术项目源码合集：***报名系统
- Phalcon框架实战案例分析
- MATLAB与Python结合实现短期电力负荷预测的DAT300项目解析
- 市场营销教学专用查询装置设计方案
- 随身WiFi高通210 MS8909设备的Root引导文件破解攻略
- 实现服务器端级联：modella与leveldb适配器的应用
- Oracle Linux安装必备依赖包清单与步骤
- Shyer项目：寻找喜欢的聊天伙伴
- MEAN堆栈入门项目： postings-app
- 在线WPS办公功能全接触及应用示例
- 新型带储订盒订书机设计文档
- VB多媒体教学演示系统源代码及技术项目资源大全
