整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
在HTML中,存在這許許多多的元素(同:”HTML標簽”),這些元素最終可分為三類,分別是塊級元素,內(nèi)聯(lián)元素(同:”行內(nèi)元素”),塊級內(nèi)聯(lián)元素(同:”行內(nèi)塊元素”)。
你對這些元素是否真的了解呢?
我們來看看這三類元素的特點:
一.特點
1.每個塊級元素都從新的一行開始顯示(塊級元素獨占一行)
2.元素的寬度,高度,內(nèi)邊距(padding),邊框(border),外邊框(margin)都能隨意設(shè)置
3.塊級元素在網(wǎng)頁中所占面積=內(nèi)容區(qū)(content)+內(nèi)邊距(padding)+邊框(border)+外邊距(margin)
4.塊級元素本身未設(shè)置寬度的情況下,寬度=父元素寬度-該元素的左右外邊距-該元素的左右邊框-該元素的左右內(nèi)邊距
5.塊級元素未設(shè)置padding和border的情況下,padding和border的數(shù)值為0
6.塊級元素未設(shè)置寬度和外邊距的情況下,margin的值為0,寬度為100%(即與父元素寬度一致)
7.塊級元素設(shè)置寬度但未設(shè)置外邊距的情況下,左外邊距的值為0
8.塊級元素設(shè)置寬度,未設(shè)置padding和border,同時設(shè)置margin: 0 auto的情況下,左右外邊距平分 父元素寬度-該元素寬度所剩余的空間
9.塊級內(nèi)聯(lián)元素不受父元素的line-height以及自身的vertical-align影響
二.將非塊級元素轉(zhuǎn)換成塊級元素的方法
1.display:block
2.float:left或right
3.position:absolute或fixed
4.父元素使用display:flex,子元素會變?yōu)閴K級元素
三.常見塊級元素
<div>,<p>,<h1>...<h6>,<ol>,<ul>,<dl>,<address>,<blockquote> ,<form>
一.特點
1.當父元素寬度足以放下多個內(nèi)聯(lián)元素時,一行內(nèi)可以顯示多個內(nèi)聯(lián)元素,否則放不下的內(nèi)聯(lián)元素將另起一行(一行存放多個內(nèi)聯(lián)元素)
2.內(nèi)聯(lián)元素的寬度,高度由該元素的內(nèi)容撐開
3.內(nèi)聯(lián)元素的寬度/高度/padding-top/border-top/margin-top/margin-bottom設(shè)置無效
4.如果padding/border/margin未設(shè)置的情況下,全部為0
5.內(nèi)聯(lián)元素受父元素的line-height以及自身的vertical-align影響
二.將非內(nèi)聯(lián)元素轉(zhuǎn)換成內(nèi)聯(lián)元素的方法
使用display:inline
三.常見內(nèi)聯(lián)元素
<a>,<span>,<i>,<br>,<strong>,<em>
一.特點
1.當父元素寬度足以放下多個塊級內(nèi)聯(lián)元素時,一行內(nèi)可以顯示多個塊級內(nèi)聯(lián)元素,否則放不下的塊級內(nèi)聯(lián)元素將另起一行(一行存放多個塊級內(nèi)聯(lián)元素)
2.塊級內(nèi)聯(lián)元素的寬度,高度,內(nèi)邊距(padding),邊框(border),外邊框(margin)都能隨意設(shè)置
3. 塊級內(nèi)聯(lián)元素的寬度,高度未設(shè)置的情況下,由該元素的內(nèi)容撐開
4.塊級內(nèi)聯(lián)元素受父元素的line-height以及自身的vertical-align影響
二.將非內(nèi)聯(lián)元素轉(zhuǎn)換成內(nèi)聯(lián)元素的方法
使用display:inline-block
三.常見內(nèi)聯(lián)元素
<input>
web前端之二叉搜索樹
分享成果，隨喜正能量】人可以無知，但不可以無趣。在自己的心上種一顆快樂的種子，堅定、快樂的做自己的事，更讓大家不那么無趣。
《VBA信息獲取與處理》教程是我推出第六套教程，目前已經(jīng)是第一版修訂了。這套教程定位于最高級，是學完初級，中級后的教程。這部教程給大家講解的內(nèi)容有：跨應用程序信息獲得、隨機信息的利用、電子郵件的發(fā)送、VBA互聯(lián)網(wǎng)數(shù)據(jù)抓取、VBA延時操作，剪貼板應用、Split函數(shù)擴展、工作表信息與其他應用交互，F(xiàn)SO對象的利用、工作表及文件夾信息的獲取、圖形信息的獲取以及定制工作表信息函數(shù)等等內(nèi)容。程序文件通過32位和64位兩種OFFICE系統(tǒng)測試。是非常抽象的，更具研究的價值。
教程共兩冊，八十四講。今日的內(nèi)容是專題八“VBA與HTML文檔”的第二節(jié)上半部分：HTML文檔常用元素匯總
3）HTML 注釋 <!-- 與 -->
注釋標簽 <!-- 與 --> 用于在 HTML 插入注釋。可以將注釋插入 HTML 代碼中，這樣可以提高其可讀性，使代碼更易被人理解。瀏覽器會忽略注釋，也不會顯示它們。開始括號之后（左邊的括號）需要緊跟一個嘆號，結(jié)束括號之前（右邊的括號）不需要。
注釋可以按下面的格式寫：
<!--注釋：文檔頭部，文檔相關(guān)消息，并不提供文檔內(nèi)容-->
4）段落 <p>
段落是通過 <p> 標簽定義的。瀏覽器會自動地在段落的前后添加空行。（<p> 是塊級元素）
在上面的例子中我們已經(jīng)用到了表述段落的符號<p>，我們?nèi)绻崛【W(wǎng)頁小說的數(shù)據(jù)，新聞等頁面的消息，文本都是一段一段的，這樣的頁面，我們就可以通過<p>標簽實現(xiàn)。當運用ie/webbrowser方式提取這類網(wǎng)頁的時候，歷遍所有段落p元素即可。
使用空的段落標記 <p></p> 去插入一個空行是個壞習慣。可以用 <br /> 標簽代替它！（但是不要用 <br /> 標簽去創(chuàng)建列表。）
5）超鏈接 <a>
使用 <a> 標簽在 HTML 中創(chuàng)建鏈接。
超鏈接可以是一個字，一個詞，或者一組詞，也可以是一幅圖像，您可以點擊這些內(nèi)容來跳轉(zhuǎn)到新的文檔或者當前文檔中的某個部分。當您把鼠標指針移動到網(wǎng)頁中的某個鏈接上時，箭頭會變?yōu)橐恢恍∈帧?/p>
有兩種使用 <a> 標簽的方式：通過使用 href 屬性 - 創(chuàng)建指向另一個文檔的鏈接也可以通過使用 name 屬性 - 創(chuàng)建文檔內(nèi)的書簽。
超鏈接是我們最常見的頁面元素，基本的門戶網(wǎng)站都有他，點了以后，可以跳轉(zhuǎn)到另一個頁面。一般語法格式：
<a href=”跳轉(zhuǎn)的URL” target=” _blank/_self”>顯示的超鏈接文本</a>
Target屬性，表示的是當我們點擊超鏈接，是在原頁面進行跳轉(zhuǎn)（_self）還是新建頁面進行跳轉(zhuǎn)（_blank）。
為了說明這種超鏈接，我們更正一下“HTML基礎(chǔ)學習-1.html”的內(nèi)容：
<html>
<head> <!--注釋：文檔頭部，文檔相關(guān)消息，并不提供文檔內(nèi)容-->
<title>
VBA應用提高篇
</title>
</head>
<body> <!--注釋：文檔主體-->
<h1>學習VBA語言</h1>
<p>為了更好的掌握VBA的各個知識點，您可以先參考我的第一套教程：VBA代碼解決方案</p>
<a href="https://mbd.baidu.com/newspage/data/landingshare?pageType=1&isBdboxFrom=1&context=%7B%22nid%22%3A%22news_9520815886500285610%22%2C%22sourceFrom%22%3A%22bjh%22%7D" target=" _blank">顯示學習的網(wǎng)頁</a>
</body>
</html>
講上述代碼另存為“HTML基礎(chǔ)學習-2.html”內(nèi)容截圖：
打開這個文件：
點擊鏈接：
查看一下源碼：
1）標題 <h1> - <h6>
2）水平線 <hr />
3）注釋 <!-- 與 -->
4）段落 <p>
5）超鏈接 <a>
以上各個元素我們要熟練的掌握，才能在分析網(wǎng)頁的時候可以隨心所欲。下一講我們繼續(xù)講解HTML網(wǎng)頁的元素構(gòu)成。
本節(jié)知識點回向：
什么是HTML文檔的框架結(jié)構(gòu)是怎樣的？說出以下個元素的標簽：標題，水平線，注釋，段落，超鏈接 。
本節(jié)參考文件：HTML基礎(chǔ)學習-1.html；HTML基礎(chǔ)學習-2.html
我20多年的VBA實踐經(jīng)驗，全部濃縮在下面的各個教程中，教程學習順序：
【分享成果，隨喜正能量】人生在世，會遇到一些好事，還會遇上些壞事。好事我承受得起，壞事也承受得住。就這樣坦蕩蕩做個尋常人也不壞。
tml元素主要分為3類，塊級元素、內(nèi)聯(lián)元素以及內(nèi)聯(lián)塊級元素，本篇文章我們來就詳細介紹一下各個分類的含義以及對應的特點。
在html中div、 p、hx、form、ul 、 li、dl、dd就是塊級元素。css屬性設(shè)置display:block就是將元素顯示為塊級元素。塊級元素特點：
1、每個塊級元素都從新的一行開始，并且其后的元素也另起一行；（一個塊級元素獨占一行）
2、元素的高度、寬度、行高以及頂和底邊距都可設(shè)置；
3、元素寬度在不設(shè)置的情況下，是它本身父容器的100%（和父元素的寬度一致），除非設(shè)定一個寬度。
我們這里將塊級元素代碼寫一下然后看一下在瀏覽器中的顯示效果。html代碼就如下所示：
在網(wǎng)頁中我們可以看到，這些元素每一個都單獨占據(jù)一行的空間，不管內(nèi)容是否夠一行。
在html中，span、a、label、input、 strong 和em就是典型的內(nèi)聯(lián)元素（行內(nèi)元素）（inline）元素。當然塊狀元素也可 以通過代碼display:inline將元素設(shè)置為內(nèi)聯(lián)元素。內(nèi)聯(lián)元素特點：
1、和其他元素都在一行上；
2、元素的高度、寬度、行高及頂部和底部邊距不可設(shè)置；
3、元素的寬度就是它包含的文字或圖片的寬度，不可改變。
注意：為 a 元素設(shè)置了寬和高，但都沒有起到作用，原因是a在默認的時候是內(nèi)聯(lián)元素，內(nèi)聯(lián)元素是不可以設(shè)置寬和高的。
我們這里將內(nèi)聯(lián)元素代碼寫一下然后看一下在瀏覽器中的顯示效果。html代碼就如下所示：
在網(wǎng)頁中我們可以看到，這些元素會在一行一直排著顯示，直到充滿整行空間才會換行顯示。
內(nèi)聯(lián)塊狀元素（inline-block）就是同時具備內(nèi)聯(lián)元素、塊狀元素的特點，代碼display:inline-block就是將元素設(shè)置為內(nèi)聯(lián)塊狀元素。inline-block元素特點：
1、和其他元素都在一行上；
2、元素的高度、寬度、行高以及頂和底邊距都可設(shè)置。
注意：img是inline元素，但是他同時也是替換元素，他有著特殊的表現(xiàn)：
1. 可以設(shè)置width/height;
2. 默認的，img元素在屏幕占據(jù)的空間與其圖片的實際像素一致，除非CSS有設(shè)置或者自身的width/height HTML 屬性有設(shè)置；
3. 如果img標簽的包裹元素為也為inline元素，則img的邊界可以超出其直接父元素的邊界，直到自己的寬、高達到最大或者設(shè)定值為止，而且文檔流中img的兄弟元素也不能遮蓋住img。最常見的就是a里面包含的img；
4. 所以從行為上看,img元素作為替換元素，有著類似于Inline-block的行為，盡管在SPEC里面，他的確是一個inline元素。
對于html的元素分類今天就先介紹到這里，大家在平時可以自己多加練習練習，做到每個標簽屬于什么元素。
每日金句： 成功的秘訣就是每天都比別人多努力一點。喜歡我的文章的小伙伴記得關(guān)注一下哦，每天將為你更新最新知識。
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
