久々にWebのお勉強。昔やってた感満載、全部忘れてる。

pタグ

パラグラフをつくる。

id

idを指定する.

<p id="xxx"></p>

idは重複を許さない
要素に独自の管理名を付けて要素どうしを識別するために使われるもの。同一の id 属性を複数の要素に対して与えることはできない

class

classを指定する

<p class="xxx"></p>

1 つの要素に対して数種類つけることができる上、同じ名前の class 属性を複数の要素に詰め込むことができる

aタグ

リンクを挿入する

<a href="https://xxxxx.com">ペロペロキャンディー/>

imgタグ

そのまんまimageを挿入する

<img src="URL" alt="写真が表示されない時の代わり"/>

ulタグ

順序なしのリスト
unordered listの略最近のモダンエディタだと、ul>li*6とかしたらこんなんさくっと自動補完してくれんですねぇ〜

    <ui>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ui>

liタグ

上記を参照すればすぐわかるが、リストの項目を表す。すなわちuiの中にliがある。
簡単にいうとBullet List。
List Itemの略

olタグ

これはNumbered Listってことになる
ordered listの略

<ol>
  <li>カレー</li>
  <li>ラーメン</li>
</ol>

tableタグ

こんなん使ってるサイトほぼないよね最近
table>(tr>th*2)+(tr>td*2)*6ってすればエディタで自動補完。height2+width2の表を6行作るようなイメージ

    <table>
        <tr>
            <th>tag name</th>
            <th>description</th>
        </tr>
        <tr>
            <td>h</td>
            <td><見出し/td>
        </tr>
        <tr>
            <td>p</td>
            <td>段落</td>
        </tr>
        <tr>
            <td>a</td>
            <td>リンク</td>
        </tr>
        <tr>
            <td>img</td>
            <td>画像</td>
        </tr>
        <tr>
            <td>ul</td>
            <td>順序なしリスト</td>
        </tr>
        <tr>
            <td>table</td>
            <td>表</td>
        </tr>

th

table header

tr

table row

td

table data

spanタグ

div タグとは異なり、行内にコンテナを作成したい場合、を使用する
例えば、文字列 abcdefg のうち、cde の部分のみテキストを赤くしたい場合、要素をで囲み、に対してクラスを適用
はブロックレベル要素（block-level element）であるのに対し、はインライン要素（inline element）になる

<p>abcdefg</p>
<p>ab<span style='color: red'>cde</span>fg</p>

ブロックレベル要素とインライン要素

ブロックレベル要素とは、HTML で最も頻繁に使われる要素で、段落を開始し、ページの横幅をフルに使う要素のこと
ブロックレベル要素の前後には必ず改行があり、HTML はこのブロック要素を複数組み合わせることによって構成される
インライン要素は要素の前後に改行がなく、行内からスタートすることが可能。また幅は水平方向全体ではなく、タグで定義された範囲にのみ広がる

HTMLのエスケープ文字例

実際の文字	文字コード
<	<
>	>
"	"
'	'
&	&

formタグ

入力フォーム

        <form>
            <p>テキスト</p>
            <input type="text" name="email" placeholder="email" size="50">
            <p>ラジオボタン</p>
            <label>
                <input type="radio" >はい
            </label>
            <label>
                <input type="radio" >いいえ
            </label>
            <label>
                <input type="radio" >無回答
            </label>
            <p>ボタン</p>
            <input type="submit" value="ログイン"> 
        </form>

scriptタグ

JavaScriptを読み込む際に必要。（同じ階層に.jsファイルが用意されていることが条件）

<script src="logic.js"></script>

linkタグ

stylesheetとしてのcssファイルの紐付け。

<link rel="stylesheet" href="xxx.css"/>

' P '

whatever I will forget

html 備忘録

pタグ

id