近改項(xiàng)目的時候發(fā)現(xiàn)html元素與css樣式之間有些其妙的特性,準(zhǔn)備挖掘,沒想到牽扯出來很多知識點(diǎn),東西比較雜且零碎,因?yàn)橹R比較分散。
兩類元素:行內(nèi)元素(inline)和塊級元素(block)
行內(nèi)元素
代表元素:a img span input label button textarea
它們的特性:
1、元素寬高由元素內(nèi)容決定,定義寬高無效(解決辦法:display:inline-block或者只設(shè)置position:absolute屬性而不進(jìn)行定位)
2、相鄰行內(nèi)元素同在一行顯示,直到一行排滿了才會換行
3、行內(nèi)元素可以嵌套其他行內(nèi)元素但是不能嵌套塊級元素
4、設(shè)置margin、padding的上下邊距無效,只有設(shè)置左右邊距才生效
特別:置換元素
html還有一些置換元素,這些元素本身就有內(nèi)在的尺寸,如img、input、select、textarea、button這些元素。這些元素雖然是行內(nèi)元素,但是由于它們擁有內(nèi)在的寬高,故它們與其他inline元素相比又有特殊之處,就是可以定義寬高且生效。這就如同設(shè)置了display:inline-block一樣的效果。
塊級元素
代表元素:div h1~h6、p、li、table、tr、ol、dl
它們的特性:
1、每個塊級元素都獨(dú)占整行,寬度默認(rèn)為父元素的寬度,高度默認(rèn)為元素內(nèi)容的高度
2、可以定義寬高,即使定位再小的寬度也會獨(dú)占一行
3、可以嵌套行內(nèi)元素及塊級元素
4、設(shè)置所有的margin及padding任何邊距都生效
5、改變獨(dú)占一行的特性,解決辦法為設(shè)置display:inline-block
文按照display分類。三者可以互相轉(zhuǎn)化——設(shè)置display屬性值:inline、inline-block、block
包含textarea、span、a、img、input、select等。
行內(nèi)元素特征:
(1)設(shè)置寬高無效
(2)對margin僅設(shè)置左右方向有效,上下無效;padding設(shè)置上下左右都有效,即會撐大空間,行內(nèi)元素尺寸 由內(nèi)含的內(nèi)容決定,盒模型中 padding, border 與塊級元素并無差異,都是標(biāo)準(zhǔn)的盒模型,但是 margin 卻只有水平方向的值,垂直方向并沒有起作用。行內(nèi)元素的水平方向的padding-left,padding-right,margin- left,margin-right 都產(chǎn)生邊距效果,但是豎直方向的padding-top,padding-bottom,margin-top,margin-bottom都 不會產(chǎn)生邊距效果。padding設(shè)置上下左右都有效,即會撐大空間但是不會產(chǎn)生邊距效果。
(3)不會自動進(jìn)行換行
(4)元素寬度在不設(shè)置的情況下,是它本身父容器的100%(和父元素的寬度一致),除非設(shè)定一個寬度。
行內(nèi)塊狀元素特征:
(1)不自動換行
(2)能夠識別寬高
(3)默認(rèn)排列方式為從左到右
div、p、ul、h1等標(biāo)題元素、ol、form、table等。
塊狀元素特征:
(1)能夠識別寬高
(2)margin和padding的上下左右均對其有效
(3)可以自動換行
(4)多個塊狀元素標(biāo)簽寫在一起,默認(rèn)排列方式為從上至下
補(bǔ)充說明:
在HTML5中,程序員可以自定義標(biāo)簽,在任意定義標(biāo)簽中,加入display:block;即可,當(dāng)然也可以是行內(nèi)或行內(nèi)塊狀。
可變元素為根據(jù)上下文語境決定該元素為塊元素或者內(nèi)聯(lián)元素。
* applet - java applet
* button - 按鈕
* del - 刪除文本
* iframe - inline frame
* ins - 插入的文本
* map - 圖片區(qū)塊(map)
* object - object對象
* script - 客戶端腳本
1、文檔流(Document flow):浮動元素會脫離文檔流,并使得周圍元素環(huán)繞這個元素。而inline-block元素仍在文檔流內(nèi)。因此設(shè)置inline-block不需要清除浮動。當(dāng)然,周圍元素不會環(huán)繞這個元素,你也不可能通過清除inline-block就讓一個元素跑到下面去。
2、水平位置(Horizontal position):很明顯你不能通過給父元素設(shè)置text-align:center讓浮動元素居中。事實(shí)上定位類屬性設(shè)置到父元素上,均不會影響父元素內(nèi)浮動的元素。但是父元素內(nèi)元素如果設(shè)置了display:inline-block,則對父元素設(shè)置一些定位屬性會影響到子元素。(這還是因?yàn)楦釉孛撾x文檔流的關(guān)系)。
3、垂直對齊(Vertical alignment):inline-block元素沿著默認(rèn)的基線對齊。浮動元素緊貼頂部。你可以通過vertical屬性設(shè)置這個默認(rèn)基線,但對浮動元素這種方法就不行了。這也是我傾向于inline-block的主要原因。
4、空白(Whitespace):inline-block包含html空白節(jié)點(diǎn)。如果你的html中一系列元素每個元素之間都換行了,當(dāng)你對這些元素設(shè)置inline-block時,這些元素之間就會出現(xiàn)空白。而浮動元素會忽略空白節(jié)點(diǎn),互相緊貼.
分享成果,隨喜正能量】人可以無知,但不可以無趣。在自己的心上種一顆快樂的種子,堅(jiān)定、快樂的做自己的事,更讓大家不那么無趣。
《VBA信息獲取與處理》教程是我推出第六套教程,目前已經(jīng)是第一版修訂了。這套教程定位于最高級,是學(xué)完初級,中級后的教程。這部教程給大家講解的內(nèi)容有:跨應(yīng)用程序信息獲得、隨機(jī)信息的利用、電子郵件的發(fā)送、VBA互聯(lián)網(wǎng)數(shù)據(jù)抓取、VBA延時操作,剪貼板應(yīng)用、Split函數(shù)擴(kuò)展、工作表信息與其他應(yīng)用交互,F(xiàn)SO對象的利用、工作表及文件夾信息的獲取、圖形信息的獲取以及定制工作表信息函數(shù)等等內(nèi)容。程序文件通過32位和64位兩種OFFICE系統(tǒng)測試。是非常抽象的,更具研究的價值。
教程共兩冊,八十四講。今日的內(nèi)容是專題八“VBA與HTML文檔”的第二節(jié)上半部分:HTML文檔常用元素匯總
3)HTML 注釋 <!-- 與 -->
注釋標(biāo)簽 <!-- 與 --> 用于在 HTML 插入注釋。可以將注釋插入 HTML 代碼中,這樣可以提高其可讀性,使代碼更易被人理解。瀏覽器會忽略注釋,也不會顯示它們。開始括號之后(左邊的括號)需要緊跟一個嘆號,結(jié)束括號之前(右邊的括號)不需要。
注釋可以按下面的格式寫:
<!--注釋:文檔頭部,文檔相關(guān)消息,并不提供文檔內(nèi)容-->
4)段落 <p>
段落是通過 <p> 標(biāo)簽定義的。瀏覽器會自動地在段落的前后添加空行。(<p> 是塊級元素)
在上面的例子中我們已經(jīng)用到了表述段落的符號<p>,我們?nèi)绻崛【W(wǎng)頁小說的數(shù)據(jù),新聞等頁面的消息,文本都是一段一段的,這樣的頁面,我們就可以通過<p>標(biāo)簽實(shí)現(xiàn)。當(dāng)運(yùn)用ie/webbrowser方式提取這類網(wǎng)頁的時候,歷遍所有段落p元素即可。
使用空的段落標(biāo)記 <p></p> 去插入一個空行是個壞習(xí)慣。可以用 <br /> 標(biāo)簽代替它!(但是不要用 <br /> 標(biāo)簽去創(chuàng)建列表。)
5)超鏈接 <a>
使用 <a> 標(biāo)簽在 HTML 中創(chuàng)建鏈接。
超鏈接可以是一個字,一個詞,或者一組詞,也可以是一幅圖像,您可以點(diǎn)擊這些內(nèi)容來跳轉(zhuǎn)到新的文檔或者當(dāng)前文檔中的某個部分。當(dāng)您把鼠標(biāo)指針移動到網(wǎng)頁中的某個鏈接上時,箭頭會變?yōu)橐恢恍∈帧?/p>
有兩種使用 <a> 標(biāo)簽的方式:通過使用 href 屬性 - 創(chuàng)建指向另一個文檔的鏈接也可以通過使用 name 屬性 - 創(chuàng)建文檔內(nèi)的書簽。
超鏈接是我們最常見的頁面元素,基本的門戶網(wǎng)站都有他,點(diǎn)了以后,可以跳轉(zhuǎn)到另一個頁面。一般語法格式:
<a href=”跳轉(zhuǎn)的URL” target=” _blank/_self”>顯示的超鏈接文本</a>
Target屬性,表示的是當(dāng)我們點(diǎn)擊超鏈接,是在原頁面進(jìn)行跳轉(zhuǎn)(_self)還是新建頁面進(jìn)行跳轉(zhuǎn)(_blank)。
為了說明這種超鏈接,我們更正一下“HTML基礎(chǔ)學(xué)習(xí)-1.html”的內(nèi)容:
<html>
<head> <!--注釋:文檔頭部,文檔相關(guān)消息,并不提供文檔內(nèi)容-->
<title>
VBA應(yīng)用提高篇
</title>
</head>
<body> <!--注釋:文檔主體-->
<h1>學(xué)習(xí)VBA語言</h1>
<p>為了更好的掌握VBA的各個知識點(diǎn),您可以先參考我的第一套教程: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">顯示學(xué)習(xí)的網(wǎng)頁</a>
</body>
</html>
講上述代碼另存為“HTML基礎(chǔ)學(xué)習(xí)-2.html”內(nèi)容截圖:
打開這個文件:
點(diǎn)擊鏈接:
查看一下源碼:
1)標(biāo)題 <h1> - <h6>
2)水平線 <hr />
3)注釋 <!-- 與 -->
4)段落 <p>
5)超鏈接 <a>
以上各個元素我們要熟練的掌握,才能在分析網(wǎng)頁的時候可以隨心所欲。下一講我們繼續(xù)講解HTML網(wǎng)頁的元素構(gòu)成。
本節(jié)知識點(diǎn)回向:
什么是HTML文檔的框架結(jié)構(gòu)是怎樣的?說出以下個元素的標(biāo)簽:標(biāo)題,水平線,注釋,段落,超鏈接 。
本節(jié)參考文件:HTML基礎(chǔ)學(xué)習(xí)-1.html;HTML基礎(chǔ)學(xué)習(xí)-2.html
我20多年的VBA實(shí)踐經(jīng)驗(yàn),全部濃縮在下面的各個教程中,教程學(xué)習(xí)順序:
【分享成果,隨喜正能量】人生在世,會遇到一些好事,還會遇上些壞事。好事我承受得起,壞事也承受得住。就這樣坦蕩蕩做個尋常人也不壞。
*請認(rèn)真填寫需求信息,我們會在24小時內(nèi)與您取得聯(lián)系。