HTML定義<h1></h1>到<h6></h6>六個<h>標籤,分別用來不同大小字體的標題(Heading)。字體由大到小,<h1>最大,<h6>則最小。
Heading標籤需要注意的是:a.瀏覽器會自動地在標題的前後添加空行。因為Heading標籤屬於塊級元素,而在默認情況下,HTML 會自動地在塊級元素前後添加一個額外的空行(<br/>)。 b.標題對整個頁面來說很重要,應該將HTML heading 標籤只用於標題,而不要僅僅是為了產生粗體或大號的文本而使用標題。因為Heading標籤對SEO是很友好的,搜索引擎使用標題為您的網頁的結構和內容編制索引,而且用戶則以通過標題來快速瀏覽您的網頁,所以用標題來呈現文檔結構是很重要的。應該將<h1> 用作主標題(最重要的),其後是<h2>(次重要的),再其次是<h3>,以此類推。
<!--<h>標籤是設置標題的,把重要的信息放在<h1>裡面,搜索引擎會優先搜索--> <h1> 中國一</h1> <h2> 中國二</h2> <h3> 中國三</h3> <h4> 中國四</h4> <h5> 中國五</h5> <h6> 中國六</h6>
效果如下圖,字體大小由大到小:
2.換行<br/>、不換行<nobr></nobr>和分段<p></p>關於HTML中的換行標籤<br/>和分段標籤<p></p>的區別是,換行標籤<br/>只是回車,<p></p>則是分段。因為<p>標籤屬於塊級元素,它的前後會有比較大的空白(自動添加<br/>),而<br/>標籤屬於行級元素,它只是簡單的換行,前後沒有空白。有一個與<br/>相對的標籤<nobr></nobr>,它表示不換行,通常用於防止瀏覽器將程序代碼等不需要換行的地方自動換行。
<!-- 換行和分段:--> <p> 這是第一段<br /> <!--換行--> 用到了換行標籤<br /> 請看效果<br /> 很容易理解</p> <p> 這是第二段</p> <!--分段,自動加換行--> <p> 這是第三段</p> <p> <nobr> <!- -防止換行--> int i =0,j=10; </nobr> </p>3.水平線標籤<hr/>
<hr /> 標籤在HTML 頁面中創建水平線。使用水平線(<hr> 標籤) 來分隔文章中的小節是一個辦法。 <hr/>標籤可以設置寬度width和高度height,這兩個屬性又分別有像素和百分比的表示方式。此外,<hr/>標籤還有size(厚度)、color(顏色)和noshade(無陰影)的屬性。
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www. w3.org/1999/xhtml> <head> <title></title> </head> <body> <hr size=5 color=#FF0000 /> <!--定義了size(厚度)為5和color為紅色的hr標籤--> <hr width=60 /> <!--width屬性為60px--> <hr width=60% /> <!--width為60%--> <hr size=10 /> <!--size為10px--> <hr size=10% /> <!--size為10%--> <!--align屬性,可取值分別為left、right和center-- > <hr width=20% align=left /> <hr width=20% align=right /> <hr width=20% align=center /> <hr color=#FF0000 /> <!--noshade屬性,設置無陰影效果--> <hr noshade=noshade /> </body></html>4.文本格式化標籤
<!--常用文本格式標籤--> <center>博客園</center>居中顯示<b>Hello,World! </b>粗體,推薦使用<strong>標籤。 <i>斜了吧</i>斜體。 <u>我是一個下劃線標籤</u>帶下劃線。 <em>強調,斜體</em> <sub>2</sub>下標,如:H<sub>2</sub>O <sup>2</sup>上標,如:10<sup> 2</sup> <!--設置字體大小可分為絕對字體大小和相對字體大小,絕對的通過<font>標籤的size屬性來設置, 而相對字體大小為默認字體的相對值--> < !--絕對字體大小為size的值是1-7的某個數--> <!--color(設置顏色) size(1-7)。 --> <!--face屬性用於設置字體--> <font></font>字體標籤,<font color=red size=7 face=隸書>紅色</font>5.預格式化標籤<pre>
<pre> 預格式化標籤,保持網頁的內容原樣展示。可以用於某些特殊內容的展示,也可以用於顯示計算機編程的源代碼(比如博客園的源代碼就是通過<pre>標籤來顯示的)。
<p>pre 標籤顯示某些特殊的希望原樣展示的內容:</p> <pre> 我是個好孩子, 我喜歡中啊啊啊啊這是一個預格式化標籤____ (. / / | / |___(/--/) __/ ( . . ) '._. '-.O.' 你好,我是一隻小貓! '-. / |/ '.,,/'.,, ( ⊙_⊙)?你說什麼呢???? </pre> <p>pre 標籤很適合顯示計算機代碼:</p> <pre> for i = 1 to 10 print i next i </pre>6.<marquee></marquee>標籤
<marquee></marquee>標籤對告訴瀏覽器移動顯示其中的文本和圖像。
<div> <!--marquee標籤部分瀏覽器支持:IE、FF--> <!--direction屬性:指定內容的移動方向,可取值有left、right、up和down--> <!- -behavior屬性:指定標籤的行為,可取值有scroll、alternate和slide--> <marquee direction=left scrolldelay= behavior=alternate> 大家好,歡迎大家來到我的主頁! ...... </marquee> </div>7.其它的格式標籤例子。
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www. w3.org/1999/xhtml> <head> <title></title> </head> <body> <!--<abbr>顯示縮寫:--> <abbr BBC</abbr><br /> < !-- <acronym>顯示一個詞組的縮寫字頭:--> <acronym <!--<blockquote>定義了長文字的引用:--> <blockquote> <p> Beyond two or three days ,the world's best forecasts are speculative ,and beyond six or seven they are worthless. </p> <br /> <!-- <q>標籤定義短引用:--> <q>The q lable!!!</q> </blockquote> <!--<address>地址,簽名,文檔的作者信息等:--> <address> 北京市海淀區中關村軟件園[email protected] </address> <!--<bdo>標籤通過dir屬性來定義文字顯示的順序:--> <bdo dir=ltr>動力節點</bdo><br /> <!--ltr:left to right,從左到右--> <bdo dir =rtl>動力節點</bdo><br /> <!--rtl:right to left,從右到左--> </body> </html>二、HTML列表
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www. w.org//xhtml> <head> <title></title> </head> <body> <b>HTML列表:</b><br /> <hr size=5 color=#FF0000; /> <br /> <!--第一,無序列表(ul:unordered list)--> <font size=+ color=#FF face=華文楷體>I.無序列表(Unordered List):</font ><br /> .默認:<br /> <ul> <li>香蕉</li> <li>蘋果</li> <li>橘子</li> </ul> .用type屬性:<br /> <!--ul type屬性的取值: disc:實心圓、circle:空心圓、square:實心方塊--> <!--ol type屬性的取值: <ul type=I/a/A /1> --> <ul type=circle> <li>香蕉</li> <li>蘋果</li> <li>橘子</li> </ul> <ul type=square> <li>香蕉</li> <li>蘋果</li> <li>橘子</li> </ul> 3.屬性值的混合使用,起強調作用:<br /> <ul type=circle> <li>香蕉</li> <li type=disc>蘋果</li> <li>橘子</li> </ul> <!--第二,有序列表(ol,ordered list)--> <font size= +1 color=#00FF00 face=華文楷體>II.有序列表(Ordered List):</font><br /> .默認:<br /> <ol> <li>籃球</li> <li>排球</li> <li>足球</li> </ol> 2.使用type屬性:<br /> <ol type=i> <li>籃球</li> <li>排球</li> < li>足球</li> </ol> <ol type=A> <li>籃球</li> <li>排球</li> <li>足球</li> </ol> 3.改變有序列表項的前導編號:<br /> <blockquote> a.<font color=#FFFF>start</font>屬性單獨使用:<br /> <ol start=3> <li>籃球</li> < li>排球</li> <li>足球</li> </ol> b.<font color=#FFFF>vlaue</font>屬性單獨使用:<br /> <ol> <li>籃球</ li> <li value=5>排球</li> <li>足球</li> </ol> c.<font color=#FFFF>start、value</font>屬性的共同使用:<br /> <ol start=8> <li>籃球</li> <li value=15>排球</li> <li>足球</li> </ol> </blockquote> <font size=+1 color=# 00FF00 face=花紋楷體>III.嵌套列表(Nested Lists):</font><br /> 1.無序列表中嵌套無序列表:<br /> <ul> <li>飲料</li > <li>水果<ul> <li>香蕉</li> <li>蘋果</li> <li>橘子</li> </ul> </li> <li>蔬菜</li> <li >茶葉</li> </ul> 2.無序列表中嵌套有序列表:<br /> <ul> <li>飲料</li> <li>水果<ol> <li>香蕉</ li> <li>蘋果</li> <li>橘子</li> </ol> </li> <li>蔬菜</li> <li>茶葉</li> </ul> 3.有序列表中嵌套有序列表:<br /> <ol> <li>飲料</li> <li>水果<ol> <li>香蕉</li> <li>蘋果</li> <li>橘子</li> </ol> </li> <li>蔬菜</li> <li>茶葉</li> </ol> 4..有序列表中嵌套無序列表:<br /> < ol> <li>飲料</li> <li>水果<ul> <li>香蕉</li> <li>蘋果</li> <li>橘子</li> </ul> </li> < li>蔬菜</li> <li>茶葉</li> </ol> 5.列表的多級嵌套:<br /> <ol> <li>飲料</li> <li>水果<ul> <li>香蕉</li> <li>蘋果<ul> <li>產自巴西</li> <li>產自中國</li> </ul> </li> <li>橘子</li > </ul> </li> <li>蔬菜</li> <li>茶葉</li> </ol> <!--第三,定義列表(dl,definition list)--> <font size =+1 color=#00FF00>IV.定義列表:</font><br /> 1.定義列表:<br /> <!-- <dl> <dt>第一個標題項</dt> < dd>對第一個標題項的解釋性文字</dd> <dt>第二個標題項</dt> <dd>對第二個標題項的解釋性文字</dd> </dl> 其中:<dl>用來標識定義列表的開始; <dt>用來標識定義列表的列表項; <dd>用來標識定義列表中列表項的解釋性文字。 --> <dl> <!--dt:definition term(定義術語)定義北京這個標題項--> <dt>北京</dt> <!--dd:definition definition(定義對術語的解釋定義)對北京這個標題項的解釋--> <dd> 中國的政治中心</dd> <dt>上海</dt> <dd> 中國的經濟中心</dd> <dt>深圳</dt> <dd > 中國改革開放的前沿城市</dd> </dl> </body> </html>
很多標籤都可以用來改變文本的外觀,並為文本關聯其隱藏的含義。總地來說,這些標籤可以分成兩類:基於內容的樣式(content-based style)和物理樣式(physical style)。
1.基於內容的樣式(content-based style)
基於內容的樣式標籤會告訴瀏覽器它所包含的文本具有特定的含義、上下文或者用法。然後瀏覽器就會把與該含義、上下文或者用法一致的格式應用在文本上。注意,基於內容的標籤賦予含義,而不是格式化。因此,它們對於自動處理來說非常重要;計算機並不關心文檔的外觀如何。
因為字體樣式是通過語義線索來指定的,因此瀏覽器可以為用戶選擇一種合適的顯示樣式。由於不同地點的樣式各種各樣,所以使用基於內容的樣式可以幫助你確保自己的文檔對廣大範圍的讀者來說都是有意義的。這一點在專門供那些盲人和殘疾人所使用的瀏覽器上顯得尤其重要,因為他們的顯示選項可能和我們傳統的文本根本不同,或者在某方面具有非常大的局限性。
當前的HTML 和XHTML 標準並沒有為每一個基於內容的標籤都定義一種格式;它們僅僅規定必須用與文檔中普通文本不同的方式來顯示基於內容的樣式。標準甚至沒有要求這些基於內容的樣式彼此之間都要用不同的方式顯示。在實際應用中,你可能會發現很多這樣的標籤和傳統的印刷有著非常明顯的關係,它們有著相似的含義和顯示樣式,而且在多數瀏覽器中都以相同的樣式和字體來顯示。
使用HTML/XHTML 基於內容的樣式標籤時要遵從一些規則,因為僅僅是簡單地想想文本該如何顯示,而不必知道這些文本的含義是什麼,是十分容易的。一旦你開始使用基於內容的樣式之後,文檔將會更加一致,而且可以更好地幫助執行自動搜索和內容編輯。這些標籤是:
<abbr> <acronym> <cite> <code> <dfn> <em> <kbd> <samp> <strong> <var>
2.物理樣式(physical style)
在討論基於內容的樣式標籤時,我們經常用到意圖這個詞。這是因為由標籤傳達的含義比瀏覽器顯示文本的方式更為重要。然而,在某些情況下,可能是出於合法性或者版權等方面的原因的考慮,你希望文本以某種特殊的方式來顯示(例如斜體或加粗)。在這種情況下,就可以對文本使用物理樣式。
雖然其他文字處理系統的趨勢是精確地控製樣式和外觀,但是在使用HTML 或XHTML 時,除非極少情況下,都應該避免使用物理標籤。應當盡可能地向瀏覽器提供上下文信息,並使用基於內容的樣式。儘管現在瀏覽器不過是以斜體或者粗體字來顯示這些文本,但是將來的瀏覽器和各種文檔生成工具可能會以非常有創建的方式來利用這些基於內容的樣式。
當前的HTML/XHTML 標準一共提供了9 種物理樣式,包括粗體(bold)、斜體(italic)、等寬(monospaced)、下劃線(underlined)、刪除線(strikethrough)、放大(larger)、縮小( smaller)、上標(superscripted)和下標(subscripted)文本。這些標籤是:
<b> <big> <i> <s> <small> <strike> <sub> <sup> <tt>
以上所述是小編給大家介紹的HTML常用格式標籤,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對VeVb武林網網站的支持!