うわべのうわべ ３．サイト作り HTMLでよく使うタグ一覧まとめ

HTMLでよく使うタグ一覧まとめ

2016年7月11日2016年7月11日 | uwabejinmaxuwabejinmax | コメントなし | 10:35 AM
Categories:

HP作成時に良く使うHTMLタグと使い方まとめ

HP作成時、特にこだわりがなければほとんど同じタグを使いまわすことができます。
そこで、頻出タグをまとめます。これだけあれば何とか形になります。

■HTMLタグ一覧

タグ 説明
<div></div> これで囲んでも、特に何も起きない。このタグに囲まれた要素を一つにまとめて、idやclassでCSSと連携し様々な設定ができる。
<a></a> 次の属性をつけて、文字列に効果を与える。

  • href：リンクをつける
  • name：リンクで飛ばす先として指定すると、この文字をトップに表示してくれる
    		•
    <form></form> ページ間等でデータの送信をするために使う。このタグに囲まれた<input>タグなどのデータをやり取りする。
    <input></input> データの入力を行ったり、そのデータの送信をするために用いる。formタグにはさんで使う。主な属性は次。

  • type=”button”
  • type=”checkbox”
  • type=”file”
  • type=”radio”
  • type=”submit”
  • type=”text”
    		•
    <input></input> データの入力を行ったり、そのデータの送信をするために用いる。formタグにはさんで使う。主な属性は次。

  • type=”checkbox”：複数選択肢の中から複数選択させる
  • type=”radio”：複数選択肢の中から単一に選択させる
  • type=”file”：ファイルの選択をしてアップロードする
  • type=”submit”：送信ボタンを作る
  • type=”text”：文字の入力をする
    		•
    <textarea></textarea> 文字の入力を行うために用いる。formタグにはさんで使うことで送信できる。
    <img></img> 画像を表示する。

    ■HTMLタグの使用例

    使用例

    <!DOCTYPE html>
    <html>

    <head>
    <meta content=”ja” http-equiv=”Content-Language”>
    <meta content=”text/html; charset=utf-8″ http-equiv=”Content-Type”>
    <title>test</title>
    </head>

    <body>
    <div id=”cssname1″>
    <form action=”test.php” method=”post”>
    <input name=”Text1″ style=”width: 198px; height: 56px” type=”text”>
    <input name=”Submit1″ type=”submit” value=”submit”>
    <input id=”cateText1″ name=”test” style=”width: 135px; height: 20px;” type=”text” maxlength=”10″ />
    <input type=”text” name=”名前” value=”初期値”>
    <textarea id=”textBox” name=”TextArea1″ cols=”20″ rows=”2″ maxlength=”400″ style=”font-size:x-large”></textarea>
    <a href=”test2.html”>asaaaa</a>

    </form>
    <img src=”相対パス＆絶対パス”>

    </div>
    </body>

    </html>

    [adcode1]

    ■まとめ

    一、タグはたくさん覚えなくてもなんとかなる
    二、属性を理解して使い分ける必要がある

    [adcode0]

    タグ: ,

    Related Post