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地图动态实例代码(圆圈向外扩散)
Jun 15 HTML / CSS
css3实现3D色子翻转特效
Dec 23 HTML / CSS
CSS3 display知识详解
Nov 25 HTML / CSS
使用CSS3设计地图上的雷达定位提示效果
Apr 05 HTML / CSS
利用 CSS3 实现的无缝轮播功能代码
Sep 25 HTML / CSS
10分钟理解CSS3 FlexBox弹性布局
Dec 20 HTML / CSS
css3中less实现文字长阴影(long shadow)
Apr 24 HTML / CSS
使用CSS3制作版头动画效果
Dec 24 HTML / CSS
HTML5中使用postMessage实现两个网页间传递数据
Jun 22 HTML / CSS
a标签下载链接的简单实现
Sep 13 HTML / CSS
HTML5中图片之间的缝隙完美解决方法
Jul 07 HTML / CSS
Html5页面上如何禁止手机虚拟键盘弹出
Mar 19 HTML / CSS
Web前端:CSS最强总结 附详细代码
血轮眼轮回眼特效 html+css
css3 filter属性的使用简介
Mar 31 #HTML / CSS
使用canvas实现雪花飘动效果的示例代码
利用html+css实现菜单栏缓慢下拉效果的示例代码
CSS实现多个元素在盒子内两端对齐效果
Html5页面播放M4a音频文件
You might like
信用卡效验程序
2006/10/09 PHP
php array_map array_multisort 高效处理多维数组排序
2009/06/11 PHP
PHP用mysql数据库存储session的代码
2010/03/05 PHP
一个PHP的String类代码
2010/04/20 PHP
一些php项目中比较通用的php自建函数的详解
2013/06/06 PHP
ThinkPHP模板之变量输出、自定义函数与判断语句用法
2014/11/01 PHP
phpStudy配置多站点多域名方法及遇到的403错误解决方法
2017/10/19 PHP
javascript 动态生成私有变量访问器
2009/12/06 Javascript
JavaScript XML和string相互转化实现代码
2011/07/04 Javascript
基于JQuery的模拟苹果桌面Dock效果(稳定版)
2012/10/15 Javascript
select标记美化--JS式插件、后期加载
2013/04/01 Javascript
js 固定悬浮效果实现思路代码
2013/08/02 Javascript
JavaScript获取多个数组的交集简单实例
2013/11/11 Javascript
基于jQuery实现最基本的淡入淡出效果实例
2015/02/02 Javascript
jquery $(document).ready()和window.onload的区别浅析
2015/02/04 Javascript
jQuery复制表单元素附源码分享效果演示
2015/09/30 Javascript
JavaScript+Java实现HTML页面转为PDF文件保存的方法
2016/05/30 Javascript
jQuery的ajax下载blob文件
2016/07/21 Javascript
利用原生js和jQuery实现单选框的勾选和取消操作的方法
2016/09/04 Javascript
js微信扫描二维码登录网站技术原理
2016/12/01 Javascript
微信小程序 input表单与redio及下拉列表的使用实例
2017/09/20 Javascript
vue中实现在外部调用methods的方法(推荐)
2018/02/08 Javascript
react高阶组件添加和删除props
2019/04/26 Javascript
vue中使用[provide/inject]实现页面reload的方法
2019/09/30 Javascript
JS错误处理与调试操作实例分析
2020/04/13 Javascript
Python调用C语言开发的共享库方法实例
2015/03/18 Python
python生成以及打开json、csv和txt文件的实例
2018/11/16 Python
python numpy库linspace相同间隔采样的实现
2020/02/25 Python
tensorflow使用freeze_graph.py将ckpt转为pb文件的方法
2020/04/22 Python
Django 解决新建表删除后无法重新创建等问题
2020/05/21 Python
Django Form设置文本框为readonly操作
2020/07/03 Python
法国二手手袋、手表和奢侈珠宝购物网站:Collector Square
2018/07/05 全球购物
党的群众路线教育实践活动个人对照检查材料范文
2014/09/25 职场文书
合作意向协议书
2015/01/29 职场文书
2015年房产经纪人工作总结
2015/05/15 职场文书
教你做个可爱的css滑动导航条
2021/06/15 HTML / CSS