HTML 链接，图像，表格

链接

<a> 标签使用超链接可以与网络上的另一个文档相连，点击链接就可以跳转到另一个页面。

链接标签中可以是文字，图片等，点击这些内容就可以跳到另一个页面或者当前页面的某个位置，当鼠标移动到链接时或出现一个小手，链接地址是通过href属性实现的，也必须有href属性。

格式：

<a href="URL地址">链接文本</a>

链接id属性：

1. 创建一个带有属性id的链接，属性值时top。

<a id="top">跳到这里</a>   

2. 创建一个带有href的属性的链接标签，属性值是#top。

<a href="#top">点击此处</a> 

3. 如果是要跳到另一个页面的的某个位置。

<a href="url地址#链接位置">访问有用的提示部分</a>

链接常用属性：

属性	描述
download	指定下载链接
href	规定链接目标的URL地址
hreflang	规定href属性的基准语言，只有href属性存在时使用
rel	当前文档与URL之间的关系，只有href存在时使用
target	规定怎么打开URL链接地址，_blank：新窗口打开。_parent：在父窗口中打开链接。_self：默认，当前页面跳转。_top：在当前窗体打开链接，并替换当前的整个窗体(框架页)。
type	规定URL的MME类型只有href存在时使用

img标签

<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签，如果要在页面显示图像，就需要src属性，属性值是图片地址。

语法

<img src="url地址" alt="text">

alt属性为图像定义一个可替换的图像文本，在浏览器无法加载出图片时，浏览器就会显示着替换的文本，为图像加上一个替换文本有助于形成良好的开发。

注意：height与width属性用于设置图像的高度与宽度，如果图像有指定的高度和宽度，加载时就会完全显示，如果没有则会破环图像，只显示替换的文本。

表格

<table> 标签来定义表格，表格可以有 <tr> 标签定义若干行 ，每行由 ==<td>==标签定义若干列，<td> 也就是存入数据的表格，可以存入文本、图片、列表、段落、表单以及自己表格等。

示例：

border是边框属性，用于是否显示边框以及粗细，数字越大边框越宽。

表头

表头用 <th> 标签定义，表头往往是居中粗体显示。

示例：

标题

<caption> 用于定义表格的标题。

示例：

 <table border="1">
        <caption>这是一个标题</caption>
        <tr>
            <th>表头1</th>
            <th>表头2</th>
        </tr>
        <tr>
            <td>行1列1</td>
            <td>行1列2</td>
        </tr>
        <tr>
            <td>行2列1</td>
            <td>行2列2</td>
        </tr>
    </table>

定义表格组

<colgroup> 定义表格组，对表格内的列进行组合，可以对其格式化，通过<co该标签可以对整个列进行样式改变，不需要重复获取每个列。该标签必须在标签内除标题外最前面。

<col> 不是一个闭合标签，该标签是在<colgroup>标签内部，对每个列设置样式。在通过 span 属性横跨多少列数。

示例：

    <table border="1">
        <caption>这是一个标题</caption>
        <colgroup>
            <col span="2" style="background-color: red;">
            <col style="background-color:rgb(0, 255, 128);">
        </colgroup>
        <tr>
            <th>表头1</th>
            <th>表头2</th>
            <th>表头3</th>
        </tr>
        <tr>
            <td>行1列1</td>
            <td>行1列2</td>
            <th>行1列3</th>
        </tr>
        <tr>
            <td>行2列1</td>
            <td>行2列2</td>
            <th>行2列3</th>
        </tr>
    </table>

表格其他子标签

标签	说明
<thead>	定义表格的页眉
<tbody>	定义表格的身体
<tfoot>	定义表格的页脚

这些标签不会影响表格的布局，只是用来标注，可以大大减少对表格样式操作的繁琐。

表格属性

属性	说明
border	定义表格边框的宽度
cellpadding	单元格边沿与其内容之间的空白间隙
cellspacing	规定单元格之间的间隙
frame	规定外边框那部分显示
rules	规定内测边框哪部分显示
width	规定表格的宽度

    <!-- 
        frame的属性值：
        rhs	显示右边的外侧边框。
        box	在所有四个边上显示外侧边框。
        border	在所有四个边上显示外侧边框。
        void	不显示外侧边框。
       above	显示上部的外侧边框。
       below	显示下部的外侧边框。
       hsides	显示上部和下部的外侧边框。
       vsides	显示左边和右边的外侧边框。
       lhs	显示左边的外侧边框。
     -->
    <table border="1" cellpadding="15" cellspacing="10" frame="lhs">
        <caption>这是一个标题</caption>
        <tr>
            <th>表头1</th>
            <th>表头2</th>
            <th>表头3</th>
        </tr>
        <tr>
            <td>行1列1</td>
            <td>行1列2</td>
            <th>行1列3</th>
        </tr>
        <tr>
            <td>行2列1</td>
            <td>行2列2</td>
            <th>行2列3</th>
        </tr>
    </table>

在对表格边框进行样式变化时，最好别这样做，可以通过css的边框样式改变。