学習2日目！昨日のこと覚えてるかな？ww
やばーい、腹痛とか吐き気が酷い、、、
それでも、今日も頑張っていきましょう！
今日は実際にコードを書き始めます。
今日の段階で一旦で作成したものの写真もアップします！
ブロックレベル要素
昨日の投稿にも記載したけど、新しく行を作製するタグをブロックレベル要素といいます。
ブロックレベル要素例 一覧
<h1> 〜<h6>
文章の優先順位を指定するタグ。
<header>
ヘッダー領域の作成。ホームページの1番上の案内などを書くことが多い。
<footer>
フッター領域の作成。ホームページの一番下の案内や権利についての記載が多い。
<div>
グループ分けに多く利用。CSSとの連携に多く利用される。
<ul>
<li>(リスト)を中に組み込むことで点の付いた一覧を作ることが出来る。また、CSSを利用することで横並びにすることも可能。
<ol>
<li>(リスト)を中に組み込むことで番号の付いた一覧を作ることが出来る。
<table>
<tr>(行) <td>(セル)を内蔵し表を作成することが出来る。
<section>
ページ内を区分する。
<article>
独立したコンテンツを作成する。Twitterのスレなど。
<nav>
ウェブサイト内のリンクとなる。
<form>
入力フォームを作成する。
<p>
段落として設定。
インライン要素
インライン要素は改行を伴わないタグ。
ここで特に重要なことはhtmlを書いている際、コードを改行しても文字は改行されない。
インライン要素例 一覧
<a>
ハイパーリンク(URL)を記載することが可能
<br>
改行。
<img>
画像挿入が可能。
<span>
スタイルを適用するためのタグ。
<code>
コードを挿入。
<q>
引用欄を挿入。
<strong>
文字を強調表示する。
実際書いてみた！！
写真がでかすぎたので一部CSSで調整しました。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>タイトル</title>
<link rel="stylesheet" href="html 練習用.css">
</head>
<body>
<header>
<h1>テキスト</h1>
<h2>テキスト</h1>
<h3>テキスト</h1>
<h4>テキスト</h1>
<h5>テキスト</h5>
<h6>テキスト</h6>
</header>
<section>
<table>
<tr>
<td>１</td>
<td>２</td>
<td>３</td>
</tr>
<tr>
<td>４</td>
<td>５</td>
<td>６</td>
</tr>
</table>
</section>
<p>
<img class="img" src="images/example.png" alt="サンプル画像">
</p>
<ul>
<li>リスト１</li>
<li>リスト２</li>
</ul>
<article>
こんにちは。
今日はいい天気ですね
</article>
<br>
<p>
今回の説明でわからない点がありましたら
<a href="##">こちら</a>
までご連絡ください。
</p>
<form action="##">
<p>お名前：<input type="text"></p>
<p>メールアドレス：<input type="text"></p>
</form>
<footer>
本日はありがとうございました。
</footer>
</body>
</html>こんな感じで紹介したいろいろな要素を組み込んでみました。
そしたらこんな感じになりました。
写真やリスト、入力欄などができました。
明日は属性について勉強します！！
この記事が気に入ったらサポートをしてみませんか？