はじめてのHTML5入門(1)

H5 は実際には H4 の拡張バージョンです。H5 を使用すると Web ページの構築が容易になり、ラベルのセマンティクスがより簡潔かつ明確になります。まず第一に、HTML4 は HTML マークアップ + CSS2 + JavaScript の基本的な応用であることを理解する必要があります。一方、H5 は独自のベースでいくつかの新しい機能を提供するものにすぎません。

1. H5 セマンティックタグ

1): html の定義、その文書宣言の 1 つ

構文は html4 に似ており、w3c は html の構文を検出するために使用できる Web サイトを提供します。

https://validator.w3.org/

2) HTML には多くの新しいセマンティック タグがあります。これらのタグは div および span に似ています。

<span style="color: #008080;"> 1</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">nav</span><span style="color: #0000ff;">></span><span style="color: #000000;"> 表示导航
</span><span style="color: #008080;"> 2</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">header</span><span style="color: #0000ff;">></span><span style="color: #000000;"> 表示页眉
</span><span style="color: #008080;"> 3</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">footer</span><span style="color: #0000ff;">></span><span style="color: #000000;"> 表示页脚
</span><span style="color: #008080;"> 4</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">section</span><span style="color: #0000ff;">></span><span style="color: #000000;"> 表示区块
</span><span style="color: #008080;"> 5</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">article</span><span style="color: #0000ff;">></span><span style="color: #000000;"> 表示文章 如文章、评论、帖子、博客
</span><span style="color: #008080;"> 6</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">aside</span><span style="color: #0000ff;">></span><span style="color: #000000;"> 表示侧边栏 如文章的侧栏
</span><span style="color: #008080;"> 7</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">figure</span><span style="color: #0000ff;">></span><span style="color: #000000;"> 表示媒介内容分组 与 ul > li 做个比较
</span><span style="color: #008080;"> 8</span> <span style="color: #008000;"><!--</span><span style="color: #008000;">以上是常用到的</span><span style="color: #008000;">--></span>
<span style="color: #008080;"> 9</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">mark</span><span style="color: #0000ff;">></span><span style="color: #000000;"> 表示标记 (带用“UI”，不怎么用)
</span><span style="color: #008080;">10</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">progress</span><span style="color: #0000ff;">></span><span style="color: #000000;"> 表示进度 (带用“UI”，不怎么用)
</span><span style="color: #008080;">11</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">time</span><span style="color: #0000ff;">></span><span style="color: #000000;"> 表示日期
</span><span style="color: #008080;">12</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">hgroup</span><span style="color: #0000ff;">></span><span style="color: #000000;"> 标题列表 (据说已废弃)
</span><span style="color: #008080;">13</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">details</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">14</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">bdi</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">15</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">command</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">16</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">summary</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">17</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">rp</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">18</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">rt</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">19</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">ruby</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">20</span> <span style="color: #008000;"><!--</span><span style="color: #008000;">尽量避免全局使用header、footer、aside等语义标签。</span><span style="color: #008000;">--></span>

3)互換処理

① HTML5 の新しいタグをサポートしていないブラウザでは、これらの新しいタグはインライン要素 (inline) に解析され、ブロック要素 (block) として扱われます。

②IE9以下では、これらの新しいタグは正常に解析できませんが、document.creatElement('tagName')で作成したカスタムタグは認識できます

③実際の開発では、互換性の問題を解決するために、サードパーティのJSライブラリを使用してIEブラウザのバージョンを検出します。

<span style="color: #008000;"><!--</span><span style="color: #008000;"> [if lte IE 8]>
    <script src="./js/html5shiv.min.js"></script>
<![endif]</span><span style="color: #008000;">--></span>

[注]

これは div に相当するマークアップですが、IE6 ではこのフッターを次のように扱います。認識されないタグはインライン要素として扱われるため、互換性をブロックする必要があり、この時点で js ライブラリをインポートする必要があります。

html5shiv.min.js

2.

をフォームします。 —form はフォームの宣言に使用され、input はフォーム項目を表すために使用され、type はフォーム項目のタイプを制御するために使用されます (html5 はフォームにいくつかの機能拡張を加えます)。

1) 入力タイプ(フォームタイプ、フォーム要素、フォーム属性、フォームイベント)

<span style="background-color: #00ffff;"><span style="color: #008080;"> 1</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text"</span> <span style="color: #0000ff;">/></span>
<span style="color: #008080;"> 2</span> <span style="color: #000000;">email    输入email格式
</span><span style="color: #008080;"> 3</span> <span style="color: #000000;">tel    手机号码
</span><span style="color: #008080;"> 4</span> <span style="color: #000000;">url    只能输入url格式
</span><span style="color: #008080;"> 5</span> <span style="color: #000000;">number    只能输入数字
</span><span style="color: #008080;"> 6</span> <span style="color: #000000;">search    搜索框
</span></span><span style="color: #008080;"> 7</span> <span style="color: #000000;">range    范围
</span><span style="color: #008080;"> 8</span> <span style="color: #000000;">color    拾色器
</span><span style="color: #008080;"> 9</span> <span style="color: #000000;">time    时间
</span><span style="color: #008080;">10</span> <span style="color: #000000;">date    日期 不是绝对的
</span><span style="color: #008080;">11</span> <span style="color: #000000;">datetime    时间日期
</span><span style="color: #008080;">12</span> <span style="color: #000000;">month    月份
</span><span style="color: #008080;">13</span> week    星期

一部のタイプはモバイルデバイスに有効であり、実際のアプリケーションで選択的に使用できます。

2) 新しいタグをいくつか追加しました

① データリスト:

② 安全なフォーム送信データ送信のセキュリティに使用されます:

③測定に使用: メートル>

④ フォームに出力したい場合は、効果はありません:

3) いくつかの新しい属性を追加しました:

【PS】我们用新增的这些属性，可以来完成我们之前要使用js 才能实现的效果.

4）表单里面的事件

    ①监听文本框的数据的输入： oninput 事件

    ②当验证不通过的时候触发： oninvalid

   ③进度这个标记，我们使用 progress

 

3、多媒体

　　1）早之前我们做网页播放器

        ①我们是通过js 去调用windows 里面自带的一个播放器  media player  操作系统捆绑的

        ②adobe 的这样的一个flash ，基本上面每个用户电脑上面都会安装.

        ③后期我们出现了一个东西，每个电脑上面都可以装一个快播，js 调用快播.

【javascript 里面的内容】  javascript 分为三部分：

            ①ECMAScript

                (定义了js 的语法，变量，语句)

            ②BOM 浏览器对象模型

                (我们可以通过浏览器的自带的一些对象，可以调出浏览器的功能.)

            ③Dom  文档对象模型

            我首先有一个html 文件，我通过浏览器去打开这个html 文件；浏览器会去解析这个html 文件，把这个文件解析之后放在一个document 对象里面； 我以后要操作html 里面的内容，我就直接操作document 就可以

<span style="color: #008080;">1</span> <span style="color: #000000;">      //(操作dom 就是熟练dom   的api)
</span><span style="color: #008080;">2</span> <span style="color: #000000;">        //    (操作dom 的前期，要操作dom 必须先得到dom)
</span><span style="color: #008080;">3</span> <span style="color: #000000;">             document.getElementById("");
</span><span style="color: #008080;">4</span>              document.getElementsByTagName("");

2） html5 可以提供一些标签来完成播放.

        我们做这种音频文件，以及视频文件，最麻烦地方就是解码【音频文件，以及视频文件，都有格式，各种各样的格式】

        1:假设你网站的视频资源是自己产生的

        2:假设网站的资源是用户上传上去的，我们需要在用户上传的时候对这个资源进行转码.

【H5中】这个h5 在这个的基础上面进行了扩展，提供了一些更加强大的方法.

<span style="color: #000000;">//根据class 的值去获取
             document.getElementByClassName("")
// 这个里面支持css 里面的选择器
//这里返回的是第一个元素..
             document.querySelector(".username")
//获取的所有的,返回的是一个集合.
             document.querySelectorAll(".username>li");</span>

【表单的总结】我现在有一个表单，定义属性，什么时候id ，什么是时候使用name，什么时候使用class

   ① 我为一个元素加id 的目的，为了js 方便去获取这个元素

   ②name ：如果我要跟服务器进行交互，服务器到时候要获取客户端表单提交的数据.它是根据name 的值去获取   

<span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="username"</span><span style="color: #ff0000;"> value</span><span style="color: #0000ff;">="zhangsan"</span><span style="color: #0000ff;">></span><span style="color: #000000;">
// username=zhangsan</span>

③class 通常、スタイルを通じて要素を一括制御したい場合は、要素に class 属性を追加します。

今後、このケースを実行する予定です。最初のステップは、ページの基本レイアウト (html、css) を描画することです

ステップ 2: 関数を分析し、関数に基づいて対応するイベントを見つける

ステップ 3: 事件が明らかになると、方法も明らかになります

[ps]一般的には dom を操作します; dom を取得して dom を操作します (API 操作)。アウト

【概要】 HTML5の概念：html4の拡張版です。タグ、CSS、JS の機能強化。

タグ: いくつかの新しい、より破壊的なタグが登場しました。

1: html5 ステートメント

2: セマンティックタグ(divまたはspanとして理解できます)

3: 互換処理、js ライブラリをインポートする必要があります。

4: 従来のフォームであるフォームでは、より複雑なページ アプリケーションを完成させるのが困難です

4.1: いくつかの新しいタイプを追加しました type=""

4.2: 新しいタグのデータリストをいくつか追加しました

4.3: 追加されたプロパティ (ドキュメント)

4.4: 入力時のイベント

小さいケース: *、ケース。

マルチメディア処理:

mp3 オーディオのオーディオ

ビデオ

ビデオ用

デコード; クライアントとして処理する必要はありません。

ダム処理

ページ上のコンテンツを取得できるようにするために、いくつかの新しい API が追加されました。

document.getElementByTagName

document.querySelector();

document.querySelectorAll();

新しい属性操作が追加されました:

document.getElementById("").classList.add();

document.getElementById("").classList.remove();

document.getElementById("").classList.toggle();

document.getElementById("").classList.contains();

カスタム属性:

要素の属性をカスタマイズできます。 data-itcast-name="";

を要素に追加します。

キャメルケースの命名規則に従います

タブ タブ切り替え (属性 API です)

4. CSS3 と JS の違い

1) css: css3 が表示され、3D 効果がサポートされます。

js: 測位 (地図はウェブサイトに直接埋め込むことができます。)、重力センサー

2) css3 はページの表示を確実にリッチにすることができます

JavaScript にいくつかの新しい API、測位 (Baidu マップ)、重力感知 JS オブジェクトが追加されました