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 インストール プロセスの詳細な図解

推薦する

MySQL の int、char、varchar のパフォーマンスを比較する

インターネットには、真実のように見える「噂」がたくさんあります。もちろん、悪意のあるものではありませ...

MySQL マスタースレーブレプリケーションでエラーをスキップする方法

1. 従来のbinlogマスタースレーブレプリケーション、エラー報告をスキップする方法 mysql&...

CentOS 8 / RHEL 8 に VirtualBox 6.0 をインストールするための詳細なチュートリアル

VirtualBox は、技術者が異なる種類の複数の仮想マシン (VM) を同時に実行できるようにす...

Docker ロード後にイメージ名が none になる問題の解決方法

最近、docker load -i コマンドを使用してイメージ パッケージを圧縮した後、イメージ名と...

Vue+element+springboot でファイルダウンロードの進行状況バー表示機能を実装する例

目次1. 需要背景2. 最適化計画3. 具体的な実施3.1 フロントエンドコード3.2 背景コード4...

HTMLでは、div内のコンテンツが次のサイズを超えたときに自動的にスクロールバーが表示されるように設定します。

HTML ページでは、div 内のコンテンツが制限を超えた後に自動的にスクロール バーを表示する必要...

WeChatアプレットはシンプルなチャットルームを実装します

この記事では、WeChatアプレットの具体的なコードを共有し、簡単なチャットルームを実装します。具体...

Docker可視化管理ツールであるDocker UIの使用

1. DockerUIの紹介DockerUI は Docker API をベースとしており、Dock...

Docker /var/lib/docker/aufs/mnt ディレクトリのクリーニング方法

会社のサービスはdockerを使用しており、ディスクマンが見つかりました。その後、次のコマンドを実行...

nginx での listen ディレクティブの例の分析

プロットレビュー前回の記事では、ロケーション命令の解析プロセスを分析しました。この内容を簡単に確認し...

JavaScript 基礎シリーズ: 関数とメソッド

目次1. 関数とメソッドの違い2. 良い関数の書き方2.1 正確な命名2.1.1 関数の命名2.1....

JavaScriptのプロトタイプオブジェクトを徹底的に理解しましょう

目次1. プロトタイプとは何ですか? 1.1 関数プロトタイプオブジェクト1.2 コンストラクタを使...

MySQL インデックス障害の上位 10 の問題の概要

目次背景1. クエリ条件に「or」が含まれているため、インデックスが失敗する可能性があります。 2....

ウェブページの読み込み速度を上げる簡単なヒント

Web ページの読み込み速度は、Web サイトの品質を評価するための重要な指標です。その理由は、ほと...

MySQL 8の新機能ウィンドウ関数の役割

MySQL 8.0 の新機能は次のとおりです。 Unicode 9.0 をすぐに完全にサポートウィン...