HTML共通ブロック要素インライン（内側の線）要素指示：戦闘のウェブフロントエンド・エントリ

HTMLは通常の一般的なブロック要素がありますスパン、のような、IMG：DIV、P、H1、H2、H3、などは、インライン要素を持っています。

ブロック要素のプロパティ：なし内容が行全体を独占するだろうかは重要。主にページレイアウトのために使用。

プロパティインライン要素：要素自体のサイズだけは、彼の党を占有しません。選択したテキストのスタイルのための主要な設定。

ばかりページレイアウト、任意のデフォルトのスタイルのない独自のためのdivブロック要素。

スパンインラインスタイルのテキスト要素は、既定のスタイルで自分自身ないテキストを、選択するために使用することができます。

一般的に、唯一のブロック要素は、代わりにブロック要素を含むように、インライン要素を使用する、インライン要素を含みます。

要素は、独自に加えて、任意の要素を含めることができます。

p要素は、任意のブロック要素を含めることはできません。

块元素之div：<br>
    <div style="background-color: blueviolet">div 噫吁嚱，危乎高哉！蜀道之难，难于上青天！蚕丛及鱼凫，开国何茫然！</div>
    <div style="background-color: blue">div 噫吁嚱，危乎高哉！蜀道之难，难于上青天！蚕丛及鱼凫，开国何茫然！</div>
    <div style="background-color: chartreuse">div 噫吁嚱，危乎高哉！蜀道之难，难于上青天！蚕丛及鱼凫，开国何茫然！</div>
    <div style="background-color: chocolate; width: 300px;">div width=300px 噫吁嚱，危乎高哉！蜀道之难，难于上青天！蚕丛及鱼凫，开国何茫然！</div>
    <div style="background-color: blue; width: 500px;">div width=500px 噫吁嚱，危乎高哉！蜀道之难，难于上青天！蚕丛及鱼凫，开国何茫然！</div>
    块元素之p：<br>
    <p style="background-color: blue">p 尔来四万八千岁，不与秦塞通人烟。西当太白有鸟道，可以横绝峨眉巅。</p>
    <p style="background-color: chocolate">p 尔来四万八千岁，不与秦塞通人烟。西当太白有鸟道，可以横绝峨眉巅。</p>
    <p style="background-color: chartreuse">p 尔来四万八千岁，不与秦塞通人烟。西当太白有鸟道，可以横绝峨眉巅。</p>
    <p style="background-color: green; width: 300px;">p width=300px 尔来四万八千岁，不与秦塞通人烟。西当太白有鸟道，可以横绝峨眉巅。</p>
    <p style="background-color: red; width: 500px;">p width=500px 尔来四万八千岁，不与秦塞通人烟。西当太白有鸟道，可以横绝峨眉巅。</p>
    块元素之h(h1, h2, h3)：<br>
    <h1 style="background-color: red">h1 蜀道难</h1>
    <h2 style="background-color: green">h2 蜀道难</h2>
    <h3 style="background-color: blue">h3 蜀道难</h3>
    <h3 style="background-color: pink; width: 300px;">h3 width=300px 蜀道难</h3>
    <h3 style="background-color: yellow; width: 500px;">h3 width=500px 蜀道难</h3>
    内联元素之span：<br>
    <span style="background-color: red">西当太白有鸟道，可以横绝峨眉巅。</span>
    <span style="background-color: green">西当太白有鸟道，可以横绝峨眉巅。</span>
    <span style="background-color: blue">西当太白有鸟道，可以横绝峨眉巅。</span>
    <br>内联元素之a：<br>
    <a href="#" style="background-color: yellow">地崩山摧壮士死，然后天梯石栈相钩连。</a>
    <a href="#" style="background-color: blue">地崩山摧壮士死，然后天梯石栈相钩连。</a>
    <a href="#" style="background-color: red">地崩山摧壮士死，然后天梯石栈相钩连。</a>
    <a href="#" style="background-color: green">地崩山摧壮士死，然后天梯石栈相钩连。</a>
        web前端开发学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法
（详细的前端项目实战教学视频，PDF）

エフェクトの表示（Googleのブラウザでデフォルト）：

  以上の結果の図から、それを見ることができ、ブロック要素とインライン要素のいくつかは、例えば、デフォルトのスタイルを所有する：P、H1、H2、H3

pは、デフォルトのスタイルでされています：

p {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}

 h1はデフォルトのスタイルが付属しています：

h1 {
    display: block;
    font-size: 2em;
    margin-block-start: 0.67em;
    margin-block-end: 0.67em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
}

 H2は、デフォルトのスタイルが付属しています：

h2 {
    display: block;
    font-size: 1.5em;
    margin-block-start: 0.83em;
    margin-block-end: 0.83em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
}

 H3は、デフォルトのスタイルが付属しています：

h3 {
    display: block;
    font-size: 1.17em;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
}
web前端开发学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法
（详细的前端项目实战教学视频，PDF）

 もちろん、デフォルトのスタイルとbody要素が存在します。

body {
    display: block;
    margin: 8px;
}