2015年2月13日

HTML5+CSS3上課筆記- HTML

HTML5 vs HTML4

HTML4寫法 HTML5寫法
<div id="header"></div> <header></header>
<div id="menu"></div> <nav></nav>
<div id="content"></div> <section></section>
<article></article>
<div id="footer"></div> <footer></footer>


HTML5常用的語意標籤

<article> 可以獨立存在的內容,比section有更明確的語意(但沒有一定要article包section 或是相反),代表獨立、完整的區塊。可能包含有header或footer
<section> 文件區塊
<aside> 不是頁面的主要內容區塊 移掉也不影響頁面閱讀功能
<footer> 頁面或區塊的底部
<header> 頁面或區塊的頂部 通常包含logo、網站標題、導覽列
<nav> 包含道覽連結的區塊
<figure> 文件中的圖片
<figcaption> 圖片說明
<video> 包含影片當及相關音樂檔、說明等
<audio> 包含聲音播放檔


以上在caniuse測試 ie9以上都可支援

其他元素列表可參考:https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/

如要讓ie8以下支援html5 可head中加入
  <!--[if lt IE 9]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
 <![endif]-->



HTML head內容
*CSS一定放在JS先

*<meta> 設定網頁文件相關資訊 屬性有charset、content、name
<meta name="description" content"網頁描述">  (網頁描述大約70字)
<meta name="keywords" content"關鍵字a, 關鍵字b, 關鍵字c">
<meta name="viewport" content="width=device-width,initial-scale=1.0"> (viewport給行動裝置用):
width:指定寬度(數字或「device-width」
height:指定高度(數字或「device-height」
initial-scale:第一次進入頁面的初始比例(最小0.25 最大5)
minimum-scale:允許縮小最小比例(最小0.25 最大5)
maximum-scale:允許放大最大比例(最小0.25 最大5)
user-scalable:是否允許使用者縮放(是為1 否為0)

*網站圖示icon 不一定要ico檔也可以gif 或png  size為16x16 、32x32


HTML body內容
*每個網頁只能有一個h1

沒有留言:

張貼留言