常用的HTML標記


一、格式標記

  1、<br>

    <br>是一個單標記,用來強制換行。

  2、<p>

    <p>是雙標記。用來換分段落。

  3、<center>

    <center>是雙標記。對其所包括的文本進行水平居中。 建議用CSS 樣式來居中文本!

  4、<pre>

    <pre>是雙標記。pre 元素可定義預格式化的文本。被包圍在 pre 元素中的文本通常會保留空格和換行符。而文本也會呈現為等寬字體。

  5、<li>

    雙標記。<li> 標簽定義列表項目。<li> 標簽可用在有序列表 (<ol>) 和無序列表 (<ul>) 中。

  6、<ul>

    雙標記。<ul> 標簽定義無序列表。該元素有一個屬性type屬性(不推薦使用),type 屬性規定列表的項目符號的類型。屬性值如下:

    

  7、<ol>

    雙標記。<ol>標簽用來定義有序列表。

    

    可以使用li標記value屬性指定標簽的序號起始值。   

1   <ol>
2             <li>a</li>
3             <li value="5">b</li>
4             <li>c</li> 
5   </ol>

     

          此外,列表之間可以相互嵌套。    

   <ul type="square">
	<li>123</li>
	<li>123
	  <ol>
		<li>asasa</li>
		<li>asasa</li>
	   </ol>
	</li>
     <li>123</li>
   </ul>

      

  8、<dl><dt><dd>

    雙標記。用定義列表。   

1   <dl>
2      <dt>計算機</dt>
3      <dd>用來計算的儀器 ... ...</dd>
4      <dt>顯示器</dt>
5      <dd>以視覺方式顯示信息的裝置 ... ...</dd>
6   </dl>

         

  9、<hr>

    單標記。水平線。

  10、<div>

    雙標記。<div> 可定義文檔中的分區或節(division/section)。<div> 標簽可以把文檔分割為獨立的、不同的部分。它可以用作嚴格的組織工具,並且不使用任何格式與其關聯。如果用 id 或 class 來標記 <div>,那么該標簽的作用會變得更加有效。

二、文本標記

1、<h1~6>    

    雙標記。<h1> - <h6> 標簽可定義標題。<h1> 定義最大的標題。<h6> 定義最小的標題。由於 h 元素擁有確切的語義,因此請您慎重地選擇恰當的標簽層級來構建文檔的結構。因此,請不要利用標題標簽來改變同一行中的字體大小。相反,我們應當使用層疊樣式表定義來達到漂亮的顯示效果。

2、<font>

  雙標記,<font> 規定文本的字體、字體尺寸、字體顏色。

  size屬性:設置文本字體大小;屬性值為1~7;瀏覽器默認大小是3;

  color屬性:設置文本字體顏色;

  face屬性:設置文本字體的類型;

1   <font size="5" face="arial" color="red">A paragraph.</font>

3、<b>

  雙標記。<b> 標簽規定粗體文本。

4.<i>

   雙標記。標簽顯示斜體文本效果。

5、<sub>

   雙標記。<sub> 標簽可定義下標文本。包含在 <sub> 標簽和其結束標簽 </sub> 中的內容將會以當前文本流中字符高度的一半來顯示,但是與當前文本流中文字的字體和字號都是一樣的。

6、<sup>

  雙標記。<sup> 標簽可定義上標文本。

7、<tt>    

    <tt> 標簽呈現類似打字機或者等寬的文本效果。

      <tt> 標簽與 <code> 和 <kbd> 標簽一樣,<tt> 標簽和必需的 </tt> 結束標簽告訴瀏覽器,要把其中包含的文本顯示為等寬字體。對於那些已經使用了等寬字體的瀏覽器來說,這個標簽在文本的顯示上就沒有什么特殊效果了。

8、<cite>    

  雙標記。<cite> 標簽通常表示它所包含的文本對某個參考文獻的引用,比如書籍或者雜志的標題。按照慣例,引用的文本將以斜體顯示。

9、<em>

  雙標記。<em> 標簽告訴瀏覽器把其中的文本表示為強調的內容。對於所有瀏覽器來說,這意味着要把這段文字用斜體來顯示。

10、<strong>

  雙標記。<strong> 標簽和 <em> 標簽一樣,用於強調文本,但它強調的程度更強一些。瀏覽器通常會以不同於 <em> 標簽的方式來顯示 <strong> 標簽中的內容,通常是用加粗的字體(相對於斜體)來顯示其中的內容,這樣用戶就可以把這兩個標簽區分開來了。

11、<small>

  雙標記。<small> 標簽呈現小號字體效果。<small> 標簽和它所對應的 <big> 標簽一樣,但它是縮小字體而不是放大。如果被包圍的字體已經是字體模型所支持的最小字號,那么 <small> 標簽將不起任何作用。可以嵌套。

12、<big>

  雙標記。<big> 標簽呈現大號字體效果。使用 <big> 標簽可以很容易地放大字體。這簡直不能再簡單了:瀏覽器顯示包含在 <big> 標簽和其相應的 </big> 標簽之間的文字時,其字體比周圍的文字要大一號。但是,如果文字已經是最大號字體,這個 <big> 標簽將不起任何作用。可以嵌套。

13、<u>

  雙標記。<u> 標簽可定義下划線文本。

三、圖像標記

  1、<img>

  單標記。img 元素向網頁中嵌入一幅圖像。必須屬性有src和alt;可選屬性有width,height,border。

  src屬性的值是要嵌入的圖片的鏈接,可以是絕對地址也可以是相對地址。

  alt屬性規定圖像的替代文本。當圖片不能加載時顯示。title屬性是鼠標放到圖片上顯示的文字。

  height,width用來設置圖片的高度和寬度。border屬性用來設置圖片的邊框(推薦使用CSS來設置)。 

1   <img src="https://www.baidu.com/img/bd_logo1.png" alt="百度" width="50%" height="50%">

 

四、超鏈接

  1、<a>

    雙標記。用來<a> 標簽定義超鏈接,用於從一張頁面鏈接到另一張頁面。

    href屬性:規定鏈接指向的頁面的 URL。

    target屬性:target 屬性規定在何處打開鏈接文檔。

    name屬性,用來設置錨點。

    

   如果在一個 <a> 標簽內包含一個 target 屬性,瀏覽器將會載入和顯示用這個標簽的 href 屬性命名的、名稱與這個目標吻合的框架或者窗口中的文檔。如果這個指定名稱或 id 的框架或者窗口不存在,瀏覽器將打開一個新的窗口,給這個窗口一個指定的標記,然后將新的文檔載入那個窗口。從此以后,超鏈接文檔就可以指向這個新的窗口。

2、常用案例

  a、普通鏈接    

  <a href="http://www.baidu.com">百度</a> 
  <a href="index.html">我的頁面</a> 

    b、錨鏈接    

     <a href="#C4">查看 Chapter 4。</a>

         .// 上下兩個鏈接不在一個頁面顯示,
    <a name="C4"  >  

    c、圖片鏈接    

    <a href="/example/html/lastpage.html">
      <img border="0" src="/i/eg_buttonnext.gif" />
    </a>

      將圖片作為鏈接的內容即可。

    d、發送郵件   

    <a href="mailto:someone@microsoft.com?subject=Hello%20again">發送郵件</a>

 

     3、target屬性值介紹    

_blank

瀏覽器總在一個新打開、未命名的窗口中載入目標文檔。

_self

這個目標的值對所有沒有指定目標的 <a> 標簽是默認目標,它使得目標文檔載入並顯示在相同的框架或者窗口中作為源文檔。這個目標是多余且不必要的,除非和文檔標題 <base> 標簽中的 target 屬性一起使用。

_parent

這個目標使得文檔載入父窗口或者包含來超鏈接引用的框架的框架集。如果這個引用是在窗口或者在頂級框架中,那么它與目標 _self 等效。

_top

這個目標使得文檔載入包含這個超鏈接的窗口,用 _top 目標將會清除所有被包含的框架並將文檔載入整個瀏覽器窗口。

案例1:ex1.html

<html>
  <body>
      <h3>Table of Contents</h3>
      <ul>
        <li><a href="/example/html/pref.html" target="view_window">Preface</a></li>
        <li><a href="/example/html/chap1.html" target="view_window">Chapter 1</a></li>
        <li><a href="/example/html/chap2.html" target="view_window">Chapter 2</a></li>
        <li><a href="/example/html/chap3.html" target="view_window">Chapter 3</a></li>
      </ul>
  </body>
</html>

當用戶第一次選擇內容列表中的某個鏈接時,瀏覽器將打開一個新的窗口,將它標記為 "view_window",然后在其中顯示希望顯示的文檔內容。如果用戶從這個內容列表中選擇另一個鏈接,且這個 "view_window" 仍處於打開狀態,瀏覽器就會再次將選定的文檔載入那個窗口,取代剛才的那些文檔。

在整個過程中,這個包含了內容列表的窗口是用戶可以訪問的。通過單擊窗口中的一個連接,可使另一個窗口的內容發生變化。

ex2.html

  <frameset cols="100,*">
    <frame src="ex1.html">
    <frame src="pref.html" name="view_window">
  </frameset> 

   


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM