[Codecademy] HTML&CSS 第五课：HTML Basics III-优快云博客

本文链接：https://blog.youkuaiyun.com/shuangde800/article/details/11555637

本文出自 http://blog.youkuaiyun.com/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>

效果：

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>

效果：

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>

效果：

Style that head!（给表格设置外观属性）

就和段落<p>一样，也可以让表格制定更多的外观属性，例如：

'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.youkuaiyun.com/shuangde800">
		<div style="width:50px; height:50px; background-color:yellow"></div></a>
	</body>
</html>

效果：

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>

效果：