ホームページ > 記事 > ウェブフロントエンド > screen_html/css_WEB-ITnose の後ろに木が生えていることをご存知ですか
screen_html/css_WEB-ITnose の後ろに木が生えていることをご存知ですか
- WBOYオリジナル
- 2016-06-21 08:46:511404ブラウズ
モーメントを閲覧していても、ショッピングしていても、ニュースを見ていても、あなたが見ているものはブラウザがあなたに提示するものです。
今日の Web ページは一般的に非常に複雑で、さまざまな画像、さまざまなフォントと色のテキスト、オーディオとビデオ、動的なメニューなどが含まれています。ただし、ブラウザがネットワークの反対側のサーバーから取得するのは、表示される前にコード行だけです。それらの乱雑なコードをきちんとした画像に変換し、ページ上のさまざまな要素を正確に表示し、それらの位置、色、サイズ、動的効果を間違えることはなく、ユーザーのさまざまな操作に正確に応答する必要もあります。指を上にスライドさせると画面上に新たな絵が描かれ、ダイナミックなエフェクトもかかります。
プログラマは、表示される最終画面を共同で制御するためにいくつかの異なるテクノロジ (CSS、JavaScript、JSON など) を使用しますが、最も基本的なテクノロジは HTML です。 HTML がなければ Web ページは存在しないと言えます。ブラウザがページをレンダリングするための最初のステップは、HTML を解釈することから始まります。画面の裏に隠れているHTMLに興味がある方は、ぜひ読んでみてください。
HTML とは一体何ですか?
HTML は、1980 年頃に CERN の物理学者ティム バーナーズ リーによって発明されました。彼の当初の目的は、科学者が知識をより簡単に表現し共有できるようにすることでした。 HTML が登場する前は、インターネット上で通常のテキストを送信するには、電子メールやその他のテクノロジーしか使用できませんでした。今皆さんがよく話題にする H5 は HTML バージョン 5 です。
HTML は Hypertext Markup Language の略称で、ページ上のさまざまなコンテンツ (テキスト、画像、オーディオ、ビデオなど) の種類に基づいて一連の要素を定義します。 1 つ以上のタグ。ページ上のコンテンツはこれらのタグ内に配置されるか、タグ自体がコンテンツ アイテムです。したがって、ラベルは括弧のように見え、通常はペアで表示されます。たとえば、ページにボタンを表示する場合、対応するラベルは bb9345e55eb71822850ff156dfde57c8OK65281c5ac262bf6d81768915a4a77ac0 です。ご覧のとおり、開始タグは英語の単語を一対の山かっこで囲むだけで、終了タグは単語の前にバックスラッシュを追加するだけです。改行を示す 076402276aae5dbec7f672f8f4e5cc81 など、一部の要素ではタグが 1 つだけ必要になります。終了タグを省略し、右山括弧 > の前にバックスラッシュ / を置くことができます。
ブラウザは、これらのタグに基づいて、ページ上の「コンテンツ」を「レンダリング」する方法を決定します。たとえば、次の最も基本的な HTML コードは、ページ上に 1 行のテキストを表示します。 I am a Chestnut...
<html> <head> <title>页面标题</title> </head> <body> <p>我是一个栗子...</p> <!-- 我是一个注释 --> <!-- body中的标签就是浏览器要显示的内容 --> </body></html>
コンピューター上のほとんどのブラウザーは、このページのコードを表示できます。 Chrome を使用している場合は、ページを右クリックして [要素の検査] を選択すると、上記のコードが表示されます。ほとんどのページには多くのコードがあるため、最初は怖がるかもしれませんが、注意して見ると、 100db36a723c770d327fc0aef2ce13b1 、 93f0f5c25f18dab9d176bd4f6de5d30e タグも見つかります。上記の構造に従います。
わかりました、これが木に見えないことはわかっています。しかし、プログラマーの世界では、この構造は確かにツリーと呼ばれ、これが教師が教えたものです。もしどうしても木が見たければ、私があなたのために木を描きます。
次に、さらに深く掘り下げて、上記の概念を紹介します。ただし、今すぐ始めて、ブラウザで Mozilla Thinble にアクセスできます。これは、HTML コードの記述方法を教える対話型のオンライン エディターです。さらに、すべての HTML 要素とその用途が含まれる HTML 要素リストも参照する必要があります。
要素 - ページの要素
HTML は要素で構成されており、要素には一致するタグのペアと、これら 2 つのタグ内の内容が含まれます。 HTML は各要素の明確なセマンティクスを定義します。たとえば、e388a4556c0f65e1904146cc1a846beeI am a one of text94b3e26ee717c64999d7867364b1b4a3 はテキストの一部を意味し、13c0c0dd10975d3d4bde98764704b8fd は表示を意味します。 img.jpg という名前の画像を「images」ディレクトリに配置します。
非常に明確な意味を持つ要素もあれば、そうでない要素もあり、技術的な理由で定義されており、まったく表示する必要がない要素もあります。しかし、ほとんどの要素には、大きな箱の中に小さな箱を入れて階層構造 (いわゆるツリー) を形成するのと同じように、他の要素を含めることができます。 HTML は木の幹のようなもので、本体にもさまざまな枝があります。この階層構造をDOM（Document Object Model）と呼びます。
タグ
HTML ドキュメントは通常のテキストで記述されます。メモ帳などのエディターを使用できます。編集後、接尾辞 .html または htm を付けてファイルとして保存し、ブラウザをダブルクリックすると自動的に開きます。ただし、通常は Sublime Text などの専門エディターを使用します。この専門エディターは HTML 構文を認識し、さまざまな要素をさまざまな色で表示できるためです。
小なり記号 1f2329242461bbf65851e4f2397f4b97 の間にあるものはすべてタグと呼ばれ、終わりのないタグがある場合、またはタグがペアで表示されない場合、HTML はそれを特別に扱います。 HTML はエラーを報告します。例:
<em>I <strong>really</strong> mean that</em>
如果写成这样就是错的（注意看 8e99a69fbe029cd4e2b854e244eab143 的位置）：
<em>I <strong>really</em> mean that</strong>
属性
开始标签中可以放入额外的信息，一般是 ‘名称=值’这种格式，这些额外的信息叫做属性。有些属性也可以只放名称。比如 13c0c0dd10975d3d4bde98764704b8fd 中就有个名为 src 的属性。属性值之间如果有空格，必须用引号引上。
命名字符引用
因为HTML语法给一些字符赋予了特殊的含义，所以要显示这些字符时，必须用特殊的形式代替，比如小于号 2bbf90e4b114065625af2e69cb336f77 ，如果要显示它们，只能用 > 和 < ，这样的命名字符引用有很多，感兴趣可以看一下 这里 。
注释和doctype
编程的时候，最重要的就是注释了，因为时间长了很容易忘。在HTML里面可以把注释放在 d2eb28b224de59f6f35349fb7aea7c5a 之间。我们可以在代码中看到注释，但浏览器又不会把它显示在页面中。
除了标签，文本内容和命名字符引用，HTML还必须在第一行声明doctype，以便告诉浏览器页面是用哪个版本的HTML写的，对于HTML 5来说，只要记住写成 8b05045a5be5764f313ed5b9168a17e6 就可以了。
关于HTML我们就介绍这么多，只要你掌握了那些标签的含义，就可以写自己的页面了。