整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
在HTML中，大多數(shù)元素都被定義為塊級元素或內(nèi)聯(lián)元素。
塊級元素通常會(huì)獨(dú)立成行，而內(nèi)聯(lián)元素會(huì)并排顯示。
在我們學(xué)過的元素中，
塊級元素如：<h> <p> <table>這些。
內(nèi)聯(lián)元素如<td><a><img>
下面我們通過練習(xí)來直觀看看他們的區(qū)別。
塊級元素展示，代碼如下：
<body>
<h1>第一個(gè)網(wǎng)頁</h1><hr><h2>表格元素</h2><hr>
<p>塊級元素與內(nèi)聯(lián)元素</p>
<p>零基礎(chǔ)自學(xué)網(wǎng)頁制作</p>
<table border="1" width="50%">
<thead>
<tr>
<td colspan="2">表格的頭部信息</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="2">表格的腳部信息</td>
<tr>
</tfoot>
<tbody>
<caption>表格標(biāo)題</caption>
<colgroup>
<col span = "1" style="background-color:#ff0000;"></col>
</colgroup>
<tr>
<th>姓名</th>
<th>年齡</th>
</tr>
<tr>
<td>
<table border = "1" width="100%">
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
</td>
<td>一列二行</td>
</tr>
<tr>
<td>二列一行</td>
<td>二列二行</td>
</tr>
</tbody>
</table>
</body>如圖：
內(nèi)聯(lián)元素展示如下
示例代碼：這段代碼被我放在了</table>后面。
<a href = "https://baike.baidu.com/item/%E6%AD%BC-20/1555348?fromtitle=%E6%AD%BC20&fromid =1838467&fr=aladdin">殲20戰(zhàn)斗機(jī)</a>
<img src="img/戰(zhàn)斗機(jī)/image3.jpg" width = "200px"/>效果如圖：
其中，<img>標(biāo)簽中的width屬性規(guī)定了圖片的寬度為200px，也就是200像素。
HTML中，如果只對圖片的寬或高進(jìn)行數(shù)值指定，那么未指定的數(shù)值會(huì)隨著指定數(shù)值進(jìn)行等比例縮放！
熟知html元素是塊級還是內(nèi)聯(lián)對以后進(jìn)行頁面布局有一定的指導(dǎo)意義。
<div>與<span>標(biāo)簽
為了方便開發(fā)者對頁面內(nèi)容進(jìn)行布局和調(diào)整，html開發(fā)者為html加入了專門的區(qū)塊元素<div></div>。
<div></div>是一個(gè)塊級元素，大家可以把它理解為一個(gè)容器，它本身是不會(huì)顯示在頁面上的。
比如這個(gè)！
筆者第一個(gè)漫畫作品
如果拋開畫面內(nèi)容，我們看到的是一堆對畫面進(jìn)行分割的方格子。像這樣
<div></div>元素的作用就是對頁面進(jìn)行了這樣的分割。
實(shí)際上我們的頁面布局都是基于這樣思路進(jìn)行分割的，只是頁面上不會(huì)像漫畫一樣顯示外邊框而已。例如：
強(qiáng)制為其添加邊框分割：
大家看明白了嗎？<div></div>就是用來對頁面進(jìn)行分割劃區(qū)域的。
通過給<div>標(biāo)簽設(shè)置不同的id屬性，可以在css文件中對不同<div>區(qū)塊中的所有信息進(jìn)行統(tǒng)一調(diào)整樣式的操作。
這是對塊級元素整體改變樣式的方法。
但是，如果我們想對一個(gè)塊級元素中的不同文字或圖片這些內(nèi)聯(lián)元素進(jìn)行單獨(dú)操作怎么做呢？
html開發(fā)者為我們提供了<span></span>這樣的內(nèi)聯(lián)標(biāo)簽。比如我們對<p>我有一個(gè)夢想</p>這個(gè)段落元素中的"夢想"兩個(gè)字進(jìn)行變化顏色的操作，我們可以這樣寫：
<p>我有一個(gè)<span>夢想</span></p>
通過對<span>指定不同的id或class屬性在CSS文件中對"夢想"二字進(jìn)行改變顏色的操作而不會(huì)影響段落元素中的其他文字。
今天的內(nèi)容結(jié)束了，下一次我們建立一個(gè)新的頁面來簡單看看<div>元素的基本用法。
喜歡的小伙伴請關(guān)注我，閱讀中遇到任何問題請給我留言，如有疏漏或錯(cuò)誤歡迎大家斧正，不勝感激！
HTML序章（學(xué)習(xí)目的、對象、基本概念）——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML是什么？——零基礎(chǔ)自學(xué)網(wǎng)頁制作
第一個(gè)HTML頁面如何寫？——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML頁面中head標(biāo)簽有啥用？——零基礎(chǔ)自學(xué)網(wǎng)頁制作
初識(shí)meta標(biāo)簽與SEO——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML中的元素使用方法1——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML中的元素使用方法2——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML元素中的屬性1——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML元素中的屬性2（路徑詳解）——零基礎(chǔ)自學(xué)網(wǎng)頁制作
使用HTML添加表格1（基本元素）——零基礎(chǔ)自學(xué)網(wǎng)頁制作
使用HTML添加表格2（表格頭部與腳部）——零基礎(chǔ)自學(xué)網(wǎng)頁制作
使用HTML添加表格3（間距與顏色）——零基礎(chǔ)自學(xué)網(wǎng)頁制作
使用HTML添加表格4（行顏色與表格嵌套）——零基礎(chǔ)自學(xué)網(wǎng)頁制作
16進(jìn)制顏色表示與RGB色彩模型——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML中的塊級元素與內(nèi)聯(lián)元素——零基礎(chǔ)自學(xué)網(wǎng)頁制作
初識(shí)HTML中的<div>塊元素——零基礎(chǔ)自學(xué)網(wǎng)頁制作
在HTML頁面中嵌入其他頁面的方法——零基礎(chǔ)自學(xué)網(wǎng)頁制作
封閉在家學(xué)網(wǎng)頁制作！為頁面嵌入PDF文件——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML表單元素初識(shí)1——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML表單元素初識(shí)2——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML表單3（下拉列表、多行文字輸入）——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML表單4（form的action、method屬性）——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML列表制作講解——零基礎(chǔ)自學(xué)網(wǎng)頁制作
為HTML頁面添加視頻、音頻的方法——零基礎(chǔ)自學(xué)網(wǎng)頁制作
音視頻格式轉(zhuǎn)換神器與html視頻元素加字幕——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML中使用<a>標(biāo)簽實(shí)現(xiàn)文本內(nèi)鏈接——零基礎(chǔ)自學(xué)網(wǎng)頁制作
tml元素主要分為3類，塊級元素、內(nèi)聯(lián)元素以及內(nèi)聯(lián)塊級元素，本篇文章我們來就詳細(xì)介紹一下各個(gè)分類的含義以及對應(yīng)的特點(diǎn)。
在html中div、 p、hx、form、ul 、 li、dl、dd就是塊級元素。css屬性設(shè)置display:block就是將元素顯示為塊級元素。塊級元素特點(diǎn)：
1、每個(gè)塊級元素都從新的一行開始，并且其后的元素也另起一行；（一個(gè)塊級元素獨(dú)占一行）
2、元素的高度、寬度、行高以及頂和底邊距都可設(shè)置；
3、元素寬度在不設(shè)置的情況下，是它本身父容器的100%（和父元素的寬度一致），除非設(shè)定一個(gè)寬度。
我們這里將塊級元素代碼寫一下然后看一下在瀏覽器中的顯示效果。html代碼就如下所示：
在網(wǎng)頁中我們可以看到，這些元素每一個(gè)都單獨(dú)占據(jù)一行的空間，不管內(nèi)容是否夠一行。
在html中，span、a、label、input、 strong 和em就是典型的內(nèi)聯(lián)元素（行內(nèi)元素）（inline）元素。當(dāng)然塊狀元素也可 以通過代碼display:inline將元素設(shè)置為內(nèi)聯(lián)元素。內(nèi)聯(lián)元素特點(diǎn)：
1、和其他元素都在一行上；
2、元素的高度、寬度、行高及頂部和底部邊距不可設(shè)置；
3、元素的寬度就是它包含的文字或圖片的寬度，不可改變。
注意：為 a 元素設(shè)置了寬和高，但都沒有起到作用，原因是a在默認(rèn)的時(shí)候是內(nèi)聯(lián)元素，內(nèi)聯(lián)元素是不可以設(shè)置寬和高的。
我們這里將內(nèi)聯(lián)元素代碼寫一下然后看一下在瀏覽器中的顯示效果。html代碼就如下所示：
在網(wǎng)頁中我們可以看到，這些元素會(huì)在一行一直排著顯示，直到充滿整行空間才會(huì)換行顯示。
內(nèi)聯(lián)塊狀元素（inline-block）就是同時(shí)具備內(nèi)聯(lián)元素、塊狀元素的特點(diǎn)，代碼display:inline-block就是將元素設(shè)置為內(nèi)聯(lián)塊狀元素。inline-block元素特點(diǎn)：
1、和其他元素都在一行上；
2、元素的高度、寬度、行高以及頂和底邊距都可設(shè)置。
注意：img是inline元素，但是他同時(shí)也是替換元素，他有著特殊的表現(xiàn)：
1. 可以設(shè)置width/height;
2. 默認(rèn)的，img元素在屏幕占據(jù)的空間與其圖片的實(shí)際像素一致，除非CSS有設(shè)置或者自身的width/height HTML 屬性有設(shè)置；
3. 如果img標(biāo)簽的包裹元素為也為inline元素，則img的邊界可以超出其直接父元素的邊界，直到自己的寬、高達(dá)到最大或者設(shè)定值為止，而且文檔流中img的兄弟元素也不能遮蓋住img。最常見的就是a里面包含的img；
4. 所以從行為上看,img元素作為替換元素，有著類似于Inline-block的行為，盡管在SPEC里面，他的確是一個(gè)inline元素。
對于html的元素分類今天就先介紹到這里，大家在平時(shí)可以自己多加練習(xí)練習(xí)，做到每個(gè)標(biāo)簽屬于什么元素。
每日金句： 成功的秘訣就是每天都比別人多努力一點(diǎn)。喜歡我的文章的小伙伴記得關(guān)注一下哦，每天將為你更新最新知識(shí)。
級元素：div , p , form, ul, li , ol, dl, form, address, fieldset, hr, menu, table
行內(nèi)元素：span, strong, em, br, img , input, label, select, textarea, cite,
內(nèi)聯(lián)元素(inline element)a - 超鏈接
b - 粗體(不推薦)br - 換行
em - 強(qiáng)調(diào)
font - 字體設(shè)定(不推薦)
i - 斜體
img - 圖片
input - 輸入框
label - 表格標(biāo)簽
select - 選擇框
small - 小字體文本
span - 常用內(nèi)聯(lián)容器，定義文本內(nèi)區(qū)塊
strong - 粗體強(qiáng)調(diào)
sub - 下標(biāo)
sup - 上標(biāo)
textarea - 多行文本輸入框
塊元素(block element)* blockquote - 塊引用
* center - 居中
* div - 常用塊級容易，也是css layout的主要標(biāo)簽
* dl - 定義列表
* form - 交互表單
* h1 - 大標(biāo)題
* h2 - 副標(biāo)題
* h3 - 3級標(biāo)題
* h4 - 4級標(biāo)題
* h5 - 5級標(biāo)題
* h6 - 6級標(biāo)題
* hr - 水平分隔線
* ol - 排序表單
* p - 段落
* pre - 格式化文本
* table - 表格
* ul - 無序列表
塊級元素和行內(nèi)元素的區(qū)別：
1）塊級元素會(huì)獨(dú)占一行，其寬度自動(dòng)填滿其父元素寬度
行內(nèi)元素不會(huì)獨(dú)占一行，相鄰的行內(nèi)元素會(huì)排列在同一行里，知道一行排不下，才會(huì)換行，其寬度隨元素的內(nèi)容 而變化
2） 塊級元素可以設(shè)置 width, height屬性，行內(nèi)元素設(shè)置width, height無效
3) 塊級元素可以設(shè)置margin 和 padding. 行內(nèi)元素的水平方向的padding-left,padding-right,margin-left,margin-right 都產(chǎn)生邊距效果，但是豎直方向的padding-top,padding-bottom,margin-top,margin-bottom都不會(huì)產(chǎn)生邊距效果。
文章自留地：
成笑笑博客_一個(gè).Net和安卓技術(shù)狂愛者博客。
主要以發(fā)布和分享.Net和安卓文章為主，爭做全棧開發(fā)工程師，愛學(xué)習(xí)，愛挑戰(zhàn)，愛編程。用技術(shù)改變生活。
歡迎關(guān)注，微信公眾號(hào):net知識(shí)分享（net4k8k）[做個(gè)12k的技術(shù)員].博客網(wǎng)址：www.chengxiaoxiao.com.
歡迎加入qq技術(shù)交流群：538742639.
*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
