備忘録的な感じです。初心者ですので間違っている箇所があるかもしれません。
お手柔らかにお願いいたします。
HTMLのテンプレート
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コード -->
<meta charset="UTF-8">
<!-- 画面の幅をデバイスの幅に合わせる。拡大縮小無し。 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
HTMLの要素
<a>要素
絶対URLの場合
<a href="https://www.xxx.co.jp">株式会社○○のHP</a>
相対URLの場合
<a href="./../employeeList.html">社員情報一覧</a>
<img>要素
絶対パスの場合
<img src="https://www.xxx.com/images/image.jpg">
相対パスの場合
<img src="./../images/image.jpg">
<ol>要素 <li>要素
順序付きのリスト
<ol>
<li>男性</li>
<li>女性</li>
</ol>
<ul>要素 <li>要素
順序無しのリスト
<ul>
<li>男性</li>
<li>女性</li>
</ul>
HTMLエンティティ
HTMLで予約済み文字や見えない文字を表示するために使用する。
HTML MDNで一覧を確認することができる。
-
<→< -
>→> -
スペース→ -
&→& -
"→"
テーブル
テーブルの要素
-
<table>要素
行と列で構成されたセルによって二次元の表形式のデータを定義する。 -
<tr>要素
セルの行を定義する。<th>要素と<td>要素を混在させることができる。 -
<th>要素
見出しとなるセルを定義する。 -
<td>要素
データを包含するセルを定義する。
セルの連結
- 縦方向に連結する場合
<th>要素または<td>要素にrowspan属性を設定する。
<th rowspan="5">項目</th>
- 横方向に連結する場合
<th>要素または<td>要素にcolspan属性を設定する。
<th colspan="5">項目</th>
フォーム
フォームの要素
<input type="radio">
<input type="radio" name="gender" value="male" checked>男性
<input type="radio" name="gender" value="female">女性
<input type="checkbox">
<input type="checkbox" name="hobbies" value="movie" checked>映画<br>
<input type="checkbox" name="hobbies" value="book">読書<br>
<input type="checkbox" name="hobbies" value="cooking">料理<br>
-
<input type="file">
ファイルをサーバにアップロードする場合に使用する。
<form>要素にenctype="multipart/form-data" と記述する。
<input type="file" name="employeeList">
-
<textarea>
rows属性で縦の行数を設定する。
cols属性で横の文字数を設定する。
<textarea name="message" rows="5" cols="50"></textarea>
-
<select>／<option>
<select name="quantity">
<option value="1" selected>1個</option>
<option value="2">2個</option>
<option value="3">3個</option>
<option value="4">4個</option>
<option value="5">5個</option>
</select>
<button>
<!-- フォームのデータをサーバに送信する。 -->
<button type="submit">送信</button>
<!-- フォームの値を初期値に戻す。 -->
<button type="reset">リセット</button>
<!-- JavaScriptで動作を設定する場合などに使用する。 -->
<button type="button">ボタン</button>
その他の要素はHTML MDNで一覧を確認する。