3-1 使用ul, 添加新闻信息列表
在浏览网页时, 你会发现网页上有很多的列表。新闻列表,图片列表等等。
这些列表就可以使用ul-li标签来完成。ui-li是没有前后顺序 的信息列表。
语法:
<ul>
<li>信息</li>
<li>信息</li>
......
</ul>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> p标签</title>
</head>
<body>
<ul>
<li>我的第一行</li>
<li>我的第二行</li>
<li>我的第三行</li>
</ul>
</body>
</html>
ul-li在网页中显示的默认样式一般为:每项li前都自带一个圆点,如下图所示:
- 我的第一行
- 我的第二行
- 我的第三行
3-2 使用ol, 添加图书销售排行榜
如果想在网页中展示 有前后顺序 的信息列表, 怎么办呢?
语法:
<ol>
<li>信息</li>
<li>信息</li>
......
</ol>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> p标签</title>
</head>
<body>
<ol>
<li>iOS</li>
<li>Objective-C</li>
</ol>
</body>
</html>
<ol>
在网页中显示的默认样式一般为:每项<li>
前都自带一个序号,序号默认从1
开始,
- iOS
- Objective-C
3-3 认识div在排版中的作用
在网页制作过程中, 可以把一些独立的逻辑部分划分出来,放在一个 <div> 标签中, 这个 <div> 标题的作用就相当于一个容器。
语法:
<div>...</div>
确定逻辑部分:
什么是逻辑部分?它是页面上相互关联的一组元素。如下图
3-4 给div命名, 使逻辑更加清晰
我们可以用 id属性来为 <div> 提供唯一的名称,这个就像我们每个人都有一个身份证号, 这个身份证号是唯一标识我们身份的, 也是必须唯一的。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>div标签</title>
</head>
<body>
<div id = "hotList">
<h2>热门课程排行榜</h2>
<ol>
<li>前端开发面试心法 </li>
<li>零基础学习html</li>
<li>javascript全攻略</li>
</ol>
</div>
<div id = "learningInstructed">
<h2>web前端开发导学课程</h2>
<ul>
<li>网页专业名词大扫盲 </li>
<li>网站职位定位指南</li>
<li>为您解密Yahoo网站制作流程</li>
</ul>
</div>
</body>
</html>
3-5 table标签,认识网页上的表格
有时候我们需要在网页上展示一些数据, 如某公司向在网页上展示公司的库存清单;如下表
产品名称 | 品牌 | 库存(个) | 入库时间 |
耳机 | 联想 | 500 | 2013-1-2 |
U盘 | 金士顿 | 120 | 2013-8-10 |
U盘 | 爱国者 | 133 | 2013-3-25 |
table, tbody, tr, th,td
- <table>..</table>;整个表格以 <table> 标记开始, </table>标记结束。
- <tbody>..</tbody>;当表格内容非常多时,表格就回下载一点显示一点,但是如果加上<tbody>标签后,这个表格就要等表格内容全部下载完才会显示。,
- <tr>..</tr>表格的一行,所以有几对tr 表格就就行。
- <td>..</td>表格的一个单元格,一行中包含几对<td>..</td>,说明一行中就有几列。
- <th>..</th>表格的头部的一个单元格,表格表头
- 表格中列的个数,取决于一行中数据单元格的个数。
<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>pre标签的使用</title>
</head>
<body>
<table id = "ios第一个表格">
<tr>
<th>产品名称</th>
<th>品牌</th>
<th>库存量(个)</th>
<th>入库时间</th>
</tr>
<tr>
<td>耳机</td>
<td>联想</td>
<td>500</td>
<td>2013-1-8</td>
</tr>
<tr>
<td>产品名称</td>
<td>品牌</td>
<td>库存量(个)</td>
<td>入库时间</td>
</tr>
<tr>
<td>产品名称</td>
<td>品牌</td>
<td>库存量(个)</td>
<td>入库时间</td>
</tr>
</table>
</body>
</html>
总结:
2>表头,也就是th标签中的文本默认为粗体并且居中显示
3-6 用css样式, 为表格加入边框
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>为表格添加边框</title>
<style type="text/css">
table tr td,th{border:1px solid #000;}
</style>
</head>
<body>
<style type="text/css"> table tr td,th{border:1px solid #000;} </style>
上述代码是用 css 样式代码, 为
th
,
td
单元格添加粗细为一个像素的黑色边框。
3-7 caption标签, 为表格加入边框
表格还是需要添加一些标签进行优化, 可以添加 标题和摘要 。代码如下
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>认识table表标签</title>
<style type="text/css">
table tr td,th{
border:1px solid #000;
}
</style>
</head>
<body>
<table summary = "sss">
<caption>本表格记录2012年到2013年库存记录,记录包括U盘和耳机库存量</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>
摘要:
摘要内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化), 使搜索引擎更好的读懂表格内容,还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。
语法:<table summary="表格简介文本">
用以描述表格内容,标题的显示位置; 表格上方。
语法:
<table>
<caption>标题文本</caption>
<tr>
<td>…</td> <td>…</td> … </tr>…</table>