基本内容
ドットインストール html 入門で学ぶことのまとめ。
＊HTML（Hyper Text Markup Language）ここでは、HTML５
ホームページをつくるための言語
caniuse.com でどのバージョンでサポートされているかがわかる。
コードまとめ
<!DOCTYPE>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>初めてのHTML</title>
<meta name="description" content="初めてのhtml文書です。"> <!-- 検索結果で文書表示 -->
<link rel="shortcut icon" href="favicon.ico"> <!-- ファビコンの表示 -->
</head>
<html>
<body>
<h1>大見出し</h1>
<h2>中見出し</h2>
<h3>小見出し</h3>
<p>こんにちは！<br>
<!-- <br>改行タグ -->
<strong> こんにちは！</strong></p>
<!-- <strong>で意味的に強調する -->
<hr>
<!-- <hr> 水平線を引く -->
<p><a href="http://google.com">Google！</a></p>
<!-- 別タブで開く target="_blank" —>
<p><a href="#rink">ページ内リンク</a></p>
<p id="rink">リンク先</p>
<ul>
<li>apple</li> <!-- list item -->
<li>banana</li>
</ul>
<!-- <ul> unordered list -->
<ol>
<li>apple</li>
<li>banana</li>
</ol>
<!-- <ol> ordered list —>
<!--
tr :table row (行)
th :table header
td :table data
-->
<table>
<thead>
<tr><th>name</th><th>2010</th><th>2011</th></tr>
</thead>
<tbody>
<tr><td>@shizuma</td><td>200</td><td>210</td></tr>
<tr><td>@shizuma</td><td>200</td><td>210</td></tr>
<tr><td>@shizuma</td><td>200</td><td>210</td></tr>
</tbody>
</table>
<img src="cart.jpg" width="500" height="280" alt="カートの写真" title="カートの写真">
<!-- キャプションの表示 -->
<form action="survey.php" method="post">
<p>名前 :<input type="text" name="name" size="60" maxlength="5" required></p>
<!-- required 入力を求める -->
<p>パスワード :<input type="password" name="password"></p>
<p><input type="hidden" name="user_id" value="32">
<p>メモ :<textarea name="memo"></textarea></p>
<p><input type="submit" value="送信！"></p>
<p>日付 :<input type="date" name="birthday"></p>
<p>URL :<input type="url" name="url">
<!-- radio 一つだけ選択
checkbox 複数選択
label 指定した文字を選択しても、チェックが入るようにする。→ユーザビリティーの向上 -->
<p>
Colors:
<label><input type="radio" name="color" value="red">Red</label>
<input type="radio" name="color" value="blue"><label for="blue">Blue</label>
<input type="radio" name="color" value="green">Green
</p>
<p>
Colors:
<input type="checkbox" name="color" value="red">Red
<input type="checkbox" name="color" value="blue">Blue
<input type="checkbox" name="color" value="green">Green
</p>
<!-- select
size :一度に複数の選択肢を表示
multiple :複数の同時選択を可能にする。 -->
<select name="color" size="5" multiple>
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
</select>
<p>email : <input type="submit" value="送信！"></p>
</form>
<!--
スタイリング
div :汎用ブロック要素（前後に改行が入る）
span: 汎用インライン要素（前後に改行が入らない）
id: その文書に一つだけの要素
class: 複数あっても良い
構造的
header
footer
nav
article 副次的情報
section-->
<div id="main">
<p>こんにちは！こんにちは！</p>
<p>こんにちは！<span class="notice">こんにちは！</span></p>
<p>こんにちは！<span class="notice">こんにちは！</span></p>
<header>
<h1>起業日記</h1>
<nav>
home
profile
</nav>
</header>
<article>
<h2>リリース完了！</h2>
<p>嬉しい</p>
</article>
<aside>
<h3>このサイトについて</h3>
@shizumaの起業日記です。
</aside>
<footer>
copyright 2014 @shizuma
</footer>
<!-- 実態参照
style 属性
script-->
<p>これは < p > です。</p>
<p style="color:red;">こんにちは！</p>
<script src="myscript.js"></script>
</body>
</html>
html入門補足
-
コメント
<!-- コメント -->数行でも可 -
スタイルの書き方
<style> p{ color:red;} </style>