整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
在HTML中,存在这许许多多的元素(同:”HTML标签”),这些元素最终可分为三类,分别是块级元素,内联元素(同:”行内元素”),块级内联元素(同:”行内块元素”)。
你对这些元素是否真的了解呢?
我们来看看这三类元素的特点:
一.特点
1.每个块级元素都从新的一行开始显示(块级元素独占一行)
2.元素的宽度,高度,内边距(padding),边框(border),外边框(margin)都能随意设置
3.块级元素在网页中所占面积=内容区(content)+内边距(padding)+边框(border)+外边距(margin)
4.块级元素本身未设置宽度的情况下,宽度=父元素宽度-该元素的左右外边距-该元素的左右边框-该元素的左右内边距
5.块级元素未设置padding和border的情况下,padding和border的数值为0
6.块级元素未设置宽度和外边距的情况下,margin的值为0,宽度为100%(即与父元素宽度一致)
7.块级元素设置宽度但未设置外边距的情况下,左外边距的值为0
8.块级元素设置宽度,未设置padding和border,同时设置margin: 0 auto的情况下,左右外边距平分 父元素宽度-该元素宽度所剩余的空间
9.块级内联元素不受父元素的line-height以及自身的vertical-align影响
二.将非块级元素转换成块级元素的方法
1.display:block
2.float:left或right
3.position:absolute或fixed
4.父元素使用display:flex,子元素会变为块级元素
三.常见块级元素
<div>,<p>,<h1>...<h6>,<ol>,<ul>,<dl>,<address>,<blockquote> ,<form>
一.特点
1.当父元素宽度足以放下多个内联元素时,一行内可以显示多个内联元素,否则放不下的内联元素将另起一行(一行存放多个内联元素)
2.内联元素的宽度,高度由该元素的内容撑开
3.内联元素的宽度/高度/padding-top/border-top/margin-top/margin-bottom设置无效
4.如果padding/border/margin未设置的情况下,全部为0
5.内联元素受父元素的line-height以及自身的vertical-align影响
二.将非内联元素转换成内联元素的方法
使用display:inline
三.常见内联元素
<a>,<span>,<i>,<br>,<strong>,<em>
一.特点
1.当父元素宽度足以放下多个块级内联元素时,一行内可以显示多个块级内联元素,否则放不下的块级内联元素将另起一行(一行存放多个块级内联元素)
2.块级内联元素的宽度,高度,内边距(padding),边框(border),外边框(margin)都能随意设置
3. 块级内联元素的宽度,高度未设置的情况下,由该元素的内容撑开
4.块级内联元素受父元素的line-height以及自身的vertical-align影响
二.将非内联元素转换成内联元素的方法
使用display:inline-block
三.常见内联元素
<input>
web前端之二叉搜索树
分享成果，随喜正能量】人可以无知，但不可以无趣。在自己的心上种一颗快乐的种子，坚定、快乐的做自己的事，更让大家不那么无趣。
《VBA信息获取与处理》教程是我推出第六套教程，目前已经是第一版修订了。这套教程定位于最高级，是学完初级，中级后的教程。这部教程给大家讲解的内容有：跨应用程序信息获得、随机信息的利用、电子邮件的发送、VBA互联网数据抓取、VBA延时操作，剪贴板应用、Split函数扩展、工作表信息与其他应用交互，FSO对象的利用、工作表及文件夹信息的获取、图形信息的获取以及定制工作表信息函数等等内容。程序文件通过32位和64位两种OFFICE系统测试。是非常抽象的，更具研究的价值。
教程共两册，八十四讲。今日的内容是专题八“VBA与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>
<head> <!--注释：文档头部，文档相关消息，并不提供文档内容-->
<title>
VBA应用提高篇
</title>
</head>
<body> <!--注释：文档主体-->
<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”内容截图：
打开这个文件：
点击链接：
查看一下源码：
1）标题 <h1> - <h6>
2）水平线 <hr />
3）注释 <!-- 与 -->
4）段落 <p>
5）超链接 <a>
以上各个元素我们要熟练的掌握，才能在分析网页的时候可以随心所欲。下一讲我们继续讲解HTML网页的元素构成。
本节知识点回向：
什么是HTML文档的框架结构是怎样的？说出以下个元素的标签：标题，水平线，注释，段落，超链接 。
本节参考文件：HTML基础学习-1.html；HTML基础学习-2.html
我20多年的VBA实践经验，全部浓缩在下面的各个教程中，教程学习顺序：
【分享成果，随喜正能量】人生在世，会遇到一些好事，还会遇上些坏事。好事我承受得起，坏事也承受得住。就这样坦荡荡做个寻常人也不坏。
tml元素主要分为3类，块级元素、内联元素以及内联块级元素，本篇文章我们来就详细介绍一下各个分类的含义以及对应的特点。
在html中div、 p、hx、form、ul 、 li、dl、dd就是块级元素。css属性设置display:block就是将元素显示为块级元素。块级元素特点：
1、每个块级元素都从新的一行开始，并且其后的元素也另起一行；（一个块级元素独占一行）
2、元素的高度、宽度、行高以及顶和底边距都可设置；
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
我们这里将块级元素代码写一下然后看一下在浏览器中的显示效果。html代码就如下所示：
在网页中我们可以看到，这些元素每一个都单独占据一行的空间，不管内容是否够一行。
在html中，span、a、label、input、 strong 和em就是典型的内联元素（行内元素）（inline）元素。当然块状元素也可 以通过代码display:inline将元素设置为内联元素。内联元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度、行高及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。
注意：为 a 元素设置了宽和高，但都没有起到作用，原因是a在默认的时候是内联元素，内联元素是不可以设置宽和高的。
我们这里将内联元素代码写一下然后看一下在浏览器中的显示效果。html代码就如下所示：
在网页中我们可以看到，这些元素会在一行一直排着显示，直到充满整行空间才会换行显示。
内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，代码display:inline-block就是将元素设置为内联块状元素。inline-block元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度、行高以及顶和底边距都可设置。
注意：img是inline元素，但是他同时也是替换元素，他有着特殊的表现：
1. 可以设置width/height;
2. 默认的，img元素在屏幕占据的空间与其图片的实际像素一致，除非CSS有设置或者自身的width/height HTML 属性有设置；
3. 如果img标签的包裹元素为也为inline元素，则img的边界可以超出其直接父元素的边界，直到自己的宽、高达到最大或者设定值为止，而且文档流中img的兄弟元素也不能遮盖住img。最常见的就是a里面包含的img；
4. 所以从行为上看,img元素作为替换元素，有着类似于Inline-block的行为，尽管在SPEC里面，他的确是一个inline元素。
对于html的元素分类今天就先介绍到这里，大家在平时可以自己多加练习练习，做到每个标签属于什么元素。
每日金句： 成功的秘诀就是每天都比别人多努力一点。喜欢我的文章的小伙伴记得关注一下哦，每天将为你更新最新知识。
*请认真填写需求信息，我们会在24小时内与您取得联系。
