テキストの書式設定は、現代のインターネット Web ページの重要な部分です。テキストベースの Web ブラウザーの使用に制限されている場合でも、サイズや方向などのテキストの書式設定は利用できました。最新の HTML 改訂では、テキストの外観を好みに合わせるために使用できる HTML タグが大量にあります。
HTML タグを使用したテキストの書式設定
以下では、テキストの書式設定に使用されるいくつかの重要な HTML タグについて説明します。
1. HTML でテキストを太字に書式設定する
HTML には、テキストを太字に設定するための 2 つの異なるタグがあります。 1 つは もう 1 つは です。どちらも同様の出力を生成します。 タグは物理タグであり、テキストを太字で表示するだけであり、ブラウザーに重要な値を追加するものではありません。
例
コード:
<!DOCTYPE>
<html>
<body>
<p> <b>Here is some text in bold. </b></p>
</body>
</html>
ログイン後にコピー
出力:
一方、タグは論理タグとみなされ、タグ内のテキストに論理的な重要性があることをブラウザに通知するために使用されます。
例
コード:
<!DOCTYPE>
<html>
<body>
<p> <strong>This is an important content formatted using the strong tag </strong>, and this is just
normally formatted text</p>
</body>
</html>
ログイン後にコピー
出力:
2. HTML5 でテキストを斜体に設定する
テキストを太字に設定するのと同じように、 を使用できます。タグと HTML5 でテキストを斜体に設定するタグ。
の使用 を使用する場合と同様に、テキストを斜体で物理的に表示し、タグ を使用します。表示上ではテキストを斜体で表示すると同時に、意味的に重要であることをブラウザーに知らせます。
例
コード:
<!DOCTYPE>
<html>
<body>
<p> <i> This is the first para in italic text. </i></p>
<p> <em> This content is made italics with the em tag</em>, This is normal text </p>
</body>
</html>
ログイン後にコピー
出力:
3. HTML コードによるテキストの強調表示
ハイライト効果でテキストを強調表示したい場合は、タグ を使用します。使用できます。デフォルトの CSS では、このタグによりテキストの背景が黄色になり、そのテキストに訪問者の注意を引きやすくなります。
例
コード:
<!DOCTYPE>
<html>
<body>
<h3> This text uses <mark> Mark</mark> tag to highlight text on the page </h3>
</body>
</html>
ログイン後にコピー
出力:
4. HTML 内のテキストに下線を付ける
HTML タグ テキストに下線を追加するために使用できます。青いテキストに下線を付けると、訪問者がテキストがリンクであると混乱する可能性があるため、使用しないように注意してください。
例
コード:
<!DOCTYPE>
<html>
<body>
<p> <u> This is Text with underline tag. </u> </p>
</body>
</html>
ログイン後にコピー
出力:
5.取り消し線付きのテキスト
テキストに水平線を引く必要がある場合は、 タグを付けます。使用できます。溺れている線は細いので、交差しているテキストも簡単に読むことができます。
例
コード:
<!DOCTYPE>
<html>
<body>
<p> <strike> Here is a sentence with strike through text </strike>. </p>
</body>
</html>
ログイン後にコピー
出力:
6. HTML で等幅フォントで記述する
等幅の使用は、何かを引用したい場合やブラウザにコードを表示したい場合に便利です。等幅コードは、名前が示すように、すべての文字の幅を同じにします。ブラウザで取得するには、 を使用する必要があります。タグ。
例
コード:
<!DOCTYPE>lt;html>
<body>
<p> This is normal text. <tt>This is some sample text in monospace fonts, neat. </tt> </p>
</body>
</html>
ログイン後にコピー
出力:
7. HTML の下付きテキスト
数学や化学では、多くの場合、添え字の使用が絶対条件となります。一般的な文章を書く場合にも、下付きテキストの使用が適切な状況に遭遇することがあります。 HTML では、 の下にあるテキストはすべてタグはブラウザ内で添え字として機能します。
例
コード:
<!DOCTYPE>
<html>
<body>
<p> This is normal text <sub>Notice something different with this text? </sub> </p>
</body>
</html>
ログイン後にコピー
出力:
8. HTML5 で削除されたテキスト
タグは、テキスト内のテキストが削除されることをブラウザに伝える論理的な方法として使用されます。ユーザーにとって、表示されるテキストは取り消し線タグのタグと同じであり、取り消し線の書式で表示されることを意味します。
例
コード:
<!DOCTYPE>
<html>
<body>
<p> This is normal text <del> This is text between del tag. </del> </p>
</body>
</html>
ログイン後にコピー
出力:
9. Superscript Text formatting in HTML5
Text in tag is shown in superscript. This is useful in math, chemistry and other places where math is involved. You can use the tag when citing with adding in-page links with too.
Example
Code:
<!DOCTYPE>
<html>
<body>
<p> This is Normal text<sup> This text is in superscript. </sup> </p>
</body>
</html>
ログイン後にコピー
Output:
10. Making Text size larger with HTML formatting
In cases where you need some text in a larger size on the screen, but you don’t want to use a heading or increase the font size with a tag, use content between this tag will be displayed in noticeably larger text size.
Example
Code:
<!DOCTYPE>
<html>
<body>
<p> This is Normal text <big> This text in in larger size. </big> </p>
</body>
</html>
ログイン後にコピー
Output:
11. Making Text smaller with HTML
Like the tag , you can use to make text smaller on the screen without using CSS or headings.
Example
Code:
<!DOCTYPE>
<html>
<body>
<p> This is Normal text <small> the size of this text is smaller </small> </p>
</body>
</html>
ログイン後にコピー
Output:
Conclusion
Now that you have learned how the formatting of text in HTML works, you should be able to design pages with correct and professional-looking text layout and formatting. It would help if you used normal text and formatting where possible; using custom formatting only when needed gives your pages a neat look. The normal text size is important too, too small, and the readably will be affected negatively, and if it is too large, there will be less information on the screen at once.
以上がHTML テキストの書式設定タグの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
