HTML学习笔记--11.25
2015-11-26 本文已影响0人
饥人谷_王鹏
ul标签
ol标签
div标签
table标签
caption标签
ul标签
- ul标签，添加新闻信息列表。这些列表就可以使用ul-li标签来完成。ul-li是没有前后顺序的信息列表。
- html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>中国足球</title>
</head>
<body>
<ul>
<li>黄健翔:蔡振华不行许家印上 恒大成功不光靠钱</li>
<li>足协总结:佩兰非内定 不逃避舆论接受批评与监督</li>
<li>川媒:足协道歉更多流于表面 避重就轻让人难捉摸</li>
</ul>
</body>
</html>
- 页面预览
ul标签.png
ol标签
- ol标签，来制作有序列表的展示
- html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>中国足球</title>
</head>
<body>
<ol>
<li>黄健翔:蔡振华不行许家印上 恒大成功不光靠钱</li>
<li>足协总结:佩兰非内定 不逃避舆论接受批评与监督</li>
<li>川媒:足协道歉更多流于表面 避重就轻让人难捉摸</li>
</ol>
</body>
</html>
- 页面预览
ol标签.png
div标签
- div标签，可以把一些独立的逻辑部分划分出来，放在一个<div>标签中，并用id属性来为<div>提供唯一的名称
- html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>足球新闻</title>
</head>
<body>
<div id="国内足球">
<h2>国内足球</h2>
<ol>
<li>黄健翔:蔡振华不行许家印上 恒大成功不光靠钱</li>
<li>足协总结:佩兰非内定 不逃避舆论接受批评与监督</li>
<li>川媒:足协道歉更多流于表面 避重就轻让人难捉摸</li>
</ol>
</div>
<div id="国际足球">
<h2>国际足球</h2>
<ul>
<li>巴洛特利归期终于确定！不用等到2016年了</li>
<li>逗妹吐槽:条条大刀捅罗马 中超哪点吸引鲁尼？</li>
<li>曝曼联求购妖锋 2千万遭拒</li>
</ul>
</div>
</body>
</html>
- 页面预览
div标签.png
table标签
- table标签，来制作网页上的表格
- html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>认识table表标签</title>
</head>
<body>
<table>
<tbody>
<tr>
<th>班级</th>
<th>学生数</th>
<th>平均成绩</th>
</tr>
<tr>
<td>一班</td>
<td>30</td>
<td>89</td>
</tr>
<tr>
<td>二班</td>
<td>35</td>
<td>85</td>
</tr>
<tr>
<td>三班</td>
<td>32</td>
<td>80</td>
</tr>
</tbody>
</table>
</body>
</html>
- 页面预览
table标签.png
caption标签
- caption标签，为表格添加标题和摘要
- html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>table表标签</title>
<style type="text/css">
table tr td,th{
border:1px solid #000;
}
</style>
</head>
<body>
<table summary="本表格记录2012年到2013年库存记录，记录包括u盘和耳机库存量">
<caption>2012年到2013年库存记录</caption>
<tr>
<th>产品名称 </th>
<th>品牌 </th>
<th>库存量（个） </th>
<th>入库时间 </th>
</tr>
<tr>
<td>耳机 </td>
<td>联想 </td>
<td>500</td>
<td>2013-1-2</td>
</tr>
<tr>
<td>U盘 </td>
<td>金士顿 </td>
<td>120</td>
<td>2013-8-10</td>
</tr>
<tr>
<td>U盘 </td>
<td>爱国者 </td>
<td>133</td>
<td>2013-3-25</td>
</tr>
</table>
</body>
</html>
- 页面预览
caption标签.png
