ホームページ >ウェブフロントエンド >htmlチュートリアル >HTML5 の新しい機能とタグは何ですか? HTML5 JS の新機能を共有する
HTML5 の新しい機能とタグは何ですか? HTML5 JS の新機能を共有する
- php是最好的语言オリジナル
- 2018-07-30 15:51:042428ブラウズ
H5 の導入以来、HTML4 は忘れ去られてしまったのでしょうか? 確かに、HTML5 は Web 上に存在するあらゆる種類のコンテンツを組み合わせることができ、非常に重要です。問題をまとめて解決しますので、この記事ではHTML5の新機能を詳しく紹介します。 apache php mysql
始めましょう!
1. HTML5 と HTML4 の開始の理由と目標
1.1
H5 の出現は Web にとって非常に重要です。なぜなら、彼の目的は現在 Web 上に存在するあらゆる種類の問題を解決することだからです。
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: 4t 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>信じてください。自分でテストできます。どうやってテストしますか?非常に簡単です。スタイルを別々に設定して、それらが同じであるかどうかを確認するだけです。同じであれば、それらが同等であることが証明されます。注: p タグのスタイルを設定します。
1.2.4 ブール値を持つ属性 (disabled、checked)
disabled は主に input 要素、button 要素、option 要素などに使用され、これらの要素が無効かどうかを意味します。使用方法は次のとおりです。属性値「disabled」は置き換えることができます。属性値「false」は属性が有効でないことを意味し、属性値「true」は属性が有効であることを意味するため、他の単語は「enabled」でも構いません（「false」を除く）。 。次のコードのボタン要素はすべて無効になっています:
<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="测试按钮">checked 使い方は無効と同じなので、ここでは詳しく説明しません。
1.2.5 引用符を省略します（タグ内の属性値は引用符を省略できます）
H5より前の属性値の書き方はこんな感じです、imgタグのsrc属性を例にします:
<body>
<img src="/static/imghwm/default1.png" data-src="https://img.php.cn//upload/image/342/865/552/1532934864725048.png?x-oss-process=image/resize,p_40" class="lazy" alt="">
</body>現在、次のように書くことができます:
<body>
<img src="/static/imghwm/default1.png" data-src="https://img.php.cn//upload/image/342/865/552/1532934864725048.png?x-oss-process=image/resize,p_40" class="lazy" sre = HTML5 の新しい機能とタグは何ですか? HTML5 JS の新機能を共有する alt = "">
</body>両方の結果は同じです。画像は正常に表示できます
1.3 新たに追加されたセマンティックタグ
セマンティックとは何ですか?
セマンティックとは、文書コンテンツのフォーマットに適切な HTML タグとその固有の属性を使用することを指します。平たく言えば、セマンティクスとは、機械が理解できるようにデータと情報を処理することを意味します
新しいセマンティック タグ: セクション、記事、サイド、ヘッダー、hgroup、フッター、ナビゲーション、図
具体的な使用法: セマンティック タグの新しい使用法
1.4 新しい「ファンシー」タグ要素
ビデオ、オーディオ、キャンバス、埋め込み、マーク、進行状況、メーター、時間、ルビー、rt、rp、wbr、コマンド、詳細、データリスト、エディターではデータグリッドの使用法は紹介されません。ここでは keygen、output、source、menu
タグを 1 つずつタグ付けします。 Baidu を直接使用してください。一般的にはあまり使われないので、覚えておいてください。 （インタビュー中に使用することができます）
1.5新しい入力タイプ
メール、URL、数字、範囲、デートピッカーズ
は部分的な説明です。<input type="number" name="">
- 残りのエディターはテストしませんので、興味があればテストしてみてください。 1.6 タグの廃止
basefont、big、center、font、s、tt、uなどをCSSで置き換えることができます
フレームフレームワークは使用されなくなりました
要素のみサポート一部のブラウザで使用可能
その他の非推奨の要素
- 1.7 新しいグローバル属性
グローバル属性は、すべてのタグに使用できる属性を指します
contentEditable 属性 (コンテンツが編集可能かどうかを指定します)
<input type = "range" name = "">
designMode 属性 (これは、ページ内のすべての要素が編集可能モードで開くようにするために js で使用されます)
<input type="text" name="name" contenteditable="true">
hidden 属性
spellcheck 属性 (input および textarea によって提供される新しい属性、文法チェックが完了しました)
tabindex 属性 (タグにフォーカスを取得させます)
<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>
<a href="#">链接1</a>
<a href="#">链接2</a>
</nav>页面上的一个标题组合
<hgroup>
<h1>旅游</h1>
<h2>上海</h2>
</hgroup>页面上的板块
用于划分页面上的不同区域,或者划分文章里不同的节
article > 用来在页面中表示一套结构完整且独立的内容部分
可以用来呈现论坛的一个帖子，杂志或报纸中的一篇文章，一篇博客，用户提交的评论内容，可互动的页面模块挂件等
该元素标签可以包含与当前页面或主要内容相关的引用、侧边栏、广告、nav元素组，以及其他类似的有别与主要内容的部分
8.
用于对元素进行组合。一般用于图片或视频
figure 的子元素,用于对figure的内容进行说明
<figure>
<!-- (注意没有alt) -->
<img src="/static/imghwm/default1.png" data-src="images/225.jpg" class="lazy" style="max-width:90%" height="100px" / alt="HTML5 の新しい機能とタグは何ですか? HTML5 JS の新機能を共有する" >
<figcaption>薰衣草</figcaption>
</figure>
2.2 讲解标签
强调分段，一般存在一个标题的
<section>
<h1>CAR</h1>
</section>一般用于传统导航，侧边栏导航，页内导航、翻页导航
非主体结构标签
Header 元素是一种具有引导和导航作用的结构元素，通常用来防止整个页面和页面内的一个内容区块的标题，但是也可以包含其他内容，例如数据、搜索表单或相关的logo图片。
Footer元素可以作为其上层父级内容区或者一个根区块的脚注。Footer通常包含其相关区块的脚注信息，如作者、相关的阅读链接及其版权信息等
Hgroup元素是将标题及其子标题进行分组的标签。Hgroup标签通常会将h1-h6标签进行分组。譬如一个内容区的标题及其子元素算一组。
Address元素用来在文档中呈现联系信息，包括文档作者或文档维护者的名字、它们的网站链接、电子邮箱、真实地址、电话号码等。Address应该不只用来呈现电子邮箱或真实地址，还用来展示跟文档相关的联系人的所有联系信息。
三、表单内新增的元素和属性
3.1 form 小编俗解：在 表单外部的标签可以通过form属性进行链接
eg：
<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 autofocus 获取焦点
<input type="text" name="">
<input type="text" name="" autofocus="autofocus">
3.4 required 属性
HTML5中新增的属性可以应用于大多数的输入标签上，在提交时，如果元素中内容为空白，则不允许提交，同时在浏览器中显示信息提示文字。看下面例子：
<form>
<input type="text" name="" autofocus="autofocus" required>
<input type="submit" name="">
</form>
3.5 placeholder 属性，用于显示文本未输入内容之前，
<form>
<input type="text" name="name" placeholder="请输入你的姓名">
</form>
3.6 autoComplete 属性
<form autocomplete="on">
<input type="text" name="name" placeholder="请输入你的姓名" >
</form>
3.7 pattern 属性
该属性用于正则表达式。见下面小例子：
<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 小编有话说
新增的表单属性和元素还有很多，在这里我只列举了一些较常用的属性和元素，至于剩余的部分，小伙伴们用到的时候网上搜索就行。好啦！这部分结束，继续下面的内容。
四、新的Javascript选择器
4.1 querySelector()
<p id="box">Hello World！</p>
<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()
<p id="box">Hello World！</p>
<p id="box">Hello！</p>
<p id="box">World！</p>
<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 中的属性和方法
length (长度)
<p id="box" class="test test1 test2 test 3 test4"></p>
<script>
var box = document.querySelector("#box");
window.onload = function (){
console.log(box.classList);
console.log(box.classList.length);
}
</script>
add() 增加
<p id = "box" class = "test test1 test2 test3 test4 "></p>
<script>
var box = document.querySelector("#box");
window.onload = function(){
box.classList.add("test5");
console.log(box.classList);
}
</script>
remove() 移除
<p>Hello World!</p>
<script>
var box = document.querySelector("#box");
window.onload = function (){
box.classList.remove("test");
console.log(box.classList);
}
</script>
toggle() 简单理解：有则删除，没有则添加
有的时候
<p id="box" class="test test2 test3 test4">Hello World!</p>
<script type="text/javascript">
var box = document.querySelector("#box");
window.onload = function (){
box.classList.toggle("test");
console.log(box.classList);
}
</script>
没有的时候
<p id="box" class="test test2 test3 test4">Hello World!</p>
<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
见下面的小例子就明白了：
<p>Hello world!</p>
<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元素中，但其中包含的脚本将延迟到浏览器遇到
以上がHTML5 の新しい機能とタグは何ですか? HTML5 JS の新機能を共有するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。