1. ホーム
  2. Web制作
  3. HTML/Xhtml

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に変更します。