html5组织内容-
创立段降
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 atitle
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:You can see other fruits I like here
- bananas
- mangoes
- cherries
- plums
- peaches
- grapes
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
无序列表的每个项当前都会显示一个项目符号,符号的样式可以用CSS属性list-style-type控制。
li元素的属性
li元素表示列表中的项目,它可以与ul、ol搭配运用,可以包括value属性,表示列表项的序号。
I like apples and oranges. I also like:You can see other fruits I like here
- bananas
- mangoes
- cherries
- plums
- peaches
- grapes
描述列表
定义注明列表需要用到三个元素: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
自定义列表
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
运用插图
HTML5对插图的定义为:一个独立的内容单元,可带标题,平常作为一个整体被文档的主体援用,把它从文档主体中删除也不会影响文档的含义。
HTML运用figure元素插入图表、相片、图形、插图、代码片段等,figcaption是figure的标题,可选,涌现在figure内容的开头或结尾处。
I like apples and oranges. You can see other fruits I like here.
figure元素生成了一个将code元素裹在其中的插图,并用figcaption元素为其增加了一个标题。注意figcaption元素必需是figure元素的首先个或最后一个子元素。
figure元素可以包括多个内容块,但只能包括一个figcaption。