淺談HTML

疯狂Python發表於2024-08-21
HTML

html是一種標籤語言，用來寫前端頁面的，通常結合CSS和js來寫。
主要用於web開發，B/S架構的系統，所謂B/S其實也是一種特殊的C/S，只不過此時瀏覽器變成了客戶端。
B/S架構：B是browser,S是server
C/S架構：C是client,S是server

**什麼是 HTML？**
HTML 是用來描述網頁的一種語言。
HTML 指的是超文字標記語言 (Hyper Text Markup Language)
HTML 不是一種程式語言，而是一種標記語言 (markup language)
標記語言是一套標記標籤 (markup tag)
HTML 使用標記標籤來描述網頁

**HTML 標籤**
HTML 標記標籤通常被稱為 HTML 標籤 (HTML tag)。
HTML 標籤是由尖括號包圍的關鍵詞，比如 <html>
HTML 標籤通常是成對出現的，比如 <b> 和 </b>
標籤對中的第一個標籤是開始標籤，第二個標籤是結束標籤
開始和結束標籤也被稱為開放標籤和閉合標籤

**HTML 文件 = 網頁**
HTML 文件描述網頁
HTML 文件包含 HTML 標籤和純文字
HTML 文件也被稱為網頁
Web 瀏覽器的作用是讀取 HTML 文件，並以網頁的形式顯示出它們。瀏覽器不會顯示 HTML 標籤，而是使用標籤來解釋頁面的內容：

<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>

例子解釋：
<html> 與 </html> 之間的文字描述網頁
<body> 與 </body> 之間的文字是可見的頁面內容
<h1> 與 </h1> 之間的文字被顯示為標題
<p> 與 </p> 之間的文字被顯示為段落

下面來分別來看各種標籤：

1、HTML 標題（Heading）是透過 <h1> - <h6> 等標籤進行定義的。
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>

2、HTML 段落是透過 <p> 標籤進行定義的。
<p>this is a test</p>
<p>this is a test</p>
<p>this is a test</p>
<p>this is a test</p>

3、HTML 連結是透過 <a> 標籤進行定義的。
<a href="www.baidu.com">這是百度的網址</a>
註釋：在 href 屬性中指定連結的地址。

4、HTML 影像是透過 <img> 標籤進行定義的。
<img src="test.jpg" width="104" height="142" />
註釋：影像的名稱和尺寸是以屬性的形式提供的。

html元素

HTML 元素語法
HTML 元素以開始標籤起始
HTML 元素以結束標籤終止
元素的內容是開始標籤與結束標籤之間的內容
某些 HTML 元素具有空內容（empty content）
空元素在開始標籤中進行關閉（以開始標籤的結束而結束）
大多數 HTML 元素可擁有屬性

HTML 提示：使用小寫標籤
HTML 標籤對大小寫不敏感：<P> 等同於 <p>。許多網站都使用大寫的 HTML 標籤。

W3School 使用的是小寫標籤，因為全球資訊網聯盟（W3C）在 HTML 4 中推薦使用小寫，而在未來 (X)HTML 版本中強制使用小寫。

來個標準模板來解釋說明：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>hello</h1>
<h2>world</h2>
</body>
</html>

1.<!DOCTYPE html>
有這個表示符合w3c標準的html寫法（標準模式），如果去掉，代表怪異模式。
所謂怪異模式，就是在不同瀏覽器上可能會出錯，不要去掉這個。
2.<html></html>
根標籤
3.<head></head>
標籤頭：
(1) meta：
(2) title：就是tab頁上顯示的內容
(3) 其他

特別說明：
<body></body>這樣成對出現的標籤叫做閉合標籤
<meta>這種單獨出現的標籤叫做自閉合標籤

html的內容是實在太多了，記住下面這個網址，遇到不會的就翻閱下，姑且當作一個字典吧，不要太相信自己的記憶，學會筆記和查文件。
https://m.jb51.net/w3school/h.htm

相關文章