HTML5 にはどのような新しいグローバル属性が追加されますか?-フロントエンドQ&A-php.cn

ホームページ

ウェブフロントエンド

フロントエンドQ&A

HTML5 にはどのような新しいグローバル属性が追加されますか?

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Dec 21, 2021 pm 02:36 PM

html

属性: 1. contenteditable 属性; 2. contextmenu 属性; 3. "data-*" 属性; 4. ドラッグ可能な属性; 5. ドロップゾーン属性; 6. 隠し属性; 7. スペルチェック属性; 8. 翻訳属性。

HTML5 にはどのような新しいグローバル属性が追加されますか?

このチュートリアルの動作環境: Windows 10 システム、HTML5 バージョン、Dell G3 コンピューター。

HTML5 にはどのような新しいグローバル属性が追加されますか?

HTML では、グローバル属性はすべての HTML 要素で使用できる属性です。

HTML5 には 8 つの新しいグローバル属性があります。以下でそれぞれを見てみましょう。

1. contenteditable 属性

contenteditable 属性は、要素のコンテンツが編集可能かどうかを指定します。

注: contenteditable 属性が要素に設定されていない場合、要素は親要素から継承します。

構文は次のとおりです:

<element contenteditable="true|false">

例は次のとおりです:

<html>
<head> 
<meta charset="utf-8"> 
<title>123</title> 
</head>
<body>
<p contenteditable="true">这是一个段落。是可编辑的。尝试修改文本。</p>
</body>
</html>

出力結果:

HTML5 にはどのような新しいグローバル属性が追加されますか?

# 2、 contextmenu 属性

現在、Firefox ブラウザのみが contextmenu 属性をサポートしています。

contextmenu 属性は、要素のコンテキストメニューを指定します。ユーザーが要素を右クリックすると、コンテキストメニューが表示されます。 /p>

contextmenu 属性の値は、開く必要がある要素の ID です。

構文:

<element contextmenu="menu_id">

例は次のとおりです:

<body>
<p contextmenu="supermenu">本段落拥有一个名为 "supermenu" 的上下文菜单。这个菜单会在用户右键单击该段落时出现。</p>  
<menu id="supermenu">
  <command label="Step 1: Write Tutorial" onclick="doSomething()">
  <command label="Step 2: Edit Tutorial" onclick="doSomethingElse()">
</menu>
<p><b>注意：</b>目前的主流浏览器都不支持 contextmenu 属性。</p>
</body>

3. "data-*" 属性

すべての主要なブラウザdata-* 属性をサポートします。

data-* 属性は、プライベートページの背後に適用されるカスタムデータを保存するために使用されます。

data-* 属性は、すべての HTML 要素にデータを埋め込むことができます。

カスタマイズされたデータにより、ページのインタラクティブなエクスペリエンスが向上します (Ajax を使用したり、サーバー上のデータをクエリしたりする必要はありません)。

data-* 属性は次の 2 つの部分で構成されます。

属性名には大文字を含めることはできません。data- の後には少なくとも 1 文字が必要です。この属性には任意の文字列を指定できます。

注: カスタム属性プレフィックス「data-」はクライアントによって無視されます。

構文は次のとおりです:

<element data-*="somevalue">

例は次のとおりです:

<script>
function showDetails(animal)
{
var animalType = animal.getAttribute("data-animal-type");
alert("The " + animal.innerHTML + " is a " + animalType + ".");
}
</script>
</head>
<body>
<h1 id="物种">物种</h1>
<p>点击一个物种，看看它是什么类型：</p>
<ul>
  <li onclick="showDetails(this)" id="owl" data-animal-type="bird">Owl</li>
  <li onclick="showDetails(this)" id="salmon" data-animal-type="fish">Salmon</li>  
  <li onclick="showDetails(this)" id="tarantula" data-animal-type="spider">Tarantula</li>  
</ul>
</body>

4. ドラッグ可能属性

ドラッグ可能属性は次の内容を指定します。要素をドラッグできるかどうか。

ヒント: リンクと画像はデフォルトでドラッグ可能です。

構文は次のとおりです:

<element draggable="true|false|auto">

例は次のとおりです:

<style type="text/css">
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script type="text/javascript">
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
ev.preventDefault();
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br />
<p id="drag1" draggable="true" ondragstart="drag(event)">这是一段可移动的段落。请把该段落拖入上面的矩形。</p>
</body>

出力結果:

HTML5 にはどのような新しいグローバル属性が追加されますか?

## 5.dropzone 属性

dropzone 属性をサポートする主流ブラウザはありません。

dropzone 属性は、ドラッグされたデータが要素にドロップされたときに、そのデータがコピー、移動、またはリンクされるかどうかを指定します。

構文は次のとおりです:

<element dropzone="copy|move|link">

例は次のとおりです:

<div dropzone="copy"></div>

6. 隠し属性

隠し属性は次の内容を指定します。要素が非表示になっていること。

非表示の要素は表示されません。

この属性を使用すると、要素は非表示になります。

hidden 属性は、特定の条件 (チェックボックスをオンにするなど) が満たされた場合にのみユーザーが要素を表示できるように設定できます。その後、JavaScript を使用して非表示属性を削除し、要素を表示できるようになります。

構文は次のとおりです:

<element hidden>

例は次のとおりです:

<body>
<p hidden="hidden">这是一段隐藏的段落。</p>
<p>这是一段可见的段落。</p>
</body>

出力結果:

HTML5 にはどのような新しいグローバル属性が追加されますか? # #7、spellcheck 属性

spellcheck 属性は、要素の内容をスペルチェックするかどうかを指定します。

次のテキストはスペルチェックできます:

タイプテキスト (非パスワード) の入力要素の値 textarea 要素の値 editable 要素の値

構文

<element spellcheck="true|false">

の例は次のとおりです。

<body>
<p contenteditable="true" spellcheck="true">这是可编辑的段落。请试着编辑文本。</p>
First name: <input type="text" name="fname" spellcheck="true">
<p><strong>注意：</strong> Internet Explorer 9 及更早 IE 版本不支持 spellcheck 属性。</p>
</body>

出力結果:

HTML5 にはどのような新しいグローバル属性が追加されますか? 8, translation 属性

現在、translate 属性をサポートする主流ブラウザはありません。

translate 属性は、要素のコンテンツを翻訳するかどうかを指定します。

テスト: Google 翻訳ツールを使用して、次の単語「アイスクリーム」がどのようになるかを確認します:

ここでは、translate="no": アイスクリームを使用します。

ここでclass="notranslate": アイスクリームを使用します。

ヒント: 代わりに class="notranslate" を使用してください。

文法

<element translate="yes|no">

例は次のとおりです:

<p translate="no">这个段落不能翻译。</p>
<p>这个段落可以被翻译</p>

推奨チュートリアル: "

html ビデオチュートリアル

以上がHTML5 にはどのような新しいグローバル属性が追加されますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

Reactのエコシステムのサイズ：複雑な風景をナビゲートしますApr 28, 2025 am 12:21 AM

tonavigatereAct'somplexEcosystemively、理解を理解し、認識していることを認識していることを認識しているandweakness、およびIntegreatemtoemtoemtoemtemtemtemtemtemtemtemtemtemtemtemtemtemtemtemtemtemtemtemtemtemtemtemtemtemtemtemtemtemotereconceptate、その後、勾配内で測定する

どのようにReactがキーを使用してリスト項目を効率的に識別しますApr 28, 2025 am 12:20 AM

RactuseSeSeSeSeSeSeSeSpiffictifideidifiedItemsbyprovidingastableidentitytoeeedelement.1）keysallowReactTotTotTotTotTotTotTotTotTotTotTotTotTotTotTotRACKESOUTRE-RENDERINGTHEENTERELIST.2）chookiniqueandstablekeys、avolididingArrayIndices.3）reforceAsificlySificlySiflovedobrovesiondanc

Reactにおける重要な問題のデバッグ：問題の特定と解決Apr 28, 2025 am 12:17 AM

KeysinReactarecrucialforoptimizingTherenderingProcessandDynamicListseffective.tospotandfixkey-relatedissues：1）adduniquekeystolistiTemstoavoidsissusisus、2）useuniqueidideididifiersfromdateadceSofofordiceys、3）

Reactの一方向データバインディング：予測可能なデータフローの確保Apr 28, 2025 am 12:05 AM

Reactの一元配置データバインディングにより、データが親コンポーネントから子コンポーネントに流れることが保証されます。 1）データは単一に流れ、親コンポーネントの状態の変化は子コンポーネントに渡すことができますが、子コンポーネントは親コンポーネントの状態に直接影響することはできません。 2）この方法により、データフローの予測可能性が向上し、デバッグとテストが簡素化されます。 3）制御されたコンポーネントとコンテキストを使用することにより、一方向のデータストリームを維持しながら、ユーザーの相互作用とコンポーネント間通信を処理できます。

Reactコンポーネントでキーを選択して管理するためのベストプラクティスApr 28, 2025 am 12:01 AM

keysinReactarecrucialforeffiencedomupdatessandRecOnciliation.1）選択可能でユニークな、そして類似のフルキーなど、Itemids.2）fornestedLists、useuniquekeysateachlevel.3）

ReactアプリケーションのuseState（）を使用してパフォーマンスを最適化しますApr 27, 2025 am 12:22 AM

useState（）uscrucialforoptimizingRectperformanceduetuitsoitsimpactonre-rendersandupdates.tooptimize：1）useusecallbacktomoize funtionsandpreventunnederireRenders.2）

コンテキストとuseState（）を使用してコンポーネント間で状態を共有するApr 27, 2025 am 12:19 AM

コンテキストとユーザーを使用して、大規模なReactアプリケーションで州の管理を簡素化できるため、状態を共有します。 1）プロップドリルを減らす、2）より明確なコード、3）グローバルな状態を管理しやすい。ただし、パフォーマンスのオーバーヘッドと複雑さのデバッグに注意してください。コンテキストと最適化技術の合理的な使用は、アプリケーションの効率と保守性を向上させることができます。

Reactの仮想DOMアップデートに対する誤ったキーの影響Apr 27, 2025 am 12:19 AM

誤ったキーを使用すると、Reactアプリケーションでパフォーマンスの問題や予期しない動作を引き起こす可能性があります。 1）キーはリスト項目の一意の識別子であり、Virtual Domを効率的にReactの更新を支援します。 2）同じまたは非ユニークなキーを使用すると、リスト項目が再注文され、コンポーネント状態が失われます。 3）キーとして安定した一意の識別子を使用すると、パフォーマンスを最適化し、完全な再レンダリングを回避できます。 4）ESLINTなどのツールを使用して、キーの正しさを確認します。キーを適切に使用すると、効率的で信頼性の高い反応アプリケーションが保証されます。

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

SublimeText3 英語版

推奨: Win バージョン、コードプロンプトをサポート!

PhpStorm Mac バージョン

最新(2018.2.1)のプロフェッショナル向けPHP統合開発ツール

SecLists

SecLists は、セキュリティテスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティテスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティテストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジングペイロード、機密データパターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテストマシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。