本文内容:

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

首发日期: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. Excel 斜线表头制作方法

    Excel 斜线表头制作方法

  2. asp.net MVC 5 路由 Routing

    ASP.NET MVC ,一个适用于WEB应用程序的经典模型 model-view-controller 模式.相对于web forms一个单一的整块,asp.net mvc是由连接在一起的各种代码层 ...

  3. 缓存日志截取字段上传FTP

    #!/bin/bash awk '{print $3,$4,$5,$6,$9,$11,$12,$14,$15,$18}' /usr/local/tcacheserver/var/log/traffic ...

  4. json_decode与json_encode容易被忽视的点

    一.json_decode的使用,json_decode共有4个参数 json_decode ( string $json [, bool $assoc=FALSE [, int $depth= 51 ...

  5. sql server 索引阐述系列八 统计信息

    一.概述 sql server在快速查询值时只有索引还不够,还需要知道操作要处理的数据量有多少,从而估算出复杂度,选择一个代价小的执行计划,这样sql server就知道了数据的分布情况.索引的统计值 ...

  6. mysql 开发基础系列8 表的存储引擎

    一. 表的存储引擎 1. 概述 插件式存储引擎是mysql数据库最重要的特性之一, 用户可以根据应用的需要选择如何存储和索引数据,是否使用事务等.在mysql 5.0里支持的引擎包括: MyISAM, ...

  7. 整理一下pywinauto 的sendeys(py2.7)换成python3.6用PyUserInput

    没办法入门学的是py3.6所以有些只支持2.7的库保好放弃了 senkeys (2.7)==>pyuserinput (3.6) ================================ ...

  8. MySQL 通讯协议

    Client/Server 通讯协议用于客户端链接.代理.主备复制等,支持 SSL.压缩,在链接阶段进行认证,在执行命令时可以支持 Prepared Statements 以及 Stored Proc ...

  9. MySQL索引建立和使用的基本原则

    合理设计和使用索引 在关键字段的索引上,建与不建索引,查询速度相差近100倍.   差的索引和没有索引效果一样.   索引并非越多越好,因为维护索引需要成本.   每个表的索引应在5个以下,应合理利用 ...

  10. Runtime详解(下)

    Runtime应用 1.Runtime 交换方法 应用场景:当第三方框架或者系统原生方法功能不能满足我们的时候,我们可以在保持系统原有功能的基础上,添加额外的功能. 需求:加载一张图片直接用系统的[U ...