HTML标签元素分类
一.按照块级元素还是行内元素分类
块级元素(block-level)和行内元素(inline-level,也叫作“内联”元素)。
a.块级元素(独占一行)
块级元素:其最明显的特征就是它默认在横向充满其父元素的内容区域,而且在其左右两边没有其他元素,即块级元素默认是独占一行的。典型的块级元素有:<div>,<p>,<h1>~<h6>,<ul>等等。
b.行内元素(可以与其他元素共享一行)
行内元素:行内元素不形成新内容块,即在其左右可以有其他元素,例如<a>、<span>、<strong>等,都是典型的行内级元素。display属性等于“inline”的元素都是行内元素。几乎所有的可替换元素都是行内元素,例如<img>、<input>等等。
PS:(块级和行内可以相互转换):通过设定CSS的display属性,可以使行内元素变为块级元素:display:block;也可以让块级元素变为行内元素:display:inline。
 
*块级元素和行内元素的区别:
1.块级元素会独占一行,其宽度自动填满其父元素宽度;行内元素不会独占一行,相邻的行内元素会排列在同一行里,知道一行排不下,才会换行,其宽度随元素的内容而变化
2.一般情况下,块级元素可以设置 width,height属性,行内元素设置width,height无效。
3.块级元素可以设置margin 和 padding.  行内元素的水平方向的padding-left,padding-right,margin-left,margin-right 都产生边距效果,但是竖直方向的padding-top,padding-bottom,margin-top,margin-bottom都不会产生边距效果。(水平方向有效,竖直方向无效)。
 
二. 按照替换和不可替换元素分类
当然除按照块级和行内元素来分,也可以用是否为可替换元素来分。
a.替换元素(该元素可以根据某属性的改变而产生不同的显示效果)
替换元素:浏览器根据元素的标签和属性,来决定元素的具体显示内容。
举个栗子:浏览器会根据<img>标签的src属性的值来读取图片信息并显示出来,而如果查看(X)HTML代码,则看不到图片的实际内容;又例如根据<input>标签的type属性来决定是显示输入框,还是单选按钮等。
(X)HTML中的<img>、<input>、<textarea>、<select>、<object>都是替换元素。这些元素往往没有实际的内容,即是一个空元素
b.不可替换元素
不可替换元素:(X)HTML 的大多数元素是不可替换元素,即其内容直接表现给用户端。
ps:一般行内元素设置宽和高是没用的,那为什么input或者是img等一些行内元素可以设置width,height?
因为input,img等都是替换元素,替换元素有一般有内在尺寸,所以具有width和height,可以设定,是比较特殊的。当我们不设置它们的宽度和高度时,浏览器会给出默认的宽高。举个栗子:<input type="text"> input的文本输入框形式就会给出默认的宽高。但我们可以改变他的width,height。

HTML标签元素分类(HTML基础知识)的更多相关文章

  1. html标签元素分类

    元素分类 html中的标签元素大体分为三种不同的类型:块状元素.内联元素(又叫行内元素)和内联块状元素. 常用的块状元素有: <div>.<p>.<h1>...&l ...

  2. CSS html标签元素分类

    在CSS中,html中的标签元素大体被分为三种不同的类型: 块状元素.内联元素(又叫行内元素)和内联块状元素.  常用的块状元素有: <div>.<p>.<h1>… ...

  3. HTML的标签元素分类的区别

    HTML ,即Hyper Text Markup Language 超文本标记语言: 文本:纯字符,如window中的txt文本 超文本:在纯文本中嵌入样式,图片,音频,视频,链接等内容 HTML的基 ...

  4. CSS中html的标签元素分类

    在CSS中,html中的标签元素大体被分为三种不同的类型: 块状元素.内联元素(又叫行内元素)和内联块状元素.    常用的块状元素有:  <div>.<p>.<h1&g ...

  5. 深入css布局篇(1) — 盒模型 & 元素分类

    深入css布局(1)-- 盒模型 & 元素分类     " 在css知识体系中,除了css选择器,样式属性等基础知识外,css布局相关的知识才是css比较核心和重要的点.今天我们来深 ...

  6. HTML之元素分类(HTML基础知识)

    HTML之元素分类 一.按照块级元素还是行内元素分类 块级元素(block-level)和行内元素(inline-level,也叫作“内联”元素). a.块级元素(独占一行) 块级元素:其最明显的特征 ...

  7. 9月5日网页基础知识 通用标签、属性(body属性、路径、格式控制) 通用标签(有序列表、无序列表、常用标签)(补)

    网页基础知识 一.HTML语言 HTML语言翻译汉语为超文本标记语言. 二.网页的分类 1.静态页面:在静态页面中修改网页内容实际上就是修改网页原代码,不能从后台操作,数据来只能来源于原于代码.静态网 ...

  8. Web前端开发基础 第四课(CSS元素分类)

    元素分类 在讲解CSS布局之前,我们需要提前知道一些知识,在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素.内联元素(又叫行内元素)和内联块状元素. 常用的块状元素有: <di ...

  9. [转]HTML标签元素的分类

      在讲解CSS布局之前,我们需要提前知道一些知识,在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素.内联元素和内联块状元素. 常用的块状元素有: <div>.<p ...

随机推荐

  1. php文件管理与基础功能的实现

    文件的基本操作 先来看一下PHP文件基础操作,请看强大注释 <body> <?php var_dump(filetype("./img/11.png")); // ...

  2. [SQL] SQL 基础知识梳理(七)- 集合运算

    SQL 基础知识梳理(七)- 集合运算 目录 表的加减法 联结(以列为单位) 一.表的加减法 1.集合:记录的集合(表.视图和查询的执行结果). 2.UNION(并集):表的加法 -- DDL:创建表 ...

  3. 设置iPhone网页固定到桌面上的图标

    <!--IOS Icon--> <link rel="apple-touch-icon-precomposed" href="@Url.Content( ...

  4. 000 Python之禅

    The Zen of Python, by Tim Peters Beautiful is better than ugly.Explicit is better than implicit.Simp ...

  5. 利用shell批量改名和linux中取随机数的方法

    先批量创建文件 #!/bin/sh if [ ! -d /tmp/chenyao ] then mkdir /tmp/chenyao -p fi cd /tmp/chenyao ..} do touc ...

  6. webstorm中关于vue的一些问题

    在进行vue开发中,我使用了webstorm,但是过程坎坷艰辛,遇到了很多问题,我将问题和解决方案贴上,以作参考. 1.vue项目部署在webstorm中,第一个遇到的问题是,webstorm卡住了, ...

  7. 学点Groovy来理解build.gradle代码

    在写这篇博客时,搜索参考了很多资料,网上对于 Groovy 介绍的博客已经特别多了,所以也就没准备再详细的去介绍 Groovy,本来也就计划写一些自己认为较重要的点.后来发现了 Groovy 的官方文 ...

  8. 生成 HTMLTestRunner 测试报告学习总结

    HTMLTestRunner 的安装与使用 HTMLTestRunner 是 Python 标准库的 unittest 模块的一个扩展. 在使用之前,我们需要先安装他.下载地址:https://pyp ...

  9. Luogu1486郁闷的出纳员【Splay】

    P1486 郁闷的出纳员 题目描述 OIER公司是一家大型专业化软件公司,有着数以万计的员工.作为一名出纳员,我的任务之一便是统计每位员工的工资.这本来是一份不错的工作,但是令人郁闷的是,我们的老板反 ...

  10. Java基础之RTTI 运行时类型识别

    运行时类型识别(RTTI, Run-Time Type Identification)是Java中非常有用的机制,在Java运行时,RTTI维护类的相关信息. 多态(polymorphism)是基于R ...