HTML链接
(1)给文字及图片添加超链接
首先我们还是回顾一下最简单的链接使用,直接给文字添加链接到网页和另外的HTML文件。
HTML内容如下
<html>
<body>
<p>let's have an example</p>
<p>
<a href="http://www.shiyanlou.com">shiyanlou</a>
</p>
</body>
</html>
给本地的文件lianjie.html添加超链接:
<span style="font-size:18px;">< a href="lianjie.html">shiyanlou</a></span>
给图片添加超链接:
<span style="font-size:18px;"><a href="http://www.shiyanlou.com"><img src="tubiao.png"></a></span>
给超链接添加提示文字:
<a href="http://www.shiyanlou.com" title="THIS WORD WILL LINK TO THE WEB OF SHIYANLOU">shiyanlou</a>
超链接实现书签:
<a href="#跳转目的地名称">跳转起始字符</a>
...
...
...
<a name="跳转目的地名称">跳转目的地字符</a>
具体的实现下:
<html>
<head>
<title>HTML</title>
</head>
<body style="font-size:20px">
<p style="text-align:center">HTML LEARNING</p>
<p>
<a href="#c1"> HTML chushi</a>
</p>
<p>
<a href="#c2">HTML wenben </a>
</p>
<p>
<a href="#c3">HTML chaowenben 1 </a>
</p>
<p>
<a href="#c4"> HTML chaowenben 2 </a>
</p>
<p>
<a href="#c5">HTML shiyan </a>
</p>
<h1><a name="c1"></a>chapter 1 chushi HTML</h1>
<p>lalalaalalal</p>
<p>lalalaalalal</p>
<p>lalalaalalal</p>
<h1><a name="c2"></a>chapter 2 wenben HTML</h1>
<p>lalalaalalal</p>
<p>lalalaalalal</p>
<p>lalalaalalal</p>
<h1><a name="c3"></a>chapter 3 chaowenben 1 HTML</h1>
<p>lalalaalalal</p>
<p>lalalaalalal</p>
<p>lalalaalalal</p>
<h1><a name="c4"></a>chapter 4 chaowenben 2 HTML</h1>
<p>lalalaalalal</p>
<p>lalalaalalal</p>
<p>lalalaalalal</p>
<h1><a name="c5"></a>chapter 5 shiyan HTML</h1>
<p>lalalaalalal</p>
<p>lalalaalalal</p>
<p>lalalaalalal</p>
</body>
</html>
HTML表格
表格由 < table> 标签来定义。每个表格均有若干行(由 < tr> 标签定义),每行被分割为若干单元格(由 < td> 标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。< th>标签用来定义表头。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
下面我们动手来写一个简单HTML文件来练习这几个标签:
<html>
<title >TABLE</title>
<body style="font-size:20px">
<p style="text-align:center">table practice</p>
<table align="center" border="1">
<tr>
<td>first row and first column</td>
<td>first row and second column</td>
<td>first row and third column</td>
</tr>
<tr>
<td>second row and first column</td>
<td>second row and second column</td>
<td>thirt row and third column</td>
</tr>
</table>
</body>
</html>
这是实验截图:
border="1"定义的是最外面边框粗细,为1,你也可以设置为0,就是不显示边框(默认就是没有边框)这里我们将其改成15试试:
下面我们再介绍表格两个属性: colspan:控制此单位所占列数 rowspan:控制此单位所占行数
<html>
<title >TABLE</title>
<body style="font-size:30px">
<p style="text-align:center">table practice</p>
<table align="center" border="15" >
<tr>
<td align="center" colspan="2">first row and first column</td>
</tr>
<tr>
<td rowspan="2">second row and first column </td>
<td>second row and second column </td>
<td >second row and third column</td>
</tr>
<tr>
<td>third row and first column </td>
<td>third row and second column </td>
</tr>
</table>
</body>
</html>
如果不是很理解,我们就来看看在网页上的表现,对比起来有助于我们理解。 让第一列第一行这个单位占两列,让第二行第一列这个单位占两行,就是这个效果。
表格还有很多细节可以定义,我们早这里就简单叙述,大家需要动手练习:
- 标签:< th>表头< /th>:设置表头
-
标签:< caption>标题< /caption>:设置表的标题
-
属性:cellpadding="..."设置单元格边距
- 属性:bgcolor="..."设置表格背景颜色
- 属性:background="..." 以某张图片作为表格背景
HTML图像
上面我们简单提到过用图像作为链接使用,接下来我们来详细讲述下图像的应用。 一般我们用到的就是插入图片,将图片多为背景,再者将图片作为链接。涉及到的标签就是< img>< /img> 接下来我们就动手开始写一个HTML文件加深了解 首先我们用浏览器在网页上下载几张图片(放到和HTML文件一个文件夹中)供后面使用。
1.先设置一张图片为网页背景图片 在body 属性中加入background属性添加背景图片
2.举例插入一张图片 写法如下
<img src="路径加文件名">
擦入图片以后:
这时我们可以看出,字体和图片的低端是对其的,下面我们就来调整下对其方式
3.添加属性调整图片的对其方式
在< img>标签中加入align属性,调整对其。 相对习题的上下可以加的参数有 bottom、middle、top,默认就是我们刚看见的bottom 相对字体左右可加的参数有right,left默认为right
下面我们直接来比较下:
<html>
<head>
<title>image test</title>
</head>
<body background="./qwe.gif">
<p>let's have an example<img src="./julizi.png"></p>
<p> align top<img src="./julizi.png" align="top" ></p>
<p>align middle<img src="./julizi.png" align="middle"></p>
<p>align left<img src="./julizi.png" align="left" ></p>
</body>
</html>
4.调整插入图片尺寸 大多数的尺寸都没有那么合适,直接插入以后会破换整体页面的效果。所以在插入图片时,很有必要控制其尺寸,这是很容易办到的,就孩子需要在< img>标签中加入width height 两个属性。 那我们顺势就控制下上面的那几副图吧
width="80" height="80"
(当然,我还调整了字体大小)
5.创建图像映射
在这之前我们动手试验过将图片作为链接来使用,触发链接的方式就是点击图片的任何地方都可以链接到跳转地址,有时我们需要实现,点击图片的不同地方跳转到不同的地方。意思就是,一张图片我们可以创建带有可供点击区域的图像地图,其中每个区域就是一个超链接。涉及到的标签就是< map>标签,用来指定图片,< area>用来指定超链接区域
<img src="xx.jpg" usemap="#mp"/>
<map name="mp" id="mp">
<area>
...
...
...
</area>
</map>
这里以一张图片作为地图, 在< area>标签中我们会涉及到shape ,coords, href属性,分别用来指定超链接区域形状,超链接区域坐标,还有超链接跳转地。
这是具体实现内容
<html>
<head>
<title>image test</title>
</head>
<body background="./qwe.gif">
<p>tap the li zi </p>
<img src="./julizi.png" usemap="#lizi"/>
<map name="lizi">
<area shape="rect" coords="50,10,100,60" href="img.html" target="_blank"
</map>
</body>
</html>
然后,当我们点击小松鼠举起的栗子,你就会看见跟多栗子
shape属性的取值可以是:rect(矩形)、circle(圆形)、poly(多边形)和default(整个图像区域)。这里采用的是矩形。
coords属性对于矩形而言,coords有4个值,分别用逗号隔开,表示矩形区域左上角x坐标、左上角y坐标、右下角x坐标和右下角y坐标,这里获取坐标的方式,就用截图工具帮忙就好。