htmlタグ

!DOCTYPE

ドキュメントのタイプを指定

<!-- html5 -->
<!DOCTYPE html>

head

ヘッダタグ

link

CSSの読み込みなど

<link rel='stylesheet' href='./style.css'>

faviconの指定

<link rel='shortcut icon' href='./favicon.icon'>

body

本文を書く

h1 ~ h6

見出し

p

パラグラフ文章の段落

<p>この文章が１段落です</p>

br

改行タグ

<p>１行目<br>2行目</p>

strong

強調 <p>重要な文を<strong>強調</strong></p> bタグとは違い意味的な強調

hr

水平線

リスト (ul, ol, li)

li

リストの要素

List Item

ul

順序なしのリスト(箇条書き)

Unordered List

ol

順序つきのリスト

Ordered List

html -> mdの例

<ul>
  <li>Ruby</li>
  <li>Scala</li>
  <li>Clojure</li>
</ul>

Ruby
Scala
Clojure

<ol>
  <li>Ruby</li>
  <li>Scala</li>
  <li>Clojure</li>
</ol>

Ruby
Scala
Clojure

テーブル

table

テーブルタグ

thead

テーブルヘッダ

tbody

テーブルの内容

tr

Table Row - テーブルの行

th

Table Header - テーブルのヘッダ要素

td

Table Data - テーブルのデータ要素

例

<table>
  <thead>
    <tr><th>name</th><th>vm</th></tr>
  </thead>
  <tbody>
    <tr><td>Java</td><td>jvm</td></tr>
    <tr><td>Scala</td><td>jvm</td></tr>
    <tr><td>D</td><td>None</td></tr>
  </tbody>
</table>

name	vm
Java	jvm
Scala	jvm
D	None

a

リンク

href -> リンク先のURI
title -> リンクの名前
target -> _brankで別のタブへ

hrefに#idを指定すると指定したidに飛ぶ

タグで囲まれた部分がリンクの実際のテキストになる

<a href="http://google.com" target="_brank">google</a>

google

img

画像の表示

src -> 表示する画像
alt -> 表示出来ない場合の代わりのテキスト
title -> 画像の名前
width, height -> 高さ

<img src="img.jpg" alt="no" title="image" width="240" height="160">

フォーム

form

フォームタグ

action -> 送信先のURI
method -> HTTPメソッド

input

テキストなど

type
- text -> テキスト
- password -> 伏せ字
- submit -> 送信ボタンなど
- hidden -> 隠しデータ
- date -> 日付
- url -> URL
- radio -> radioボタン。後述
- checkbox -> チェックボックス。後述
name -> 送信先で識別するための名前
value -> 初期値
required -> 必須の値

input-radio

ラジオボタン

<input type="radio" name="radio" value="red">Red
<input type="radio" name="radio" value="blue">Blue
<input type="radio" name="radio" value="green">Green
<!-- name毎に一つの要素を選ばせる -->
<input type="radio" name="color" value="pink">Pink

Red Blue Green Pink

input-checkbox

チェックボックス

<input type="checkbox" name="box" value="red">Red
<input type="checkbox" name="box" value="blue">Blue
<input type="checkbox" name="box" value="green">Green

Red Blue Green

label

チェックボックス、ラジオボタンで、そのテキストを関連付けるために使用する

<p><label><input type="radio" name="radio" value="yellow">Yellow</label></p>

textarea

テキストボックス

select

セレクトボックス

<select name="color" size="5">
  <option value="red">Red</option>
  <option value="blue">Blue</option>
  <option value="green">Green</option>
  <option value="pink">Pink</option>
  <option value="purple">Purple</option>
  <option value="white">White</option>
  <option value="black">Black</option>
</select>

div, span

スタイリングに使用する

div

汎用ブロック要素

span

汎用インライン要素

id

文章中一つだけ存在する要素を指定する

class

文章中何度でも使用できる

<div class="test" id="tests1">
  <p>test test test</p>
  <p>test test test</p>
</div>

<div class="test">
  <p>test <span class="centre">test</span> test</p>
  <p>test <span class="centre">test</span> test</p>
</div>

文章構造

header

ヘッダー

footer

フッター

nav

ナビゲーション

article

本文

aside

副次的な情報

section

これらに分類出来ないが文章的にまとまっているも

<header>
  <h1>タイトル</h1>
  <nav>
    home
    about
  </nav>
</header>

<article>
  <h2>文章見出し</h2>
  <p>文章本文</p>
</article>

<aside>
  <h3>この文書について</h3>
  <p>説明</p>
</aside>

<footer>
  copyright 2014 ©john
</footer>

実体参照

タグを文章として書きたい場合など、HTMLで特別な扱いの文字を表す

元の文字	実体参照
<	`<`
>	`>`
&	`&amp`
	` `
"	`"`

style

スタイルシートの記述をhtmlタグに書ける

<p style="color:red;">Red</p>

script

JavaScriptのソースを記述する

src -> 読み込むJavaScriptファイル

<script src="script.js"></script>
<!-- 直書きも出来る -->
<script>
  alert(1);
</script>

This text is licensed under the Creative Commons Attribution 4.0 International License.

rigibun/html.md