首页 > 代码库 > html5学习笔记——html保留标签(三)

html5学习笔记——html保留标签(三)

 列表和表格

这次也是复习。

列表:

列表分为无序列表、有序列表、标题列表

很简单,看代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>

列表
<br/>

无序列表

<ul>a</ul>
<ul>b</ul>
<ul>c</ul>
<ul>d</ul>

有序列表

<ol start="1">

<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
</ol>

带标题列表

<dl>
<dt>我是标题</dt>
<dd>我是内容1</dd>
<dd>我是内容2</dd>
<dd>我是内容3</dd>
</dl>

<hr/>

</body>
</html>

 

效果如下:

技术分享

表格:

现在吧,好些web页面上的表格都用图片代替了,但是,如果我们展示的数据希望像表格一样以行列形式摆放,还是需要表格标签的。

再多说一句,注意以下几点:

1、每一对表格标签<table></table>里只能有一个标题<caption/>、一个表格头<thead/>,一个表格脚<tfoot/>。

2、现在,html5已经不提议使用cellpadding、cellspacing和width,这些只是建议,还没有强制取消,这些属性的设置最好放到css样式表中统一设置。

3、html5中,align、bgcolor、border这些属性已经被取消了,放到css中去设置。

4、当然<tr></tr>、<td></td>还是保留的。

5、colspan、rowspan这些跨行跨列的属性还保留。

还有一些页眉、表格主体的标签,大家可以看看度娘是怎么说的。

 

话不多说,上代码,代码里有注释,各位看官自己看。

<table style="width: 400px", border= "1">
<caption>师然的课程表</caption>
<tr>
<!--页眉-->
<th>课程</th>
<th>学习时间</th>

</tr>
<tr>
<td>android</td>
<td>6个月</td>

</tr>
<tr>
<td>iOS</td>
<td>5个月</td>
</tr>
</table>

 

效果如下:

技术分享

跨行跨列大家自己玩吧。

 

html5学习笔记——html保留标签(三)