html网页设计代码大全
HTML是用于创建网页的标记语言。
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your Page Title</title>
<style>
/* 添加样式表代码可以放在这里 */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
header {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
main {
padding: 20px;
}
footer {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<header>
<h1>Your Website Name</h1>
</header>
<main>
<h2>Welcome to Your Website!</h2>
<p>This is a sample HTML template. Modify it according to your needs.</p>
</main>
<footer>
<p>© 2024 Your Website. All rights reserved.</p>
</footer>
</body>
</html>
这是一个基本的 HTML 结构,包括文档声明、头部、主体,以及一些简单的内联 CSS 样式。你可以根据自己的需求添加更多的 HTML 元素和样式。
html<a href="https://www.example.com" target="_blank">Visit Example.com</a>
图像:
html<img src="image.jpg" alt="Description of the image">
列表:
html<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<ol>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ol>
表格:
html<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
</tr>
</tbody>
</table>
表单:
html<form action="/submit" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<input type="submit" value="Submit">
</form>
嵌入视频:
html<iframe width="560" height="315" src="https://www.youtube.com/embed/example" frameborder="0" allowfullscreen></iframe>
JavaScript 代码:
html<script>
// Your JavaScript code goes here
function showAlert() {
alert('Hello, this is an alert!');
}
</script>