欢迎光临散文网 会员登陆 & 注册

HTML实践和路径问题:图片不显示,相对路径和绝对路径-这是大部人的问题

2023-08-13 10:09 作者:星墨owo  | 我要投稿

<!--这个网站包含多个html文件,音乐自动播放实在无法实现,请谅解-->

文件1:WhiteSpace

<!DOCTYPE html>

<html >

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title></title>

</head>

<body>

    <!--定义循环播放音乐-->

    <audio src = "http://m701.music.126.net/20230813085306/ded32620419b5a343ee707e7759bf0df/jdymusic/obj/wo3DlMOGwrbDjj7DisKw/10384657604/5469/5a5e/a3d3/6e56c2b98189b97635cc1fb70459e998.mp3" type = "mp3" loop controls></audio>

    <!--定义logo模块以及灯泡点击后的反应-->

    <div id = "OMORI_logo"text style ="

    text-align:center;

    ">

    <img alt = "omori_logo" src = "https://img.moegirl.org.cn/common/5/51/OMORI_logo.png"witdh = "301px" heigth = "130px"usemap = "#something"/>


    <map name = "something">

        <area href = "./Something.html"shape = "poly"coords ="136,51,185,51,136,106,185,107"alt="something" />

       

    </map>

    </div>

    <!--定义欢迎块-->

        <h1 style ="

        text-align:center;

        ">Welcome to the White Space</h1>

    <!--定义omori图片与触发反应-->

    <div style = text-align:center>

        <img src = "https://img.moegirl.org.cn/common/0/05/Whitespace_CG.png"witdh = "590px"heigth = "479"usemap ="#WhiteSpace"/>

        <map name = "WhiteSpace">

            <area shape = "poly" coords = "404,22,450,54,453,107,405,132,358,104,358,47"href = "./Something.html" >

            <area shape = "poly" coords = "93,242,140,243,141,325,96,325" href = "./Something.html">

            <area shape = "poly" coords = "160,185,180,189,316,275,305,300,375,344,335,411,273,353,250,359,140,235"href ="./Something.html">

            </map>

    </div>

    <div style = 'text-align:center;'>

        <p><b>白色空间</b>是空无,是冷冰冰的家。<br>


            是苟延残喘的地方,不是安度日常的地方。<br>

           

            即便如此,你的良知是无法被抹除的.<br>

           

            它一直伺机而动,等待趁虚而入。<br>

           

            即便是在<b>白色空间,它也会悄然滋生……</b><br>

           

            若想阻止,<span style = "color : red">牵制它的事物便会形成。</span><br>

           

            悬挂着的黑色灯泡……那便是对<span style = "color : red">某种想法的压抑</span><br>

                                                                -----------------<p style = "color : blue">轴孔珊瑚</p>

            尝试触碰白色空间的事物,可能触发<span style = "color : red">牵制它的事物</span></p>

    </div>

</body>

</html>

文件二:Something

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>你不应该看的</title>

</head>

<body style = "

    background-color:black;

    text-align:center

">

    <div style = "padding : 250px">

    <abbr title = "你 不 应 该 来 的"><a href = "./BlackSpace.html"><img alt = "something" src = "https://img.moegirl.org.cn/common/e/e5/OMORI-something.png" width = "73px"height = "233px"></a><abbr>

    </div>

</body>

</html>

文件三:BlackSpace

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>BlackSpace</title>

</head>

<body style = "background-color:black">

    <audio src = "http://m701.music.126.net/20230813102514/4a8c233330e721a08e873df9fdd26517/jdymusic/obj/wo3DlMOGwrbDjj7DisKw/10384661910/e3c9/0c79/fccb/cde5e251a23928498743bee89cf5977f.mp3" type = "mp3" loop controls></audio>

    <h1 style = "color : white ; text-align:center">Welcome to the black space</h1>

    <div style = "padding : 250px">

    <abbr title = "你 不 应 该 看 的"><img style ="text-align:center" src = "https://img.moegirl.org.cn/common/4/43/Hellmari_01.png"/>

    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

    <img style ="text-align:center" src = "https://img.moegirl.org.cn/common/0/07/OMORI-shadow_basil.png"/></abbr>

    </div>

    <abbr title ="你不应该来的"><img style = "text-align:center"src = "https://img.moegirl.org.cn/common/4/40/OMORI-something_in_the_walls.png">

    <img src = "https://img.moegirl.org.cn/common/6/69/OMORI-something_merci.png"><br/><br/>

    <img src = "https://img.moegirl.org.cn/common/5/5f/OMORI-something_dorothi.png"><br/><br/>

    <img src = "https://img.moegirl.org.cn/common/6/61/OMORI-something_lilli.png">

    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

    <img   style = "text-align:center" src = "https://static.wikia.nocookie.net/omori/images/2/2f/Omori_%28Boss%29_Phase_6.gif/revision/latest?cb=20220218062823&path-prefix=zh">

</body>

</html>


HTML实践和路径问题:图片不显示,相对路径和绝对路径-这是大部人的问题的评论 (共 条)

分享到微博请遵守国家法律