HTML基礎

HTML基礎

今回は常に使うようになってるHTMLの基礎部分をちゃんと見返してみた。その中で気になったものを抜粋。今後のチェックに。

（ちゃんと基礎を全部学びたい方向けではないです。メモ書きです（＾＾））

タグ（タグは文章の意味に適したタグを使用すること）

・HTMLにはどのタグにどのタグを含めていいか決まっている。。MDNのサイトを参照

・HTMLタグは装飾のためには使わないことに注意

■マークアップ　→　テキストをタグで意味づけすること　　

<h1>こんにちは</h1>　　

・<h1>　→開始タグ　

・</h1>　→終了タグ

・こんにちは　→コンテンツ　

・これらをまとめて「要素」

■タグの属性　→タグにつけるオプション情報

（タグごとに設定できるものが決まっている）

<img src="img/example.png" width="120" height="120" alt=”アイコンです”>　

・src　→属性名　　

・”　” 内　→属性の値

・Altタグ　→画像がうまく表示できなかった時のための代替テキスト

・空要素　→imgタグなど閉じタグがなく囲むものがない要素

■メタタグの指定やサイトの説明に使用　

・文字コード　→コンピュータがどの種類の文字セットを使うかという指定

■ファビコン

linkタグで　→<link rel="icon" href="favicon.ico">

■コメント　　

コメントはソースの表示で見える

■文字実態参照　

・&lt; →　<    &gt; →　>　を表すことができる

■順序付きリスト

・ 箇条書きリスト　ul  li

・順序付きリスト　ol li

・説明付きリスト　dl全体  dt項目 dd説明

■リンクの注意点　　

・一つ上の階層のフォルダ内にあるファイルにリンクを貼る場合　．．/

　<a href="../index.html">ホームへ</a>　

・ページ内リンク

　<li><a href="#about">このサービスについて</a></li>　　

　    ＃記号の後に設置した文言をidとして持つ位置に飛ぶ

　<h2 id="about">このサービスについて</h2>　←ここに飛ぶ

・トップへ

　<p><a href="#top">先頭へ戻る</a></p>　#topでトップへ飛ぶ

　この時にurlにtopという文言が入っているので注意

■区切りを表すタグ

　　header　ページの途中でも使われる

　　aside      本文とは関連性が薄いコンテンツ

　　article     記事/独立したコンテンツ

　　main       主要なコンテンツなのでページ内で一つしか使えない

　　section   汎用的に使える区切り

■フォーム部品

■セレクター

■チェックボックス＆ラジオボタン

■その他のタグ

RubyやPHPで送信されたデータを扱えるようにする

　<form action="process.php" method="post">

      <label>担当者 <input type="text" name="username"></label>

　//name属性で値の識別子を付ける

      <label>タスク <input type="text" name="task"></label>

      <button>追加</button>
　</form>

<pre>　プリフォーマット　内部にあるものをそのまま表示

<blockquote>　引用を入れるときに使用するタグ　字下げされる

<hr>　ここで少し話題が変わったよ、ということを示す場合に使用するタグ

　　　話題が変わるので水平線が入る