🗂
精神と時の部屋日記2 | HTMLチュートリアル
htmlチュートリアルの備忘録です。
チュートリアル
HTMLを始めよう!
- 目的:HTMLの基礎を知る。
HTMLとは?
- HTML/Hypertext Markup Languageというマークアップ言語
- コンテンツの一部を要素で囲み特徴的に表示する。
- 大文字小文字は区別しない。基本全部小文字で書く。
ex)
<p>this is tutorial</p>
this is tutorial
HTML要素の構成
- 開始タグ、内容、終了タグ
- 要素の入れ子ネスト
- ブロック要素:改行されるやつ
- インライン要素:部分的要素で改行なし
- 空要素:単一タグ構成 imgとか
- 属性:要素内追加情報 classとか引用符つける
- 論理属性:disabledとか
- 文書構成:html, head, meta charset="utf-8", title, body
- ホワイトスペース:1文字に短縮される
- 特殊文字エスケープ:
- コメントアウト:
<!-- <></> -->
メタデータ取扱
- 目的:ヘッドへの理解
ヘッド構成
- メタデータ:表示されないデータ
- title要素:html文書全体のタイトルである。メタデータ
- meta要素:文字コード指定,name,content属性
- icon:ファビコン
- cssとjs:linkとscript要素で追加する。src属性
- 言語:lang属性
HTMLテキストの基礎
- 目的:理解度向上
基本
- p要素:段落
- h要素:見出し
- span要素:CSS,js適用
- ul, liでリスト
- em強調 strong
- iイタリック b太字 u下線
ハイパーリンクの作成
- 目的:複数ファイルをリンクする
ハイパーリンク
- aで囲み、titleで補足情報
- aの中にimg参照することで画像をリンクに
URLとパス
- 同ディレクトリ:ファイル名のみ
- サブ:ディレクトリ/ファイル
- 親ディレクトリ:../
フラグメント
- id属性:特定箇所にリンク idにリンクするには#を語尾に例えば
id=test contacts.html#test こんな感じ - 絶対URL:プロトコルとドメイン名含む
- 相対:ファイルの相対的場所
- download属性:ダウンロード時
- mailto:メールリンク
高度なテキスト整形
- 目的:高度な意味づけ機能を知る
説明リスト
- dl,dt説明用語,dd説明定義 要素:インデントがある
- blockquote要素とcite属性:引用
- q要素:インライン引用
- 略語abbr要素:省略語
- address:連絡先
- sup:上付き文字
- sub:下つき文字
- code:コード
- pre:空白保持コードブラック
- var:変数名マークアップ
- kbd:入力マークアップ
- samp:主力マークアップ
- time:時間
文書とWebサイトの構造
- 目的:文書の構造化と簡単なweb構造
基本
- div:ブロックシンプルな
- br:改行
- hr:罫線
HTMLのデバッグ
- 目的:デバッグ用ツールの使い方
デバッグ
- 構文エラー:スペルミス
- 論理エラー:コードが噛み合わない
Discussion