#HTML超文本（一） ##2.1.1 给文字及图片添加超链接首先我们还是回顾一下最简单的链接使用，直接给文字添加链接到网页和另外的HTML文件。 ![图片描述](https://dn-simplecloud.shiyanlou.com/uid/386749/1523456395831.png-wm) 这是最简单的超链接,接下来我们就来让这个HTML文件链接到另一个HTML文件。（在相同的文件夹，再添加一个HTML文件），然后下面是HTML内容和结果 ![图片描述](https://dn-simplecloud.shiyanlou.com/uid/386749/1523456405126.png-wm) ![图片描述](https://dn-simplecloud.shiyanlou.com/uid/386749/1523496205192.png-wm) ##2.1.2 超链接的打开方式打开方式分为在本页打开和在新的浏览器窗口打开，默认情况下，超级链接打开新页面的方式是自我覆盖（就是在本页打开）。根据浏览者的不同需要，读者可以指定超级链接的其他打开新窗口的方式。超级链接标签提供了target属性进行设置，取值分别为_self（自我覆盖，默认）、_blank（创建新窗口打开新页面）。下面我们就来动手区分下这两个属性的区别（由于我们已经写过默认的情况，这里我们就只添加_blank属性）在前面的基础上我们在< a>标签加入target属性：target="_blank" ![图片描述](https://dn-simplecloud.shiyanlou.com/uid/386749/1523496220664.png-wm) ##2.1.3 超链接添加提示文字有些时候超链接文字不足以说明点击以后所要链接的内容，所以这个时候我们就需要给超链接添加提示文字，加以描述下一个链接的内容，当光标停留在超链接上时，提示语言就会显现，会让页面显现的很简介。设计到的属性就是title，下面我们再来动手实验一把下面就是实验内容和效果在前面的基础上，< a>标签加上title属性：title="this word will link to the web of shiyanlou" ![图片描述](https://dn-simplecloud.shiyanlou.com/uid/386749/1523496235076.png-wm) ##2.1.4 超链接实现书签也许你在网页看过小说，当你在页首点击章节的题目，就会自动的跳转到相应的章节，这是怎样实现的呢？。要实现书签，你就要了解，什么是锚（anchor）。锚（anchor）是引自于船只上的锚，锚被抛下后，船只就不容易飘走、迷路。实际上锚就是用于在单个页面内不同位置的跳转，有的地方叫做书签。涉及到的标签当然还是< a>标签,超级链接标签的name属性用于定义锚的名称，一个页面可以定义多个锚，通过超级链接的href属性可以根据name跳转到对应的锚。如下实现跳转： ![实验楼](https://dn-simplecloud.shiyanlou.com/3867491523495861629-wm) ![图片描述](https://dn-simplecloud.shiyanlou.com/uid/386749/1523496674936.png-wm) ##2.2 HTML表格 HTML 網頁設計不可或缺的元素就是表格（Table），通常表格用來做版面的排版，而表格的用法包含了幾個重要的标签，分別是 table、tr 與 td 這幾個重點，組合起來才是個完整的表格，表格由 < table> 标签来定义。每个表格均有若干行（由 < tr> 标签定义），每行被分割为若干单元格（由 < td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。< th>标签用来定义表头。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。 ![实验楼](https://dn-simplecloud.shiyanlou.com/3867491523497550934-wm) 下面我们再介绍表格两个属性： colspan：控制此单位所占列数 rowspan：控制此单位所占行数 ![图片描述](https://dn-simplecloud.shiyanlou.com/uid/386749/1523518479168.png-wm) 标签：< th>表头< /th>：设置表头标签：< caption>标题< /caption>：设置表的标题属性：cellpadding="..."设置单元格边距属性：bgcolor="..."设置表格背景颜色属性：background="..." 以某张图片作为表格背景标签：< th>表头< /th>：设置表头标签：< caption>标题< /caption>：设置表的标题属性：cellpadding="..."设置单元格边距属性：bgcolor="..."设置表格背景颜色属性：background="..." 以某张图片作为表格背景标签：< th>表头< /th>：设置表头标签：< caption>标题< /caption>：设置表的标题属性：cellpadding="..."设置单元格边距属性：bgcolor="..."设置表格背景颜色属性：background="..." 以某张图片作为表格背景 ##2.3 HTML图像 ![实验楼](https://dn-simplecloud.shiyanlou.com/3867491523518957253-wm) ![图片描述](https://dn-simplecloud.shiyanlou.com/uid/386749/1523519341957.png-wm) ![图片描述](https://dn-simplecloud.shiyanlou.com/uid/386749/1523519681564.png-wm)

“HTML基础入门”实验报告