網(wǎng)頁(yè)設計中的HTML標簽(一)

  • 2019-07-11 15:13:14
  • 閱讀次數:次
  • 作者:盈嵐科技小編
  • 來(lái)源:http://amzcoolest.com

HTML定義的標簽很多,下面對常用標簽進(jìn)行說(shuō)明,隨著(zhù)學(xué)習不斷深入,相信會(huì )逐步掌握在網(wǎng)頁(yè)設計時(shí)HTML所有標簽的用法和使用技巧。

1、文檔基本標簽在網(wǎng)站建設時(shí)主要用來(lái)標識文檔的基本結構,也是網(wǎng)頁(yè)設計中一個(gè)網(wǎng)頁(yè)文檔應該使用的基本標簽。 

?<!DOCTYPE>:定義文檔類(lèi)型。

?<html>:定義HTML文檔。   

?<head>:定義關(guān)于文檔的信息。   

?<meta>:定義關(guān)于HTML文檔的元信息。   

?<title>:定義文檔的標題。   

?<body>:定義文檔的主體。   

?<h1>…<h6>:定義HTML標題。   

?<p>:定義段落。   

?<br>:定義簡(jiǎn)單的折行。   

?<hr>:定義水平線(xiàn)。   

?<!--...-->:定義注釋。


2. 格式標簽格式標簽主要用來(lái)標識文本區塊,并附帶一定的顯示格式。   

?<acronym>:定義首字母縮寫(xiě)。   

?<abbr>:定義縮寫(xiě)。

?<address>:定義文檔作者或擁有者的聯(lián)系信息。   

?<b>:定義粗體文本。   

?<bdi>:定義文本的文本方向,使其脫離其周?chē)谋镜姆较蛟O置。  

?<bdo>:定義文字方向。   

?<big>:定義大號文本。  

?<blockquote>:定義塊引用。   

?<cite>:定義引用(citation)的源URL。   

?<code>:定義計算機代碼文本。   

?<del>:定義被刪除文本。   

?<dfn>:定義定義項目。   

?<em>:定義強調文本。   

?<i>:定義斜體文本。   

?<ins>:定義被插入文本。   

?<kbd>:定義鍵盤(pán)文本。   

?<mark>:定義有記號的文本。

?<meter>:定義預定義范圍內的度量。   

?<pre>:定義預格式文本。   

?<progress>:定義任何類(lèi)型的任務(wù)的進(jìn)度。   

?<q>:定義短的引用。   

?<rp>:定義若瀏覽器不支持ruby元素顯示的內容。   

?<rt>:定義ruby注釋的解釋。   

?<ruby>:定義ruby注釋。   

?<samp>:定義計算機代碼樣本。   

?<small>:定義小號文本。   

?<strong>:定義語(yǔ)氣更為強烈的強調文本。   

?<sup>:定義上標文本。  

?<sub>:定義下標文本。   

?<time>:定義日期/時(shí)間。   

?<tt>:定義打字機文本。   

?<var>:定義文本的變量部分。   

?<wbr>:定義視頻。

【示例1】啟動(dòng)Dreamweaver,新建文檔,保存為test.html。在代碼視圖下輸入下面代碼,分別使用<h1>和<p>標簽標識網(wǎng)頁(yè)標題和段落文本。

<html>

<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>示例代碼</title>

</head>

<body>

<h1>文本格式標簽</h1><p>& lt;p& gt;標簽標識段落文本</p>

</body>

</html>

【示例2】使用Dreamweaver新建文檔,保存為test1.html。輸入下面代碼,分別使用各種字符格式標簽顯示一個(gè)數學(xué)方程式的解法。

<html>

<head>

<meta http-equiv="Content-Type" 

content="text/html; charset=utf-8" />

<title>示例代碼</title>

</head><body>

<p>例如,針對下面這個(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>來(lái)演示解題思路如下:</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. 列表標簽

在HTML文檔中,列表結構可以分為兩種類(lèi)型:有序列表和無(wú)序列表。無(wú)序列表使用項目符號來(lái)標識列表,而有序列表則使用編號來(lái)標識列表的項目順序。具體使用標簽說(shuō)明如下。   

?<ul>:定義無(wú)序列表。   

?<ol>:定義有序列表。   

?<li>:定義列表的項目。   

?<dl>:定義定義列表。   

?<dt>:定義定義列表中的項目。   

?<dd>:定義定義列表中項目的描述。   

?<menu>:定義命令的菜單/列表。   

?<menuitem>:定義用戶(hù)可以從彈出菜單調用的命令/菜單項目。   

?<command>:定義命令按鈕。

【示例3】使用Dreamweaver新建文檔,保存為test2.html。輸入下面代碼,使用無(wú)序列表分別顯示了一元二次方程求解有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>直接開(kāi)平方法 </li>

    <li>配方法 </li>

    <li>公式法 </li>

    <li>分解因式法</li>

</ul>

</body>

</html>

按F12鍵,在瀏覽器中預覽。


4. 鏈接標簽

鏈接標簽可以實(shí)現把多個(gè)網(wǎng)頁(yè)聯(lián)系在一起。   

?<a>:定義錨。   

?<link>:定義文檔與外部資源的關(guān)系。   

?<nav>:定義導航鏈接。

【示例5】新建文檔,保存為test4.html。輸入下面代碼,使用<a>標簽定義一個(gè)超鏈接,單擊該超鏈接可以跳轉到百度首頁(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>

當前文章標題:網(wǎng)頁(yè)設計中的HTML標簽(一)

當前URL:http://amzcoolest.com/news/wzzz/3050.html

上一篇:網(wǎng)頁(yè)設計中的HTML基本語(yǔ)法

下一篇:網(wǎng)頁(yè)設計中的HTML標簽(二)

網(wǎng)站建設、網(wǎng)絡(luò )營(yíng)銷(xiāo)咨詢(xún)專(zhuān)線(xiàn):181-8386-5875(點(diǎn)擊可一鍵撥號)
亚洲精品无码mv在线|新国产精品视频福利免费|日韩高清在线观看不卡一区二区|一本久久a久久精品免费不|亚洲私人无码内射免费观看