記事概要
HTMLのbody要素について、まとめる。
まとめ(body要素)
header要素
Webページ最上部のヘッダー専用のブロックレベル要素
※head要素とは異なる
main要素
主要なコンテンツを記載する要素
footer要素
Webページ最下部のフッター専用のブロックレベル要素
h1 ~ h6要素(見出し要素)
文章の見出しを作る要素
<h1>見出し1</h1>
<h2>見出し2</h2>
p要素
文章の段落を表す要素
<p>段落</p>
br要素
テキストを改行するための要素
文章はここで<br>改行される
b要素
文字を太くする要素
文章は<b>ここが太字</b>になる
a要素
- テキストをリンクにする要素
- クリックすると特定のページに移動する
href属性
リンクの移動先を指定する属性
<a href="https://www.google.com/">クリックすると、Googleへ移動</a>
サンプルコードのhtml/index_a.htmlを参照
span要素
- テキストの一部だけを装飾するために使用される要素
- 部分的にテキストの装飾を変更するために使用する
文章の一部のみ<span>装飾する</span>ことができる
div要素
- 特定の意味が無い要素
- 汎用的に様々な用途で使うことができる
- レイアウトを作成する際に重宝される
ul要素
順序のないリストを示すブロックレベル要素
li要素
- リストの項目を示すブロックレベル要素
- ul要素の子要素として記述する
<div>
リスト
<ul>
<li>アイテム1</li>
<li>アイテム2</li>
<li>アイテム3</li>
</ul>
</div>
サンプルコードのhtml/index_ul_li.htmlを参照
img要素
Webサイト上に画像を表示することができる要素
src属性
画像の場所を指定する属性
alt属性
画像が表示されなかった場合に代替テキストなどを表示するための属性
<img src="images/sample-1.jpg" alt="サンプル画像です">
サンプルコードのhtml/index_img.htmlを参照
form要素
- フォーム関連要素の集まりを表すブロック要素
-
<form></form>のなかに、入力フォームや送信フォームを作成
action属性
リクエスト先のURLを指定する属性
<!-- ローカルサーバーで起動しているアプリケーションの場合、「localhost:3000/items」へ、フォームに記載した内容がリクエストとして送信される -->
<form action="/items" method="post">
</form>
method属性
リクエストに使用されるHTTPメソッドを指定する属性
<!-- フォームに記載した内容を送信する際のHTTPメソッドとして、データを送信する際に使用するPOSTを指定している -->
<form action="/items" method="post">
</form>
input要素
フォームの入力欄や実行ボタンなどを作成することができるインライン要素
type属性
様々な種類のフォーム部品を作り出せる属性
| type属性 | 装飾結果 |
|---|---|
| text | １行のテキスト入力欄を作成します |
| checkbox | チェックボックスを複数作成することができます |
| radio | 複数の中から１つしか選択できない、ラジオボタンを作ります |
| submit | 送信ボタンを作ります |
placeholder属性
入力フォームに仮の文字列を入れることができる属性
value属性
- フォームの送信時に、どのような値を送信するのかを決めることができる
- 送信ボタンの場合、value属性で指定した文字が、送信ボタンに表示される
textarea要素
複数行のテキスト入力欄を作成するインライン要素
name属性
- フォームに入力して送信するデータの名前を設定する
- サーバーとのやり取りに関係するものである
サンプルコードのhtml/index_form.htmlを参照