HTML_ドットインストール_覚え書き
HTML・CSS ドットインストール
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf8"> <meta name="description" content="初めてのHTML文書です。"> <title>はじめてのHTML</title> <link rel="shortcut icon" href="favicon.ico"> <!-- <style> body { background: skyblue; } </style> --> <!-- <link rel="stylesheet" href="mystyles.css"> --> </head> <body> <!-- <p>こんにちは！</p> --> <article> <h1>文字参照<h1> <p>「<p>タグを段落です」</p> <input type="text" value="区切り文字は"です"> <p>「この記号の文字参照は&quot;です」</p> </article> <header> <h1>おいしいごはん！</h1> <nav> - ホーム - このサイトについて - プロフィール </nav> </header> <section> <h1>今月のおいしいごはん</h1> <article> <h1>おいしいごはん #12</h1> <p><img src="IMG_0186 1.JPG" width="100" height="140" alt="カエル"></p> <table> <thead> <tr> <th>Size</th><th>Price</th> </tr> </thead> <tbody> <tr> <td>S</td><td>150</td> </tr> <tr> <td>M</td><td>180</td> </tr> <tr> <td>L</td><td>210</td> </tr> <tr> <td colspan="2">free for kids!</td> </tr> </tbody> </table> <div style="background:skyblue;"> <p>至高の<br><strong>TKG</strong> → <a href="more.html">もっと見る</a> → <a href="#stuff">材料に</a></p> <h2 id="stuff">材料</h2> <ul> <li><span style="color:gold;">卵</span></li> <li>醤油</li> <li>ごはん</li> <li><a href="http://dotinstall.com" target="_blank">ドットインストール</a></li> </ul> <h2>手順</h2> <ol> <li>まぜる</li> <li>かける</li> </ol> <h2>定義</h2> <dl> <dt>TKG</dt> <dd>TAMAGO KAKE GOHAN</dd> </dl> <hr> <p>ところであの件は・・・？</p> </div> <pre> poem poem poem </pre> <blockquote> TKG最高！ by tamaki </blockquote> </article> </section> <section> <h1>新着のおいしいごはん</h1> <article> <h1>おいしいごはん #32</h1> はもしゃぶ </article> <article> <h1>おいしいごはん #31</h1> スリランカカレー </article> </section> <aside> <h1>おすすめレシピ本</h1> - BOOK 1 - BOOK 2 - BOOK 3 </aside> <article> <h1>アンケート</h1> <form action="survey.php" method="post" novalidate> <p>メールアドレス: <input type="text" name="email" size="50" maxlength="5" value="abc" disabled></p> <p>メールアドレス: <input type="email" name="email" size="50" placeholder="please enter email" required></p> <p>料金: <input type="number" name="price" size="50" placeholder="please enter email"></p> <p>誕生日: <input type="date" name="birthday" size="50" placeholder="please enter email"></p> <p> コメント: <textarea name="comment" cols="40" rows="5" placeholder="コメント"></textarea> </p> <p> Phone: <label><input type="checkbox" name="phone" value="android" checked> Android</label> <input type="checkbox" name="phone" value="iphone" id="iphone"><label for="iphone">iPhone</label> </p> <p> Color: <input type="radio" name="color" value="red" checked> Red <input type="radio" name="color" value="blue">Blue </p> <!-- <p>City: <select name="city"> <option value="tokyo">Tokyo</option> <option value="nagoya">Nagoya</option> <option value="osaka" selected>Osaka</option> <option value="kyoto">Kyoto</option> <option value="fukuoka">Fukuoka</option> </select> </p> --> <p> <select name="city" multiple size="5"> <option value="tokyo">Tokyo</option> <option value="nagoya">Nagoya</option> <option value="osaka" selected>Osaka</option> <option value="kyoto">Kyoto</option> <option value="fukuoka">Fukuoka</option> </select> </p> <p> <button type="submit"><strong>送信！</strong></button> </p> <p> <button type="button">処理をする！</button> </p> <p>ログイン: <input type="password" name="password"></p> <input type="hidden" name="user_id" value="23423"> <p><input type="submit" value="送信！" disabled></p> </form> </article> <footer> このサイトは @tamakiによって運営されています。 </footer> </body> </html>
こんにちは！
HTML5の決まり
head,body
charset、エンコード
description 文書の説明
ファビコン（タブのアイコン）の設定
styleタグ CSS
styleのファイル化
コメント
id:一つしかない要素
class:複数ある要素
複数のクラスを同時に持てる
style:直接styleを指定できる
header:
footer:
nav:ナビゲーション
article:独立したコンテンツ
aside:副次的なコンテンツ
section:それ以外の情報のかたまり。見出し
h1 - h6:
p:段落
hr:水平線
pre:改行や字下げを保持
blockquote:引用
div:スタイリング
ol(ordered list) / ul(unordered list) / li(list item)
dl(definition list) / dt(definition term) / dd(definition description)
strong
br
span
img src width height alt
table
thead
tbody
tr:table row
th:table header
td:table data
form
action
method: get/post
input
password
placeholder
hidden
textarea
button
disabled
input
checkbox
radio
label
select
option
複数選択
input
email
number
date
required
novalidate
カテゴリー:どの分類か
コンテンツモデル:そのタグの中にどのカテゴリーのタグを入れられるか
トランスペアレント
