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

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

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

双标签也就是封闭标签，我们经常写的<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. 理解JAVA - 面向对象(object) - 属性，方法

    理解JAVA - 面向对象(object) - 属性,方法 多态的体现:    向上造型,父类接收子类对象:向上造型:    从父类角度看不到子类独有的方法:面向对象,人类认知世界的方式:生活中每天都 ...

  2. Android 强烈推荐：程序员接私活那点事

    今天周末在家宅着,并不是我不想运动,是因为北京的雨雪交加导致我想在家写文章,不过想想给大家写文章还是蛮惬意的,望一眼窗外,看一眼雪景,指尖在键盘上跳动,瞬间有种从屌丝程序员转变成了小姑娘们都羡慕的文艺 ...

  3. leetcode 165

    才一周没刷leetcode,手就生了,这个题目不难,但是完全AC还是挺费劲的. 题目描述: Compare two version numbers version1 and version2.If v ...

  4. 笔记——shell脚本学习指南

    <shell脚本学习指南>机械工业出版 ISBN 987-7-111-25504-8 第2章 2.4 初级陷阱 1.当今的系统,对#!这一行的长度限制从63到1024个字符都有,尽量不要超 ...

  5. Google Code Jam Round 1A 2015 解题报告

    题目链接:https://code.google.com/codejam/contest/4224486/ Problem A. Mushroom Monster 这题题意就是,有N个时间点,每个时间 ...

  6. 2.MongoDB数据库简介

    1).简介 MongoDB是一个基于分布式文件存储的数据库.由C++语言编写.旨在为WEB应用提供可扩展的高性能数据存储解决方案. mongoDB是一个介于关系数据库和非关系数据库之间的产品,是非关系 ...

  7. linux mysql root密码重置

    MySQL安装解决方法:重改密码 先停止 Mysql # stop mysql 重要:输入下面的代码# mysqld_safe --user=mysql --skip-grant-tables --s ...

  8. CURL命令报错：dyld: lazy symbol binding failed: Symbol not found: _SSL_load_error_strings解决办法

    Mac OS X 10.11.6, curl 命令报错,错误如下: dyld: lazy symbol binding failed: Symbol not found: _SSL_load_erro ...

  9. tornado_mongodb 连接和使用

    tornado,mongodb 连接和使用,开始使用tornado3.2,mongodb2.6,pymongo-3.03遇到不少的麻烦.因为新版tornado与老版本的代码有很多变化,mongodb根 ...

  10. Redmine插件

    1.redmine_customize_core_fields可以对自带字段进行设置,看起来很不错,2016年6月23日上线,安装失败, 看来测试不完整.redmine_issue_field_vis ...