HTML5の勉強で得た知識たち

http://www.learn-html.org/en/Hello%2C_World%21
このサイトをもとにHTML5を勉強してみました。
普通のHTML,CSS,javascriptの部分もありますが、やや難しい部分もあります。


#HTML5を勉強していて知らなかったことをまとめてみた

##水平方向の罫線
`<hr>`
これは水平方向の罫線を表します。
↓こんな感じ 
<hr>
　

##スパン
`span`
spanはインライン要素で、divはブロック要素だそうです。
どちらも、これがひとまとまりですよっていう印

インライン要素、ブロック要素ってなんやっけ・・・
引用してきました

ブロック要素は、、、
>ブロックレベル要素は、見出し・段落・表など、文書を構成する基本となる要素で、一つのブロック（かたまり）として認識されます。 ブラウザでの表示も一つのかたまりとして扱われることが多く、一般的なブラウザでは前後に改行が入ります。

そして、インライン要素は、、、
>インライン要素は、主にブロックレベル要素の内容として用いられる要素で、文章の一部として扱われます。 例えば、<p>要素の中の<strong>要素のように、段落のなかの一部を強調するような使われ方をする要素です。

引用元：http://www.htmq.com/htmlkihon/005.shtml



##独自データ属性
`data-`
独自データ属性っていうらしい
webページとかwebのアプリで固有のデータを取得する時に用います
よく分からないので、一旦保留
参考サイト
[HTML5における独自データ属性の取り扱い - Qiita](https://qiita.com/skinoshita/items/388eb277843e2d0c03de)

##順序つきリストのタイプ(ol)

数字でカウントする場合、
type = "1"
この場合、1,2,3...っていうリストがつく

大文字でカウントする場合、
type = "A"
この場合、A,B,C...っていうリストがつく

小文字でカウントする場合
type = "a"
この場合、a,b,c...っていうリストがつく

大文字のローマ字でカウントする場合
type = "I"
この場合、Ⅰ,Ⅱ,Ⅲ...っていうリストがつく

小文字のローマ字でカウントする場合
type = "i"
この場合、ⅰ,ⅱ,ⅲ...っていうリストがつく



##順序づけられていない、リストのスタイル
cssでスタイルをつけていきます。

黒丸のタイプ
list-style-type: disc

白丸のタイプ
list-style-type: circle


##onload属性
画像を読み込み完了したら、javascriptでイベントを発生させられる。
onload=alert('画像読み込みました')みたいな



##classList
>各HTML要素は、そのelement.classListメンバーにアクセスしてコレクションを返します。クラスリストでは、要素に特定のクラスが含まれているかどうかを追加、削除、切り替え、チェックすることができます。

例です。

```html
<script>
var element = getElementId("greet")
element.classList.add("Hello")
element.classList.remove("Hello")
element.classList.toggle("Hello")

if (element.classList.contains("Hello")){
    alert("こんにちは！")
}
</script>
```

少し解説すると、
greetっていうIDを持つ要素を取得して、elementに代入します。
greetの要素に、Helloっていうクラスを追加
greetの要素から、Helloっていうクラスを削除
greetの要素に、Helloっていうクラスがあれば、削除、なければ追加(この場合は追加します)

で、
elementに、Helloが含まれていれば、こんにちはっていう警告文を返します、笑

##querySelector、querySelectorAllメソッド

特定の要素を取得するには、getElementByIdとかあるけど、
CSSの書式を使って、特定の要素を取得したい場合に、querySelectorメソッドとQuerySelectorAllメソッドが使える

````html
<script>
   var greet = document.querySelector(".Hello");
       greet.style.color = "blue";
</script>
````
この場合、Helloっていうクラスのうち一番最初のHelloクラスだけ青色になります。

querySelectorAllにすると、一番最初だけでなく、全てを対象にすることができる。

##hoverとactiveとfocusとtarget
すっかり忘れてしまっていたので、メモがてらまとめます

hover...ユーザーがマウスポインタを乗せたら、何かを実行
active...現在クリックしているところに何かを実行
forcus...フォーカスを当てたら何かを実行(フォームの入力欄にカーソルを合わせてテキスト入力できるようになった時とか)
target...リンク先の要素に何かを実行
targetはわかりにくかったのですが、このサイトおすすめ
[:target擬似クラスのまとめ: 小粋空間](http://www.koikikukan.com/archives/2015/03/16-015555.php)

## Bootstrap
デフォルトのHTMLで書くより、もっと良いものがかけます！

````html
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
````
これでロードします。
ボタンとか良い感じに見えます！きになる方は調べてみてください。

##グリッドレイアウト
display: grid か display:inline-grid　をすると、グリッドレイアウトっぽくなります！

##iframe
HTMLの中に別のHTMLを表示させるもの

このサイトがわかりやすい
http://copicopi.com/iframe.html

>width="200"はフレームの横幅、大きくすると広く小さくすると狭くなります
height="200"はフレームの縦幅、大きくすると広く小さくすると狭くなります
frameborder="yes"はyesだとフレーム枠表示、noだとフレーム枠非表示なります
scrolling="yes"はyesだとスクロールバー表示、noだとスクロールバー非表示なります
スクロールバーの色は表示する側(この場合はb.html)のスクロールバーが表示されます
例のカラーパレットページのように全体が表示されない場合はフレームの横幅、縦幅を増やすか、 インラインフレーム内のページそのもののレイアウトを小さくして下さい。

##HTML5で動画・音声を表示させる
````html
<video src="ビデオのファイルの名前.拡張子"></video>
<audio src="音声のファイルの名前.拡張子"></audio>
````

##ドラッグ&ドロップ
まずは、HTMLをみて・・・
ドラッグできるようにするには、ドラッグしたい要素にdraggable属性をつける
「draggable="true"」をつけると良い

````html
<div id="greet" draggable="true">こんにちは</div>
````

ドロップ先の要素にdropzone属性をつけよう
「dropzone="copy"」はドラッグされた要素が複製されて、ドロップされる
「dropzone="move"」は、ドラッグされた要素が、そのままドロップされる
「dropzone="link"」は、ドラッグされた元のリンクがドロップされる

次に、Javascriptを見よう
jabascriptでは、データをセットして、データを取得するのが必要
ちょっと疲れて来たので、詳しくはこちら
http://www.htmq.com/dnd/

##LocalStorage
これまでは、アクセスしたユーザーの情報はクッキーとかセッションを使用していた
サーバーサイド的にはおっけーやけど、フロントエンド的には手間がかかる。
簡単にできるようになったのがLocalStorage

データ自体はサーバーではなくブラウザに保存されます。

##アプリケーションキャッシュ
webアプリケーションをオフラインでも実行できるやつ
html要素にmanifest属性を含めます。

そんなんあるんやー的な感じで進んでいるので、もっと知りたい人はこちら
[アプリケーションキャッシュの使用 - HTML | MDN](https://developer.mozilla.org/ja/docs/Web/HTML/Using_the_application_cache)


##WebWorkers
バックグラウンドで実行できるやつです。
javascriptは順次実行されていくのかな？
だから、バックグラウンドで処理できれば、同時にいろんなことが実行できるというわけです。

##Server-Sent Event
サーバーからイベントを取得したり、イベントを送信したり、できるらしいけど、
調べてもよくわからないので一旦保留・・・。



#一旦終了
疲れたので、一旦終了。。。
まだまだありそうなので、知らないことを発掘していきます。