一、行级标签

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

常见行级标签：

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. appium 重新启动apk

    在旧版本的appium,重新启动apk,调用startActivity方法可以随意启动一个app,并传入一个package name 和启动activity name的名称.语句如下: driver. ...

  2. 【Android开发】Api_Android_Distribute

    原文链接:http://android.eoe.cn/topic/android_sdk {"version": "20120817","pageid ...

  3. [javase学习笔记]-8.6 静态的内存载入

    之前几节我们一直在说statickeyword所修饰的静态,那么在程序执行时,内存中static是怎样体现的呢?这一节我们就来看一看. 我们还是先看一个样例.希望我们通过对这个样例的分析让我们刚開始学 ...

  4. Android:percent 布局

    Android 新引入的布局,百分比布局,Percent 布局 主要分为两种:PercentFrameLayout he PercentRelativeLayout 布局 通过 support 库引入 ...

  5. Atitit 遍历文件夹算法 autoit attilax总结

    Atitit 遍历文件夹算法 autoit attilax总结 _FileListToArray Lists files and\or folders in a specified folder (S ...

  6. KVM虚拟机安装报错 KVM is not available

    在linux系统上使用kvm安装系统时,如果你的cpu不支持虚拟化技术那么可能会报以下错误: Warning:KVM is not available. This may mean the KVM p ...

  7. Sql Server 查询库表记录数

    ), RowCnt INT) EXEC sp_MSforeachtable 'INSERT INTO #temp SELECT ''?'', COUNT(*) FROM ?' desc DROP TA ...

  8. 在javascript中获取一个对象内属性的个数

    var foo = {a1:'1',a2:'2',a3:'3'}; //获得对象所有属性的数组 Object.getOwnPropertyNames(foo); > [ 'a1', 'a2', ...

  9. Android 编程下 Eclipse 恢复被删除的文件

    开发过程中文件误删除,又没有 Git,SVN 等版本控制软件的备份,怎么办? Eclipse 自带了恢复历史文件的功能:在项目上点击右键,选择 Restore from Local History,在 ...

  10. Android 编程下的日志工具类

    package com.sunzn.app.util; import android.util.Log; public class Logger { public static int DEBUG_L ...