20 分で HTML5 を理解し、H5 の新機能を確認する

HTMLとは何ですか?

HTML (ハイパーテキストマークアップ言語)。ハイパーテキストマークアップ言語。 HTML テキストは、HTML コマンドで構成される説明テキストであり、テキスト、グラフィック、アニメーション、サウンド、表、リンクなどを記述することができます。 HTML の構造は、Head と Body の 2 つの部分で構成されます。head にはブラウザが必要とする情報が記述され、body には説明する具体的な内容が含まれます。 (HTML ビデオチュートリアル)

HTML5 とは何ですか?

私たちが HTML5 と呼ぶ効果は、HTML の個別のアップグレードされたバージョンではなく、HTML+CSS3+

JS のパフォーマンスを組み合わせたものです。 HTML は単なるマークアップ言語ですが、意味的により最適化され、より科学的であると考えられるいくつかのタグが追加され、いくつかのタグが削除されています。ただし、タグはタグであり、動作は動作です。CSS3 も JS もありません。HTML はありません。そうではない、常に HTML だけです。 (html5 ビデオチュートリアル)

簡単に言うと、HTML5 は以前の HTML バージョンのタグよりもセマンティックかつ標準化されており、いくつかの新しいタグが追加されています。下の写真を見てください:

これは、前の Web ページの HTML フォームです。新しい HTML は次のようになります:

明らかに、HTML5 は以前のように DIV によって支配されなくなり、新しいセマンティック タグが追加されました。統一された新しい標準があるため、フロントエンド エンジニアのチームワークが容易になる可能性があります。

わかりやすく言うと、ここはデパートの倉庫です。管理者のラオ・ワンが倉庫を掃除しに来て、あらゆる種類の衣類、靴、デパートを別々の箱に入れ、箱にラベルを貼り、名前を書きました。適切だと思いました。これらのボックスは DIV として理解でき、ラベル上の名前はクラスと ID です。

さて、ここで問題が発生します。ラオ・ワンが仕事から帰宅すると、ラオ・リーが引き取りに来た。ラオ・ワンが何をしているのかを見て、ラオ・リーは悪態をつき始めた。なぜなら、ラオ・ワンが箱に書いたラベルが理解できず、いちいち開けなければならなかったからだ。一体何が入っているのかを一つ一つ確認する必要があり、作業効率が大幅に低下します。

現在、HTML5 はマークされたボックスを Lao Wang に直接渡し、異なるボックスに応じて異なる服、帽子、靴を置くことができるため、Lao Zhang が引き継いだときにさらに便利になります。さらに、HTML5 ではより多くのタグが提供されるため、Lao Zhang と Lao Wang は、他の同僚に迷惑をかけることなく、以前は複雑だった作業を独立して完了できます。

html5には具体的に何があるのですか？

より多くのセマンティックタグ（開発者はより洗練され、ブラウザはそれをよりよく理解できます）

検索エンジンの検索で、タイトルは検索されるのに「はじめに」は検索されないのはなぜですか?これは構造の違いによるものです。ただし、構造のクラス命名習慣は人それぞれ異なり、標準化できないため、新しいタグを作成することをお勧めします。

一部の古いバージョンのブラウザでは、h5 タグは互換性がなく、p とみなされますが、機能には影響しません。スクリプトに新しいコード行 document.createElement("header") を追加することもできますが、多くのタグが使用されるため、同じ数の document.createElement("") 行を記述する必要があるため、3 番目のコード行が追加されます。パーティー プラグイン html5shiv.js

使用方法:

<!--[if lt IE 9]><script type="text/javascript"  src="http://www.ijquery.cn/js/html5shiv.js"></script><![endif]-->

注: IE ブラウザは解析する前にこの要素を認識する必要があるため、ページ内の Html5.js ファイルの呼び出しはページの head 要素内に追加する必要があります。要素なので、この js ファイルをページの下部で呼び出すことはできません。

アプリケーションタグ

DataList

progress

属性

リンク関係の説明

リンク先の場所と現在のドキュメントの関係は何ですか

<a href="01-sementic-tags.html" rel="pre"></a><a href="02-application-tags.html" rel="next"></a>

relは他の場所にも表示されます、

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

link ファイル自体はリクエストしませんが、rel="stylesheet" はファイルをリクエストします

現在中国では人気がありません

構造データタグ

<p itemscope itemtype="www.baidu.com">        <p itemprop="主人">主人</p>
        <p itemprop="小狗">小狗一</p>
        <p itemprop="小狗">小狗二</p>    </p>

検索エンジンがクロールに集中しやすくなります

は非常に高度ですが、Google によってのみサポートされています

ARIA

アクセス可能なリッチ インターネット アプリケーション

<label for="myinput">请输入您的名字</label>
<input type="text" id="myinput">

なぜラベルを付ける必要があるのですか?

は検索エンジンが理解できるようにするためのものです

カスタム属性

は data-* などの属性であり、機能はなく、単に dom ノードの関連性の高いデータを保存するためのものです。

<ul id="list"></ul>
    <p id="info"></p>
    <script>        var data={            01:{
                name:"张三",
                age:18
            },            02:{
                name:"李四",
                age:19
            },            03:{
                name:"王五",
                age:20
            }
        };        for (var X in data) {            var item=data[X];            var oli=document.createElement("li");            var olist=document.getElementById("list");
            oli.appendChild(document.createTextNode(item.name));
            olist.appendChild(oli);
            oli.setAttribute("data-name",item.name);
            oli.setAttribute("data-age",item.age );
            oli.addEventListener("click", function () {                var name=this.getAttribute("data-name");                var age=this.getAttribute("data-age");
                alert(age+name)
            })
        }
    </script>

上面的代码用 setattribue 方法来定义了自定义属性，然后用getattribute又获取到了自定义属性。js也针对自定义属性出了新的api,也就是 dataset['string'] ,使用这个api可以代替 getAttribute 的方法：

oli.addEventListener("click",function(){    console.log(this.dataset["name"]);
})

智能表单

新的表单类型

<input type="date">
<input type="color">
<input type="range">

但是尽量不要在pc端使用，用户体验较差，不能自定义样式。主要适配在移动端。

虚拟键盘适配

<input type="text" name="txt_text" id="txt_text">
<input type="number" name="txt_number" id="txt_number">
<input type="email" name="txt_email" id="txt_email">
<input type="tel" name="txt_tel" id="txt_tel">
<input type="url" name="txt_url" id="txt_url">

上面的代码在pc端上没有用处，主要是用在移动端可以根据不同的input的 type 来唤出不同的键盘。

虽然 input type="email" 看似可以验证表单，但是真是太弱了，只是验证有没有 @ ，真的要验证的话，还是要自己写正则表达式

页面多媒体

音频

<audio src="A Moment of Reflection.mp3" controls="controls"></audio>

但是默认的播放器太丑了，我们一般是自己写一个button，然后为这个button添加一个事件：

<script>        var btn=document.getElementById("btn");        var btn1=document.getElementById("btn1");        var audio=document.getElementsByTagName("audio")[0];
        btn.addEventListener("click", function () {
            audio.play();
        })
        btn1.addEventListener("click",function (argument) {
            audio.pause();
        })
</script>

视频

<video src="A Moment of Reflection.mp4" controls="controls"></video>

但是我们一般不是这样用的，因为视频有版权，有些浏览器只能支持一两个，我们一般是source：

<video controls="controls"><source src="下午03-网页多媒体.web.mp4"><source src="下午03-网页多媒体.web.ogg"><p>您的浏览器不支持</p></video>

还有一个插件，是可以帮我们做兼容的，是html5media.info/的组件，ie7以上都可以兼容。

以下是多媒体的属性;

[image_1b2cut34s130mfufars1a6m6va9.png-66.1kB][1]

字幕

兼容性不是很好，现在还没有人用

canvas

2d

3d

svg

优势：体积小，质量高，效果好，可控程度高。

相关推荐：

成为一名优秀的前端工程师需要学什么？

web前端学习路线:WEB前端开发快速入门