本小节主要介绍列表标签,<div>标签,以及<table>标签的使用。下面还是通过一段代码详细了解各个标签的作用:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标签运用</title>
<style type="text/css">
table tr td,th{border:1px solid #000;} <!-- 给表格的每个单元格加边框 -->
</style>
</head>
<body>
<div id="mm">
<h2>热门课程排行榜</h2>
<ul>
<li>前端开发面试心法 </li>
<li>零基础学习html</li>
<li>javascript全攻略</li>
</ul>
</div>
<div id="nn">
<h2>最新课程排行</h2>
<ol>
<li>版本管理工具介绍—Git篇 </li>
<li>Canvas绘图详解</li>
<li>QQ5.0侧滑菜单</li>
</ol>
</div>
<div id="tt">
<table summary="各班学生成绩信息表">
<tbody>
<caption>学生成绩表</caption>
<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>
</div>
</body>
</html>
运用效果:
example3.png
①信息列表标签,分为两种<ul>-<li>无序列表,<ol>-<li>有序列表,<ul>-<li>无序列表在在显示时前面默认有一个小圆点,如上例一的显示效果,而<ol>-<li>有序列表在显示时前面默认排序,序号默认从1开始,效果见上图。
②<div>标签,在网页排版中,<div>标签相当于一个容器,可以化分出一个个独立板块,确定逻辑部分,上文运用了三次<div>标签将文段分为了三个模块
③给<div>标签设置id,命名。这样能够使逻辑更加清晰,便于后期对每个模块的操作,每一个id都是唯一的。
④<table>表格标签,有时候我们想在网页中显示一些清单数据时,可以使用<table>标签来显示,更加清晰。
<table>规则:以<table>标记开始,</table>标记结束。
<tbody>标签是负责优先显示性的,作为了解吧。
<th>...</th>标签:表格头部的一个单元格,表格表头。
<tr>...</tr>标签:表格的一行,有几对就表示表格有几行。
<td>...</td>标签:表格的一个单元格,一行中包含几对<td>...</td>,说明一行中就有几列。
以上就是表格的基本元素,其中表头中的文本在网页中默认粗体,居中显示。
⑤给表格加css样式,这里我们为了简单了解在<style>标签中简单设置了表格的边框,后面再做详细认识,效果见上图。
⑥<caption>标签:给表格添加标题和摘要。标题位置显示在表格的正上方。摘要:语法:<table summary="表格简介文本"> 摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化)。
本小节到此结束。
网友评论