【概要】
■公式ドキュメントはMDN
■htmlファイルの命名規則はケバブケース(ハイフンつなぎ)
テンプレート
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="./css/style.css">
<title>tableタグ整理</title>
</head>
<body>
～code～
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
【基本的な要素】
■cssの読み込み
<link rel="stylesheet" href="css/styles.css">
■引用符
<blockquote>引用したい文章</blockquote> //引用にリンクを付けたい場合、city属性を設定するとリンクを設定してくれるだけでなく、リンク先のタイトルを文字列として取得して表示してくれる。 blockquote cite="https://dotinstall.com"
■画像とリンク
<a href="" target="_blank" rel="noopener noreferrer"> <img src="img/blog.png" width="20" height="20" alt="ブログサイトへのリンク画像です"> </a> ※別タブで開かせたい場合、リンクは" target="_blank" rel="noopener noreferrer"を設定しておく。 これを指定しないと、リンク先が外部サイトだった場合に、外部サイトからこちらのサイトのURLの書き換えを行うことができてしまう。 >|??| a href="" target="_blank" rel="noopener noreferrer"
・そのページ自身を読み込むにはhref属性を空にしておく
<a href="">replay?</a>
■文字を成型せずに出力 ※インデントも表現されてしまうので左詰めにすること
<pre> <code> <p> いますぐに<br> はじめてみよう<br> HTML </p> </code> </pre>
■説明リスト
<dl> <dt>項目</dt> <dd>説明</dd> <dt>項目</dt> <dd>説明</dd> </dl>
■ボタン
<input type="button" value="OK"> もしくは <button>OK</button>
・disabled属性で無効化
<button disabled>OK</button>
■その他のタグ
・section ・article ・time ・nav ・header ・footer ・hr //転換
【form部品】
name： 属性名を指定 value： 値 type： 仕様を指定（text, checkbox, radioなど）
■1行の入力フォーム：input
<input type="text" value="初期値"> type="password" で伏字 <input type="text" placeholder="入力してね">
■複数行の入力フォーム：textarea
初期値は文字をタグで囲えばOK
■チェックボックス：type="checkbox"
<label><input type="checkbox">iPhone</label> <label><input type="checkbox">Android</label> checked属性で初期値 <input type="checkbox" checked> *** ■ドロップダウンリスト（プルダウン）：select option <select id="name" size="2"> <option>田口</option> <option>佐藤</option> <option>山田</option> </select>
・属性
size="2" :2行表示 multiple :複数選択可能 <option selected>田口</option> とすると、その項目が初期値として選択される *** ■ラジオボタン ※name属性を使用して同じ要素ということを明示する <label><input type="radio" name="phone">iPhone</label> <label><input type="checkbox" name="phone">Android</label> checked属性で初期値
■label forとidで紐づけ
<label for="name">名前</label> <input id="name" type="text"> くくる場合はfor、idは不要 <label><input type="radio" name="phone">iPhone</label> <label><input type="checkbox" name="phone">Android</label>
■部品をグループ化：fieldset
キャプション：legendタグ
<fieldset> <legend>お使いのスマホ</legend> <label for="name"><input type="checkbox">iPhone</label> <label for="name"><input type="checkbox">Android</label> </fieldset>
■その他の部品
<input type="color"> <input type="date"> <input type="number"> <input type="range">
■入力した値を送信する：form,submit
action属性で送信先 自身に送信する場合は空で作成
method属性で形式を追加
配下の部品については、バックエンドで識別できるように
name属性を付与しておく
<form action="process.php" method="post"> <label>担当者名 <input type="text" name="username"></label> <label>タスク <input type="text" name="task"></label> <button>追加</button> <input type="submit" value="送信"> </form>
上記のフォームをsubmitするとフォームのデータが送信される。
もしくは、送信ボタンのみを作成し、JavaScriptでクリックイベントを付与、
そしてformを.submit()する方法もよく用いられる。
