從零開始HTML（二 2016/9/20）_ZenDei技術網路在線

1.佈局 ① 使用 <div> 元素的 HTML 佈局，<div> 元素常用作佈局工具，因為能夠輕鬆地通過 CSS 對其進行定位。 ② 使用 HTML5 的網站佈局 HTML5 提供的新語義元素定義了網頁的不同部分： HTML5 語義元素： ③ 使用表格的 HTML 佈局。<table> 元素不是 ...

1.佈局

① 使用 <div> 元素的 HTML 佈局，<div> 元素常用作佈局工具，因為能夠輕鬆地通過 CSS 對其進行定位。

<!DOCTYPE html>
<html>

<head>
<style>
#header {
    background-color:black;
    color:white;
    text-align:center;
    padding:5px;
}
把div理解成一個盒子，設置了盒子的高和寬，後面的盒子就自動跑到前面盒子沒占的地方
#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;        清除前面float(浮動)的影響
    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">
Copyright ? W3Schools.com
</div>

</body>
</html>

② 使用 HTML5 的網站佈局

HTML5 提供的新語義元素定義了網頁的不同部分：

HTML5 語義元素：

header	定義文檔或節的頁眉
nav	定義導航鏈接的容器
section	定義文檔中的節
article	定義獨立的自包含文章
aside	定義內容之外的內容（比如側欄）
footer	定義文檔或節的頁腳
details	定義額外的細節
summary	定義 details 元素的標題

<!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>

<header>
<h1>City Gallery</h1>
</header>

<nav>
London<br>
Paris<br>
Tokyo<br>
</nav>

<section>
<h1>London</h1>
<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>
</section>

<footer>
Copyright W3Schools.com
</footer>

</body>
</html>

③ 使用表格的 HTML 佈局。<table> 元素不是作為佈局工具而設計的，<table> 元素的作用是顯示表格化的數據，使用 <table> 元素能夠取得佈局效果，因為能夠通過 CSS 設置表格元素的樣式

複習表格：下麵代碼所定義的是一個一行一列的表格，<th>是這一行的表頭，<td>是這一行的內容，<tr>定義了這一行。

<!DOCTYPE html>
<html>
<head>
<style>
table.lamp {
    width:100%;
    border:1px solid #d4d4d4;
}
table.lamp th, td { 
    padding:10px;
}
table.lamp th {
    width:40px;
}

</style>
</head>

<body>
 
<table class="lamp">
<tr>
  <th>
    <img src="/images/lamp1.jpg" alt="Note" style="height:32px;width:32px">
  </th>
  <td>
    The table element was not designed to be a layout tool.
  </td>
</tr>
</table>

</body>
</html>

2.HTML 響應式 Web 設計

RWD 指的是響應式 Web 設計（Responsive Web Design）
RWD 能夠以可變尺寸傳遞網頁
RWD 對於平板和移動設備是必需的

① 創建響應式設計的一個方法，是自己來創建它：

<!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>W3School 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>

② 使用 Bootstrap，另一個創建響應式設計的方法，是使用現成的 CSS 框架。Bootstrap 是最流行的開發響應式 web 的 HTML, CSS, 和 JS 框架。Bootstrap 幫助您開發在任何尺寸都外觀出眾的站點：顯示器、筆記本電腦、平板電腦或手機：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" 
  href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>

<body>

<div class="container">
<div class="jumbotron">
  <h1>W3School Demo</h1> 
  <p>Resize this responsive page!</p> 
</div>
</div>

<div class="container">
<div class="row">
  <div class="col-md-4">
    <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="col-md-4">
    <h2>Paris</h2>
    <p>Paris is the capital and most populous city of France.</p>
  </div>
  <div class="col-md-4">
    <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>
</div>
</div>

</body>
</html>

★ 後續繼續學習bootstrap。

3.框架

通過使用框架，可以在同一個瀏覽器視窗中顯示不止一個頁面。每份HTML文檔稱為一個框架，並且每個框架都獨立於其他的框架。

使用框架的壞處：

開發人員必須同時跟蹤更多的HTML文檔
很難列印整張頁面

框架結構標簽（<frameset>）

框架結構標簽（<frameset>）定義如何將視窗分割為框架
每個 frameset 定義了一系列行或列
rows/columns 的值規定了每行或每列占據屏幕的面積

Frame 標簽定義了放置在每個框架中的 HTML 文檔。

在下麵的這個例子中，我們設置了一個兩列的框架集。第一列被設置為占據瀏覽器視窗的 25%。第二列被設置為占據瀏覽器視窗的 75%。HTML 文檔 "frame_a.htm" 被置於第一個列中，而 HTML 文檔 "frame_b.htm" 被置於第二個列中：

<frameset cols="25%,75%">
   <frame src="frame_a.htm">
   <frame src="frame_b.htm">
</frameset>

① 假如一個框架有可見邊框，用戶可以拖動邊框來改變它的大小。為了避免這種情況發生，可以在 <frame> 標簽中加入：noresize="noresize"。

② 不能將 <body></body> 標簽與 <frameset></frameset> 標簽同時使用！

4.內聯框架

① iframe 用於在網頁內顯示網頁。

<iframe src="URL"></iframe>

② Iframe - 設置高度和寬度

height 和 width 屬性用於規定 iframe 的高度和寬度。

屬性值的預設單位是像素，但也可以用百分比來設定（比如 "80%"）。

<iframe src="demo_iframe.htm" width="200" height="200"></iframe>

③ Iframe - 刪除邊框

frameborder 屬性規定是否顯示 iframe 周圍的邊框。設置屬性值為 "0" 就可以移除邊框：

<iframe src="demo_iframe.htm" frameborder="0"></iframe>

④ 使用 iframe 作為鏈接的目標

iframe 可用作鏈接的目標（target），即在該frame中顯示網頁。鏈接的 target 屬性必須引用 iframe 的 name 屬性：

<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://www.w3school.com.cn" target="iframe_a">W3School.com.cn</a></p>

5.背景

背景屬性將背景設置為圖像。屬性值為圖像的URL。如果圖像尺寸小於瀏覽器視窗，那麼圖像將在整個瀏覽器視窗進行複製。

URL可以是相對地址，如第一行代碼。也可以使絕對地址，如第二行代碼：

<body background="clouds.gif">
<body background="http://www.w3school.com.cn/clouds.gif">

6.頭部

①<head> 元素是所有頭部元素的容器。<head> 內的元素可包含腳本，指示瀏覽器在何處可以找到樣式表，提供元信息，等等。以下標簽都可以添加到 head 部分：<title>、<base>、<link>、<meta>、<script> 以及 <style>。

②<title> 標簽定義文檔的標題。title 元素在所有 HTML/XHTML 文檔中都是必需的。

title 元素能夠：

定義瀏覽器工具欄中的標題
提供頁面被添加到收藏夾時顯示的標題
顯示在搜索引擎結果中的頁面標題

③HTML <base> 元素，<base> 標簽為頁面上的所有鏈接規定預設地址或預設目標（target）：

<html>
<head>
<base href="http://www.w3school.com.cn/i/" />
<base target="_blank" />
</head>

<body>
<img src="eg_smile.gif" /><br />
<p>請註意，我們已經為圖像規定了一個相對地址。由於我們已經在 head 部分規定了一個基準 URL，瀏覽器將在如下地址尋找圖片：</p>
<p>"http://www.w3school.com.cn/i/eg_smile.gif"</p>


</body>
</html>

④ HTML <link> 元素，<link> 標簽定義文檔與外部資源之間的關係。<link> 標簽最常用於連接樣式表。

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

7.文檔類型

Web 世界中存在許多不同的文檔。只有瞭解文檔的類型，瀏覽器才能正確地顯示文檔。

HTML 也有多個不同的版本，只有完全明白頁面中使用的確切 HTML 版本，瀏覽器才能完全正確地顯示出 HTML 頁面。這就是 <!DOCTYPE> 的用處。

<!DOCTYPE> 不是 HTML 標簽。它為瀏覽器提供一項信息（聲明），即 HTML 是用什麼版本編寫的。

HTML5：

<!DOCTYPE html>

到這兒W3C上HTML基礎教程就看完啦，用了兩天晚上的時間，看的還是比較快，要是之前也能這麼靜下心慢慢看說不定就能有更好的進步呢。