HTML5的文檔結構和新的語義元素
阿新 • • 發佈：2017-07-18
his 發布 浮動 style 自己 htm5 ctype -1 標準模式
學習前端的東西似乎沒有什麽捷徑，就是直接上手擼就完了
本文目標：（熟知）
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的文檔結構和新的語義元素