htmlカスタムタグの使用方法
2022-02-05 15:35:47
カスタムタグは、xmlファイルではもちろん、htmlファイルでも自由に使うことができますが、いくつかの注意点があります。
html>タグのxmlns属性は必ず設定する必要があります。例えば、<html xmlns:article>のように宣言します。
これは、htmlファイルにはデフォルトの"namespace"があり、<div>,<p>などのタグはこのデフォルトの"namespace"に入っているからです。
明らかに、このデフォルトの "namespace" には、私たちの "custom tags" は含まれていませんので、私たち自身の "namespace" を定義しなければなりません。 そこで、私たちは独自の "namespace" を定義し、このカスタム "namespace" に "custom label" を配置しなければなりません。
試した結果、カスタム名前空間は中国語では機能しません。例えば、次のように宣言すると、 <html xmlns:namespace> は、間違っています。
カスタムタグを使用する場合は、<custom tag>と書かずに、<namespace:custom tag>のような形で記述する必要があります。
つまり、カスタムタグの名前の前には、それが存在する"namespace"を付けなければならないのです。
カスタムタグのスタイルは、<style>タグの中で設定するか、使用時にstyle属性を設定する(インライン設定)かのいずれかです。
例えば、<style>タグで設定します。
<style type="text/css">
article:Article body{border:1px solid #ccc;background-color:#efefef;font-weight:bold;}のようになります。
</style>
なお、<style>タグでスタイルを設定する場合は、"namespace" と ":" の間に "\" を追加し、例えば上記は article:article body ではなく article:article body と記述してください。
カスタムタグを使用する場合は、style 属性を設定します。
<article:Article title style="border:1px solid #ccc;"以下、記事のタイトルです</article:Article title>
例
<!DOCTYPE html PUBLIC -/W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>。
<html xmlns:article>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title> カスタムタグを使用する</title>
<style type="text/css">
article:Article body{display:block; border:1px solid #ccc; background-color:#efefef; color:#00a;}.
</style>
</head>
<body>
<article:Article title style="display:block; border:1px solid red; background-color:#FFF5F4; text-align:center; color:#f00;">
以下は記事のタイトルです。
</article:記事タイトル>
<記事:記事本文>
以下は、記事の本文です。
</article:Body of the article>
</body
</html>
注:カスタムタグのデフォルトの表示値はinlineですが、この場合はblockに変更します。
html>タグのxmlns属性は必ず設定する必要があります。例えば、<html xmlns:article>のように宣言します。
これは、htmlファイルにはデフォルトの"namespace"があり、<div>,<p>などのタグはこのデフォルトの"namespace"に入っているからです。
明らかに、このデフォルトの "namespace" には、私たちの "custom tags" は含まれていませんので、私たち自身の "namespace" を定義しなければなりません。 そこで、私たちは独自の "namespace" を定義し、このカスタム "namespace" に "custom label" を配置しなければなりません。
試した結果、カスタム名前空間は中国語では機能しません。例えば、次のように宣言すると、 <html xmlns:namespace> は、間違っています。
カスタムタグを使用する場合は、<custom tag>と書かずに、<namespace:custom tag>のような形で記述する必要があります。
つまり、カスタムタグの名前の前には、それが存在する"namespace"を付けなければならないのです。
カスタムタグのスタイルは、<style>タグの中で設定するか、使用時にstyle属性を設定する(インライン設定)かのいずれかです。
例えば、<style>タグで設定します。
コピーコード
コードは以下の通りです。
<style type="text/css">
article:Article body{border:1px solid #ccc;background-color:#efefef;font-weight:bold;}のようになります。
</style>
なお、<style>タグでスタイルを設定する場合は、"namespace" と ":" の間に "\" を追加し、例えば上記は article:article body ではなく article:article body と記述してください。
カスタムタグを使用する場合は、style 属性を設定します。
コピーコード
コードは以下の通りです。
<article:Article title style="border:1px solid #ccc;"以下、記事のタイトルです</article:Article title>
例
コピーコード
コードは以下の通りです。
<!DOCTYPE html PUBLIC -/W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>。
<html xmlns:article>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title> カスタムタグを使用する</title>
<style type="text/css">
article:Article body{display:block; border:1px solid #ccc; background-color:#efefef; color:#00a;}.
</style>
</head>
<body>
<article:Article title style="display:block; border:1px solid red; background-color:#FFF5F4; text-align:center; color:#f00;">
以下は記事のタイトルです。
</article:記事タイトル>
<記事:記事本文>
以下は、記事の本文です。
</article:Body of the article>
</body
</html>
注:カスタムタグのデフォルトの表示値はinlineですが、この場合はblockに変更します。
関連
-
html+css+js ナビゲーションバー用スクロールグラデーション効果
-
div+css3を使用したグラデーション背景のボタンのコード例
-
Element UIでオートサイズテキストエリアの高さを設定する方法
-
FLOW CHARTとUI FLOWの違いについて
-
divタグの要素margin-topが機能しない場合の解決方法
-
htmlにおけるhiddenフィールドの役割とその使用例
-
HTMLのFormのmethod属性の使い方を紹介します。
-
HTMLでのLiタグの使用例
-
Baiduの入力メソッドオープンAPIは、使用を移植するために自由であると主張する
-
テーブルの枠線/セルの区切り線を非表示にする方法
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン