课程名称:初识HTML(5)+CSS(3)-升级版
课程章节: HTML5图片,链接及表格标签
主讲老师:五月的夏天
课程内容:
今天学习的内容包括: 图片标签img
和相关参数的使用,a
标签超链接以及相关参数的使用,table
表格标签以及嵌套标签的使用,thead
标签和tbody
标签以及tfoot
标签的使用。
课程收获:
img
标签的使用方法<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">
,其中src
指的是标识图像的位置;alt
用于指定图像的描述性文本,当图像不可见时(下载不成功时),可看到该属性指定的文本;title
用于提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本);图像可以是GIF
,PNG
,JPEG
格式的图像文件。
<a>
标签为网页添加超链接,使用方法<a href="目标网址" title="鼠标滑过显示的文本">链接显示的文本</a>
,title
属性的作用,鼠标滑过链接文字时会显示这个属性的文本内容。这个属性在实际网页开发中作用很大,主要方便搜索引擎了解链接地址的内容(语义化更友好),我们可以发现只要为文本加入a
标签后,文字的颜色就会自动变为蓝色(被点击过的文本颜色为紫色)。
a
标签有的target
属性,代表打开网页的方式。可选值为”_self
和_blank
”,默认值为_self
,代表在当前页面打开链接,_blank
代表在新窗口打开链接。
table
可以为网页添加表格,<table>…</table>
:整个表格以<table>
标记开始、</table>
标记结束。其中<tr>…</tr>
表示表格的一行,所以有几对tr
表格就有几行。<td>…</td>
表示表格的一个单元格,一行中包含几对<td>...</td>
,说明一行中就有几列。<th>…</th>
表示表格的头部的一个单元格,表格表头。表格中列的个数,取决于一行中数据单元格的个数。border
属性可以为表格添加边框,属性值为数字。
我们需要注意的是table
标签用来定义整个表格,为双标签,必须有结束标签,table
标签里面可以放caption
标签和tr
标签。caption
标签用来定义表格的标题。tr
标签用来设置表格的行,tr
里面只能放th或者td
标签,一组tr
标签代表一行。th
用来设置表格的标题,会加粗居中显示。也就是th标签中的文本默认为粗体并且居中显示。td
同来设置表格的列,一组td
标签代表一列。table
表格在没有添加border
属性之前, 在浏览器中显示是没有表格线的。
使用thead
、tbody
、tfoot
定义表格,<thead>
标签定义表格的表头。该标签用于组合 HTML
表格的表头内容。 tbody
包含行的内容下载完优先显示,不必等待表格结束后在显示,同时如果表格很长,用tbody
分段,可以一部分一部分地显示。<tfoot>
元素用于对 HTML
表格中的表注(页脚)内容进行分组。
今天学习了HTML5图片,链接及表格标签,共5个小结,花费了55分钟,学习了如何通过a标签实现网站的跳转和鼠标悬浮的显示,以及我在网站中可以使用table
标签制作一个表格数据,还有在网站中添加图片可以使用img
标签来实现效果。