html网页制作代码大全
时间: 2023-08-24 15:06:14 浏览: 37
以下是一个简单的 HTML 网页制作代码示例,包括基本的标签和格式:
```html
<!DOCTYPE html>
<html>
<head>
<title>我的网页</title>
<meta charset="UTF-8">
<meta name="description" content="这是我的第一个网页">
<meta name="keywords" content="HTML, CSS, JavaScript">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>欢迎来到我的网页</h1>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>最新消息</h2>
<p>欢迎来到我的网页,这是我的第一个网页。请多多关注,我会不断更新。</p>
</section>
<section>
<h2>产品介绍</h2>
<ul>
<li>产品1</li>
<li>产品2</li>
<li>产品3</li>
</ul>
</section>
</main>
<footer>
<p>版权所有 © 2021 我的网页</p>
</footer>
</body>
</html>
```
该示例包含了以下基本标签和格式:
- `<!DOCTYPE html>` - 声明文档类型为 HTML5。
- `<html>` - 整个 HTML 页面的根元素。
- `<head>` - 包含了页面的元数据,例如标题、字符集、描述和关键字,以及与其他文件的链接。
- `<title>` - 页面的标题,显示在浏览器的标签页上。
- `<meta>` - 描述页面的元数据,例如字符集、描述和关键字。
- `<link>` - 链接到其他文件,例如 CSS 文件。
- `<body>` - 页面的主体内容。
- `<header>` - 包含了网站的标题、标志和导航栏。
- `<nav>` - 网站的导航栏。
- `<ul>` - 无序列表。
- `<li>` - 列表项。
- `<main>` - 包含了网站的主要内容。
- `<section>` - 包含了网站的不同部分,例如最新消息和产品介绍。
- `<h1>` - 页面的主标题。
- `<p>` - 段落。
- `<footer>` - 包含了网站的页脚,例如版权信息。
注意,该示例中的 CSS 文件还未包含在内。您需要在同一目录下创建一个名为 "style.css" 的新文件,并在其中添加样式规则。例如:
```css
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
header {
background-color: #333;
color: #fff;
padding: 10px;
}
nav {
display: inline-block;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-right: 20px;
}
nav li:last-child {
margin-right: 0;
}
nav a {
color: #fff;
text-decoration: none;
}
main {
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
section {
margin-bottom: 40px;
}
h1, h2 {
font-weight: normal;
}
h2 {
margin-top: 0;
}
ul {
margin-left: 20px;
}
footer {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
```
这是一些基本的样式规则,用于使您的网站看起来更好。您可以根据自己的需要添加更多样式规则。