一、行级标签

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

常见行级标签：

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. C#基础第七天-作业答案-利用面向对象的思想去实现名片-动态添加

    class Card { private string name; public string Name { get { return name; } set { name = value; } } ...

  2. [LeetCode] Shortest Word Distance I & II & III

    Shortest Word Distance Given a list of words and two words word1 and word2, return the shortest dist ...

  3. PostgreSQL PL/Python 和 PL/Postgres 函数互相调用

    create or replace function hello(name text) returns text as $$ # str = name+',你吃饭了吗?'; # return 'hel ...

  4. IOS 入门开发之创建标题栏UINavigationBar的使用

    转自:http://xys289187120.blog.51cto.com/3361352/685746 IOS 入门开发之创建标题栏UINavigationBar的使用     IOS 开发有关界面 ...

  5. C++类中的成员函数和构造函数为模板函数时的调用方法

    所谓模板函数其实就是建立一个通用函数,这个通用函数的形参类型不具体指定,用一个虚拟类型来代表,这个通用函数就被称为函数模板. 例: #include <iostream> using na ...

  6. Vmware虚拟硬盘合并多个分割文件

    有时,当我们创建虚拟机vmware里面的应用程序,我们可能会选择创建分割的虚拟磁盘中的多个文件2 GB的文件,这是为了提高复制过程,主要用于存储虚拟机文件系统不支持创建更大的文件. 如果我们需要将它转 ...

  7. 部署ArcGIS JS API 离线包(Tomcat与IIS)

    http://www.cnblogs.com/ventlam/archive/2012/12/13/2815583.html

  8. ubuntu 中DNAT SNAT配置实验.

    1.      目的 图1 如图1所示,有A,B两台计算机,其中A配置成普通PC,B是网关.实现由A向一个不存在的IP 发起tcp连接,并能向这个不存在的ip发送数据. 同时响应这个tcp连接的是B中 ...

  9. ROW_NUMBER() OVER函数的基本用法，也可用于去除重复行

    语法:ROW_NUMBER() OVER(PARTITION BY COLUMN ORDER BY COLUMN) 简单的说row_number()从1开始,为每一条分组记录返回一个数字,这里的ROW ...

  10. opencv项目报错_pFirstBlock==pHead解决办法

    备注: 我上次遇到这个问题的原因是项目设置为MTd导致的 OpenCV是MTd的,我要是改成MDd就编译报错,所以不能采用把项目改为MDd的办法,只能把OpenCV重新编译为MDd的,下载CMAKE, ...