整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
近改項(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)系。
