本文内容:

  • 常见行内标签
  • 常见块级标签
  • 常见自闭合标签

首发日期:2018-02-12

修改:

  1. 2018-04-25:删除了不常用的标签

常见行内标签:

什么是行内标签:

  1. 行内标签就是在页面内只占据刚好能包裹自己内容的空间
  2. 设置宽高属性值不生效,只依靠内容来决定大小
  3. 行内标签转换为块级标签:style:"display:block"

常见常见行内标签:

  • <a>:标签可定义锚
  • <b>:字体加粗
  • <big>:大号字体加粗
  • <br>:换行
  • <cite>:引用进行定义
  • <code>:定义计算机代码文本
  • <em>:定义为强调的内容
  • <i>:斜体文本效果
  • <img>:向网页中嵌入一幅图像
  • <input>:输入框
  • <label>:标注标签
  • <select>:创建单选或多选菜单
  • <small>:呈现小号字体效果
  • <span>:组合文档中的行内元素
  • <strong>:语气更强的强调的内容
  • <textarea>:多行的文本输入控件

常见块级标签:

什么是块级标签:

  1. 块级标签就是占据整行内容的标签【如果溢出到下一行,下一行也占据】
  2. 块级标签转换为行内标签:display:inline;
 
 

常见块级标签

 
  • <caption>定义表格标题

  • <dd>定义列表中定义条目
  • <div>定义文档中的分区或节
  • <dl>定义列表
  • <dt>定义列表中的项目
  • <form>创建 HTML 表单
  • <h1>定义最大的标题
  • <h2>定义副标题
  • <h3>定义标题
  • <h4>定义标题
  • <h5>定义标题
  • <h6>定义最小的标题
  • <hr>创建一条水平线
  • <legend>元素为
  • <li>标签定义列表项目
  • <ol>定义有序列表
  • <ul>定义无序列表
  • <p>标签定义段落
  • <table>标签定义 HTML 表格

常见行内块标签:

  • 这些标签兼具了行内和块级标签的特点,可以设置宽高和对齐属性
  • 例如:
    • input【理论上是行内标签,但是可以设置大小】
    • img【理论上是行内标签,但是可以设置大小】
    • td【理论上是行内标签,但是可以设置大小】

常见自闭合标签:

  • <input>:定义一个输入框

  • <meta>:提供有关页面的元信息
  • <link>:定义文档与外部资源之间的关系,通常用来连接样式表
  • <br>:用来换行
  • <hr>:定义一个水平线
  • <img>:定义 HTML 页面中的图像

html:常见行内标签,常见块级标签,常见自闭合标签的更多相关文章

  1. 前端-CSS-7-标准文档流&行内元素和块级元素转换

    1.什么是标准文档流 <!--  什么是标准文档流 宏观的将,我们的web页面和ps等设计软件有本质的区别 web 网页的制作 是个“流” 从上而下 ,像 “织毛衣” 而设计软件 ,想往哪里画东 ...

  2. 04. H5标签有哪些?行内元素有哪些?块级元素有哪些?空(void)元素有哪些?行内元素和块级元素有什么区别?你工作中常用标签有什么?

    4. H5标签有哪些? 2)行内元素有哪些? a - 锚点 em - 强调 img - 图片 font - 字体设定 ( 不推荐 ) i - 斜体 input - 输入框 3)块级元素有哪些? add ...

  3. HTML入门(转义字符、行内样式和块级元素、定位、锚点、跑马灯标签、图片标签、表格标签的讲解)

    一.转义字符由特殊字符包裹的文本 会当做标签去解析 对应不换行空格 对应全角空格 em是字体排印学的计量单位,相当于当前指定的点数.其占据的宽度正好是1个中文宽度,而且基本上不受字体影响.<对应 ...

  4. img标签到底是行内元素还是块级元素

    面试官问你<img>是什么元素时你怎么回答 写这篇文章源自我之前的一次面试,题目便是问img标签属于块级元素还是行内元素,当时想都没想就说了是行内(inline)元素,面试官追问为什么能够 ...

  5. CSS设置行内元素和块级元素的水平居中、垂直居中

    CSS设置行内元素的水平居中 div{text-align:center} /*DIV内的行内元素均会水平居中*/ CSS设置行内元素的垂直居中 div{height:30px; line-heigh ...

  6. HTML行内元素与块级元素有哪些及区别详解

    转自 https://www.jb51.net/web/724286.html   这篇文章主要介绍了HTML行内元素与块级元素有哪些及区别详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具 ...

  7. css——行内元素和块级元素的具体区别与行内块元素

    (学习笔记) 行内元素(inline)和块级元素(block)都是display属性的值.要知道行内元素和块级元素的区别,首先要了解他们的特性. 行内元素的特性:“行内”,顾名思义,在一行之内,所以相 ...

  8. CSS行内元素和块级元素的居中

    一.水平居中 行内元素和块级元素不同,对于行内元素,只需在父元素中设置text-align=center即可; 对于块级元素有以下几种居中方式: 1.将元素放置在table中,再将table的marg ...

  9. C#基础-css行内元素、块级元素基础

    一.行内元素与块级元素 块级元素列表 <address> 定义地址 <caption> 定义表格标题 <dd> 定义列表中定义条目 <div> 定义文档 ...

  10. 行内元素和块级元素的具体区别是什么?inline-block是什么?(面试题目)

    一,行内元素与块级元素的区别: 1.行内元素与块级元素直观上的区别二.行内元素与块级元素的三个区别 行内元素会在一条直线上排列(默认宽度只与内容有关),都是同一行的,水平方向排列. 块级元素各占据一行 ...

随机推荐

  1. 《CLR Via C#》读书笔记:24.运行时序列化

    一.什么是运行时序列化 序列化的作用就是将对象图(特定时间点的对象连接图)转换为字节流,这样这些对象图就可以在文件系统/网络进行传输. 二.序列化/反序列化快速入门 一般来说我们通过 FCL 提供的 ...

  2. (转)p解决 java.util.prefs.BackingStoreException 报错问题

    原文:https://blog.csdn.net/baidu_32739019/article/details/78405444 https://developer.ibm.com/answers/q ...

  3. 【java提高】---HashSet 与TreeSet和LinkedHashSet的区别

    HashSet 与TreeSet和LinkedHashSet的区别 今天项目开发,需要通过两个条件去查询数据库数据,同时只要满足一个条件就可以取出这个对象.所以通过取出的数据肯定会有重复,所以要去掉重 ...

  4. MFC原理第一讲.MFC的本质.以及手工编写MFC的程序

    MFC原理第一讲.MFC的本质.以及手工编写MFC的程序 PS: 这个博客属于复习知识.从头开始讲解. 在写这篇博客之前.已经写了3篇MFC的本质了.不过掌握知识点太多.所以从简重新开始. 一丶MFC ...

  5. 【原创】Python第二章——标识符命名规则

    在Python中,一切都是对象,包括常量数据类型,如整数数据类型(1,2,3...),字符串数据类型("ABC").想要使用这些对象,就要使用它的对象引用.赋值操作符,实际上是使得 ...

  6. 彻底弄懂 Unicode 编码

    彻底弄懂 Unicode 编码 今天,在学习 Node.js 中的 Buffer 对象时,注意到它的 alloc 和 from 方法会默认用 UTF-8 编码,在数组中每位对应 1 字节的十六进制数. ...

  7. gops —— Go 程序诊断分析工具

    GitHub: https://github.com/google/gops 一个用于列出和诊断分析系统中正在运行的 Go 程序的命令行工具 安装 go get -u github.com/googl ...

  8. ARM 汇编指令 ADR 与 LDR 使用

    简介 这两个都是伪指令:ADR 是小范围的地址读取伪指令,LDR 是大范围的读取地址伪指令.可实际使用的区别是: ADR 是将基于 PC 相对偏移的地址值或基于寄存器相对地址值读取的伪指令,而 LDR ...

  9. 我的python渗透测试工具之主机嗅探

    嗅探工具的主要目标是基于UDP发现目标网络中的存活主机,选择UDP的原因是UDP访问过程开销小. 由于很多的操作系统在处理UDP端口的闭合时都会存在一个共性,我们也正是利用这个共性来开展确定此IP上是 ...

  10. 结构型---桥接模式(Bridge Pattern)

    定义 桥接模式即将抽象部分与实现部分脱耦,使它们可以独立变化.桥接模式的目的就是使两者分离,根据面向对象的封装变化的原则,我们可以把实现部分的变化封装到另外一个类中,这样的一个思路也就是桥接模式的实现 ...