html　基本パーツ

今回はhtmlを初めて触ったので基本パーツとかを簡単にまとめて行こうかなと思います。
参考資料はudemyの[The Web Developer Bootcamp](https://www.udemy.com/course/the-web-developer-bootcamp/)コースです。
#簡単パーツ
###h タグ
```html
<h1>h1 tag</h1>
<h2>h2 tag</h2>
<h3>h3 tag</h3>
<h4>h4 tag</h4>
<h5>h5 tag</h5>
<h6>h6 tag</h6>
```
<img width="133" alt="スクリーンショット 2020-07-11 14.11.23.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620960/a87cc7de-dbba-da85-c911-8f8d1aeb0796.png">

###p タグ
```html
<p>p tag</p>
```
<img width="51" alt="スクリーンショット 2020-07-11 14.13.27.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620960/b4014994-1b07-6c87-885b-f0dcc9522ac9.png">

###a タグ
```html
<a href="URL">リンク先へ</a>
```
<img width="82" alt="スクリーンショット 2020-07-11 14.15.43.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620960/7a04272a-6eea-f6ae-11d8-b5a4b959b107.png">

###img タグ
```html
<img src="画像のURLまたはパス">
```

###ol タグ
```html
<ol>
  <li>HTTP Requests</li>
  <li>IP Address</li>
  <li>Servers</li>
</ol>
```
<img width="173" alt="スクリーンショット 2020-07-11 14.18.04.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620960/beadfbcb-70d4-518a-c950-ab78c77d0a58.png">

###ul タグ
```html
<ul>
  <li>list 1</li>
  <li>list 2</li>
  <li>list 3</li>
</ul>
```
<img width="129" alt="スクリーンショット 2020-07-11 14.20.06.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620960/6ee4bd98-44d9-05c7-43d8-50fdef684a7f.png">

###table タグ
```html
<table border="1">
  <thead>
    <th>Name</th>
    <th>Age</th>
    <th>Breed</th>
  </thead>
  <tbody>
    <tr>
      <td>Rusty</td>
      <td>2</td>
      <td>Mutt</td>
    </tr>
    <tr>
      <td>Wyatt</td>
      <td>13</td>
      <td>Golden</td>
    </tr>
  </tbody>
</table>
```
<img width="173" alt="スクリーンショット 2020-07-11 14.24.32.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620960/ae14c199-0a55-2548-3e80-e1a94d58c7b1.png">

#form タグ編
formタグはログイン画面などで入力した文字などをリクエスト先に送信する際に使用する。
タグにはたくさんの属性があり、属性はkeyとvalueで指定することができる。入力したテキストなどをリクエストで送信する際に属性を指定することでリクエストの内容を変更することができる。
###textarea タグ
```html
<form>
  <textarea name="paragraph" rows="8" cols="80"></textarea>
  <button type="submit">go!</button>
</form>
```
<img width="647" alt="スクリーンショット 2020-07-11 14.31.23.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620960/394efe4b-5796-eb87-d905-e6c027e14578.png">
リクエスト内容:paragraph=abc
rowsとcolsでテキストエリアの大きさを調整できる

###select タグ
```html
<form>
  <select name="color">
    <option value="red">RED</option>
    <option value="yellow">YELLOW</option>
    <option value="BLUE">blue</option>
  </select>
  <button type="submit">go!</button>
</form>
```
<img width="129" alt="スクリーンショット 2020-07-11 14.33.51.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620960/76b7e032-f9e8-c115-571c-283dd57b1bb0.png">
リクエスト内容:color=red

### radio button タグ
```html
<form>
  <label for="dogs">Dogs:</label>
  <input name="petChoice"id="dogs" type="radio"
   value="DOGS">

  <label for="cats">Cats:</label>
  <input name="petChoice"id="cats" type="radio"
   value="CATS">

  <button type="submit">go!</button>
</form>
```
<img width="197" alt="スクリーンショット 2020-07-11 14.35.43.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620960/d3f1d7c7-3844-bd27-dfc3-4b291a15824b.png">
リクエスト内容:petChoice=CATS


### input タグ
```html
<form>
  <label for="username">Email:</label>
  <input id="username"type="email" name="username" placeholder="email"
  required>

  <label for="password">password:</label>
  <input id="password"type="password" name="password" placeholder="password"
  required>

  <button type="submit">go!</button>
</form>
```
<img width="501" alt="スクリーンショット 2020-07-11 14.38.59.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620960/595c1339-7684-9a4f-1715-eb87cbf1cfd9.png">

リクエスト内容:username=test%40gmal.com&password=pass
required: 入力しないとフォームでリクエストできない
type="email": emailの書式じゃないと認識されない
placeholder="email": テキストフィールドに薄く文字が出る
<label for="password">password:</label>: 今はあまり関係ないがあとあと使用する。id="password"とfor="password"で結びつけている。