Categories: プログラミング

【HTML】 HTML メモ

■HTMLに関するメモ


構造
<開始タグ タグに対する属性名=”値”> 内容 </終了タグ> タグには要素名と属性を指定する。
メモ
HTMLのタグは大文字小文字の区別はない。属性も基本的に無いがファイル名等は注意が必要
(XHTMはタグ、属性共に小文字で書く)
HTML内ではタグ外での改行は特に意味がない
基本の要素
文書型宣言
文字コード指定
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>

 
文書型宣言
Strict
(HTMLからデザインに関するものを取り除いた完全なHTML型)
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”>

Transitional(HTMLとスタイルシートを使う現在一般的な型)
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>

Frameset(Transitional型+フレームを使用する型)
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN”>

文字コード指定
<META http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
日本語の文字コードは”Shift_JISと””EUC-JP”と”ISO-2022-JP”(JIS)と”UTF-8″(UNICODE)等がある
基本的な要素(タグ)
要素には「ブロックレベル要素」と「インライン要素」がある。
ブロックレベル要素 = 見出しや段落、リストなどの文書を構成する基本的な要素の集合(1つで1行を構成)
インライン要素 = 行内の要素で修飾やリンク,グループ化などの機能があるものもある(1つの行に複数指定可)
<!– –> = コメント
<BR> = 改行
<P></P> = 段落(段落なのでIE等では改行して一行下に表示される)
<H1>~<H6>見出し(H1がもっとも上位の見出しで文字の大きさを指定するものではない)
<A HREF=”リンク先URL”>表示文字</A>
リンク先URLにmailto:送信先メールアドレス?subject=題名&cc=CCのメールアドレス&bcc=BCCのメールアドレス&body=本文”を使用するとメールの指定ができる
リンク先に#を付けると<H>タグと組み合わせでラベルとして扱える。<H1 id=””RADIO1″>には   HREF=”#RADIO1″で飛べる
<PRE></PRE> = 整形済みテキスト(空白文字や改行等をそのまま表示)
<CENTER></CENTER> = 中央揃え
<DIV 属性></DIV> = 囲まれた部分の位置を指定したりCSSを適用する(ブロックレベル)
<SPAN></SPAN> = 囲まれた部分の位置を指定したりCSSを適用する(インラインレベル)
<HR> = 水平罫線を引く 属性はalign=center size=1 width=200 or width=”85%” color=red等
<TABLE></TABLE> = <TR><TH><TD>と組み合わせて表を作成する
<OL><LI></LI></OL> = 連番付箇条書きリスト
<UL><LI></LI></UL> = 連番なし箇条書きリスト
<DL><DT><DD></DD></DT></DL> = 定義型リスト
<DEL cite=URL datetime=YYYY-MM-DDThh:mm:ss±hh:mm>~</DEL> = 削除したいけど表示に残したいとき
<INS cite=URL datetime=YYYY-MM-DDThh:mm:ss±hh:mm>~</INS> = <DEL>で削除した部分の修正を残したいとき
<img src=”File名” alt=”代替TEXTト” width=size height=size > 画像を表示(sizeは”%”又はピクセル)
widthとheightを両方指定するとアスペクト比が狂うことがあるので片方を指定する。
TABLEタグによる表の作り方
<TABLE></TABLE>の中に<TR>と<TD>or<TH>で表を作る
<THEAD><TFOOT><TBODY>で①ヘッダー、②フッター、③本体を分ける(順序は①②③で書くらしいが一部ブラウザーはそのまま表示してしまうらしいので①③②でいいような気も・・)
<TABLE>に指定できる属性
BORDER=枠の太さ RULES=格子の罫線 FRAME=外枠の罫線 WIDTH=表全体の横幅(“%”又はピクセル)
CELLSPACING=セル間の余白(“%”又はピクセル) CELLPADDING=文字と罫線間の余白(“%”又はピクセル)
<TABLE>の次の行に<CAPTION>~</CAPTION>内に表のタイトルを表示できる

<TABLE BORDER=1 RULES="ALL" FRAME="LHS" WIDTH=150
CELLSPACING=3 CELLPADDING=3> ← 表の属性はここで設定
<CAPTION>TUBE LIST</CAPTION> ← 表のタイトルを指定
 <THEAD> ← 表のヘッダー部分を指定
<TR><TH>BRAND</TH><TH>TYPE</TH><TH>Family</TH></TR> ←見出し項目は<TH>
 </THEAD>
<FOOT> ← 表のフッター部分を指定
<TR><TD COLSPAN=3>国産ブランド</TD></TR> ←横セルの結合はCOLSPAN
</FOOT>
<TBODY> ← 表の本体を指定
<TR><TD>NEC</TD><TD>6BM8</TD><TD ROWSPAN=3>6BM8 Family</TD></TR>
<TR><TD>HITACHI</TD><TD>11BM8</TD></TR> ↑縦セルを結合はROWSPAN
<TR><TD>SANYO</TD><TD>50BM8</TD></TR> ←普通の項目は<TD>
 </TBODY>
</TABLE>

 
出力

kabekin