HTML5+CSS3——第5章 HTML5图片、链接及表格标签

字号+ 编辑: Snake 修订: SyncLWT 来源: 慕课网 2023-09-08 我要说两句(0)

本文给大家介绍HTML5如何使用各种标签为网页添加图片、超链接、表格……

5-1 使用<img>标签为网页添加图片

在网页的制作中为使网页炫丽美观,肯定是缺少不了图片,可以使用<img>标签来插入图片。

语法:<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">

举例:

<img src = "myimage.gif" alt = "My Image" title = "My Image" />

1、src:标识图像的位置;

2、alt:指定图像的描述性文本,当图像不可见时(下载不成功时),可看到该属性指定的文本;

3、title:提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本);

4、图像可以是GIF,PNG,JPEG格式的图像文件。

 图片44.jpg图片45.jpg

5-2 使用<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}),后面会详细讲解。

5-3 在新建浏览器窗口中打开链接

我们这一章节来学习<a>标签中的target属性,可以先看一个例子:

图片46.jpg 

我们要实现这样的效果,可以输入以下代码:

 图片47.jpg

a标签有的target属性,代表打开网页的方式。可选值为”_self和_blank”,默认值为_self,代表在当前页面打开链接,_blank代表在新窗口打开链接。

5-4 使用table标签为网页添加表格

在网页当中添加一些数据,如某公司想展示该公司员工的通信录,如下表:

 图片38.jpg

需要用到表格标签, 这些标签有什么特点呢?想要在网页中实现以上效果,我们可以使用以下代码:

 图片39.jpg图片40.jpg

创建表格的四个元素: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属性之前, 在浏览器中显示是没有表格线的。

5-5 使用thead、tbody、tfoot定义表格

用<table>标签家族来定义一个表格,使用<tr>标签来定义表格的行,<th>和<td>来定义表格的列。

接下来用<thead>标签定义表格头部,<tbody>标签来定义表格的内容,<tfoot>来定义表格的底部。

创建表格的三个区域:thead、tbody、tfoot

我们想实现一个成绩表,各科成绩和总分,效果如下图:

 图片41.jpg

表格第一行为表头数据,用<thead>标签包裹,中间的科目和分数为表格的主体内容,用<tbody>标签包裹,总分用<tfoot>标签包裹。

1、<thead> 标签定义表格的表头。该标签用于组合 HTML 表格的表头内容。

2、<tbody>…</tbody>:如果不加<thead><tbody><tfooter> , table表格加载完后才显示。加上这些表格结构, tbody包含行的内容下载完优先显示,不必等待表格结束后在显示,同时如果表格很长,用tbody分段,可以一部分一部分地显示。(即table 可以按结构一块块的显示,不再等整个表格加载完后显示。)

3、<tfoot> 元素用于对 HTML 表格中的表注(页脚)内容进行分组。

4、thead、tfoot 以及 tbody 元素使您有能力对表格中的行进行分组。创建某个表格时,希望拥有一个标题行,一些带有数据的行,以及位于底部的一个总计行。这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。当长的表格被打印时,表格的表头和页脚可被打印在包含表格数据的每张页面上。

图片42.jpg

阅完此文,您的感想如何?
  • 有用

    0

  • 没用

    0

  • 开心

    0

  • 愤怒

    0

  • 可怜

    0

1.如文章侵犯了您的版权,请发邮件通知本站,该文章将在24小时内删除;
2.本站标注原创的文章,转发时烦请注明来源;
3.交流群: PHP+JS聊天群

相关课文
  • 上传自定义文件的时候查如何填写上传表单中的access, mimeType等字段值

  • HTML5+CSS3——第6章 HTML5表单标签,与浏览者交互

  • HTML5+CSS3——第4章 HTML5列表标签

  • HTML5+CSS3——第3章 HTML5效果标签

我要说说
网上宾友点评