HTML基础-标签分类(闭合标签,空标签,块级元素,行内元素,行级块元素,可替换元素)


Posted in HTML / CSS onMarch 31, 2021

一、闭合标签和空标签

HTML中的标签从闭合的角度可以分为闭合标签和空标签。而HTML中大部分标签都是闭合标签,其他少数为空标签。

常见的空标签有

  • <input />
  • <img />、
  • <area />、
  • <base />、
  • <link />等。

二、位置特性(块级元素,行内元素,行级块元素)

位置特性进行分类的,它将元素分为三类:块级元素,行内元素,行级块元素(也称块级行元素)。

块级元素(block)

**特点: **

  • 可以设置宽高、内、外边距;
  • 独占一行(即前后均有换行);
  • 块级元素如果不设置宽度和高度,则宽度默认为父级元素的宽度高度则根据内容大小自动填充

常见的块级元素:
div、p、h1、h2…hn,ol、ul、dl、li、form、table

行级元素(inline)

特点:

  • 不可设置宽高、上下内、外边距。(左右内、外边距设置有效)
  • 其宽度和高度由其内容自动填充
  • 其他行级元素共处一行

常见的行级元素:

  • a(锚点)
  • b(加粗)
  • i(斜体)
  • span(常用内联容器,定义文本内区块)
  • lable(input 元素定义标注(标记))

行内块元素(inline-block)

特点:

  • 可以设置宽高、内外边距;
  • 可以与其他行内元素、内联元素共处一行

常见的内联元素:
input、img

三、元素之间的转化

可以在行内样式或css样式中改变元素的display将三种元素进行转换。

  • display:block;(将元素变为块级元素)
  • display:inline; (将元素变为行级元素)
  • display:inline-block;(将元素变为行级块元素)

四、可替换元素

什么是可替换元素?顾名思义,就是会被替换的元素。

<img src=xxx.jpg>

我们并没有在 img 标签中写入任何内容,浏览器去下载 src 属性给到的图片,并用该图片资源替换掉 img 标签,而且浏览器在下载前并不知道图片的宽高。所以,可替换元素比较特殊,它的宽高是由其加载的内容决定的。(当然 CSS 可以覆盖其样式)

例子

<img src="xxx.jpg">

该图片在页面中展现出来的话,就是图片本身本身的宽高。

<img width="80" height="80" src="xxx.jpg">

此时该元素展现出来就是宽高为 80 像素。

如果我们再用 CSS 去覆盖其样式:

img {
  width: 60px;
  height: 60px;
}

该元素的展现即为 60 像素。

MDN 的释义:

可替换元素(replaced element)的展现效果不是由 CSS 来控制的。这些元素是一种外部对象,它们外观的渲染,是独立于 CSS 的。

简单来说,它们的内容不受当前文档的样式的影响。CSS 可以影响可替换元素的位置,但不会影响到可替换元素自身的内容。

典型的可替换元素有:

  • <iframe>
  • <video>
  • <embed>
  • <img>

有些元素仅在特定情况下被作为可替换元素处理,例如:

  • <option>
  • <audio>
  • <canvas>
  • <object>
  • <applet>

HTML 规范也说了<input> 元素可替换,因为 “image” 类型的 <input> 元素就像<img>一样被替换。但是其他形式的控制元素,包括其他类型的 <input> 元素,被明确地列为非可替换元素(non-replaced elements)。

HTML / CSS 相关文章推荐
CSS3 clip-path 用法介绍详解
Mar 01 HTML / CSS
50个强大璀璨的CSS3/JS技术运用实例
Feb 27 HTML / CSS
纯CSS实现设置半个字符的样式
Jul 03 HTML / CSS
基于Jquery和Css3代码制作可以缩放的搜索框
Nov 19 HTML / CSS
H5仿微信界面教程(一)
Jul 05 HTML / CSS
HTML5是什么 HTML5是什么意思 HTML5简介
Oct 26 HTML / CSS
基于HTML5超酷摄像头(HTML5 webcam)拍照功能实现代码
Dec 13 HTML / CSS
html5 web本地存储将取代我们的cookie
Dec 26 HTML / CSS
基于html5 canvas实现漫天飞雪效果实例
Sep 10 HTML / CSS
iframe在移动端的缩放的示例代码
Oct 12 HTML / CSS
css 边框添加四个角的实现代码
Oct 16 HTML / CSS
CSS 左边固定宽右边自适应的6种方法
May 15 HTML / CSS
Web前端:CSS最强总结 附详细代码
血轮眼轮回眼特效 html+css
css3 filter属性的使用简介
Mar 31 #HTML / CSS
使用canvas实现雪花飘动效果的示例代码
利用html+css实现菜单栏缓慢下拉效果的示例代码
CSS实现多个元素在盒子内两端对齐效果
Html5页面播放M4a音频文件
You might like
php调用MySQL存储过程的方法集合(推荐)
2013/07/03 PHP
PHP信号处理机制的操作代码讲解
2019/04/19 PHP
Laravel统计一段时间间隔的数据方法
2019/10/09 PHP
学习ExtJS 访问容器对象
2009/10/07 Javascript
深入理解JavaScript系列(7) S.O.L.I.D五大原则之开闭原则OCP
2012/01/15 Javascript
兼容所有浏览器的js复制插件Zero使用介绍
2014/03/19 Javascript
js、jquery图片动画、动态切换示例代码
2014/06/03 Javascript
基于NodeJS的前后端分离的思考与实践(一)全栈式开发
2014/09/26 NodeJs
jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单
2016/09/21 Javascript
Web前端框架bootstrap实战【第一次接触使用】
2016/12/28 Javascript
javascript实现多张图片左右无缝滚动效果
2017/03/22 Javascript
vue项目中使用ueditor的实例讲解
2018/03/05 Javascript
jquery实现搜索框功能实例详解
2018/07/23 jQuery
Vue中的methods、watch、computed的区别
2018/11/26 Javascript
8个非常实用的Vue自定义指令
2020/12/15 Vue.js
jquery实现广告上下滚动效果
2021/03/04 jQuery
[01:19:35]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#2Fnatic VS OG第二局
2016/03/05 DOTA
Python时间戳与时间字符串互相转换实例代码
2013/11/28 Python
讲解Python中for循环下的索引变量的作用域
2015/04/15 Python
Python中关于使用模块的基础知识
2015/05/24 Python
Python+matplotlib+numpy实现在不同平面的二维条形图
2018/01/02 Python
在Tensorflow中查看权重的实现
2020/01/24 Python
django 解决model中类写不到数据库中,数据库无此字段的问题
2020/05/20 Python
python 使用csv模块读写csv格式文件的示例
2020/12/02 Python
python实现不同数据库间数据同步功能
2021/02/25 Python
利用CSS3实现折角效果实例源码
2016/09/28 HTML / CSS
印度最大的酒店品牌网络:OYO Rooms
2016/07/24 全球购物
Ajax和javascript的区别
2013/07/20 面试题
幼儿园教师奖惩制度
2014/02/01 职场文书
幼儿园优秀教师事迹
2014/02/13 职场文书
大学生个人自荐信
2014/02/24 职场文书
我的长生果教学反思
2014/04/28 职场文书
高中生自我评价范文2015
2015/03/03 职场文书
2015年医院后勤工作总结
2015/05/20 职场文书
端午节将至,用Python爬取粽子数据并可视化,看看网友喜欢哪种粽子吧!
2021/06/11 Python
Java9新特性之Module模块化编程示例演绎
2022/03/16 Java/Android