HTML網(wǎng)頁(yè)制作常用標(biāo)簽及說明-前端開發(fā)入門

篇文章我們介紹了怎么創(chuàng)建一個(gè)最基本的網(wǎng)頁(yè)，這篇我們介紹一下經(jīng)常被使用的標(biāo)簽及用途。

顯示在瀏覽器中的內(nèi)容都要添加在基本模板中的body標(biāo)簽的中間，這點(diǎn)一定要記住！！

下面的body標(biāo)簽中各個(gè)標(biāo)簽，我做了解釋說明，大概了解各個(gè)標(biāo)簽長(zhǎng)什么樣子，能記住就更好了。

下面的HTML代碼可以直接復(fù)制到你的網(wǎng)頁(yè)中（創(chuàng)建HTML文件的方法上篇文章有介紹）

<!DOCTYPE html>

<head>

<title>這里是網(wǎng)頁(yè)的標(biāo)題，你看到在哪里顯示的了嗎？——橙先生</title>

</head>

<body>

<div>div標(biāo)簽可以理解為是個(gè)空盒子，什么都能裝下</div>

這是一張圖片，注意這里的img標(biāo)簽形式，這是個(gè)單標(biāo)簽

<a href="需要跳轉(zhuǎn)到的網(wǎng)址或是文件，如" target="_blank">這個(gè)是文字的鏈接，也可以在其他內(nèi)容上添加（比如圖片）</a>

<p>在這里填入文字</p>

<span>在這里添加你想要的內(nèi)容</span><span>!!!!!!這里是另外一段內(nèi)容</span>

<br>

<ul>

<li>這里是無序列表1</li>

<li>這里是無序列表2</li>

<li>這里是無序列表3</li>

</ul>

<ol>

<li>這里是有序列表1</li>

<li>這里是有序列表2</li>

</ol>

<table>

<tr>

<td>表格中第一行的第1列</td>

<td>表格中第一行的第2列</td>

</tr>

<tr>

<td>表格中第二行的第1列</td>

<td>表格中第二行的第2列</td>

<td>表格中第二行的第3列</td>

</tr>

</table>

</body>

</html>

上面的內(nèi)容已經(jīng)大致了解了吧？下一篇我們將介紹各種常用到的樣式，讓各個(gè)標(biāo)簽更加的美觀。記得關(guān)注一下哦！

覽器支持

所有主流瀏覽器都支持 <a> 標(biāo)簽。

標(biāo)簽定義及使用說明

<a> 標(biāo)簽定義超鏈接，用于從一個(gè)頁(yè)面鏈接到另一個(gè)頁(yè)面。

<a> 元素最重要的屬性是 href 屬性，它指定鏈接的目標(biāo)。

在所有瀏覽器中，鏈接的默認(rèn)外觀如下：

未被訪問的鏈接帶有下劃線而且是藍(lán)色的
已被訪問的鏈接帶有下劃線而且是紫色的
活動(dòng)鏈接帶有下劃線而且是紅色的

提示和注釋

提示：如果沒有使用 href 屬性，則不能使用 hreflang、media、rel、target 以及 type 屬性。

提示：通常在當(dāng)前瀏覽器窗口中顯示被鏈接頁(yè)面，除非規(guī)定了其他 target。

提示：請(qǐng)使用 CSS 來改變鏈接的樣式。

HTML 4.01 與 HTML5之間的差異

在 HTML 4.01 中，<a> 標(biāo)簽既可以是超鏈接，也可以是錨。在 HTML5 中，<a> 標(biāo)簽是超鏈接，但是假如沒有 href 屬性，它僅僅是超鏈接的一個(gè)占位符。

HTML5 有一些新的屬性，同時(shí)不再支持一些 HTML 4.01 的屬性。

屬性

New ：HTML5 中的新屬性。

屬性	值	描述
charset	char_encoding	HTML5 不支持。規(guī)定目標(biāo) URL 的字符編碼。
coords	coordinates	HTML5 不支持。規(guī)定鏈接的坐標(biāo)。
downloadNew	filename	指定下載鏈接
href	URL	規(guī)定鏈接的目標(biāo) URL。
hreflang	language_code	規(guī)定目標(biāo) URL 的基準(zhǔn)語(yǔ)言。僅在 href 屬性存在時(shí)使用。
mediaNew	media_query	規(guī)定目標(biāo) URL 的媒介類型。默認(rèn)值：all。僅在 href 屬性存在時(shí)使用。
name	section_name	HTML5 不支持。規(guī)定錨的名稱。
rel	alternateauthorbookmarkhelplicensenextnofollownoreferrerprefetchprevsearchtag	規(guī)定當(dāng)前文檔與目標(biāo) URL 之間的關(guān)系。僅在 href 屬性存在時(shí)使用。
rev	text	HTML5 不支持。規(guī)定目標(biāo) URL 與當(dāng)前文檔之間的關(guān)系。
shape	defaultrectcirclepoly	HTML5 不支持。規(guī)定鏈接的形狀。
target	_blank_parent_self_topframename	規(guī)定在何處打開目標(biāo) URL。僅在 href 屬性存在時(shí)使用。
typeNew	MIME_type	規(guī)定目標(biāo) URL 的 MIME 類型。僅在 href 屬性存在時(shí)使用。注：MIME = Multipurpose Internet Mail Extensions。

全局屬性

<a> 標(biāo)簽支持 HTML 的全局屬性。

事件屬性

<a> 標(biāo)簽支持 HTML 的事件屬性。

創(chuàng)建超級(jí)鏈接

本例演示如何在 HTML 文檔中創(chuàng)建鏈接。

將圖像作為鏈接

本例演示如何使用圖像作為鏈接。

在新的瀏覽器窗口打開鏈接

本例演示如何在新窗口打開一個(gè)頁(yè)面，這樣的話訪問者就無需離開您的站點(diǎn)了。

創(chuàng)建電子郵件鏈接

本例演示如何鏈接到一個(gè)郵件。（本例在安裝郵件客戶端程序后才能工作。）

創(chuàng)建電子郵件鏈接 2

本例演示更加復(fù)雜的郵件鏈接。

使用錨跳轉(zhuǎn)到同一個(gè)頁(yè)面的不同位置

本例演示如何使用錨的 id 屬性跳轉(zhuǎn)到頁(yè)面的不同位置（ HTML5 不支持 name 屬性）

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

例

以下代碼標(biāo)記了一個(gè)段落：

瀏覽器支持

目前大多數(shù)瀏覽器支持 <p>標(biāo)簽。

標(biāo)簽定義及使用說明

<p> 標(biāo)簽定義段落。

<p>元素會(huì)自動(dòng)在其前后創(chuàng)建一些空白。瀏覽器會(huì)自動(dòng)添加這些空間，您也可以在樣式表中規(guī)定。

在HTML 4.01 與 HTML5中的差異

HTML 4.01中標(biāo)簽的 align 屬性已經(jīng)廢棄，HTML5不支持該屬性。

屬性

屬性	值	描述
align	leftrightcenterjustify	HTML5不支持。 HTML 4.01已廢棄。不贊成使用。請(qǐng)使用樣式取代它。規(guī)定段落中文本的對(duì)齊方式。

全局屬性

<p> 標(biāo)簽支持全局屬性，查看完整屬性表 HTML全局屬性。

事件屬性

<p> 標(biāo)簽支持所有 HTML事件屬性。

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

在線咨詢

上一篇：cookie竊取和session劫持
下一篇：CSS-中英文兩端對(duì)齊，英文不斷詞，自動(dòng)換行

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

HTML網(wǎng)頁(yè)制作常用標(biāo)簽及說明-前端開發(fā)入門

您的項(xiàng)目需求