Day2：HTML-基本介紹

2022 iThome 鐵人賽

DAY 2

Modern Web

30天複習網頁前端設計!系列第 2 篇

14th鐵人賽

2022-09-17 15:05:18

875 瀏覽

分享至

HTML是什麼?

超文本標記語言(全名：Hyper Text Markup Language)
HTML使用標記標籤<>來描述網頁
常與CSS、JavaScript一起被用於設計網頁、網頁應用程式以及行動應用程式的使用者介面

HTML的基本架構

HTML元素的組成
巢狀結構
HTML內的元素排序為巢狀結構，簡單來說就是元素內裝入元素，一層一層的包覆，以下為舉例。
在Hello Kitty!句子中強調「Kitty」的部分，把Kitty放入顯示為粗體的標籤<strong>。

<p >Hello <strong>Kitty</strong>!</p>

顯示：

屬性
可以讓HTML標籤增添一些額外資訊，用來敘述元素的相關性質。格式：屬性名稱="屬性的值"
以style屬性為舉例，color代表文字顏色，冒號後填入顏色。

<p style="color:blueviolet">Hello <strong>Kitty</strong>!</p>

顯示：

HTML基本中的基本架構

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p style="color:blueviolet">Hello <strong>Kitty</strong>!</p>
<body>
</html>

<!DOCTYPE html>-命令句，讓瀏覽器知道這個檔案是一個html檔。
<html></html>-之間的標籤為描述網頁。
<head></head>-之間的標籤為使用者想概括的重要資訊(不會顯示在網頁上)，如title、meta、link等等。
<body><body>-之間的標籤為顯示在網頁上的內容。
*以上內容「！」+Tab鍵就可以輕鬆打出來！