如标题中所述，嵌套 <p>和<img> .
在 <img> 的右侧，我想通过下面的编码输出一些文本
<p><img src="images/sp_luffy.png" alt="タルトの写真”>This is ruffy</p>
但实际上，这效果不太好，浏览器(chrome)中只能看到图像
如果有人了解并需要更多信息，请告诉我。
此文件中的完整代码。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>KUJIRA Cafeについて| KUJIRA Cafe</title>
</head>
<body>
<div class="wrapper">
<!-- ヘッダー -->
<header class="header">
<h1 class="logo"><a href="index.html"><img src="images/logo.png" alt="KUJIRA Cafe" ></a></h1>
<nav class="nav">
<ul>
<li><a href="index.html">ホーム</a></li>
<li><a href="about.html">店舗案内</a></li>
<li><a href="access.html">アクセス</a></li>
<li><a href="menu.htmlメニュー"></a></li>
<li><a href="contact.html">お問い合わせ</a></li>
</ul>
</nav>
</header>
<!-- ヘッダー ここまで -->
<!-- メイン -->
<main>
<p><img src="images/sp_luffy.png" alt="タルトの写真”>This is ruffy</p>
<h2>手作りタルトと香り高い珈琲で、寛ぎのカフェタイムを</h2>
</main>
<!-- メインここまで -->
<!-- フッター -->
<footer class="footer">
<p>©Copyright KUJIRA Cafe. All right reserved. Ako</p>
</footer>
<!-- フッターここまで -->
</div>
</body>
</html>
最佳答案
您的<img /> HTML 元素未对 alt="" 使用正确的双引号字符属性。相反，它使用 curl 双引号(而不是直双引号)，并且浏览器将 curl 双引号(以及 > 和其后的文本)解释为 alt 的一部分。属性值。
更改此:
<p><img src="images/sp_luffy.png" alt="タルトの写真”>This is ruffy</p>
^ Here is the problem
对此:
<p><img src="images/sp_luffy.png" alt="タルトの写真">This is ruffy</p>
^ Use " instead of ”
HTML 属性值只能用 ' 分隔或" (如果值不包含任何空格、标点符号或其他特殊字符，引号也是可选的)。
关于html - 嵌套 <p> 和 <img>，如 '<p><img src=' '></p>'，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59914877/