Tag Archives: 電腦語言

HTML5 教程-HTML5 遷移

HTML5 遷移

從HTML4 遷移至HTML5

本章講解如何從一張典型的HTML4 頁面遷移至典型的HTML5。

本章演示如何把一張已有的HTML4 頁面轉換為HTML5 頁面，在不破壞如何原始內容和結構的情況下。

註釋：您可以使用相同的技巧從HTML4 以及XHTML 遷移至HTML5。

典型的HTML4	典型的HTML5
<div id=」header」>	<header>
<div id=」menu」>	<nav>
<div id=」content」>	<section>
<div id=」post」>	<article>
<div id=」footer」>	<footer>

典型的HTML4 頁面

實例

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>HTML4</title>
<style>
  body {font-family:Verdana,sans-serif;font-size:0.8em;}
  div#header,div#footer,div#content,div#post 
  {border:1px solid grey;margin:5px;margin-bottom:15px;padding:8px;background-color:white;}
  div#header,div#footer {color:white;background-color:#444;margin-bottom:5px;}
  div#content {background-color:#ddd;}
  div#menu ul {margin:0;padding:0;}
  div#menu ul li {display:inline; margin:5px;}
</style>
</head>
<body>

<div id="header">
  <h1>Monday Times</h1>
</div>

<div id="menu">
  <ul>
    <li>News</li>
    <li>Sports</li>
    <li>Weather</li>
  </ul>
</div>

<div id="content">
<h2>News Section</h2>

<div id="post">
  <h2>News Article</h2>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
</div>

<div id="post">
  <h2>News Article</h2>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
</div>

</div>

<div id="footer">
  <p>© 2014 Monday Times. All rights reserved.</p>
</div>

</body>
</html>

親自試一試

更改為HTML5 Doctype

修改文檔類型，從HTML4 doctype：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">

修改為HTML5 doctype：

<!DOCTYPE html>

親自試一試

更改為HTML5 編碼

修改編碼信息，從HTML4：

<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

改為HTML5：

<meta charset="utf-8">

親自試一試

添加shiv

所有現代瀏覽器都支持HTML5 語義元素。

此外，您可以“教授”老式瀏覽器如何處理“未知元素”。

為Internet Explorer 支持而添加的shiv：

<!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

親自試一試

註釋：請在HTML5 瀏覽器支持中閱讀更多有關shiv 的知識。

為HTML5 語義元素添加CSS

請看已有的CSS 樣式：

div#header,div#footer,div#content,div#post {
    border:1px solid grey;margin:5px;margin-bottom:15px;padding:8px;background-color:white;
}
div#header,div#footer {
    color:white;background-color:#444;margin-bottom:5px;
}
div#content {
    background-color:#ddd;
}
div#menu ul {
    margin:0;padding:0;
}
div#menu ul li {
    display:inline; margin:5px;
}
Duplicate with equal CSS styles for HTML5 semantic elements:

header,footer,section,article {
    border:1px solid grey;margin:5px;margin-bottom:15px;padding:8px;background-color:white;
}
header,footer {
    color:white;background-color:#444;margin-bottom:5px;
}
section {
    background-color:#ddd;
}
nav ul {
    margin:0;padding:0;
}
nav ul li {
    display:inline; margin:5px;
}

親自試一試

更改為HTML5 <header> 和<footer>

把id=」header」和id=」footer」的<div> 元素：

<div id="header">
  <h1>Monday Times</h1>
</div>
.
.
.
<div id="footer">
  <p>© 2014 W3Schools. All rights reserved.</p>
</div>

修改為HTML5 語義元素<header> 和<footer>：

<header>
  <h1>Monday Times</h1>
</header>
.
.
.
<footer>
  <p>© 2014 W3Schools. All rights reserved.</p>
</footer>

親自試一試

更改為HTML5 <nav>

把id=」menu」的<div> 元素：

<div id="menu">
  <ul>
    <li>News</li>
    <li>Sports</a></li>
    <li>Weather</li>
  </ul>
</div>

修改為HTML5 語義元素<nav>：

<nav>
  <ul>
    <li>News</li>
    <li>Sports</a></li>
    <li>Weather</li>
  </ul>
</nav>

親自試一試

更改為HTML5 <section>

把id=」content」的the <div> 元素：

<div id="content">
.
.
.
</div>

修改為HTML5 語義元素<section>：

<section>
.
.
.
</section>

親自試一試

更改為HTML5 <article>

把class=」post」的所有<div> 元素：

<div class="post">
  <h2>News Article</h2>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
</div>

修改為HTML5 語義元素<article>：

<article>
  <h2>News Article</h2>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
</article>

親自試一試

刪除這些“不再需要的”樣式：

div#header,div#footer,div#content,div#post {
    border:1px solid grey;margin:5px;margin-bottom:15px;padding:8px;background-color:white;
}
div#header,div#footer {
    color:white;background-color:#444;margin-bottom:5px;
}
div#content {
    background-color:#ddd;
}
div#menu ul {
    margin:0;padding:0;
}
div#menu ul li {
    display:inline; margin:5px;
}

親自試一試

典型的HTML5 頁面

最後您可以刪除<head> 標籤。HTML5 中不再需要它們：

實例

<!DOCTYPE html>
<html lang="en">
<title>HTML5</title>
<meta charset="utf-8">

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->

<style>
body {
    font-family:Verdana,sans-serif;font-size:0.8em;
}
header,footer,section,article {
    border:1px solid grey;
    margin:5px;margin-bottom:15px;padding:8px;
    background-color:white;
}
header,footer {
    color:white;background-color:#444;margin-bottom:5px;
}
section {
    background-color:#ddd;
}
nav ul {
    margin:0;padding:0;
}
nav ul li {
    display:inline; margin:5px;
}
</style>
<body>

<header>
  <h1>Monday Times</h1>
</header>

<nav>
  <ul>
    <li>News</li>
    <li>Sports</li>
    <li>Weather</li>
  </ul>
</nav>

<section>
<h2>News Section</h2>

<div id="post">
  <h2>News Article</h2>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
</div>

<div id="post">
<h2>News Article</h2>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
</div>

</section>

<footer>
  <p>© 2014 Monday Times. All rights reserved.</p>
</footer>

</body>
</html>

親自試一試

<article> <section> 與<div> 之間的差異

在HTML5 標準中，<article> <section> 與<div> 之間的差異很小，令人困惑。

在HTML5 標準中，<section> 元素被定位為相關元素的塊。

<article> 元素被定義為相關元素的完整的自包含塊。

<div> 元素被定義為子元素的塊。

如何理解呢？

在上面的例子中，我們曾使用<section> 作為相關<articles> 的容器。

但是，我們也能夠把<article> 用作文章的容器。

下面是一些不同的例子：

<article> 中的<article>：

<article>

<h2>Famous Cities</h2>

<article>
<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>
</article>

<article>
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</article>

<article>
<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>
</article>

</article>

親自試一試

<article> 中的<div>：

<article>

<h2>Famous Cities</h2>

<div class="city">
<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>
</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>

</article>

親自試一試

<article> 中的<section> 中的<div>：

<article>

<section>
<h2>Famous Cities</h2>

<div class="city">
<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>
</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>
</section>

<section>
<h2>Famous Countries</h2>

<div class="country">
<h2>England</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>
</div>

<div class="country">
<h2>France</h2>
<p>Paris is the capital and most populous city of France.</p>
</div>

<div class="country">
<h2>Japan</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>
</section>

</article>

親自試一試

HTML5 教程-HTML5 新元素

Leave a reply

HTML5 新元素

HTML5 中的新元素

下面列出的HTML5 的新元素，以及對它們的描述。

新的語義/結構元素

HTML5 提供的新元素可以構建更好的文檔結構：

標籤	描述
<article>	定義文檔內的文章。
<aside>	定義頁面內容之外的內容。
<bdi>	定義與其他文本不同的文本方向。
<details>	定義用戶可查看或隱藏的額外細節。
<dialog>	定義對話框或窗口。
<figcaption>	定義<figure> 元素的標題。
<figure>	定義自包含內容，比如圖示、圖表、照片、代碼清單等等。
<footer>	定義文檔或節的頁腳。
<header>	定義文檔或節的頁眉。
<main>	定義文檔的主內容。
<mark>	定義重要或強調的內容。
<menuitem>	定義用戶能夠從彈出菜單調用的命令/菜單項目。
<meter>	定義已知範圍（尺度）內的標量測量。
<nav>	定義文檔內的導航鏈接。
<progress>	定義任務進度。
<rp>	定義在不支持ruby 註釋的瀏覽器中顯示什麼。
<rt>	定義關於字符的解釋/發音（用於東亞字體）。
<ruby>	定義ruby 註釋（用於東亞字體）。
<section>	定義文檔中的節。
<summary>	定義<details> 元素的可見標題。
<time>	定義日期/時間。
<wbr>	定義可能的折行（line-break）。

閱讀更多有關HTML5語義的內容。

新的表單元素

標籤	描述
<datalist>	定義輸入控件的預定義選項。
<keygen>	定義鍵對生成器字段（用於表單）。
<output>	定義計算結果。

閱讀更多有關HTML表單元素中新老元素。

新的輸入類型

新的輸入類型	新的輸入屬性
color date datetime datetime-local email month number range search tel time url week	autocomplete autofocus form formaction formenctype formmethod formnovalidate formtarget height 和width list min 和max multiple pattern (regexp) placeholder required step

學習HTML輸入類型中的所有新老輸入類型。

學習HTML輸入屬性中的所有輸入屬性。

HTML5 – 新的屬性語法

HTML5 允許四種不同的屬性語法。

該例演示<input> 標籤中使用的不同語法：

標籤	描述
Empty	<input type=」text」 value=」John Doe」 disabled >
Unquoted	<input type=」text」 value=John >
Double-quoted	<input type=」text」 value=」John Doe」 >
Single-quoted	<input type=」text」 value=’John Doe』 >

在HTML5 中，根據屬性所需，可能會使用所有這四種語法。

HTML5 圖像

標籤	描述
<canvas>	定義使用JavaScript 的圖像繪製。
<svg>	定義使用SVG 的圖像繪製。

閱讀更多有關HTML5 Canvas的內容。

閱讀更多有關HTML5 SVG的內容。

新的媒介元素

標籤	描述
<audio>	定義聲音或音樂內容。
<embed>	定義外部應用程序的容器（比如插件）。
<source>	定義<video> 和<audio> 的來源。
<track>	定義<video> 和<audio> 的軌道。
<video>	定義視頻或影片內容。

閱讀更多有關HTML5視頻的內容。

閱讀更多有關HTML5音頻的內容。

HTML5 教程-HTML5 瀏覽器支持

Leave a reply

HTML5 瀏覽器支持

您可以幫助老版本瀏覽器處理 HTML5。

HTML5 瀏覽器支持

所有現代瀏覽器都支持 HTML5。

此外，所有瀏覽器，不論新舊，都會自動把未識別元素當做行內元素來處理。

正因如此，您可以幫助老式瀏覽器處理」未知的「 HTML 元素。

註釋：您甚至可以教授石器時代的 IE6 如何處理未知的 HTML 元素。

。

把 HTML5 元素定義為塊級元素

HTML5 定義了八個新的語義 HTML 元素。所有都是塊級元素。

您可以把 CSS display 屬性設置為 block，以確保老式瀏覽器中正確的行為：

實例

header, section, footer, aside, nav, main, article, figure {
    display: block; 
}

向 HTML 添加新元素

您可以通過瀏覽器 trick 向 HTML 添加任何新元素：

本例向 HTML 添加了一個名為 <myHero> 的新元素，並為其定義 display 樣式：

實例

<!DOCTYPE html>
<html>

<head>
  <title>Creating an HTML Element</title>
  <script>document.createElement("myHero")</script>
  <style>
  myHero {
    display: block;
    background-color: #ddd;
    padding: 50px;
    font-size: 30px;
  } 
  </style> 
</head>

<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

<myHero>My First Hero</myHero>

</body>
</html>

親自試一試

已添加的 JavaScript 語句 document.createElement(「myHero」)，僅適用於 IE。

Internet Explorer 的問題

上述方案可用於所有新的 HTML5 元素，但是：

注意：Internet Explorer 8 以及更早的版本，不允許對未知元素添加樣式。

幸運的是，Sjoerd Visscher 創造了「HTML5 Enabling JavaScript」, 「the shiv」：

<!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

以上代碼是一段註釋，但是 IE9 的早期版本會讀取它（並理解它）。

完整的 Shiv 解决方案

實例

<!DOCTYPE html>
<html>

<head>
  <title>Styling HTML5</title>
  <!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
</head>

<body>

<h1>My First Article</h1>

<article>
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.
</article>

</body>
</html>

親自試一試

引用 shiv 代碼的鏈接必須位於 <head> 元素中，因為 Internet Explorer 需要在讀取之前認識所有新元素。

HTML5 Skeleton

實例

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML5 Skeleton</title>
<meta charset="utf-8">

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->

<style>
body {font-family: Verdana, sans-serif; font-size:0.8em;}
header,nav, section,article,footer
{border:1px solid grey; margin:5px; padding:8px;}
nav ul {margin:0; padding:0;}
nav ul li {display:inline; margin:5px;}
</style>
</head>

<body>

<header>
  <h1>HTML5 SKeleton</h1>
</header>

<nav>
<ul>
  <li><a href="html5_semantic_elements.asp">HTML5 Semantic</a></li>
  <li><a href="html5_geolocation.asp">HTML5 Geolocation</a></li>
  <li><a href="html5_canvas.asp">HTML5 Graphics</a></li>
</ul>
</nav>

<section>

<h1>Famous Cities</h1>

<article>
<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>
</article>

<article>
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</article>

<article>
<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>
</article>

</section>

<footer>
<p>© 2014 W3Schools. All rights reserved.</p>
</footer>

</body>
</html>

親自試一試

HTML5 教程-HTML 編輯器

Leave a reply

HTML 編輯器

使用Notepad 或TextEdit 來編寫HTML

可以使用專業的HTML 編輯器來編輯HTML：

Adobe Dreamweaver
Microsoft Expression Web
CoffeeCup HTML Editor

不過，我們同時推薦使用文本編輯器來學習HTML，比如Notepad (PC) 或TextEdit (Mac)。我們相信，使用一款簡單的文本編輯器是學習HTML 的好方法。

通過記事本，依照以下四步來創建您的第一張網頁。

步驟一：啟動記事本

如何啟動記事本：

開始
    所有程序
        附件
            記事本

步驟二：用記事本來編輯HTML

在記事本中鍵入HTML 代碼：

記事本

步驟三：保存HTML

在記事本的文件菜單選擇“另存為”。

當您保存HTML 文件時，既可以使用.htm 也可以使用.html 擴展名。兩者沒有區別，完全根據您的喜好。

在一個容易記憶的文件夾中保存這個文件，比如w3school。

步驟四：在瀏覽器中運行這個HTML 文件

啟動您的瀏覽器，然後選擇“文件”菜單的“打開文件”命令，或者直接在文件夾中雙擊您的HTML 文件。

結果應該類似這樣：

在瀏覽器中查看

HTML 100 個實例

Leave a reply

學習 HTML 100 個實例

HTML 基礎標籤實例

一個簡單的HTML 文件: 這個例子是一個很簡單的HTML 文件，使用了盡可能少的HTML 標籤。它向您演示了body 元素中的內容是如何被瀏覽器顯示的。
簡單的段落: 此例演示：段落元素中的文字如何被瀏覽器顯示。
更多的段落: 本例演示段落元素的某些缺省的行為。
“詩歌”問題: 本例演示HTML 格式化的某些問題。
折行: 本例演示在HTML 文檔中折行的使用。
標題: 本例演示在HTML 文檔中顯示標題的標籤。
居中排列的標題: 本例演示一個居中排列的標題。
水平線: 本例演示如何插入水平線。
隱藏的註釋: 本例演示如何在HTML 源代碼中插入隱藏的註釋。
背景顏色: 本例演示如何為HTML 頁面添加背景顏色。

例子解釋

HTML 文本格式化實例

文本格式化: 此例演示如何在一個HTML 文件中對文本進行格式化
預格式文本: 此例演示如何使用pre 標籤對空行和空格進行控制。
“計算機輸出”標籤: 此例演示不同的“計算機輸出”標籤的顯示效果。
地址: 此例演示如何在HTML 文件中寫地址。
縮寫和首字母縮寫: 此例演示如何實現縮寫或首字母縮寫。
文字方向: 此例演示如何改變文字的方向。
塊引用: 此例演示如何實現長短不一的引用語。
刪除字效果和插入字效果: 此例演示如何標記刪除文本和插入文本。

例子解釋

HTML 鏈接實例

創建超級鏈接: 本例演示如何在HTML 文檔中創建鏈接。
將圖像作為鏈接: 本例演示如何使用圖像作為鏈接。
在新的瀏覽器窗口打開鏈接: 本例演示如何在新窗口打開一個頁面，這樣的話訪問者就無需離開你的站點了。
鏈接到同一個頁面的不同位置: 本例演示如何使用鏈接跳轉至文檔的另一個部分
跳出框架: 本例演示如何跳出框架，假如你的頁面被固定在框架之內。
創建電子郵件鏈接: 本例演示如何如何鏈接到一個郵件。（本例在安裝郵件客戶端程序後才能工作。）
創建電子郵件鏈接 2: 本例演示更加複雜的郵件鏈接。

例子解釋

HTML 框架實例

垂直框架: 本例演示：如何使用三份不同的文檔製作一個垂直框架。
水平框架: 本例演示：如何使用三份不同的文檔製作一個水平框架。
如何使用<noframes> 標籤: 本例演示：如何使用<noframes> 標籤。
混合框架結構: 本例演示如何製作含有三份文檔的框架結構，同時將他們混合置於行和列之中。
含有noresize=」noresize」屬性的框架結構: 本例演示noresize 屬性。在本例中，框架是不可調整尺寸的。在框架間的邊框上拖動鼠標，你會發現邊框是無法移動的。
導航框架: 本例演示如何製作導航框架。導航框架包含一個將第二個框架作為目標的鏈接列表。名為」contents.htm」的文件包含三個鏈接。
內聯框架: 本例演示如何創建內聯框架（HTML 頁中的框架）。
跳轉至框架內的一個指定的節: 本例演示兩個框架。其中的一個框架設置了指向另一個文件內指定的節的鏈接。這個」link.htm」文件內指定的節使用<a name=」C10″> 進行標識。
使用框架導航跳轉至指定的節: 本例演示兩個框架。左側的導航框架包含了一個鏈接列表，這些鏈接將第二個框架作為目標。第二個框架顯示被鏈接的文檔。導航框架其中的鏈接指向目標文件中指定的節。

例子解釋

HTML 表格實例

表格: 這個例子演示如何在HTML 文檔中創建表格。
表格邊框: 本例演示各種類型的表格邊框。
沒有邊框的表格: 本例演示一個沒有邊框的表格。
表格中的表頭(Heading): 本例演示如何顯示表格表頭。
空單元格: 本例展示如何使用」」處理沒有內容的單元格。
帶有標題的表格: 本例演示一個帶標題(caption) 的表格
跨行或跨列的表格單元格: 本例演示如何定義跨行或跨列的表格單元格。
表格內的標籤: 本例演示如何顯示在不同的元素內顯示元素。
單元格邊距(Cell padding): 本例演示如何使用Cell padding 來創建單元格內容與其邊框之間的空白。
單元格間距(Cell spacing): 本例演示如何使用Cell spacing 增加單元格之間的距離。
向表格添加背景顏色或背景圖像: 本例演示如何向表格添加背景。
向表格單元添加背景顏色或者背景圖像: 本例演示如何向一個或者更多表格單元添加背景。
在表格單元中排列內容: 本例演示如何使用」align」屬性排列單元格內容,以便創建一個美觀的表格。
框架(frame)屬性: 本例演示如何使用」frame」屬性來控制圍繞表格的邊框。

例子解釋

HTML 列表實例

無序列表: 本例演示無序列表。
有序列表: 本例演示有序列表。
不同類型的無序列表: 本例演示一個無序列表。
不同類型的有序列表: 本例演示不同類型的有序列表。
嵌套列表: 本例演示如何嵌套列表。
嵌套列表 2: 本例演示更複雜的嵌套列表。
定義列表: 本例演示一個定義列表。

例子解釋

HTML 表單與輸入實例

文本域(Text fields): 本例演示如何在HTML 頁面創建文本域。用戶可以在文本域中寫入文本。
密碼域: 本例演示如何創建HTML 的密碼域。
複選框: 本例演示如何在HTML 頁中創建複選框。用戶可以選中或取消選取複選框。
單選按鈕: 本例演示如何在HTML 中創建單選按鈕。
簡單的下拉列表: 本例演示如何在HTML 頁面中創建簡單的下拉列錶框。下拉列錶框是一個可選列表。
另一個下拉列表: 本例演示如何創建一個簡單的帶有預選值的下拉列表。（譯者註：預選值指預先指定的首選項。）
文本域(Textarea): 本例演示如何創建一個文本域（多行文本輸入控件）。用戶可以在文本域中寫入文本。在文本域中，可寫入的字符字數不受限制。
創建按鈕: 本例演示如何創建按鈕。你可以對按鈕上的文字進行自定義。
Fieldset around data: 本例演示如何在數據周圍繪製一個帶標題的框。

表單實例

帶有輸入框和確認按鈕的表單: 本例演示如何向頁面添加表單。此表單包含兩個輸入框和一個確認按鈕。
帶有復選框的表單: 此表單包含兩個複選框和一個確認按鈕。
帶有單選按鈕的表單: 此表單包含兩個單選框和一個確認按鈕。
從表單發送電子郵件: 此例演示如何從表單發送電子郵件。

例子解釋

HTML 圖像實例

插入圖像: 本例演示如何在網頁中顯示圖像。
從不同的位置插入圖片: 本例演示如何將其他文件夾或服務器的圖片顯示到網頁中。
背景圖片: 本例演示如何向HTML 頁面添加背景圖片。
排列圖片: 本例演示如何在文字中排列圖像。
浮動圖像: 本例演示如何使圖片浮動至段落的左邊或右邊。
調整圖像尺寸: 本例演示如何將圖片調整到不同的尺寸。
為圖片顯示替換文本: 本例演示如何為圖片顯示替換文本。在瀏覽器無法載入圖像時，替換文本屬性告訴讀者們失去的信息。為頁面上的圖像都加上替換文本屬性是個好習慣。
製作圖像鏈接: 本例演示如何將圖像作為一個鏈接使用。
創建圖像映射: 本例顯示如何創建帶有可供點擊區域的圖像地圖。其中的每個區域都是一個超級鏈接。
把圖像轉換為圖像映射: 本例顯示如何把一幅普通的圖像設置為圖像映射。