web前端之HTML中元素的区分

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

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

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

双标签也就是封闭标签,我们经常写的<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>标签,它既是文本标签,又是块级标签

时间: 2024-10-10 20:19:41

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

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

1.博客背景 在我的上一篇博客中, 很多园友提出说对css3"画图"不是很理解, 在跟他们私聊了一段时间以后,加上自己在开始自学css3的时候的疑惑,我觉得大家之所以不是很理解主要是因为对伪元素不太了解,介于画图和CSS3里一些高大上的特效用的比较广泛的伪类元素就是::before 和 ::after, 写这篇博客主要也是为了起到一个敲门砖的作用,所以本篇博客主要是讲::before 和 ::after.那么就让我们一起来聊聊伪元素吧. 2.CSS历史 伪元素实际上在CSS1(CSS1

好程序员web前端分享html中meta标签及用法详解

好程序员web前端分享html中meta标签及用法详解,这篇文章给大家介绍了html中meta标签及用法详解,感兴趣的朋友一起看看,Html中meta标签一.meta标签 含义 <meta> 元素 可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词. <meta> 标签位于文档的头部,不包含任何内容. <meta> 标签的属性定义了与文档相关联的名称/值对.二.meta 中常用属性 charset? (字符集) 说明:规

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

问题背景:在项目中往往会涉及到前端跳转页面时要传一些参数给下一个页面,如果参数是英文或者数字的时候就很好解决,然而有时候传参会涉及到中文汉字,这个时候再单纯的拼接往往就会导致中文乱码,下面我们就该讨论一下如何解决中文传参乱码的问题. 假设A页面跳转到B页面并且A向B传参,首先在A页面中要调用这个方法:encodeURI("这里是中文参数"); 完整的拼接效果为: window.location.href="B.html?&title="+encodeURI(

【从0到1学Web前端】javascript中的ajax对象(一)

现在最流行的获取后端的(浏览器从服务器)数据的方式就是通过Ajax了吧.今天就来详细的来学习下这个知识吧.如果使用ajax来访问后段的数据,浏览器和浏览器端的js做了那些工作呢?我做了一个图,请大家看一下: 1.原生js的Ajax请求的方式 由上面的图我们大致的知道了ajax访问后端数据的一个过程.最重要的就是检测浏览器,创建XMLHttpRequest对象的过程: 代码如下: /* 判断是否支持XMLHttpRequest */ function createXHR() { if (typeo

web前端之HTML中的div

HTML <div> 元素 HTML <div> 元素是块级元素,它是可用于组合其他 HTML 元素的容器. <div> 元素没有特定的含义.除此之外,由于它属于块级元素,浏览器会在其前后显示折行. 如果与 CSS 一同使用,<div> 元素可用于对大的内容块设置样式属性. <div> 元素的另一个常见的用途是文档布局.它取代了使用表格定义布局的老式方法.使用 <table> 元素进行文档布局不是表格的正确用法.<table&g

Web 前端开发面试中常遇的问题【持续更新】

XHTML与HTML的区别: XHTML必须合理的结束 XHTML必须关闭 XHTML标签名必须用小写字母 XHTML必须有根元素 XHTML中,需要给所有属性赋一个值 XHTML中‘<’,‘>’,&等用编码表示 XHTML中,不要在注释中写—— 图片必须有说明文字,及alt属性必须有 用id属性代替name属性 2.HTML5与HTML4的区别 HTML5简化了语法,HTML 4中文档格式定义为:<!DOCTYPE HTML PUBLIC "-//W3C//DTD H

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

cp from : https://www.jianshu.com/p/617e78a27c88 ** 前言: ** CSS 中的 display:inline-block 是笔者最为喜欢的元素之一,可以将原本占据一行的块级元素,转变为可以并列显示的行内块级元素. display:inline-block 常被用来代替float进行页面布局,不过正所谓金无足赤.人无完人,当使用 inline-block 后会出现“4px”的空白间距. 关于如何消除这 “ 4px ” 的空白间距,网上已经有了不少

web前端之HTML中的表单和输入

表单 表单是一个包含表单元素的区域. 表单元素是允许用户在表单中(比如:文本域.下拉列表.单选框.复选框等等)输入信息的元素. 表单使用表单标签(<form>)定义. 输入 多数情况下被用到的表单标签是输入标签(<input>).输入类型是由类型属性(type)定义的. 程序演示: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <

WEB前端入门(更新中&#183;&#183;&#183;&#183;&#183;&#183;)

01 前端--HTML内容 02 前端--标签总结 03 前端--CSS内容 原文地址:https://www.cnblogs.com/xichenHome/p/11657414.html