整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
分享成果，隨喜正能量】人生，有多少計較，就有多少痛苦。有多少寬容，就有多少歡樂。痛苦與歡樂都是心靈的折射，就像鏡子里面有什么，決定于鏡子面前的事物。心里放不下，自然成了負擔，負擔越多，人生越不快樂。計較的心如同口袋，寬容的心猶如漏斗。復雜的心愛計較，簡單的心易快樂。
《VBA信息獲取與處理》教程是我推出第六套教程，目前已經是第一版修訂了。這套教程定位于最高級，是學完初級，中級后的教程。這部教程給大家講解的內容有：跨應用程序信息獲得、隨機信息的利用、電子郵件的發送、VBA互聯網數據抓取、VBA延時操作，剪貼板應用、Split函數擴展、工作表信息與其他應用交互，FSO對象的利用、工作表及文件夾信息的獲取、圖形信息的獲取以及定制工作表信息函數等等內容。程序文件通過32位和64位兩種OFFICE系統測試。是非常抽象的，更具研究的價值。
教程共兩冊，八十四講。今日的內容是專題八“VBA與HTML文檔”的第二節上半部分：HTML文檔元素
大家好，我們這講開始HTML的講解，為了認識這種特殊的語言，我們要先看看這種語言中的各種元素個代表什么意義。上節中在講這種語言的特征時講過，標簽是用來描述網頁的。瀏覽器讀取HTML文檔，識別標簽，并按標簽要求以網頁進行顯示文本。大部分標簽都是成隊出現的。
起始標簽和結束標簽之間的所有文本，都叫做元素。也就是這個格式就是：
<起始標簽:也叫元素名>元素的內容<結束標簽:/+元素名>
標簽是可以擁有屬性的，屬性提供了元素的一些附加信息，起始標簽，有時候格式如下：
<元素名 屬性名稱=”屬性值”>
同時，元素是可以擁有元素的，即某個元素的內容有時候是一個子元素。
元素這東西，比較抽象，我們可以把它且當作一個對象來理解，例如工作簿對象，每個工作簿的名稱都不一樣（屬性），每個工作簿里面都有工作表（子元素），每個表都有名稱（屬性），里面填寫的內容也不一樣（元素的內容）。
在上一講中我們舉了一個最為簡單的實例來說明HTML文檔：
<html>
<body>
<h1>學習VBA語言</h1>
<p>為了更好的掌握VBA的各個知識點，您可以參考我的第一套教程：VBA代碼解決方案</p>
</body>
</html>
我們將上面的格式修正一下，如下面：
<html>
<head> <!--注釋：文檔頭部，文檔相關消息，并不提供文檔內容-->
<title>
VBA應用提高篇
</title>
</head>
<body> <!--注釋：文檔主體-->
<h1>學習VBA語言</h1>
<p>為了更好的掌握VBA的各個知識點，您可以先參考我的第一套教程：VBA代碼解決方案</p>
</body>
</html>
將上面的內容寫入記事本中保存為.html文件：HTML基礎學習-1.html
然后我們雙擊打開這個文件，看看瀏覽器的翻譯效果：
我們再看看網頁的源碼：
從上面的框架代碼，我們可以看出，一般的頁面，都有html元素，其一般內含兩個元素，一個是head元素，一個是body元素。Head元素僅僅說明文檔的相關消息，并不展示文檔實體，body元素才是真正展示文檔主體的，所有要在頁面展示的元素，都要在body內進行書寫。
1）HTML標題 <h1> - <h6>
標題（Heading）是通過 <h1> - <h6> 等標簽進行定義的。<h1> 定義最大的標題。<h6> 定義最小的標題。瀏覽器會自動地在標題的前后添加空行。標題很重要，將 HTML heading 標簽只用于標題。不要僅僅是為了產生粗體或大號的文本而使用標題。因為用戶可以通過標題來快速瀏覽您的網頁，所以用標題來呈現文檔結構是很重要的。應該將 h1 用作主標題（最重要的），其后是 h2（次重要的），再其次是 h3，以此類推。在HTML基礎學習.HTML文件中我們已經用到了標題的元素
2）HTML水平線 <hr />
<hr /> 標簽在 HTML 頁面中創建水平線。可用于分隔內容。
[待續]
本節參考文件：HTML基礎學習-1.html；HTML基礎學習-2.html
我20多年的VBA實踐經驗，全部濃縮在下面的各個教程中，教程學習順序：
【分享成果，隨喜正能量】人生，一歲有一歲的味道，一站有一站的風景，你的年齡應該成為你生命的勛章而不是你傷感的理由。 ??
lt;marquee>...</marquee>普通卷動
<marquee behavior=slide>...</marquee>滑動
<marquee behavior=scroll>...</marquee>預設卷動
<marquee behavior=alternate>...</marquee>來回卷動
<marquee direction=down>...</marquee>向下卷動
<marquee direction=up>...</marquee>向上卷動
<marquee direction=right></marquee>向右卷動
<marquee direction=left></marquee>向左卷動
<marquee loop=2>...</marquee>卷動次數
<marquee width=180>...</marquee>設定寬度
<marquee height=30>...</marquee>設定高度
<marquee bgcolor=FF0000>...</marquee>設定背景顏色
<marquee scrollamount=30>...</marquee>設定卷動距離
<marquee scrolldelay=300>...</marquee>設定卷動時間
<!>字體效果
<h1>...</h1>標題字(最大)
<h6>...</h6>標題字(最小)
<b>...</b>粗體字
<strong>...</strong>粗體字(強調)
<i>...</i>斜體字
<em>...</em>斜體字(強調)
<dfn>...</dfn>斜體字(表示定義)
<u>...</u>底線
<ins>...</ins>底線(表示插入文字)
<strike>...</strike>橫線
<s>...</s>刪除線
<del>...</del>刪除線(表示刪除)
<kbd>...</kbd>鍵盤文字
<tt>...</tt> 打字體
<xmp>...</xmp>固定寬度字體(在文件中空白、換行、定位功能有效)
<plaintext>...</plaintext>固定寬度字體(不執行標記符號)
<listing>...</listing> 固定寬度小字體
<font color=00ff00>...</font>字體顏色
<font size=1>...</font>最小字體
<font style =font-size:100 px>...</font>無限增大
<!>區斷標記
<hr>水平線
<hr size=9>水平線(設定大小)
<hr width=80%>水平線(設定寬度)
<hr color=ff0000>水平線(設定顏色)
<br>(換行)
<nobr>...</nobr>水域(不換行)
<p>...</p>水域(段落)
<center>...</center>置中
<!>連結格式
<base href=位址>(預設好連結路徑)
<a href=位址></a>外部連結
<a href=位址 target=_blank></a>外部連結(另開新視窗)
<a href=位址 target=_top></a>外部連結(全視窗連結)
<a href=位址 target=頁框名></a>外部連結(在指定頁框連結)
<!>貼圖/音樂
<img src=圖片位址>貼圖
<img src=圖片位址 width=180>設定圖片寬度
<img src=圖片位址 height=30>設定圖片高度
<img src=圖片位址 alt=提示文字>設定圖片提示文字
<img src=圖片位址 border=1>設定圖片邊框
<bgsound src=MID音樂檔位址>背景音樂設定
<!>表格語法
<table aling=left>...</table>表格位置,置左
<table aling=center>...</table>表格位置,置中
<table background=圖片路徑>...</table>背景圖片的URL=就是路徑網址
<table border=邊框大小>...</table>設定表格邊框大小(使用數字)
<table bgcolor=顏色碼>...</table>設定表格的背景顏色
<table borderclor=顏色碼>...</table>設定表格邊框的顏色
<table borderclor=顏色碼>...</table>設定表格邊框的顏色
<table borderclordark=顏色碼>...</table>設定表格暗邊框的顏色
<table borderclorlight=顏色碼>...</table>設定表格亮邊框的顏色
<table cellpadding=參數>...</table>指定內容與格線之間的間距(使用數字)
<table cellspacing=參數>...</table>指定格線與格線之間的距離(使用數字)
<table cols=參數>...</table>指定表格的欄數
<table frame=參數>...</table>設定表格外框線的顯示方式
<table width=寬度>...</table>指定表格的寬度大小(使用數字)
<table height=高度>...</table>指定表格的高度大小(使用數字)
<td colspan=參數>...</td>指定儲存格合并欄的欄數(使用數字)
<td rowspan=參數>...</td>指定儲存格合并列的列數(使用數字)
<!>分割視窗
<frameset cols="20%,*">左右分割,將左邊框架分割大小為20%右邊框架的大小瀏覽器會自動調整
<frameset rows="20%,*">上下分割,將上面框架分割大小為20%下面框架的大小瀏覽器會自動調整
<frameset cols="20%,*">分割左右兩個框架
<frameset cols="20%,*,20%">分割左中右三個框架
<分割上下兩個框架
<frameset rows="20%,*,20%">分割上中下三個框架
<! - - ... - -> 注解
<a href target> 指定超連結的分割視窗
<a href=#錨的名稱> 指定錨名稱的超連結
<a href> 指定超連結
<a name=錨的名稱> 被連結點的名稱
<address>....</address> 用來顯示電子郵箱地址
<b> 粗體字
<base target> 指定超連結的分割視窗
<basefont size> 更改預設字形大小
<bgsound src> 加入背景音樂
<big> 顯示大字體
<blink> 閃爍的文字
<body text link vlink> 設定文字顏色
<body> 顯示本文
<br> 換行
<caption align> 設定表格標題位置
<caption>...</caption> 為表格加上標題
<center> 向中對齊
<cite>...<cite> 用於引經據典的文字
<code>...</code> 用於列出一段程式碼
<comment>...</comment> 加上注解
<dd> 設定定義列表的項目解說
<dfn>...</dfn> 顯示"定義"文字
<dir>...</dir> 列表文字標簽
<dl>...</dl> 設定定義列表的標簽
<dt> 設定定義列表的項目
<em> 強調之用
<font face> 任意指定所用的字形
<font face> 任意指定所用的字形
<font size> 設定字體大小
<form action> 設定戶動式表單的處理方式
<form method> 設定戶動式表單之資料傳送方式
<frame marginheight> 設定視窗的上下邊界
<frame marginwidth> 設定視窗的左右邊界
<frame name> 為分割視窗命名
<frame noresize> 鎖住分割視窗的大小
<frame scrolling> 設定分割視窗的卷軸
<frame src> 將html檔加入視窗
<frameset cols> 將視窗分割成左右的子視窗
<frameset rows> 將視窗分割成上下的子視窗
<frameset>...</frameset> 劃分分割視窗
<h1>~<h6> 設定文字大小
<head> 標示文件資訊
<hr> 加上分格線
<html> 文件的開始與結束
<i> 斜體字
<img align> 調整圖形影像的位置
<img alt> 為你的圖形影像加注
<img dynsrc loop> 加入影片
<img height width> 插入圖片并預設圖形大小
<img hspace> 插入圖片并預設圖形的左右邊界
<img lowsrc> 預載圖片功能
<img src border> 設定圖片邊界
<img src> 插入圖片
<img vspace> 插入圖片并預設圖形的上下邊界
<input type name value> 在表單中加入輸入欄位
<isindex> 定義查詢用表單
<kbd>...</kbd> 表示使用者輸入文字
<li type>...</li> 列表的項目 ( 可指定符號 )
<marquee> 跑馬燈效果
<menu>...</menu> 條列文字標簽
<meta name="refresh" content url> 自動更新文件內容
<multiple> 可同時選擇多項的列表欄
<noframe> 定義不出現分割視窗的文字
<ol>...</ol> 有序號的列表
<option> 定義表單中列表欄的項目
<p align> 設定對齊方向
<p> 分段
<person>...</person> 顯示人名
<pre> 使用原有排列
<samp>...</samp> 用於引用字
<select>...</select> 在表單中定義列表欄
<small> 顯示小字體
<strike> 文字加橫線
<strong> 用於加強語氣
<sub> 下標字
<sup> 上標字
<table border=n> 調整表格的寬線高度
<table cellpadding> 調整資料欄位之邊界
<table cellspacing> 調整表格線的寬度
<table height> 調整表格的高度
<table width> 調整表格的寬度
<table>...</table> 產生表格的標簽
<td align> 調整表格欄位之左右對齊
<td bgcolor> 設定表格欄位之背景顏色
<td colspan rowspan> 表格欄位的合并
<td nowrap> 設定表格欄位不換行
<td valign> 調整表格欄位之上下對齊
<td width> 調整表格欄位寬度
<td>...</td> 定義表格的資料欄位
<textarea name rows cols> 表單中加入多少列的文字輸入欄
<textarea wrap> 決定文字輸入欄是自動否換行
<th>...</th> 定義表格的標頭欄位
<title> 文件標題
<tr>...</tr> 定義表格美一行
<tt> 打字機字體
<u> 文字加底線
<ul type>...</ul> 無序號的列表 ( 可指定符號 )
<var>...</var> 用於顯示變數
本篇文章開始成哥將帶大家一起學習一下前端的基礎知識，我們先講解前端的基礎HTML與CSS，這個講完我們將講解VUE前端框架，最后我們再講講Ant Design的VUE前端框架，從而形成前端一個系列的教程，下面就開始我們今天的內容吧！
HTML的英文全稱是 Hyper Text Markup Language，即超文本標記語言。
HTML是由Web的發明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年創立的一種標記語言，它是標準通用化標記語言SGML的應用。用HTML編寫的超文本文檔稱為HTML文檔，它能獨立于各種操作系統平臺(如UNIX， Windows等)。
使用HTML語言，將所需要表達的信息按某種規則寫成HTML文件，通過專用的瀏覽器來識別，并將這些HTML文件"翻譯"成可以識別的信息，即現在所見到的網頁。HTML 不需要編譯，可以直接由瀏覽器執行，非常方便開發時調試。
我們現在創建一個典型的HTML結構具體如下：
1. <!DOCTYPE html>
2. <html lang="ch">
3. <head>
4. <meta charset="UTF-8">
5. <title>HTML實例</title>
6. </head>
7. <body>
8. <h1>我是標題</h1>
9. <p>我是段落。</p>
10. </body>
11. </html> 如上頁面中各個標簽代表的意思如下：
1）<!DOCTYPE html>是文檔聲明頭，它告訴游覽器當前處理的內容是HTML頁面
2）html是 HTML 頁面的根元素，用于標識HTML內容的開始與結束
3） head是HTML頁面的頭，包含了文檔的一些屬性。其中meta是元數據這邊charset="UTF-8"標識當前頁面編碼格式為UTF-8，title為文檔的標題
4）body是HTML主體也是游覽器在顯示頁面時的內容。h1是body內容中定義的標題，p是body內容中定義的段落
我們現在通過游覽器打開編寫的HTML內容，具體內容如下
在HTML中的內容可以通過以下格式進行內容注釋具體如下：
（1）HTML標簽
HTML 標簽是 HTML 語言中最基本的單位，HTML 標簽是 HTML（標準通用標記語言下的一個應用）最重要的組成部分。HTML標簽具有如下特點：
1）標簽一般是成對出現的 如:<div></div>;也有空標簽 如:<br />
2）標簽由<>包括,分為開始標簽(開放標簽)和結束標簽(閉合標簽)
3）標簽不區分大小寫,根據W3C(萬維網聯盟)推薦,統一使用小寫字母
標簽的示列如下：
標簽按照<>的對數可以分為如下兩類分別為雙標簽與單標簽，下面我們具體來了解一下這兩類標簽。
1）雙標簽
雙標簽指由開始和結束兩個標記符組成的標記。其基本語法格式如下：
1. <標記名></標記名>
常見的雙標簽有如下幾種：
1. <html></html>
2. <head></head>
3. <title></title>
4. <body></body>
5. <h1></h1>
6. <p></p>
7.
8. <!-- 塊級元素 -->
9. <div></div>
10. <span></span>
11.
12. <!-- 超鏈接元素 -->
13. <a></a>
14.
15. <!-- 列表元素 -->
16. <ul></ul> 2）單標簽
單標簽是指用一個標記符號即可完整地描述某個功能的標記。其基本語法格式如下：
1. <標記名/>
常見的單標簽有如下幾種：
1. <!-- 換行標簽 -->
2. <br />
3.
4. <!-- 分隔線標簽 -->
5. <hr />
6.
7. <!-- 圖片標簽 -->
8. <img /> （2）HTML元素
HTML 元素指的是從開始標簽（start tag）到結束標簽（end tag）的所有代碼，如<p>段落</p>。元素可以進行嵌套具體如下：
1. <div>
2. <h1>我是標題</h1>
3.
4. <div>
5. <p>元素嵌套示列</p>
6. </div>
7.
8. </div> （3）HTML屬性
屬性為 HTML 元素提供附加信息，可分為全局屬性（即所有元素均可使用的屬性，如id,class等）和元素屬性（部分元素可使用的屬性，例如<a href="http://www.baidu.com">搜索</a>），屬性通常由屬性名="屬性值"構成,存在于開始標簽中，示列如下:
（4）HTML實體編碼
對于部分不易通過鍵盤輸入的或和HTML沖突的部分符合,引入對應的"實體編碼"，如< <> >空格 。
（5）HTML事件
通過某個動作,執行某個操作/JS腳本的能力。如點擊按鈕,改變顏色，事件可以分為多類比多鼠標點擊、鼠標聚焦等，下面我看看看一個事件編寫示列：
（1）h標簽
h 標簽有六種分別為h1、h2、h3、h4、h5、h6，這六個分別對應六種樣式的標題，我們現在來編寫這六種h標簽，演示代碼如下：
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>HTML基礎教程</title>
5. <meta charset="utf-8" />
6. </head>
7. <body>
8. <h1>H1標題</h1>
9. <h2>H2標題</h2>
10. <h3>H3標題</h3>
11. <h4>H4標題</h4>
12. <h5>H5標題</h5>
13. <h6>H6標題</h6>
14. </body>
15. </html> 我們來運行該HTML文件，來看看這六種h標簽有什么樣式差異，從示列中可以發現h1標簽字體最大然后依次減小。
（2）p標簽
p 標簽是文本標簽，現在我們來編寫一段含有p標簽的html文本，然后運行了看看p標簽的樣式具體操作如下：
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>HTML基礎教程</title>
5. <meta charset="utf-8" />
6. </head>
7. <body>
8.
9. <h4>標題一</h4>
10. <p>我是段落1</p>
11.
12. <h4>標題二</h4>
13. <p>我是段落2</p>
14.
15. </body>
16. </html> （3）a標簽
a標簽是超鏈接標簽，點擊a標簽可以跳轉到其設置的網站，具體示列如下：
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>HTML基礎教程</title>
5. <meta charset="utf-8" />
6. </head>
7. <body>
8. <div>
9. <a href="http://www.baidu.com">點我跳轉到百度頁面</a>
10. </div>
11.
12. <div>
13. <a href="http://www.qq.com">點我跳轉到騰訊頁面</a>
14. </div>
15.
16. </body>
17. </html> （4）div標簽
div標簽是一個塊級元素，它可用于組合其他 HTML 元素的容器。可以把div看成一個盒子，我們可以為這個盒子設置各種各樣屬性（如高度、寬度、顏色等），下面我們編寫一個div標簽并設置其長為300px，寬度為200px，同時給其一個背景顏色，具體如下：
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>HTML基礎教程</title>
5. <meta charset="utf-8" />
6. </head>
7. <body>
8.
9. <div style="width: 200px;height: 300px;background: #2eabff">我是div元素</div>
10.
11. </body>
12. </html> （5）列表標簽
列表作為網頁設計的重要內容之一，能夠用來制作導航欄和新聞列表等。HTML 列表分為：有序列表（ol），無序列表（ul）以及自定義列表（dl）
1）有序列表ul
有序列表的順序是有序的，默認情況下會以數字來排列，但也可以通過設置其type屬性以大寫字母、小寫字母、大寫羅馬數字、小寫羅馬數字來排列，我們現在來寫一個示列，具體如下：
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>HTML基礎教程</title>
5. <meta charset="utf-8" />
6. </head>
7. <body>
8.
9. <!-- 有序列表，以默認方式數字排列 -->
10. <p>有序列表默認方式數字排列</p>
11. <ol>
12. <li>列表1</li>
13. <li>列表2</li>
14. <li>列表3</li>
15. </ol>
16.
17. <!-- 有序列表，以大寫字母排列 -->
18. <p>有序列表大寫字母排列</p>
19. <ol type="A">
20. <li>列表1</li>
21. <li>列表2</li>
22. <li>列表3</li>
23. </ol>
24.
25. </body>
26. </html> 2）無序列表ol
無序列表的順序是無序的，不會按照某個值來排序，無序列表中每個列表前默認都有一個實心圓，也可以通過type屬性來設置成空心圓或者小方塊，無序列表示列如下：
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>HTML基礎教程</title>
5. <meta charset="utf-8" />
6. </head>
7. <body>
8.
9. <p>無序列表默認type樣式</p>
10. <ul>
11. <li>列表1</li>
12. <li>列表2</li>
13. <li>列表3</li>
14. </ul>
15.
16. <p>無序列表方塊樣式</p>
17. <ul type="square">
18. <li>列表1</li>
19. <li>列表2</li>
20. <li>列表3</li>
21. </ul>
22.
23. </body>
24. </html> 3）自定義列表dl
自定義列表以 <dl> 標簽開始。每個自定義列表項以 <dt> 開始，其列表內容是以<dd> 開始，自定義列表前面沒有任何標識，其具體示例如下：
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>HTML基礎教程</title>
5. <meta charset="utf-8" />
6. </head>
7. <body>
8.
9. <p>自定義列表</p>
10. <dl>
11. <dt>東岳</dt>
12. <dd>泰山</dd>
13.
14. <dt>南岳</dt>
15. <dd>衡山</dd>
16.
17. <dt>西岳</dt>
18. <dd>華山</dd>
19.
20. <dt>北岳</dt>
21. <dd>恒山</dd>
22.
23. <dt>中岳</dt>
24. <dd>嵩山</dd>
25. </dl>
26.
27. </body>
28. </html> （6）其它標簽
1）換行標簽<br/>
在HTML中如果想給內容進行換行可以使用換行標簽，具體示列如下：
2）分割線標簽<hr/>
<hr/> 標簽用于在 HTML創建一條分割線，具體示列如下：
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>HTML基礎教程</title>
5. <meta charset="utf-8" />
6. </head>
7. <body>
8.
9. <p>我是張三</p>
10. <!-- 分割線標簽 -->
11. <hr/>
12. <p>我是李四</p>
13. </body>
14. </html> 至此我們《HTML基礎教程上篇》就講完了，下篇內容主要講解HTML樣式、HTML表單、Tabel等，敬請期待。最后如果喜歡本篇文章不要忘了點贊、關注與轉發哦！
-END-
@IT管理局專注計算機領域技術、大學生活、學習方法、求職招聘、職業規劃、職場感悟等類型的原創內容。期待與你相遇，和你一同成長。
文章推薦：
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
