這篇文章主要為大家展示了“html5組織內(nèi)容的示例分析”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“html5組織內(nèi)容的示例分析”這篇文章吧。

上蔡網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián),上蔡網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為上蔡近1000家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\成都外貿(mào)網(wǎng)站建設(shè)公司要多少錢，請(qǐng)找那個(gè)售后服務(wù)好的上蔡做網(wǎng)站的公司定做！

默認(rèn)情況下，HTML文檔的格式與文檔內(nèi)容在瀏覽器窗口中顯示的格式是不相關(guān)的，例如：瀏覽器會(huì)將連在一起的幾個(gè)空白字符折算為一個(gè)空格，并且會(huì)忽略換行符。HTML提供了組織內(nèi)容的方式，將顯示的內(nèi)容分段，預(yù)先編排內(nèi)容的格式等。

建立段落

HTML會(huì)忽略你在文本中輸入的回車符和其他額外的空格，網(wǎng)頁中的新的段落使用p元素標(biāo)識(shí)，一個(gè)段落包含一個(gè)或多個(gè)相關(guān)句子，通常圍繞的是一個(gè)觀點(diǎn)或論點(diǎn)，或者多個(gè)論點(diǎn)間有一些共同的主題。

  
    
Antoni Gaudí
  
    
Many tourists are drawn to Barcelona  
       to see Antoni Gaudí's incredible  
       architecture.
  
    
Barcelona celebrated the 150th  
       anniversary of Gaudí's birth in  
       2002.
  

可以為段落添加樣式，包括字體、字號(hào)、顏色等。

div元素

div元素沒有具體的含義，如果沒有恰當(dāng)?shù)脑乜捎脮r(shí)可以使用這個(gè)元素為內(nèi)容建立結(jié)構(gòu)并賦予其含義，它的含義通常通過class或id屬性指定。

但是注意不在萬不得已的情況下好不要使用div元素，應(yīng)該優(yōu)先考慮那些具有語義重要性的元素。

預(yù)先編排內(nèi)容格式

瀏覽器會(huì)將所有額外的回車和空格壓縮，并根據(jù)窗口的大小自動(dòng)換行。pre元素可以改變?yōu)g覽器處理內(nèi)容的方式，阻止合并空白字符，讓源文檔中的格式得以保留。但注意除非有必要保留文檔原始格式，否則好不要使用該元素，因?yàn)樗魅趿送ㄟ^使用元素和樣式來控制呈現(xiàn)結(jié)果這一機(jī)制的靈活性。

pre元素通常和code元素搭配使用，用于展示代碼示例，因?yàn)榫幊陶Z言中的格式通常都很重要。

Add this to your style sheet if you want  
  to display a dotted border underneath the  
  abbr element whenever it has  
  a title attribute.
  
  
      
        abbr[title] {  
            border-bottom: 1px dotted #000;  
        }  
      

引用他處內(nèi)容

blockquote元素表示引自他處的一片內(nèi)容，與q元素類似（用于短的引述，不能跨行），但通常用在要引用的內(nèi)容較多的場(chǎng)景。該元素的cite屬性可以用來指定所引用的內(nèi)容的來源。

代碼如下:

The">http://en.wikipedia.org/wiki/Apple">The apple forms a tree that is small and deciduous, ......

注意瀏覽器會(huì)忽略blockquote元素中的內(nèi)容的格式，默認(rèn)對(duì)blockquote文本進(jìn)行縮進(jìn)。要在引用中建立結(jié)構(gòu)，可以使用一些組織元素，例如p或hr。

瀏覽器應(yīng)對(duì)q元素中的文本會(huì)自動(dòng)加上特定語言的引號(hào)，但不同的瀏覽器的效果會(huì)有差異。下面是使用q元素的一個(gè)例子。

She tried again, this time in French:  
Avez-vous lu le livre 
High Tide in Tucson 
de Kingsolver? C'est inspirational.

添加主題分隔

hr元素代表段落級(jí)別的主題分隔。在HTML5中，hr元素代表著向另一個(gè)相關(guān)主題的轉(zhuǎn)換，習(xí)慣樣式是一條橫貫頁面的直線。

  
主題1  
  
主題2  
  
......  

上例在blockquote元素中加入了一些hr元素，形成一定的結(jié)構(gòu)。

將內(nèi)容組織為列表

HTML中列表的類型有有序列表、無序列表和描述列表。

1）有序列表，ol為父元素，li為列表項(xiàng)；

2）無序列表，ul為父元素，li為列表項(xiàng)；

3）描述列表，dl為父元素，dt和dd分別代表dl中的術(shù)語和描述。

在此之外，用戶還可以定義自己的列表。

有序列表

ol元素表示有序列表，列表項(xiàng)用li元素表示。

  
    I like apples and oranges.  
    I also like:  
    
  
        
bananas
  
        
mangoes
  
        
cherries
  
        
plums
  
        
peaches
  
        
grapes
  
    
  
    You can see other fruits I like here  

ol元素支持屬性如下：

1）start：設(shè)置列表首項(xiàng)的編號(hào)值，默認(rèn)首項(xiàng)的編號(hào)為1；

2）type：設(shè)置顯示在各列表項(xiàng)旁的編號(hào)的類型，包括：

l：十進(jìn)制數(shù)（默認(rèn)），1,2,3,4

a：小寫拉丁字母，a,b,c,d

A：大寫拉丁字母，A,B,C,D

i：小寫羅馬數(shù)字，i,ii,iii,iv

I：大寫羅馬數(shù)字，I,II,III,IV

3）reversed：列表編號(hào)采用降序，部分瀏覽器支持

無序列表

ul元素表示無序列表，用li元素表示列表項(xiàng)。

  
    I like apples and oranges.  
    I also like:  
    
  
        
bananas
  
        
mangoes
  
        
cherries
  
        
plums
  
        
peaches
  
        
grapes
  
    
  
    You can see other fruits I like here  

無序列表的每個(gè)項(xiàng)目前都會(huì)顯示一個(gè)項(xiàng)目符號(hào)，符號(hào)的樣式可以用CSS屬性list-style-type控制。

li元素的屬性

li元素表示列表中的項(xiàng)目，它可以與ul、ol搭配使用，可以包含value屬性，表示列表項(xiàng)的序號(hào)。

  
    I like apples and oranges.  
    I also like:  
    
  
        
bananas
  
        mangoes  
        
cherries
  
        plums  
        
peaches
  
        
grapes
  
    
  
    You can see other fruits I like here  

描述列表

定義說明列表需要用到三個(gè)元素：dl、dt和dd元素，這些元素沒有局部屬性：

1）dl：表示說明列表；

2）dt：表示說明列表中的術(shù)語；

3）dd：表示說明列表中的定義。

  
    I like apples and oranges.  
    I also like:  
    
  
        
Apple
  
            
The apple is the pomaceous fruit of the apple tree
  
            
Malus domestica
  
        
Banana
  
            
The banana is the parthenocarpic fruit of the banana tree
  
            
Musa acuminata
  
        
Cherry
  
            
The cherry is the stone fruit of the genus Prunus
  
    
  
    You can see other fruits I like here.  

自定義列表

HTML中的ul元素結(jié)合CSS中的counter特性和:before選擇器，可以生成復(fù)雜的列表。下面是一個(gè)例子：

  
    ......  
      
  
  
    I like apples and oranges.  
    I also like:  
      
        
bananas
  
        
mangoes, including:
  
              
                
Haden mangoes
  
                
Keitt mangoes
  
                
Kent mangoes
  
              
        
cherries
  
        
plums, including:  
              
                
Elephant Heart plums
  
                
Stanley plums
  
                
Seneca plums
  
              
          
        
peaches
  
        
grapes
  
      
    You can see other fruits I like here.  

使用插圖

HTML5對(duì)插圖的定義為：一個(gè)獨(dú)立的內(nèi)容單元，可帶標(biāo)題，通常作為一個(gè)整體被文檔的主體引用，把它從文檔主體中刪除也不會(huì)影響文檔的含義。

HTML使用figure元素插入圖表、照片、圖形、插圖、代碼片段等，figcaption是figure的標(biāo)題，可選，出現(xiàn)在figure內(nèi)容的開頭或結(jié)尾處。

  
    I like apples and oranges.  
    
  
          
        var fruits = ["apples", "oranges", "mangoes", "cherries"];
document.writen("I like " + fruits.length + " fruits");  
          
    
  
    You can see other fruits I like here.  

figure元素生成了一個(gè)將code元素裹在其中的插圖，并用figcaption元素為其添加了一個(gè)標(biāo)題。注意figcaption元素必須是figure元素的第一個(gè)或最后一個(gè)子元素。

figure元素可以包含多個(gè)內(nèi)容塊，但只能包含一個(gè)figcaption。

以上是“html5組織內(nèi)容的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

當(dāng)前標(biāo)題：html5組織內(nèi)容的示例分析-創(chuàng)新互聯(lián)
分享URL：http://weahome.cn/article/dssghj.html