学習ポイント:
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. はキーワードと製品名を表します
説明: 要素の実際の機能は、太字にすることです。意味論的な観点から見ると、これはテキストの一部にマークを付けることを意味しますが、特別な強調や重要性を示すものではありません。たとえば、テキスト内の特定のキーワードや製品名などです。
2.重要なテキストを示します
<strong>HTML5</strong>
ログイン後にコピー
説明: 要素の実際の機能は、太字にすることです。意味論的な観点から見ると、重要なテキストを強調することを意味します。
3.
強制改行、安全な改行
<br>Thisabc<wbr>dkedkslakdj<wbr>fkdlsakd is apple.
ログイン後にコピー
説明: テキスト位置に
を入力すると改行が発生します。長い場合は、
4. は外国の語彙または科学用語を表します
説明: 要素の実際の機能は傾斜することです。意味論的な観点から見ると、特別な強調や重要性を持たずに周囲のコンテンツを区別することを意味します。
5.強調するには
説明: 要素の実際の機能は、意味的には傾斜することです。テキストの一部。
6. は不正確または修正を意味します
説明: の実際の機能は、意味的には不正確な削除を意味します。
7. はテキストの削除を意味します
説明: 要素の実際の機能は、意味的には取り消し線です。文章。
8. はテキストに下線を引くことを意味します
<del>HTML5</del>
ログイン後にコピー
説明: 要素の実際の機能は、意味の観点から下線を追加することです。このテキストは強調されません。 。
9.テキストを追加します
説明: 要素の実際の機能は、意味上の点から下線を追加する です。ビューでは、テキストを追加する役割を果たします。
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è</rt><rp>)</rp> </ruby>
ログイン後にコピー
解释:用来为非西方语言提供支持。
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 等操作。