整合营销服务商

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

免费咨询热线:

HTML文档元素

分享成果,随喜正能量】人生,有多少计较,就有多少痛苦。有多少宽容,就有多少欢乐。痛苦与欢乐都是心灵的折射,就像镜子里面有什么,决定于镜子面前的事物。心里放不下,自然成了负担,负担越多,人生越不快乐。计较的心如同口袋,宽容的心犹如漏斗。复杂的心爱计较,简单的心易快乐。

《VBA信息获取与处理》教程是我推出第六套教程,目前已经是第一版修订了。这套教程定位于最高级,是学完初级,中级后的教程。这部教程给大家讲解的内容有:跨应用程序信息获得、随机信息的利用、电子邮件的发送、VBA互联网数据抓取、VBA延时操作,剪贴板应用、Split函数扩展、工作表信息与其他应用交互,FSO对象的利用、工作表及文件夹信息的获取、图形信息的获取以及定制工作表信息函数等等内容。程序文件通过32位和64位两种OFFICE系统测试。是非常抽象的,更具研究的价值。

教程共两册,八十四讲。今日的内容是专题八“VBA与HTML文档”的第二节上半部分:HTML文档元素

第二节 HTML文档的元素分析之一

大家好,我们这讲开始HTML的讲解,为了认识这种特殊的语言,我们要先看看这种语言中的各种元素个代表什么意义。上节中在讲这种语言的特征时讲过,标签是用来描述网页的。浏览器读取HTML文档,识别标签,并按标签要求以网页进行显示文本。大部分标签都是成队出现的。

起始标签和结束标签之间的所有文本,都叫做元素。也就是这个格式就是:

<起始标签:也叫元素名>元素的内容<结束标签:/+元素名>

标签是可以拥有属性的,属性提供了元素的一些附加信息,起始标签,有时候格式如下:

<元素名 属性名称=”属性值”>

同时,元素是可以拥有元素的,即某个元素的内容有时候是一个子元素。

元素这东西,比较抽象,我们可以把它且当作一个对象来理解,例如工作簿对象,每个工作簿的名称都不一样(属性),每个工作簿里面都有工作表(子元素),每个表都有名称(属性),里面填写的内容也不一样(元素的内容)。

1 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內进行书写。

2 HTML文档常用元素的构成

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文档由HTML元素组成,一个HTML元素由一个标签和一组属性组成。一个标签可以有一个或多个属性,属性以名称和值成对出现。Web 浏览器读取HTML 文档,并以网页的形式显示出来,浏览器不会显示 HTML 标签,而是通过标签来解释网页的内容。

HTML(Hyper Text Mark-up Language超文本标记语言):不是编程语言,而是一种描述性的标记语言,用于描述网页中内容的显示方式,比如文字以什么颜色、大小来显示等,这些都是利用Html标记来实现。

HTML标签是由尖括号(“<”和“>”)包围的关键词,如标签 <p>。标签不区分大小写,故 <p> 和 <P> 的含义相同,不过推荐使用小写。

HTML标签通常成对出现,一个是开始标签,一个是结束标签。开始标签告诉浏览器,从这里开始执行该标签所表示的功能;结束标签告诉浏览器,该功能到这里结束。在开始标签前加一个斜杠(/)即成为结束标签。如,html 元素的开始标签是 <html>,结束标签是</html>。也就是说,一个HTML 元素由开始标签、内容、结束标签组成。开始标签是放在一对尖括号中的元素名称及可能包含的属性,结束标签是放在一对尖括号中的斜杠加元素的名称。语法格式为:<开始标签>内容</结束标签>。如,em 元素的开始标签为<em>,结束标签为 </em>,在<em> 和 </em> 标签之间是元素的内容。如下图所示:


HTML的文档结构

所有的网页文件,通过都是四对标记来构成文档的骨架,它们是:

小结:

<html>…</html>标识网页文件的开始与结束,所有的Html元素,都要放在这对标记中。

<head>…</head>标识网页文件的头部信息,如标题、搜索引擎关键字等

<title>…</title>标识网页文件的标题

<body>…</body>标识网页文件的主体部分


常见的HTML的标记语法

1. 单标记

一.<标记名称>

单一型,无属性值

如:<br/>——表示换行符

二.<标记名称属性=”属性值”>

单一型,有属性值

如:<hr width=”80%”/>

2. 双标记

三.<标记名称>…</标记名称>

没有属性值

如:<title>…<title>

四.<标记名称属性=”属性值”>…</标记名称>

有属性值

如:<body bgcolor=”red”>…</body>

注释

格式:

<!—注释内容-->

Body属性

<body bgcolor=”背景颜色” background=”背景图像” text=”文本颜色” link=”链接文本颜色” vlink=”访问过的文本颜色” alink=”激活的连接文本颜色” leftmargin=”左边界”>


<font>标记

语法:

<font color=”文本颜色” size=“字号”>文本</font>

字符格式

段落标记

格式:

<p align=“对齐方式”>…</p>

HTML中的特殊字符

修饰标记

水平直线<hr/>


觉得不错的朋友关注下哩,后面会分享HTML标签属性、描点、表单等更多干货。