HTMLとは何ですか?
HTML (ハイパーテキストマークアップ言語)。ハイパーテキストマークアップ言語。 HTML テキストは、HTML コマンドで構成される説明テキストであり、テキスト、グラフィック、アニメーション、サウンド、表、リンクなどを記述することができます。 HTML の構造は、Head と Body の 2 つの部分で構成されます。head にはブラウザが必要とする情報が記述され、body には説明する具体的な内容が含まれます。 (HTML ビデオチュートリアル)
私たちが HTML5 と呼ぶ効果は、HTML の個別のアップグレードされたバージョンではなく、HTML+CSS3+JS のパフォーマンスを組み合わせたものです。 HTML は単なるマークアップ言語ですが、意味的により最適化され、より科学的であると考えられるいくつかのタグが追加され、いくつかのタグが削除されています。ただし、タグはタグであり、動作は動作です。CSS3 も JS もありません。HTML はありません。そうではない、常に HTML だけです。 (html5 ビデオチュートリアル)
簡単に言うと、HTML5 は以前の HTML バージョンのタグよりもセマンティックかつ標準化されており、いくつかの新しいタグが追加されています。下の写真を見てください:
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]-->
アプリケーションタグ
DataListprogress属性
リンク関係の説明リンク先の場所と現在のドキュメントの関係は何ですか<a href="01-sementic-tags.html" rel="pre"></a><a href="02-application-tags.html" rel="next"></a>
<link rel="stylesheet" href="css.css">
構造データタグ
<p itemscope itemtype="www.baidu.com"> <p itemprop="主人">主人</p>
<p itemprop="小狗">小狗一</p>
<p itemprop="小狗">小狗二</p> </p>
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 フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
