HTML（Hypertext Markup Language）是當今網頁開發的基石，它是一種標記語言，用於編寫和結構化網頁內容。無論是瀏覽我們喜愛的新聞網站、社交媒體，還是購物網站，HTML都扮演著關鍵的角色。這篇文章為概要說明html的基本概念，之後會再追加其他文章，說明html的其他項目功能。
目錄
HTML的基本概念
標籤和元素
HTML使用標籤來定義網頁中的元素。標籤通常是成對的，有開始標籤和結束標籤，中間包含特定元素的內容。例如，<p>標籤用於定義段落，<a>標籤用於超連結。
<p>這是一個段落。</p>
<a href="https://www.google.com">點擊這裡訪問範例網站</a>在上述例子中，<p>和<a>就是標籤，它們分別定義了一個段落和一個超連結元素。
屬性
標籤可以包含屬性，這些屬性提供有關元素的附加訊息。例如，<a>標籤可以包含href屬性，用於指定超連結的目標URL。
<a href="https://www.example.com">超連結範例</a>在這個例子中，href就是<a>標籤的一個屬性，它指定了連結的目標URL。
元素的組合
HTML中的標籤可以組合在一起，形成複雜的網頁結構。例如，下面的HTML代碼定義了一個標題、一個段落和一個有序列表。
<h1>網頁結構範例</h1>
<p>這是一個包含標題、段落和列表的範例。</p>
<ol>
<li>項目1</li> <li>項目2</li>
<li>項目3</li>
</ol>這種結構化的方式使開發者能夠清晰地描述網頁的內容和層次結構。
HTML文件的結構
文件型別的聲明
HTML文檔通常以文件型別聲明（DOCTYPE declaration）開始，這有助於瀏覽器正確地讀取文件。一個典型的DOCTYPE聲明如下：
<!DOCTYPE html>
這告訴瀏覽器這是一個HTML5文件。
<html>元素
<html>元素是HTML文件的根元素，包含了整個文件的內容。
<!DOCTYPE html>
<html>
<!-- HTML文件的內容在這裡 -->
</html>
<head>元素
<head>元素包含了文件的資料，如標題、文字編碼、引用的外部樣式表(css)和腳本(script)等。
<head>
<title>我的網頁</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">
<script src="script.js"></script>
</head>
<body>元素
<body>元素包含了實際的網頁內容，如文字、圖片、連結等。
<body>
<h1>歡迎來到我的網頁</h1>
<p>這是一個簡單的段落。</p>
<a href="https://www.example.com">點擊這裡訪問範例網站</a>
</body>
HTML的應用
HTML是網頁開發的基石，但它不僅僅是靜態內容的容器。結合CSS（Cascading Style Sheets）和JavaScript，開發者能夠創建出豐富且具有互動性的網頁應用。
CSS與HTML的結合
CSS用於定義網頁的外觀和樣式。通過將樣式應用到HTML元素，開發者可以控制字體、顏色、佈局等方面的外觀。
<!DOCTYPE html>
<html>
<head>
<title>樣式與HTML</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1 class="header">這是一個有樣式的標題</h1>
<p class="paragraph">這是一個有樣式的段落。</p>
</body>
</html>在上述例子中，styles.css中定義了.header和.paragraph的樣式
JavaScript與HTML的結合
JavaScript用於實現動態效果和與用戶的互動。通過操作HTML元素，開發者可以實現例如表單驗證、動畫效果等功能。
<!DOCTYPE html>
<html>
<head>
<title>JavaScript與HTML</title>
<script src="script.js"></script>
</head>
<body>
<button onclick="showMessage()">點擊我顯示訊息</button>
</body>
</html>
在這個例子中，script.js包含了一個名為showMessage的JavaScript函數，用於在按鈕點擊時顯示訊息。
HTML5的新功能
HTML5是HTML的最新版本，引入了許多新功能和API，包括語意化標籤、多媒體元素、本地存儲等。
語意化標籤
HTML5引入了一些語意化的標籤，如<header>、<footer>、<article>、<section>等，使開發者更容易理解和描述網頁的結構。
<!DOCTYPE html>
<html>
<body>
<header>
<h1>網頁標題</h1>
</header>
<nav>
<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">關於我們</a></li>
<li><a href="#">聯絡我們</a></li>
</ul>
</nav>
<section>
<article>
<h2>文章標題</h2>
<p>這是一篇文章的內容。</p>
</article>
<!-- 其他文章... -->
</section>
<footer>
<p>版權所有 © 2023</p>
</footer>
</body>
</html>
多媒體元素
HTML5引入了<audio>和<video>標籤，使得在網頁上嵌入音訊和影像變得更加簡單。
<!DOCTYPE html>
<html>
<body>
<h1>HTML5音訊和影像</h1>
<audio controls>
<source src="audio.mp3" type="audio/mp3">
您的瀏覽器不支持音訊播放。
</audio>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
您的瀏覽器不支持影像播放。
</video>
</body>
</html>
本地存儲
HTML5提供了本地存儲的API，允許網頁在用戶的瀏覽器中存儲數據，例如使用localStorage。
<!DOCTYPE html>
<html>
<body>
<h1>本地存儲範例</h1>
<button onclick="saveData()">保存資料</button>
<script>
function saveData() {
localStorage.setItem('username','JiaoJiao');
alert('資料已保存！');
}
</script>
</body>
</html>
HTML是網頁開發的基石，它提供了結構化文檔的標準並使得網頁元素之間建立超文本連結成為可能。透過不斷的擴充和升級，HTML已經成為一個功能強大且靈活的標記語言，支持豐富的多媒體內容和互動性。
無論是新手還是經驗豐富的開發者，深入理解HTML的結構、標籤和元素，以及其與CSS和JavaScript的結合，都是開發優雅且高效網頁應用的基礎。希望文章能夠幫助讀者更全面地了解HTML，啟發更深入的學習和實踐。HTML，作為網頁開發的基石，將繼續在數位世界中扮演著不可或缺的角色。