それでは毛玉諸君、これにて失敬

日々の精進を備忘録的に綴ります。

トップ > 読書感想文 > Webを支える技術 〜P173まで

Webを支える技術 〜P173まで

読書感想文 読書メモ

お気に入りのTシャツに穴が空いて辛いです。ko_ya346です。
勉強して辛さを乗り越えていきます！
今日はHTMLをやっていきます。

HTMLとは

  • Hypertext Markup Language
    • Markup Language: タグで文書の構造を表現するコンピュータ言語
  • 初期のHTMLはSGMLという言語をベースに開発
    • 複雑だったのでシンプルなXMLが開発された
    • HTML 4.01をSGMLベース→XMLベースに変えた使用がXHTML 1.0

メディアタイプ

拡張子

  • .htmlまたは.htm
    • .htmlは古いOSの制限によるもの

XMLの基礎知識

要素

  • 要素で文書の構造を表現
    • 要素は開始タグ、内容、終了タグからなる
    • 開始タグ: <要素名>
    • 終了タグ: <\/要素名>
  • 要素は内容を持たないこともある（空要素）

属性

  • 要素は属性を複数もつことができる
  • 属性名と属性値の組で開始タグの中に<属性名="属性値">という形式で記述
  • 同じ名前の属性は1つしか記述できない
  • 属性は入れ子にできない
  • 属性の順序には意味はない

実体参照と文字参照

  • <>"'&の5文字は特別な文字なので実体参照という機構で表現
# <
&lt;

# >
&gt;

# "
&quote;

# '
&apos;

# &
&amp;

コメント

<!-- コメント内容 -->

XML宣言

名前空間

  • 複数のXMLフォーマットを組み合わせるときに使用
    • 名前の衝突を防ぐ
  • xmlns
    • XML name space

以下、要素の名前空間の例

<html xmlns="http://hoge.jp"
      xmlns:atom="http://fuga.jp">
    <head>
        <link rel="stylesheet" href="base.css"/>
        <atom:link rel="enclosure" href="attachment.mp3"/>
    </head>
    ...
</html>
  • html要素で名前空間宣言を行う
  • 2つのlink要素を区別している

次は属性の名前区間の例

<entry xmlns="http://hoge.jp"
       xmlns:thr="http://fuga.jp">
    <link href="aaa"
          thr:count="10">
</entry>
  • href属性のような接頭辞のつかない属性をローカル属性と呼ぶ
  • 接頭辞がつくとグローバル属性と呼ぶ

HTMLの構成要素

  • ヘッダ
  • ボディ
    • ブロックレベル要素
      • 文書の段落や見出しなど大きなかたまり
      • h1（見出し）, dl（リスト）, div（グループ化）, p（段落）, ...
    • インライン要素
      • ブロックレベル要素の中に入る
      • 強調、改行、画像埋め込みなどの表現
  • 共通の属性
    • すべての要素はid属性とclass属性をもつことが可能
    • id属性
      • 文書内で一意なID
      • URIで示す箇所をURIフラグメントで利用
      • CSSでスタイルを指定
    • class属性
      • 要素がどのような意味をもつのか指定するメタデータとしての役割

リンク

<a>要素

  • anchor tag
詳細な情報は<a href="http://hoge.jp">ここ</a>を参照してください。

<link>要素

  • htmlのヘッダでwebページ同士の関係を指定するために使う

フォーム

  • リンク先のURIに対してGETとPOSTが発行できる

以下、テキストを読みながら適当に書いたhtmlファイルです。
これをメモ帳とかに貼り付けて名前に.html拡張子をつけて保存してクリックすると、ブラウザで開くことが出来ます。

<html>
    <head>
        <title>サンプル</title>
        <link rel="yahoo" href="https://www.yahoo.co.jp/"/>
        <link rel="bing" href="https://www.bing.com/?cc=jp"/>
    </head>

    <body>
        <div>
            <h1>hoge</h1>
            <p>fuga</p>
            <ol>
                <li>順序つき1</li>
                <li>順序つき2</li>
            </ol>
            <ul>
                <li>順序なし1</li>
                <li>順序なし2</li>
            </ul>
            <dl>
                <dt>hogehoge</dt><dd>fugafuga</dd>

            </dl>
            <form method="GET" action="https://www.google.com/search">
                <input type="text" id="q" name="q"/>
                <input type="submit" id="submit" name="submit" value="search"/>
            </form>
            <blockquote><p>hello world</p></blockquote>
        </div>
    </body>
</html>