博客列表 >html中的文本链接锚点与图片

html中的文本链接锚点与图片

祥子弟弟
祥子弟弟原创
2020年12月09日 13:14:15892浏览

1. 标题标签与段落标签

  • 标题标签

    在 html 中标题是从\<h1>~\<h6>等标签进行定义的。其中\<h1>定义最大的标题,\<h6>定义最小的标题。不过在平常的使用中,用的最多的是\<h1>~\<h3>,\<h4>~\<h6>几乎用不到。

  • 段落标签

    在 html 中段落标签可以把 html 文档分割为若干个段落。段落是通过\<p>标签来定义的。

  • 练习

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8" />
  5. <title>标题和段落</title>
  6. </head>
  7. <body>
  8. <h1>一号标题</h1>
  9. <p>这是一个段落</p>
  10. <h2>二号标题</h2>
  11. <h3>三号标题</h3>
  12. <h4>四号标题</h4>
  13. <h5>五号标题</h5>
  14. <h6>六号标题</h6>
  15. </body>
  16. </html>

2. 链接与锚点

  • 链接

    在 html 中链接标签是用\<a>进行定义的。\<a>标签是互联网的灵魂,\<a>标签的两个常用的属性是 href 和 target, 其中 href 属性是超链接,指向网页的地址,一般形式是“ href=”https://xxx.com“ ”;target 属性是哪一个窗口来进行打开指定的路径,一般有四个内置的值分别是:
    _blank: 在新窗口打开;
    _self: 在当前窗口打开;
    _parent: 在父级窗口打开;
    _top: 在最顶级窗口打开。
    一般默认值为 _self 在当前窗口打开。
    还可以使用\<iframe>标签实现画中画页面。

  • 锚点

    锚点操作是用\<a>标签和\<div>标签(通用容器标签,可以放任何类型的元素)来实现的。通过锚点操作,可以实现当前页面任意位置的跳转,实现单页面路由。

  • 练习

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8" />
  5. <title>链接与锚点</title>
  6. </head>
  7. <body style="display: grid">
  8. <!-- 链接 -->
  9. <a href="https://www.php.cn/" target="_self">php中文网</a>
  10. <a href="https://www.php.cn/" target="_blank">php中文网</a>
  11. <!-- 页面内嵌 -->
  12. <a href="https://www.baidu.com/" target="baidu">小度</a>
  13. <iframe
  14. srcdoc="<em>点击上面的“小度”</em>"
  15. name="baidu"
  16. frameborder="0"
  17. width="400"
  18. height="400"
  19. ></iframe>
  20. <!-- 锚点 -->
  21. <a href="#footer">跳转到底部</a>
  22. <div id="footer" style="margin-top: 1000px">这是底部</div>
  23. <a href="#">回到顶部</a>
  24. </body>
  25. </html>

3. 图片

在 html 中图片标签是用\<img>定义的。图片是一个网页的灵魂所在。不过图片一般是不单独使用的,一般都是链接配合使用的。再者图片的调节大小的时候,只需要调节宽度或者高度中的一个就行。

  • 练习
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8" />
  5. <title>图片</title>
  6. </head>
  7. <body>
  8. <a href="https://www.php.cn/map/dugu.html" target="_blank">
  9. <img
  10. src="https://img.php.cn/upload/course/000/000/001/5d1c6ddbecdb1707.jpg"
  11. alt="独孤九剑"
  12. title="独孤九剑"
  13. />
  14. </a>
  15. <!-- <img
  16. src="https://img.php.cn/upload/course/000/000/001/5d1c6ddbecdb1707.jpg"
  17. alt="独孤九剑"
  18. /> -->
  19. </body>
  20. </html>
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议