下面是一个简单的html旅游网页制作示例代码,使用 HTML 和 CSS 实现页面样式和布局。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>旅游网站</title> <style> body { font-family: Arial, sans-serif; background-color: #f0f0f0; margin: 0; padding: 0; } header { background-color: #333; color: #fff; padding: 20px; text-align: center; } nav { background-color: #555; color: #fff; padding: 10px; text-align: center; } main { background-color: #fff; padding: 20px; margin: 10px; } footer { background-color: #333; color: #fff; padding: 10px; text-align: center; } </style> </head> <body> <header> <h1>旅游网站</h1> </header> <nav> <a href="#">首页</a> | <a href="#">景点</a> | <a href="#">住宿</a> | <a href="#">交通</a> | <a href="#">联系我们</a> </nav> <main> <h2>热门景点</h2> <p>这里介绍一些热门的旅游景点,并提供相关的信息和预订链接。</p> <ul> <li><a href="#">北京故宫</a></li> <li><a href="#">上海外滩</a></li> <li><a href="#">西安兵马俑</a></li> </ul> </main> <footer> © 2021 旅游网站 </footer> </body> </html>
代码元素解释:
- `<!DOCTYPE html>`:文档类型声明,告诉浏览器当前文档使用的是 HTML5 规范。
- `<html>`:HTML 页面的根元素,包含整个页面的内容。
- `<head>`:页面头部,包含元数据和其他引用信息。
- `<meta>`:用于设置页面的元数据,如字符集、关键词等。
- `<title>`:页面标题,显示在浏览器的标签栏上。
- `<style>`:用于设置页面的样式和布局。
- `<body>`:页面的主要内容部分。
- `<header>`:页面头部,通常包含网站标志、主导航等元素。
- `<nav>`:页面导航栏,通常包含站点链接和其他导航元素。
- `<main>`:页面的主要内容,通常包含文章、图片和其他相关信息。
- `<h1>`、`<h2>`:标头元素,用于显示不同级别的标题文本。
- `<p>`:段落元素,用于显示文本内容。
- `<ul>`、`<li>`:列表元素,用于显示有序或无序列表。
- `<a>`:超链接元素,用于创建页面内或页面间的链接。
- `<footer>`:页面尾部,通常包含版权信息、联系方式等元素。
效果截图: