本文内容:

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

首发日期: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. AI历史和哲学基础浅谈

    换个角度看AI:研究历史和哲学逻辑 正如题图所示,仿生人会梦见电子羊吗?(注:Do Androids Dream of Electric Sheep?是Philip K. Dick所著的一本科幻小说, ...

  2. MongoDB从入门到优化

    目录 一.MongoDB 简介 二.MongoDB 的储存引擎 三.mongodb 配置参数 四.MongoDB 单节点搭建 五.MongoDB 连接 六.MongoDB 常用命令 七.MongoDB ...

  3. MFC控件第一讲.DC编程

    MFC控件第一讲.DC编程 一丶简介 什么是DC,DC有什么用. DC成为设备描述符表. DC的作用就是可以进行绘制. 比如我们的窗口都是绘制出来的.  DC可以简单理解为.没一个窗口程序都有一块内存 ...

  4. OSI七层协议模型、TCP/IP四层模型和五层协议体系结构之间的关系

    一.OSI七层模型 OSI七层协议模型主要是:应用层(Application).表示层(Presentation).会话层(Session).传输层(Transport).网络层(Network).数 ...

  5. mysql列反转Pivoting

    Pivoting是一项可以把行旋转为列的技术.在执行Pivoting的过程中可能会使用到聚合.Pivoting技术应用非常广泛.下面讨论的都是静态的Pivoting查询,即用户需要提前知道旋转的属性和 ...

  6. 【Go】IP地址转换:数字与字符串之间高效转换

    转载:https://blog.thinkeridea.com/201903/go/ip2long.html IP 地址库中 IP 地址的保存格式一般有两种,一种是点分十进制形式(192.168.1. ...

  7. python装饰器1:函数装饰器详解

    装饰器1:函数装饰器 装饰器2:类装饰器 装饰器3:进阶 先混个眼熟 谁可以作为装饰器(可以将谁编写成装饰器): 函数 方法 实现了__call__的可调用类 装饰器可以去装饰谁(谁可以被装饰): 函 ...

  8. LeetCode哈希表

    1. Two Sum https://leetcode.com/problems/two-sum/description/ 不使用额外空间需要n*n的复杂度 class Solution { publ ...

  9. Webapi--Webapi 跨域链接

    1]创建 WebAPIWebAPI WebAPI,新建 ,新建 ->项目 ->ASP.NET Web >ASP.NET Web >ASP.NET Web >ASP.NET ...

  10. ubuntu16.4系统和Gentos6.8系统查看开机自启动服务

    ubuntu16.4系统查看自启服务: 需要自行安装一个sysv-rc-conf的工具来查看: sudo apt-get install sysv-rc-conf 查看自启命令: sudo sysv- ...