HTML5图像排版与链接

最新推荐文章于 2023-11-13 13:13:41 发布

奋斗的小小ц

最新推荐文章于 2023-11-13 13:13:41 发布

阅读量1.6k

点赞数

分类专栏： HTML CSS 文章标签： HTML 图片链接图片排版字体颜色与背景段落背景

本文链接：https://blog.csdn.net/qq_44812507/article/details/101766627

版权

HTML 同时被 2 个专栏收录

5 篇文章

订阅专栏

CSS

3 篇文章

订阅专栏

在这里插入图片描述

以下为实现代码

<!DOCTYPE html>
<html lang="en">
<head>
    <title>图片显示</title>

</head>
<body background=".//1.jpg">
    <h2 style="background-color: azure">添加字体背景颜色
        &lt;在标题h里直接添加style&gt;效果</h2>
    <h2><span style="background-color: azure">使用&lt;span&gt;</span></h2>
    <hr>
    <img src=".//12.jpg" width=220 height=180 alt="error">
    <p>图片显示大小为220*180</p>
    <br>
    <hr>
    <span style="background-color: black;color: aqua;font-size: 1em">
        &lt;body background=".//1.jpg"&gt;
        作为网页背景
    </span>
    <p>
        <span style="background-color: black;color:aqua;"> 图像底部对齐</span>
        <img src="C://Users//DELL//Pictures//Saved Pictures//12.jpg" align="bottom"
        alt="error">
    </p>
    <br>
    <hr>
    <p style="background-color: darkgray;text-align: left;text-indent: 4em">
        <img src=".//12.jpg" width=220 height=180 alt="error" align="right">
        <span style="background:  black;color:aqua;">
            这是一个带有图像的段落，图像采用右对齐.
            并且这是一个有背景颜色的段落，缩进4个字节<br> 
            &lt;p style="background-color: darkgray;text-align: left;text-indent: 4em"&gt;
        </span>
    </p>
    <br><br><br><br>   
    <hr>
    <p style="background-color:black;font-size: 1.5em;color:aqua ">
        添加图片链接功能&lt;a&gt;与&lt;/a&gt;所包含的内容即显示为链接
    </p>
    <div>
        <li>
            将网页 
            <a href="网址">图像</a> 转为链接
            <img src="C://Users//DELL//Pictures//Saved Pictures//12.jpg"
             width=220 height=180 alt="error">
             
        </li> 
        <li>
            将网页
            <a href="#锚点，内部锚点井号不能省略">图像
            <img src=".//12.jpg"
            width=220 height=180 alt="error">
            </a> 转为链接
                       
        </li>
        <li>
            将网页图像 
            <a href="#指定链接位置"><img src=".//12.jpg"
                width=220 height=180 alt="error">
            </a> 转为链接 
                       
        </li>
    </div>
</body>
</html>