html5代码实例
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 Example</title>
<style>
/* CSS 样式可以放在 <style> 标签内或者外部的样式表文件中 */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f0f0f0;
}
header, nav, section, article, footer {
display: block;
}
header {
background-color: #333;
color: #fff;
padding: 10px 0;
text-align: center;
}
nav {
background-color: #666;
padding: 10px;
color: #fff;
}
nav ul {
list-style-type: none;
padding: 0;
margin: 0;
text-align: center;
}
nav ul li {
display: inline;
margin-right: 10px;
}
section {
padding: 20px;
margin: 10px;
background-color: #fff;
border-radius: 5px;
}
footer {
background-color: #333;
color: #fff;
padding: 10px 0;
text-align: center;
position: fixed;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<header>
<h1>Welcome to My Website</h1>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<section>
<h2>About Us</h2>
<p>Welcome to our website! We provide various services...</p>
</section>
<section>
<h2>Services</h2>
<p>Our services include web development, graphic design,...</p>
</section>
<footer>
<p>© 2024 My Website. All Rights Reserved.</p>
</footer>
</body>
</html>
此示例展示了一个简单的 HTML5 结构，包括了 <header>、<nav>、<section>、<footer> 等 HTML5 新增的语义化元素，并使用了一些 CSS 样式来美化页面的外观。
下面是一个 HTML5 代码示例的
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 Example (Continued)</title>
<style>
/* 在此处添加您的 CSS 样式 */
</style>
</head>
<body>
<header>
<h1>Welcome to My Website</h1>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<section>
<h2>About Us</h2>
<p>Welcome to our website! We provide various services...</p>
</section>
<section>
<h2>Services</h2>
<p>Our services include web development, graphic design,...</p>
</section>
<section>
<h2>Contact Us</h2>
<form action="#" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br><br>
<label for="message">Message:</label><br>
<textarea id="message" name="message" rows="4" cols="50" required></textarea><br><br>
<input type="submit" value="Submit">
</form>
</section>
<footer>
<p>© 2024 My Website. All Rights Reserved.</p>
</footer>
</body>
</html>
在这个
