web前端之html从零开始（二）----a标签学习，强化

最新推荐文章于 2022-11-20 22:48:49 发布

哎吆我呸

最新推荐文章于 2022-11-20 22:48:49 发布

阅读量931

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/qq939782569/article/details/56485180

版权

html 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

1、a标签强化，点击图片跳转，并且可一个给图片添加边框以及去除边框

<!DOCTYPE html>
<html>
  <head>
    <title>MyHtml.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">


  </head>
  <!-- 如果加跳转的话，默认有一个border也就边框，设置成border=0的话就没有边框了 -->
  <body>
    <p>创建图片链接
    <a href="http://www.baidu.com">
    <img src="zls.jpg" alt="HtmlDemo"  width="32" height="32"></a></p>
    <p>无边框的图片链接:
    <a href="http://www.baidu.com">
    <img border="0" src="zls.jpg" alt="HTMLDemo" width="32" height="32"></a></p>
  </body>
</html>

2、a标签通过指定的id跳转到目标位置

<!DOCTYPE html>
<html>
<head>
<title>MyHtml.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">


</head>
<!-- a标签通过指定id跳转到指定的位置 -->
<body>
    <p>
        <a href="#C4">查看章节四</a>
    </p>
    <h2>章节一</h2>
    <p>这边显示该章节的内容...</p>
    <h2>章节 3</h2>
    <p>这边显示该章节的内容……</p>

    <h2>
        <a id="C4">章节 4</a>
    </h2>
    <p>这边显示该章节的内容……</p>

    <h2>章节 5</h2>
    <p>这边显示该章节的内容……</p>

    <h2>章节 6</h2>
    <p>这边显示该章节的内容……</p>

    <h2>章节 7</h2>
    <p>这边显示该章节的内容……</p>

    <h2>章节 8</h2>
    <p>这边显示该章节的内容……</p>

    <h2>章节 9</h2>
    <p>这边显示该章节的内容……</p>

    <h2>章节 10</h2>
    <p>这边显示该章节的内容……</p>

    <h2>章节 11</h2>
    <p>这边显示该章节的内容……</p>

    <h2>章节 12</h2>
    <p>这边显示该章节的内容……</p>

    <h2>章节 13</h2>
    <p>这边显示该章节的内容……</p>

    <h2>章节 14</h2>
    <p>这边显示该章节的内容……</p>

    <h2>章节 15</h2>
    <p>这边显示该章节的内容……</p>

    <h2>章节 16</h2>
    <p>这边显示该章节的内容……</p>

    <h2>章节 17</h2>
    <p>这边显示该章节的内容……</p>
</body>
</html>

3、a标签通过 target=”top”跳出框架,相当于android的跳转的activity的意思有点相似

<!DOCTYPE html>
<html>
<head>
<title>MyHtml.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">


</head>
<!-- a标签通过target="_top"跳出框架 ，当然a标签得制定一个内容体来给用户指示的作用-->
<body>
    <p>跳出框架</p>
    <a href="http://www.baidu.com" target="_top">点击这里</a>
</body>
</html>

4、a标签的简单电子邮件，以及复杂电子邮件的超链接

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>电子邮件</title> 
</head>
<body>
<!-- 简单的，当然前提是安装邮件客户端程序之后才能应用 -->
<p>
这是一个电子邮件链接：
<a href="mailto:someone@example.com?Subject=Hello%20again" target="_top">
发送邮件</a>
</p>
<!-- 复杂的 -->
<p>
这是另一个电子邮件链接：
<a href="mailto:someone@example.com?cc=someoneelse@example.com&bcc=andsomeoneelse@example.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!" target="_top">发送邮件!</a>
</p>
<p>
<b>注意:</b> 单词之间空格使用 %20 代替，以确保浏览器可以正常显示文本。
</p>

</body>
</html>

5、元素包含了所有的头部标签元素。在元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。
可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>标题</title> 
<base href="http://www.runoob.com/images/" target="_blank">
</head>

<body>
<img src="logo.png"> - 注意这里我们设置了图片的相对地址。能正常显示是因为我们在 head 部分设置了 base 标签，该标签指定了页面上所有链接的默认 URL，所以该图片的访问地址为 "http://www.runoob.com/images/logo.png"
<br><br>
<a href="http://www.baidu.com">百度</a> - 注意这个链接会在新窗口打开，即便它没有 target="_blank" 属性。因为在 base 标签里我们已经设置了 target 属性的值为 "_blank"。

</body>
</html>

base 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接:

<!DOCTYPE html>
<html>
  <head>
    <title>MyHtml6.html</title>


    <meta http-equiv="description" content="this is my page">
    <meta name="author" content="lihaiming">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>

  <body>
    所有 meta 标签显示在 head 部分... <br>
  </body>
</html>

description描述
author 谁写的
content-type内容类型，以及编码格式。

哎吆我呸

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web前端之html从零开始（二）----a标签学习，强化

1、a标签强化，点击图片跳转，并且可一个给图片添加边框以及去除边框<!DOCTYPE html><html> <head> <title>MyHtml.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> </head> <!-- 如果加跳转的话，默认有一个bor
复制链接

扫一扫

专栏目录