第 3 章 テキスト要素_html/css_WEB-ITnose

学習ポイント:

1. テキスト要素の概要

2. テキスト要素の分析

講師: Li Yanhui

この章では、いわゆる HTML5 のテキスト要素について主に説明します。テキスト要素構造と意味が一致するようにテキスト セットを変換することです。

1つ。テキスト要素の概要

HTML5 仕様では、要素の使用は要素のセマンティクスに完全に基づいて行われるべきであると述べられています。ただし、歴史的な遺産とユーザー第一の原則により、このセマンティクスははるかに緩やかになります。

要素名説明aハイパーリンクを生成br 強制改行wbr安全な改行 b 強調せずにテキストの一部にマークを付けます 強い は重要を意味します i は外国語または科学を意味します用語em は強調を意味します code はコンピュータコードを意味します var はプログラム出力を意味します samp は変数を表します kdb はユーザー入力を表します abbr は略語を表しますciteは他の作品のタイトルを示しますdel は削除されたテキストを意味しますs はテキストが確認されなくなったことを意味します dfn は用語定義を意味します マーク は、別のコンテキストに関連するコンテンツを意味します q は、他の場所から引用されたコンテンツを意味します

rpはruby要素と組み合わせて使用​​されます、括弧 rt は、ルビ要素と組み合わせて使用​​されます。括弧 ruby は、上にある発音記号を表します。表意文字の右側 bdoテキストの方向を制御小さいは小さいフォントコンテンツを意味しますsub は下付きフォント を意味しますsupは上付きフォントを意味しますtimeは時間または日付を意味しますu 強調せずにテキストの一部をマークします スパンセマンティクスを持たない普遍的な要素。通常は CSS の変更と組み合わせます。

上の表から、テキスト要素がまだたくさんあることがわかります。しかし実際には、実際のアプリケーションでは一般的に使用されるものはほんのわずかであり、そのほとんどは英語用です。

Ⅱ。テキスト要素の分析

1. はキーワードと製品名を表します

<b>HTML5</b>

説明: 要素の実際の機能は、太字にすることです。意味論的な観点から見ると、これはテキストの一部にマークを付けることを意味しますが、特別な強調や重要性を示すものではありません。たとえば、テキスト内の特定のキーワードや製品名などです。

2.重要なテキストを示します

<strong>HTML5</strong>

説明: 要素の実際の機能は、太字にすることです。意味論的な観点から見ると、重要なテキストを強調することを意味します。

3.
強制改行、安全な改行

<br>Thisabc<wbr>dkedkslakdj<wbr>fkdlsakd is apple.

説明: テキスト位置に
を入力すると改行が発生します。長い場合は、

4. は外国の語彙または科学用語を表します

<i>HTML5</i>

説明: 要素の実際の機能は傾斜することです。意味論的な観点から見ると、特別な強調や重要性を持たずに周囲のコンテンツを区別することを意味します。

5.強調するには

説明: 要素の実際の機能は、意味的には傾斜することです。テキストの一部。

6. は不正確または修正を意味します

<em>HTML5</em>

説明: の実際の機能は、意味的には不正確な削除を意味します。

7. はテキストの削除を意味します

<s>HTML5</s>

説明: 要素の実際の機能は、意味的には取り消し線です。文章。

8. はテキストに下線を引くことを意味します

<del>HTML5</del>

説明: 要素の実際の機能は、意味の観点から下線を追加することです。このテキストは強調されません。 。

9.テキストを追加します

<u>HTML5</u>

説明: 要素の実際の機能は、意味上の点から下線を追加する です。ビューでは、テキストを追加する役割を果たします。

10.小さいフォントを追加します

<ins>HTML5</ins>

説明: 要素の実際の機能は、テキストを 1 サイズ小さくすることです。意味的には、免責事項と説明文に使用されます。

11. _{^{上付き文字と下付き文字を追加します}}

<small>HTML5</small>

説明: _{要素と ^{要素の実際の機能は、数学的な上付き文字と下付き文字です。セマンティクスについても同様です。}}

12. は入力と出力を表します

説明: はプログラミング言語の変数を表します。プログラムまたはコンピュータを表します。 はユーザー入力を表します。これは英語のカテゴリに属する​​ため、効果を反映するには英語で lang="en" を使用する必要があります。

13. は略語を表します

<sub>5</sub><sup>5</sup>

説明: 要素は意味的には実質的な効果を持ちません。

14. は定義用語を表します

説明: 要素は意味的には単語または語句を説明するテキストの一部を表します。

15.他の場所からのコンテンツの引用

<code>HTML5</code><var>HTML5</var><samp>HTML5</samp><kdb>HTML5</kdb>

説明: 要素の実際の機能は、二重引用符のペアを追加することです。意味的には、他の場所から来たコンテンツを指します。

16.他の作品のタイトルを引用します

<abbr>HTML5</abbr>

解释：元素实际作用就是加粗。从语义上来看，表示引用其他作品的标题。

17.语言元素

<ruby>饕<rp>(</rp><rt>tāo</rt><rp>)</rp>餮<rp>(</rp><rt>ti&egrave;</rt><rp>)</rp> </ruby>

解释：用来为非西方语言提供支持。用来帮助读者掌握表意语言文字正确发音。比如：汉语拼音在文字的上方。但目前 Firefox 还不支持此特性。

18.设置文字方向

<bdo dir="rtl">HTML5</bdo>

解释：必须使用属性 dir 才可以设置，一共两个值：rtl（从右到左）和 ltr（从左到右）。一般默认是 ltr。还有一个元素也是处理方向的，由于是特殊语言的特殊效果，且主流浏览器大半不支持，忽略。

19.突出显示文本

<mark>HTML5</mark>

解释：实际作用就是加上一个黄色的背景，黑色的字；从语义上来看，与上下文相关而突出的文本，用于记号。

20.表示日期和时间

<time>2015-10-10</time>

解释：元素没有实际作用；从语义上来看，表示日期和时间。

21.表示一般性文本

<span>HTML5</span>

解释：元素没有实际作用；语义上就是表示一段文本，我们经常用它来设置 CSS 等操作。