今Udemyでhtmlの記法について学んでいるところなので、忘れないように簡単なチートシートっぽくまとめておく。

見出し文字

<h1>これはh1タグです。</h1>
<h2>これはh2タグです。</h2>
<h3>これはh3タグです。</h3>
<h4>これはh4タグです。</h4>
<h5>これはh5タグです。</h5>
<h6>これはh6タグです。</h6>

これはh1タグです。

これはh2タグです。

これはh3タグです。

これはh4タグです。

これはh5タグです。

これはh6タグです。

文字フォーマット指定

太字にする

<b>タグや<strong>タグを用いる。
bは bold (太字)の頭文字。

<p>ここを<b>強調</b>します。</p>
<p>ここを<strong>強調</strong>します。</p>

ここを強調します。

斜め文字にする

<i>タグや<em>タグを使う。
iは italic (イタリック)の頭文字を取っている。
emは emphasis (強調)の頭文字。

<p>ここを<i>強調</i>します。</p>
<p>ここを<em>強調</em>します。</p>
<p><i>Emphasise</i> here.</p>
<p><em>Emphasise</em> here.</p>

ここを強調します。

Emphasise here.

取り消し線

<p>ここを<del>取り消す</del>。</p>

ここを~~取り消す~~。

画像

画像の表示

<img src="画像のソースコード">

フォーム

フォームは<input>タグを使う。
タグ内のtypeの値を変えることで色々形式が変わる。

文字入力フォーム

<p>
入力フォーム : <input type="text" placeholder="sample name">
</p>

入力フォーム :

チェックボックス

<p>
チェックボックス1 : <input type="checkbox">
<br>
チェックボックス2 :  <input type="checkbox" checked>
</p>

チェックボックス1 :

チェックボックス2 :

ラジオボタン

name属性で同じものにするとグルーピングができる。

<p>選択肢1 : <input type="radio" name="sample"></p>
<p>選択肢2 : <input type="radio" name="sample" checked></p>

選択肢1 :

選択肢2 :

プルダウン

<p>プルダウンで選ぶ。
  <select>
      <option>選択肢1</option>
      <option>選択肢2</option>
      <option>選択肢3</option>
  </select>
</p>

プルダウンで選ぶ。

テーブルの作成

行ごとに<tr>タグで区切って1つ1つの要素は<td>タグで表示する。
<table>タグでborderというオプションをつけると境界線が引かれる。

サンプル表  
<table border>
  <tbody>
  <theader>
    <th>アイテム名</th>
    <th>属性名</th>
  </theader>
    <tr>
      <td>アイテム1</td>
      <td>属性1</td>
    </tr>
    <tr>
      <td>アイテム2</td>
      <td>属性2</td>
    </tr>
    <tr>
      <td>アイテム3</td>
      <td>属性3</td>
    </tr>
  </tbody>  
</table>

サンプル表

アイテム名	属性名
アイテム1	属性1
アイテム2	属性2
アイテム3	属性3

ハイパーリンク

ページ内のリンク

タグにつけたid属性に飛ぶことができる。

<p id="toppage">ここがトップです。</p>
<p>これはサンプルです。<br>これはサンプルです<br>これはサンプルです<br>これはサンプルです<br>これはサンプルです<br>これはサンプルです<br>これはサンプルです<br>
</p>
<p><a href="#toppage">トップに戻ろう</a></p>

ここがトップです。

これはサンプルです。
これはサンプルです
これはサンプルです
これはサンプルです
これはサンプルです
これはサンプルです
これはサンプルです

トップに戻ろう

他のサイトへのリンク

<a href="http://www.google.com">Googleへはこちらから</a>

Googleへはこちらから

エンティティ

特殊文字を呼び出す。

<p>
<<br>
&<br>
©<br>
¥<br>
à<br>
</p>

<
&
©
¥
à

ここに一覧表がある。

インラインフレーム

他のWebサイトを埋め込んだりYouTubeの動画を埋め込むことができる。
YouTubeは目的の動画のページに行って、
共有→埋め込み
と移動すると埋め込み用のhtmlコードを入手することができるのでそれをコピペすれば良い。
自分のページを埋め込もうとしたがうまく表示されなかった。

<iframe width="560" height="315"
        src="https://leck-tech.com"></iframe>  

<iframe width="560" height="315"
        src="https://www.youtube.com/embed/Gpy-8na4zSQ" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen>
</iframe>

<br />

Pocket

htmlタグチートシート