HTML超文本（一）一、实验介绍 1.1 实验内容和普通文本不同，html被称为超文本(hypertext),之所以被称为超文本，是因为其中的超链接（也就是我们平常说的链接）能够指向其他资源。本次试验我们就来学习HTML超链接及相关其他内容。 1.2 实验知识点 HTML链接 HTML表格 HTML图像二、实验步骤写在前面：因为这节要方便实现图片的调用，从这一章我们就可以使用环境中的开发软件Brackets（方便补全和查看），但是没有google chrome，不能实时预览，但至少，还有补全。打开开发环境以后我们在桌面新建一个文件夹，以后我们工程的所有要用的东西就放在里面，方便调用。 2.1 HTML链接之所以你可以在浏览器屏幕上单击鼠标或在键盘上按下按键，从而选择并自动跳转到文档中自己感兴趣的那个主题，或跳转到世界上某处完全不同的集合中的某个文档。那是因为你点击的这就是超链接相信大家对超链接不会陌生吧，天天都不知道点了多少个呢。超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，你可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。我们在前面的例子中只简单使用了< a>标签，用字符作为网页的超链接，还使用< a>实现了发送邮件的功能。下面我们要讲到的都是关于< a>标签的属性我们这就详细来讲解HTML链接： 2.1.1 给文字及图片添加超链接首先我们还是回顾一下最简单的链接使用，直接给文字添加链接到网页和另外的HTML文件。 HTML内容如下 ![图片描述](https://dn-simplecloud.shiyanlou.com/uid/389283/1522669608547.png-wm) 这是最简单的超链接,接下来我们就来让这个HTML文件链接到另一个HTML文件。（在相同的文件夹，再添加一个HTML文件），然后下面是HTML内容和结果 ![图片描述](https://dn-simplecloud.shiyanlou.com/uid/389283/1522669897076.png-wm) 2.1.2 超链接的打开方式打开方式分为在本页打开和在新的浏览器窗口打开，默认情况下，超级链接打开新页面的方式是自我覆盖（就是在本页打开）。根据浏览者的不同需要，读者可以指定超级链接的其他打开新窗口的方式。超级链接标签提供了target属性进行设置，取值分别为_self（自我覆盖，默认）、_blank（创建新窗口打开新页面）。下面我们就来动手区分下这两个属性的区别（由于我们已经写过默认的情况，这里我们就只添加_blank属性）在前面的基础上我们在< a>标签加入target属性：target="_blank" ![图片描述](https://dn-simplecloud.shiyanlou.com/uid/389283/1522670145059.png-wm) 2.1.4超链接实现书签也许你在网页看过小说，当你在页首点击章节的题目，就会自动的跳转到相应的章节，这是怎样实现的呢？。要实现书签，你就要了解，什么是锚（anchor）。锚（anchor）是引自于船只上的锚，锚被抛下后，船只就不容易飘走、迷路。实际上锚就是用于在单个页面内不同位置的跳转，有的地方叫做书签。涉及到的标签当然还是< a>标签,超级链接标签的name属性用于定义锚的名称，一个页面可以定义多个锚，通过超级链接的href属性可以根据name跳转到对应的锚。跳转起始字符 ... ... ... 跳转目的地字符下面我们就来具体的实现下： HTML

HTML LEARNING

HTML chaowenben 1

HTML chaowenben 2

HTML shiyan

chapter 1 chushi HTML

lalalaalalal

chapter 2 wenben HTML

lalalaalalal

chapter 3 chaowenben 1 HTML

lalalaalalal

chapter 4 chaowenben 2 HTML

lalalaalalal

chapter 5 shiyan HTML

lalalaalalal

![图片描述](https://dn-simplecloud.shiyanlou.com/uid/389283/1522670380117.png-wm) 2.2 HTML表格 HTML 網頁設計不可或缺的元素就是表格（Table），通常表格用來做版面的排版，而表格的用法包含了幾個重要的标签，分別是 table、tr 與 td 這幾個重點，組合起來才是個完整的表格，表格由 < table> 标签来定义。每个表格均有若干行（由 < tr> 标签定义），每行被分割为若干单元格（由 < td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。< th>标签用来定义表头。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。下面我们动手来写一个简单HTML文件来练习这几个标签： TABLE

table practice

first row and first column	first row and second column	first row and third column
second row and first column	second row and second column	second row and third column

![图片描述](https://dn-simplecloud.shiyanlou.com/uid/389283/1522670428070.png-wm) 下面我们再介绍表格两个属性： colspan：控制此单位所占列数 rowspan：控制此单位所占行数 TABLE

table practice

first row and first column
second row and first column	second row and second column	second row and third column
	third row and first column	third row and second column

如果不是很理解，我们就来看看在网页上的表现，对比起来有助于我们理解。让第一列第一行这个单位占两列，让第二行第一列这个单位占两行，就是这个效果。 ![图片描述](https://dn-simplecloud.shiyanlou.com/uid/389283/1522670467356.png-wm) 表格还有很多细节可以定义,我们早这里就简单叙述，大家需要动手练习：标签：< th>表头< /th>：设置表头标签：< caption>标题< /caption>：设置表的标题属性：cellpadding="..."设置单元格边距属性：bgcolor="..."设置表格背景颜色属性：background="..." 以某张图片作为表格背景 2.3 HTML图像上面我们简单提到过用图像作为链接使用，接下来我们来详细讲述下图像的应用。一般我们用到的就是插入图片，将图片多为背景，再者将图片作为链接。涉及到的标签就是< img>< /img> 接下来我们就动手开始写一个HTML文件加深了解首先我们用浏览器在网页上下载几张图片（放到和HTML文件一个文件夹中）供后面使用。 1.先设置一张图片为网页背景图片在body 属性中加入background属性添加背景图片 ![图片描述](https://dn-simplecloud.shiyanlou.com/uid/389283/1522670630331.png-wm) 2.举例插入一张图片写法如下这时我们可以看出，字体和图片的低端是对齐的，下面我们就来调整下对齐方式 3.添加属性调整图片的对齐方式在< img>标签中加入align属性，调整对齐。相对字体的上下可以加的参数有 bottom、middle、top，默认就是我们刚看见的bottom 相对字体左右可加的参数有right，left默认为right 下面我们直接来比较下： image test

let's have an example

align top

align middle

align left

![图片描述](https://dn-simplecloud.shiyanlou.com/uid/389283/1522671088740.png-wm) 4.调整插入图片尺寸大多数的尺寸都没有那么合适，直接插入以后会破换整体页面的效果。所以在插入图片时，很有必要控制其尺寸，这是很容易办到的，就还需要在< img>标签中加入width height 两个属性。那我们顺势就控制下上面的那几副图吧 width="80" height="80" 5.创建图像映射在这之前我们动手试验过将图片作为链接来使用，触发链接的方式就是点击图片的任何地方都可以链接到跳转地址，有时我们需要实现，点击图片的不同地方跳转到不同的地方。意思就是，一张图片我们可以创建带有可供点击区域的图像地图，其中每个区域就是一个超链接。涉及到的标签就是< map>标签，用来指定图片,< area>用来指定超链接区域

... ... ... 这里以一张图片作为地图，在< area>标签中我们会涉及到shape ，coords， href属性，分别用来指定超链接区域形状，超链接区域坐标，还有超链接跳转地。这是具体实现内容 image test

tap the li zi

shape属性的取值可以是：rect(矩形)、circle(圆形)、poly(多边形)和default(整个图像区域)。这里采用的是矩形。 coords属性对于矩形而言，coords有4个值，分别用逗号隔开，表示矩形区域左上角x坐标、左上角y坐标、右下角x坐标和右下角y坐标，这里获取坐标的方式，就用截图工具帮忙就好。具体的代码与图片大家可以使用命令克隆一个到桌面上以验证 sudo git clone https://github.com/shiyanlou/HTML1

“HTML基础入门”实验报告