在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)系。