これからhtmlを学ぶ人のためのhtml基本構文集
1.1 一般的なタグ
一般的なタグは、次の構文のOpening TagとEnding Tagで構成されます: <x>ControlledText</x>
ここで、xはタグ名を表します。 <x>と</x>はスイッチのようなもので、開始マーカー <x> はある機能に対してオン(ON)、終了マーカー </x> (通常はスラッシュ/のついた開始マーカー)はその機能に対してオフ(OFF)、制御テキスト情報は二つのマークの間に配置されることになります。例えば、<i>をイタリック体にしているのは、</i>である。
また、タグに属性を付けて、特定の特殊効果や機能を実現することもできる。例えば、次のようになります。,an="vn">Controlled text</x>
ここで、a1,a2,...は は属性名、v1,v2,...は属性名である。,vnは、対応する属性値である。属性値は、引用符を付けても付けなくても、現在使われているすべてのブラウザで受け入れられますが、新しいW3C標準によると、属性値は引用符を付けるべきだとされているので、引用符を付ける習慣をつけるとよいでしょう。
1.2 空のタグ
ほとんどのタグはペアで表示されますが、中には別々に存在するものもあります。これらの独立したタグは、エンプティタグと呼ばれます。構文は次のとおりです: <x>
同様に、Emptyタグには、何らかの特別な効果や機能を実現するために、何らかの属性が付けられることがあります。例えば、<x a1="v1",a2="v2",...といった具合です。,an="vn">, 例: <hr>,<br>, などです。
W3Cが定義した新しい規格(XHTML1.0/HTML4.0)では、空タグは/で終わる、つまり <X /> とすることが推奨されています。
追加属性の場合: <x a1="v1",a2="v2",...。,an="vn"/>。
現在使用されているブラウザでは、空タグの後に/を付けるか否かについて厳密な規定はありません。つまり、空タグの最後に/を付けても付けなくても、その機能には影響がありません。しかし、文書を最新の規格に適合させたい場合は、/をつけるのがベストです。
2. HTMLタグの分類
2.1 文書構造タグ
これらのタグの目的は、文書の構造を示すことであり、主なものは次のとおりである。
<html>... </html>:htmlファイルの開始と終了をマークします。
<head>... </head>:文書のヘッダー部分をマークします。
<body>... </body>:文書の本文の領域をマークします。
2.2 ブロックフォーマットタグ
これらのタグの主な目的は、HTML文書内のテキストブロックを特定のフォーマットで表示し、文書の閲覧性を高めることである。主なものは以下の通りです。
<title>... </title>:ドキュメントのタイトルです。
<hi>... </hi>:i=1,2,.... ,6,ページタイトルです。
<hr>:Generate horizontal lines.
<br>:強制的に改行します。
<p>... </p>:段落を文書化します。
<pre>... </pre>:オリジナルフォーマットで表示します。
<address>... </address>:連絡先の名前、電話、住所などの情報を表示します。
<blockquote>... </blockquote>:ゾーンリファレンスマーカー。
2.3 文字組版タグ
HTML文書のテキストの外観を変更したり、美観を加えたりするために使用します。主なものは以下の通り。
<b>... </b>:太字にします。
<i>... </i>:Italics.
<tt>... </tt>:タイプフォントを使用します。
<font>... </font>:フォントの設定を変更します。
<center>... </center>:中央揃えにします。
<blink>... </blink>:テキストを点滅させます。
<big>... </big>:フォントサイズを大きくします。
<small>... </small>:フォントサイズを小さくします。
<cite>... </cite>:参考文献です。
2.4 リストタグ
<ul>... </ul>:Unnumbered lists.
<ol>... </ol:番号付きリストです。
<li>... </li>:リスト項目です。
<dl>... </dl>:定義済みリストです。
<dd>... </dd>:項目を定義します。
<dt>... </dt>:プロジェクトを定義する。
<dir>... </dir>:ディレクトリ形式のリストです。
<menu>... </menu>:メニュー形式のリストです。
2.5 リンクタグ(アンカータグ)
リンクは、htmlのハイパーテキスト文書の生命線とも言える。htmlは、世界中に散らばるグラフィック、テキスト、ビデオ、オーディオなどの情報をリンクタグで統合している。このようなマークアップの主な用途は、ハイパーテキスト文書のリンク(Hypertext Link)をマークすることであり、主に
<a>... </a>:ハイパーテキストリンクを作成します。
2.6 マルチメディアタグ(MMT)
これらのタグは、画像データを表示するために使用されます。主なものは以下の通りです。
<img>:Embedded image.
<embed>:マルチメディアオブジェクトを埋め込む。
<bgsound>:BGMです。
2.7 テーブルタグ (表札)
このタイプのタグは、テーブルを作成するために使用されます。主なものは以下の通りです。
<table>... </table>:テーブルのフィールドを定義します。
<caption>... </caption>:テーブルのタイトルです。
<th>... </th>:テーブルのヘッダーです。
<tr>... </tr>:テーブルの列です。
<td>... </td>:表のセルです。
2.8 フォームタグ
このようなタグは、インタラクティブなフォームを作るために使われ、主なものは以下の通りです。
<Form>... </form>:フォームセグメントの開始と終了を表します。
<input>:1 行のテキストボックス、ラジオボタン、チェックボックスなどを生成します。
<textarea>... </textarea>:複数行の入力テキストボックスを生成します。
<select>... </select>:dropdown リストの開始と終了をマークします。
<option>... </option>:ドロップダウンリストの選択項目を生成します。
HTMLタグは大文字と小文字を区別しませんので、 <BODY> と <body> は同じです。これらのタグについては、以下で個別に説明します。
3. 文書構造マークアップ
htmlファイルの構造は基本的に2つに分けることができ、1つはヘッドセクションと呼ばれ、もう1つはボディセクションと呼ばれます。ヘッドセクションがどこに属し、ボディセクションがどこに属するかを示すために、文書構造マークアップが使用されます。
3.1<html>: 文書全体へのマーク付け
使用方法:htmlファイル全体をマークアップする
説明 標準的なhtmlファイルは、<html>で始まり、</html>で終わる文書である。つまり
<html>
... htmlドキュメント全体
</html>
3.2<head>:Mark out 文書タイトル領域
説明 htmlファイルのうち、<head>と</head>で挟まれた領域をヘッダー領域と呼びます。通常、head部分はhtml部分に埋め込まれている、すなわち
<html>
<head>
.......................htmlファイルヘッダー部
</head>
.....
</html>
3.3<タイトル>:ページタイトル
<title>... </title> は、htmlファイルのタイトル領域で最も重要かつ最も一般的に使用されるタグです。タイトル部分の他のタグには、<base>, <isindex>, <link>, <nextid>, <meta> 等があります。
<title> タグは、ページのタイトルを設定するためのもので、ブラウザのウィンドウのタイトルバーに表示され、ブラウザのページ(頁)テキストには表示されません。このファイルのタイトルは、ほとんどのブラウザの「お気に入り」「ブックマーク」「履歴一覧」機能の名前としても使用されます。
タイトル別>... </title> でマークされたテキストの長さに制限はありませんが、長すぎるタイトルは時に切り捨てられ、覚えられなくなることがあります。
3.4<body>:文書本体部分をマークアウトする
説明 htmlファイルにおいて、<body>... </body> で囲まれた領域を文書のボディ領域と呼び、通常は <head> セクションの後に記述します。
3.5 <body>タグのプロパティー
backgroud属性です。
この属性では、背景パターンとして使用するグラフィック・ファイル(通常は gif または jpeg)を指定します。このグラフィックは、ページ全体のベース画像を形成するためにタイルのように並べられます。
関連
-
div+css3を使用したグラデーション背景のボタンのコード例
-
HTML to PDFのピュアクライアントサイドおよびピュアサーバーサイドの実装プログラム
-
HTMLページのスクロールは、コンテンツの位置の一部が固定されていない場合の実装
-
divタグの要素margin-topが機能しない場合の解決方法
-
html.cssのオーバーフローを総合的に理解する。
-
html 固定タイトル列、タイトルヘッダーテーブル固有の実装コード
-
htmlページ! --[IEの場合]...! [endif]--詳細を使用する
-
html css 制御 div または table を実装方法の指定位置で固定する。
-
doctypeのマークアップ検証
-
IEにおけるDOCTYPEの役割
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン