静态网页制作代码
时间: 2023-07-04 09:20:00 浏览: 122
静网页通常使用 HTML、CSS 和 JavaScript 语言进行制作。
以下是一个简单的 HTML 页面代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>我的网页</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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>
<p>这是我的网页,欢迎来访!</p>
<img src="image.jpg" alt="我的图片">
</main>
<footer>
<p>版权所有 © 2021 我的网站</p>
</footer>
</body>
</html>
```
其中,`<!DOCTYPE html>` 表示文档类型,`<html>` 表示 HTML 根元素,`<head>` 表示文档头部,`<title>` 指定页面标题,`<meta>` 用于指定页面元信息,`<link>` 引入外部样式表,`<body>` 表示文档主体,`<header>` 表示页面头部,`<nav>` 表示页面导航,`<ul>` 和 `<li>` 表示无序列表和列表项,`<main>` 表示页面主要内容,`<p>` 表示段落,`<img>` 表示图片,`<footer>` 表示页面底部。
CSS 样式表代码示例:
```css
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
header {
background-color: #333;
color: #fff;
padding: 10px;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav li {
display: inline-block;
margin: 0 10px;
}
nav a {
color: #fff;
text-decoration: none;
}
main {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
img {
max-width: 100%;
height: auto;
}
```
其中,`body` 表示页面主体样式,`header` 表示页面头部样式,`nav ul` 表示导航菜单样式,`nav li` 表示导航菜单项样式,`nav a` 表示导航菜单链接样式,`main` 表示页面主要内容样式,`img` 表示图片样式。
JavaScript 代码示例:
```javascript
console.log("Hello, world!");
function showAlert() {
alert("你点击了按钮!");
}
var button = document.querySelector("button");
button.addEventListener("click", showAlert);
```
其中,`console.log()` 用于在控制台输出信息,`function` 定义函数,`alert()` 显示警告框,`document.querySelector()` 用于选择页面元素,`addEventListener()` 用于添加事件监听器。
阅读全文