HTML5Internet Explorer 標題 iphone Safari Column 標題的字型大小一般而言, 層級越高的標題字型就會越大, 不過這是為了讓標題在視覺上容易辨識出層級的瀏覽器效果如果把 h1 h6 元素用來調整字型大小, 或是用來強調文字內容的話, 並不是正確的用法

Size: px

Start display at page:

Download "HTML5Internet Explorer 標題 iphone Safari Column 標題的字型大小一般而言, 層級越高的標題字型就會越大, 不過這是為了讓標題在視覺上容易辨識出層級的瀏覽器效果如果把 h1 h6 元素用來調整字型大小, 或是用來強調文字內容的話, 並不是正確的用法"

领纶计
6 years ago
Views:

1 基礎定義文字標籤嵌入內容表格表單互動INTRODUCTION HTML5CSS3 2 1 Reference 2 1 HTML5 p.1css3 p.255 HTML5 CSS3 Reference p.x~xi 文件的章節內容的群組化HTML HTML5 > SECTION.05 標題 <h > </h > 1 6 元素說明類別流式元素 / 標題元素 / 明顯元素使用位置作為 hgroup 的子元素 / 預期放置流式元素的位置內容模組段落元素標題可以用 h1 h6 來標示數字的部份是表示標題的層級,h1 最高, 往後數字越大層級越低使用 h1~h6 的話, 元素裡的內容會被視為隱晦的章節如果要明顯地標示出章節, 可以指定 section(p.46) 或 acrticle(p.50) 這些章節元素有關標題與章節的關係, 請參閱 p.22 HTML5 CSS3 p. x Sample Source <h1> 標題 A</h1> <h2> 標題 B</h2> <h3> 標題 C</h3> <h2> 標題 D</h2> HTML5 CSS3 p. x 054 HTML5 > SECTION.05 VIII INTRODUCTION

停用屬性 align 屬性瀏覽器對照表 IE10 IE9 Fx Chrome Safari Opera ios6 ios5 Android 章節... P.

2 HTML5Internet Explorer 標題 iphone Safari Column 標題的字型大小一般而言, 層級越高的標題字型就會越大, 不過這是為了讓標題在視覺上容易辨識出層級的瀏覽器效果如果把 h1 h6 元素用來調整字型大小, 或是用來強調文字內容的話, 並不是正確的用法這種效果應該以 CSS 來指定停用屬性 align 屬性瀏覽器對照表 IE10 IE9 Fx Chrome Safari Opera ios6 ios5 Android 章節... P.046 參閱獨立的內容... P.050 和主要內容關連性薄弱的內容... P.052 標題將標題群組化... P 標題 Column HTML5 CSS3 p.x HTML5 CSS3 p.x CSS HTML5 CSS3 p.x IX

3 基礎HTML5 Reference HTML 文件的章節內容的群組化定義文字標籤嵌入內容表格表單互動HTML5 > EMBEDDED CONTENTS.09 指定多個播放檔案新的元素 source 元素 <source src=" " > 2 檔案的 URL type=" 檔案的 MIME 類型 " media=" 運用的媒體 " 元素說明類別無使用位置作為 video 元素或 audio 元素的子元素 ( 但要放在流式元素以及 track 元素之前 ) 內容模組空 source 元素是用來在 video 元素 (p.141) 或 audio 元素 (p.145) 中用來指定多個播放媒體檔案的元素這個元素只能在 video 元素和 audio 元素裡才能使用 video 元素和 audio 元素的 src 屬性只能指定一個檔案, 但如果使用 source 元素的話, 就能指定多個媒體檔案瀏覽器會由上到下依照指定的順序來進行確認, 若是找到可以播放的檔案就會立刻執行播放一旦執行播放, 之後的 source 元素就會被忽略媒體檔案有各式各樣的格式, 以目前的狀況來看, 因為每個瀏覽器所支援的媒體檔案不盡相同, 所以如果只有指定一個檔案的話, 能播放的瀏覽器就會因此受限但是如果能針對各種瀏覽器支援播放的檔案格式, 然後個別用 source 元素指定的話, 就能對應多種瀏覽器了另外要補充的是, 在 source 元素後面, 要針對不支援 video 元素和 audio 元素的瀏覽器, 撰寫 fallback 內容 ( 替代內容 ) src 屬性指定媒體檔案的 URL 這個屬性是必要的 type 屬性指定媒體檔案的 MIME 類型因為這個屬性可以事前作為判斷瀏覽器能否播放的提示, 所以建議指定比較好 media 屬性對指定在 source 元素中的媒體檔案, 指定套用何種媒體例如要指定 PC 的畫面的話就是 screen, 指定電視機的話就是 tv 這個屬性的預設值為 all, 因此若是省略這個屬性的話, 指定的媒體檔案就會套用所有的媒體 148 HTML5 > EMBEDDED CONTENTS 指定多個播放檔案HTML5指定多個播放檔案新的元素 149 Sample Source 5 <video controls> <source src="sample_video.webm" type="video/webm"> <source src="sample_video.mp4" type="video/mp4"> <source src="sample_video.ogg" type="video/ogg"> <p> 您的瀏覽器無法播放請 <a href="sample_video.mp4"> 下載 </a> 檔案 </p> </video> Internet Explorer iphone Safari 6 瀏覽器對照表格 IE10 IE9 Fx Chrome Safari Opera ios6 ios5 Android 參閱播放影片... P.141 播放音訊檔案... P.145 對媒體加入字幕... P.150 source 元素 1 元素元素屬性 HTML5 中的元素作的元素, 被的元素就作的元素的屬性和值, 會上代的屬性和的值的案有元素的, p.10 2 為了的內容, 所要的撰寫格式 ( 元素 ) 和屬性示為, 值示為 3 屬性所的值, 以和示這個會依目來屬性 4 元素說目所使用到的元素類別 (Category) 這一會示元素所屬的類別有類別的, p.14 使用這一示的是可以使用元素的, 內容 (Content Model) 是示可以放元素中的內容如果這個是空的話, 就示不能在元素中放何內容 5 目中用來的屬性的例式格式的樣式, ( 元素 ) 和屬性的內容示為, 值的內容為 6 以示各瀏覽器的支援狀況有瀏覽器的, p.xii 若是元素有被的屬性, 會在對照上 X INTRODUCTION

1 之前, 邊線都是緊鄰在框線的外側, 無法調整間隔 CSS3 開始可以用 outline-offset 屬性指定邊線和框線的間隔值的指定方法實數值 + 單位 CSS Source div { margin: 50px; padding: 20px; border: #ccccff solid 10px; width: 250px; height: 100px; outline:

4 指定元素邊線(outline)與框線的間隔CSS3 Reference 章背節景與邊框內盒容子的群組化定顏義色文與字漸標層籤嵌文入字內編容排表字格型表欄單位互彈動性區塊ィ網イブ格ン排タ版ラクテ漸變效果動畫變形320 CSS3 > BOX.05 CSS3 > BOX.05 指定元素邊線 (outline) 與框線的間隔 outline-offset: 實數值 + 單位初始值 0 值的繼承無適用元素所有元素所謂的邊線, 就是元素的輪廓線 ( 邊緣 ) 到 CSS2.1 之前, 邊線都是緊鄰在框線的外側, 無法調整間隔 CSS3 開始可以用 outline-offset 屬性指定邊線和框線的間隔值的指定方法實數值 + 單位 CSS Source div { margin: 50px; padding: 20px; border: #ccccff solid 10px; width: 250px; height: 100px; outline: #cc0066 solid 10px; outline-offset: 10px; } 在數值後方加上單位, 指定邊線與框線的間隔 ( 有關單位請參閱 p.278) HTML Source <div><p> 外側的是邊線 <br> 和邊框距離 10px </p></div> Selector ClassID HTML5 Style Sheet Firefox iphone Safari 4 5 C各瀏覽器的指定方法與支援 S瀏覽器屬性瀏覽器屬性 SIE10 Opera outline-offset 3IE9 ios6 outline-offset Fx outline-offset ios5 outline-offset Chrome outline-offset Android -webkit-outline-offset Safari outline-offset Firefox 指指定元素邊線 (outline) 與框線的間隔 321 定欄位群組5 換頁或換欄的方因為 Firefox 不支援 break-before break-after break-inside, 式所以標題的地方並沒有被換欄 p.259 各瀏覽器的指定方法與支援 break-before/break-after 瀏覽器屬性 auto always avoid left right page IE10 break-before / break-after column avoid-page avoid-column IE9 Fx -webkit-column-break-before Chrome 各瀏覽器的指定方法與支援 auto always avoid left right -webkit-column-break-after 瀏覽器屬性 -webkit-column-break-before Safari 瀏覽器 auto always 屬性 avoid left right IE10 animation -webkit-column-break-after Opera animation IE9 break-before ios6auto always Opera -webkit-animation avoid left right page Fx animation break-after ios5column -webkit-animation avoid-page avoid-column Chrome ios6 -webkit-animation -webkit-column-break-before Android auto always -webkit-animation avoid left right Safari -webkit-animation -webkit-column-break-after -webkit-column-break-before ios5 auto always avoid left right -webkit-column-break-after P.438 -webkit-column-break-before Android auto always avoid left right -webkit-column-break-after break-inside 瀏覽器屬性 IE10 break-inside auto avoid avoid-page avoid-column CIE9 SFx Chrome -webkit-column-break-inside auto avoid SSafari -webkit-column-break-inside auto avoid 3Opera break-inside auto avoid avoid-page avoid-column ios6 -webkit-column-break-inside auto avoid ios5 -webkit-column-break-inside auto avoid Android -webkit-column-break-inside auto avoid 指定欄位群組換頁或換欄的方式 377 XI

5 基礎章節互動1 2 HTML 文件的HTML5 HTML REFERENCE HTML 內容的群組化定義文字標籤嵌入內容表格表單

6 基礎章節內容的群組化定義文字標籤嵌入內容表格表單互動HTML 文件的HTML5 > DOCUMENT.01 <html></html> <head></head> html head body html html head body iframe srcdoc 0 1 title HTML htmlheadbody 3 html html HTML HTML DOCTYPE p.8 <html> html head body head body html lang head head URL head title body body body 026 HTML5 > DOCUMENT.01

7 Sample Source html> <html lang="ja"> <head> </head> </html> html version head profile body alink background bgcolor link text vlink IE10 IE9 Fx Chrome Safari Opera html head body 5<!DOCTYPE DOCTYPE... P.008 ios6 ios5 Android 027

8 基礎章節內容的群組化定義文字標籤嵌入內容表格表單互動HTML 文件的HTML5 > DOCUMENT.02 <title></title> head title head p.26 Sample Source <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title> title </title> </head> <p>title </p> </html> Internet Explorer IE10 IE9 Fx Chrome Safari Opera ios6 ios5 Android 028 HTML5 > DOCUMENT.02

9 URLHTML5 > DOCUMENT.03 URL <base > href=" " target=" ""_blank""_self""_parent""_top" base href target href HTML URL URL URL target p.9 _blank _self _parent _top Sample Source head <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title> URL</title> <base href=" target="_blank"> URL base head 5HTML URL 029

10 基礎章節內容的群組化定義文字標籤嵌入內容表格表單互動HTML 文件的</head> <p>ank <a href="profile.html"> </a> </p> </html> Internet Explorer <base> URL profile.htmlhttp:// html Firefox <base> URL profile.htmlhttp:// html IE10 IE9 Fx Chrome Safari Opera ios6 ios5 Android... P HTML5 > DOCUMENT.03

11 HTML5 > DOCUMENT.04 <link rel="" href="" > stylesheetnextprev URL href URL rel rel HTML P.33 Column head noscript chapter2.html <link rel="index" href="../index.html"> <link rel="next" href="chapter3.html"> <link rel="prev" href="chapter1.html"> index.html link rel="index" (index 頁面 ) index chapter3.html chapter1.html link HTML chapter1.html link rel="prev"( 上一個文件 ) chapter2.html link rel="next"( 下一個文件 ) chapter3.html 5 031

12 基礎章節內容的群組化定義文字標籤嵌入內容表格表單互動HTML 文件的 link p.278 style.css <link rel="stylesheet" href="style.css" type="text/css"> <link rel="stylesheet" href="style.css"> type MIME type media href P.271 <link rel="stylesheet" media="screen" href="screen.css" title="pc "> <link rel="stylesheet" media="print" href="print.css" title=" "> Sample Source <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title> </title> <link rel="stylesheet" href="style.css" type="text/css"> <link rel="help" href="help.html"> <link rel="prev" href="chapter2.html"> <link rel="next" href="chapter4.html"> <link rel="author" href="profile.html"> </head> : </html> 032 HTML5 > DOCUMENT.04

Opera Opera Column rel rel link a area href link a/area link a/area alternate nofollow author noreferrer Referrer bookmark Permalink prefetch help prev icon search license

13 Opera Opera Column rel rel link a area href link a/area link a/area alternate nofollow author noreferrer Referrer bookmark Permalink prefetch help prev icon search license stylesheet next tag Column rev HTML rel HTML rev HTML5 chaset rev target IE10 IE9 Fx Chrome Safari Opera ios6 ios5 Android 5... P.085 Media Query... P P.040 HTML... P

14 基礎章節內容的群組化定義文字標籤嵌入內容表格表單互動HTML 文件的HTML5 > DOCUMENT.05 <meta name="" content=""> descriptionkeywords name charset http-equiv content-type head http-equiv content-typehead head noscript name meta HTML meta name name content name application-name Web Application author description content generator keywords (,) 034 HTML5 > DOCUMENT.05

15 viewport Column Sample Source <html lang="ja"> <head> <meta charset="utf-8"> <title> </title> <meta name="author" content="taro ANK"> <meta name="description" content="html5 "> <meta name="keywords" content="html5,,,,, "> </head> : </html> html> Column viewport viewport name="viewport" <meta name="viewport" content="width=device-width"> content, width 200px10000px device-width 980px height 223px10000px device-width auto initial-scale minimum-scalemaximum-scale 1 user-scalable yesno yes minimum-scale maximum-scale scheme IE10 IE9 Fx Chrome Safari Opera ios6 ios5 Android 5<!DOCTYPE... P P

關於本書 Part 3 CSS XHTML Ajax Part 4 HTML 5 API JavaScript HTML 5 API Canvas API ( ) Video/Audio API ( ) Drag and Drop API ( ) Geolocation API ( ) Part 5

關於本書 Part 3 CSS XHTML Ajax Part 4 HTML 5 API JavaScript HTML 5 API Canvas API ( ) Video/Audio API ( ) Drag and Drop API ( ) Geolocation API ( ) Part 5 網頁程式設計 HTML JavaScript CSS HTML JavaScript CSS HTML 5 JavaScript JavaScript HTML 5 API CSS CSS Part 1 HTML HTML 5 API HTML 5 Apple QuickTime Adobe Flash RealPlayer Ajax XMLHttpRequest HTML 4.01 HTML 5