A、HTML5とHTML4
1.1の理由と目標を導入しました
Web用の大きな意義のH5出現。彼の意図はを取り除くためにウェブを一緒に既存の問題を配置することであるため。
- Webブラウザ間の互換性が低いです
- 文書構造は明らかに十分な（多くの構造と意味タグ）ではありません
- Webアプリケーションの機能が制限されます
H5は、上記の問題に優れたソリューションを見えます
1.2構文の変更
1.2.1 DOCTYPE宣言
このようなH5 DOCTYPE宣言：
<!DOCTYPE html>
HTML：このような4S DOCTYPE宣言：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">HTML：このような4トンDOCTYPE宣言
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">1.2.2指定する文字エンコーディング
H5は、次のように文字エンコーディング形式は指定しています。
<meta charset="UTF-8" />HTML：4S指定する文字エンコーディング次のように：
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />1.2.3エンド要素タグを省略することができます
私はあなたに地獄理解するための簡単な例与える
、我々は通常、書き込みpタグは次のように書かれました：
<body>
<p>Hello world!</p>
</body>
新しい文言が記述します。
<body>
<p/>Hello world!
</body>
あなたが信じていない場合、あなたはそれをテストする方法を、行くとテストができますか？単に自分のスタイルには2が等価であることを証明するかのように、同じかどうかを確認するために個別に設定することができています！注：スタイルのpタグを設定します。
1.2.4プロパティは、ブール値を持つ（無効、確認しました）
無効に次のように使用され、これらの要素を無効にするかどうかの手段の入力要素、ボタン要素、オプション、および他の要素に使用：
プロパティが「偽」属性が有効になって示すときプロパティが「真」、属性値が有効になっていないことを示しているので、ここで属性値「無効」は、任意の他の単語に置き換えることができ、さらには「有効」（ただし、「偽」は除外します）。コード以下のボタン要素が無効になっています。
<input type="button" disabled="true" value="测试按钮">
<input type="button" disabled="123" value="测试按钮">
<input type="button" disabled=" " value="测试按钮">
<input type="button" disabled="any word" value="测试按钮">
ボタン要素は、以下のコードで有効になっています。
<input type="button" disabled="false" value="测试按钮">
<input type="button" value="测试按钮">
使用状況を確認し、無効、ここのように、小さな直列にここでは詳細に説明されていません！
1.2.5省略符（タグ内の属性値がマークを省略することができます）
プロパティ値を書き込む前にH5は、一例として、imgタグのsrc属性に書き込まれます。
<body>
<img src="1.png" alt="">
</body>現在、あなたが書くことができます。
<body>
<img sre = 1.png alt = "">
</body>両方の結果は同じです。私たちは、適切に画像を表示することができます
1.3新しいセマンティックタグ
何がセマンティックありますか？
これは、ドキュメントのコンテンツをフォーマットするために合理的なセマンティックHTMLタグとそのユニークな特性を指します。より簡単に、意味情報及びデータは、機械が理解できるように処理される。 セマンティクス
新しいセマンティックタグ：セクション、記事、さておき、ヘッダ、のhgroup、フッター、ナビゲーション、フィギュア
具体的な使用方法：新しいセマンティックタグの使用
新しい1.4「ムード」label要素
ビデオ、オーディオ、キャンバス、埋め込み、マーク、進捗状況、メーター、時間、ルビー、室温、RP、WBR、コマンド、詳細、データリスト、データグリッド、keygenの、出力、ソース、メニュー
ここでは、小さなシリーズのこれらのラベルは、1の使用ずつ導入されていません。ラインで直接使用したときにBaiduの。通常は多くはないとのライン上にこの事を覚えています。（インタビューは使用されるかもしれないとき）
1.5新しい入力タイプ
メール、URL、番号、範囲、 DatePickers
ここでは説明の一部を与えます：
- 数
<input type="number" name="">
- 範囲
<input type = "range" name = "">
残りの小さなシリーズがテストされていない、あなたがテストすることができます決定！
1.6廃止ラベル
- CSSは代替BASEFONT、大きな、中央、フォント、S、TTを使用することができ、Uなど
- もはや使用枠ませんフレームワーク
- ブラウザの支持要素の一部のみ
- 他の要素は廃止されます
1.7新しいグローバル属性
グローバル属性はすべてのタグのプロパティを使用することができますされています
- （コンテンツの規定を編集できるかどうか）のcontentEditableプロパティ
<input type="text" name="name" contenteditable="true">
- designModeプロパティ（ページのすべての要素が編集モードで開くことができるように、このJSで行わ）
window.onload = function() {
document.designMode = "on";
}
- 隠されたプロパティ
- スペルチェックの属性（属性入力やtextareaの新プラン、文法チェックを行います）
- tabindex属性（フォーカスを取得するためのletラベル）
<a href="javascript:void(0);" tabindex="3">你好</a>
<a href="javascript:void(0);" tabindex="2">hello world!</a>
<a href="javascript:void(0);" tabindex="1">html5</a>
第二に、新しいセマンティックタグ
2.1の新要素
- <ヘッダ> </ヘッダ>ヘッダ
ページの先頭ための主な情報も頭をメッキするために使用することができます導入されました
- <フッタ> </フッタ>フッター
ページの下部または下部セクション
- <ナビゲーション> </ NAV>ナビゲーション（リンクのリストを含みます）
<nav>
<a href="#">链接1</a>
<a href="#">链接2</a>
</nav>- <のhgroup>タイトル上の組成物</のhgroup>のページ
<hgroup>
<h1>旅游</h1>
<h2>上海</h2>
</hgroup>- <セクション> </ section>のページのセクション
ページの区分の異なる領域について、または異なるセクションの記事に分け
- <論説>ページのコンテンツセクションに完全で独立した構造を表すために使用される</記事>
雑誌や新聞の記事、ブログ、ユーザーが送信したコンテンツ、コメント、フォーラムの投稿をレンダリングするために使用することができ、ページはインタラクティブモジュールのペンダントすることができ
- <余談> </さておき>
label要素は、現在のページまたはメインコンテンツ、サイドバー、広告、ナビゲーション要素グループに関連する参考資料を含めることができ、および他の類似の部分には、メインコンテンツ異なっており、
8. <フィギュア> </フィギュア>
構成要素のために。一般的には写真やビデオに使用
- 図の<Figcation> </ figcation>子要素、コンテンツの図は説明します
<figure>
<!-- (注意没有alt) -->
<img src="images/225.jpg" width="100px" height="100px" />
<figcaption>薰衣草</figcaption>
</figure>
2.2ラベルを説明
- <論説>独立性の<オブジェクト> <embed>タグ強調
- <セクション>セグメントは強調し、一般的にタイトルがあります
<section>
<h1>CAR</h1>
</section> - <ナビゲーション>すべてのグループができNAVへの基本的な、ナビゲーションリンク]タブで、単に主要わけではありません。
一般的に、従来のナビゲーション、サイドバーナビゲーション、ページ内のナビゲーション、ページのナビゲーションに使用
- <別に>現在のページまたは主コンテンツ、サイドバー、広告、ナビゲーション、および他の同様のコンテンツに関連する参照を含むことができ、現在のページまたは補助情報部の物品を表現するためには、主要部分とは異なります。
- 非ラベルの主な構造
ヘッダ要素は、通常、全体のページとページのヘッダブロックの内容を防止するために使用されるガイド構造とナビゲーション機能を有する素子であるが、そのようなデータは、検索フォーム関連するロゴや画像などの他のコンテンツを含むことができます。
脚注上部親コンテンツ領域またはルートブロックとして使用することができるフッター要素。フッターは通常など、著者、関連読書リンクと著作権情報、として、その関連ブロックフッター情報が含まれています
hgroup要素は、タイトルとサブタイトルラベルパケットです。hgroupタグラベルは、通常、H1-H6をグループ化します。例えば、コンテンツのタイトルやオペレータのグループのサブ素子領域。
アドレス要素は、文書の文書の作者やメンテナの名前、彼らのウェブサイトのリンク、電子メールアドレス、住所、電話番号、上のよう含め、連絡先情報を提示する文書で使用されています。アドレスは、連絡先情報は、接触と関連するすべての文書を表示するために使用され、電子メールまたは実アドレスをレンダリングするために使用すべきではありません。
第三に、新しいフォーム要素と属性の中
3.1ソリューションの人気の形の小さなシリーズ：フォーム属性の外にフォームのラベルがでリンクすることができます
例えば：
<form id="form1">
<label for="man">MAN</label><input type="radio" id="man" name="sex">
<input type="radio" id="woman" name="sex">
</form>
<label for="woman" form="form1">WOMAN</label>
3.2 formtargetプロパティ
- _blankは新しいウィンドウで開きます。
- _selfデフォルト。これは、同じフレームに表示されます。
- _parentは、親フレームセットに開きます。
- _topは、全体のウィンドウで開きます。
3.3オートフォーカスがフォーカスを取得
<input type="text" name="">
<input type="text" name="" autofocus="autofocus">
3.4必要な属性
新しい属性でHTML5は、要素の内容が空白の場合、あなたはブラウザにメッセージプロンプトのテキストを表示、提出することができないの提出時には、ほとんどの入力ラベルにも適用することができます。次の例を参照してください。
<form>
<input type="text" name="" autofocus="autofocus" required>
<input type="submit" name="">
</form>
3.5プレースホルダプロパティは、テキストを表示するために、コンテンツの前に入力されていません
<form>
<input type="text" name="name" placeholder="请输入你的姓名">
</form>
3.6オートコンプリートプロパティ
<form autocomplete="on">
<input type="text" name="name" placeholder="请输入你的姓名" >
</form>
3.7パターンのプロパティ
このプロパティは、正規表現を使用しています。以下の小さな例を参照してください。
<form>
<input type="text" name="content" autocomplete="off" placeholder="请输入邮箱" pattern="\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}" >
<input type="submit">
</form>
3.8 Xiaobianは何かを言うために
時間の残りの部分のために、少しの友人がオンラインでオンライン検索を使用して新しいフォームの属性と要素は、多くがありますが、ここで私は、より一般的な属性と要素のいくつかをリストアップ。まあ！最後のこの部分は、先に進みます。
第四に、新しいJavaScriptセレクタ
4.1 querySelector（）
<div id="box">Hello World！</div>
<script type="text/javascript">
var box = document.querySelector("#box");
box.style.color = "red";
box.style.fontSize = "24px";
box.style.fontWeight = "blod";
</script>
4.2 querySelectorAll（）
<div id="box">Hello World！</div>
<div id="box">Hello！</div>
<div id="box">World！</div>
<script type="text/javascript">
var boxList = document.querySelectorAll("#box");
boxList.forEach(function(item){
item.style.color = "red";
item.style.fontSize = "24px";
item.style.fontWeight = "blod";
});
</script>
第五に、新しいノードのプロパティDOM
clasList属性とメソッド
- 長さ（長さ）
<div id="box" class="test test1 test2 test 3 test4"></div>
<script>
var box = document.querySelector("#box");
window.onload = function (){
console.log(box.classList);
console.log(box.classList.length);
}
</script>
- （）の増加を追加
<div id = "box" class = "test test1 test2 test3 test4 "></div>
<script>
var box = document.querySelector("#box");
window.onload = function(){
box.classList.add("test5");
console.log(box.classList);
}
</script>
- 削除（）削除
<div id="box" class="test test2 test3 test4">Hello World!</div>
<script type="text/javascript">
var box = document.querySelector("#box");
window.onload = function (){
box.classList.remove("test");
console.log(box.classList);
}
</script>
- 追加があり、そこ削除されます。トグルは、（）を理解することは簡単です
- 時々
<div id="box" class="test test2 test3 test4">Hello World!</div>
<script type="text/javascript">
var box = document.querySelector("#box");
window.onload = function (){
box.classList.toggle("test");
console.log(box.classList);
}
</script>
- 時間がありません
<div id="box" class="test test2 test3 test4">Hello World!</div>
<script type="text/javascript">
var box = document.querySelector("#box");
window.onload = function (){
box.classList.toggle("test5");
console.log(box.classList);
}
</script>
第六に、JSONの新しい方法
6.1のeval
eval(): 可以解析任何字符串变成JS , 对JSON内容进行解析的话必须在最外面使用(); 例如:
<script>
var str = "({name:'Tom',age:'20',sex:'man'})";
var obj = eval(str);
console.log(obj);
</script>
七、自定义标签属性
语法：1. 在标签中使用data-str1-str2
2. 在JS 中获取到相应的自定义属性的值 。dom.dataset.str1Str2
见下面的小例子就明白了：
<div id="box" data-my-color="red" data-font-size="24px">Hello world!</div>
<script>
var box = document.querySelector("#box");
box.style.color = box.dataset.myColor;
box.style.fontSize = box.dataset.fontSize;
</script>
分析： 其实很简单，首先在标签中根据自己的需要定义属性，比如小编这里定义了字体的颜色和大小，光定义是不行的，浏览器不认识，所以还需要引用，在js中进行引用，引用方式就是和平常我们用js改变属性值是一样的，谨记要用驼峰命名法。
八、JS加载过程
一般情况
按照惯例，所有script元素都应该放在页面的head元素中。这种做法的目的就是把 所有外部文件(CSS文件和JavaScript文件)的引用都放在相同的地方。可是，在文档的head元素中包含所有JavaScript文件，意味着必须等到全部JavaScript代码都被下载、解析和执行完成以后，才能开始呈现页面的内容(浏览器在遇到body标签时才开始呈现内容)。
对于那些需要很多JavaScript代码的页面来说，这无疑会 导致浏览器在呈现页面时出现明显的延迟，而延迟期间的浏览器窗口中将是一片空白。为了避免这个问题，现在Web应用程序一般都把全部JavaScript引用放在body元素中页面的内容后面。这样一来，在解析包含的JavaScript代码之前，页面的内容将完全呈现在浏览器中。而用户也会因为浏览器窗口显示空白页面的时间缩短而感到打开页面的速度加快了。
总结一句话：在JavaScript代码时要把该部分放在body的后面
看下面的图解：
defer (延迟脚本)
延迟脚本：defer属性只适用于外部脚本文件。
如果给script标签定义了defer属性，这个属性的作用是表明脚本在执行时不会影响页面的构造。也就是说，脚本会被延迟到整个页面都解析完毕后再运行。因此，如果script元素中设置了defer属性，相当于告诉浏览器立即下载，但延迟执行。
看下面的图文详解：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>延迟加载</title>
<script defer type="text/javascript" src="test.js"></script>
</head>
<body>
</body>
</html>分析：这个例子中，虽然我们把script元素放在了文档的head元素中，但其中包含的脚本将延迟到浏览器遇到</html>标签后再执行。
HTML5规范要求脚本按照它们出现的先后顺序执行，因此第一个延迟脚本会先于第二个延迟脚本执行，而这两个脚本会先于DOMContentLoaded事件(在DOM树构建完成后触发，不需要等到所有的资源都加载完毕)执行。
特别注意：在现实当中，延迟脚本并不一定会按照顺序执行，也不一定会在DOMContentLoaded事件触发前执行，因此最好只包含一个延迟脚本。
有 defer，加载后续文档元素的过程将和 script.js 的加载并行进行（异步），但是 script.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。
最佳的方法：从实用角度来说，把所有脚本都放在 </body> 之前是最佳实践，因为对于旧浏览器来说这是唯一的优化选择，此法可保证非脚本的其他一切元素能够以最快的速度得到加载和解析。
图解：
async (异步脚本)
非同期スクリプト：非同期属性は、外部スクリプトファイルに適用され、すぐにダウンロードファイルにブラウザに指示します。
差がある延期しかし：非同期スクリプトは、彼らが指定した順序で実行されているという保証はないとしてマークされています。
直接イラスト：
延期と非同期の類似点と相違点
- とともに
延期と非同期読み込みネットワーク（スクリプトのダウンロード）この子が同じであるが、（HTML構文解析と比較して）非同期であります
- 異なります
実装されていること、スクリプトをダウンロードした後、アプリケーションスクリプトの読み込みと実行要件に我々は明らかに延期最も近いです。延期すぐにダウンロードが、遅延実行、パラレル（非同期）でのスクリプトと負荷のフォローアップドキュメント要素をロードするプロセスが、解析されたすべての要素の後DOMContentLoadedイベントが発生する前にフィニッシュまでスクリプトの実行。非同期は、直ちにダウンロードして実行、負荷及び手順の後続の文書要素をレンダリングし、パラレル（非同期）で負荷JSのスクリプトの実装とされます。
ナイン、要約
いくつかは狭量なパートナーはスペースが限られている、まとめるので、次の別の記事に次の内容を継続することができ、要約の上に完了していません。次は乾燥している、継続........