如何零基础学习VBA—HTMLMetaElement

如何零基础学习VBA—HTMLMetaElement对象

头条创作挑战赛# 在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>

<head>

<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>

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>

<p id="info">一共4张图片当前是第1张</p>

</div>

</body>

</html>

2.论坛发帖示例

<!DOCTYPE html>

<head>

<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>

</section>

<input class="title" placeholder="请输入标题（1-50个字符）" id="title">所属版块：

<option>请选择版块</option>

</select>

</div>

</body>

</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知识来实现网页的验证码校验呢？

验证码校验分析

首先要验证码的校验的过程。

验证码校验分为三部分：

生成验证码
获取用户输入的验证码
判断验证码是否输入正确

验证码的生成实际就是输出一个图像，所以在这里使用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>

校验验证码过程：

将生成的验证码内容保存在Session对象中
获取用户输入的验证码内容
将两个内容进行对照

代码实现：

获取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>

添加验证码刷新

在验证码生成之后，用户在识别的时候可能不能正确识别，这时候就需要刷新一下重新生成。

添加超链接实现刷新：

<%@ 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

欢迎关注公众号：愚生浅末。

在线咨询

上一篇：解决WebView在加载html5时，遇到跳转打开系
下一篇：如何搭建一个高可用的服务端渲染工程

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商