HTMLで水平分割線を設定するにはどうすればよいですか? HTMLの水平分割線のコード例解説-htmlチュートリアル-php.cn

HTMLで水平分割線を設定するにはどうすればよいですか? HTMLの水平分割線のコード例解説

不言

リリース： 2018-10-31 11:29:36

オリジナル

42698 人が閲覧しました

フロントエンド Web ページの開発では、異なるドキュメントを区切るために水平分割線を使用する必要がある場合があります。これにより、Web ページ全体が美しく整然と見えるようになり、テキストの特定の段落の重要性も強調されます。では、Web ページの水平分割線をどのように実現するのでしょうか?この記事では、HTML に水平分割線を実装する方法を説明します。

HTML には

タグがあり、非常に簡単に水平線を設定できます。

タグの定義を簡単に見てみましょう。

HTML ページに水平線を作成します。文書を視覚的にパーツに分割します。

HTML では、

タグは終了タグのない単一のタグです。

それでは、

html
##
タグに水平線を設定する方法を詳しく説明していきます。 ;hr> 100%幅の水平分割線であり、

タグで設定した水平線は上下のコンテンツから一定の距離になります。

はブロックレベルの要素であるため、

は 1 行を占め、幅と高さを設定できます。

ラベルに水平分割線を設定するコード例を見てみましょう。

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <p >
           桃之夭夭，灼灼其华。之子于归，宜其室家。
           <hr width="300" align="left">
           桃之夭夭，有蕡其实。之子于归，宜其家室。
           <hr width="300" align="left">
           桃之夭夭，其叶蓁蓁。之子于归，宜其家人。
           <hr width="300" align="left">
        </p> 
    </body>
</html>

ログイン後にコピー

ラベルに水平分割線を設定すると、次のような効果が得られます。

HTMLで水平分割線を設定するにはどうすればよいですか? HTMLの水平分割線のコード例解説注: