ホームページ > ウェブフロントエンド > htmlチュートリアル > HTMLのテキストに取り消し線を追加するにはどうすればよいですか?取り消し線を付ける2つの方法(例)

HTMLのテキストに取り消し線を追加するにはどうすればよいですか?取り消し線を付ける2つの方法(例)

青灯夜游
リリース: 2018-10-09 14:22:07
オリジナル
19001 人が閲覧しました

大手ショッピング モールの Web サイトを閲覧すると、必ず特定の商品の元の価格マークが表示され、その後、現在プロモーション中であることを示すために元の価格に明らかな取り消し線が追加されていると思います。現在の価格がそのままの価格に変更され、ユーザーに直感的な違いを提供し、ユーザーの購入を促します。では、このような取り消し線効果はどのようにしてテキストに追加されるのでしょうか?この章では、HTML のテキストに取り消し線を追加する 2 つの方法を紹介します。困っている友人は参考にしていただければ幸いです。

まず、HTML ページのテキストに取り消し線効果を追加する 2 つの方法を見てみましょう。

html タグ要素はテキストに取り消し線効果を実装します。 ;

html label 要素はテキストに取り消し線を追加する効果を実現します。

以下では、これら 2 つのメソッドがテキストに取り消し線を追加する効果を実現する方法を詳しく紹介します。簡単に例を挙げて紹介します。

html タグ

タグは取り消し線のテキスト定義で定義できます。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>html <strike> 标签</title>
	</head>
	<body>
		<p><strike>这是测试代码,被删除了</strike></p>
	</body>
</html>
ログイン後にコピー

レンダリング:

HTMLのテキストに取り消し線を追加するにはどうすればよいですか?取り消し線を付ける2つの方法(例)

##例に示すように、 タグ内にテキストを追加する限り、目的の内容を実現できます。効果。 タグは、同じ効果で タグに省略できます。

Netscape と Internet Explorer は両方とも、これら 2 つの書き込み方法をサポートしています。

注: タグ ( タグ) は HTML 4 および XHTML では非推奨となっており、遅かれ早かれ使用されなくなります。

取り消し線効果を実現するには、 タグを使用するのではなく、 タグを使用することをお勧めします。

html タグ

ドキュメント内で削除されたテキストを定義します。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>html <del> 标签</title>
	</head>
	<body>
		<p>原价:<del>20</del>,现在促销价:10</p>
	</body>
</html>
ログイン後にコピー
レンダリング:


HTMLのテキストに取り消し線を追加するにはどうすればよいですか?取り消し線を付ける2つの方法(例)

例に示すように、 タグの使用は と同じです。簡単で便利なタグ。また、すべての主要なブラウザは タグをサポートしています。

注: ドキュメント内の更新と修正を説明するには、 タグとともに使用してください。

要約: 上記がこの記事の全内容です。実際、上記の 2 つの方法を使用して取り消し線を追加するだけでなく、CSS を使用して取り消し線を実現し、同時に取り消し線のスタイルを設定することもできます。 。フォローアップ記事 [

CSS に取り消し線を追加するには? css text-decoration属性設定取り消し線(コード例) 】では、cssを使って取り消し線のスタイルを設定する方法を紹介します。これが皆さんの学習に役立つことを願っています。その他の関連チュートリアルについては、 HTML ビデオ チュートリアル をご覧ください。

関連する推奨事項:

php 公共福祉トレーニング ビデオ チュートリアル

以上がHTMLのテキストに取り消し線を追加するにはどうすればよいですか?取り消し線を付ける2つの方法(例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート