课程名称：初识HTML(5)+CSS(3)-升级版
课程章节：第5章 HTML5图片，链接及表格标签
主讲老师：五月的夏天
课程内容：
今天学习的内容包括：
给网页添加图片
a标签超链接
target属性
表格标签
编程练习
课程收获：
img标签
在网页的制作中为使网页炫丽美观，肯定是缺少不了图片，可以使用<img>标签来插入图片。
语法：
< img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="图片地址" alt="下载失败时的替换文本" title = "提示文本">
举例：
< img src = "myimage.gif" alt = "My Image" title = "My Image" />
讲解：
1、src：标识图像的位置；
2、alt：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本；
3、title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；
4、图像可以是GIF，PNG，JPEG格式的图像文件。
a标签
使用<a>标签可实现超链接，它在网页制作中可以说是无处不在，只要有链接的地方，就会有这个标签。
语法：
<a href=" " title="鼠标滑过显示的文本">链接显示的文本</ a>
例如：
<a href="http://www.imooc.com" title="点击进入慕课网">click here!</ a>
上面例子作用是单击click here!文字，网页链接到http://www.imooc.com这个网页。
title属性的作用，鼠标滑过链接文字时会显示这个属性的文本内容。这个属性在实际网页开发中作用很大，主要方便搜索引擎了解链接地址的内容（语义化更友好），如右侧案例代码（11-13行）。
注意：还有一个有趣的现象不知道小伙伴们发现了没有，只要为文本加入a标签后，文字的颜色就会自动变为蓝色（被点击过的文本颜色为紫色），颜色很难看吧，不过没有关系后面我们学习了css样子就可以设置过来（a{color:#000}),后面会详细讲解。
<a>标签中的target属性
a标签有的target属性，代表打开网页的方式。可选值为”_self和_blank”，默认值为_self，代表在当前页面打开链接，_blank代表在新窗口打开链接。
创建表格的四个元素：table、tr、th、td
1、<table>…</table>：整个表格以<table>标记开始、</table>标记结束。
2、<tr>…</tr>：表格的一行，所以有几对tr 表格就有几行。
3、<td>…</td>：表格的一个单元格，一行中包含几对<td>...</td>，说明一行中就有几列。
4、<th>…</th>：表格的头部的一个单元格，表格表头。
5、表格中列的个数，取决于一行中数据单元格的个数。
6、border属性可以为表格添加边框，属性值为数字。
注意：
1、table标签用来定义整个表格，为双标签，必须有结束标签。
2、table标签里面可以放caption标签和tr标签。
3、caption标签用来定义表格的标题。
4、tr标签用来设置表格的行，tr里面只能放th或者td标签，一组tr标签代表一行。
5、th用来设置表格的标题，会加粗居中显示。也就是th标签中的文本默认为粗体并且居中显示。
6、td同来设置表格的列，一组td标签代表一列。
7、table表格在没有添加border属性之前, 在浏览器中显示是没有表格线的。
编程练习
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>img图片</title> </head> <body> <p>1922年的春天，一个想要成名名叫尼克•卡拉威（< a href="http://www.m1905.com/mdb/star/3316/">托比•马奎尔Tobey Maguire </ a>饰）的作家，离开了美国中西部，来到了纽约。那是一个道德感渐失，爵士乐流行，走私为王，股票飞涨的时代。为了追寻他的美国梦，他搬入纽约附近一海湾居住。</p > <p>菲茨杰拉德，二十世纪美国文学巨擘之一，兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为"爵士乐时代"吟唱华丽挽歌，其诗人和梦想家的气质亦为那个奢靡年代的不二注解。</p > < img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://img1.sycdn.imooc.com//52da54ed0001ecfa04120172.jpg"title="电影介绍"> </body> </html>
编程练习
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>a标签</title> </head> <body> <ul> <li><a href="#" title="前端开发面试心法">前端开发面试心法</a> </li> <li><a href="#" title="零基础学习html">零基础学习html</a></li> <li><a href="#" title="JavaScript全攻略">JavaScript全攻略</a></li> </ul> <p>1922年的春天，一个想要成名名叫尼克•卡拉威（<a href="
共同学习，写下你的评论
评论加载中...
作者其他优质文章
