Skip to content

Instantly share code, notes, and snippets.

@Momozono Momozono/html_study.html
Last active Aug 30, 2015

Embed
What would you like to do?
Study for my HTML.
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>おいしいごはん!</title>
<head>
<body>
<header>
<div style="background:skyblue;">
<h1>おいしいごはん!</h1>
<nav>
- Home
- About
- Profile
</nav>
</div>
</header>
<section>
<h2>今日のおすすめメニュー!</h2>
<article>
<h2>至高のTKG</h2>
<p><strong>至高のTKGの作り方には秘密があった...!</strong></p>
<a href="#zairyo" target="_blank">材料についてはこちら</a>
<h2>作り方</h2>
<h3 id="zairyo">材料</h3>
<ul>
<li><span style="color:gold;">たまご</span></li>
<li>秘伝のしょうゆ</li>
<li>ごはん</li>
<li>あじの素</li>
</ul>
<h3>作り方</h3>
<ol>
<li>ごはんを炊く</li>
<li>茶碗にごはんをのせる</li>
<li>卵をボウルに入れてかき混ぜる</li>
<li>かき混ぜた卵をごはんにのせる</li>
<li>完成!</li>
</ol>
<table>
<thead>
<tr>
<th>Size</th><th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>S</td><td>180</td>
</tr>
<tr>
<td>M</td><td>210</td>
</tr>
<tr>
<td>L</td><td>240</td>
</tr>
<tr>
<td colspan="2">free for kids!</td>
</tr>
</tbody>
</table>
<article>
<h3>アンケート</h3>
<form action="survey.php" method="post">
<p>メールアドレス:<input type="text" name="email" size="50" maxlength="20" placeholder="input your email" disabled></p>
<p>ログイン:<input type="password" name="password"></p>
<p>コメント:
<textarea name="comment" cols="40" rows="5">コメント</textarea>
</p>
Phone Type:
<label>
<input type="checkbox" name="phone" value="android" checked>Android
</label>
<label>
<input type="checkbox" name="phone" value="iphone">iPhone
</label>
<p>
Color:
<label>
<input type="radio" name="color" value="red" checked>Red
</label>
<label>
<input type="radio" name="color" value="blue" >Blue
</label>
</p><!--片方どちらかしか選ばせないならラジオボタン-->
<p>
<button type="button"><strong>アクション!</strong></button>
</p>
<p>
City:
<select name="city" multiple size="6">
<option value="tokyo" selected>Tokyo</option>
<option value="osaka">Osaka</option>
<option value="nagoya">Nagoya</option>
<option value="kyoto">Kyoto</option>
<option value="hiroshima">Hiroshima</option>
<option value="hukuoka">Hukuoka</option>
</select>
</p>
<p>
&lt;p&gt;タグは段落を表します。」
</p>
<input type="hidden" name="user_id" value="1234">
<p><input type="submit" value="送信!" disabled></p>
</form>
</article>
<hr>
詳細は以下のリンクをクリック
<a href="https://www.google.co.jp/search?q=google.com&oq=google.com&aqs=chrome..69i60l2j5j69i57j69i60l2.4707j0j7&sourceid=chrome&es_sm=91&ie=UTF-8#q=%E3%81%8A%E3%81%84%E3%81%97%E3%81%84TKG">クリック!</a>
</article>
</section>
<section>
<h1>昨日のおすすめメニュー!</h1>
<article>
<h1>しっとりパンケーキ</h1>
</article>
</section>
<section>
<h1>今月のおすすめメニュー!</h1>
<article>
<h1>おいしい変わり肉じゃが</h1>
</article>
</section>
<aside>
<h1>おすすめのレシピ本</h1>
- おすすめレシピBOOK
- おすすめレシピBOOK
- おすすめレシピBOOK
</aside>
<pre>
これやこの
いくもかへるもわかれては
しるもしらぬもあふさかのせき
</pre>
<footer>
このページはmomozonoによって作られています。
</footer>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.