WD1X.COM - 问答一下,轻松解决,电脑应用解决专家
主板显卡CPU内存显示器
硬盘维修显卡维修显示器维修
注册表系统命令DOS命令Win8
存储光存储鼠标键盘
内存维修打印机维修
WinXPWin7Win11Linux
硬件综合机箱电源散热器手机数码
主板维修CPU维修键盘鼠标维修
Word教程Excel教程PowerPointWPS
网络工具系统工具图像工具
数据库javascript服务器
PHP教程CSS教程XML教程

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

更新时间:2021-04-14 11:03 作者:LYFlied点击:
一、闭合标签和空标签
 
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)。
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
你可能感兴趣的内容