web-dev-qa-db-ja.com

「<html xmlns = "http://www.w3.org/1999/xhtml">」は何をしますか？

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

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

すべて正常に動作します。そうしないと、CSSが「混乱」し、すべてが異なり、レイアウトが「becomesい」ものになります。

このラインはすべての問題をどのように解決できますか？！

htmlcssxhtml
43
good_evening

[〜＃〜] 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ドキュメントのルート要素によって使用されます：（ Wikipedia による）

XHTMLドキュメントのルート要素はhtmlである必要があり、XHTML名前空間に関連付けるためにxmlns属性を含む必要があります。

おわかりのように、XHTMLはHTMLではなく、 [〜＃〜] xml [〜＃〜] -非常に異なる生き物であることを理解することが重要です。 （わかりました、一種の異なる生き物）xmlns属性は、ドキュメントが有効なXMLである必要があるものの1つにすぎません。どうして？標準に取り組んでいる人がそう言ったからです;）（詳細は WikipediaのXML名前空間 で読むことができますが、実際にはあなたの質問に関係ないのでその情報は省略しています！）

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

文書をそのように構成する場合...（ コメント で提案するように）

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

...あなたのドキュメントを修正しています、それはあなたがCSSとHTMLについてあまり知らない（犯罪ではない！）、そして真実はwithout<html xmlns="http://www.w3.org/1999/xhtml">それは正常に動作しており、with<html xmlns="http://www.w3.org/1999/xhtml">それはそうではありません-あなたはちょうどと思う '無効なHTMLの記述に慣れているため、 quirksモード で動作します。

上記の例は、同じ問題の例です。ほとんどの人は、height:100%がウィンドウ全体の高さ<table>になり、DOCTYPEが実際にCSSを壊していると思うが、実際にはそうではない。むしろ、彼らはhtml, body { height:100%; } CSSルールを追加して必要な効果を達成する必要があることを理解していません。

81
Richard JP Le Guen

そのXML名前空間。 XHTML 1.0または1.1のdoctypeまたはapplication/xhtml + xml mimetypeを使用する場合に必要です。

HTML5 doctypeを使用する必要がありますが、text/htmlには必要ありません。このようなテンプレートから始める方が良い：

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8 />
        <title>domcument title</title>
        <link rel="stylesheet" href="/stylesheet.css" type="text/css" />
    </head>
    <body>
            <!-- your html content -->
            <script src="/script.js"></script>
    </body>
</html>


Doctypeをまっすぐに配置したら、 html と css を検証します。
これは通常、レイアウトの問題を解決します。

23
tereško

あなたのサイトには、奇抜モードでの実行に依存するCSSまたはJSがあるようです。これが、「正しく」レンダリングするためにDoctypeの上にゴミが必要な理由です。このゴミを削除してから、CSS + JSを修正して実際に標準モードで動作するようにすることをお勧めします。長い目で見れば、多くの苦痛を省くことができます。

7
Boris Zbarsky
The namespace name http://www.w3.org/1999/xhtml 
is intended for use in various specifications such as:

Recommendations:

    XHTML™ 1.0: The Extensible HyperText Markup Language
    XHTML Modularization
    XHTML 1.1
    XHTML Basic
    XHTML Print
    XHTML+RDFa

こちらをご覧ください 詳細

0
nemesisfixx