Help us understand the problem. What is going on with this article?

html 基礎・基本のタグ #1

html 基礎・基本のタグ

htmlの学習メモとして今回からここに、勉強したことの一部をメモ書きしていこうと思います。
なるべく誰が見てもわかりやすいように書きますが、初心者の方が見ると「なんでそうなる?」と疑問になるとこが出るかもしれません。
そこは、質問等投げてくれれば回答しますので一緒に学んでいきましょう。

htmlを勉強するのは、webフロント技術を学ぶ上で最初に触れておきたい言語だからです
html:Hyper Text Markup Language

ここからはタグについての説明です。(一部説明不足があるかもです)


  • <!DOCTYPE html> htmlのバージョンを明示するのに使う
  • <html></html> htmlの基点となるタグ
  • <head></head> html全体に影響する情報を含むタグ
  • <body></body> htmlのコンテンツ本体を表すタグ

  • <meta charset="utf-8">
    • meta サイトの情報を扱うのに利用する
    • charset 文字コードの記述に利用する
  • <script src=" "></script>
    • scriptタグは、htmlに適用するscriptを選択するのに使用する。
    • bodyやheadのどこにでも自由に配置できる
  • <link rel="stylesheet" href=" ">
    • linkタグは、外部リソースとhtmlを関連付けるのに使用する

  • <div></div> (ブロックレベル要素)親要素の領域全体を占有するエリアを形成する。また、要素の後ろに改行が入る。
  • <span></span> (インライン要素)要素と紐づけられたエリアのみを形成する。(文字列など) 改行は入らない。
  • <h1></h1> 見出しを作るのに使用する。見出しは、h1からh6まである。数字が大きくなるごとにサイズも小さくなる。
  • <p></p> 段落を作るのに利用する。
  • <br> 文章を改行するのに利用する。
  • <ul> <li> </li> </ul> Unordered List 順不同のリストを作成する
  • <ol> <li> /<li> <ol> Ordered List 順序付きのリストを作成する

  • <img src="image.png" alt="">
    • srcは画像のアドレスを設定
    • altは画像が読み込まれなかったときに表示する画像の説明文を設定する
  • <a href="url" target=" " rel=" "></a>
    • <a>はリンクを付けるのに使用する
    • href リンク先またはurlを設定する
    • target リンク先を表示するタブを指定する。
      • _blank 新規でウィンドウを開く
      • _self 自分自身のウィンドウに表示
      • ほかにもいくつかあります
    • rel リンク先とのページの関係を決めるのに利用する
  • <table> <tbody> </tbody> </table> 内容をひとまとまりに表すのに利用する。
    • <tr></tr> 行を作成するのに使用
    • <td></td> trタグの中にtdタグをいれて 列を作るのに利用する

  • <form method=" " action=" "></form> フォームを作成
    • method httpメソッドを選択する postとget
    • action formで送信したデータを処理するプログラムがあるところを設定する
  • <input type="text" name=" "> formタグ内で使用。入力場所を作成
    • type 入力する型を選択 デフォはtext
  • <textarea name=" "></textarea> formタグ内で使用。複数行入力可能。
  • ` formタグ内で使用。ボタン作成

まだまだ、たくさんタグはあると思いますが基礎・基本というところで
最初はこのくらいを学習しました。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした