第一周/第一节项目练习: 动手做自己的网页
2016-07-04 本文已影响54人
uvscjh
1. 引言
此次学习如何制作一个简易的网页
2. 网页组成部分
- head: 可以定义标题、编码、引用文件
- body: 正文显示部分
3. 具体实现
实现效果
Paste_Image.png
实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 指定字符编码为UTF-8 -->
<meta charset="UTF-8">
<!-- 标题,显示在浏览器标题栏 -->
<title>The blah</title>
<!-- 引用同级目录下的CSS样式文件 -->
<link rel="stylesheet" type="text/css" href="homework.css">
</head>
<body>
<!-- 创建首部布局,引用header类 -->
<div class="header">
<!-- 插入图片 -->
<img src="images/blah.png">
<!-- 定义一个无序列表，引用样式nav -->
<ul class="nav">
<!-- 插入3个列表项目 -->
<li><a href="#">Home</a></li>
<li><a href="#">Site</a></li>
<li><a href="#">Other</a></li>
</ul>
</div>
<!-- 创建正文布局，引用样式main-content -->
<div class="main-content">
<!-- 插入h2标题 -->
<h2>The Beach</h2>
<!-- 插入横线 -->
<hr>
<!-- 定义一个无序列表，引用样式photos -->
<ul class="photos">
<!-- 创建3个列表项目，并分别插入图片，且限定宽高 -->
<li><img src="images/0001.jpg" width="150" height="150" alt="pic1"></li>
<li><img src="images/0002.jpg" width="150" height="150" alt="pic2"></li>
<li><img src="images/0003.jpg" width="150" height="150" alt="pic3"></li>
</ul>
<!-- 插入一段文字 -->
<p>
xxxxxxxxxxxxxxxxxxxx
balabala
oooooooooooooooooooo
</p>
</div>
<!-- 创建尾部布局，引用样式footer -->
<div class="footer">
<!-- 版权标识 -->
<p>©mugglecoding</p>
</div>
</body>
</html>
4. 总结
- 简单了解了网页的各个组成部分
- 网页代码部分可以多层嵌套
- 改变内容的显示样式的文件可以事先单独定义在css样式文件中
