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