html5组织内容的示例分析-创新互联

这篇文章主要为大家展示了“html5组织内容的示例分析”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“html5组织内容的示例分析”这篇文章吧。

默认情况下，HTML文档的格式与文档内容在浏览器窗口中显示的格式是不相关的，例如：浏览器会将连在一起的几个空白字符折算为一个空格，并且会忽略换行符。HTML提供了组织内容的方式，将显示的内容分段，预先编排内容的格式等。

建立段落

HTML会忽略你在文本中输入的回车符和其他额外的空格，网页中的新的段落使用p元素标识，一个段落包含一个或多个相关句子，通常围绕的是一个观点或论点，或者多个论点间有一些共同的主题。

  
    
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.
  

可以为段落添加样式，包括字体、字号、颜色等。

div元素

div元素没有具体的含义，如果没有恰当的元素可用时可以使用这个元素为内容建立结构并赋予其含义，它的含义通常通过class或id属性指定。

但是注意不在万不得已的情况下好不要使用div元素，应该优先考虑那些具有语义重要性的元素。

预先编排内容格式

浏览器会将所有额外的回车和空格压缩，并根据窗口的大小自动换行。pre元素可以改变浏览器处理内容的方式，阻止合并空白字符，让源文档中的格式得以保留。但注意除非有必要保留文档原始格式，否则好不要使用该元素，因为它削弱了通过使用元素和样式来控制呈现结果这一机制的灵活性。

pre元素通常和code元素搭配使用，用于展示代码示例，因为编程语言中的格式通常都很重要。

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;  
        }  
      

引用他处内容

blockquote元素表示引自他处的一片内容，与q元素类似（用于短的引述，不能跨行），但通常用在要引用的内容较多的场景。该元素的cite属性可以用来指定所引用的内容的来源。

代码如下:

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

注意浏览器会忽略blockquote元素中的内容的格式，默认对blockquote文本进行缩进。要在引用中建立结构，可以使用一些组织元素，例如p或hr。

浏览器应对q元素中的文本会自动加上特定语言的引号，但不同的浏览器的效果会有差异。下面是使用q元素的一个例子。

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

添加主题分隔

hr元素代表段落级别的主题分隔。在HTML5中，hr元素代表着向另一个相关主题的转换，习惯样式是一条横贯页面的直线。

  
主题1  
  
主题2  
  
......  

上例在blockquote元素中加入了一些hr元素，形成一定的结构。

将内容组织为列表

HTML中列表的类型有有序列表、无序列表和描述列表。

1）有序列表，ol为父元素，li为列表项；

2）无序列表，ul为父元素，li为列表项；

3）描述列表，dl为父元素，dt和dd分别代表dl中的术语和描述。

在此之外，用户还可以定义自己的列表。

有序列表

ol元素表示有序列表，列表项用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：设置列表首项的编号值，默认首项的编号为1；

2）type：设置显示在各列表项旁的编号的类型，包括：

l：十进制数（默认），1,2,3,4

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

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

i：小写罗马数字，i,ii,iii,iv

I：大写罗马数字，I,II,III,IV

3）reversed：列表编号采用降序，部分浏览器支持

无序列表

ul元素表示无序列表，用li元素表示列表项。

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

无序列表的每个项目前都会显示一个项目符号，符号的样式可以用CSS属性list-style-type控制。

li元素的属性

li元素表示列表中的项目，它可以与ul、ol搭配使用，可以包含value属性，表示列表项的序号。

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

描述列表

定义说明列表需要用到三个元素：dl、dt和dd元素，这些元素没有局部属性：

1）dl：表示说明列表；

2）dt：表示说明列表中的术语；

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元素结合CSS中的counter特性和:before选择器，可以生成复杂的列表。下面是一个例子：

  
    ......  
      
  
  
    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对插图的定义为：一个独立的内容单元，可带标题，通常作为一个整体被文档的主体引用，把它从文档主体中删除也不会影响文档的含义。

HTML使用figure元素插入图表、照片、图形、插图、代码片段等，figcaption是figure的标题，可选，出现在figure内容的开头或结尾处。

  
    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元素生成了一个将code元素裹在其中的插图，并用figcaption元素为其添加了一个标题。注意figcaption元素必须是figure元素的第一个或最后一个子元素。

figure元素可以包含多个内容块，但只能包含一个figcaption。

以上是“html5组织内容的示例分析”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！