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

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

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

双标签也就是封闭标签，我们经常写的<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. 恢复 混淆后的 stacktrace 文件

    ./tools/proguard/bin/retrace.sh /Users/admin/Downloads/ProguardSample/app/build/outputs/mapping/rele ...

  2. openfire更改数据库

    修改openfire安装目录下./conf/openfire.xml <setup>true</setup>中的true为false,重新启动,然后配置

  3. javascript客户端与服务器端通信

    高性能的网络通信包括以下方面:选择正确的数据格式和与之匹配的传输技术. 一.数据格式 用于传输的数据格式有: 1)html,仅适用于特定场合,传输数据量大,不过它可以节省客户端的CPU周期, 2)XM ...

  4. Java实现冒泡排序

    冒泡排序思想就是将数列的相邻两个数比较,较大的数往后保存,小的数往前. package Sort; import java.util.Arrays; public class BubbleSort { ...

  5. Mysql查看版本，端口命令

    有一段时间没有鼓捣TP了,今天又再复习一下.在Model获取数据的时候提示'MySQL server has gone away'错误,一开始以为是TP问题,还查了半天,后来才发现是配置mysql的时 ...

  6. python爬虫感想

    老师说,能用程序解决一个实际问题,说明已经会使用工具了.今天用python做了一个小爬虫,很幸运,成功了. 有几个难点:就是学会伪装,还有一个觉得打开的方式太多,有点糊涂,正则表达式也要加强了.

  7. C#操作Mongodb的心得

    Mongodb是一个强大的文档型数据库,采用BSON的数据格式.本文主要采用其官方的C#驱动来操作其表中的集合.驱动版本为1.1.0,下载地址为: http://mongodb.github.io/m ...

  8. 遇到 Line 21: StartTag: invalid element name ios

    打开这个的storyboard 文本编辑打开修改里面有冲突的部分

  9. ZOJ 2412 Farm Irrigation

    Farm Irrigation Time Limit: 2 Seconds      Memory Limit: 65536 KB Benny has a spacious farm land to ...

  10. Bringing the activity to foreground 将activity切换到前台

    今天遇到这个问题,找了很久,网上一些解决方法不够完全.特做此记录: 经测试以下方法不能将在后台运行的activity切换到前台运行! Intent i = new Intent(); i.setCla ...