HTML5.

HTML5網頁標籤(tag)結構 HTML5網頁和HTML 4網頁的結構十分相似，其基本標籤結構如下所示：
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8"> <title>網頁標題文字</title> </head> <body> 網頁內容 </body> </html>

建立HTML5網頁-<!DOCTYPE>
<!DOCTYPE>不是HTML標籤，其位置是在<html>標籤之前，可以告訴瀏覽器使用的HTML版本，以便瀏覽器使用正確的引擎來產生HTML網頁內容。 HTML5開始要求所有標籤和屬性都使用小寫。

建立HTML5網頁-<html>標籤
<html>標籤是HTML網頁的根元素，它是一個容器元素，其內容就是其他HTML標籤，擁有<head>和<body>兩個子標籤。如果需要，在<html>標籤可以使用lang屬性指定網頁使用的語言，如下所示： <html lang="zh-TW"> lang屬性值常用2碼值有：zh（中文）、en（英文）、fr （法文）、de（德文）、it（義大利文）和ja（日文）等。在lang屬性值也可以加上次2碼的國家或地區，例如：en-US 是美式英文、zh-TW是台灣的正體中文等。

建立HTML5網頁-<head>標籤
<head>標籤的內容是標題元素，包含<title>、<meta>、 <script>和<style>標籤。<meta>標籤可以指定網頁的編碼為utf-8，如下所示： <meta charset="utf-8"> 記得一定要加入<title>，這是網頁優化最基本的要求之一。

建立HTML5網頁-<body>標籤

建立HTML5網頁-簡單範例 01: <!DOCTYPE html> 02: <html lang="zh-TW "> 03: <head> 04: <meta charset="utf-8"/> 05: <title>HTML5網頁</title> 06: </head> 07: <body> 08: <h3>HTML5網頁</h3> 09: <hr/> 10: <p>第一份HTML5網頁</p> 11: </body> 12: </html>

HTML5的文字編排標籤標題文字段落、換行與水平線標示文字內容 HTML清單

標題文字在HTML網頁的標題文字可以提綱挈領來說明文件內容， <hn>標籤可以定義標題文字，<h1>最重要，依序遞減至 <h6>，提供6種不同尺寸變化的標題文字，其基本語法如下所示： <hn>....</hn> ,n=1 ~~ 6

段落、換行與水平線- 段落與換行一般來說，HTML網頁的文字內容是使用段落來編排，使用的是<p>標籤，<p>標籤可以定義段落，瀏覽器預設在之前和之後增加邊界尺寸（可以使用CSS的margin屬性來更改），如下所示： <p>JavaScript原為網景公司開發的腳本語言，提供該公司瀏覽器Netscape Navigator開發互動網頁的功能。 </p> 一般來說，在文書處理程式，例如：記事本或Word等，當編輯時按下Enter鍵就是換行或建立新段落，但HTML網頁顯示換行是使用換行標籤（不是建立段落），Enter鍵不會顯示換行編排。空白壓縮強迫斷行 <br />

段落、換行與水平線-水平線 HTML的<hr>標籤在瀏覽器是顯示一條水平線，但HTML5的 <hr />標籤不再只是為了美化版面，而是給予內容上主題分割的意義，可以用來分割網頁內容，如下所示： <h3>HTML</h3> <p>HTML語言是Tim Berners-Lee在1991年建立…</p> <hr /> <h3>JavaScript</h3> <p>JavaScript原為網景公司開發的腳本語言…</p>

標示文字內容標籤說明 <b> 使用粗體字來標示文字，HTML5代表文體上的差異，例如：關鍵字和印刷上的粗體字等
<i> 使用斜體字來標示文字，HTML5代表另一種聲音或語調，通常是用來標示其他語言的技術名詞、片語和想法等 <em> 顯示強調文字的效果，在HTML5是強調發音上有細微改變句子的意義，例如：因發音改變而需強調的文字 <strong> HTML 4.x是更強的強調文字，HTML5是重要文字 <cite> HTML 4.x是引言或參考其他來源，HTML5是用來定義產品名稱，例如：一本書、一首歌、一部電影或畫作等 <small> HTML 4.x是顯示縮小文字，HTML5是輔助說明或小型印刷文字，例如：網頁最下方的版權宣告等

HTML清單- 項目編號（Ordered List）
<ol> <li>項目1</li> <li>項目2</li> ….. </ol> <ol>標籤可以建立項目編號，每一個項目是一個<li>標籤。

HTML清單- 項目符號（Unordered List）
<ul> <li>項目1</li> <li>項目2</li> ….. </ul>

HTML清單- 定義清單（Definition List）
<dl> <dt>JavaScript</dt> <dd>客戶端腳本語言</dd> <dt>HTML</dt> <dd>網頁製作語言</dd> </dl> <dl>標籤建立定義清單，<dt>清單定義項目；<dd>標籤描述,項目。

HTML5的圖片與超連結標籤網站目錄結構圖片超連結

網站目錄結構組織你的網頁相對路徑與絕對路徑 <images> <css> <js> ……
圖形無法顯示連結錯誤搬家就是災難

圖片 HTML網頁屬於一種「超媒體」（HyperMedia）文件，除了文字內容外，還可以在網頁插入圖片，其基本語法如下所示：
<img src="filename" width="value" height="value" alt="替代文字"/> alt 非常重要。

超連結 HTML網頁是一種「超文件」（HyperText），內含超連結可以連結全世界不同伺服器的資源，超連結不僅能夠連接同網站的其他HTML網頁，還可以連接其他網站的網頁，其基本語法如下所示： <a href="URL" target="frame_name">超連結名稱</a> 上述<a>超連結標籤預設在瀏覽器顯示藍色底線字，造訪過的超連結顯示紫色底線字，啟動的超連結是紅色底線字。 HTML5超連結不只可以使用<img>子元素建立圖片超連結，我們還可以在<a>元素中使用區塊元素，例如：<h3>，如下所示： <a href=" </h3></a>

HTML5的表格與容器標籤 HTML的表格標籤 <div>和<span>容器標籤

HTML的表格標籤- 基本HTML表格 <table border=""> <caption>每月存款金額</caption> <thead> <tr> <th>月份</th> <th>存款金額</th> </tr> </thead> <tbody> <tr> <td>一月</td> <td>NT$ 5,000</td> <tr> <td>二月</td> <td>NT$ 1,000</td> </tbody> <tfoot> <tr> <td>存款總額</td> <td>NT$ 6,000</td> </tfoot> </table>

HTML的表格標籤- 複雜HTML表格 <table border="1"> <tr> <th id="client">客戶端</th> <th id="server">伺服端</th> </tr> <tr><td colspan="2">Ajax</td></tr> <td headers="client">JavaScript</td> <td headers="server">ASP.NET</td> <td>VBScript</td> <td>PHP</td> </table>

<div>和<span>容器標籤
HTML的<div>標籤可以在HTML網頁定義一個區塊，其主要目的是建立文件結構和使用CSS來格式化群組的元素，如下所示： <div style="color:blue"> <h3>JavaScript</h3> <p>客戶端網頁技術</p> </div> 上述style屬性定義CSS樣式。

<div>和<span>容器標籤
HTML的<span>標籤也是用來群組元素，不過，它是一個單行元素，並不會建立區塊，即換行，如下所示： <p>外國人很多都是<span style="color:lightblue">淡藍色 </span>眼睛</p>

HTML5的語意與結構元素 HTML5的語意與結構標籤使用HTML5的語意與結構標籤

HTML5的語意與結構標籤標籤說明 <article> 建立自我包含的完整內容成份，例如：部落格或BBS文章
<aside> 建立非網頁主題，但相關的內容片斷，只是有些離題 <footer> 建立網頁或區段內容的註腳區塊 <header> 建立網頁的標題區塊，可以包含說明、商標和導覽 <hgroup> 群組<h1>~<h6>標籤來建立多層次的標題文字，例如：副標文字等 <nav> 建立網頁的導覽區塊，即連接其他網頁的超連結 <section> 建立一般用途的文件或應用程式區段，例如：報紙的體育版、財經版等

使用HTML5的語意與結構標籤-說明 HTML4版的<div>標籤只是一般用途的區塊容器，並沒有任何除了將網頁內容分割成區塊之外的語意。HTML5提供描述頁面內容結構的語意標籤：<header>、<section>、 <article>、<nav>、<aside>和<footer>，可以讓我們建立擁有自我描述能力的HTML網頁，如右圖所示：

使用HTML5的語意與結構標籤- HTML標籤1
<header> <h1>程式設計之家</h1> <nav> <ul> <li><a href="/News/">最新消息</a></li> …… </ul> </nav> </header> <section> <article> <h2>歡迎光臨程式設計之家</h2> <p>…</p> </article> <h2>服務說明</h2>

使用HTML5的語意與結構標籤-HTML標籤2
…… </article> </section> <aside> <h2>相關資源網站</h2> <ul> <li><a href="">HTML5教學網站</a></li> … </ul> <p><a href="/Resources/">更多資源</a></p> </aside> <footer> <small>Copyright © 2012 版權所有</small> </footer>

使用HTML5的語意與結構標籤- 圖例

HTML pages are text documents.
SUMMARY HTML pages are text documents. Clicks: Load individual bullet points.

SUMMARY HTML uses tags, which act like containers and tell you about the information that lies between them.

Tags are often referred to as elements.
SUMMARY Tags are often referred to as elements.

SUMMARY Tags usually come in pairs. Opening tags denote the start of a piece of content; closing tags denote the end.

SUMMARY Opening tags can carry attributes, which tell us more about the content of that element.

Attributes require a name and a value.
SUMMARY Attributes require a name and a value.

SUMMARY To learn HTML you need to know what tags you can use, what they do, and where they can go.

HTML5.

Similar presentations

Presentation on theme: "HTML5."— Presentation transcript:

Similar presentations

About project

反馈

请登录

Auth with social network:

HTML5.

Similar presentations

Presentation on theme: "HTML5."— Presentation transcript:

Similar presentations

About project

反馈