网页代码实验报告
时间: 2023-07-10 13:05:57 浏览: 110
网页设计实验报告及代码.doc
5星 · 资源好评率100%
实验目的:编写一个简单的网页,展示HTML和CSS的基础用法。
实验过程:
1.新建一个HTML文件,命名为“index.html”。
2.在文件中编写HTML代码,包括页面标题、页面头部和页面主体。代码如下:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网页代码实验报告</title>
<style>
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
font-size: 16px;
color: #333;
margin: 0;
padding: 0;
}
header {
background-color: #fff;
padding: 20px;
border-bottom: 1px solid #ddd;
}
h1 {
font-size: 32px;
margin: 0;
}
main {
padding: 20px;
max-width: 800px;
margin: 0 auto;
}
p {
line-height: 1.5;
margin-bottom: 10px;
}
</style>
</head>
<body>
<header>
<h1>网页代码实验报告</h1>
</header>
<main>
<h2>实验目的</h2>
<p>编写一个简单的网页,展示HTML和CSS的基础用法。</p>
<h2>实验过程</h2>
<p>新建一个HTML文件,命名为“index.html”。</p>
<p>在文件中编写HTML代码,包括页面标题、页面头部和页面主体。</p>
<p>为页面添加CSS样式,包括背景颜色、字体等。</p>
<h2>实验结果</h2>
<p>成功展示了HTML和CSS的基础用法,并完成了一个简单的网页。</p>
</main>
</body>
</html>
```
3.为页面添加CSS样式,包括背景颜色、字体等。代码如下:
```css
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
font-size: 16px;
color: #333;
margin: 0;
padding: 0;
}
header {
background-color: #fff;
padding: 20px;
border-bottom: 1px solid #ddd;
}
h1 {
font-size: 32px;
margin: 0;
}
main {
padding: 20px;
max-width: 800px;
margin: 0 auto;
}
p {
line-height: 1.5;
margin-bottom: 10px;
}
```
实验结果:成功展示了HTML和CSS的基础用法,并完成了一个简单的网页。
实验总结:本次实验通过编写一个简单的网页,加深了对HTML和CSS的理解和掌握。同时,也学习了如何将HTML和CSS代码整合到一起,实现网页的样式设置。
阅读全文