HTML（Hyper Text Markup Language）
1.htmlとは
文書を構造化し意味付けできるマークアップ言語。
拡張子：ファイル名.html
HTMLレンダリングエンジン：HTMLを解釈し、それに応じて描画する機能、またはその機能を備えたアプリケーション。
ex) IE, ChromeなどのWebブラウザ
2.タグ
基本構文
-
html：文章を全体を囲むタグ -
head：文書に関する情報を記述するタグ -
body：文書本文を記述するタグ -
meta：文書におけるさまざまなメタデータ（文字コードや文書の概要、キーワードなどの文書に関する情報）を表す -
!DOCTYPE html：このファイルがHTML5で記述されているという宣言 -
charset=””文字コードの宣言UTF-8Shift_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名を同じにすると、ラベルの方をクリックしても選択できる
-
-
submitformで送信 - その他 https://developer.mozilla.org/ja/docs/Web/HTML/Element/input
-
form
<form method="" action="">
-
method-
GETactionに設定した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>