<!DOCTYPE html>: 聲明頁面為HTML5 文檔
<html lang="language-code"></html>: 實際 HTML 部分
<head></head>: 網(wǎng)頁文檔的頭部
<meta charset="utf-8"/>: 將文檔的字符編碼聲明為 UTF-8
<title></title>: 頁面的標(biāo)題
<body></body>: 頁面主體
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="zh-CN">
<title>第一個demo</title>
</head>
<body>
第一個demo
</body>
</html>
分級標(biāo)題(hn):
HTML 提供了六級標(biāo)題用于創(chuàng)建頁面信息的層級關(guān)系,是的，HTML 的分級標(biāo)題（Heading）默認是塊級元素。也就是說 <h1> 到 <h6> 標(biāo)簽在頁面上都會獨占一行，并且前后會有默認的上下間距。
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
如果出現(xiàn)嵌套分級標(biāo)題將會優(yōu)先內(nèi)部標(biāo)題,但是例子中的h1和h6都會按照分級標(biāo)簽顯示
<h1>h1<h6>h6</h6></h1>
分級標(biāo)題的重要性: 對任何頁面來說，分級標(biāo)題都可以說是最重要的 HTML 元素。由于標(biāo)題通常傳達的是頁面的主題，因此，對搜索引擎而言，如果標(biāo)題與搜索詞匹配
頁眉(頁頭)標(biāo)簽(header):
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="zh-CN">
<title>第一個demo</title>
</head>
<header
<body>
<header>
<nav role="navigation">
<ul>
<li><a href="#">a</a></li>
<li><a href="#">b</a></li>
<li><a href="#">c</a></li>
</ul>
</nav>
</header>
</body>
</html>
標(biāo)記導(dǎo)航(nav ):
在 HTML 中，導(dǎo)航通常用 語義化標(biāo)簽 <nav> 來標(biāo)記。<nav> 用于定義網(wǎng)站或頁面的導(dǎo)航鏈接區(qū)域，讓瀏覽器和輔助工具（如屏幕閱讀器）更容易理解頁面結(jié)構(gòu)。
示例：頂部導(dǎo)航 + 底部導(dǎo)航
<header>
<nav>
<ul>
<li><a href="#home">首頁</a></li>
<li><a href="#about">關(guān)于</a></li>
<li><a href="#contact">聯(lián)系我們</a></li>
</ul>
</nav>
</header>
<footer>
<nav>
<ul>
<li><a href="privacy.html">隱私政策</a></li>
<li><a href="terms.html">使用條款</a></li>
</ul>
</nav>
</footer>
頁面主導(dǎo)航（如：首頁 / 產(chǎn)品 / 關(guān)于 / 聯(lián)系）。
文章內(nèi)部目錄導(dǎo)航（錨點跳轉(zhuǎn)）。
頁腳的站點地圖（sitemap）。
主要內(nèi)容(main):
<main>
<h1>2323</h1>
</main>
一般一個頁面只有一個main元素,標(biāo)識唯一的主要內(nèi)容區(qū)域, 但是有多個也不會有異常
文章(article):
<article>
<h1 id="gaudi">Barcelona's Architect
? </h1>
<p>Antoni Gaudí's incredible buildings
bring millions of tourists to
Barcelona each year.</p>
<p>Gaudí's non-conformity, already
visible in his teenage years,
coupled with his quiet but firm
devotion to the church, made a
unique foundation for his thoughts
and ideas. His search for simplicity
is quite apparent in his work,
from the
<a href="#park-guell">Park Guell</a>
and its incredible sculptures and
</article>
博客文章
新聞報道
論壇帖子
用戶評論
獨立的內(nèi)容區(qū)塊
標(biāo)記區(qū)塊(section):
<section>
<p>dsd1111111222222s</p>
</section>
文章分段
一篇長文章分成多個部分，每個部分一個主題。
網(wǎng)頁模塊化
頁面中不同的功能區(qū)，比如“新聞”、“產(chǎn)品介紹”、“聯(lián)系我們”。
與 <article> 的區(qū)別
<article> 表示 獨立、完整、可單獨傳播的內(nèi)容（如新聞、帖子、博客）。
<section> 表示 內(nèi)容的邏輯分組，它的內(nèi)容需要依賴整體上下文。
指定附注欄(aside):
<aside role="complementary">
<h1>Architectural Wonders of Barcelona</h1>
<p>Barcelona is home to many architectural wonders in addition to Gaudí's work. Some of them include:</p>
<ul>
<li lang="es">Arc de Triomf</li>
<li>The cathedral <span lang="es">(La Seu)</span></li>
<li lang="es">Gran Teatre del Liceu</li>
<li lang="es">Pavilion Mies van der Rohe</li>
<li lang="es">Santa Maria del Mar</li>
</ul>
<p><small>Credit: <a >
</aside>
側(cè)邊欄（sidebar）
廣告區(qū)
推薦文章 / 相關(guān)鏈接
作者簡介 / 標(biāo)簽 / 附加信息
頁腳(footer):
<footer>
<nav>
<ul>
<li><a href=" privacy.html">隱私政ddd策</a></li>
<li><a href="terms.html">使用條款</a></li>
</ul>
</nav>
</footer>
通用容器(div):
<div>
<article>
w22222222222
</article>
</div>
