百分百源码网-让建站变得如此简单! 登录 注册 签到领金币!

主页 | 如何升级VIP | TAG标签

当前位置: 主页>网站教程>html5教程> html5组织内容-
分享文章到:

html5组织内容-

发布时间:08/01 来源:未知 浏览: 关键词:
这篇文章主要介绍了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.

可认为段降增加样式,包含字体、字号、色彩等。

p元素

p元素没有概括的含义,要是没有适当的元素可用时可以运用这个元素为内容创立构造并给予其含义,它的含义平常通过class或id属性指定。

但是注意不在必不得已的状况下最佳不要运用p元素,应当优先考虑那些拥有语义重要性的元素。

预先编排内容格局

阅读器会将所有额外的回车和空格紧缩,并依据窗口的大小主动换行。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属性可以用来指定所援用的内容的来源。



代码如下:

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:  
    
  1. bananas
  2. mangoes
  3. cherries
  4. plums
  5. peaches
  6. 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:  
    
  1. bananas
  2. mangoes
  3. cherries
  4. plums
  5. peaches
  6. 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.  
    
Listing 23. Using the code element
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。

打赏

打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

百分百源码网 建议打赏1~10元,土豪随意,感谢您的阅读!

共有151人阅读,期待你的评论!发表评论
昵称: 网址: 验证码: 点击我更换图片
最新评论

本文标签

广告赞助

能出一分力是一分吧!

订阅获得更多模板

本文标签

广告赞助

订阅获得更多模板