前端之Html元素的分类

一、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元素都是非置换元素

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

如:<h1>hello world</h1

原文地址:https://www.cnblogs.com/21-forever/p/10849721.html

时间: 2024-10-26 04:00:42

前端之Html元素的分类的相关文章

HTML 元素的分类

------------------HTML 元素的分类--------------------------------------------- 内联元素 和 块元素 1.块元素 {display: block;} ----->能设宽和高,独成一行  (**float:left;) ------->div,p,body,h1~h6 2.内联元素 {display:inline} ----->不能设置宽和高 -------->a,span =====================

CSS_元素的分类

元素的分类和特征: 1.块级元素 (1)独自占一行 (2)可以设置宽高,如果不设置宽,默认是父标签的100%的宽 2.行内元素 (1)行内元素在一行内 (2)不能设置宽高 3.行内块元素 (1)在一行内显示 (2)可以设置宽高 /*元素隐藏*/ display:none; /*转为行内块元素*/ display:inline-block; /*转为块元素*/ display:block; /*转为行内元素*/ display:inline; 原文地址:https://www.cnblogs.co

前端-HTML-表格元素

HTML元素分类-表格元素 0. <table>:定义表格. <caption>:定义表格标题.caption 元素紧随 table 元素之后,每个表格只能定义一个标题,标题居中于表格之上. <table border="1"> <caption>Monthly savings</caption> <tr> <th>Month</th> <th>Savings</th>

HTML元素细致分类

HTML元素 — 更细致分类 在CSS中,html中的标签元素大体被分为三种不同的类型: 块状元素.内联元素(又叫行内元素)和内联块状元素. 块状元素:display:block内联元素:display:inline 内联块状元素:display:inline-block 常用的块状元素有: <div>.<p>.<h1>...<h6>.<ol>.<ul>.<dl>.<table>.<address>

前端页面隐藏元素

display:none和visible:hidden都能把网页上某个元素隐藏起来,但两者有区别: display:none ---不为被隐藏的对象保留其物理空间,即该对象在页面上彻底消失. visible:hidden--- 使对象在网页上不可见,但该对象在网页上扔占据着空间. 例子: <html><head><title>display:none和visible:hidden的区别</title></head><body ><

元素的分类

在讲解CSS布局之前,我们需要提前知道一些知识,在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素.内联元素(又叫行内元素)和内联块状元素. 常用的块状元素有: <div>.<p>.<h1>...<h6>.<ol>.<ul>.<dl>.<table>.<address>.<blockquote> .<form> 常用的内联元素有: <a>.<

数组元素的分类

题目: 调整数组顺序使奇数位于偶数前面 输入一个整数数组,实现一个函数来调整该数组中数字的顺序,使得所有奇数位于数组的前半部分,所有偶数位于数组的后半部分 程序1.0: 使用两个指针一个指向头一个指向尾,如果头指针遇到奇数就后移,遇到偶数就和尾指针指向的元素交换,头指针交换完成后后移,尾指针交换完成后前移,当两指针指向同一地址交换结束 void ReorderOddEven(int *pData, size_t length) { assert(pData); assert(length); i

Html中元素的分类

元素可以分为两种 1.块级元素:用来布局,搭建框架 <p><div> 2.内联元素:承载内容,修饰细节 <a> 两者区别 1.块元素独占一整行,在父元素限定的范围内:内联元素水平排,直到 排不下,自动换行排列(这是两者之间最重要的区别) 2.块元素加宽高有效,内联元素的宽高无效 3.块元素不设宽度会自动撑满,内联元素的宽度随内容而定 4.块元素不设高度,高度随内容而定.内联元素亦是如此.

HTML所有元素的分类

根据HTML5.1推荐标准,HTML元素主要分为7大类: metadata content(原数据的内容) flow content(流数据的内容) sectioning content(分节的内容) sectioning content(标题的内容) phrasing content(短语的内容) embedded content(嵌入的内容) interactive content(交互式的内容) metadata content(原数据的内容)原数据的内容是设置其余内容的表现或行为的内容.