html標籤列表html text標籤

什麼是HTML 標籤Tag - HTML 語法教學Tutorial - Fooish 程式技術

文章推薦指數： 80 %
投票人數：10人

包圍住的HTML 元素(HTML element)，不同的HTML 標籤包圍著表示不同語意(semantic) 內容的區塊，而瀏覽器(web browser) 懂得如何解讀HTML 標籤 ... HTML語法教學HTML編輯器什麼是HTML標籤HTMLDOCTYPEHTMLHTML全域屬性HTML註解HTML

HTML網頁標題HTML<meta>元資訊HTML<style>CSSHTML<link>HTML<script>JSHTML<noscript>HTML<base>HTML<body>HTML<p>段落HTML<br>換行HTML空白字元HTML<img>圖片HTML<a>超連結HTML<h1>-<h6>標題HTML項目列表清單HTML<table>表格HTML<form>表單HTML<input>表單元件HTML<textarea>HTML<select>下拉式選單HTML<button>表單按鈕HTML<label>HTML<fieldset><legend>HTML<div>HTML<span>HTML<strong>強調重要性HTML<em>對內容著重強調HTML<mark>突顯高亮文字HTML<hr>水平分隔線HTML<iframe>內嵌框架HTML<frame>框架HTML<embed>嵌入HTML<object>嵌入HTML<blockquote>區塊引用文字HTML<q>行內引用文字HTML<pre>預先格式化HTML<code>程式碼HTML<ins>插入的文字HTML<del>刪除的文字HTML<center>置中什麼是HTML5HTML<video>影片播放HTML<audio>音樂播放HTML語意結構區塊HTML<nav>導航連結區塊HTML<article>內容獨立完整的區塊HTML<section>群組區塊HTML<aside>側邊欄HTML<main>網頁主要區塊HTML<header>標頭/標題區塊HTML<footer>結尾/頁尾區塊HTML<datalist>輸入資料選擇清單HTML<figure><figcaption>HTML<hgroup>多級別標題群組HTML<canvas>繪圖畫布HTML<picture>響應式圖片HTML<output>HTML標籤(Tag)一份HTML文件(HTMLdocument)是由一堆標籤(tag)結構所組成，所謂的標籤是一個個用尖括弧<tagname>...</tagname>包圍住的HTML元素(HTMLelement)，不同的HTML標籤包圍著表示不同語意(semantic)內容的區塊，而瀏覽器(webbrowser)懂得如何解讀HTML標籤來呈現最終的網頁畫面。<br><br>HTML標籤僅用來表達HTML文件的結構和區分不同的內容語意，標籤本身不會被顯示在頁面上喔。<br><br>HTML文件本質上只是純文字檔案，一份HTML文件會長得像這樣子：<!DOCTYPEhtml> <html> <head> <title>網頁標題

這是一級標題

這是一個段落

從上面HTML文件可以發現，每一個HTML標籤包圍的內容中，可以再包含其他的HTML標籤，所以說HTML文件的結構是屬於一種階層樹狀(巢狀)的結構：+-------+ |html| +---+---+ | +--------+------+ || +--+---++---+--+ |head||body| +--+---++---+--+ || +---+---++----+----+ |title||| +-------++---+--++--+--+ |h1||p| +---+--++--+--+ || texttext 其中DOCTYPE,,,是每份HTML文件中都會用到的標籤。

HTML元素(Element)我們用不同的HTML標籤來描述一個網頁裡面不同的區塊中的內容及語意，例如描述一段文字、一個標題、一張圖片、一部影片或一個超連結等。

例如下面這段文字：Mycatisverycute. 如果我們想讓它自成一個段落，那麼可以在它前後分別加上段落標籤

，它就變成一個段落元素(HTMLparagraphelement)了：

Mycatisverycute.

我們再繼續來說明清楚「標籤」、「內容」和「元素」這幾個名詞實際上分別是指什麼？標籤(Tag)：完整的標籤包含：起始標籤(openingtag)：也就是一對尖括弧<>裡面再放入元素名稱，如上面例子的名稱p表示段落元素

，起始標籤代表這個HTML元素從這裡開始。

結束標籤(closingtag)：與起始標籤寫法一樣，只是在元素名稱前面多了個斜線/，結束標籤代表這個HTML元素的尾端，如上面例子的

表示段落元素的結尾。

內容(Content)：標籤中間包圍的就是這個元素的內容，以上面的例子來說，內容就是Mycatisverycute.這一句文字。

元素(Element)：起始標籤+內容+結束標籤所組成的區塊我們稱之為一個HTML元素，

Mycatisverycute.

這一整串就表示一個HTML段落元素。

巢狀元素(NestingElement)前面有提到HTML文件結構是一種巢狀結構，而HTML元素裡面可以放進其他的HTML元素，我們稱之為巢狀元素(nestingelement)。

例如下面這個句子：

Mycatisverycute.

如果我們想"強調"verycute，我們可以把verycute這幾個字加上強調的strong標籤(在瀏覽器中會被顯示為粗體字)：

Mycatisverycute.

在瀏覽器中呈現的結果如下：Mycatisverycute.要特別注意，巢狀標籤是一層接著一層的包覆，不同層的起始和結束標籤間不可以互相錯置。

例如下面的寫法是錯誤的：

Mycatisverycute.

因為strong標籤是被用在p元素的內容中，所以整個strong元素包含它的起始和結束標籤，都必須「被包」在p標籤裡面，才能形成一個正確的巢狀關係。

空元素(EmptyElement/VoidElement)有些HTML元素是不允許有內容的，我們稱之為空元素。

此外，空元素是沒有結束標籤的元素，像是圖片元素，例如我們可以用img標籤來顯示一張圖片： 我們用img標籤的src屬性來指定圖檔的所在位址，但img元素本身沒有結束標籤，也沒有裡面的內容，因為圖片元素是直接把圖檔嵌在HTML網頁上。

有時候我們也稱空元素的標籤為自閉合標籤(Self-closingTag)。

HTML標籤屬性(Attribute)HTML標籤中還有所謂的屬性(Attribute)，屬性是用來提供該標籤的額外資訊，屬性出現在起始標籤中，語法如下： 一個屬性是由屬性名稱、等號以及用雙引號包住的屬性值所組成，不同的屬性則是用空格分隔開。

像是前面提到的例子，其中src就是img的屬性。

其實，屬性值你可以用雙引號(doublequotes"")也可以用單引號(singlequotes'')來包住，單雙引號對HTML屬性值是沒有差別的。

這特性也可以被利用在如果屬性值中有引號，例如這樣寫會造成瀏覽器解讀錯誤，誤將value當作是空的，但你可以改成這樣寫就不會錯了。

HTML英文字大小寫有差別嗎？HTML的「標籤名稱」或「屬性名稱」的寫法是英文大小寫都可以(caseinsensitive)，但常見且建議是固定使用小寫(lowercase)。

推薦的標準寫法不推薦這種寫法HTML標籤可以換行嗎？標籤名稱、屬性名稱和屬性質之間的多餘空白或換行會被瀏覽器忽略，你可以用這個特性來做HTMLcode的編排，讓HTML程式碼比較容易閱讀。

例如： 和下面這樣子寫是一樣的： 但注意雙引號間的屬性值不能亂空白，標籤名稱或屬性名稱之間也不能亂空白，像下面這個就是錯誤的語法：

請為這篇文章評分？

延伸文章資訊