首頁  >  文章  >  web前端  >  什麼是HTML檔? HTML檔案的初步認識

什麼是HTML檔? HTML檔案的初步認識

寻∝梦
寻∝梦原創
2018-08-13 19:28:064830瀏覽

這是一篇HTML5入門教程,為了讓更多的初學者找到正確的方向,所以這篇文章都是關於初學者如何系統的學習HTML5。

1.什麼是HTML檔?

TML的英文全名為Hypertext Marked Language,中文叫做「超文本標記語言」。

和一般文本的不同的是,一個HTML檔案不僅包含文字內容,還包含一些Tag,中文稱為「標記」。

一個HTML檔案的後綴名是.htm或是.html。

用文字編輯器就可以寫HTML檔。

2.寫一個HTML檔

TML的英文全名是Hypertext Marked Language,中文叫做「超文本標記語言」。

和一般文本的不同的是,一個HTML檔案不僅包含文字內容,還包含一些Tag,中文稱為「標記」。

一個HTML檔案的後綴名是.htm或是.html。

用文字編輯器就可以寫HTML檔。

<html>
<head>
<title>PHP中文网</title>
</head>
<body>
This is my first homepage.<b>This text is bold</b> 
</body>
</html>

要瀏覽這個first.html文件,雙擊它。或是開啟瀏覽器,在File選單選擇Open,然後選擇這個檔案就行了。

這個檔案的第一個Tag是100db36a723c770d327fc0aef2ce13b1,這個Tag告訴你的瀏覽器這是HTML檔案的頭。檔案的最後一個Tag是73a6ac4ed44ffec12cee46588e518a5e,表示HTML檔案到此結束。

在93f0f5c25f18dab9d176bd4f6de5d30e和9c3bca370b5104690d9ef395f2c5f8d1之間的內容,是Head訊息。 Head資訊是不顯示出來的,你在瀏覽器裡看不到。但這並不表示這些資訊沒有用處。例如你可以在Head資訊裡加上一些關鍵字,有助於搜尋引擎能夠搜尋到你的網頁。

在b2386ffb911b14667cb8f0f91ea547a7和6e916e0f7d1e588d4f442bf645aedb2f之間的內容,是這個文件的標題。你可以在瀏覽器最頂端的標題列看到這個標題。

在6c04bd5ca3fcae76e30b72ad730ca86d和36cc49f0c466276486e50c850b7e4956之間的訊息,是正文。

在a4b561c25d9afb9ac8dc4d70affff419和0d36329ec37a2cc24d42c7229b69747a之間的文字,用粗體表示。 a4b561c25d9afb9ac8dc4d70affff419顧名思義,就是bold的意思。

HTML檔案看起來和一般文字類似,但是它比一般文字多了Tag,例如100db36a723c770d327fc0aef2ce13b1,a4b561c25d9afb9ac8dc4d70affff419等,透過這些Tag,可以告訴瀏覽器如何顯示這個檔案。

HTML元素(HTML Elements) 

#HTML元素(HTML Element)用來標記文本,表示文本的內容。例如body, p, title就是HTML元素。

HTML元素以Tag表示,Tag以1a5f43396fae44f5dd50bcc6410610af結束。

Tag通常是成對出現的,像是6c04bd5ca3fcae76e30b72ad730ca86d36cc49f0c466276486e50c850b7e4956。起始的叫做Opening Tag,結尾的叫做Closing Tag。

目前HTML的Tag不區分大小寫的。例如,6a74014ee44f5deb5894267f99b68016和100db36a723c770d327fc0aef2ce13b1其實是相同的。

HTML元素(HTML Elements)的屬性

HTML元素可以擁有屬性。屬性可以擴充HTML元素的能力。

例如你可以使用一個bgcolor屬性,使得頁面的背景色變成紅色,就像這樣:

92962793ac34b1f09f58f6d8986d1fcf

再例如,你可以使用border這個屬性,將一個表格設為一個無邊框的表格。如下:

f84490d123efd8a351a823d52d870118

屬性通常由屬性名稱和值成對出現,就像這樣:name="value"。上面範例中的bgcolor, border就是name,red和0就是value。屬性值一般用雙引號標記起來。 屬性通常是附加給HTML的Opening Tag,而不是Closing Tag。

正文標題 

這個範例告訴你如何在HTML檔案裡定義正文標題。 

HTML用4a249f0d628e2318394fd9b75b4636b1到4e9ee319e0fa4abc21ff286eeb145ecc這幾個Tag來定義正文標題,從大到小。每個正文標題自成一段。 

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3> 
<h4>This is a heading</h4> 
<h5>This is a heading</h5> 
<h6>This is a heading</h6>

段落分割

在HTML裡用e388a4556c0f65e1904146cc1a846bee和94b3e26ee717c64999d7867364b1b4a3分割段落。

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

換行

透過使用0c6dc11e160d3b678d68754cc175188a這個Tag,可以在不新建段落的情況下換行。 0c6dc11e160d3b678d68754cc175188a沒有Closing Tag。 用e388a4556c0f65e1904146cc1a846bee換行是個壞習慣,正確的是使用0c6dc11e160d3b678d68754cc175188a。

e388a4556c0f65e1904146cc1a846beeThis0c6dc11e160d3b678d68754cc175188ais a para0c6dc11e160d3b678d68754cc175188agraph with line breaks94b3e26ee717c64999d7867364b1b4a3

##HTML註解

#在HTML

#HTML註解

#在HTML文件裡,你可以寫程式碼註釋,解釋說明你的程式碼,這有助於你和他人日後更能理解你的程式碼。

註解可以寫在f69bf4a9fcda7e39ab7680cbdd8ba73f之間。瀏覽器是忽略註解的,你不會在HTML正文中看到你的註解。 

<!--This is a comment -->

一些小建議

HTML檔案會自動截去多餘的空格。不管你加多少空格,都被看做一個空格。一個空行也被看做一個空格。

有些Tag能夠將文字自成一段,而不需要使用e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3來分段。例如4a249f0d628e2318394fd9b75b4636b1473f0a7621bec819994bb5020d29372a之類的標題Tag。
【相關推薦】

######HTML與HTML5的發展史#########

html的基礎元素,讓你零基礎學習HTML

以上是什麼是HTML檔? HTML檔案的初步認識的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn