整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

HTML 元素

TML 文档由 HTML 元素定义。

HTML 元素

<phtml 元素指的是从开始标签(start="" tag)到结束标签(end="" tag)的所有代码。<="" p="" style="color: rgb(51, 51, 51); font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, STHeiti, 'Microsoft Yahei', sans-serif; font-size: 12px; line-height: normal; white-space: normal;">

开始标签 *元素内容结束标签 *
<p>这是一个段落</p>
<a href="default.htm">这是一个链接</a>
<br>

*开始标签常被称为起始标签(opening tag),结束标签常称为闭合标签(closing tag)

HTML 元素语法

  • HTML 元素以开始标签起始

  • HTML 元素以结束标签终止

  • 元素的内容是开始标签与结束标签之间的内容

  • 某些 HTML 元素具有空内容(empty content)

  • 空元素在开始标签中进行关闭(以开始标签的结束而结束)

  • 大多数 HTML 元素可拥有属性

注释: 您将在本教程的下一章中学习更多有关属性的内容。

嵌套的 HTML 元素

<p大多数 html="" 元素可以嵌套(可以包含其他="" 元素)。<="" p="">

HTML 文档由嵌套的 HTML 元素构成。

HTML 文档实例

<!DOCTYPE html>

<html>

<body>

<p>这是第一个段落。</p>

</body>

</html>

以上实例包含了三个 HTML 元素。

HTML 实例解析

<p> 元素:

<p>这是第一个段落。</p>

这个 <p> 元素定义了 HTML 文档中的一个段落。

这个元素拥有一个开始标签 <p> 以及一个结束标签 </p>.

元素内容是: This is my first paragraph.

<body> 元素:

<body>

<p>这是第一个段落。</p>

</body>

The <body> 元素定义了 HTML 文档的主体。

这个元素拥有一个开始标签 <body> 以及一个结束标签 </body>。

元素内容是另一个 HTML 元素(p 元素)。

<html> 元素:

<html>

<body>

<p>这是第一个段落。</p>

</body>

</html>

The <html> 元素定义了整个 HTML 文档。

这个元素拥有一个开始标签 <html> ,以及一个结束标签 </html>.

元素内容是另一个 HTML 元素(body 元素)。

不要忘记结束标签

即使您忘记了使用结束标签,大多数浏览器也会正确地显示 HTML:

<p>这是一个段落

<p>这是一个段落

以上实例在浏览器中也能正常显示,因为关闭标签是可选的。

但不要依赖这种做法。忘记使用结束标签会产生不可预料的结果或错误。

HTML 空元素

没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。

<br> 就是没有关闭标签的空元素(<br> 标签定义换行)。

在 XHTML、XML 以及未来版本的 HTML 中,所有元素都必须被关闭。

在开始标签中添加斜杠,比如 <br />,是关闭空元素的正确方法,HTML、XHTML 和 XML 都接受这种方式。

即使 <br> 在所有浏览器中都是有效的,但使用 <br /> 其实是更长远的保障。

HTML 提示:使用小写标签

HTML 标签对大小写不敏感:<P> 等同于 <p>。许多网站都使用大写的 HTML 标签。

W3CSchool 使用的是小写标签,因为万维网联盟(W3C)在 HTML 4 中推荐使用小写,而在未来 (X)HTML 版本中强制使用小写。

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039,我们一起飞!

节内容是"VBA信息获取与处理"教程中第八个专题"VBA与HTML文档"的第五节。,希望想掌握这方面知识的朋友能参考我的教程学习。

第五节 HTML文档的访问端口DOM (Document Object Model)

大家好,我们继续对HTML文档进行学习,在前几节中我们认识了网页文档上面的各种元素,那么我们又该怎么访问他们呢,是如何实现呢?其实,HTML文档,提供了访问其元素的端口,这就是HTML DOM,其定义了一套标准的针对 HTML 文档的对象访问或操作的机制。HTML DOM 定义了所有 HTML 元素的对象和属性,以及访问它们的方法。换言之,HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。

1 HTML DOM (Document Object Model) 对象集合

每个载入浏览器的 HTML 文档都会成为 Document 对象。Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。Document 对象是 HTML 文档的根节点。

特别注意:Document 对象是 Window 对象的一部分,可通过 window.document 属性对其进行访问。

集合 描述

all[] 提供对文档中所有 HTML 元素的访问。

anchors[] 返回对文档中所有 Anchor 对象的引用。

applets 返回对文档中所有 Applet 对象的引用。

forms[] 返回对文档中所有 Form 对象引用。

images[] 返回对文档中所有 Image 对象引用。

links[] 返回对文档中所有 Area 和 Link 对象引用。


VBA直接支持调用的对象有限,如下:

对象 描述

Document 代表整个 HTML 文档,可被用来访问页面中的所有元素

Anchors 代表 <a> 元素集合

Body 代表 <body> 元素

Forms 代表 <form> 元素集合

Frames 代表 <frame> 元素或<iframe> 元素集合

Images 代表 <img> 元素集合

Links 代表 <link> 元素集合

Options 代表 <option> 元素集合(select元素里面可以直接使用)

Cells 代表 <td> 元素集合(table元素里面可以直接使用)

Rows 代表 <tr> 元素集合(table元素里面可以直接使用)

All 对象集合,提供对文档中所有 HTML 元素的访问。


上述VBA支持直接调用对象的元素,调用起来就非常方便了,可以用序号调用,例如forms(0),也可以按名称/ID调用,例如forms("名称/ID")。其他没法直接调用对象的元素,可以间接从通用all对象集合中去调用该元素或该元素对应的dom对象。

2 HTML DOM 文档的节点及文档树

在HTML DOM中,所有事物都是节点。DOM 是被视为节点树的 HTML文档的每一部分都是节点,整个文档被定义为一个文档节点,每个标签是一个元素节点,包含在元素中的文本是文本节点,每一个元素的属性是一个属性节点。如下:

1)整个文档是一个文档节点

2)每个 HTML 元素是元素节点

3)HTML 元素内的文本是文本节点

4)每个 HTML 属性是属性节点

5)注释是注释节点


HTML DOM 将 HTML 文档视作树结构。这种结构被称为节点树,这时一个非常形象的比喻,根节点就是html,主干就是body等,枝干就是body内含的各种元素节点,叶子和花就是元素节点关联的元素的属性(属性节点)或内含文本(文本节点)。


通过 HTML DOM,树中的所有节点均可通过 JavaScript 进行访问。所有 HTML 元素(节点)均可被修改,也可以创建或删除节点。节点树中的节点彼此拥有层级关系。父(parent)、子(child)和同胞(sibling)等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞(兄弟或姐妹)。

网页文档,可以说是由元素组合而成的,也可以说是由节点连接而成的树构造的。节点是文档树结构中特有的名词,元素是节点,但是节点不一定是元素,节点还有文档节点、文本节点、属性节点等;元素是元素节点的扩展,元素可以拥有属性还有文本。初学者不是很必要纠结元素和节点的区别,这个需要甚至数据结构、类和继承等知识。可大致理解为,同一个html dom对象,提供的两个不同接口。如下的程序,你会发现,他既有支持node(节点)的相关属性和方法,也提供了element(元素)的相关属性和方法。


Sub MYNZ()

Dim ie, dmt, bd

Set ie = CreateObject("InternetExplorer.Application") '创建一个IE对象

With ie

.Visible = True '显示它

.navigate "http://www.baidu.com" '加载某个页面

Do Until .ReadyState = 4 '等待页面加载完毕

DoEvents

Loop

Set dmt = .document '将IE浏览器加载的页面文档,赋予dmt变量

Set bd = dmt.body '将文档的body赋予bd变量

End With

End Sub


代码截图:

按F8键运行截图:

3 HTML DOM 文档的对象属性

属性是节点(HTML 元素)的值,您能够获取或设置。所有 HTML 元素被定义为对象,而编程接口则是对象方法和对象属性。我们看看下面一些常见的属性:


1)innerHTML 属性 对象内部的HTML代码,是获取元素内容的最简单方法。innerHTML 属性对于获取或替换 HTML 元素的内容很有用。

下面的代码获取 id="intro" 的 <p> 元素的 innerHTML:

<script>

var txt=document.getElementById("intro").innerHTML;

document.write(txt);


2)OuterHtml:对象的HTML代码,包括对象本身的HTML标签


3)innerText:对象内部的文本


4)OuterText:对象的文本,包括对象本身的文本


5)nodeName 属性 nodeName 属性规定节点的名称。

nodeName 是只读的

元素节点的 nodeName 与标签名相同

属性节点的 nodeName 与属性名相同

文本节点的 nodeName 始终是 #text

文档节点的 nodeName 始终是 #document


注释:nodeName 始终包含 HTML 元素的大写字母标签名。


6)nodeValue 属性 nodeValue 属性规定节点的值。

元素节点的 nodeValue 是 undefined 或 null

文本节点的 nodeValue 是文本本身

属性节点的 nodeValue 是属性值


7)nodeType 属性 nodeType 属性返回节点的类型。nodeType 是只读的。

比较重要的节点类型有:


元素类型 NodeType

元素 1

属性 2

文本 3

注释 8

文档 9


以上只是给出了属性值,大家在使用的时候要注意。


本节知识点回向:


什么是HTML DOM文档的属性,常用的属性有哪些。


本节参考文件:008工作表.xlsm

积木编程的思路内涵:

在我的系列书籍中一直在强调"搭积木"的编程思路,这也是学习利用VBA的主要方法,特别是职场人员,更是要采用这种方案。其主要的内涵:

1 代码不要自己全部的录入。你要做的是把积木放在合适的位置然后去修正代码,一定要拷贝,从你的积木库中去拷贝,然后修正代码,把时间利用到高效的思考上。

2 建立自己的"积木库"。平时在学习过程中,把自己认为有用的代码放在一起,多积累,在用到的时候,可以随时拿来。你的积木库资料越多,你做程序的思路就会越广。

VBA的应用界定

VBA是利用Office实现个人小型办公自动化的有效手段(工具)。这是我对VBA的应用界定。在取代OFFICE新的办公软件没有到来之前,谁能在数据处理方面做到极致,谁就是王者。其中登峰至极的技能非VBA莫属!

我记得20年前自己初学VBA时,那时的资料甚少,只能看源码自己琢磨,真的很难。20年过去了,为了不让学习VBA的朋友重复我之前的经历,我根据自己多年VBA实际利用经验,推出了六部VBA专门教程:

第一套:VBA代码解决方案 是VBA中各个知识点的讲解,教程共147讲,覆盖绝大多数的VBA知识点,初学必备;

第二套:VBA数据库解决方案 数据库是数据处理的专业利器,教程中详细介绍了利用ADO连接ACCDB和EXCEL的方法和实例操作,适合中级人员的学习。

第三套:VBA数组与字典解决方案 数组和字典是VBA的精华,字典是VBA代码水平提高的有效手段,值得深入的学习,是初级及中级人员代码精进的手段。

第四套:VBA代码解决方案之视频 是专门面向初学者的视频讲解,可以快速入门,更快的掌握这门技能。这套教程是第一套教程的视频讲解,听元音更易接受。

第五套:VBA中类的解读和利用 这是一部高级教程,讲解类的虚无与肉身的度化,类的利用虽然较少,但仔细的学习可以促进自己VBA理论的提高。这套教程的领会主要是读者的领悟了,领悟一种佛学的哲理。

第六套教程:《VBA信息获取与处理》是一部高级教程,涉及范围更广,实用性更强,面向中高级人员。教程共二十个专题,包括:跨应用程序信息获得、随机信息的利用、电子邮件的发送、VBA互联网数据抓取、VBA延时操作,剪切板应用、Split函数扩展、工作表信息与其他应用交互,FSO对象的利用、工作表及文件夹信息的获取、图形信息的获取以及定制工作表信息函数等等内容。

大家可以根据以上资料1→3→2→6→5或者是4→3→2→6→5的顺序逐渐深入的逐渐学习。教程提供讲解的同时提供了大量的积木,如需要可以WeChat: NZ9668


学习VBA是个过程,也需要经历一种枯燥的感觉

如太白诗云:众鸟高飞尽,孤云独去闲。相看两不厌,只有敬亭山。学习的过程也是修心的过程,修一个平静的心。在代码的世界中,心平静了,心情好了,身体自然而然就好。心静则正,内心里没有那么多邪知邪见,也就没有那么多妄想。利人就是利己。这些教程也是为帮助大家起航,助上我自己之力,我的上述教程是我多的经验的传递,

"水善利万物而不争",绵绵密密,微则无声,巨则汹涌。学习亦如此,知道什么是自己所需要的,不要蜷缩在一小块自认为天堂的世界里,待到暮年时再去做自欺欺人的言论。要努力提高自己,用一颗充满生机的心灵,把握现在,这才是进取。越是有意义的事情,困难会越多。愿力决定始终,智慧决定成败。不管遇到什么,都是风景。看淡纷争,看轻得失。茶,满也好,少也好,不要计较;浓也好,淡也好,其中自有值得品的味道。去感悟真实的时间,静下心,多学习,积累福报。而不是天天混日子,也不是天天熬日子。在后疫情更加严峻的存量残杀世界中,为自己的生存进行知识的储备,特别是新知识的储备。学习时微而无声,利用时则巨则汹涌。

每一分收获都是成长的记录,怎无凭,正是这种执着,成就了朝霞的灿烂。最后将一阙词送给致力于VBA学习的朋友,让大家感受一下学习过程的枯燥与执着:


浮云掠过,暗语无声,

唯有清风,惊了梦中啼莺。

望星,疏移北斗,

奈将往事雁同行。

阡陌人,昏灯明暗,

忍顾长亭。

多少VBA人,

暗夜中,悄声寻梦,盼却天明。

怎无凭!


回向学习利用VBA的历历往事,不胜感慨,谨以这些文字给大家,分享我多年工作实际经验的成果,随喜这些有用的东西,给确实需要利用VBA的同路人。


分享成果,随喜正能量

HTML 两个列表实例: 一个有序列表 (<ol>) 和 一个无序列表 (<ul>) :

<ol>

<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>

</ol>

<ul>

<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>

</ul>


浏览器支持

目前多数主流浏览器支持 <li>标签。


标签定义及使用说明

<li> 标签定义列表项目。

<li> 标签可用在有序列表(<ol>)、无序列表(<ul>)和菜单列表(<menu>)中。


HTML 4.01 与 HTML5之间的差异

"type" 属性 在 HTML 4.01 已被废弃。HTML5 不支持该属性。

"value" 属性 在 HTML 4.01 已被废弃。HTML5 不支持该属性。


提示和注释

提示: 请使用 CSS 来定义列表和列表项目的类型。


属性

属性描述
type1AaIidiscsquarecircleHTML5 不支持该属性。HTML 4.01 已废弃该属性。 不赞成使用。请使用样式取代它。 规定使用哪种项目符号。
valuenumber不赞成使用。请使用样式取代它。 规定列表项目的数字。

全局属性

<li> 标签支持全局属性,查看完整属性表 HTML 全局属性。


事件属性

<li> 标签支持所有 HTML 事件属性。

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039,我们一起飞!