前言：

本文内容：图像标签、超链接标签及应用、块元素和行内元素

推荐免费HTML5基础讲解视频：【狂神说Java】HTML5完整教学通俗易懂_哔哩哔哩_bilibili

图像标签

  • 常见的图像格式(JPG,GIF,PNG,BMP)

    <img src="path" alt="text" title="text" width="x" height"y"/>

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
       <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>图像标签</title>
    </head>
    <body>
        <a name="html3">页面四的锚链接</a><br/>
    <!--src: 图片地址
         相对地址(推荐使用)
         绝对地址
         ../ 表示上一级目录
         alt： 图片未加载时显示
         title： 鼠标悬浮在图片上显示
         width 宽度  height 高度
         -->
    <img src="../resource/img1.png" alt="蔚蓝截图" title="蔚蓝山脉" width="300px" height="150px"/>
    </body>
    </html>

超链接标签及应用

链接标签

<a href="path" target="目标窗口位置">链接文本或图像</a>

  • 文本超链接

  • 图像超链接

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>超链接标签</title>
    </head>
    <body>

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

    <!-- a标签
     href: 必填，表示要跳转到哪个页面
     target：表示窗口在哪里打开
        _blank 在新标签中打开
        _self 默认打开方式
    -->
    <a href="html1.html">点击跳转第一个网页</a><br/>
    <!--网页跳转-->
    <a href="https://jokerdig.com">Hey,Joker</a><br/>
    <!--图片超链接-->
    <a href="html3.html" target="_blank">
        <img src="../resource/img1.png" alt="蔚蓝截图" title="蔚蓝山脉" width="300px" height="150px"/>
    </a><br/>
    <img src="../resource/img1.png" alt="蔚蓝截图" title="蔚蓝山脉" width="300px" height="150px"/><br/>
    <img src="../resource/img1.png" alt="蔚蓝截图" title="蔚蓝山脉" width="300px" height="150px"/><br/>
    <img src="../resource/img1.png" alt="蔚蓝截图" title="蔚蓝山脉" width="300px" height="150px"/><br/>
    <img src="../resource/img1.png" alt="蔚蓝截图" title="蔚蓝山脉" width="300px" height="150px"/><br/>
    <img src="../resource/img1.png" alt="蔚蓝截图" title="蔚蓝山脉" width="300px" height="150px"/><br/>
    <img src="../resource/img1.png" alt="蔚蓝截图" title="蔚蓝山脉" width="300px" height="150px"/><br/>
    <img src="../resource/img1.png" alt="蔚蓝截图" title="蔚蓝山脉" width="300px" height="150px"/><br/>
    <img src="../resource/img1.png" alt="蔚蓝截图" title="蔚蓝山脉" width="300px" height="150px"/><br/>
    <img src="../resource/img1.png" alt="蔚蓝截图" title="蔚蓝山脉" width="300px" height="150px"/><br/>
    <img src="../resource/img1.png" alt="蔚蓝截图" title="蔚蓝山脉" width="300px" height="150px"/><br/>

    <!--
      锚链接
      1.需要一个毛标记
      2.跳转到标记
      3.使用#跳转
      锚链接也可以在不同页面之间跳转
      例子：锚链接可以定位博客文章的具体位置
    -->
    <a href="#top">回到顶部</a><br/>
    <a href="html3.html#html3">使用锚链接跳转不同页面</a><br/>
    <!--
        功能性链接：
        邮件链接：href="mailto:xxxxx@gmail.com"
        QQ链接：搜索QQ推广
        
    -->
    <a href="mailto:jokerdaxiong@qq.com">QQ邮箱</a>
    </body>
    </html>

块元素和行内元素

  • 块元素

    • 无论内容多少，该元素独占一行
    • (p、h1-h6)

  • 行内元素

    • 内容撑开宽度，左右都是行内元素的可以排在一行
    • (a,strong,em…)
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>行元素块元素</title>
    </head>
    <body>
    <p>块元素</p><p>块元素</p>
    <span>行内元素</span><span>行内元素</span>
    </body>
    </html>