HTML元素以及HTML元素的分类

html标签又叫做html元素,它分为块级元素和内联元素(也可以叫做行内元素),都是html规范中的概念

块级元素

含义:块级元素是指本身属性为display:block;的元素。因为它自身的特点,我们通常使用块级元素来进行大布局(大结构)的搭建

  • 独占一行,每一个块级元素都会从新的一行重新开始,从上到下排布
  • 可以直接控制宽度、高度以及盒子模型的相关css属性(width/height/border/margin/padding)
  • 在不设置宽度的情况下,块级元素的宽度是它父级元素内容的宽度
  • 在不设置高度的情况下,块级元素的高度是它本身内容的高度
  • 可以嵌套其他元素
  • ul li、ol li 、dl dt dd 成组出现,p标签不能嵌套它自己本身
标签 作用
div 常用块级容器,也是css layout的主要标签
h1 大标题
h2 副标题
h3 三级标题
h4 四级标题
h5 五级标题
h6 六级标题
hr 水平分隔线
menu 菜单列表
ol 有序列表
ul 无序列表
li 列表项
dl 定义列表
dt 定义标题
dd 定义描述
table 表格
p 段落
form 交互表单

行内元素

行内(内联)元素是指本身属性为display:inline;的元素。因为它自身的特点,我们通常使用块级元素来进行文字、小图标(小结构)的搭建.

  • 和其他内联元素从左到右在一行显示,从左到右,达到父级元素的最大宽度时,会自动折行
  • 不能直接控制宽度、高度以及盒子模型的相关css属性,但是直接设置内外边距的左右值是可以的
  • 内联元素的宽高是由本身内容的大小决定(文字、图片等)
  • 内联元素只能容纳文本或者其他内联元素(此处请注意,不要在内联元素中嵌套块级元素)
  • 在编辑代码时,元素之间有回车或者换行的时候,元素和元素之间有间隙
标签 作用
span 常用内联容器,定义文本内区块
a 锚点
b 加粗
strong 加粗强调
i 斜体
em 斜体强调
s 中划线(不推荐使用)
strike 中划线
del 文档中已被删除的文本
br 强制换行
u 下划线
textarea 多行文本输入框
input 输入框
select 下拉列表
label input 元素定义标注(标记)
img 插入图片
sub 下标
sup 上标
big 大字体文本
small 小字体文本

行内块级元素

  • 在一行排布,从左到右,达到父级元素的最大宽度时,会自动折行
  • 设置盒子模的CSS属性
  • 默认不设置宽度和高度的时候,宽高都是由本身内容决定的
  • 在编辑代码时,元素之间有回车或者换行的时候,元素和元素之间有间隙
标签 作用
textarea 文本域
input 输入框
img 图片

HTML元素以及HTML元素的分类的更多相关文章

  1. HTML元素分类:块级元素 内联元素和内联块状元素

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

  2. html 标签内联元素和块元素分类【转】

    常见的块状元素与内联元素 块状元素 内联元素 address - 地址 blockquote - 块引用 center - 居中对齐 dir - 目录列表 div - 常用块级容易,也是CSS lay ...

  3. HTML元素分类 块级元素 内联元素 块级内联元素

    概述 HTML中存在许多元素,如<h1>,<p>,<a>,<block>,<image>,这些元素可分为三类,依次是块级元素,内联元素,块级 ...

  4. 从文档流来看内联元素和块元素的css排版

    veda原创[抄录]讲得很好存自己这里看 从文档流来看内联元素和块元素的css排版 CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的 ...

  5. HTML行内元素、块状元素、行内块状元素的区别

    HTML可以将元素分类方式分为行内元素.块状元素和行内块状元素三种.首先需要说明的是,这三者是可以互相转换的,使用display属性能够将三者任意转换: (1)display:inline;转换为行内 ...

  6. HTML中的行内元素和框元素详解

    定义 传统的块级元素定义中只是说明了在文档流中形成了一个块,在前后加换行,这里有些笼统. 其实框元素是指宏观上的框元素,它包括3种类型:1.本身就是块级元素 2.dispaly被设置为类block 3 ...

  7. HTML行内元素、块状元素和行内块状元素的区分

    HTML 5 的常用元素分类 HTML可以将元素分类方式分为行内元素.块状元素和行内块状元素三种,这三者是可以互相转换的,通过display属性可以实现互相转换 (1)display:inline;转 ...

  8. css 行内元素 块元素 替换元素 非替换元素 以及这些元素的width height margin padding 特性

    一.各种元素的width height margin padding 特性(具体css元素的分来参看二) 1.块级元素 width. height. margin的四个方向. padding的四个方向 ...

  9. Html 内联元素、外联元素 和 可变元素

    块元素(block element)一般是其他元素的容器元素 块元素一般都从新行开始,它可以容纳内联元素和其他块元素,常见块元素是段落标签'P".“form"这个块元素比较特殊,它 ...

随机推荐

  1. UVA 213 Message Decoding 【模拟】

    题目链接: https://cn.vjudge.net/problem/UVA-213 https://uva.onlinejudge.org/index.php?option=com_onlinej ...

  2. 【Beijing 2010】 次小生成树

    [题目链接] 点击打开链接 [算法] 首先,有一个结论 : 一定有一棵严格次小生成树是在最小生成树的基础上去掉一条边,再加上一条边 这个结论的正确性是显然的 我们先用kruskal算法求出最小生成树, ...

  3. JeePlus:Maven 安装配置

    ylbtech-JeePlus:Maven 安装配置 1.返回顶部 1. Maven 安装配置 1 Maven 由于Maven依赖Java运行环境,因此使用Maven之前需要配置Java的运行环境.下 ...

  4. DNS的主从、子域授权和转发服务器

    DNS的主从.子域授权和转发服务器 主从DNS 注意: 1.全局配置options{} 里面的内容,其中 listen-on port 53 {any or local:}:或者直接注释掉,或删掉 a ...

  5. 基于CentOS7.5的 Rsync 服务详解

    第1章 Rsync概述 1.1 Rsync基本概述 rsync是一款开源的备份工具,可以在不同服务器(主机)之间进行同步备份, 可实现完全备份与增量备份,因此非常适合用于架构集中式备份或异地备份等应用 ...

  6. poj Find a multiple【鸽巢原理】

    参考:https://www.cnblogs.com/ACShiryu/archive/2011/08/09/poj2356.html 鸽巢原理??? 其实不用map但是习惯了就打的map 以下C-c ...

  7. 基于Numpy的神经网络+手写数字识别

    基于Numpy的神经网络+手写数字识别 本文代码来自Tariq Rashid所著<Python神经网络编程> 代码分为三个部分,框架如下所示: # neural network class ...

  8. Ubuntu 16.04 安装OpenSSH7.4

      前几天突然收到接到网安总队下发通知说我们在aws里面的服务器存在重大漏洞及安全隐患.必须在规定时间内修改.我们收到邮件打开Excel发现这些问题 是由于OpenSSH版本太低导致的.于是便安排紧急 ...

  9. python自动化测试学习笔记-10YAML

    之前学习的编写测试用例的方法,都是从excel中编写接口的测试用例,然后通过读取excel文件进行接口自动化测试,这种方式我们叫做数据驱动的方式,由于excel操作起来不灵活,无法实现关联关系的接口测 ...

  10. Bryce1010 Acm模板

    目录 STL标准模板库 STL简介 STL pair STL set STL vector STL string STL stack STL queue STL map upper_bound和low ...