はじめてのHTML5入門(1)-htmlチュートリアル-php.cn

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

をフォームします。 —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: 従来のフォームであるフォームでは、より複雑なページアプリケーションを完成させるのが困難です