常见的块级和内联

主要区别

每个块级元素默认占一行（左右撑满），一行只能有一个块级元素（float 浮动除外）。两个块级元素连续编辑时，会在页面自动换行。块级元素一般可嵌套块级元素或内联元素；块级元素一般作为容器出现，用于组织结构，但并不全是如此。有些块级元素只能包含会计元素，有些既包含块级元素也包含内联元素。

行内元素一般都是基于语义级（semantic）的基本元素，只能容纳文本或其他内联元素，常见内联元素 a 。比如 span 元素，iframe 元素和元素样式的 display : inline 的都是行内元素。例如文字这类元素，各个字母 之间横向排列，到最右端自动折行。

常见的块级元素

h 标签 标题 (Heading）元素有六个不同的级别，<h1>是最高级的，而<h6>则是最低的。一个标题元素能简要描述该节的主题。 <h1> ~ <h6> 重要性逐渐下降，字体大小也逐渐减小。

使用时有一下几点注意：

• 不要为了使标题字体减小而是用低级别标题，应该使用 CSS 的 font-size 样式修改。
• 不要跳过某级标题，始终都要从<h1>开始接着h2。
• 减少对<h1>的使用，因为h1包起来的内容是除了<title>以外最重要的内容。

    <h1>一级标题</h1>
    <h2>一级标题</h2>
    <h3>一级标题</h3>
    <h4>一级标题</h4>
    <h5>一级标题</h5>
    <h6>一级标题</h6>
复制代码

默认样式

//从h1到 h6
margin: 0.67em 0 -> 0.83em 0 -> 1em 0 -> 1.33em 0 -> 1.67em 0 -> 2.33em 0;
font-size: 2em -> 1.5em -> 1.17em -> 1em -> 0.83em -> 0.67em;
font-weight: bold;
复制代码

p 标签 p（paragraph）标签用于定义一个段落

<p> This is some text in a paragraph
复制代码

默认样式

p {
  display: block;
  margin-top: 1em;  // 1 em = 16 px
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;
}
复制代码

div 标签 div（divide）标签定义 HTML 文档的分区或部分，常用作其他 HTML 元素的容器以使用 CSS 对其进行样式设置或使用 Javascript 执行某些任务。

<div>
    <p>this is some text in a paragraph</p>
    <p>this is some text in a paragraph</p>
    <p>this is some text in a paragraph</p>
    <p>this is some text in a paragraph</p>  //默认样式 display: block;
</div>
复制代码

hr 标签 hr（Horizontal Rule）标签表示段落元素之间的主题转换。

<p>段落一</p>
    <hr>
<p>段落二</p>
复制代码

默认样式

hr { 
  display: block;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: auto;
  margin-right: auto;
  border-style: inset;
  border-width: 1px;
}
复制代码

pre 标签 pre（Preformatted）标签用于定义预格式化的文本，文本以固定宽带字体（通常 Courier）显示，保留空格和换行符。

<pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both      spaces and
line breaks
</pre>
复制代码

默认样式

pre {
  display: block;
  font-family: monospace;
  white-space: pre;
  margin: 1em 0;
}
复制代码

常见的内联元素

span 标签 span（span）标签用于对文档中的内乱元素进行分组，span 本身不提供任何的视觉变化。通常做法是用 span 标签选中，使用 CSS 或 Javascript 对其设置。

<p>My mother has <span style="color:blue">blue</span> eyes.</p>  // 默认样式 none
复制代码

em strong 标签 em（Emphasized）标签表示强调 strong （Strong）标签表示重要

<p>I am <em>very</em> worried!</p>  // 默认样式 font-style: italic;
<strong>warning</strong> //默认样式 font-weight: bold;
复制代码

转载于:https://juejin.im/post/5cd81f176fb9a032453bcc04