HTML文档常用元素汇总

分享成果，随喜正能量】人可以无知，但不可以无趣。在自己的心上种一颗快乐的种子，坚定、快乐的做自己的事，更让大家不那么无趣。

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

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

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

3）HTML 注释

注释标签  用于在 HTML 插入注释。可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。开始括号之后（左边的括号）需要紧跟一个叹号，结束括号之前（右边的括号）不需要。

注释可以按下面的格式写：

4）段落 <p>

段落是通过 <p> 标签定义的。浏览器会自动地在段落的前后添加空行。（<p> 是块级元素）

在上面的例子中我们已经用到了表述段落的符号<p>，我们如果提取网页小说的数据，新闻等页面的消息，文本都是一段一段的，这样的页面，我们就可以通过<p>标签实现。当运用ie/webbrowser方式提取这类网页的时候，历遍所有段落p元素即可。

使用空的段落标记 <p></p> 去插入一个空行是个坏习惯。可以用 <br /> 标签代替它！（但是不要用 <br /> 标签去创建列表。）

5）超链接 <a>

使用 <a> 标签在 HTML 中创建链接。

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。

有两种使用 <a> 标签的方式：通过使用 href 属性 - 创建指向另一个文档的链接也可以通过使用 name 属性 - 创建文档内的书签。

超链接是我们最常见的页面元素，基本的门户网站都有他，点了以后，可以跳转到另一个页面。一般语法格式：

<a href=”跳转的URL” target=” _blank/_self”>显示的超链接文本</a>

Target属性，表示的是当我们点击超链接，是在原页面进行跳转（_self）还是新建页面进行跳转（_blank）。

为了说明这种超链接，我们更正一下“HTML基础学习-1.html”的内容：

<html>

<title>

VBA应用提高篇

</title>

</head>

<h1>学习VBA语言</h1>

<p>为了更好的掌握VBA的各个知识点，您可以先参考我的第一套教程：VBA代码解决方案</p>

<a href="https://mbd.baidu.com/newspage/data/landingshare?pageType=1&isBdboxFrom=1&context=%7B%22nid%22%3A%22news_9520815886500285610%22%2C%22sourceFrom%22%3A%22bjh%22%7D" target=" _blank">显示学习的网页</a>

</body>

</html>

讲上述代码另存为“HTML基础学习-2.html”内容截图：

打开这个文件：

点击链接：

查看一下源码：

3 本节介绍的HTML文档常用元素汇总

1）标题 <h1> - <h6>

2）水平线 <hr />

3）注释

4）段落 <p>

5）超链接 <a>

以上各个元素我们要熟练的掌握，才能在分析网页的时候可以随心所欲。下一讲我们继续讲解HTML网页的元素构成。

本节知识点回向：

什么是HTML文档的框架结构是怎样的？说出以下个元素的标签：标题，水平线，注释，段落，超链接。

本节参考文件：HTML基础学习-1.html；HTML基础学习-2.html

我20多年的VBA实践经验，全部浓缩在下面的各个教程中，教程学习顺序：

【分享成果，随喜正能量】人生在世，会遇到一些好事，还会遇上些坏事。好事我承受得起，坏事也承受得住。就这样坦荡荡做个寻常人也不坏。

TML 实例

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>菜鸟教程(runoob.com)</title></head><body><h1>我的第一个标题</h1><p>我的第一个段落。</p></body></html>

实例解析

DOCTYPE 声明了文档类型
位于标签 <html> 与 </html> 描述了文档类型
位于标签 <body> 与 </body> 为可视化网页内容
位于标签 <h1> 与 </h1> 作为一个标题使用
位于标签 <p> 与 </p> 作为一个段落显示

	<!DOCTYPE html> 在HTML5中也是描述了文档类型。

什么是HTML?

HTML 是用来描述网页的一种语言。

HTML 指的是超文本标记语言: HyperText Markup Language
HTML 不是一种编程语言，而是一种标记语言
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面

HTML 标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，比如 <b> 和 </b>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签

<标签>内容</标签>

HTML 元素

"HTML 标签" 和 "HTML 元素" 通常都是描述同样的意思.

但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签，如下实例:

HTML 元素:

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

Web 浏览器

Web浏览器（如谷歌浏览器，Internet Explorer，Firefox，Safari）是用于读取HTML文件，并将其作为网页显示。

浏览器并不是直接显示的HTML标签，但可以使用标签来决定如何展现HTML页面的内容给用户：

HTML 网页结构

下面是一个可视化的HTML页面结构：

<html>

<head>

</head>

<body>

<h1>这是一个标题</h1>

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

<p>这是另外一个段落。</p>

</body>

</html>

	只有 <body> 区域 (白色部分) 才会在浏览器中显示。

HTML版本

从初期的网络诞生后，已经出现了许多HTML版本:

版本	发布时间
HTML	1991
HTML+	1993
HTML 2.0	1995
HTML 3.2	1997
HTML 4.01	1999
XHTML 1.0	2000
HTML5	2012
XHTML5	2013

<!DOCTYPE> 声明

<!DOCTYPE>声明有助于浏览器中正确显示网页。

网络上有很多不同的文件，如果能够正确声明HTML的版本，浏览器就能正确显示网页内容。

doctype 声明是不区分大小写的，以下方式均可：

<!DOCTYPE html>

<!DOCTYPE HTML>

<!doctype html>

<!Doctype Html>

通用声明

HTML5

<!DOCTYPE html>

HTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

查看完整网页声明类型 DOCTYPE 参考手册。

中文编码

目前在大部分浏览器中，直接输出中文会出现中文乱码的情况，这时候我们就需要在头部将字符声明为 UTF-8。

HTML 实例

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>页面标题</title></head><body><h1>我的第一个标题</h1><p>我的第一个段落。</p></body></html>

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

前端已经有一段时间了，最近在对前端基础知识做一个梳理总结，今天联系页面的时候遇到了一个浮动元素造成父级高度塌陷的问题，为了弄清楚这个问题，我也是好一番查资料，原来MDN上专门介绍过解决这个问题的办法，下面我就来分享一下我个人的心得。

首先，我先说一下我遇到的问题是什么？

下面是两个容器元素box和box1，其中box1是子元素。

<div class="box">
    <div class="box1"></div>
</div>

这是元素的CSS样式。

<style>
body{
    background-color: #121212;
}
.box {
  border-radius: 8px;
  padding: 16px;
  background-color: #121212;
  border: 3px solid #ffffff;
}
.box1 {
  width: 200px;
  height: 200px;
  overflow: hidden;
  background-color: rgb(196, 233, 30);
}
</styl

这是上面HTML和CSS渲染出来的效果图。

元素样式

现在我对box1加上一个CSS样式：float:left;那么现在的渲染效果就变成了这样：

子元素浮动起来了

从效果图上我们可以看到，父级元素的高度没了，子元素出现在了父元素的外面，并没有完全被父级元素包裹住，这是因为子元素box1添加了float:left;之后脱离了文档流，所以无法被包含了。

脱离正常文档流的元素会自动创建一个新的块级格式化环境，也就是我们常说的BFC（Block Formatting Context），通常情况下，只有根元素一个块级上下文。但是上述的元素box1设置了float:left就会为这个块级元素创建一个独立的上下文环境，因此这个元素的排版会完全独立于内部，所以父级元素无法包裹这个元素，因此它的高度会塌陷。

脱离常规文档流的元素：

浮动的元素；

position为absolute、fixed的元素；

根元素（html）。

如何解决父级高度塌陷的问题？

方案一：给父级元素加上一个float:left

父级元素加上float:left

但是这样又出现了一个问题：父级的宽度丢失了，无法自适应页面的宽度了，因此该方法不推荐使用。

方案二：给子元素box1加上display:inline-block

display:inline-block

该属性也可以解决父级高度塌陷的问题，但是同样会造成父级宽度缺失，也不是最优解。

方案三：父级元素添加overflow:auto

overflow:auto

通过这个属性可以完美地解决父级高度塌陷的问题，并且不会引起其它问题，所以MDN上也推荐使用这个方式去解决这个问题。通常为了不让子元素的内容溢出容器，我们也可以使用overflow:hidden属性，效果也是一样的。

不过值得注意的是，这个BFC模式在IE下并不生效，但是可以通过添加zoom:1的属性达到类似效果。不过我个人觉得这个目前用到的机会不多了，毕竟IE连它的亲爹都放弃他了[看][看][看]估计除非是一些上古项目可能会用到。至于这个效果大家也可以去IE下测试一下，欢迎大家在评论区一起交流。由于本人也属于前端萌新，如果有说的不足或者错误的地方还请各位大佬批评指正，感激不尽。

在线咨询

上一篇：JavaScript HTML DOM 元素（节点）
下一篇：three.js教程一使用three.js创建一个三维场景

您的项目需求

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