一、行级标签

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

常见行级标签：

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. tuple与list

    tuple是一个引用之后就不可以修改的类型,是一个immutable类型 list是一个mutable的类型,引用之后是可以修改的.同时可以通过索引来修改list中各个元素.这一点是tuple做不到的 ...

  2. php分享十五：php的数据库操作

    一:术语解释: What is an Extension? API和扩展不能理解为一个东西,因为扩展不一定暴露一个api给用户 The PDO MySQL driver extension, for ...

  3. MySql（十二）：MySql架构设计——可扩展设计的基本原则

    一.前言 科技在发展,硬件设备的发展渐渐无法满足应用系统对处理能力的要求.不过,我们还是可以通过改造系统的架构体系,提升系统的扩展能力,通过组合多个低处理能力的硬件设备来达到一个高处理能力的系统,也就 ...

  4. Android 4.1的新特性介绍

    原文:http://android.eoe.cn/topic/summary 果冻豆 - Android 4.1 通知系统 - Notifications 在Android 4.1系统上通知的功能大大 ...

  5. Android 推送集成华为，小米，友盟

    公司的 app 一直使用的是极光推送,最近反馈比较多的是推送消息收不到,看来需要找新的推送服务了,在国内目前手机品牌占有率比较多的是华为和小米,且这两家都有自己的推送服务,同时一个合作的友商说他们使用 ...

  6. 4-4-串的KMP匹配算法-串-第4章-《数据结构》课本源码-严蔚敏吴伟民版

    课本源码部分 第4章  串 - KMP匹配算法 ——<数据结构>-严蔚敏.吴伟民版        源码使用说明  链接☛☛☛ <数据结构-C语言版>(严蔚敏,吴伟民版)课本源码 ...

  7. distill 来自google，openai，deepmind，YC research

    https://distill.pub/ https://colah.github.io/

  8. [Windows Azure] How to use the Queue Storage Service

    How to use the Queue Storage Service version 1.7 version 2.0 This guide will show you how to perform ...

  9. [Windows Azure] What is a Storage Account?

    What is a Storage Account? A storage account gives your applications access to Windows Azure Blob, T ...

  10. (原创)发布一个c++11开发的轻量级的并行Task库TaskCpp

    TaskCpp简介 TaskCpp是c++11开发的一个跨平台的并行task库,它的设计思路来源于微软的并行计算库ppl和intel的并行计算库tbb,关于ppl和tbb我在前面有介绍.既然已经有了这 ...