1. 引言
此次學(xué)習(xí)如何制作一個(gè)簡(jiǎn)易的網(wǎng)頁(yè)
2. 網(wǎng)頁(yè)組成部分
- head: 可以定義標(biāo)題仪壮、編碼喜滨、引用文件
- body: 正文顯示部分
3. 具體實(shí)現(xiàn)
實(shí)現(xiàn)效果
Paste_Image.png
實(shí)現(xiàn)代碼
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 指定字符編碼為UTF-8 -->
<meta charset="UTF-8">
<!-- 標(biāo)題,顯示在瀏覽器標(biāo)題欄 -->
<title>The blah</title>
<!-- 引用同級(jí)目錄下的CSS樣式文件 -->
<link rel="stylesheet" type="text/css" href="homework.css">
</head>
<body>
<!-- 創(chuàng)建首部布局,引用header類(lèi) -->
<div class="header">
<!-- 插入圖片 -->
<img src="images/blah.png">
<!-- 定義一個(gè)無(wú)序列表痴怨，引用樣式nav -->
<ul class="nav">
<!-- 插入3個(gè)列表項(xiàng)目 -->
<li><a href="#">Home</a></li>
<li><a href="#">Site</a></li>
<li><a href="#">Other</a></li>
</ul>
</div>
<!-- 創(chuàng)建正文布局雏婶，引用樣式main-content -->
<div class="main-content">
<!-- 插入h2標(biāo)題 -->
<h2>The Beach</h2>
<!-- 插入橫線 -->
<hr>
<!-- 定義一個(gè)無(wú)序列表过椎，引用樣式photos -->
<ul class="photos">
<!-- 創(chuàng)建3個(gè)列表項(xiàng)目忆肾，并分別插入圖片荸频，且限定寬高 -->
<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>
<!-- 創(chuàng)建尾部布局，引用樣式footer -->
<div class="footer">
<!-- 版權(quán)標(biāo)識(shí) -->
<p>?mugglecoding</p>
</div>
</body>
</html>
4. 總結(jié)
- 簡(jiǎn)單了解了網(wǎng)頁(yè)的各個(gè)組成部分
- 網(wǎng)頁(yè)代碼部分可以多層嵌套
- 改變內(nèi)容的顯示樣式的文件可以事先單獨(dú)定義在css樣式文件中
