ins タグと del タグの属性と使用法

ins タグと del タグの属性と使用法
insdel は、HTML 4.0 で導入され、文書の作成時に作成者が共同作業できるようにし、また、編集 (たとえば、作成者が一定期間にわたって文書をどのように変更したか、どのように考えたかを反映できます) とバージョン管理コンポーネント (ソフトウェアの助けを借りて、文書を特定の時点の状態に復元できます) を保持します。

ins 属性とdel 属性

cite : 属性値は、ドキュメントまたは情報リソースの URI です。この属性は、このドキュメントの説明が変更された理由を示すために使用されます。

datetime : 属性値は、変更が発生した日時を明確かつ詳細に説明します。


W3C による del と ins の説明:

INS と DEL は、文書の異なるバージョンに関して挿入または削除された文書のセクションをマークアップするために使用されます (例: 立法者が変更を確認する必要がある法案草案など)。

これら 2 つの要素は、ブロック レベル要素またはインライン要素のいずれか (両方ではない) として機能するという点で、HTML では珍しいものです。段落内に 1 つ以上の単語を含めたり、段落、リスト、表などの 1 つ以上のブロック レベル要素を含めたりすることができます。

del は文書内で削除されたテキスト コンテンツを定義し、ins は文書内の更新と修正を記述するために使用されます。del の既定のブラウザー スタイルは削除され、ins の既定のスタイルは下線付きです。これは、2 つの使用法をよく表しています。通常、2 つの要素は一緒に使用されます。

ins とdelの使用

HTML では、ins 要素と del 要素はブロックレベル要素またはインライン要素のいずれかになりますが、同時に両方になることはできません。したがって、段落内に 1 つまたは複数の単語を含めたり、段落 (p)、リスト (ul、ol、dl)、表 (table) などの複数のブロックレベル要素を含めたりすることができます。

<p>私は <del cite="http://www.baikelu.com/" datetime="20070515T192525+08:00">2</del><ins cite="http://www.baikelu.com/" datetime="20070515T192525+08:00">3</ins> セント</p>

<del title="たった今紛失" datetime="20070515T192525+08:00"><p>3 セントあります</p></del>

作成者は title 属性を使用して、挿入または削除された要素にコメントすることができ、ユーザー エージェント (ブラウザーなど) はこの情報をユーザーに表示できます。

<p><del title="たった今紛失" datetime="20070515T192525+08:00"><div><p>3 セントあります</p></div></del></p>

これは間違った書き方です。つまり、ins と del は、同時にブロックレベル要素とインライン要素の両方になることはできません。

ページ上のinsとdelの表示効果はCSSで制御できます。

<<:  JSにおけるnewの原理と実装について詳しく話しましょう

>>:  MySQL 5.7.33 インストール プロセスの詳細な図解

推薦する

ドロップダウンメニュー効果を実現するJavaScript

参考までに、JavaScriptを使用してドロップダウンメニューを実装します。具体的な内容は次のとお...

Yahooのフロントエンド最適化に関する35のルールについての簡単な説明

概要: 仕事でも面接でも、Web フロントエンドのパフォーマンスを最適化することは非常に重要です。で...

Nginx キャッシュ設定例

Web アプリケーションの開発とデバッグを行う際には、テストのためにブラウザのキャッシュをクリアした...

JS 関数とコンストラクタを簡単に理解する

目次1. 概要1.1 Functionコンストラクタを使用して関数を作成する1.2 機能と目的2. ...

Linuxルートの初期値を設定する方法の簡単な分析

Ubuntu ではデフォルトで root ログインが許可されていないため、初期の root アカウン...

Vue3はサイドナビゲーションテキストスケルトン効果コンポーネントをカプセル化します

Vue3プロジェクトのカプセル化サイドナビゲーションテキストスケルトン効果コンポーネント-グローバル...

MySQL マスタースレーブレプリケーション 読み書き分離の設定方法の詳細説明

1. 説明前回は、MySQL のインストールと構成、MySQL ステートメントの使用、MySQL デ...

CSS3 回転キューブ問題の詳細な説明

3D座標の概念要素が回転すると、その座標軸も一緒に回転します。注 -y方向の問題立方体を回転させる効...

MySQL 圧縮の使用シナリオとソリューション

導入圧縮トランスポート プロトコル、圧縮列ソリューション、圧縮テーブル ソリューションなど、MySQ...

Mysql: 定義者として指定されたユーザー ('xxx@'%') が存在しません 解決策

本日のプロジェクト最適化中に、MySQL に問題が発生しました: 定義者として指定されたユーザー (...

レスポンシブ原則のソースコード分析のVue解釈

目次初期化初期化状態()初期化プロパティ()初期化データ()観察する()オブザーバーリアクティブを定...

Vueでファジークエリを実装する方法の簡単な例

序文いわゆるファジークエリとは、ユーザーの完全な入力やすべての入力情報がなくてもクエリサービスを提供...

DockerコンテナにPythonアプリケーションをデプロイするプロセスの分析

シンプルなアプリケーションの展開1. ディレクトリ構造: └── Pythonpro #ディレクトリ...

div要素に丸い境界線を追加する方法

以下のように表示されます。 CSSコードコンテンツをクリップボードにコピー分割{境界線: 2px 固...

JavaScript Canvas で三目並べゲームを実装

この記事では、JavaScript Canvasで三目並べゲームを実装するための具体的なコードを参考...