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实现的几个小loading效果
Sep 27 HTML / CSS
使用CSS3来制作消息提醒框
Jul 12 HTML / CSS
css3 border旋转时的动画应用
Jan 22 HTML / CSS
css3编写浏览器背景渐变背景色的方法
Mar 05 HTML / CSS
使用css实现android系统的loading加载动画
Jul 25 HTML / CSS
CSS3 按钮边框动画的实现
Nov 12 HTML / CSS
html标签之Object和EMBED标签详解
Jul 04 HTML / CSS
用HTML5中的Canvas结合公式绘制粒子运动的教程
May 08 HTML / CSS
详解前端HTML5几种存储方式的总结
Dec 27 HTML / CSS
微信小程序“圣诞帽”的实现思路详解
Dec 28 HTML / CSS
HTML中meta标签及Keywords
Apr 15 HTML / CSS
HTML5页面无缝闪开的问题及解决方案
Jun 11 HTML / CSS
Web前端:CSS最强总结 附详细代码
血轮眼轮回眼特效 html+css
css3 filter属性的使用简介
Mar 31 #HTML / CSS
使用canvas实现雪花飘动效果的示例代码
利用html+css实现菜单栏缓慢下拉效果的示例代码
CSS实现多个元素在盒子内两端对齐效果
Html5页面播放M4a音频文件
You might like
php调整gif动画图片尺寸示例代码分享
2013/12/05 PHP
PHP5.3新特性小结
2016/02/14 PHP
php反射学习之依赖注入示例
2019/06/14 PHP
线路分流自动跳转代码;希望对大家有用!
2006/12/02 Javascript
某人初学javascript的时候写的学习笔记
2010/12/30 Javascript
jQuery实现的Email中的收件人效果(按del键删除)
2011/03/20 Javascript
Node.js:Windows7下搭建的Node.js服务(来玩玩服务器端的javascript吧,这可不是前端js插件)
2011/06/27 Javascript
JS获取IE版本号与HTML设置IE文档模式的方法
2016/10/09 Javascript
WEB 前端开发中防治重复提交的实现方法
2016/10/26 Javascript
jQuery手指滑动轮播效果
2016/12/22 Javascript
bootstrap 表单验证使用方法
2017/01/11 Javascript
js表单序列化判断空值的实例
2017/09/22 Javascript
Vue Router 实现动态路由和常见问题及解决方法
2020/03/06 Javascript
微信小程序实现简单文字跑马灯
2020/05/26 Javascript
Element Alert警告的具体使用方法
2020/07/27 Javascript
Python读取ini文件、操作mysql、发送邮件实例
2015/01/01 Python
理解Python中的With语句
2015/02/02 Python
Python的Django框架安装全攻略
2015/07/15 Python
Python Socket编程详细介绍
2017/03/23 Python
Python实现修改IE注册表功能示例
2018/05/10 Python
CSS3 实现倒计时效果
2020/11/25 HTML / CSS
HTML5页面直接调用百度地图API获取当前位置直接导航目的地的实现代码
2018/03/02 HTML / CSS
英国经典球衣网站:Classic Football Shirts
2017/05/20 全球购物
令人啧啧称赞的经理推荐信
2013/11/07 职场文书
初二学习计划书范文
2014/04/27 职场文书
综治宣传月活动总结
2014/04/28 职场文书
大学教师师德师风演讲稿
2014/08/22 职场文书
员工培训协议书
2014/09/15 职场文书
应届毕业生自荐信
2015/03/04 职场文书
2015年检验科工作总结
2015/04/27 职场文书
和谐拯救危机观后感
2015/06/15 职场文书
观看《筑梦中国》纪录片心得体会
2016/01/18 职场文书
诗词赏析-(浣溪沙)
2019/08/13 职场文书
一篇文章带你搞懂Python类的相关知识
2021/05/20 Python
OpenCV绘制圆端矩形的示例代码
2021/08/30 Python
Vue中Object.assign清空数据报错的解决方案
2022/03/03 Vue.js