整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
分享成果，隨喜正能量】人可以無知，但不可以無趣。在自己的心上種一顆快樂的種子，堅定、快樂的做自己的事，更讓大家不那么無趣。
《VBA信息獲取與處理》教程是我推出第六套教程，目前已經是第一版修訂了。這套教程定位于最高級，是學完初級，中級后的教程。這部教程給大家講解的內容有：跨應用程序信息獲得、隨機信息的利用、電子郵件的發送、VBA互聯網數據抓取、VBA延時操作，剪貼板應用、Split函數擴展、工作表信息與其他應用交互，FSO對象的利用、工作表及文件夾信息的獲取、圖形信息的獲取以及定制工作表信息函數等等內容。程序文件通過32位和64位兩種OFFICE系統測試。是非常抽象的，更具研究的價值。
教程共兩冊，八十四講。今日的內容是專題八“VBA與HTML文檔”的第二節上半部分：HTML文檔常用元素匯總
3）HTML 注釋 <!-- 與 -->
注釋標簽 <!-- 與 --> 用于在 HTML 插入注釋。可以將注釋插入 HTML 代碼中，這樣可以提高其可讀性，使代碼更易被人理解。瀏覽器會忽略注釋，也不會顯示它們。開始括號之后（左邊的括號）需要緊跟一個嘆號，結束括號之前（右邊的括號）不需要。
注釋可以按下面的格式寫：
<!--注釋：文檔頭部，文檔相關消息，并不提供文檔內容-->
4）段落 <p>
段落是通過 <p> 標簽定義的。瀏覽器會自動地在段落的前后添加空行。（<p> 是塊級元素）
在上面的例子中我們已經用到了表述段落的符號<p>，我們如果提取網頁小說的數據，新聞等頁面的消息，文本都是一段一段的，這樣的頁面，我們就可以通過<p>標簽實現。當運用ie/webbrowser方式提取這類網頁的時候，歷遍所有段落p元素即可。
使用空的段落標記 <p></p> 去插入一個空行是個壞習慣。可以用 <br /> 標簽代替它！（但是不要用 <br /> 標簽去創建列表。）
5）超鏈接 <a>
使用 <a> 標簽在 HTML 中創建鏈接。
超鏈接可以是一個字，一個詞，或者一組詞，也可以是一幅圖像，您可以點擊這些內容來跳轉到新的文檔或者當前文檔中的某個部分。當您把鼠標指針移動到網頁中的某個鏈接上時，箭頭會變為一只小手。
有兩種使用 <a> 標簽的方式：通過使用 href 屬性 - 創建指向另一個文檔的鏈接也可以通過使用 name 屬性 - 創建文檔內的書簽。
超鏈接是我們最常見的頁面元素，基本的門戶網站都有他，點了以后，可以跳轉到另一個頁面。一般語法格式：
<a href=”跳轉的URL” target=” _blank/_self”>顯示的超鏈接文本</a>
Target屬性，表示的是當我們點擊超鏈接，是在原頁面進行跳轉（_self）還是新建頁面進行跳轉（_blank）。
為了說明這種超鏈接，我們更正一下“HTML基礎學習-1.html”的內容：
<html>
<head> <!--注釋：文檔頭部，文檔相關消息，并不提供文檔內容-->
<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">顯示學習的網頁</a>
</body>
</html>
講上述代碼另存為“HTML基礎學習-2.html”內容截圖：
打開這個文件：
點擊鏈接：
查看一下源碼：
1）標題 <h1> - <h6>
2）水平線 <hr />
3）注釋 <!-- 與 -->
4）段落 <p>
5）超鏈接 <a>
以上各個元素我們要熟練的掌握，才能在分析網頁的時候可以隨心所欲。下一講我們繼續講解HTML網頁的元素構成。
本節知識點回向：
什么是HTML文檔的框架結構是怎樣的？說出以下個元素的標簽：標題，水平線，注釋，段落，超鏈接 。
本節參考文件：HTML基礎學習-1.html；HTML基礎學習-2.html
我20多年的VBA實踐經驗，全部濃縮在下面的各個教程中，教程學習順序：
【分享成果，隨喜正能量】人生在世，會遇到一些好事，還會遇上些壞事。好事我承受得起，壞事也承受得住。就這樣坦蕩蕩做個尋常人也不壞。
TML 實例
<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>菜鳥教程(runoob.com)</title></head><body><h1>我的第一個標題</h1><p>我的第一個段落。</p></body></html>
實例解析
DOCTYPE 聲明了文檔類型
位于標簽 <html> 與 </html> 描述了文檔類型
位于標簽 <body> 與 </body> 為可視化網頁內容
位于標簽 <h1> 與 </h1> 作為一個標題使用
位于標簽 <p> 與 </p> 作為一個段落顯示
| <!DOCTYPE html> 在HTML5中也是描述了文檔類型。 |
什么是HTML?
HTML 是用來描述網頁的一種語言。
HTML 指的是超文本標記語言: HyperText Markup Language
HTML 不是一種編程語言，而是一種標記語言
標記語言是一套標記標簽 (markup tag)
HTML 使用標記標簽來描述網頁
HTML 文檔包含了HTML 標簽及文本內容
HTML文檔也叫做 web 頁面
HTML 標簽
HTML 標記標簽通常被稱為 HTML 標簽 (HTML tag)。
HTML 標簽是由尖括號包圍的關鍵詞，比如 <html>
HTML 標簽通常是成對出現的，比如 <b> 和 </b>
標簽對中的第一個標簽是開始標簽，第二個標簽是結束標簽
開始和結束標簽也被稱為開放標簽和閉合標簽
<標簽>內容</標簽>
HTML 元素
"HTML 標簽" 和 "HTML 元素" 通常都是描述同樣的意思.
但是嚴格來講, 一個 HTML 元素包含了開始標簽與結束標簽，如下實例:
HTML 元素:
<p>這是一個段落。</p>
Web 瀏覽器
Web瀏覽器（如谷歌瀏覽器，Internet Explorer，Firefox，Safari）是用于讀取HTML文件，并將其作為網頁顯示。
瀏覽器并不是直接顯示的HTML標簽，但可以使用標簽來決定如何展現HTML頁面的內容給用戶：
HTML 網頁結構
下面是一個可視化的HTML頁面結構：
<html>
<head>
<title>頁面標題</title>
</head>
<body>
<h1>這是一個標題</h1>
<p>這是一個段落。</p>
<p>這是另外一個段落。</p>
</body>
</html>
| 只有 <body> 區域 (白色部分) 才會在瀏覽器中顯示。 |
HTML版本
從初期的網絡誕生后，已經出現了許多HTML版本:
| 版本 | 發布時間 |
|---|---|
| HTML | 1991 |
| HTML+ | 1993 |
| HTML 2.0 | 1995 |
| HTML 3.2 | 1997 |
| HTML 4.01 | 1999 |
| XHTML 1.0 | 2000 |
| HTML5 | 2012 |
| XHTML5 | 2013 |
<!DOCTYPE> 聲明
<!DOCTYPE>聲明有助于瀏覽器中正確顯示網頁。
網絡上有很多不同的文件，如果能夠正確聲明HTML的版本，瀏覽器就能正確顯示網頁內容。
doctype 聲明是不區分大小寫的，以下方式均可：
<!DOCTYPE html>
<!DOCTYPE HTML>
<!doctype html>
<!Doctype Html>
通用聲明
HTML5
<!DOCTYPE html>
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
查看完整網頁聲明類型 DOCTYPE 參考手冊。
中文編碼
目前在大部分瀏覽器中，直接輸出中文會出現中文亂碼的情況，這時候我們就需要在頭部將字符聲明為 UTF-8。
HTML 實例
<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>頁面標題</title></head><body><h1>我的第一個標題</h1><p>我的第一個段落。</p></body></html>
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
前端已經有一段時間了，最近在對前端基礎知識做一個梳理總結，今天聯系頁面的時候遇到了一個浮動元素造成父級高度塌陷的問題，為了弄清楚這個問題，我也是好一番查資料，原來MDN上專門介紹過解決這個問題的辦法，下面我就來分享一下我個人的心得。
下面是兩個容器元素box和box1，其中box1是子元素。
<div class="box">
<div class="box1"></div>
</div>這是元素的CSS樣式。
<style>
body{
background-color: #121212;
}
.box {
border-radius: 8px;
padding: 16px;
background-color: #121212;
border: 3px solid #ffffff;
}
.box1 {
width: 200px;
height: 200px;
overflow: hidden;
background-color: rgb(196, 233, 30);
}
</styl這是上面HTML和CSS渲染出來的效果圖。
元素樣式
現在我對box1加上一個CSS樣式：float:left;那么現在的渲染效果就變成了這樣：
子元素浮動起來了
從效果圖上我們可以看到，父級元素的高度沒了，子元素出現在了父元素的外面，并沒有完全被父級元素包裹住，這是因為子元素box1添加了float:left;之后脫離了文檔流，所以無法被包含了。
脫離正常文檔流的元素會自動創建一個新的塊級格式化環境，也就是我們常說的BFC（Block Formatting Context），通常情況下，只有根元素一個塊級上下文。但是上述的元素box1設置了float:left就會為這個塊級元素創建一個獨立的上下文環境，因此這個元素的排版會完全獨立于內部，所以父級元素無法包裹這個元素，因此它的高度會塌陷。
脫離常規文檔流的元素：
方案一：給父級元素加上一個float:left
父級元素加上float:left
但是這樣又出現了一個問題：父級的寬度丟失了，無法自適應頁面的寬度了，因此該方法不推薦使用。
方案二：給子元素box1加上display:inline-block
display:inline-block
該屬性也可以解決父級高度塌陷的問題，但是同樣會造成父級寬度缺失，也不是最優解。
方案三：父級元素添加overflow:auto
overflow:auto
通過這個屬性可以完美地解決父級高度塌陷的問題，并且不會引起其它問題，所以MDN上也推薦使用這個方式去解決這個問題。通常為了不讓子元素的內容溢出容器，我們也可以使用overflow:hidden屬性，效果也是一樣的。
不過值得注意的是，這個BFC模式在IE下并不生效，但是可以通過添加zoom:1的屬性達到類似效果。不過我個人覺得這個目前用到的機會不多了，畢竟IE連它的親爹都放棄他了[看][看][看]估計除非是一些上古項目可能會用到。至于這個效果大家也可以去IE下測試一下，歡迎大家在評論區一起交流。由于本人也屬于前端萌新，如果有說的不足或者錯誤的地方還請各位大佬批評指正，感激不盡。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
