HTML超文本

最新推荐文章于 2022-06-23 17:15:04 发布

09jianfeng

最新推荐文章于 2022-06-23 17:15:04 发布

阅读量1.2k

点赞数

分类专栏： HTML

HTML 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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坐标，这里获取坐标的方式，就用截图工具帮忙就好。

09jianfeng

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML超文本

1.HTML链接（1）给文字及图片添加超链接首先我们还是回顾一下最简单的链接使用，直接给文字添加链接到网页和另外的HTML文件。HTML内容如下html>body> p>let's have an examplep> p> a href="http://www.shiyanlou.com">shiyanloua>
复制链接

扫一扫