1.塊級標簽與行內標簽

由于表格代碼不便于維護，且不夠靈活。所以網頁布局一般是div+css

div標簽：是一個區塊容器標簽。<div></div>之間是一個容器，可以包含段落、表格、圖片等各種html元素。
span標簽：沒有任何意義，為了應用樣式。

<p>使用div標簽</p>
<div><img src="coner.jpeg" width="50">曹魏</div>
<div><img src="coner.jpeg" width="50">孫吳</div>
<div><img src="coner.jpeg" width="50px">蜀漢</div>
<p>使用span標簽</p>
<span><img src="icon.jpeg" width="50">曹丕</span>
<span><img src="icon.jpeg" width="50">孫權</span>
<span><img src="icon.jpeg" width="50">劉備</span>

塊級標簽與行內標簽

標簽	說明	示例
塊級標簽	占據一行，換行。如<div>用來搭建網頁的結構布局和承載一些內容	<div>、<ul>、<ol>、<li>、<dl>、<dt>、<dd>、<h1>~<h6>、<p>、<form>、<hr>...
行內標簽	在一行，不換行。如<span>用于某些細節的處理	<b>、<em>、<img>、<input>、<a>、<sup>、<sub>、<textarea>、<span>...

2. 標簽嵌套規則

標簽嵌套規則

規則	示例
塊級元素可包含行內元素和某些塊級元素	如<div><h1></h1>< a href=""></a></div>
行內元素不能包含塊元素，只能其他行內元素	如<a href="" ><h1></h1><div></div></a><--錯誤--> <span><em></em></span><--正確-->
塊級元素不能放在<p>標簽內	<p><div>1111</div><h1>2222</h1></p> 如上，瀏覽器會將div和h1之外生成2個p段落 <p></p><div>1111</div><h1>2222</h1><p></p>
特殊塊級元素只能包含行內元素，不能再包含塊級元素,如<h1>~<h6>、<p>、<dt>
塊級元素與塊級元素并列，行內元素與行內元素并列	<div><h1></h1><p></p></div><!--正確--> <div><h1>666</h1><span></span></div><!--錯誤寫法-->

總結

以上是生活随笔為你收集整理的幕客前端基础入门-搭建网页结构的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。