html5组织内容_动力节点Java学院整理

2019-01-28 13:34:40于海丽

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

<p>She tried again, this time in French: <q lang="fr">Avez-vous lu le livre <cite lang="en">High Tide in Tucson</cite> de Kingsolver? C'est inspirational.</q></p>

添加主题分隔

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

<blockquote cite="http://en.wikipedia.org/wiki/Apple"> 主题1 <hr> 主题2 <hr> ...... </blockquote>

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

将内容组织为列表

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

1)有序列表,ol为父元素,li为列表项;

2)无序列表,ul为父元素,li为列表项;

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

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

有序列表

ol元素表示有序列表,列表项用li元素表示。

<body> I like apples and oranges. I also like: <ol> <li>bananas</li> <li>mangoes</li> <li>cherries</li> <li>plums</li> <li>peaches</li> <li>grapes</li> </ol> You can see other fruits I like <a href="fruitlisthtml">here</a> </body>

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元素表示列表项。

<body> I like apples and oranges. I also like: <ul> <li>bananas</li> <li>mangoes</li> <li>cherries</li> <li>plums</li> <li>peaches</li> <li>grapes</li> </ul> You can see other fruits I like <a href="fruitlisthtml">here</a> </body>

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

li元素的属性

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