一、行级标签

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

常见行级标签：

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. get the code of function in matlab

    >> edit <function>>> edit perform

  2. 配置ssh的config文件-为每个ssh连接创建别名

    其实选来选去,还是iterm2就够用了,唯一比较麻烦的就是每次都有输入地址和用户名,其实,可以通过配置文件简写的. 可以在 ~/.ssh/config文件写上配置alias信息,以后ssh的时候根据a ...

  3. [Leet Code]Path Sum II

    此题如果 #1 和 #4 判断分支交换,大集合就会超时(因为每次对于非叶子节点都要判断是不是叶子节点).可见,有时候if else判断语句也会对于运行时间有较大的影响. import java.uti ...

  4. webapi中取文件的物理路径（server.mappath）

    在Webapi中是用不了server.mappath方法的,上网搜索了一下,发现是用如下代码取得文件绝对路径: string logpath = System.Web.Hosting.HostingE ...

  5. Atitit 切入一个领域的方法总结 attilax这里，机器学习为例子

    Atitit 切入一个领域的方法总结 attilax这里,机器学习为例子 1.1. 何为机器学习?1 1.2. 两类机器学习算法 :监督式学习(Supervised Learning)和非监督式学习( ...

  6. 菜鸟译文（一）——Java中的继承和组合

    阅读英文的能力对于程序员来说,是很重要的.这几年也一直在学习英文,今天心血来潮,就在网上找了一篇简短的博文翻译一下.水平一般,能力有限,还请各位看官多多指点. 译文: 本文将会举例说明Java中继承和 ...

  7. 每日英语：Teens Are Still Developing Empathy Skills

    The teen years are often fraught with door-slamming, eye-rolling and seeming insensitivity, even by ...

  8. 关于emoji表情

    /** /* 表情编码 /* @param emoji:表情符号 **/ encodeEmoji: function (content) { var imgHtml = ""; v ...

  9. pre 标签的使用注意事项

    .news-msg{ // padding: 5px; white-space: pre-wrap; word-wrap: break-word; font-family:'微软雅黑'; } < ...

  10. idea 改变version control

    idea 当一个moudule拥有2个VCS的时候 如何切换其应用的VSC 如拥有 SVN 和 GIT 2个版本  ,想换回SVN则删除  git目录 将 version control  vcs 设 ...