html內容類型和內聯/塊元素之間的連接

Question

在html中，一些元素對它們允許的內容類型有限制。一個示例是<summary>元素，其內容必須是phrasing content或heading content的一個元素。這是有效的HTML：

<details> 
    <summary><span>Foo</span></summary> 
    ... 
</details> 

雖然這是無效的：

<details> 
    <summary><div>Foo</div></summary> 
    ... 
</details> 

由於<div>不措辭的內容，也沒有標題的內容。

但是呢？

<details> 
    <summary><span style="display: block">Foo</span></summary> 
    ... 
</details> 

據我瞭解，這仍然應該是有效的HTML，因爲<span>是段落式內容，但由於display: block，該<span>元素將行爲方式作爲<div>會相同。

不同類型的內容和inline/block元素之間是否有任何聯繫，還是他們完全不同的東西？

當需要特定類型的內容時，我能期望瀏覽器正確渲染內容嗎，但是內容的樣式與正常情況不同？

Answer 1

elements和語義之間沒有聯繫，您如何選擇顯示這些元素 - CSS只是樣式，可以做任何事情。語義標記（HTML）是完全不同的問題。這兩者之間沒有相關性，使得display: block完全有效。