HTMLでカスタムタグを使用する方法

カスタムタグは XML ファイルと HTML ファイルで自由に使用できますが、いくつか注意すべき点があります。
<html> タグの xmlns 属性を設定する必要があります。たとえば、次のように宣言できます: <html xmlns:article>。
これは、HTML ファイルにはデフォルトの「名前空間」があり、<div> や <p> などのタグがこのデフォルトの「名前空間」内にあるためです。
明らかに、このデフォルトの「名前空間」には「カスタムタグ」は含まれていないため、自分で「名前空間」を定義し、このカスタム「名前空間」に「カスタムタグ」を配置することしかできません。
試してみたところ、カスタム名前空間では中国語を使用できないようです。たとえば、宣言 <html xmlns:namespace> は間違っています。カスタムタグを使用する場合は、<custom tag> ではなく <namespace:custom tag> の形式を使用する必要があります。
つまり、カスタムタグの名前は「名前空間」を示す必要があります。
カスタムタグのスタイルは、<style> タグ内で設定することも、使用時にスタイル属性を設定することで設定することもできます (インライン設定)。
<style> タグで設定します。例:

コードをコピー

コードは次のとおりです。

<スタイルタイプ="text/css">
article\:記事のテキスト{border:1px solid #ccc;background-color:#efefef;font-weight:bold;}
</スタイル>

コードをコピー

コードは次のとおりです。

<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:記事>
<ヘッド>
<meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=gb2312" />
<title>カスタムタグの使用</title>
<スタイルタイプ="text/css">
article\:記事本文{display:block; border:1px solid #ccc; background-color:#efefef; color:#00a;}
</スタイル>
</head>
<本文>
<article:Article titlestyle="display:block; border:1px solid red; background-color:#FFF5F4; text-align:center; color:#f00;">
記事のタイトルはこちら
</article:記事タイトル>
<article:記事本文>
記事の本文はこちら
</article:記事本文>
</本文
</html>

注: カスタムラベルのデフォルトの表示値はインラインです。この例では、ブロック表示に変更されています。

<<: Vue から React への変換入門ガイド

>>: MySQL killコマンドの実行原理の詳細な説明