頭條創作挑戰賽# 在Excel VBA中，HTMLMetaElement對象是表示HTML文檔中的元數據的一種對象。元數據是描述文檔內容的信息，例如作者、關鍵字、描述等。HTMLMetaElement對象可以讓您從HTML文檔中獲取元數據，并在VBA代碼中使用它們。您可以使用HTMLDocument對象來訪問HTML文檔中的元素，包括HTMLMetaElement對象。

以下是6個Excel VBA代碼示例，演示如何使用HTMLMetaElement對象：

1、獲取文檔中的所有元數據

Sub GetMetadata()
    Dim metaTags As Object
    Dim metaTag As Object
    
    Set metaTags=ActiveSheet.QueryTables(1).ResultPageRange.getElementsByTagName("meta")
    
    For Each metaTag In metaTags
        Debug.Print metaTag.Name & ": " & metaTag.Content
    Next metaTag
End Sub

2、獲取特定元數據

Sub GetSpecificMetadata()
    Dim metaTag As Object
    
    Set metaTag=ActiveSheet.QueryTables(1).ResultPageRange.querySelector("meta[name='description']")
    
    Debug.Print "Description: " & metaTag.Content
End Sub

3、獲取文檔標題

Sub GetTitle()
    Dim title As Object
    
    Set title=ActiveSheet.QueryTables(1).ResultPageRange.querySelector("title")
    
    Debug.Print "Title: " & title.innerText
End Sub

4、獲取關鍵字

Sub GetKeywords()
    Dim metaTag As Object
    
    Set metaTag=ActiveSheet.QueryTables(1).ResultPageRange.querySelector("meta[name='keywords']")
    
    Debug.Print "Keywords: " & metaTag.Content
End Sub

5、獲取作者

Sub GetAuthor()
    Dim metaTag As Object
    
    Set metaTag=ActiveSheet.QueryTables(1).ResultPageRange.querySelector("meta[name='author']")
    
    Debug.Print "Author: " & metaTag.Content
End Sub

6、獲取文檔語言

vbnet復制Sub GetLanguage()
    Dim html As Object
    
    Set html=ActiveSheet.QueryTables(1).ResultPageRange.querySelector("html")
    
    Debug.Print "Language: " & html.getAttribute("lang")
End Sub

以下是2個完整的Excel VBA代碼案例，演示如何使用HTMLMetaElement對象：

1、獲取特定網站的元數據并將其寫入Excel表格

Sub GetWebsiteMetadata()
    Dim xmlHttp As Object
    Dim htmlDoc As Object
    Dim metaTags As Object
    Dim metaTag As Object
    Dim i As Integer
    
    Set xmlHttp=CreateObject("MSXML2.XMLHTTP")
    
    xmlHttp.Open "GET", "https://www.example.com", False
    xmlHttp.send
    
    Set htmlDoc=CreateObject("htmlfile")
    
    htmlDoc.body.innerHTML=xmlHttp.responseText
    
    Set metaTags=htmlDoc.getElementsByTagName("meta")
    
    For Each metaTag In metaTags
        If metaTag.Name="description" Then
            Cells(1, 1)="Description"
            Cells(1, 2)=metaTag.Content
        ElseIf metaTag.Name="keywords" Then
            Cells(2, 1)="Keywords"
            Cells(2, 2)=metaTag.Content
        End If
    Next metaTag
    
    Set xmlHttp=Nothing
    Set htmlDoc=Nothing
End Sub

2、獲取當前工作簿中的元數據并將其寫入Excel表格

Sub GetWorkbookMetadata()
    Dim wb As Workbook
    Dim ws As Worksheet
    Dim metaTags As Object
    Dim metaTag As Object
    Dim i As Integer
    
    Set wb=ThisWorkbook
    Set ws=wb.Sheets("Sheet1")
    
    Set metaTags=ws.QueryTables(1).ResultPageRange.getElementsByTagName("meta")
    
    For Each metaTag In metaTags
        If metaTag.Name="description" Then
            Cells(1, 1)="Description"
            Cells(1, 2)=metaTag.Content
        ElseIf metaTag.Name="keywords" Then
            Cells(2, 1)="Keywords"
            Cells(2, 2)=metaTag.Content
        End If
    Next metaTag
    
End Sub

在使用VBA中的HTMLMetaElement時，需要注意以下幾點：

1、需要先加載HTML文檔，才能訪問其中的元素。可以使用XMLHttpRequest對象或者InternetExplorer對象來加載HTML文檔。

2、元數據的名稱和值都可以使用Content屬性訪問。例如，獲取文檔的描述信息可以使用“metaTag.Content”。

3、如果元數據的名稱是動態生成的，則可以使用querySelector方法來查找元素。例如，獲取名稱為“description”的元數據可以使用“querySelector("meta[name='description']")”。

4、如果元數據的名稱是固定的，則可以直接使用getElementsByTagName方法來獲取所有的meta元素，并遍歷其中的元素來查找需要的元素。

5、在訪問元數據之前，需要確保文檔已經完全加載。可以使用ReadyState屬性來檢查文檔的加載狀態。

6、在訪問元數據時，需要考慮元數據是否存在。如果元數據不存在，則訪問Content屬性會導致運行時錯誤。因此，建議在訪問元數據之前先檢查元素是否存在。

7、在訪問元數據時，需要考慮元數據的編碼方式。如果元數據中包含特殊字符或非ASCII字符，則需要使用適當的編碼方式進行解碼。可以使用VBA內置的StrConv函數來進行編碼轉換。

、認識DOM對象模型

DOM：Document Object Model（文檔對象模型）

節點與節點的關系

1、訪問節點，使用getElement系列方法訪問指定節點

getElementById()、 getElementsByName()、

getElementsByTagName()；

2、根據層次關系訪問節點：

屬性名稱 描述

parentNode 返回節點的父節點

childNodes 返回子節點集合，childNodes[i]

firstChild 返回節點的第一個子節點，最普遍的用法是訪問該元素的文本節點

lastChild 返回節點的最后一個子節點

nextSibling 下一個節點

previousSibling 上一個節點

elment屬性：

屬性名稱 描述

firstElementChild 返回節點的第一個子節點，最普遍的用法是訪問該元素的文本節點

lastElementChild 返回節點的最后一個子節點

nextElementSibling 下一個節點

previousElementSibling 上一個節點

節點信息表示：

nodeName：節點名稱

nodeValue：節點值

nodeType：節點類型

操作節點的屬性：

getAttribute("屬性名")

setAttribute("屬性名","屬性值")

創建和插入節點：

名稱 描述

createElement( tagName)創建一個標簽名為tagName的新元素節點

A.appendChild( B)把B節點追加至A節點的末尾

insertBefore( A,B )把A節點插入到B節點之前

cloneNode(boolean)復制(克隆)某個指定的節點



刪除和替換節點：

名稱描述

removeChild( node)刪除指定的節點

replaceChild( newNode, oldNode)屬性attr 用其他的節點替換指定的節點

操作節點樣式：

改變樣式的屬性

style屬性

HTML元素.style.樣式屬性＝"值"；

className屬性

HTML元素.className="樣式名稱"；

二、示例展示

1.輪播圖示例

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>輪播圖顯示</title>

</head>

<style>

* {

margin: 0;

padding: 0;

}

#outer {

width: 300px;

margin: 50px auto;

padding: 10px;

background-color: greenyellow;

text-align: center;

}

#outer>img {

width: 300px;

height: 300px;

}

</style>

<script>

window.onload=function () {

// 點擊按鈕切換圖片

var prev=document.getElementById("prev");

var next=document.getElementById("next");

// 要切換圖片就要修改img標簽的src屬性

var img=document.getElementsByTagName("img")[0];

var imgArr=["img/tou01.jpg", "img/tou02.jpg", "img/tou03.jpg", "img/tou04.jpg"];

// 創建一個變量，來保存當前正在顯示的圖片的索引

var index=0;

// 設置提示文字

var info=document.getElementById("info");

// 分別為兩個按鈕綁定單機響應函數 上一張函數

prev.onclick=function () {

index--;

// 判斷index是否小于0

if (index < 0) {

index=imgArr.length-1;

}

img.src=imgArr[index];

info.innerHTML="共"+imgArr.length+"張圖片"+"當前是第"+(index+1)+"張";

}

// 下一張函數

next.onclick=function () {

index++;

if (index > imgArr.length - 1) {

index=0;

}

img.src=imgArr[index];

// 當我在點擊按鈕以后在重新執行一遍

info.innerHTML="一共"+imgArr.length+"張圖片"+"當前是第"+(index+1)+"張";

}

}

</script>

<body>

<div id="outer">

<p id="info">一共4張圖片當前是第1張</p>

<img src="img/tou01.jpg" alt="" />

<button id="prev"><上一張</button>

<button id="next">下一張></button>

</div>

</body>

</html>

2.論壇發帖示例

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>制作課工場論壇發貼</title>

</head>

<style>

*{margin: 0; padding: 0; font-family: "Arial", "微軟雅黑";}

ul,li{list-style: none;}

.bbs{margin: 0 auto; width: 600px; position: relative;}

header{padding: 5px 0; border-bottom: 1px solid #cecece;}

header span{display:inline-block; width: 220px; height: 50px; color: #fff; background: #009966; font-size: 18px; font-weight: bold; text-align: center;line-height: 50px; border-radius: 8px; cursor: pointer;}

.post{position: absolute; background: #ffffff; border: 1px #cccccc solid; width: 500px; left: 65px; top:70px; padding: 10px; font-size: 14px; z-index: 999999; display: none;}

.post .title{width: 450px; height:30px; line-height: 30px; display: block; border: 1px #cecece solid; margin-bottom: 10px;}

.post select{width: 200px; height: 30px;}

.post .content{width: 450px; height: 200px; display: block; margin: 10px 0;border: 1px #cecece solid;}

.post .btn{width: 160px; height: 35px; color: #fff; background: #009966; border: none; font-size: 14px; font-weight: bold; text-align: center; line-height: 35px; border-radius: 8px; cursor: pointer;}

.bbs section ul li{padding: 10px 0; border-bottom: 1px #999999 dashed;

overflow: hidden;}

.bbs section ul li div{float: left; width: 60px; margin-right: 10px;}

.bbs section ul li div img{ border-radius:50%; width: 60px;}

.bbs section ul li h1{float: left; width: 520px; font-size: 16px; line-height: 35px;}

.bbs section ul li p{color: #666666; line-height: 25px; font-size: 12px; }

.bbs section ul li p span{padding-right:20px;}

</style>

<body>

<div class="bbs">

<header><span onclick="showDiv();">我要發帖</span></header>

<section>

<ul id="showContent"></ul>

</section>

<div class="post" id="showSubmit">

<input class="title" placeholder="請輸入標題（1-50個字符）" id="title">所屬版塊：

<select id="section">

<option>請選擇版塊</option>

<option value="電子書籍">電子書籍</option>

<option value="新課來了">新課來了</option>

<option value="新手報到">新手報到</option>

<option value="職業規劃">職業規劃</option>

</select>

<textarea class="content" id="content"></textarea>

<input class="btn" value="發布" onclick="publish();">

</div>

</div>

</body>

<script src="js/bbs.js"></script>

</html>

// 全局對象

var imgs=new Array("tou01.jpg", "tou02.jpg", "tou03.jpg", "tou04.jpg");

// 顯示發帖div

function showDiv() {

document.getElementById("showSubmit").style.display="block";

}

// 點擊發布添加內容到Li

function publish() {

// 獲得隨機頭像的數組下標

var index=Math.floor(Math.random() * 4);

// 創建li節點

var tvLi=document.createElement("li");

// 創建div節點

var tvDiv=document.createElement("div");

// 創建img圖片節點

var tvImg=document.createElement("img");

// 設置圖片節點src屬性

tvImg.setAttribute("src", "../threeClass/img/" + imgs[index]);

// div添加圖片為子節點

tvDiv.appendChild(tvImg);

// 創建h1標簽節點

var tvh1=document.createElement("h1");

// 取得發布div框里填充的標題的值填充到h1標簽

var tvTitle=document.getElementById("title").value;

tvh1.innerText=tvTitle;

// 創建一個P標簽節點

var tvP=document.createElement("p");

// 創建兩個span標簽節點

var tvSpanOne=document.createElement("span");

var tvSpanTwo=document.createElement("span");

// 第一個span標簽取填充div里的下拉列表框所選的值

var tvSelect=document.getElementById("section").value;

tvSpanOne.innerText="板塊：" + tvSelect;

// 第二個span標簽取當前系統時間

var date=new Date();

var str=date.getFullYear() + "/" + (date.getMonth() + 1) + "/" + date.getDate() + "" + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();

tvSpanTwo.innerText="時間是：" + str;

// 兩個span標簽追加到p標簽節點里

tvP.appendChild(tvSpanOne);

tvP.appendChild(tvSpanTwo);

// 把div、h1、p 、標簽追加到li里

tvLi.appendChild(tvDiv);

tvLi.appendChild(tvh1);

tvLi.appendChild(tvP);

// 把添加好的li在插入到ul標簽節點里

var oldUL=document.getElementById("showContent");

// 把新添加的li節點插入到撈的li節點之前

oldUL.insertBefore(tvLi, oldUL.firstChild);

// 清除div里填充過的內容，如標題和內容部分

document.getElementById("title").value="";

document.getElementById("content").value="";

// 設置發布div隱藏

document.getElementById("showSubmit").style.display="none";

}

效果圖展示：file:///D:/ruanjian/VS/JS/threeClass/lunbotu.html

file:///D:/ruanjian/VS/JS/threeClass/lunbotu.html

網頁頁面的使用中為防止“非人類”的大量操作和防止一些的信息冗余，增加驗證碼校驗是許多網站常用的方式。

而讓用戶輸入字母和數字組合的驗證碼是最經典也是最常用的方式。
這一篇是純利用現有JDK提供的繪圖類(ImageIO)類制作,這個過程比較復雜且需要了解ImageIO類。

今天發布的第二篇文章是利用Hutool工具類來實現的，該工具類已經封裝驗證碼所需的相關類等，使用起來較為簡單和方便。

驗證碼的生成和校驗過程均使用Servlet和JSP的結合來實現，Servlet的相關內容可以參閱

Servlet技術:https://mp.weixin.qq.com/s/__e_ef0SI6kVPiRaU0MXJw

如何利用基礎的JSP知識來實現網頁的驗證碼校驗呢？

驗證碼校驗分析

首先要驗證碼的校驗的過程。

驗證碼校驗分為三部分：

1. 生成驗證碼
2. 獲取用戶輸入的驗證碼
3. 判斷驗證碼是否輸入正確

驗證碼的生成實際就是輸出一個圖像，所以在這里使用ImageIO來生成圖片，然后結合使用隨機數（Random）來實現隨機生成驗證上的內容，最后進而展示出來，然后利用Session對象存儲驗證碼的內容。在用戶輸入驗證碼的時候可以用request來獲取用戶輸入的內容，讓其余Session對象中保存的驗證碼內容進行比較，若一致則驗證成功，不一致就驗證失敗。

生成驗證碼

先創建一個圖片的緩沖區：

BufferedImage bi=new BufferedImage(68, 22,BufferedImage.TYPE_INT_RGB);

創建畫布：

Graphics g=bi.getGraphics();

創建顏色：

Color c=new Color(200,150,255);

創建背景顏色：

g.setColor(c);

填充矩形：

g.fillRect(0, 0, 68,22);

將要顯示的驗證碼內容組成元素存入字符串數組：

char[] ch="ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789".toCharArray();

創建隨機的驗證碼內容：

Random r=new Random();
         int len=ch.length;
         int index; //index用于存放隨機數字
         StringBuffer sb=new StringBuffer();
         for(int i=0;i<4;i++)
         {
             index=r.nextInt(len);//產生隨機數字
             g.setColor(new Color(r.nextInt(88),r.nextInt(188),r.nextInt(255)));  //設置顏色
             g.drawString(ch[index]+"",(i*15)+3, 18);//畫數字以及數字的位置
             sb.append(ch[index]);
         }

將驗證碼的內容存入Session及顯示在頁面上：

 request.getSession().setAttribute("piccode",sb.toString()); 
 ImageIO.write(bi, "JPG", response.getOutputStream()); 

完整代碼：

public class ImageServlet  extends HttpServlet {
    public void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException {
        BufferedImage bi=new BufferedImage(68, 22, BufferedImage.TYPE_INT_RGB);//創建圖像緩沖區
        Graphics g=bi.getGraphics(); //通過緩沖區創建一個畫布
        Color c=new Color(200, 150, 255); //創建顏色
        g.setColor(c);//為畫布創建背景顏色
        g.fillRect(0, 0, 68, 22); //填充矩形
        char[] ch="ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789".toCharArray();//轉化為字符型的數組
        Random r=new Random();
        int len=ch.length;
        int index; //index用于存放隨機數字
        StringBuffer sb=new StringBuffer();
        for (int i=0; i < 4; i++) {
            index=r.nextInt(len);//產生隨機數字
            g.setColor(new Color(r.nextInt(88), r.nextInt(188), r.nextInt(255)));  //設置顏色
            g.drawString(ch[index] + "", (i * 15) + 3, 18);//畫數字以及數字的位置
            sb.append(ch[index]);
        }
        request.getSession().setAttribute("piccode", sb.toString());
        ImageIO.write(bi, "JPG", response.getOutputStream());
    }
}

測試驗證碼

在測試之前需要先在web.xml文件中配置一下：

<servlet>
        <servlet-name>ImageServlet</servlet-name>
        <servlet-class>com.kailong.servlet.ImageServlet</servlet-class>
    </servlet>

    <servlet-mapping>
        <servlet-name>ImageServlet</servlet-name>
        <url-pattern>/imageServlet</url-pattern>
    </servlet-mapping>

啟動服務器后在瀏覽器中輸入http://localhost:8080/工程名/imageServlet 即可

驗證碼的生成已經實現成功，下面實現驗證驗證碼的Servlet。

校驗驗證碼

先新建一個jsp用戶界面：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>登錄界面</title>
</head>
<body>
<form action="<%=request.getContextPath()%>/loginServlet" method="get" >
    驗證碼:<input  type="text" name="checkCode"/><br/>
    <img alt="驗證碼" id="imagecode" src="<%=request.getContextPath()%>/imageServlet"/>
    <input type="submit" value="提交">
</form>
</body>
</html>

校驗驗證碼過程：

1. 將生成的驗證碼內容保存在Session對象中
2. 獲取用戶輸入的驗證碼內容
3. 將兩個內容進行對照

代碼實現：

獲取Session中的驗證碼內容：

String piccode=(String) request.getSession().getAttribute("piccode");

獲取用戶輸入的驗證碼內容：

String checkCode=request.getParameter("checkCode"); 

驗證碼判斷（使用了PrintWriter將相關內容輸出）

response.setContentType("text/html;charset=utf-8");//解決亂碼問題
PrintWriter out=response.getWriter();
if(checkCode.equals(piccode))
{
    out.println("驗證碼輸入正確！");
}
else
{
    out.println("驗證碼輸入錯誤！！！");
}
out.flush();//將流刷新
out.close();//將流關閉

完整代碼：

public class LoginServlet extends HttpServlet {
    public void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException
    //用于驗證驗證碼
    {
        String piccode=(String) request.getSession().getAttribute("piccode");
        String checkCode=request.getParameter("checkCode");
        response.setContentType("text/html;charset=utf-8");//解決亂碼問題
        PrintWriter out=response.getWriter();
        if (checkCode.equals(piccode)) {
            out.println("驗證碼輸入正確！");
        } else {
            out.println("驗證碼輸入錯誤！！！");
        }
        out.flush();//將流刷新
        out.close();//將流關閉
    }
}

測試驗證碼校驗

測試前先在web.xml文件中配置一下：

 <servlet>
        <servlet-name>LoginServlet</servlet-name>
        <servlet-class>com.kailong.servlet.LoginServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>LoginServlet</servlet-name>
        <url-pattern>/loginServlet</url-pattern>
    </servlet-mapping>

添加驗證碼刷新

在驗證碼生成之后，用戶在識別的時候可能不能正確識別，這時候就需要刷新一下重新生成。

添加超鏈接實現刷新：

login.jsp:

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>登錄界面</title>
    <script>
        function reloadCode() {
          var time=new Date().getTime();
          document.getElementById("imagecode").src="<%=request.getContextPath()%>/imageGenerate?d="+time;
        }
    </script>
</head>
<body>
<form action="<%=request.getContextPath()%>/loginServlet" method="get" >
    驗證碼:<input  type="text" name="checkCode"/><br/>
    <img alt="驗證碼" id="imagecode" src="<%=request.getContextPath()%>/imageServlet"/>
    <a href="javascript：reloadCode();">看不清楚</a><br>
    <br/><input type="submit" value="提交">
</form>
</body>
</html>

js部分的Date相關是防止瀏覽器緩存后不能正常刷新，添加時間的唯一性來實現能夠及時刷新和展示。

js 部分可以參閱：JavaScript 語言入門: https://mp.weixin.qq.com/s/37CaC25_1agb-aXBLhUKtg

也可以在ImageServlet中添加防止瀏覽器緩存的語句：

response.setHeader("Pragma", "No-cache");

公眾號本文地址：https://mp.weixin.qq.com/s/XHucabQ_WwUx2OMDGSTMkw

歡迎關注公眾號：愚生淺末。