整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
在HTML中，大多数元素都被定义为块级元素或内联元素。
块级元素通常会独立成行，而内联元素会并排显示。
在我们学过的元素中，
块级元素如：<h> <p> <table>这些。
内联元素如<td><a><img>
下面我们通过练习来直观看看他们的区别。
块级元素展示，代码如下：
<body>
<h1>第一个网页</h1><hr><h2>表格元素</h2><hr>
<p>块级元素与内联元素</p>
<p>零基础自学网页制作</p>
<table border="1" width="50%">
<thead>
<tr>
<td colspan="2">表格的头部信息</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="2">表格的脚部信息</td>
<tr>
</tfoot>
<tbody>
<caption>表格标题</caption>
<colgroup>
<col span = "1" style="background-color:#ff0000;"></col>
</colgroup>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>
<table border = "1" width="100%">
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
</td>
<td>一列二行</td>
</tr>
<tr>
<td>二列一行</td>
<td>二列二行</td>
</tr>
</tbody>
</table>
</body>如图：
内联元素展示如下
示例代码：这段代码被我放在了</table>后面。
<a href = "https://baike.baidu.com/item/%E6%AD%BC-20/1555348?fromtitle=%E6%AD%BC20&fromid =1838467&fr=aladdin">歼20战斗机</a>
<img src="img/战斗机/image3.jpg" width = "200px"/>效果如图：
其中，<img>标签中的width属性规定了图片的宽度为200px，也就是200像素。
HTML中，如果只对图片的宽或高进行数值指定，那么未指定的数值会随着指定数值进行等比例缩放！
熟知html元素是块级还是内联对以后进行页面布局有一定的指导意义。
<div>与<span>标签
为了方便开发者对页面内容进行布局和调整，html开发者为html加入了专门的区块元素<div></div>。
<div></div>是一个块级元素，大家可以把它理解为一个容器，它本身是不会显示在页面上的。
比如这个！
笔者第一个漫画作品
如果抛开画面内容，我们看到的是一堆对画面进行分割的方格子。像这样
<div></div>元素的作用就是对页面进行了这样的分割。
实际上我们的页面布局都是基于这样思路进行分割的，只是页面上不会像漫画一样显示外边框而已。例如：
强制为其添加边框分割：
大家看明白了吗？<div></div>就是用来对页面进行分割划区域的。
通过给<div>标签设置不同的id属性，可以在css文件中对不同<div>区块中的所有信息进行统一调整样式的操作。
这是对块级元素整体改变样式的方法。
但是，如果我们想对一个块级元素中的不同文字或图片这些内联元素进行单独操作怎么做呢？
html开发者为我们提供了<span></span>这样的内联标签。比如我们对<p>我有一个梦想</p>这个段落元素中的"梦想"两个字进行变化颜色的操作，我们可以这样写：
<p>我有一个<span>梦想</span></p>
通过对<span>指定不同的id或class属性在CSS文件中对"梦想"二字进行改变颜色的操作而不会影响段落元素中的其他文字。
今天的内容结束了，下一次我们建立一个新的页面来简单看看<div>元素的基本用法。
喜欢的小伙伴请关注我，阅读中遇到任何问题请给我留言，如有疏漏或错误欢迎大家斧正，不胜感激！
HTML序章（学习目的、对象、基本概念）——零基础自学网页制作
HTML是什么？——零基础自学网页制作
第一个HTML页面如何写？——零基础自学网页制作
HTML页面中head标签有啥用？——零基础自学网页制作
初识meta标签与SEO——零基础自学网页制作
HTML中的元素使用方法1——零基础自学网页制作
HTML中的元素使用方法2——零基础自学网页制作
HTML元素中的属性1——零基础自学网页制作
HTML元素中的属性2（路径详解）——零基础自学网页制作
使用HTML添加表格1（基本元素）——零基础自学网页制作
使用HTML添加表格2（表格头部与脚部）——零基础自学网页制作
使用HTML添加表格3（间距与颜色）——零基础自学网页制作
使用HTML添加表格4（行颜色与表格嵌套）——零基础自学网页制作
16进制颜色表示与RGB色彩模型——零基础自学网页制作
HTML中的块级元素与内联元素——零基础自学网页制作
初识HTML中的<div>块元素——零基础自学网页制作
在HTML页面中嵌入其他页面的方法——零基础自学网页制作
封闭在家学网页制作！为页面嵌入PDF文件——零基础自学网页制作
HTML表单元素初识1——零基础自学网页制作
HTML表单元素初识2——零基础自学网页制作
HTML表单3（下拉列表、多行文字输入）——零基础自学网页制作
HTML表单4（form的action、method属性）——零基础自学网页制作
HTML列表制作讲解——零基础自学网页制作
为HTML页面添加视频、音频的方法——零基础自学网页制作
音视频格式转换神器与html视频元素加字幕——零基础自学网页制作
HTML中使用<a>标签实现文本内链接——零基础自学网页制作
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的元素分类今天就先介绍到这里，大家在平时可以自己多加练习练习，做到每个标签属于什么元素。
每日金句： 成功的秘诀就是每天都比别人多努力一点。喜欢我的文章的小伙伴记得关注一下哦，每天将为你更新最新知识。
级元素：div , p , form, ul, li , ol, dl, form, address, fieldset, hr, menu, table
行内元素：span, strong, em, br, img , input, label, select, textarea, cite,
内联元素(inline element)a - 超链接
b - 粗体(不推荐)br - 换行
em - 强调
font - 字体设定(不推荐)
i - 斜体
img - 图片
input - 输入框
label - 表格标签
select - 选择框
small - 小字体文本
span - 常用内联容器，定义文本内区块
strong - 粗体强调
sub - 下标
sup - 上标
textarea - 多行文本输入框
块元素(block element)* blockquote - 块引用
* center - 居中
* div - 常用块级容易，也是css layout的主要标签
* dl - 定义列表
* form - 交互表单
* h1 - 大标题
* h2 - 副标题
* h3 - 3级标题
* h4 - 4级标题
* h5 - 5级标题
* h6 - 6级标题
* hr - 水平分隔线
* ol - 排序表单
* p - 段落
* pre - 格式化文本
* table - 表格
* ul - 无序列表
块级元素和行内元素的区别：
1）块级元素会独占一行，其宽度自动填满其父元素宽度
行内元素不会独占一行，相邻的行内元素会排列在同一行里，知道一行排不下，才会换行，其宽度随元素的内容 而变化
2） 块级元素可以设置 width, height属性，行内元素设置width, height无效
3) 块级元素可以设置margin 和 padding. 行内元素的水平方向的padding-left,padding-right,margin-left,margin-right 都产生边距效果，但是竖直方向的padding-top,padding-bottom,margin-top,margin-bottom都不会产生边距效果。
文章自留地：
成笑笑博客_一个.Net和安卓技术狂爱者博客。
主要以发布和分享.Net和安卓文章为主，争做全栈开发工程师，爱学习，爱挑战，爱编程。用技术改变生活。
欢迎关注，微信公众号:net知识分享（net4k8k）[做个12k的技术员].博客网址：www.chengxiaoxiao.com.
欢迎加入qq技术交流群：538742639.
*请认真填写需求信息，我们会在24小时内与您取得联系。
