HTMLの基本とタグ集(初学者向け)

# HTML、CSSの教科書
これでよかったらインプットアウトプットしてみてください。
完璧に覚える必要はないです。
p328のEXERCISE05ができれば十分かと思います。

https://books.mdn.co.jp/books/3221303016/?page=2&direct=1

https://www.amazon.co.jp/%E3%83%97%E3%83%AD%E3%81%AE%E3%80%8C%E5%BC%95%E3%81%8D%E5%87%BA%E3%81%97%E3%80%8D%E3%82%92%E5%A2%97%E3%82%84%E3%81%99-HTML-CSS%E3%82%B3%E3%83%BC%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0%E3%81%AE%E5%BC%B7%E5%8C%96%E6%9B%B8-%E8%8D%89%E9%87%8E-%E3%81%82%E3%81%91%E3%81%BF/dp/4295202088

# HTMLの基本構造
HTMLの基本構造をみていきます。


```index.html
<!DOCTYPE html>　//html要素
<html lang="en">
  <head>　　//head要素
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles/main.css" /> //CSS適用
    <title>Document</title>
  </head>　　　//head要素
  <body>　//body要素
    <div class="line1">
      <div class="message">Line1</div>
    </div>
    <div class="line2">
      <div class="message">Line2</div>
    </div>
  </body>　　//body要素
</html>　　　//html要素
```

まずは***html要素で囲みます。これでHTMLを宣言***します。


***head要素はページの設定の記述***をしていきます。
```html
<meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
```
このmetaタグ（補足情報）です。

***body要素はページの表示情報を記述***していきます。
```index.html
<body>
    <div class="line1">
      <div class="message">テスト</div>
    </div>
    <div class="line2">
      <div class="message">テスト２</div>
    </div>
  </body>

//テスト1
//テスト２
```

これがbodyの部分です

# おまけCSS
CSSも書いていきます。

```main.css
.line1 {
  font-size: 32px;　
}

.line1 .message {
  color: yellow;
}

.line2 {
  color: aqua;
}
```
これでline1の部分がCSSで適用され、サイズが変わりテスト２より大きくなります。
.line1 .message を指定してテストの文字の色が黄色になります。
line２のテストの部分の文字サイズは変わりませんが色が青色になります。


# HTMLのタグ
#  よく使うタグ
基本構造で出てくる超基本的な構造です。

|タグ|意味|
|---|---|
|html|HTMLを宣言|
|mata|ページ情報の記述|
|head|ページの設定の記述|
|title|ページのタイトル|
|link|リンクで外部ファイル読み込み(CSSやURLなど)|
|body|ブラウザに表示される部分|



VSCodeで開く時にhtmlと入力すると下のようなコードが出せます。
```index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>
```


この資料にもコードが書いてあります。

https://qiita.com/Hashimoto-Noriaki/items/be93ae1bd831f62d036a


# ブロックレベル要素とインライン要素
```ブロックレベル要素```は***改行される***特徴があります。

ex) div p h  formなど

```インライン要素```は***改行されない***特徴があります。
ex) span a img  inputなど

https://www.itra.co.jp/webmedia/block-inline-difference.html

実査に動かすと

```index.html
<body>
    <div>divの確認</div>
    <span>span</span>
    <span>span2</span>
  </body

//divの確認
//span span2
```
のようになります。


# コンテンツ内のタグ

|タグ|意味|
|---|---|
|span|インライン要素|
|h1~h6|見出し|
|p|段落|
|img|画像読み込み|
|a|リンク|
|ul|箇条書き|
|li|リスト|
|ol|番号付きリスト|
|br|改行|
|hr|区切り線|
|strong|太文字|
|small|法的表示 |
|blockquote|引用文　転載文|
|audio|音声データ埋め込み|
|video|動画データ埋め込み|
|script|JSなどのscript埋め込み|
|isindex|キーワード検索|
|adresss|アドレス情報|



⚫︎imag
```index.html
<body>
    <img src="https://radichubu.jp/files/topics/37337_ext_01_0.jpeg" />
  </body>
//ビックベンの画像
```

⚫︎a
```index.html
<body>
    <a href="https://www.youtube.com/c/NKTofficial">Youtube大学</a>
  </body>
//中田敦彦さんのYoutubeチャンネルにいく
````

⚫︎h

```index.html
<body>
    <h1>HTML学習</h1>
    <h3>HTMLはプログラミング言語ではない</h3>
    <h6>マークアップ言語です。</h6>
  </body>
```

![スクリーンショット 2022-05-01 13.53.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748789/d7627a08-153b-ba8c-43d9-18e1df10dc0d.png)]

全部は載せられないのでご自身で挙動を確認してください。

# 表のタグ

|タグ|意味|
|--|--|
|table|表を示す|
|thead|テーブル（表）のヘッダ行を定義|
|tbody|テーブル（表）のヘッダ部分を定義|
|tr|表の行|
|th|表の見出し|
|td|データセルを表す|
|caption|表題|

表のタグはこれを参考に動かしてください。

https://udemy.benesse.co.jp/design/web-design/html-table.html

動かしてみました。
```index.html
<body>
    <table border="1">
      <tr>
        <td>手持ちポケモン</td>
        <td>タイプ</td>
        <td>得意技</td>
      </tr>
      <tr>
        <td>ピカチュウ</td>
        <td>電気</td>
        <td>10万ボルト</td>
      </tr>
      <tr>
        <td>ミュウツー</td>
        <td>エスパー</td>
        <td>サイコキネシス</td>
      </tr>
      <tr>
        <td>リザードン</td>
        <td>炎</td>
        <td>かえんほうしゃ</td>
      </tr>
    </table>
  </body>
```

![スクリーンショット 2022-05-01 14.42.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748789/1044120e-5044-0998-41f9-02213a97fd80.png)

# フォーム

|タグ|意味|
|--|--|
|form|表を示す|
|input|テーブル（表）のヘッダ行を定義|
|input type="checkbox"|チェックボックス|
|input type="radio"|ラジオボタン複数項目のうち一つ選択|
|select|セレクトボックス|
|textarea|複数行テキストの入力|
|label|フォームのラベル|
|placeholder|入力欄に(例)初期表示|


資料

https://www.ahref.org/doc/hinagata/form_all.html

https://www.dspt.net/html_tag/008.html

http://www.htmq.com/html/input.shtml




```index.html
<body>
    <h2>問い合わせフォーム</h2>
    <p>問い合わせはこちらから</p>
    <form>
      <input type="text" name="/" />
      <input type="submit" value="送信" />
    </form>
  </body>
```

![スクリーンショット 2022-05-01 15.27.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748789/fc817ec0-d435-fb82-871a-f4a4417bda71.png)


# グループ化するためのブロック要素

|タグ|意味|
|--|--|
|div|意味を持たない|
|header|ページ上部|
|nav|ナビゲーションバー|
|aside|補足部分|
|section|1つのテーマのあるグループ|
|main|ページのメイン部分|
|footer|ページの下部|



# 参考資料
https://qiita.com/masaki1117/items/27f75525d2c5739ea587

http://www.fureai.or.jp/~irie/html-tag/