一、span與div
<div>是塊級元素，它是可用於組合其他 HTML 元素的容器。由於它屬於塊級元素，瀏覽器會在其前後顯示折行。常與css一起使用設置佈局。<span> 元素是內聯元素，可用作文本的容器。與css一起使用，設置文本的樣式。
<!DOCTYPE html>
<html>
<head>
<style>
#header {
background-color:black;
color:white;
text-align:center;
padding:5px;
}
#nav {
line-height:30px;
background-color:#eeeeee;
height:300px;
width:100px;
float:left;
padding:5px;
}
#section {
width:350px;
float:left;
padding:10px;
}
#footer {
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;
}
</style>
</head>
<body>
<div id="header">
<h1>City Gallery</h1>
</div>
<div id="nav">
London<br>
Paris<br>
Tokyo<br>
</div>
<div id="section">
<h2>London</h2>
<p>
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
</p>
<p>
Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
</p>
</div>
<div id="footer">
Data 2018.4.3
</div>
</body>
</html>
另外如果不用div的話，可以用下面的標籤
| header | 定義文檔或節的頁眉 |
| nav | 定義導航鏈接的容器 |
| section | 定義文檔中的節 |
| article | 定義獨立的自包含文章 |
| aside | 定義內容之外的內容（比如側欄） |
| footer | 定義文檔或節的頁腳 |
| details | 定義額外的細節 |
| summary | 定義 details 元素的標題 |
二、HTML 響應式 Web 設計
- RWD 指的是響應式 Web 設計（Responsive Web Design）
- RWD 能夠以可變尺寸傳遞網頁
- RWD 對於平板和移動設備是必需的
bootstrap是目前最流行的響應式框架，可以在手機，平板，電腦等任何尺寸的設備上用一個設計。下面是一個例子
<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
.city {
float: left;
margin: 5px;
padding: 15px;
width: 300px;
height: 300px;
border: 1px solid black;
}
</style>
</head>
<body>
<h1>Demo</h1>
<h2>Resize this responsive page!</h2>
<br>
<div class="city">
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</div>
<div class="city">
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</div>
<div class="city">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div>
</body>
</html>
三、內聯框架iframe
通過使用框架，你可以在同一個瀏覽器窗口中顯示不止一個頁面。每份HTML文檔稱爲一個框架，並且每個框架都獨立於其他的框架。但是開發人員必須跟蹤多個頁面，在框架裏也很難打印整個頁面。
<iframe src="demo_iframe.htm" width="200" height="200"></iframe>