More than 1 year has passed since last update.

HTMLの基礎を学び直す

Posted at 2023-03-19

サイトが反応しないために<>で閉じてない箇所があり見辛くなっています。すみません。

HTMLの基本構文

<p>pは段落って意味。paragraph</p>

<>で始まり、>で終わる。

基本構造

HTML文書
ーDOCTYPE宣言〜HTMLの種類を宣言ー
ーhtml要素〜HTML文章の最上位要素ー↓
head要素〜文書タイトル、関連ファイル、文字コードなど。Webページに表示されない部分
body要素〜本文。Webページに表示される部分

↓例で表すと

<!DOCTYPE html>
<html lang="ja"> <!-- 日本語でHTML書くよ〜 -->
 <head>
  <meta charset="utf-8">　　<!-- 文字化け防ぎ。これで日本語OK。このmetaは終了タグはない -->
  <title>これが基本！</title>
 </head>
 <body>
  <h1>でっかい見出し</h1>
  <p>文章です</p>
 </body>
<html>

基礎要素

　ー文章

　ー意味を持たない凡用ブロック

　ーセクションをグループ化。意味のあるグループをまとめる。メインの中が多い　ーセクションのヘッダーを示す　ーセクションのフッターを示す　ー文章のメインコンテンツ　ー記事コンテンツ。コメント欄とかも。メインの中が多い　ー余談場所。サイドバーとか広告表示ーナビゲーション。リストのとこに。ヘッダーの中ー意味を持たない要素。文章の特定の部分をCSSで装飾したい時に使う。divはブロック。spanはインライン

<h1,<h2,<h3　ー見出し。1~6まであり、数字１が一番大きい。（h1は一つのページに一つまでが好ましい）
<br　ー　改行(閉じいらない)
<hr　ー　区切り(閉じいらない)
<strong　ー太字になるがそのためには使わない。重要だぞってところにつける
<small　ー小さい字になるがそのためには使わない。よく著作権表示に使われる。(©をつけると©︎マークに)

<ul>
  <li>アルバム</li>
    <li>裏アルバム
    <ol>
      <li>粉雪</li>
      <li>キセキ</li>
    </ol>
    </li>
</ul>

↓
ウェブ上では
・アルバム
・裏アルバム
　　　　　　　　1.粉雪
　　　　　　　　2.キセキ
てなる
挟み挟まれちょっとややこしい。ちなみに裏アルバムの部分を

裏アルバム

<dl>
<dt>粉雪</dt>
<dd>平成のベストヒット曲。ドラマ１リットルの涙の主題歌</dd>
<dt>キセキ</dt>
<dd>ドラマルーキーズの主題歌</dd>
</dl>

↓
ウェブ上だと
粉雪
　　　　平成のベストヒット曲。ドラマ１リットルの涙の主題歌
キセキ
　　　　ドラマルーキーズの主題歌

テーブル

<thead　ーテーブルのヘッダー行を定義
<tbody　ーテーブルのボディ部分を定義
<tfoot　ーテーブルのフッター行を定義
↓
CSSでスタイルしやすくなる

<colspan　ー横にセルを結合
<rowspan　ー縦にセルを結合
↓

<table>
    <caption>横方向</caption>
        <tr>
            <th colspan="3">３つ分結合</th>
        </tr>
        <tr>
            <td>１セル目</td>
            <td>２セル目</td>
            <td>３セル目</td>
        </tr>
<table>
    <caption>縦方向</caption>
        <tr>
            <td rowspan="3">３つ分結合</td>
            <td>１セル目</td>
        <tr>
        <tr>
            <td>２セル目</td>
        <tr>
        <tr>
            <td>3セル目</td>
        <tr>

属性
<a href="~~~.com" Qiita　　　→外部リンク
<a hred="~~~.com" target="_blank" rel="noopener"　→クリックすると新しいタブでリンクを開く。
<a href="~~.html" →内部リンクへ
<a href="#page"　　→ページ内のid="page"がある場所へ

<img src="~~.jpg"　width="200" height="150" alt="何の画像かわかる"　　　　→画像を表示できる。この例は相対パス（ファイルが同じフォルダ内に場所にある）。だが絶対パスの場合は画像が載っているURLを貼り付ける

フォーム <input　type="text" ーデータ入力のためのフォームを作る要素。様々な入力フォームを作成可能。(ファイルアップロード、選択肢、チェックボックス、レンジ入力など)

name属性〜サーバー側のプログラムが送られてきたデータの種類が何かわかるようにしてる
placeholder属性〜入力前にうっすら書かれてるアレ
value属性〜ボタンのラベルを作成
↓

<form action="#" method="POST">
    <input type="text" name="username" placeholder="ユーザー名">
    <input type="password" name="password" placeholder="パスワード">
    <input type="submit" value="ログイン">
</form>

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up