[Codecademy] HTML&CSS 第五课：HTML Basics III
本文出自 http://blog.csdn.net/shuangde800
[Codecademy] HTML && CSS课程学习目录
------------------------------------------------------------------------------------------------
Introduction（介绍 ）
我们目前的html之旅非常顺利，已经学了：
1. 怎样创建html文件的基本结构
2. 标题，段落，图片和链接
3. 字体颜色，尺寸和类型
4. 背景颜色，文本对齐，粗体和斜体
这节课，我们将学习html重要的一部分：<table>，<div>和<span>
Tables（表格）
表格非常有用，我们用表格来存储可以制成表格的数据，可以让可读性更强
。
如果你想把数据分成几行和几列来表示，那么就要用到<table>了。
有很多其它标签来和<table>一起配合使用，他们都包含在<table></table>里面：
<tr> </tr>
（tr = table row）增加一行 ：
我们使用<tr>来创建表格的一行。事实上，我们并不是直接划分列，而是在每一行里再添加一些格子（cell）。
<td> </td>
(td = table data) 在一行中增加一个格子 (cell），有几个<td>，这一行就被分成了几列。
例如：
<html>
<head>
<title>Table Time</title>
</head>
<body>
<table border="1px">
<tr>
<td>King Kong</td>
<td>1933</td>
</tr>
<tr>
<td>Dracula</td>
<td>1897</td>
</tr>
<tr>
<td>Bride of Frankenstein</td>
<td>1935</td>
</tr>
</table>
</body>
</html>
效果：
![[Codecademy] HTML&CSS 第五课：HTML Basics III_第1张图片](http://img.e-com-net.com/image/info5/eb64a77b650e4a52bfe57dfbfa817071.png)
Head of the table(表头)
我们已经知道在html中<head>表示一个页面的信息（比如标题），而<body>包含了页面的正文内容。
而table中的<thead>和<tbody>的功能与之类似。<thead>可以看做与表格相关的信息，<tbody>是表格的真正内容。
<thead> </thead> 表格的表头
<tbody> </tbody> 表格主体
<thead>标签添加在<tbody>上面，为什么要用这个呢？要记住把表格的表头和表主体分隔开来总是一个好习惯，因为这样可以帮助我们用CSS来配置表格风格。
注意，<thead></thead>里的行标签是
<th></th>
<html>
<head>
<title>Table Time</title>
</head>
<body>
<table border="1px">
<thead>
<tr>
<th>Famous Monster</th>
<th>Birth Year</th>
</tr>
</thead>
<tbody>
<tr>
<td>King Kong</td>
<td>1933</td>
</tr>
<tr>
<td>Dracula</td>
<td>1897</td>
</tr>
<tr>
<td>Bride of Frankenstein</td>
<td>1935</td>
</tr>
</tbody>
</table>
</body>
</html>
![[Codecademy] HTML&CSS 第五课：HTML Basics III_第2张图片](http://img.e-com-net.com/image/info5/dec7a09f864a4051b9b02c1ed84af0bd.png)
Naming your table（给表格取名）
给表格使用colspan属性，可以让表格占几列的空间，例如：
<th colspan="3">
3 columns across!
</th>
这一列将会占用3列的空间
例如：
<html>
<head>
<title>Table Time</title>
</head>
<body>
<table border="1px">
<thead>
<tr>
<th colspan="2">Famous Monsters by Birth Year</th>
</tr>
<tr>
<th>Famous Monster</th>
<th>Birth Year</th>
</tr>
</thead>
<tbody>
<tr>
<td>King Kong</td>
<td>1933</td>
</tr>
<tr>
<td>Dracula</td>
<td>1897</td>
</tr>
<tr>
<td>Bride of Frankenstein</td>
<td>1935</td>
</tr>
</tbody>
</table>
</body>
</html>
效果：
![[Codecademy] HTML&CSS 第五课：HTML Basics III_第3张图片](http://img.e-com-net.com/image/info5/7100fe9824ac465d8c9355fa6b9dfd0b.png)
Style that head!（给表格设置外观属性）
就和段落<p>一样，也可以让表格制定更多的外观属性，例如：
<th style="font-size:12px; color:red">
</th>
'Div'ide and conquer（div）
<div>是功能最强大最好用的一个结构标签之一，div是division的缩写，它可以把你的页面分成几部分放在容器里面，这将会在之后学习CSS时很有用：可以给网页的不同部分独立的定制风格。
Link it!
就和其他一样，也可以让整个div块变成一个可以点击有链接的，只要放在有链接的<a>标签之间即可
例如，下面利用div设置了4个颜色块，并且点击黄色快，会掉转到链接
<!DOCTYPE html> <html> <head> <title>Result</title> </head> <body> <div style="width:50px; height:50px; background-color:red"></div> <div style="width:50px; height:50px; background-color:blue"></div> <div style="width:50px; height:50px; background-color:green"></div> <a href = "http://blog.csdn.net/shuangde800"> <div style="width:50px; height:50px; background-color:yellow"></div></a> </body> </html>
效果：
![[Codecademy] HTML&CSS 第五课：HTML Basics III_第4张图片](http://img.e-com-net.com/image/info5/3bb3fc7596994169b7a94d8c917058e3.png)
Spantastic（span）
<div>可以让你分割你的页面，然后单独的定制每一块的风格。
而<span>可以让你控制页面更小部分的风格，例如，你可以让一行字中的某个单词变成红色。
例如，下面只把一段英语句子中的red这个单词变成红色：
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<p>This text is black, except for the word <span style="color:red">red</span>!</p>
</body>
</html>
效果：
Span is the man
就像<p>一样，颜色只是<span>中的一种属性，除此之外还可以控制字体大小，字体类型等，只要你喜欢。