一、行级标签

行级标签又称为内联标签，行级标签不会单独占据一行，设置宽高无效，行内内部可以容纳其他行内元素，但不可以容纳块元素，不然会出现无法预知的效果。

常见行级标签：

span、strong、em、b、i、input、a、img、textarea。

例如：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>行级标签</title>

</head>

<body>

    <!--行级（内联）标签-->

    <span>我是span</span>

    <i>我是i</i>

    <em style="border: 1px solid #f00;">我是em1</em>

    <!--设置宽度对我无效-->

    <em style="border: 1px solid #f00;width: 200px;">我是em2</em>

    <b>我是b</b>

    <strong>我是strong</strong>

    <a>我是a</a>

    <input type="text">

    <textarea>我是textarea</textarea>

</body>

</html>

结果：

二、块级标签

块级标签单独占据一行，可以设置宽高，块元素内部可以容纳其他块元素或行元素。

常见块级标签：

p、div、ul、ol、dl、li、dd、dt、h1-h6、form、hr、br

例如：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>块级标签</title>

</head>

<body>

        <!--块级标签-->

        <div>我是div</div>

        <!--没有设置宽度时，p标签单独占一行-->

        <p style="border: 1px solid #f00;">我是段落1</p>

        <!--可以设置宽度-->

        <p style="border: 1px solid #f00;width: 200px;">我是段落2</p>

        <h1>我是标题</h1>

</body>

</html>

结果：

HTML（四）：行级标签和块级标签的更多相关文章

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

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

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

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

  3. HTML <!DOCTYPE> 标签 布局引用的几种方法 行级元素与块级元素

    HTML <!DOCTYPE> 标签 <!DOCTYPE html> <html> <head> <title>文档的标题</titl ...

  4. 浅谈css的行内类型标签和块级标签

    常用标签的行内类型标签有:a.span.img:块级标签有:div.p.h1~6.ul.ol.li.dl.dt.dd. 行内类型标签的特征:标签的大小由标签的内容决定,不能设置width和height ...

  5. HTML中的行级标签和块级标签 《转换》

    1.html中的块级标签 显示为“块”状,浏览器会在其前后显示折行.常用的块级元素包括: <p>, <ul>,<table>,<h1~h6>等. 2.h ...

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

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

  7. Html：行级元素和块级元素标签列表

    块级元素 div p h1-h6 form ul ol dl dt dd li table tr td th hr blockquote address table menu pre HTML5: h ...

  8. html行内元素、块级元素及空元素有哪些？区别是什么？

    一. html标签有哪些? 1)行内元素有哪些? 行内元素:行内大多为描述性标记 <span>...</span> <a>...</a>  链接. 锚点 ...

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

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

随机推荐

  1. CentOS 安装Mosquitto及测试

    系统信息,阿里云服务器 安装工具 yum install gcc gcc-c++ yum install openssl-devel yum install c-ares-devel yum inst ...

  2. 在linux中配置环境变量

    JDK下载地址: http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 根据Linux ...

  3. 复习下C 链表操作（单向循环链表、查找循环节点）

    循环链表 稍复杂点. 肯能会有0 或 6 字型的单向循环链表.  接下来创建 单向循环链表 并 查找单向循环链表中的循环节点. 这里已6字型单向循环链表为例. //创建 循环链表 Student * ...

  4. 【Android API】Android 4.1 API官方文档详解

    原文:http://android.eoe.cn/topic/summary 翻译:[eoeAndroid原创团队]kris.流风而逝.贼寇在何方.snowxwyo.lsy4833406 更新日期:2 ...

  5. 批处理向FTP上传指定属性的文件 批处理增量备份的例子

    使用windows批处理向FTP上传具有指定属性的文件,类似增量备份功能. 对一个目录里的几个文件自动上传FTP时只上传有归档属性的文件,然后FTP上传成功后自动清除(本机)刚上传文件的归档属性. 类 ...

  6. iframe高度自适应方法大全

    http://www.3tii.com/993.html http://caibaojian.com/iframe-adjust-content-height.html http://www.jb51 ...

  7. LeetCode: Linked List Cycle II 解题报告

    Linked List Cycle II Given a linked list, return the node where the cycle begins. If there is no cyc ...

  8. C#学习笔记（14）——C# 使用IComparer自定义List类的排序方案

    说明(2017-7-17 21:34:59): 原文:https://my.oschina.net/Tsybius2014/blog/298702?p=1 另一篇比较好的:https://wenku. ...

  9. [转]启动Tomcat提示：指定的服务未安装

    原文地址:http://blog.csdn.net/yilip/article/details/8066246 新下载的Tomcat7.0 解压缩完了运行tomcat7.exe屏幕一闪就没了 运行to ...

  10. 联通GWH-01路由猫超级用户登录方法

    . . . . . 今天回老家,家里用的是联通GWH-01路由猫,上海贝尔的.用路由器背面说明上面写的user用户登录之后,发现只能查看却无法设置.为了开启无线路由功能,只好在网上查找超级用户,是cu ...