学習メモ：HTML CSS１

####要素
一つ上の要素を親要素という。
一つ下の要素を子要素という。
####見やすさ
コードを分かりやすくするため空行を入れた方がいい。
間違えやすいところはスペースの全角や全角の入力、記号の打ち間違いがある。

####注意
コメントには知られてはいけない情報が書き込まないこと。

####ファビコン
ファビコンとはタブのタイトルの横の画像
```<link rel="icon" href="ファイル名">```
でファビコンを指定できる
```<imgy(要素名) src="属性値" width="属性値" height="属性値" alt="">```
```width```,```height```で画像のサイズを指定できる
```alt```は何らかの理由でテキストが表示できない場合に代替として使用される。音声読み上げブラウザで読み上げられる場合もある。

####HTMLの表現
```<strong> </strong>```で囲むと<strong>太字になる。</strong>
```<blockquote> </blockquote>```で囲むと下に<strong>線が引かれる</strong>。
装飾のためにタグを使わない。<strong>文章の意味を考えて使う。</strong>
見出しタグを使うことによって文書の構造を理解する
####HTMLのコードの紹介をするために文字実体参照
例```<p>&lt;br&gt;タグは次のように使います。</p>```と書く。
文字実体参照でコードに使われているタグを見ることができる。空白や改行は消える。
改行や空白を出すには```<pre></pre>```で囲みすでに整形されたテキストを表示する。HTML内の字下げも反映されるので字下げを消す。

####HTMLのリストの表現
箇条書きリスト　順番を変えても意味が変わらないときに使う。
点の箇条書きになる。

```
<ul>
  <li>項目</li>
  <li>項目</li>
  <li>項目</li>
</ul>
```
順序付きリスト　順序が大事になるときに使う。
番号の箇条書きになる。

```
<ol>
  <li>項目</li>
  <li>項目</li>
  <li>項目</li>
</ol>
```
、説明リスト 項目に加えて説明をするときに使う。
項目と説明がセットになる。

```
<dl>
  <dt>項目</dt>
  <dd>説明</dt>
  <dt>項目</dt>
  <dd>説明</dt>
  <dt>項目</dt>
  <dd>説明</dt>
</dl>
```
####表

```<thead>``` <strong>見出し</strong>
```<tbody>```  <strong>本文</strong>
```<tr>```　<strong>表の行</strong>
```<th>```　<strong>見出しとなるセル</strong>
```<td>```　<strong>見出し以外のセル</strong>
見出しのない表は```<thead>```を<strong>省く</strong>ことができる。

```
<h2>タイトル</h2>
  <table>
    <thead>
      <tr>
        <th>見出し</th>
        <th>見出し</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>見出しとならないセル</td>
        <td>見出しとならないセル</td>
      </tr>
      <tr>
        <td>見出しとならないセル</td>
        <td>見出しとならないセル</td>
      </tr>
    </tbody>
  </table>
```
表には区切る線は引かれていない。
####リンク
```
<a href="url"></a>
```
url先のサイトを開くことができる。

```
<a href="url" target=_blank></a>
```
```target=_blank``` を加えると同じタブで開かずに<strong>違うタブで開く</strong>ことができる。

サイトを作るときは<strong>複数のページ</strong>を使う。

```
<a href="元のページのファイル名">ホーム</a><!--同じ階層の場合、ファイル名を書く。　元のファイルに戻る-->
```
```
<a href="../元のページのファイル名">ホーム</a><!--一つ上の階層を指定するときは../ファイル名になる。元のファイルに戻る-->
```
ページ内の他のリンクを貼る
```<p><a href = "#top">先頭へ戻る</a></p>```
ページ内の長さが足りないときは中途半端の位置にしか移動しない
#####意味のある区切りタグ

```header ```
<strong>導入的</strong>なコンテンツ　
導入的な内容であれば、必ず最初にタグを配置しなくてもいい。

```footer ```
<strong>締めくくり</strong>のコンテンツ
著作権情報に使われる。　必ず最初にタグを配置しなくてもいい。

```nav ```
ページ内のリンクなどに使われる。
```aside ```
`関連性の薄いコンテンツ
<strong>サイドバーに使われる広告</strong>などに使われる。

```article ```
記事・独立したコンテンツ
<strong>ニュース記事,外部発進</strong>などに使用する独立したタグ

```main ```
主要なコンテンツ
<strong>ページ内で一回しか使えない.

``section ``
<strong>汎用的に使える</strong>区切り
今までのタグの中で分類できない区切りに使う。
h2,h3などに使う。

#####区切りの気をつけること
文章が長くなったらセクションごとに見出しh1をつける。
<strong>文章の構造がわかりやすい</strong>ということを考えてタグをつける。

```div ```  ,```span```特定の範囲の場合使う。主にスタイリングのため

####MDN
<strong>知りたい事が書かれいているサイト</strong>のこと。
HTMLに慣れていないとき注意すること。
<strong>許可されている内容、許可されてる親要素</strong>を確認ながらHTMLを作成する。
####Macの操作
コメントのタグをつける
<strong>command+/</strong>
マルチカーソル
選択したものを全て選択することができる。
<strong>command + D </strong>
選択したものを移動
<strong>option + ↑か↓</strong>
複製
<strong>shift + option + ↑か↓</strong>

####vscode
勝手に改行されても影響なし。

####理解できてないところ
プログラミングフォントとは
```<hr>```話題を変えることを意味する。
####これから
普通のインターネットurlのリンクをかけるようになる。

qiita
灰色の背景にならない時は点の後半角のスペースを入れる。