博主信息
博文 29
粉丝 1
评论 0
访问量 44492
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
html中的文本链接锚点与图片
祥子弟弟
原创
1112人浏览过

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举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学