HTMLおぼえがき

HTMLCSSJavaScript/HTMLJavaScriptサイトマップホーム


書き方を忘れた場合にご活用ください。詳細は記述しておりません。

No 分類 タグと説明 使用例・サンプル
1 文書情報・構造 <!DOCTYPE> :ドキュメントタイプを宣言する
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-language" content="ja">
<meta charset="UTF-8">
<TITLE>文書タイトル</TITLE>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="css/xxx.css">
</head>
<body> 
<h1>見出し</h1>
<p>パラグラフ</p>
</body>
</html>
<html> :HTML文書であることを宣言する
<head> :文書のヘッダ情報を表す
<meta> :その文書に関する情報(メタ情報)を指定する
<title> :文書にタイトルをつける
<body> :文書の本体を表す
<h1>~<h6> :見出しを付ける
<p> :ひとつの段落(パラグラフ)であることを表す
2 コンテンツの分類 <p>:ひとつの段落(パラグラフ)であることを表す
<hr>:テーマや話題の区切りを表す(横罫線を引く) <hr>
<pre>:半角スペースや改行をそのまま表示する
3 テキストの表現 <b>:テキストを太字にする <b>太文字</b> 太文字
<i>:テキストを斜体(イタリック)にする <i>斜体</i> 斜体
<u>:テキストに下線(アンダーライン)を引く <u>xxxx</u> xxxx
<sub>:下付き文字を表す Z<sub>zz</sub> Zzz
<sup>:上付き文字を表す Z<sup>zz</sup> Zzz
<br>:改行する
4 範囲指定 <div>:ひとかたまりの範囲として定義する(ブロック要素)
<span>:ひとかたまりの範囲として定義する(インライン要素)
5 コンテンツの
埋め込み
<img>:画像を表示する <img src="img/yasai.jpg" width="60" height="50">
<iframe>:インラインフレームを作る <iframe style="border: 0; width: 100% ; height: 100px; margin:0; padding: 0;"
scrolling="no" frameborder="0" src="xxx.html"></iframe>
<video>:動画を再生する※ <video src="Xperia.mp4" controls style="width:160px;height:90px"></video>
<audio>:音声を再生する※ <audio controls><source src="Yesterday.mp3">
<source src="Yesterday.ogg"> </audio>
<canvas>:図形を描く※  参考
<svg>※
6 リスト <ol>:順序のあるリストを表示する  参考
<ul>:順序のないリストを表示する
<li>:リストの項目を記述する
<dl>:定義・説明リストを表す
<dt>:定義・説明される言葉を表す
<dd>:定義用語や言葉の説明をする
7 表・レイアウト <table> :テーブル(表)を作成する  参考
<tr> :テーブル(表)の横方向の一行を定義する
<th> :テーブル(表)の見出しセルを作成する
<td> :テーブル(表)のデータセルを作成する
<thead> :テーブル(表)のヘッダ行を定義する
<tfoot> :テーブル(表)のフッタ行を定義する
<tbody> :テーブル(表)のボディ部分を定義する
<caption> :テーブル(表)にタイトルをつける
<hr> :横罫線を引く
8 入力フォーム <form> :入力・送信フォームを作成する  参考
<button> :ボタンを作成する
<Iinput type="submit"> :フォームの送信ボタンを作成する
<input type="image"> :フォームの画像ボタンを作成する
<input type="button"> :フォームの汎用ボタンを作成する
<input type="text"> :一行テキストボックスを作成する
<input type="password"> :パスワード入力欄を作成する
<input type="radio"> :ラジオボタンを作成する
<input type="checkbox"> :チェックボックスを作成する
<input type="hidden"> :非表示データを送信する
<input type="file"> :サーバーにファイルを送信する
<select> :セレクトボックスを作成する
<optiongroup> :セレクトボックスの選択肢をグループ化する
<option> :セレクトボックスの選択肢を指定する
<textarea> :複数行の入力フィールドを作成する
9 リンク <a>:ハイパーリンクを指定する <a href="#go">ページ内移動</a>
<a href="htt://tomari.org">URLへジャンプ</a>
<link> <link rel="stylesheet" type="text/css" href="css/tom.css">
10 スクリプト <script> :文書にスクリプトを埋め込む
11 スタイルシート <style> :スタイルシートを記述する
12 コメント <!---->:ソース中にコメントを入れる

HTMLCSSJavaScript/HTMLJavaScriptサイトマップホーム