html5文檔基本結構
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>文檔標題</title>
</head>
<body>文檔正文部分
</body>
</html>html文檔可分為文檔頭和文檔體兩部分，文檔頭包括網頁語言、關鍵字、字符集的定義等信息，文檔體當中的內容就是頁面里面要顯示的信息
html文檔的基本結構由三對標簽負責，這三對標簽分別是<html>,<head>,<body>
?title的內容會顯示在導航欄里
標簽分為單標簽與多標簽
元素可分為三類：元信息元素、語義元素和無語義元素——元信息元素用來描述文檔自身信息，meta元素定義元信息，其常用屬性如下：
- charset：定義文檔的字符編碼，常用UTF-8
- content：定義name和http-equiv相關的元信息
- name：關聯content的名稱（常用的有keywords關鍵字、author作者名、description頁面描述）
其中，name的參數格式：
例子：
?<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="description" content="這是一個關于HTML和前端開發的教程頁面。"><meta name="keywords" content="HTML, CSS, JavaScript, 前端開發"><meta name="author" content="Kimi"><meta name="robots" content="index, follow"><title>前端開發教程</title><link rel="stylesheet" href="styles.css">
</head>
<body><h1>歡迎來到前端開發教程</h1><p>這里將介紹HTML、CSS和JavaScript的基礎知識。</p>
</body>
</html>語義元素又可分為塊級元素、行內（內聯）元素、行內塊元素等等..
塊級元素指的是本身屬性為display：block的元素。通常用于：大結構布局的搭建。
特點：
1.獨占一行
2.可以直接控制相關元素
3.在不設置寬度的情況下，其寬度為其父級寬度
4.在不設置高度的情況下，其高度為其本身的內容高度
行內元素也稱內聯元素，是指本身屬性為display：inline元素行內元素可以與相鄰的行內元素在同一行，對寬、高屬性不生效，通常使用塊級元素來進行文字、小圖標（小結構）的搭建。
1.與其他內聯元素從左到右在同一行顯示
2.無法控制豎直的margin和padding
?3.行內元素的行高，由本身內容（文字、圖片）的大小決定
4.不能在行內嵌套塊級元素
常見的css有：
display：block—塊級元素
display：inline—內聯元素
display：inline-block—內聯塊元素，表現為同行顯示并且可以修改寬、高、內外邊距等屬性
行內塊元素：（就是內聯塊元素）
HTML5新增結構語義元素
HTML5引入了許多新的語義結構元素，這些元素的主要作用是為網頁的結構提供更清晰、更明確的語義化標記。語義化標記不僅有助于開發者更好地理解代碼結構，還能提升網頁的可訪問性、搜索引擎優化（SEO）以及維護性。以下是HTML5新增的一些主要語義結構元素及其用途：
1. <header>
? ?用途：表示頁面或文章的頭部區域，通常包含網站的標志、導航欄、標題等內容。
? ?示例：
<header><h1>網站標題</h1><nav><ul><li><a href="#">首頁</a></li><li><a href="#">關于我們</a></li><li><a href="#">服務</a></li><li><a href="#">聯系我們</a></li></ul></nav>
</header>? ?優點：明確標識頁面的頭部區域，便于屏幕閱讀器識別，提升可訪問性。
2. <nav>
? ?用途：表示頁面的導航鏈接部分，通常用于網站的菜單欄或導航欄。
? ?示例：
<nav><ul><li><a href="#">首頁</a></li><li><a href="#">產品</a></li><li><a href="#">支持</a></li><li><a href="#">聯系我們</a></li></ul>
</nav>? ?優點：明確標識導航區域，便于搜索引擎識別導航結構，提升SEO效果。
3. <main>
? ?用途：表示頁面的主要內容區域，一個頁面中只能有一個<main>元素。
? ?示例：
<main><article><h2>文章標題</h2><p>文章內容...</p></article><aside><h3>相關文章</h3><ul><li><a href="#">相關文章1</a></li><li><a href="#">相關文章2</a></li></ul></aside>
</main>? ?優點：明確標識頁面的核心內容，便于屏幕閱讀器和搜索引擎識別主要內容區域。
4. <article>
? ?用途：表示一個獨立的、可獨立分發的內容單元，如博客文章、新聞報道、論壇帖子等。
? ?示例：
<article><header><h2>文章標題</h2><p>作者：張三</p></header><section><h3>引言</h3><p>文章引言部分...</p></section><section><h3>正文</h3><p>文章正文內容...</p></section>
</article>? ?優點：明確標識獨立的內容單元，便于內容的復用和分發。
5. <section>
? ?用途：表示文檔中的一個獨立的章節或邏輯部分，通常包含標題。
? ?示例：
<section><h2>章節標題</h2><p>章節內容...</p>
</section>? ?優點：將內容劃分為邏輯部分，便于結構化閱讀和搜索引擎索引。
6. <aside>
? ?用途：表示與頁面主要內容相關的輔助信息，如側邊欄、廣告、相關鏈接等。
? ?示例：
<aside><h3>廣告</h3><p>廣告內容...</p>
</aside>? ?優點：明確標識輔助信息，便于區分主要內容和輔助內容。
7. <footer>
? ?用途：表示頁面或文章的底部區域，通常包含版權信息、聯系方式、網站地圖等。
? ?示例：
<footer><p>© 2025 版權所有</p><address><a href="mailto:example@example.com">聯系我們</a></address>
</footer>? ?優點：明確標識頁面的底部區域，便于屏幕閱讀器識別。
8. <figure> 和 <figcaption>
? ?用途：<figure>用于包含圖像、圖表、代碼片段等獨立內容，<figcaption>用于為<figure>提供標題或說明。
? ?示例：
<figure><img src="image.jpg" alt="圖片描述"><figcaption>圖片標題</figcaption>
</figure>? ?優點：明確標識圖像和其他媒體內容及其說明，便于語義化標記。
9. <details> 和 <summary>
? ?用途：<details>用于創建可折疊的內容區域，<summary>用于提供折疊區域的標題。
? ?示例：
<details><summary>點擊展開</summary><p>這里是隱藏的內容。</p>
</details>? ?優點：提供交互式內容區域，增強用戶體驗。
總結
HTML5新增的語義結構元素的主要作用是：
1. ?提高可讀性和可維護性：通過語義化的標記，代碼結構更清晰，便于開發者閱讀和維護。
2. ?提升可訪問性：屏幕閱讀器可以更好地理解頁面結構，幫助視障用戶更好地訪問網頁內容。
3. ?優化搜索引擎排名（SEO）：搜索引擎可以更準確地識別頁面的主要內容和結構，從而提高網頁的搜索排名。
4. ?增強用戶體驗：通過語義化的標記，可以更好地利用CSS和JavaScript實現更豐富的交互效果。
總之，語義結構元素是HTML5的重要進步，它們不僅讓代碼更加規范，還為網頁的可訪問性和SEO帶來了顯著的提升。
無語義元素
確實，無語義元素（如<div>和<span>）和語義元素都可以用來包裹內容，從功能上來說，它們都可以實現布局和展示內容的目的。然而，它們之間存在本質的區別，主要體現在語義化和可訪問性上，而不僅僅是功能實現。
1. 功能實現的相似性
從功能上來說，無語義元素和語義元素都可以用來包裹內容，并且可以通過CSS和JavaScript進行樣式和行為的控制。例如：
使用<div>（無語義元素）
<div><h1>標題</h1><p>這是一個段落。</p>
</div>使用<section>（語義元素）
<section><h1>標題</h1><p>這是一個段落。</p>
</section>在上面的兩個例子中，<div>和<section>都可以包裹內容，并且可以通過CSS進行樣式控制。從功能上來說，它們確實可以實現相同的效果。
2. 語義化的重要性
盡管功能上相似，但語義元素和無語義元素在語義化和可訪問性上有本質的區別。
（1）語義化
? ?語義元素：語義元素（如<header>、<nav>、<main>、<section>等）自帶語義含義，能夠明確表達其內容的性質和用途。例如：
? ?<header>表示頁面的頭部區域。
? ?<nav>表示導航鏈接部分。
? ?<main>表示頁面的主要內容區域。
? ?<section>表示文檔中的一個獨立章節。
? ?<article>表示一個獨立的內容單元，如博客文章。
? ?<aside>表示與主要內容相關的輔助信息。
? ?<footer>表示頁面的底部區域。
? ?無語義元素：無語義元素（如<div>和<span>）本身沒有語義含義，它們只是通用的容器，用于布局和樣式控制。例如：
? ?<div>是一個塊級容器，用于包裹內容。
? ?<span>是一個行內容器，用于對文本進行樣式控制。
（2）可訪問性
? ?語義元素：語義元素能夠被屏幕閱讀器等輔助工具更好地理解，從而為視障用戶和其他有特殊需求的用戶提供更友好的體驗。例如，屏幕閱讀器可以識別<header>、<nav>、<main>等元素，幫助用戶快速導航到頁面的不同部分。
? ?無語義元素：無語義元素（如<div>和<span>）本身沒有語義含義，屏幕閱讀器無法理解其內容的結構和層次，只能逐個元素讀取內容。這會導致視障用戶難以理解頁面的結構和內容。
3. 搜索引擎優化（SEO）
? ?語義元素：搜索引擎（如Google、Bing等）能夠更好地理解頁面的結構和內容，從而提高頁面的搜索排名。例如，搜索引擎可以識別<header>、<main>、<footer>等元素，從而更準確地提取頁面的主要內容和結構。
? ?無語義元素：搜索引擎無法準確理解頁面的結構和內容，可能導致搜索排名下降。
4. 代碼的可讀性和可維護性
? ?語義元素：使用語義元素的代碼結構更清晰，易于理解。開發者可以快速定位和修改代碼，提高開發效率。例如：
<header><h1>網站標題</h1><nav><ul><li><a href="#">首頁</a></li><li><a href="#">關于我們</a></li><li><a href="#">服務</a></li><li><a href="#">聯系我們</a></li></ul></nav>
</header>
<main><article><header><h2>文章標題</h2><p>作者：張三</p></header><section><h3>引言</h3><p>文章引言部分...</p></section><section><h3>正文</h3><p>文章正文內容...</p></section></article><aside><h3>相關文章</h3><ul><li><a href="#">相關文章1</a></li><li><a href="#">相關文章2</a></li></ul></aside>
</main>
<footer><p>© 2025 版權所有</p><address><a href="mailto:example@example.com">聯系我們</a></address>
</footer>這種方式更直觀，易于理解和維護。
? ?無語義元素：使用無語義元素的代碼結構較為模糊，需要通過類名或ID來理解代碼的結構和用途。例如：
<div class="header"><h1>網站標題</h1><div class="nav"><ul><li><a href="#">首頁</a></li><li><a href="#">關于我們</a></li><li><a href="#">服務</a></li><li><a href="#">聯系我們</a></li></ul></div>
</div>
<div class="main"><div class="article"><div class="header"><h2>文章標題</h2><p>作者：張三</p></div><div class="section"><h3>引言</h3><p>文章引言部分...</p></div><div class="section"><h3>正文</h3><p>文章正文內容...</p></div></div><div class="aside"><h3>相關文章</h3><ul><li><a href="#">相關文章1</a></li><li><a href="#">相關文章2</a></li></ul></div>
</div>
<div class="footer"><p>© 2025 版權所有</p><div class="address"><a href="mailto:example@example.com">聯系我們</a></div>
</div>這種方式需要開發者查看類名來理解代碼的結構，增加了理解和維護的難度。
總結
雖然無語義元素和語義元素都可以用來包裹內容并實現布局，但它們在語義化、可訪問性、搜索引擎優化（SEO）以及代碼的可讀性和可維護性上有本質的區別。語義元素通過明確的語義含義，幫助開發者、輔助工具和搜索引擎更好地理解頁面結構和內容，從而實現更高效、更友好的用戶體驗。因此，建議在開發中優先使用語義元素，以提升網頁的整體質量和用戶體驗。
