LoginSignup
0
0
@__AJI__

【備忘録】HTML

Last updated at Posted at 2023-10-31

HTML（Hyper Text Markup Language）

1.htmlとは

文書を構造化し意味付けできるマークアップ言語。
拡張子：ファイル名.html
HTMLレンダリングエンジン：HTMLを解釈し、それに応じて描画する機能、またはその機能を備えたアプリケーション。
ex) IE, ChromeなどのWebブラウザ

2.タグ

基本構文

  • html：文章を全体を囲むタグ
  • head：文書に関する情報を記述するタグ
  • body：文書本文を記述するタグ
  • meta：文書におけるさまざまなメタデータ（文字コードや文書の概要、キーワードなどの文書に関する情報）を表す
  • !DOCTYPE html：このファイルがHTML5で記述されているという宣言
  • charset=”” 文字コードの宣言
    • UTF-8
    • Shift_JIS
<!DOCTYPE html>
  <head>
  <meta charset="utf-8">
  ここに文書に関する情報を記述
  </head>
  <body>
  ここに本文を記述
  </body>
</html>

h1 ~ h6

見出しタグ

<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

br

改行タグ

<html>
  <body>
    ここに本文
    <br>
    ここに本文
  </body>
</html>

p

段落タグ
囲われた部分ごとに改行される

<p>
  ここに本文
</p>

a

文字がリンクになる

<a href=”http://www.yahoo.co.jp/”>この文字がリンクになります。</a>

img

  • 画像を挿入する
  • src属性のURLの画像が入る
<img src=”https://codeprep.jp/api/books/1/cover”>

em

強調タグ

<em>この文字が強調される。</em>
<em>マークダウン記法の** 強調 **みたいな感じ</em>

button

ボタン

  • <input type="submit">との違い
    • 閉じタグがいる
    • form内に置いておくとデフォルトでsubmitが指定されるので何も書かずに済む
<button>この文字がボタンになる</button>

箇条書き

  • パンくず：Webサイトのファイル関係の現在の位置を表す
  • ul 箇条書きを宣言
  • li 箇条書きで記述
  • ol 番号書きで記述
<ul>
    <li>1箇条</li>
    <li>2箇条</li>
    <li>3箇条</li>
</ul>
<ul>
    <ol>1番</ol>
    <ol>2番</ol>
    <ol>3番</ol>
</ul>

input

  • type 種類を指定
    • textテキストフォーム
      • size 横幅を指定
      • maxlength 最大入力値を指定
      • placeholder 何も入力していないときに透けて見える文字を指定
    • checkbox チェックボックス
    • button ボタン
    • radio ラジオボタン、name要素をそろえることで連携
      • <label for="">radioのid名とfor名を同じにすると、ラベルの方をクリックしても選択できる
    • submit formで送信
    • その他 https://developer.mozilla.org/ja/docs/Web/HTML/Element/input

form

<form method="" action="">

  • method
    • GET actionに設定したURLに文字をそもまま張り付けて送る、内容が丸見えでセキュリティ面で非推奨
    • POST 要素をURLにつけずにかくして遅れるので安全
<form method="POST" action="https://hogehoge.com">
    <input type="text" name="hoge" value="">
</form>

select

  • プルダウンのセレクトボックス
  • selectの方でnameを設定し、optionでvalueを設定することでformで送信できる
<select name="name">
    <option value=""></option>
    <option value="1">01</option>
    <option value="2">02</option>
</select>

textarea

  • テキストエリア
  • cols 横に入る文字数
  • rows 縦に入る文字数
<textarea name="hoge" cols="30" rows="3"></textarea>

3. ファイル読み込み

link

  • aタグとは役割が大きく違う。
  • 外部ファイルやリンクを参照するためのもの。
  • 外部の公開ライブラリ(CDN Content Delivery Network) を参照できる。
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<a class="btn btn-primary" href="https://getbootstrap.com/docs/3.3/">Bootstrap</a>
<!-- リンクがボタンになる -->

css読み込み

<link rel="stylesheet" href="">

  • rel=""
    • 現在の文書から見たリンク先の関係
    • stylesheet スタイルシート(cssですよという宣言)
  • href=""
    • リンク先の指定
    • URL 読み込むスタイルシートファイルを指定
  • media=""
    • 対象とするメディア
    • all すべて
    • screen パソコンやスマホ
    • print プリンタ
<link rel="stylesheet" href=".css/style.css" media="all">

JSファイル読み込み

<script src="./js/main.js"></script>
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>

参考

codeprep

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0