html源代碼中圖像元素用什么標記定義,HTML_CSS入門學習

2023年12月11日發(作者：東坡詩文)

-

html源代碼中圖像元素用什么標記定義,HTML_CSS入門學習

1 HTML 簡介

下面解釋什么是HTML，以及HTML標簽和HTML文檔的含義。

1.1 什么是 HTML？

HTML 是用來描述網頁的一種語言。

HTML 指的是超文本標記語言 (Hyper Text Markup Language)

HTML 不是一種編程語言，而是一種標記語言(markup language)

標記語言是一套標記標簽 (markup tag)

HTML 使用標記標簽來描述網頁

1.2 HTML 標簽

HTML 標記標簽通常被稱為 HTML 標簽 (HTML tag)。

HTML 標簽是由尖括號包圍的關鍵詞，比如

HTML 標簽通常是成對出現的，比如 和和

標簽對中的第一個標簽是開始標簽，第二個標簽是結束標簽

開始和結束標簽也被稱為開放標簽和閉合標簽

1.3 HTML 文檔 = 網頁

HTML 文檔描述網頁

HTML 文檔包含 HTML 標簽和純文本

HTML 文檔也被稱為網頁

Web 瀏覽器的作用是讀取 HTML 文檔，并以網頁的形式顯示出它們。瀏覽器不會顯示 HTML 標簽，而是使用標簽來解釋頁面的內容：

我的第一個標題

我的第一個段落。

例子解釋

與 之間的文本描述網頁

與

之間的文本被顯示為標題

與

之間的文本被顯示為段落

2 HTML 基礎

本章通過實例向您演示最常用的 HTML 標簽。

2.1 HTML 標題

HTML 標題(Heading)是通過

-

等標簽進行定義的。

This is a heading

This is a heading

This is a heading

2.2 HTML 段落

HTML 段落是通過

標簽進行定義的。

This is a paragraph.

This is another paragraph.

2.3 HTML 鏈接

HTML 鏈接是通過 標簽進行定義的。

2.4 HTML 圖像

HTML 圖像是通過 標簽進行定義的。

2.5 HTML 水平線

標簽在 HTML 頁面中創建水平線。hr 元素可用于分隔內容。

This is a paragraph

This is a paragraph

This is a paragraph

2.6 HTML 注釋

可以將注釋插入 HTML 代碼中，這樣可以提高其可讀性，使代碼更易被人理解。瀏覽器會忽略注釋，也不會顯示它們。注釋是這樣寫的：

2.7 換行

如果您希望在不產生一個新段落的情況下進行換行(新行)，請使用

標簽。

2.8 HTML 提示 - 如何查看源代碼

您一定曾經在看到某個網頁時驚嘆道 “WOW! 這是如何實現的？”

如果您想找到其中的奧秘，只需要單擊右鍵，然后選擇“查看源文件”(IE)或“查看頁面源代碼”(Firefox)，其他瀏覽器的做法也是類似

的。這么做會打開一個包含頁面 HTML 代碼的窗口。

3 HTML 編輯器

可以使用專業的 HTML 編輯器來編輯 HTML：

Adobe Dreamweaver

Microsoft Expression Web

CoffeeCup HTML Editor不過，我們同時推薦使用文本編輯器來學習 HTML，比如 Notepad (PC) 或 TextEdit (Mac)。我們相信，使用一款簡單的文本編輯器是學

習 HTML 的好方法。

通過記事本，依照以下四步來創建您的第一張網頁。

步驟一：啟動記事本。

步驟二：用記事本來編輯 HTML，在記事本中鍵入 HTML 代碼。

步驟三：使用 .htm 或 .html 擴展名保存 HTML 文件。

步驟四：使用任意瀏覽器打開這個 HTML 文件。

4 HTML元素

HTML 文檔是由 HTML 元素定義的。HTML 元素指的是從開始標簽(start tag)到結束標簽(end tag)的所有代碼。

開始標簽

元素內容

結束標簽

This is a paragraph

This is a link

4.1 HTML 元素語法

HTML 元素以開始標簽起始

HTML 元素以結束標簽終止

元素的內容是開始標簽與結束標簽之間的內容

某些 HTML 元素具有空內容(empty content)

空元素在開始標簽中進行關閉(以開始標簽的結束而結束)

大多數 HTML 元素可擁有屬性

4.2 HTML 實例解釋

元素：

This is my first paragraph.

這個

元素定義了 HTML 文檔中的一個段落。這個元素擁有一個開始標簽

，以及一個結束標簽

。元素內容是：This is my first paragraph。

4.3 空的 HTML 元素

沒有內容的 HTML 元素被稱為空元素。空元素是在開始標簽中關閉的。

就是沒有關閉標簽的空元素。

在 XHTML、XML 以及未來版本的 HTML 中，所有元素都必須被關閉。

在開始標簽中添加斜杠，比如

，是關閉空元素的正確方法，HTML、XHTML 和 XML 都接受這種方式。

4.4 HTML 提示：使用小寫標簽

HTML 標簽對大小寫不敏感：等同于

。許多網站都使用大寫的 HTML 標簽。

推薦使用小寫標簽，因為萬維網聯盟(W3C)在 HTML 4 中推薦使用小寫，而在未來 (X)HTML 版本中強制使用小寫。

5 HTML 屬性

HTML 標簽可以擁有屬性。屬性為 HTML 元素提供附加信息。

屬性總是以名稱/值對的形式出現，比如：name="value"。

屬性總是在 HTML 元素的開始標簽中規定。

5.1 更多 HTML 屬性實例

屬性例子 1:

定義標題的開始。

擁有關于對齊方式的附加信息。

屬性例子 2:

5.2 HTML 提示：使用小寫屬性

屬性和屬性值對大小寫不敏感。

不過，萬維網聯盟在其 HTML 4 推薦標準中推薦小寫的屬性/屬性值。而新版本的 (X)HTML 要求使用小寫屬性。

5.3 始終為屬性值加引號

屬性值應該始終被包括在引號內。雙引號是最常用的，不過使用單引號也沒有問題。

在某些個別的情況下，比如屬性值本身就含有雙引號，那么您必須使用單引號，例如：

name='Bill "HelloWorld" Gates'

5.4 HTML 屬性參考手冊

我們的完整的 HTML 參考手冊提供了每個 HTML 元素可使用的合法屬性的完整列表：

下面列出了適用于大多數 HTML 元素的屬性：

屬性

值

描述

class

classname

規定元素的類名(classname)

id

id

規定元素的唯一 id

style

style_definition

規定元素的行內樣式(inline style)title

text

規定元素的額外信息(可在工具提示中顯示)

如需更多關于標準屬性的信息，請訪問：

6 HTML 樣式

style 屬性用于改變 HTML 元素的樣式。

6.1 HTML 的 style 屬性

style 屬性的作用：提供了一種改變所有 HTML 元素的樣式的通用方法。

樣式是 HTML 4 引入的，它是一種新的首選的改變 HTML 元素樣式的方式。通過 HTML 樣式，能夠通過使用 style 屬性直接將樣式添加

到 HTML 元素，或者間接地在獨立的樣式表中(CSS 文件)進行定義。

您可以在我們的 CSS 教程中學習關于樣式和 CSS 的所有知識。

6.2 不贊成使用的標簽和屬性

在 HTML 4 中，有若干的標簽和屬性是被廢棄的。被廢棄(Deprecated)的意思是在未來版本的 HTML 和 XHTML 中將不支持這些標簽和

屬性。

應該避免使用下面這些標簽和屬性：

標簽

描述

定義居中的內容。

和

定義 HTML 字體。

和

定義刪除線文本

定義下劃線文本

屬性

描述

align

定義文本的對齊方式

bgcolor

定義背景顏色

color

定義文本顏色

對于以上這些標簽和屬性：請使用樣式代替！

6.3 HTML 樣式實例

背景顏色

background-color 屬性為元素定義了背景顏色：This is a heading

This is a paragraph.

style 屬性淘汰了“舊的” bgcolor 屬性。

字體、顏色和尺寸

font-family、color 以及 font-size 屬性分別定義元素中文本的字體系列、顏色和字體尺寸：

A heading

A paragraph.

style 屬性淘汰了舊的 標簽。

文本對齊

text-align 屬性規定了元素中文本的水平對齊方式：

This is a heading

The heading above is aligned to the center of this page.

style 屬性淘汰了舊的 "align" 屬性。

7 HTML 文本格式化

HTML 可定義很多供格式化輸出的元素，比如粗體和斜體字。

7.1 文本格式化標簽

標簽

描述

定義粗體文本。

定義大號字。

定義著重文字。

定義斜體字。

定義小號字。

定義加重語氣。

定義下標字。

定義上標字。

定義插入字。

定義刪除字。

*不贊成使用。*使用 代替。

*不贊成使用。*使用 代替。

*不贊成使用。*使用樣式(style)代替。

7.2 “計算機輸出”標簽

標簽

描述定義計算機代碼。

定義鍵盤碼。

定義計算機代碼樣本。

定義打字機代碼。

定義變量。

定義預格式文本。

*不贊成使用。*使用

代替。

*不贊成使用。*使用

代替。

*不贊成使用。*使用

代替。

8 CSS 單位

尺寸

單位

描述

%

百分比

in

英寸

cm

厘米

mm

毫米

em

1em 等于當前的字體尺寸。2em 等于當前字體尺寸的兩倍。例如，如果某元素以 12pt 顯示，那么 2em 是24pt。在 CSS 中，em 是非

常有用的單位，因為它可以自動適應用戶所使用的字體。

ex

一個 ex 是一個字體的 x-height。 (x-height 通常是字體尺寸的一半。)

pt

磅 (1 pt 等于 1/72 英寸)

pc

12 點活字 (1 pc 等于 12 點)px

像素 (計算機屏幕上的一個點)

顏色

單位

描述

(顏色名)

顏色名稱 (比如 red)

rgb(x,x,x)

RGB 值 (比如 rgb(255,0,0))

rgb(x%, x%, x%)

RGB 百分比值 (比如 rgb(100%,0%,0%))

#rrggbb

十六進制數 (比如 #ff0000)

參考：

-