[HTML 入門] レッスン 4 - 改行、分割線、HTML コメント

【HTML入門】レッスン4 - 改行、分割線、HTMLコメント

2024-07-12

このコーナーでは引き続き、改行や横行区切り、コメント（htmlコメント）など、HTMLの入門知識についてお話していきます。

1 つの改行

2 水平線を分割する

3 つの HTML コメント

1 つの改行

htmlは次のように分かれていますブロック要素そしてインライン要素。このセクションでは、これらの要素については説明せずに、まず改行について説明します。なぜブロック要素について説明するのでしょうか? それは後で理解できるかもしれません。

改行は br タグです。これは、コンテンツの 2 つの部分を区切ることができ、途中で改行が生成されることを意味します。


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>我的第一个网页</title>
        <style type="text/css">
            
        </style>
    </head>
    <body>
        <p>这是第一段内容</p>
        <p>这是第二段内容</p>
    </body>
</html>

上記の効果を見てみましょう。p タグ自体はブロック要素であり、fast 要素は、2 つの p 要素を記述するとそれらが折り返されることを意味するためです。ただし、p 要素がラップされた後、中央に生成される高さは一定であり、いくつかのデフォルト設定によって制御されます。

では、2 つのブロック要素間の改行スペースを大きくしたい場合はどうすればよいでしょうか?それともテキストの途中に改行効果が必要ですか?あなたはこれを行うことができます：


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>我的第一个网页</title>
        <style type="text/css">
            
        </style>
    </head>
    <body>
        <p>这是<br/>第一段内容</p>
        <br/>
        <p>这是第二段内容</p>
    </body>
</html>

上の図に示すように、2 つの p タグは中央に大きな間隔を置く効果があります。さらに、最初の p タグ内のテキストにも行折り返しの効果があります。

2 水平線を分割する

これは大学の公式ウェブサイトです。真ん中の水平線を見てください。水平線または分割水平線と呼ばれます。彼はそれを達成するためにさまざまな方法を使用できるため、その 1 つがこのセクションで説明されている方法です。タグ名は hr です。コードの効果を見てみましょう。


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>我的第一个网页</title>
        <style type="text/css">
            
        </style>
    </head>
    <body>
        <p>这是第一段内容</p>
        <hr/>
        <p>这是第二段内容</p>
    </body>
</html>

これにより、水平線の分割が作成されます。もちろん、図の例のような効果を実現するには、スタイルコントロールを追加するか、他のソリューションを使用する必要があります。

3 HTMLコメント

開発者として、コメントを書くことは非常に重要です。コードにコメントがないと、後で見たときに他の人がコードを理解できなくなりやすくなります。また、コメントを書かないと、コードを書いたときに他の人がコードを理解できなくなりやすくなります。他の人に渡されたり、見るのが非常に困難です。

さらに、コメントは開発者が自分自身を読むために使用する一種のコンテンツであり、機械が読み取るためやブラウザに表示するためのものではないため、コメントは Web ページには表示されません。


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>我的第一个网页</title>
        <style type="text/css">
            
        </style>
    </head>
    <body>
        <!-- 这是第一行代码的注释内容 -->
        <p>这是第一段内容</p>
        <hr/>
        <!-- 这里是第二行哦 -->
        <p>这是第二段内容</p>
    </body>
</html>

上記のコードと同様に、開発者に自分自身について何かを伝えるために、コードの 2 行にそれぞれコメントを追加しました。ただしブラウザ上では表示されません。

技術共有