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> 與 </html> 之間的文本描述網頁

  • <body> 與 </body> 之間的文本是可見的頁面內容

  • <h1> 與 </h1> 之間的文本被顯示爲標題

  • <p> 與 </p> 之間的文本被顯示爲段落 


HTML 標題

HTML 標題(Heading)是通過 <h1> - <h6> 等標籤進行定義的。

    超過的部分不顯示爲標題

Test:

<html>
	<body>
		<h1>My First Heading</h1>
		<h2>This is a heading </h2>
		<h3>This is a heading </h3>
		<!--支持1-6個-->
		<h12> What?</h12>	
		<p>My First paragraph</p>
		<p>My Sencong paragraph</p>
		<a href="http://www.baidu.com">This is a link</a>
		<!-- 壓縮而不是截取-->
		<img src="1.jpg" width="500" height="500">
		<img src="2.jpg" >
	</body>
</html>


HTML 元素語法

  • HTML 元素以開始標籤起始

  • HTML 元素以結束標籤終止

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

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

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

  • 大多數 HTML 元素可擁有屬性


嵌套的 HTML 元素

大多數 HTML 元素可以嵌套(可以包含其他 HTML 元素)。

HTML 文檔由嵌套的 HTML 元素構成。


空的 HTML 元素

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

<br> 就是沒有關閉標籤的空元素(<br> 標籤定義換行)。

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

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

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


HTML 提示:使用小寫標籤

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

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


HTML 屬性

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

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

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


HTML 提示:使用小寫屬性

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

不過,萬維網聯盟在其 HTML 4 推薦標準中推薦小寫的屬性/屬性值。

而新版本的 (X)HTML 要求使用小寫屬性。


始終爲屬性值加引號

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

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

name='Bill "HelloWorld" Gates'
<html>
	<!--背景色定義爲粉色-->
	<body bgcolor="pink">
		<!-- 設置標題顯示的位置,中左右-->
		<h1 align="center">My First Heading</h1>
		<h2 align="left">This is a heading </h2>
		<h3 align="right">This is a heading </h3>
		<!--支持1-6個-->
		<h12> What?</h12>	
		<p>My First paragraph</p>
		<p>My Sencong paragraph</p>
		
	</body>
</html>


HTML 標題

標題(Heading)是通過 <h1> - <h6> 等標籤進行定義的。

<h1> 定義最大的標題。<h6> 定義最小的標題。

瀏覽器會自動地在標題的前後添加空行。

默認情況下,HTML 會自動地在塊級元素前後添加一個額外的空行,比如段落、標題元素前後。


標題很重要

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

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

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

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


HTML 水平線

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

hr 元素可用於分隔內容。

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

<html>
	<!--背景色定義爲粉色-->
	<body bgcolor="pink">
		<!-- 設置標題顯示的位置,中左右-->
		<h1 align="center">My First Heading</h1>
		
		<hr/> <!--  此標籤用於插入一條橫線  -->

		<h2 align="left">This is a heading </h2>
		<hr/>
		<h3 align="right">This is a heading </h3>
		<!--支持1-6個-->
		<hr/>
		<h12> What?</h12>	
		<hr/>
		<p>My First paragraph</p>
		<hr/>
		<p>My Sencong paragraph</p>
		
	</body>
</html>

HTML 段落

段落是通過 <p> 標籤定義的。瀏覽器會自動地在段落的前後添加空行。(<p> 是塊級元素)

使用空的段落標記 <p></p> 去插入一個空行是個壞習慣。用 <br /> 標籤代替它

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

<html>
	<!--背景色定義爲粉色-->
	<body bgcolor="pink">
		<!-- 每一個br控制依次換行  -->
		<p>This<br/> is<br/> a<br/> HTML  </p>
		
	</body>
</html>


<br> 還是 <br />

您也許發現 <br> 與 <br /> 很相似。

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

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


HTML 輸出 - 有用的提示

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

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

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


HTML 超鏈接(鏈接)

超鏈接可以是一個字,一個詞,或者一組詞,也可以是一幅圖像,您可以點擊這些內容來跳轉到新的文檔或者當前文檔中的某個部分。

當您把鼠標指針移動到網頁中的某個鏈接上時,箭頭會變爲一隻小手。

我們通過使用 <a> 標籤在 HTML 中創建鏈接。

有兩種使用 <a> 標籤的方式:

  1. 通過使用 href 屬性 - 創建指向另一個文檔的鏈接

  2. 通過使用 name 屬性 - 創建文檔內的書籤


HTML 鏈接 - target 屬性

使用 Target 屬性,你可以定義被鏈接的文檔在何處顯示。

<html>
	<!--背景色定義爲粉色-->
	<body bgcolor="pink">
		<a href="http://baidu.com" target="_blank">BaiDu</a>
	</body>
</html>


HTML 鏈接 - name 屬性

name 屬性規定錨(anchor)的名稱。

您可以使用 name 屬性創建 HTML 頁面中的書籤。

書籤不會以任何特殊方式顯示,它對讀者是不可見的。

當使用命名錨(named anchors)時,我們可以創建直接跳至該命名錨(比如頁面中某個小節)的鏈接,這樣使用者就無需不停地滾動頁面來尋找他們需要的信息了。

提示:錨的名稱可以是任何你喜歡的名字。

提示:您可以使用 id 屬性來替代 name 屬性,命名錨同樣有效。


基本的注意事項 - 有用的提示:

註釋:請始終將正斜槓添加到子文件夾。假如這樣書寫鏈接:href="http://www.w3school.com.cn/html",就會向服務器產生兩次 HTTP 請求。這是因爲服務器會添加正斜槓到這個地址,然後創建一個新的請求,就像這樣:href="http://www.w3school.com.cn/html/"。

提示:命名錨經常用於在大型文檔開始位置上創建目錄。可以爲每個章節賦予一個命名錨,然後把鏈接到這些錨的鏈接放到文檔的上部。如果您經常訪問百度百科,您會發現其中幾乎每個詞條都採用這樣的導航方式。

提示:假如瀏覽器找不到已定義的命名錨,那麼就會定位到文檔的頂端。不會有錯誤發生。


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