是否可以在html中使用p標簽內的form和div標簽？

Question

我使用html，css和一些腳本創建了簡單的網頁。

這是我試過的jsfiddle： http ： //jsfiddle.net/67x8cyp9/

<p>
 <img class="text-wrap" align="right" src="img/9780143332497.jpg">
 <div class="caption">
    <form method="get" action="9780143332497.png">
       <button type="submit">Download!</button>
    </form>
 </div>
</p>

在<p>標簽內使用<form>標簽和<div>標簽是否正確？

而且，如何在圖像下設置下載按鈕？

任何人都可以幫我解決這個問題嗎？

提前致謝。

Answer 1

不推薦。

根據W3規范， <p>僅允許包含文本或“內聯”（非“塊”）標記。 然而一個<form>計為“塊”的內容不是“內聯”內容（參見此為在最小內容模型 <p>標記）。 或者，您可以使用<div>來包含<form>

您可以在w3驗證器上驗證您的html代碼，以便更清晰。

干杯!

Answer 2

不是不是， p是塊元素，但不能包含其他塊元素，只能包含內聯元素。 （至少在HTML4中，但我認為HTML5不會改變這種行為）。

嗯，根據MDN ，你可以把一個form放在一個p ，但實際上發生的是p的結尾是在表單的開頭，所以不是很有用。

更新：

為了幫助您解決當前的實際問題，您可以將內容包裝在div而不是p ：

<div class="right-figure">
    <img class="text-wrap" src="img/9780143332497.jpg">
    <div class="caption">
        <form method="get" action="9780143332497.png">
             <button type="submit">Download!</button>
        </form>
    </div>
</div>

並在CSS文件中：

.right-figure {
     float: right;
}

這將做，你需要什么。

另一種方法 ：

順便說一句，您也可以使用鏈接而不是表單：

<a href="9780143332497.png" target="_blank">Download!</a>

並使用CSS格式化錨點看起來像一個按鈕，就像Twitter Bootstrap一樣。