作为前端人员，我们就是要与各种超文本标记打交道，用到各种不同的标签元素。在使用的时候不知道有没有注意到他们的分类归属？现在就来说一说博主的见解:

目前博主总结了三种分类方法：一是按封闭来划分，一是按显示内容来划分，一是按文档流来划分。

一、按封闭可分为双标签和单标签。

双标签也就是封闭标签，我们经常写的<html></html>、<div></div>等等成对出现的都是双标签，一般也叫标签对儿。单标签不是说不需要封闭，一般单标签里放的都是文本内容，可在第二个尖括号前加一个反斜线表示封闭，比如<hr />、<img src="1.jpg" />、<input type="text" />，也可以不加。

二、按显示内容可划分为容器级标签和文本级标签。

所谓文本级标签就是标签里面只能放文字、图片、链接等等，比如<p>、<a>、<em>、<b>等等。而容器级标签就是标签里面还可以继续使用标签，比如<div>、<li>、<h1>、<pre>等等。一般都是容器级标签和文本级标签组合使用来满足我们编写代码的需求的。

三、按文档流可分为块级标签和行级标签

不太好理解，先来说说他他们的特点吧

块级元素具有以下特点：

①总是在新行上开始，占据一整行；

②高度，行高以及外边距和内边距都可控制；

③宽带始终是与浏览器宽度一样，与内容无关；

④它可以容纳内联元素和其他块元素。

行内元素的特点：

①和其他元素都在一行上；

②高，行高及外边距和内边距部分可改变；

③宽度只与内容有关；

④行内元素只能容纳文本或者其他行内元素。

常见的块级标签有<div>、<h1>、<dl>、<P>等等，常见的行级标签有<span>、<img>、<input>、<sub>等等。

块级标签和行级标签可以使用 display 属性通过设置不同的值来相互转换，

      display:block;转换为块元素；display:inline;转换为行内元素，而display:inline-block;转换为行内块元素。

      所有的文本标签都是行内标签，所有的容器级标签都是块级标签

    需要注意的是 <p>标签，它既是文本标签，又是块级标签

web前端之HTML中元素的区分的更多相关文章

  1. 玩转CSS3,嗨翻WEB前端,CSS3伪类元素详解/深入浅出[原创][5+3时代]

    在我的上一篇博客中, 很多园友提出说对css3"画图"不是很理解, 在跟他们私聊了一段时间以后,加上自己在开始自学css3的时候的疑惑,我觉得大家之所以不是很理解主要是因为对伪元素 ...

  2. web前端页面解决中文传参乱码问题

    问题背景:在项目中往往会涉及到前端跳转页面时要传一些参数给下一个页面,如果参数是英文或者数字的时候就很好解决,然而有时候传参会涉及到中文汉字,这个时候再单纯的拼接往往就会导致中文乱码,下面我们就该讨论 ...

  3. 【从0到1学Web前端】javascript中的ajax对象（一） 分类： JavaScript 2015-06-24 10:18 754人阅读 评论(1) 收藏

    现在最流行的获取后端的(浏览器从服务器)数据的方式就是通过Ajax了吧.今天就来详细的来学习下这个知识吧.如果使用ajax来访问后段的数据,浏览器和浏览器端的js做了那些工作呢?我做了一个图,请大家看 ...

  4. [Web 前端] 解决因inline-block元素导致的空白间距和元素下沉

    cp from : https://www.jianshu.com/p/617e78a27c88 ** 前言: ** CSS 中的 display:inline-block 是笔者最为喜欢的元素之一, ...

  5. WEB前端html基础中的各类标签介绍

    2:html中有很多标签,这里列举十几种标签,有它们的用法及在使用过程中的注意事项!

  6. web前端 在react中使用移动端事件,学习笔记

    一  移动端事件的使用:           onTouchStartCapture        onTouchStart           onTouchMoveCapture       on ...

  7. 整理六百篇web前端知识混总

    9个有用的和免费的工具来支持动态网页开发 8个基本的引导工具的网页设计师 11款CSS3动画工具的开发 2016年某前端群题目答案参考 9最好的JavaScript压缩工具 创建响应式布局的10款优秀 ...

  8. Web前端入门教程之浏览器兼容问题及解决方法

    JavaScript 被称为JS,是作为浏览器的内置脚本语言,为我们提供操控浏览器的能力,可以让网页呈现出各种特殊效果,为用户提供友好的互动体验.JS是Web前端入门教程中的重点和难点,而浏览器兼容性 ...

  9. Web前端开发未来的六大趋势

    说起Web前端开发想必你一定不会陌生,因为现在的前端开发学习的培训机构也是层出不穷.下面济南优就业IT培训给大家总结出了未来Web前端开发的六大趋势从中可以大致看出来Web前端未来的发展前景. 趋势一 ...

随机推荐

  1. inux中shell截取字符串方法总结

    shell中截取字符串的方法有很多中, ${expression}一共有9种使用方法. ${parameter:-word} ${parameter:=word} ${parameter:?word} ...

  2. ios cell时间相同隐藏算法

  3. delphi之事件

    delphi的事件如上图所示: 图中oncloseup代表的是日期选择下拉框关闭时触发的事件. //事件定义 procedure Ondatechange(Sender: TObject); //事件 ...

  4. iOS，iOS对Android数据互通的规则

    AppStore针对数据互通的规则:在AppStore上架的应用,苹果会按照3:7的比例抽取IAP( In-App Purchase)三成的收入,作为渠道费用 11.2    Apps utilizi ...

  5. NOI 05:最高的分数描述

    描述 孙老师讲授的<计算概论>这门课期中考试刚刚结束,他想知道考试中取得的最高分数.因为人数比较多,他觉得这件事情交给计算机来做比较方便.你能帮孙老师解决这个问题吗? 输入输入两行,第一行 ...

  6. 利用Socket远程发送文件

    思想: 1.注意使用两个通道,一个普通对象通信通道,另一个纯净的文件字节流通道 2.利用通信通道发送文件请求,新建字节流通道,开始发送文件

  7. c语言二维数组求最大值

    #include<stdio.h> int main() { ,colum=,max; ][]={{,,,},{,,,},{-,,-,}}; max=a[][]; ;i<=;i++) ...

  8. scipy科学计算库

    特定函数 例贝塞尔函数: 积分 quad,dblquad,tplquad对应单重积分,双重积分,三重积分 from scipy.integrate import quad,dblquad,tplqua ...

  9. Android 自定义ListView

    本文讲实现一个自定义列表的Android程序,程序将实现一个使用自定义的适配器(Adapter)绑定 数据,通过contextView.setTag绑定数据有按钮的ListView. 系统显示列表(L ...

  10. shell: bad interpreter: No such file or directory

    执行shell脚本    错误提示如下:    bash: ./back : bad interpreter:No such file or directory 因为操作系统是windows,在win ...