標籤：ide 學習 文章 字元編碼 屬性 輔助 介紹 指定 搜尋引擎
學習前端的東西似乎沒有什麼捷徑，就是直接上手擼就完了
本文目標：（熟知）
1、建立基本HTML5文檔結構
2、使用新的語義元素來布局頁面
下面直接上代碼：
<!DOCTYPE html> <!-- DOCTYPE簡潔聲明，強制現代的瀏覽器使用標準模式 --><html lang="en"> <!-- 使用lang指定文檔語言 --><head> <meta charset="UTF-8"> <!-- 使用charset屬性定義字元編碼，這裡使用了8位的unicode編碼 --> <title>HTML5標記-語義</title> <link rel="stylesheet" href="style.css"> <!-- 使用link元素引入css樣式表。瀏覽器會假設link元素都預設有一個text/css的MIME類型 --> <script src="app.js"></script> <!-- 使用script元素可以引入javascript指令碼，瀏覽器會假設script元素具有一個text/javascript的MIME類型，除非使用的不是JavaScript指令碼 --></head><body> <header> <!-- 使用header元素，用於標題和其他重要的細節(標題、永久連結、元資訊)，可重複使用的元素 --> <hgroup> <!-- hgroup和article元素裡都可以包含一個h1。標題結構的運作方式和HTML4不同 --> <h1>My Site</h1> <h2>My Title</h2> </hgroup> <nav> <!-- 使用nav元素，顯示主要導航區或內容目錄 --> <ul></ul> </nav> </header> <nav> <h1>Links Headings</h1> <ul></ul> </nav> <aside> <!-- 使用aside元素定義一個頁面上獨立於內容地區的部分。如文章的側邊欄、彈出式廣告或浮動視窗 --> <!-- other info --> </aside> <section> <!-- 使用section元素，定義大塊的內容，如文章地區或重要的表單。區塊可以有自己的標題、導航及指令碼 --> <article> <!-- 使用article元素來標記獨立的可發布內容。 --> <header> <h1>Post Tilte</h1> <div class="meta"> Published by someone on <time datetime="2015-07-17T12:30+00:00"> <!-- 使用time元素按照指定的格式顯示時間 --> 01 May 2017 @ 12:30pm </time> </div> </header> <section> <!-- post --> <p>this is a <mark>wonderful</mark> <!-- 使用mark高亮文檔中的搜尋字詞，反白文本部分 --> article. </p> </section> </article> </section> <footer> <!-- 使用footer元素表示頁面或地區底部的頁尾，通常包括相關文章和連結、著作權和中繼資料等 --> <ul><!-- links --></ul> <!-- copyright --> </footer></body></html>
上述程式碼片段中使用的<header>、<section>、<article>、<footer>等均屬於HTML5的新語義元素
使用新語義元素代替原來的<div class="">的形式進行布局，不僅增加了頁面的代碼的易讀性，規範了書寫，更易於搜尋引擎和輔助技術對頁面的理解
但是也存在些問題，HTML5新特性對於舊版的瀏覽器不能正常訪問和動態網頁面不能正常顯示等一些問題，怎麼做才能更好的解決呢？下一篇HTM5文章將舉例介紹
HTML5的文檔結構和新的語義元素
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
