HTML學習記錄(一)

一.HTML基礎

什麼是 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 標籤,而是使用標籤來解釋頁面的內容:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  
   <body>
   <h1>我的第一個標題</h1>
   <p>我的第一個段落。</p>
   <a href="http://www.w3school.com.cn">
   This is a link</a>
   
   </body>
  
 </head>
</html>

< html > 與 < /html > 之間的文本描述網頁
< body > 與 < /body > 之間的文本是可見的頁面內容
< h1 > 與 < /h1 > 之間的文本被顯示爲標題
< p > 與 < /p > 之間的文本被顯示爲段落

四個實例

1.HTML 標題(Heading)是通過 < h1 > - < h6 > 等標籤進行定義的。
2.HTML 段落是通過 < p > 標籤進行定義的。
3.HTML 鏈接是通過 < a > 標籤進行定義的。

<a href="http://www.w3school.com.cn">This is a link</a>

註釋:在 href 屬性中指定鏈接的地址。
4.HTML 圖像是通過 < img > 標籤進行定義的。

<img src="w3school.jpg" width="104" height="142" />

二.HTML元素

HTML 文檔是由 HTML 元素定義的。
HTML 元素指的是從開始標籤(start tag)到結束標籤(end tag)的所有代碼。
在這裏插入圖片描述

HTML元素語法

1.HTML 元素以開始標籤起始
2.HTML 元素以結束標籤終止
3.元素的內容是開始標籤與結束標籤之間的內容
4.某些 HTML 元素具有空內容(empty content)
5.空元素在開始標籤中進行關閉(以開始標籤的結束而結束)
6.大多數 HTML 元素可擁有屬性

嵌套的 HTML 元素

大多數 HTML 元素可以嵌套(可以包含其他 HTML 元素)。
HTML 文檔由嵌套的 HTML 元素構成。

<html>

<body>
<p>This is my first paragraph.</p>
</body>

</html>

< body > 元素定義了 HTML 文檔的主體。

這個元素擁有一個開始標籤 < body >,以及一個結束標籤 < /body >。

元素內容是另一個 HTML 元素(p 元素)。

空的 HTML 元素

沒有內容的 HTML 元素被稱爲空元素。空元素是在開始標籤中關閉的。
< br > 就是沒有關閉標籤的空元素(< br > 標籤定義換行)。

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

在開始標籤中添加斜槓,比如 < br / >,是關閉空元素的正確方法,HTML、XHTML 和 XML 都接受這種方式。

即使 < br > 在所有瀏覽器中都是有效的,但使用 < br / > 其實是更長遠的保障。

三.HTML屬性

HTML 標籤可以擁有屬性。屬性提供了有關 HTML 元素的更多的信息。

屬性總是以名稱/值對的形式出現,比如:name=“value”。

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

實例

TML 鏈接由 < a > 標籤定義。鏈接的地址在 href 屬性中指定:

<a href="http://www.w3school.com.cn">This is a link</a>

< h1 > 定義標題的開始。居中排列標題

<h1 align='center'>This is heading1</h1>

< body > 定義 HTML 文檔的主體。將背景變成黃色

<body bgcolor="yellow">

始終爲屬性值加引號

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

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

name='Bill "HelloWorld" Gates'

HTML屬性參考手冊

四. HTML標題

標題(Heading)是通過 < h1 > - < h6 > 等標籤進行定義的。
< h1 > 定義最大的標題。< h6 > 定義最小的標題。
註釋:瀏覽器會自動地在標題的前後添加空行。
註釋:默認情況下,HTML 會自動地在塊級元素前後添加一個額外的空行,比如段落、標題元素前後。

標題很重要

請確保將 HTML heading 標籤只用於標題。不要僅僅是爲了產生粗體或大號的文本而使用標題。

搜索引擎使用標題爲您的網頁的結構和內容編制索引。

因爲用戶可以通過標題來快速瀏覽您的網頁,所以用標題來呈現文檔結構是很重要的。

應該將 h1 用作主標題(最重要的),其後是 h2(次重要的),再其次是 h3,以此類推。

HTML 水平線

< hr / > 標籤在 HTML 頁面中創建水平線。

hr 元素可用於分隔內容。
使用水平線 (< hr > 標籤) 來分隔文章中的小節是一個辦法(但並不是唯一的辦法)。

<p>This is a paragraph</p>
<hr />

HTML 註釋

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

註釋是這樣寫的:

<!-- This is a comment -->

五.HTML段落

可以把 HTML 文檔分割爲若干段落。

段落是通過 < p > 標籤定義的。
使用空的段落標記 < p >< /p > 去插入一個空行是個壞習慣。用 < br /> 標籤代替它!(但是不要用 < br /> 標籤去創建列表。

HTML 折行

如果希望在不產生一個新段落的情況下進行換行(新行),請使用 < br /> 標籤:

<p>This is<br />a para<br />graph with line breaks</p>

< br > 還是 < br />

< br /> 元素是一個空的 HTML 元素。由於關閉標籤沒有任何意義,因此它沒有結束標籤。
您也許發現

很相似。

在 XHTML、XML 以及未來的 HTML 版本中,不允許使用沒有結束標籤(閉合標籤)的 HTML 元素。

即使 < br > 在所有瀏覽器中的顯示都沒有問題,使用 < br / > 也是更長遠的保障。

HTML 輸出 - 有用的提示

我們無法確定 HTML 被顯示的確切效果。屏幕的大小,以及對窗口的調整都可能導致不同的結果。

對於 HTML,您無法通過在 HTML 代碼中添加額外的空格或換行來改變輸出的效果。

當顯示頁面時,瀏覽器會移除源代碼中多餘的空格和空行。所有連續的空格或空行都會被算作一個空格。需要注意的是,HTML 代碼中的所有連續的空行(換行)也被顯示爲一個空格。

階段效果圖

在這裏插入圖片描述

在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章