寒假Day35：HTML表格+图像+超链接

表格

表格的基本标签：（必须要有）

• table标签（表格）
• tr标签（行）
• td标签（单元格）

另外：

表格标题<caption>

单元格内部的表头<th> ，默认样式：粗体和居中

此外：

写了和没写在浏览器中没有区别，但是对于逻辑性是有的是这三个标签，用以区别表头表身和表脚。

<thead>  <tbody>  <tfoot>

具体格式：

<table>

　　<caption>表格标题</caption>

　　<thead>
　　　　<tr>
　　　　　　<th>one</th>
　　　　　　<th>two</th>
　　　　</tr>
　　</thead>

　　 <tbody>
　　　　<tr>
　　　　　　<td>1111</td>
　　　　　　<td>2222</td>
　　　　</tr>
　　　　<tr>
　　　　　　<td>3333</td>
　　　　　　<td>4444</td>
　　　　</tr>
　　</tbody>

　　<tfoot>
　　　　<!-- 这边往往用于统计数据-->
　　</tfoot>


</table>

浏览器显示如图：

合并行：

在tr之间和td并列的地方插入

<td rowspan="需要合并的行数">内容</td>

注意：需要合并的行数是指该行（包括该行）往下计算

和并列同理：

<td colspan="需要合并的列数">内容</td>

图像

使用标签<img/>（自闭合标签）

该标签的三个属性

src：图像源文件所在路径（不可少）

<img src="路径"/>

alt：图片无法显示时候的提示文字（不可少），设置图片描述信息，给搜索引擎看

title：鼠标移动到图片上的提示文字（值一般=alt），给用户看

<img src="路径" alt="描述(给搜索引擎看)" title="描述(给用户看)">

绝对路径：完整路径

相对路径：相当于当前网页定位到的图片位置；系统自动生成的都是相对路径；对于一个网站来说，外部文件或图片的引用都是使用相对路径，几乎不用绝对路径。

../ ：表示上一级目录（但是mac里面好像使用\+空格形成转义符来用的，忘了？？？）

网页图片分成：

位图：放大缩小会失真，jpg、png、gif，组成单位像素

矢量图：放大缩小不会失真，ai、cdf、fh、swf，组成单位数学向量。

超链接

超链接两种方式：外部链接、内部链接（内部页面链接、锚点链接）

外部链接

<a>标签

<a href="链接地址" target="目标窗口的打开方式">超链接文字</a>

打开方式：（即<a>标签的target属性）

_self：当前窗口打开

_blank：新窗口打开

内部链接：

与自身网站有关的链接，链接地址直接输出相对路径即可

锚点链接：

链接对象：当前页面的某一个部分。

就类似于博客的右边有一个小方框导航栏，按到哪一个就会滑动到当前页面的哪一块中

需要设置：目标锚点的id名称和超链接部分。

超连接部分放在开头即可：

<div>
        <a href="#book">文档</a><br />
        <a href="#pic">图片</a><br />
        <a href="#article">文章</a><br />
</div>

目标锚点：

<div id="目标锚点id名称">

例如：

<div id="book">