HTML CSS JavaScript 基礎編-第1回 HTML基礎

:::note info
仕事で、Plotly.jsを使ってデータを可視化する必要があるため、JavaScriptに詳しくない私は、HTML、CSS、JavaScriptについての書籍を勉強して基本的な知識を身につけておくことにしました。自分ためのメモですので、記事の中で一部中国語で書くことがあります。また、自分にとって重要ではないところも飛ばしています。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3327130/595b81f8-0a72-83c3-4c8e-d7320ef8416f.png" width=160>
:::

# HTML基礎

## Web開発技術概要

ウェブ開発には、フロントとエンドと言われる二つあります。フロントは文字通り、ユーザ側で見せるものになります。エンドがサーバ側で動作するものです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3327130/485ab8f7-ccda-6f3f-2d0d-c6fd8092b54e.png)

今回はフロントエンドに必要とされるHTML、CSS、Javascriptを勉強します。この3者の役割はそれぞれ以下の通りです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3327130/1cbe0e73-6e51-3765-c3e3-823a384ba9db.png)

フロントだけでも、いろんな技術がありますので、以下の順番で勉強するのがおすすめです。
HTML → CSS → JavaScript → JQuery → CSS3 → HTML5 → Vue.js

私の目標はフロントエンジニアではないので、基礎だけ学んで、自分が必要な可視化のWebページができれば良いです。

# 基本タグ

## HTML構成

```html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
</html>
```

一ページが四つの要素から構成されます：
-  `<!DOCTYPE html>`:これがHTMLページだよという声明
-  `<html></html>`:ブラウザへのお知らせ、このページが`<html>`から始まり、`</html>`まで終わる
-  `<head></head>`:ページのヘッダー部分、ページの表題や外部ファイルの定義
-  `<body></body>`:ページの本体

## headタグ
headタグには、以下の六つタグしか入らないです。
- titleタグ
    - ページの表題
- metaタグ
    - ページの特定情報を定義することろ、例えば、検索エンジン用のキーワードやページのエンコードなど
- linkタグ
    - これが外部を利用する際に使いします。たとえば：
    ```html
	<head>
		<meta charset="utf-8">
		<title></title>
		<link type="text/css" rel="stylesheet" href="css/index.css">
	</head>
  ```
- styleタグ
    - CSSを定義するところ
    ```html
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">/*こちらでCSSを記載*/</style>
	</head>
  ```
- scriptタグ
    - javascriptを定義するところ
    ```html
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">/*こちらでCSSを記載*/</style>
		<script>/*こちらでJavaScriptを記載*/</script>
	</head>
  ```
- baseタグ

## bodyタグ

bodyタグの中身はページの本体です。以下は簡単の例です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3327130/4c039b22-2e83-e52c-c7c0-a26729b7c5d0.png)
 `<!---->`がコメント用タグです、例えば、 `<!--これが説明文です-->`。

# テキスト

HTMLの本文には、見出し、段落、改行などタグがあります。

## 見出しタグ `<h1></h1>`
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3327130/6f8b3d65-5235-c308-13e3-4fc43e7f28a3.png)

## 段落タグ

- `<p></p>`
一段落の内容を含む際に使うタグです。

- `<br/>`
一段落内の改行をする際に使うタグです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3327130/811b9c3a-90a9-866a-c4a1-6749e47f83b5.png)

## 文字の装飾タグ

| 名称  | 标签记号  |
|:-:|:-:|
| 粗体标签 | strong(推荐),b |
| 斜体标签  | i,em(推荐),cite  |
| 上标标签  | sup  |
| 下标标签  | sub  |
| 中划线标签  | s  |
| 下划线标签  | u  |

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3327130/e8d1db7a-8b1a-2432-780f-688bb79520e2.png)

## 区切り線タグ `<hr/>`

hrがhorizonの略語です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3327130/0974669d-59a1-43e2-1ffb-ec17680836c1.png)

## divタグ
「divタグ」の最も重要な用途は、領域を分割し、その領域に対してCSSを使用してスタイルを制御することです。divがdivisionのことで、内部には他のタグをいれてもOKです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3327130/99837adf-68e3-bc9b-fe10-65b0b801e497.png)

## 自己終了タグ
 `<p></p>`や`<div></div>`がペアであり、開始と終了があります。自己終了タグ`hr/`もあります、これが終了ないです。こちらで自己終了タグをまとめます。

| タグ | 説明 |
|:-:|:-:|
|`<meta/>`   | ページの特定な情報(検索エンジン用)  |
|`<link/>`   | 外部ファイルの指定  |
|`<br/>`   | 改行タグ  |
|`<hr/>`   | くきり線タグ  |
|`<img/>`   | 画像タグ  |
|`<input/>`| フォーム入力タグ  |

## ブロック要素とインライン要素
「ブロック要素」と「インライン要素」は、HTMLにおいて極めて重要な概念であり、同時にCSSの重要な基礎でもあります。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3327130/9d2b1e43-72ac-17b7-31b9-da6c57832e42.png" width=480>

- ブロック要素

ブロック要素は、一行を独占します。他の要素(ブロック要素、インライン要素)と同じ行にならないです。
また、ブロック要素内部には、他のブロック要素やインライン要素を含むことができます。
| ブロック要素 | 説明 |
|:-:|:-:|
|`h1~h6`| 見出し  |
|`p`|  段落 |
|`div`| div要素  |
|`hr`| 区切り線  |
|`ol`| 順番ありリスト  |
|`ul`| 順番なしリスト  |

- インライン要素
インライン要素は、他のインライン要素と同じ行にしてもOKです。
また、インライン要素内部には、他のインライン要素を含むことができます。

| インライン要素 | 説明 |
|:-:|:-:|
|`strong`| 粗体  |
|`em`|  斜体 |
|`a`| ハイパーリンク  |
|`span`| よく使うインライン要素、CSSと一緒に利用  |

ブロックとインラインの例は以下の通りです：
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3327130/d418d822-140a-a51b-3919-54bd8e10b418.png)

## HTMLの記号・特殊文字

いっぱいありますので、[HTMLの記号・特殊文字の文字コード表（文字実体参照、数値文字参照）](https://gray-code.com/html_css/list-of-symbols-and-special-characters/)を参照ください。

# リスト
HTMLでは `ul`、`ol`、`li`の3つのタグを使って箇条書き（リスト）を作ることができます。基本的に`ul&li`のセット、または`ol&li`のセットで使います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3327130/cdc90be6-a077-4609-2f15-2e49dec0f2b8.png)

| リストタイプ | 属性値 | 意味 |
|:-:|:-:|:-:|
| li  | 1  | 1,2,3  |
| li  | a  | a,b,c  |
| li  | A  | A,B,C  |
| li  | i  | i,ii,iii,  |
| li  | I  | I,II,III...  |
| ul  | disc  | ●(default)  |
| ul  | circle  | ◯  |
| ul  | square  | ■  |

```html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
        <ul>
            <li>項目1</li>
            <li>項目2</li>
            <li>項目3</li>
        </ul>

        <ol>
            <li>項目1</li>
            <li>項目2</li>
            <li>項目3</li>
        </ol>
	</body>
</html>
```

## 説明リスト
`<dl>` は HTML の要素で、説明リストを表します。この要素は、一連の用語（`<dt>` 要素を使用して指定）と説明（`<dd>` 要素によって提供）をリスト化したものです。
```html
	<body>
		<dl>
		  <dt>りんご</dt>
		  <dd>赤くてまるい果物</dd>
		  <dt>ぶどう</dt>
		  <dd>紫で房状の果物</dd>
		  <dt>めろん</dt>
		  <dd>緑で固い皮に包まれている</dd>
		</dl>
	</body>
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3327130/10d1fde2-e283-06e8-9962-eebfe183282d.png)


# テーブル
表とは、行と列にデータを配置して表示したものです。最も重要なのは、表の主要なコンテナになる `<table>` タグです。これは、表の開始位置と終了位置を示します。
その他のタグは、次の通りです。
| タグ | 意味 |
|:-:|:-:|
| `<tr>`  | 行を表す  |
| `<td>`  | データセルの作成に使われる  |
| `<th>`  | 表の見出しの追加に使われる  |
| `<caption>`  |キャプションの追加に使われる   |
| `<thead>`  | 表に別のヘッダーを追加する  |
| `<tbody>`  |表の本体を示す   |
| `<tfoot>`  | 表に別のフッターを作成する  |

例：

```html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		table,
		td {
		    border: 1px solid #333;
		}
		thead,
		tfoot {
		    background-color: #333;
		    color: #fff;
		}
		</style>
	</head>
	<body>
		<table>
		  <caption>Free Coding Resources</caption>
		  <thead>
		      <tr>
		        <th colspan="2">October</th>
		        <th colspan="2">November</th>
		      </tr>
		    </thead>
		  
		    <tbody>
		      <tr>
		        <td>Sales</td>
		        <td>Profit</td>
		        <td>Sales</td>
		        <td>Profit</td>
		      </tr>
		      <tr>
		        <td>$200,00</td>
		        <td>$50,00</td>
		        <td>$300,000</td>
		        <td>$70,000</td>
		      </tr>
		    </tbody>
		      
		    <tfoot>
		      <tr>
		        <th colspan= "4">November was more produstive</th>
		      </tr>
		    </tfoot>
		</table>
	</body>
</html>
```
結果が以下の通りです：
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3327130/287ebdb8-5271-b9b5-77a9-b371b1a19df2.png)

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="VwEPxjY" data-user="utanesuke0612" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/utanesuke0612/pen/VwEPxjY">
  Untitled</a> by Junlee (<a href="https://codepen.io/utanesuke0612">@utanesuke0612</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

上では、列の結合がありますが、行の結合後ですと `rowspan="2"`です。
```html
		    <tbody>
		      <tr>
		        <td rowspan="2">Sales</td>
		        <td>Profit</td>
		        <td>Sales</td>
		        <td>Profit</td>
		      </tr>
		      <tr>
		        <td>$50,00</td>
		        <td>$300,000</td>
		        <td>$70,000</td>
		      </tr>
		    </tbody>
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3327130/41f822dd-843a-e68c-20b1-0fed90fc92e4.png)


# 画像
 `<img>`タグは、画像を表示する際に使用します。 必須属性のsrc属性で画像ファイルのURLを指定します。
 `<img src="" alt="" title="" width="" height=""/>`
- alt属性には、画像が利用できない環境向けのテキストを指定します。 
- title属性を指定すると、その値が画像のキャプション情報となります。

# ハイパーリンク
 `<a>`タグは、ハイパーリンクを指定する際に使用します。 ウェブページ内のテキストや画像などを `<a>～</a> `で囲んで必要な属性値を指定してやることで、 ハイパーリンクの始点（出発点）や終点（到達点）とすることができます。`<a>`は、anchor（アンカー）の略です。

```html
<a href="a.shtml">相対パスでリンクします</a><br>
<a href="https://www.htmq.com/html5/a.shtml">絶対パスでリンクします</a><br>
<a href="../index.htm">ひとつ上のディレクトリへ</a><br>
<a href="mailto:info@htmq.com">メール</a><br>
 ```


```html
<a href="a.shtml" target="_blank">別画面を開いてリンクします</a><br>
<a href="a.shtml" target="_self">リンク元と同じフレームにリンクします</a><br>
<a href="a.shtml" target="_parent">ひとつ上の親フレームにリンクします</a><br>
<a href="a.shtml" target="_top">フレームをすべて解除してリンクします</a><br>
<a href="a.shtml" target="abc">abcという名前のフレームにリンクします</a><br>
```

詳細はこちらを参照：

https://www.htmq.com/html5/a.shtml


# フォーム

HTMLではフォームを作るためにformタグを使います。またformタグの中にも、
- inputタグ
- labelタグ
- textareaタグ
- selectタグ
- optionタグ

## formタグ
formタグはフォームを構成する部品を囲って、どのプログラムに値を渡すか、どのようなメソッド（方法）でデータを送信するかを決めることができます。

 ```html
<html>
	<form method="POST" action="sample.php">
	  <p>お名前：<input type="text" name="NAME"></p>
	  <p>メールアドレス：<input type="text" name="email"></p>
	  <p><input type="submit" value="送信する"></p>
	  <input type="reset" value="取消する">
	</form>
</html>
 ```
送信するボタンをクリックすると、 `sample.php`ページへ遷移します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3327130/376a21aa-7914-657a-760d-f05d5d1075d0.png)

formタグにはまた他の属性もあります、詳細は以下のページを参照します。


https://html-coding.co.jp/annex/dictionary/html/form/

## inputタグ

<INPUT>タグはテキスト入力欄や実行ボタン等、 フォーム（<FORM>～</FORM>）を構成する部品を作成するタグです。 type属性の値により、一行テキストボックス・チェックボックス・ラジオボタン・実行ボタン・リセットボタン等の部品となります。

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="JjmEeZm" data-user="utanesuke0612" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/utanesuke0612/pen/JjmEeZm">
  book-02-input</a> by Junlee (<a href="https://codepen.io/utanesuke0612">@utanesuke0612</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

詳細は以下のリンク：

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

## select タグ

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="rNqjQPv" data-user="utanesuke0612" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/utanesuke0612/pen/rNqjQPv">
  Book-03-select</a> by Junlee (<a href="https://codepen.io/utanesuke0612">@utanesuke0612</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

# フレーム

`<iframe>` は HTML の要素で、入れ子になった閲覧コンテキストを表現し、現在の HTML ページに他のページを埋め込むことができます。

```html
<html>
<iframe id="inlineFrameExample"
    title="Inline Frame Example"
    width="300"
    height="200"
    src="https://www.openstreetmap.org/export/embed.html?bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861898606&layer=mapnik">
</iframe>
</html>
 ```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3327130/1ccc3390-74ed-a48e-5139-7c18f7506fe1.png)

iframeに入れないページもある（iframeがインライン要素です）：
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3327130/40be0313-3b56-ed2f-8f80-5e67534803cb.png)

https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/X-Frame-Options


https://html-coding.co.jp/annex/dictionary/html/iframe/