1. ホーム
  2. html

[解決済み] <html xmlns="http://www.w3.org/1999/xhtml">」は何をするのですか?

2022-01-29 11:03:41

質問事項

私のウェブサイトで何が起こっているのか信じられません。この行を追加すると

<html xmlns="http://www.w3.org/1999/xhtml">
<!DOCTYPE html>
<html>
 <head>

すべて正常に動作します。そして、そうしないと、CSSがめちゃくちゃになり、すべてが異なって、レイアウトが醜くなります。

この一行ですべての問題が解決するわけがない!

どのように解決するのか?

を混同しています。 HTML XHTML .

通常は <!DOCTYPE> 宣言は、HTML系言語のバージョン(この場合はHTMLかXHTMLか)を区別するために使われます。

マークアップ言語が違えば、動作も違ってきます。私の好きな例は height:100% . ブラウザで次のように見てください。

XHTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <style type="text/css">
    table { height:100%;background:yellow; }
  </style>
</head>
<body>
  <table>
    <tbody>
      <tr><td>How tall is this?</td></tr>
    </tbody>
  </table>
</body>
</html>

... そして、次のものと比較してください。(特に <!DOCTYPE> 宣言)

HTML (癖のあるモード)

<html>
<head>
  <style type="text/css">
    table { height:100%;background:yellow; }
  </style>
</head>
<body>
  <table>
    <tbody>
      <tr><td>How tall is this?</td></tr>
    </tbody>
  </table>
</body>
</html>

テーブルの高さが大幅に違うことにお気づきでしょう。2つのドキュメントの違いは、マークアップの種類だけなのです

それはいいとして、では、その前に <html xmlns="http://www.w3.org/1999/xhtml"> はどうするのでしょうか?

質問の答えになっていませんが。技術的には xmlns 属性は、XHTML ドキュメントのルート要素で使用されます:(によると ウィキペディア )

XHTML文書のルート要素は、必ず html を含む必要があります。 xmlns 属性を使って XHTML の名前空間と関連付けることができます。

あのね、XHTMLはHTMLではなく XML - という、まったく異なる生き物です。(まあ、一種異質な生き物ですが) xmlns 属性は、ドキュメントが有効なXMLであるために必要なものの1つに過ぎません。なぜか?標準に携わっている誰かがそう言ったからです ;) (詳しくは ウィキペディアのXML名前空間 しかし、その情報はあなたの質問には関係ないので、省略します!)

しかし、それならなぜ <html xmlns="http://www.w3.org/1999/xhtml"> はCSSを修正するのですか?

このように文書を構造化すると...(で提案されているように コメント )

<html xmlns="http://www.w3.org/1999/xhtml">
<!DOCTYPE html>
<html>
<head>
[...]

...があなたのドキュメントを修正しているのは、あなたがCSSやHTMLについてそれほど知らないのではと思わせ(悪気はない!)、本当は なく <html xmlns="http://www.w3.org/1999/xhtml"> 正常に動作しており <html xmlns="http://www.w3.org/1999/xhtml"> でなく、ただ 考える というのも、あなたは無効なHTMLを書くのに慣れていて、そのために クワークスモード .

私が提供した上記の例は、その同じ問題の例です。ほとんどの人は、次のように考えています。 height:100% の高さになるはずです。 <table> はウィンドウ全体であること、そして DOCTYPE がCSSを壊している...というわけではありません。 html, body { height:100%; } のCSSルールを適用することで、目的の効果を得ることができます。