一、html元素可分为三大类：块元素、内联元素、可变元素

1.块元素：

常见块状元素：div,p,ul,ol,li,dl,dt,dd,form,hr,table,tr,td,h1-h6,filedset,caption

块状元素特点：

(a)以块的形式显示为一个矩形区域；

(b)块状元素独占一行，自上而下排列；

(c)块状元素可以定义自己的宽度和高度，以及盒模型中的margin,padding,border；

(d)块状元素可以作为一个容器包含其他的块状元素或内联元素。

2.内联元素(行内元素)：

常见内联元素：a,strong,b,i,em,span,label,img,input

内联元素特点：

(a)内联元素在一行逐个进行显示；

(b)内联元素没有自己的形状，不能定义宽度和高度，它的宽高由内容来决定；

(c)内联元素设置与高度相关的一些属性(如margin-top,margin-bottom,padding-top,padding-bottom,line-height)，显示无效或显示不准确；

(d)内联元素设置左右填充和外间距是可以的。

内联块状元素：img,input,textarea

内联块状元素特点：

(a)即具有内联元素特点，也具有块状元素特点

(b)即可以定义容器的宽，高，margin，padding等，还可以和其他内联元素在一行显示

3.可变元素

二、元素类型转换

display:block|inline|inline-block|none|list-item;

block:将元素转换为块状元素(大部分块状元素的默认display属性值)

inline:将元素转换为内联元素(大部分内联元素的默认display属性值)

inline-block:将元素转换为内联块状元素(img,input等元素的默认display属性值)

list-item:将元素转换为列表类型(li的默认display属性值)

none:元素隐藏不可见

注：当元素设置了float属性后，就相当于设置了display:block;可以给元素定义宽，高了

三、置换元素和非置换元素

1.置换元素

浏览器根据元素的标签和属性，来决定元素的具体显示内容

如img标签，src属性决定了在网页呈现不同的图片

如input标签，type属性决定了在网页中呈现什么类型的input控件

2.非置换元素

除置换元素外其他的html元素都是非置换元素

标签之间书写什么样的内容，浏览器就显示什么内容

如：

hello world

html 元素怎么分类的,前端之Html元素的分类相关推荐

从零开始学前端：CSS元素模式的转换和CSS三大特性 --- 今天你学习了吗？（CSS：Day12）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:复习课程 - 今天你学习了吗?(CSS:Day11) 文章目录从零开始学前端:程序猿小白也可以完全掌握! ...
web前端 HTML常用标签,标签分类
1.什么是标签 #1.在HTML中规定标签使用英文的的尖括号即<和>包起来,如<html>.<head>.<body>都是标签, #2. HTML中标签 ...
html 指定对象为块元素,html内联（行内）元素、块级（块状）元素和行内块元素分类...
HTML可以将元素分类方式分为内联(行内)元素.块级(块状)元素和行内块元素三种. 注:HTML是标签语言,那么既然是标签,就可以自己定义一些自己元素(如自定义的元素等),自定义元素浏览器默认解析为内 ...
web里如何在背景图片上放置div元素_2020年web前端开发经典面试题总结整理（建议收藏）...
1,阐述清楚浮动的几种方式(常见问题) (1)父级div定义 height 原理:父级div手动定义height,就解决了父级div无法自动获取到高度的问题. 优点:简单.代码少.容易掌握缺点:只适 ...
从零开始学前端：伪元素和盒子模型 --- 今天你学习了吗？（CSS：Day13）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:CSS元素模式的转换和CSS三大特性 - 今天你学习了吗?(CSS:Day12) 文章目录从零开始学前端 ...
Web前端面试指导(十四)：如何居中一个元素（正常、绝对定位、浮动元素）?
题目点评这道题目的提问比较多,连续问了三个问题,正常元素.绝对定位元素.互动元素如何居中,而且居中没有说清楚是垂直居中还是水平居中,要回答清楚这个问题,必须得有深厚的功底,而且要分类的来回答,条理要 ...
html设计的概念,HTML标签, 元素与列表，前端UI设计-2019.08.30
1. 谈谈你对html标签, 元素与属性的理解, 并举例说明1.HTML标签是由一对尖括号<>组成的.标签其分为"起始标签"和"结束标签",前标签为 ...
Day07-课程分类管理-课程分类显示前端-p104
课程分类显示前端 1.创建API 2.将api导入前端页面 3.完善list.vue中的方法 4.前端功能优化 5.测试 1.创建API import request from '@/utils/re ...
前端开发审查元素时CSS样式有个横线（该CSS样式定义后无效）的解决办法
问题概述关于这个问题,博主是在前端开发,样式调试的时候遇到的, 进行盒模型,CSS Debugger调试时,遇到样式设值后不可用的情况! 如下图: 解决办法左看右看,上看下看,最终发现是前面在编码 ...

html 元素怎么分类的,前端之Html元素的分类

hello world

html 元素怎么分类的,前端之Html元素的分类相关推荐

最新文章

热门文章