首页 > 代码库 > 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保留标签(三)