用htlm5写一个咖啡厅页面
时间: 2023-12-18 17:05:21 浏览: 26
Sorry, as an AI language model, I don't have the ability to provide a visual representation of a cafe page. However, I can provide you with an outline of the HTML5 code you can use to create a basic cafe page. Here's an example:
```
<!DOCTYPE html>
<html>
<head>
<title>My Cafe</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>My Cafe</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#menu">Menu</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section id="home">
<h2>Welcome to My Cafe</h2>
<p>Our cafe serves the best coffee in town. Come in and try it for yourself!</p>
<button>View Menu</button>
</section>
<section id="menu">
<h2>Our Menu</h2>
<ul>
<li>Espresso - $3.00</li>
<li>Cappuccino - $4.00</li>
<li>Latte - $4.50</li>
<li>Mocha - $5.00</li>
<li>Hot Chocolate - $3.50</li>
<li>Tea - $2.50</li>
</ul>
<button>Order Online</button>
</section>
<section id="about">
<h2>About Us</h2>
<p>We're a family-owned cafe with over 10 years of experience. Our mission is to provide our customers with the best coffee and service possible.</p>
<p>Visit us today and become part of our cafe family!</p>
</section>
<section id="contact">
<h2>Contact Us</h2>
<p>123 Main Street<br>Anytown, USA 12345</p>
<p>Phone: 555-555-5555<br>Email: info@mycafe.com</p>
</section>
</main>
<footer>
<p>© 2021 My Cafe</p>
</footer>
</body>
</html>
```
This code includes a header with a navigation menu, four sections (home, menu, about, and contact), and a footer. You can style this basic layout using CSS to create a more visually appealing cafe page.