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

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

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

双标签也就是封闭标签，我们经常写的<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. telnet输入乱码的解决

    1.Win+R --- 运行窗口  输入cmd回车 2.输入telnet 主机 端口 3.连接主机发现无法输入 4.这里什么也不要输入,按下 ctrl+] 键 5.按下回车键,然后会弹出新的窗口,就可 ...

  2. ubifs概述

    UBIFS无排序区块图像文件系统(Unsorted Block Image File System, UBIFS)是用于固态存储设备上,并与LogFS相互竞争,作为JFFS2的后继文件系统之一.真正开 ...

  3. Leetcode: Find Leaves of Binary Tree

    Given a binary tree, collect a tree's nodes as if you were doing this: Collect and remove all leaves ...

  4. html5 离线存储

    在html页面中引入manifest文件 <html manifest="sample.appcache"> 在服务器添加mime-type text/cache-ma ...

  5. 【003：switch 不加　break的结果

    #include <stdio.h> int main(){ char ch = 's'; switch(ch){ case 'a':{ printf("aaaaa") ...

  6. htm5l，第一个script代码练习

    <body>    <canvas id="mycanvas" width="500" height="300">  ...

  7. 安装fcitx [Crunch bang] [debian]

    第一步: sudo apt-get install fcitx fcitx-sunpinyin  fcitx-ui-classic fcitx-table fcitx-config-common fc ...

  8. Android USB Host与HID通讯

    前端时间捣鼓一个HID的硬件, 需要和android通信, 网上搜索了一圈,收获不小. 比较好的文章是:      Android USB Host与HID通讯 Android Service创建US ...

  9. 自动刷新页面为了session不过期

    为了保证在打开页面期间session不过期,估做了一个隐藏Iframe每隔若干秒来刷新一下页面,在隐藏页面给session赋值. <script type="text/javascri ...

  10. linux shell脚本使用结构化命令

    内容: 一.if-then命令 二.if-then-else命令 三.test命令 四.case命令 1.if-then结构化命令中最基本的类型,其格式如下: if command then comm ...