HTML-3-图像、超链接、网页布局

最新推荐文章于 2022-03-19 18:02:36 发布

西西ANO

最新推荐文章于 2022-03-19 18:02:36 发布

阅读量220

点赞数

分类专栏： # HTML 文章标签： html html5

本文链接：https://blog.csdn.net/baidu_38126306/article/details/110208601

版权

HTML 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

HTML -> 图像、超链接、网页布局

1. 图像标签

常见的图像格式
- JPG
- GIF
- PNG
- BMP（位图）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签学习</title>
</head>
<body>
<!--img学习

src : 图片地址(必填)
       相对地址(推荐)；绝对地址
       ../  上一级目录

alt : 图片名字 (必填)
-->

<img src="../resources/image/babe.jpg" alt="xiaoyou" title="悬停文字" width="300" height="300">
</body>
</html>

2. 链接标签

文本超链接
图片超链接
页面间链接：从一个页面链接到另一个链接
锚链接
功能性链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签学习</title>
</head>
<body>

<!--使用name作为标记-->
<a name="top">顶部</a>

<!--a标签
href:必填，表示要跳转到的那个页面
target:表示窗口在哪里打开
    _blank 表示在新的标签打开
    _self 表示在自己的网页中打开

-->
<a href="1.我的第一个网页.html" target="_blank">点击我跳转到页面1</a> <br>
<a href="https://www.baidu.com" target="_self">点击我跳转到baidu</a> <br>
<a href="3.图像标签.html">
    <img src="../resources/image/babe.jpg" alt="xiaoyou" title="车银优" width="300" height="300">
</a>

<p>
    <a href="3.图像标签.html">
        <img src="../resources/image/babe.jpg" alt="xiaoyou" title="车银优" width="300" height="300">
    </a>
</p>
<p>
    <a href="3.图像标签.html">
        <img src="../resources/image/babe.jpg" alt="xiaoyou" title="车银优" width="300" height="300">
    </a>
</p>
<p>
    <a href="3.图像标签.html">
        <img src="../resources/image/babe.jpg" alt="xiaoyou" title="车银优" width="300" height="300">
    </a>
</p>
<p>
    <a href="3.图像标签.html">
        <img src="../resources/image/babe.jpg" alt="xiaoyou" title="车银优" width="300" height="300">
    </a>
</p>
<p>
    <a href="3.图像标签.html">
        <img src="../resources/image/babe.jpg" alt="xiaoyou" title="车银优" width="300" height="300">
    </a>
</p>

<!--锚链接
1.需要一个锚标记
2.跳转到标记
-->
<!--实现页面指定位置的跳转-->
<a href="#top">回到顶部</a>
<!--实现页面间的跳转-->
<a name="down">底部</a>

<!--功能性链接
    邮件链接：mailto
    QQ链接
-->
<a href="mailto:1067482611@qq.com">点击联系我</a>
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes">
    <img border="0" src="http://wpa.qq.com/pa?p=2::52" alt="您好，加ANOBABE。" title="您好，加ANOBABE。"/></a>
</body>
</html>

3. 行内元素和块元素

块元素：
- 无论内容多少，该元素独占一行；
- 如 p、h1~h6…
行内元素：
- 内容撑开宽度，左右都是行内元素的可以排在一行
- 如，a、strong、em…

西西ANO

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML-3-图像、超链接、网页布局

HTML -> 图像、超链接、网页布局1. 图像标签常见的图像格式JPGGIFPNGBMP（位图）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>图像标签学习</title></head><body><!--img学习src : 图片地址(必填)
复制链接

扫一扫