备注:不要做无用功,注意学习效率是学习中要时刻提醒自己的事情。
你将创造出什么呢?
你在这里会看到怎么去创建HTML项目,首先我们会告诉你会做出什么,然后通过我们的引导,这样你就会完成了学习并且掌握住。
在这个课程里,你将会创建自己的社交网络个人资料。检查我们的练习文件 index.html。
练习题:
<!DOCTYPE html>
<html>
<head>
<title>金刚</title>
</head>
<body>
<img src="http://fenby.b0.upaiyun.com/Courses/HTML/1013411.jpg" />
<p>我是一个男性,89岁,攀登在帝国大厦上面</p>
<ul>
<li><p style="color:red">兴趣</p>
<ul>
<li style="font-family:Futura">香蕉</li>
<li style="font-family:Futura">攀登东西</li>
<li style="font-family:Futura">HTML</li>
</ul>
</li>
<li><p style="color:red">工作</p>
<ol>
<li style="font-family:Futura">巨型猿</li>
<li style="font-family:Futura">Web 开发人员</li>
</ol>
</li>
<li><p style="color:red">在哪里上学</p>
<ol>
<li style="font-family:Futura">父亲高中</li>
<li style="font-family:Futura">母亲高中</li>
<li style="font-family:Futura">哈佛大学</li>
<li style="font-size:18px; font-family:Futura">耶鲁大学</li>
</ol>
</li>
<li><p style="color:red">最喜欢的事情</p>
<ul>
<li style="font-family:Futura">喜欢爬上一个巨大的建筑.</li>
</ul>
</li>
</ul>
</body>
</html>
结果:
你有这个能力
你见过一个社交网站只是用HTML框架来构成的吗?
我们已经建立了您的个人资料页的基础知识,但其中的细节由你决定。首先,我们来完善关于你自己的页面。
说明
- 把你的名字放在
<title></title>
标签里。 - 把你喜欢的图片添加在
<body></body>
标签里。
练习题:
<!DOCTYPE html>
<html>
<head>
<title>一只洒鹿</title>
</head>
<body>
<p>这只鹿可还可爱???</p>
<img src="http://img4.duitang.com/uploads/blog/201401/21/20140121205336_EEmVh.thumb.600_0.gif">
</body>
</html>
结果:《lintcode》
关于你的一点
现在知道名字,喜欢什么,但是仅此而已。你的个人资料应该包含一些别的东西。
说明:
创建一个段落在你的照片下面,这次要加上你的年龄、性别、家乡、你的兴趣,最喜欢的事情,你住在哪里,在哪里工作,在哪个学校念书等等。
练习题:
<!DOCTYPE html>
<html>
<head>
<title>一只洒鹿</title>
</head>
<body>
<p>这只鹿可还可爱???</p>
<img src="http://img4.duitang.com/uploads/blog/201401/21/20140121205336_EEmVh.thumb.600_0.gif">
<!--这是一个解释段落-->
<p style="background-color:yellow">个人介绍</p>
<ul>
<li><strong>年龄:</strong>5岁</li>
<li><strong>性别:</strong>男孩子</li>
<li><strong>家乡:</strong>大象家</li>
<li><strong>兴趣:</strong>游泳</li>
<li><strong>喜欢:</strong>花又</li>
</ul>
</body>
</html>
结果:
小结
现在看起来像一个个人资料页面了。大多数的个人资料页面被划分成为了几部分:你的兴趣,最喜欢的事情,你的学校在哪里,你住的地方等等。我们完全可以根据这些做一个无序列表(这些前文其实已经做到了)。
说明:
将以上的代码进行扩展与优化,这是下一步练习要做的事情。
练习题:
<!DOCTYPE html>
<html>
<head>
<title>一只洒鹿</title>
</head>
<body>
<p>这只鹿的名字叫做鹿尤</p>
<img src="http://img4.duitang.com/uploads/blog/201401/21/20140121205336_EEmVh.thumb.600_0.gif">
<!--这是一个解释段落-->
<p style="background-color:yellow">个人介绍</p>
<ul>
<li><strong>年龄:</strong>5岁</li>
<li><strong>性别:</strong>男孩子</li>
<li><strong>家乡:</strong>大象家</li>
<li><strong>兴趣:</strong>游泳</li>
<li><strong>喜欢:</strong>花又</li>
<li><strong>居住地:</strong>杭州</li>
</ul>
</body>
</html>
列表中的列表
列表中的列表要求你在无序的列表中加入有序的列表,其实目的很明确,就是在标签中嵌套另一个标签,值得注意的是,最后一个打开的标签必须是第一个关闭的。
举个栗子:
<ul>
<li>感兴趣的
<ol>
<li>学习代码</li>
<li>观看篮球比赛</li>
<li>听音乐</li>
</ol>
</li>
</ul>
说明:
在此次的练习之中,至少有一个无序列表包含着有序列表。
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<ul>三件很重要的事情
<li>减肥
<ol>
<li>少吃东西</li>
<li>多多运动</li>
</ol>
</li>
<li>学习
<ol>
<li>多看书</li>
<li>做笔记</li>
</ol>
</li>
<li>关心家人
<ol>
<li>常打电话</li>
<li>多多视频</li>
<li>买礼物</li>
</ol>
</li>
</ul>
</body>
</html>
结果:
你所喜欢的字体
太完美了,你的个人资料已经快完成了。
它看起来仍然还是有些乏味,但值得庆幸的是你知道如何设置字体大小和字体类型,字体大小和颜色等等。这些你应该可以做到。
说明:
丰富您的网页设置不同的字体,大小和颜色。你可以选择任何你喜欢的组合,只要你使用font-family
、font-size
and color
至少各一次!
<!DOCTYPE html>
<html>
<head>
<title>个人资料</title>
</head>
<body style="background-color:pink">
<p style="text-align:center;font-size:30px;color:blue;background-color:white;font-family:KaiTi">大象动物乐园的小伙伴们</p>
<ol>
<li><p style="font-size:25px;color:green">鹿尤</p>
<a href="https://www.so.com/s?q=%E9%B9%BF%E5%B0%A4%E5%A3%81%E7%BA%B8&ie=utf-8&src=se7_newtab_new">
<img src="http://p1.so.qhmsg.com/t01ecd348d344bc82f6.jpg"></a>
<ul>
<li>特点:超可爱的长颈鹿</li>
<li>优点:个子高,心地善良</li>
</ul>
</li>
<li><p style="font-size:25px;color:green">花又</p>
<a href="http://image.so.com/i?src=360pic_strong&z=1&i=0&cmg=315d74ecf344895298372aa9c1a0c74e&q=%E9%B9%BF%E5%B0%A4%E7%9A%84%E8%8A%B1%E5%8F%88%E5%9B%BE%E7%89%87">
<img src="http://p1.so.qhmsg.com/bdr/_240_/t01b8d4828f96a0fc06.jpg">
</a>
<ul>
<li>特点:大眼睛的梅花鹿</li>
<li>优点:待人真诚</li>
</ul>
</li>
</ol>
</body>
</html>
结果:
粗体和斜体
在这里将粗体和斜体再次复习一遍,粗体和斜体的标签都是又开有闭的那种。
粗体:<strong>要加粗的内容</strong>
斜体:<em>要倾斜的内容</em>
注意:粗体和斜体直接在里面插入即可
回顾和介绍
在前面的学习中,已经学习了很多html的标签,已经介绍了:
- 如何创建一个html的框架
- 标题、段落、图片和超链接
- 字体颜色,大小和类型
- 背景颜色,文本位置,粗体和倾斜字体,字体类型
问题:
在下面的学习之中,主要对html之中的一些重要的结构<table>、<div>、<span>标签等进行学习。
下面首先进行一些简单的学习:
- 创建一个字体是宋体的标题
- 添加一些图片
- 添加第二张可以点击的图片,它是链接到一个网站的图片。
练习题:
<!DOCTYPE html>
<html>
<head>
<title>表格</title>
</head>
<body>
<h1>表格的制作
<p>
<img src="http://p0.so.qhmsg.com/bdr/_240_/t017dce7b877f9dd9c5.jpg">
<a href="http://www.baidu.com"><img src="http://p2.so.qhmsg.com/bdr/_240_/t01a70e667c639c29c7.jpg"></a>
</p>
</h1>
</body>
</html>
结果:
表格是什么
表格用的特别广泛。我们之所以用表格来存储数据,是因为表格易于阅读。
如果想整齐地展现一个表中的行数和呈现信息的列数,那就可以通过使用表格实现。
有很多html的标签都和表格相关,我们最首先学习的还是<table>标签,这是表格标签里的开始。
说明:
- 添加<table>标签在html的body标签里。
- 看到结果显示图之后,你会发现,没有明显的增加。这是因为我们添加的不够充分。
<html>
<head>
<title>表格</title>
</head>
<body>
<table><img src="http://p0.so.qhmsg.com/bdr/_240_/t015b7475f2c243894f.jpg"></table>
<table><img src="http://p2.so.qhimgs1.com/bdr/_240_/t017a5653884d0ab5ee.jpg"></table>
<table><img src="https://ps.ssl.qhimg.com/sdmt/180_135_100/t012f49d4f3284546b1.png"></table>
<table><img src="http://p0.so.qhmsg.com/bdr/_240_/t017dce7b877f9dd9c5.jpg"></table>
</body>
</html>
结果:
行信息
一个表格是由一堆信息组成的行和列。
我们使用<tr>标签来创建一行。我们将学习如何在短期内创建列(你不能在table标签中创建列,相反你告诉每一行有多少元素,这些元素的数量决定了你的列数)。
说明:
我们增加了一组<tr></tr>标记,在第9行。增加两行到表上第11行和第12行。
单列
练习题:
<html>
<head>
<title>表格</title>
</head>
<body>
<table border="1px">
<tr>
<td>一</td>
</tr>
<td>二</td>
<tr>
<td>三</td>
</tr>
<tr>
<td>三</td>
</tr>
</table>
</body>
</html>
结果:
添加第二列
现在来看看我们的页面,怎么样去添加第二列?可能看起来很有趣,因为只有第一行有两个单元格。让我们来解决的!
说明:
- 添加<td>标记到第二个<tr>标签里面设置值为1897例如:<td>1897</td>
- 添加<td>标记到第三个<tr>标签里面设置值为1935例如:<td>1935</td>
- 可以看见预览窗口,我们现在有一个共有2列和3行,每列有2个单元格。
- 我们现在有一个基本表。下一部分,我们讲解如何把标题添加到我们的表格里面。
练习题:
<html>
<head>
<title>创建表格</title>
</head>
<body>
<table border="1px">
<tr>
<td>金刚</td>
<td>1933</td>
</tr>
<tr>
<td>德古拉</td>
<td>1897</td>
</tr>
<tr>
<td>科学怪人的新娘</td>
<td>1935</td>
</tr>
</table>
</body>
</html>
结果:
表头:
我们已经添加了<thead>在<tbody>之上。它将固定每个列的标题。
你要添加文本在<thead>里面类似<tbody>一样;
<thead>
<tr>
<th>
名称
</th>
<th>
喜欢的颜色
</th>
</tr>
</thead>
- 首先我们添加一个打开的
<thead>
标签在表格里面。 - 接下来我们添加一个
<tr>
标签。 - 在此之后,添加一个
<th></th>
列标题。请注意,我们使用<th></th>
为表格标题,而不是单元格<td> </td>
。 - 然后设置
<th></th>
标题是最喜欢的颜色。 - 最后,我们关闭该元素结束
</tr>
标记,并关闭了该表的标题元素</thead>
。
说明
我们现在已经准备好<thead></thead>
元素,
- 在
<thead>
标签里使用<tr></tr>
标签添加一行。 - 在此行中,添加两个
<th></th>
单元格,一个是著名怪物,另外一个是出生年份。
练习题:
<html>
<head>
<title>创建表格</title>
</head>
<body>
<table border="1px">
<thead>
<tr>
<th>著名怪物</th>
<th>出生年月</th>
</tr>
</thead>
<tr>
<td>金刚</td>
<td>1933</td>
</tr>
<tr>
<td>德古拉</td>
<td>1897</td>
</tr>
<tr>
<td>科学怪人的新娘</td>
<td>1935</td>
</tr>
</table>
</body>
</html>
结果:
给你的表格命名
在上一个练习中,我们为表格添加了一个title,“怪物出生年月”。
但是这个表格的标题看起来怪怪的,它应该是从左到右贯穿两列才对,我们应该怎么做?
这就要用到表格的另一个属性:
colspan="?"
比如这样:
<th colspan="3">标题会贯穿3列哟</th>
说明:
将这个表格的标题贯穿2列
练习题:
<html>
<head>
<title>表格</title>
</head>
<body>
<table border="1px">
<thead>
<tr>
<th colspan="2">怪物出生年月</th>
</tr>
<tr>
<th>著名怪物</th>
<th>出生年月</th>
</tr>
</thead>
<tbody>
<tr>
<td>金刚</td>
<td>1933</td>
</tr>
<tr>
<td>德古拉</td>
<td>1897</td>
</tr>
<tr>
<td>科学怪人的新娘</td>
<td>1935</td>
</tr>
</tbody>
</table>
</body>
</html>
结果: