好贷网好贷款

[Codecademy] HTML&CSS 第五课:HTML Basics III

发布时间:2016-12-3 2:02:16 编辑:www.fx114.net 分享查询网我要评论
本篇文章主要介绍了"[Codecademy] HTML&CSS 第五课:HTML Basics III",主要涉及到[Codecademy] HTML&CSS 第五课:HTML Basics III方面的内容,对于[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> 效果:   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>一样,也可以让表格制定更多的外观属性,例如: <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> 效果: 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>中的一种属性,除此之外还可以控制字体大小,字体类型等,只要你喜欢。  

上一篇:Android使用代码来写布局实例
下一篇:C#-winform-MD5加密

相关文章

相关评论