HTML MDN介紹

HTML（Hypertext Markup Language）是一種用於創建網頁的標準化標記語言。它使用標籤和屬性來描述網頁內容並添加樣式和結構。MDN（Mozilla 開發者網路）是由 Mozilla 組織創建的一個網站，旨在為 Web 技術參考提供廣泛的知識庫。

一、HTML基礎語法

HTML 使用標籤或元素來表示內容。標籤通常成對出現，開始標籤用<tagname>表示，結束標籤用</tagname>表示。在開始標籤和結束標籤之間，可以包含其他標籤、屬性和文本內容。以下是一個基本的 HTML 文檔結構：

<!DOCTYPE html>
<html>
  <head>
    <title>頁面標題</title>
  </head>
  <body>
    <h1>頁面主題</h1>
    <p>段落內容</p>
  </body>
</html>

DOCTYPE 是 HTML 的文檔類型聲明，告訴瀏覽器文檔的類型和版本。<html> 元素是 HTML 文檔的根元素，它包含 <head> 和 <body> 元素，其中 <head> 包含頁面的元信息，如頁面標題、關鍵字和描述信息。<body> 包含頁面的主要內容。

二、HTML常用標籤

HTML 有很多標籤可以用來組織內容和添加樣式。以下是一些常用標籤的示例：

<p>

標籤表示一個段落，並在段落之間添加空白。可以在 <p> 標籤之間添加文本、圖像、鏈接和其他 HTML 元素。

<a>

標籤用於創建超鏈接，指向其他位置的頁面或文檔。可以使用相對或絕對 URL 來鏈接內部或外部資源。例如：

<a href="https://www.mozilla.org">Mozilla 首頁</a>
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML">HTML 文檔</a>

<img>

標籤用於在頁面中插入圖像。可以指定圖像的 URL、寬度和高度等屬性。例如：

<img src="image.png" alt="圖片">

<ul>

和<li>

標籤可用於創建無序列表。<ul> 表示無序列表，<li> 表示列表中的一個項目。例如：

<ul>
  <li>列表項1</li>
  <li>列表項2</li>
  <li>列表項3</li>
</ul>

三、HTML表單

HTML 表單是一種用於收集用戶輸入信息的工具。它由 <form> 元素和與表單相關的控制項組成，如輸入框、單選框和複選框等。以下是一個表單的示例：

<form>
  <label for="name">姓名:</label>
  <input type="text" id="name" name="name">
  <br>
  <label for="email">郵箱:</label>
  <input type="email" id="email" name="email">
  <br>
  <label for="password">密碼:</label>
  <input type="password" id="password" name="password">
  <br>
  <input type="submit" value="提交">
</form>

在上面的示例中，使用了 <input> 元素來創建輸入框和提交按鈕。輸入框也可以設置為單選框或複選框，通過指定不同的 type 屬性來實現。

四、HTML布局和樣式

HTML 可以通過 CSS（Cascading Style Sheets）來控制頁面的樣式和布局。CSS 允許將樣式從 HTML 文檔中分離出來，並在多個頁面中共享。以下是一個使用 CSS 修改頁面樣式的示例：

<style>
  body {
    background-color: #f0f0f0;
    font-family: Arial, sans-serif;
    font-size: 16px;
  }
  h1 {
    color: #333;
    font-size: 24px;
  }
  p {
    color: #666;
    line-height: 1.5em;
  }
</style>

在上面的示例中，<style> 標籤包含了樣式規則，使用選擇器來選擇要應用樣式的元素。例如，選擇器 h1 將應用於所有 <h1> 元素，將標題的顏色設置為 #333，並將字型大小設置為 24px。同樣，選擇器 p 將應用於所有 <p> 元素，設置段落的顏色為 #666，並將行高設置為 1.5em。

五、HTML高級特性

除了上述基本功能外，HTML 還具有一些高級特性，如以下示例：

<canvas>

標籤提供了一個用於繪製圖形、圖像和動畫的 API。可以使用 JavaScript 在 <canvas> 元素內繪製直線、曲線、圓形等形狀，並可添加圖片和動畫等內容。例如：

<canvas id="myCanvas"></canvas>

<script>
  var canvas = document.getElementById("myCanvas");
  var ctx = canvas.getContext("2d");
  ctx.fillStyle = "#FF0000";
  ctx.fillRect(0, 0, 150, 75);
</script>

Geo Location API

通過瀏覽器的地理位置 API，可以獲取用戶的地理位置信息，可以使用以下 JavaScript 代碼來獲取用戶的緯度和經度：

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(function(position) {
    console.log("緯度：" + position.coords.latitude);
    console.log("經度：" + position.coords.longitude);
  });
}

WebSocket

通過 WebSocket，可以在客戶端和伺服器之間建立持久的雙向連接，並進行實時通信。示例代碼如下：

var socket = new WebSocket("ws://www.example.com/socketserver");

socket.onopen = function() {
  console.log("連接已建立");
}

socket.onmessage = function(event) {
  console.log("收到消息：" + event.data);
}

socket.onclose = function() {
  console.log("連接已關閉");
}

結論

HTML 是構建現代 Web 應用的必備技能之一，無論是創建網站、開發移動應用還是設計遊戲，都離不開 HTML。MDN 是一個廣泛的知識庫，為 Web 技術愛好者和開發者提供了豐富的資源和文檔，有需要學習 HTML 的人都可以通過 MDN 找到合適的學習資料與實例。

原創文章，作者：KRKS，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/141580.html