请给出里面的实验代码所有
时间: 2024-10-19 15:03:07 浏览: 8
根据文档中的描述,以下是实验所需的HTML代码示例:
### 实验代码示例
#### 第一部分:基本页面布局
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>HTML5 开发环境搭建</title>
<style>
body {
margin: 0 200px;
font-size: 18px;
}
h3 {
text-align: center;
}
hr {
height: 1px;
background-color: #000FFF;
width: 100%;
}
</style>
</head>
<body>
<h3>这是一个标题</h3>
<hr>
<p>这是一段文本。</p>
<p>这是另一段文本。</p>
</body>
</html>
```
#### 第二部分:数学方程式页面
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>数学方程式</title>
<style>
body {
background-color: #F2FFC1;
}
h2 {
color: red;
text-align: center;
}
hr {
width: 80%;
height: 2px;
background-color: blue;
}
p {
text-align: center;
font-size: 36px;
}
</style>
</head>
<body>
<h2>数学方程式</h2>
<hr>
<p>E = mc<sup>2</sup></p>
<p>a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup></p>
</body>
</html>
```
### 说明
1. **第一部分**:实现了基本的页面布局,包括标题居中、水平线的样式设置等。
2. **第二部分**:实现了带有数学方程式的页面,包括背景颜色、标题样式、水平线样式和方程式的居中显示。
这些代码可以在 Visual Studio Code 中编写,并在 Edge 浏览器中预览效果。希望这些代码对你有帮助!
阅读全文