HTML定義的標(biāo)簽很多,下面對(duì)常用標(biāo)簽進(jìn)行說明,隨著學(xué)習(xí)不斷深入,相信會(huì)逐步掌握在網(wǎng)頁(yè)設(shè)計(jì)時(shí)HTML所有標(biāo)簽的用法和使用技巧。
1、文檔基本標(biāo)簽在網(wǎng)站建設(shè)時(shí)主要用來標(biāo)識(shí)文檔的基本結(jié)構(gòu),也是網(wǎng)頁(yè)設(shè)計(jì)中一個(gè)網(wǎng)頁(yè)文檔應(yīng)該使用的基本標(biāo)簽。
?<!DOCTYPE>:定義文檔類型。
?<html>:定義HTML文檔。
?<head>:定義關(guān)于文檔的信息。
?<meta>:定義關(guān)于HTML文檔的元信息。
?<title>:定義文檔的標(biāo)題。
?<body>:定義文檔的主體。
?<h1>…<h6>:定義HTML標(biāo)題。
?<p>:定義段落。
?<br>:定義簡(jiǎn)單的折行。
?<hr>:定義水平線。
?<!--...-->:定義注釋。
2. 格式標(biāo)簽格式標(biāo)簽主要用來標(biāo)識(shí)文本區(qū)塊,并附帶一定的顯示格式。
?<acronym>:定義首字母縮寫。
?<abbr>:定義縮寫。
?<address>:定義文檔作者或擁有者的聯(lián)系信息。
?<b>:定義粗體文本。
?<bdi>:定義文本的文本方向,使其脫離其周圍文本的方向設(shè)置。
?<bdo>:定義文字方向。
?<big>:定義大號(hào)文本。
?<blockquote>:定義塊引用。
?<cite>:定義引用(citation)的源URL。
?<code>:定義計(jì)算機(jī)代碼文本。
?<del>:定義被刪除文本。
?<dfn>:定義定義項(xiàng)目。
?<em>:定義強(qiáng)調(diào)文本。
?<i>:定義斜體文本。
?<ins>:定義被插入文本。
?<kbd>:定義鍵盤文本。
?<mark>:定義有記號(hào)的文本。
?<meter>:定義預(yù)定義范圍內(nèi)的度量。
?<pre>:定義預(yù)格式文本。
?<progress>:定義任何類型的任務(wù)的進(jìn)度。
?<q>:定義短的引用。
?<rp>:定義若瀏覽器不支持ruby元素顯示的內(nèi)容。
?<rt>:定義ruby注釋的解釋。
?<ruby>:定義ruby注釋。
?<samp>:定義計(jì)算機(jī)代碼樣本。
?<small>:定義小號(hào)文本。
?<strong>:定義語(yǔ)氣更為強(qiáng)烈的強(qiáng)調(diào)文本。
?<sup>:定義上標(biāo)文本。
?<sub>:定義下標(biāo)文本。
?<time>:定義日期/時(shí)間。
?<tt>:定義打字機(jī)文本。
?<var>:定義文本的變量部分。
?<wbr>:定義視頻。
【示例1】啟動(dòng)Dreamweaver,新建文檔,保存為test.html。在代碼視圖下輸入下面代碼,分別使用<h1>和<p>標(biāo)簽標(biāo)識(shí)網(wǎng)頁(yè)標(biāo)題和段落文本。
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>示例代碼</title>
</head>
<body>
<h1>文本格式標(biāo)簽</h1><p>& lt;p& gt;標(biāo)簽標(biāo)識(shí)段落文本</p>
</body>
</html>
【示例2】使用Dreamweaver新建文檔,保存為test1.html。輸入下面代碼,分別使用各種字符格式標(biāo)簽顯示一個(gè)數(shù)學(xué)方程式的解法。
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8" />
<title>示例代碼</title>
</head><body>
<p>例如,針對(duì)下面這個(gè)一元二次方程:</p><p><i>x</i><sup>2</sup>-<b>5</b><i>x</i>+<b>4</b>=0</p>
<p>我們使用<big><b>分解因式法</b></big>來演示解題思路如下:</p>
<p><small>由:</small>(<i>x</i>-1)(<i>x</i>-4)=0</p>
<p><small>得:</small><br /><i>x</i><sub>1</sub>=1<br /> <i>x</i><sub>2</sub>=4</p>
</body>
</html>
3. 列表標(biāo)簽
在HTML文檔中,列表結(jié)構(gòu)可以分為兩種類型:有序列表和無序列表。無序列表使用項(xiàng)目符號(hào)來標(biāo)識(shí)列表,而有序列表則使用編號(hào)來標(biāo)識(shí)列表的項(xiàng)目順序。具體使用標(biāo)簽說明如下。
?<ul>:定義無序列表。
?<ol>:定義有序列表。
?<li>:定義列表的項(xiàng)目。
?<dl>:定義定義列表。
?<dt>:定義定義列表中的項(xiàng)目。
?<dd>:定義定義列表中項(xiàng)目的描述。
?<menu>:定義命令的菜單/列表。
?<menuitem>:定義用戶可以從彈出菜單調(diào)用的命令/菜單項(xiàng)目。
?<command>:定義命令按鈕。
【示例3】使用Dreamweaver新建文檔,保存為test2.html。輸入下面代碼,使用無序列表分別顯示了一元二次方程求解有4種方法。
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>示例代碼</title></head><body><h1>解一元二次方程</h1>
<p>一元二次方程求解有4種方法:</p>
<ul>
<li>直接開平方法 </li>
<li>配方法 </li>
<li>公式法 </li>
<li>分解因式法</li>
</ul>
</body>
</html>
按F12鍵,在瀏覽器中預(yù)覽。
4. 鏈接標(biāo)簽
鏈接標(biāo)簽可以實(shí)現(xiàn)把多個(gè)網(wǎng)頁(yè)聯(lián)系在一起。
?<a>:定義錨。
?<link>:定義文檔與外部資源的關(guān)系。
?<nav>:定義導(dǎo)航鏈接。
【示例5】新建文檔,保存為test4.html。輸入下面代碼,使用<a>標(biāo)簽定義一個(gè)超鏈接,單擊該超鏈接可以跳轉(zhuǎn)到百度首頁(yè)。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>示例代碼</title>
</head>
<body><a href="http://www.baidu.com/">去百度搜索</a>
</body>
</html>