検索
ホームページウェブフロントエンドhtmlチュートリアルHTML5 の新しい機能とタグは何ですか? HTML5 JS の新機能を共有する

H5 の導入以来、HTML4 は忘れ去られてしまったのでしょうか? 確かに、HTML5 は Web 上に存在するあらゆる種類のコンテンツを組み合わせることができ、非常に重要です。問題をまとめて解決しますので、この記事ではHTML5の新機能を詳しく紹介します。 apache php mysql

始めましょう!

1. HTML5 と HTML4 の開始の理由と目標

1.1

H5 の出現は Web にとって非常に重要です。なぜなら、彼の目的は現在 Web 上に存在するあらゆる種類の問題を解決することだからです。

  1. Webブラウザ間の互換性が非常に低い

  2. ドキュメントの構造が十分に明確ではない(多くの構造とセマンティックタグが追加されている)

  3. 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. 残りのエディターはテストしませんので、興味があればテストしてみてください。

    1.6 タグの廃止

HTML5 の新しい機能とタグは何ですか? HTML5 JS の新機能を共有するbasefont、big、center、font、s、tt、uなどをCSSで置き換えることができます

  1. フレームフレームワークは使用されなくなりました

要素のみサポート一部のブラウザで使用可能HTML5 の新しい機能とタグは何ですか? HTML5 JS の新機能を共有する

その他の非推奨の要素

    1.7 新しいグローバル属性
  1. グローバル属性は、すべてのタグに使用できる属性を指します

  2. contentEditable 属性 (コンテンツが編集可能かどうかを指定します)

  3.  <input  type = "range" name = "">

  4. designMode 属性 (これは、ページ内のすべての要素が編集可能モードで開くようにするために js で使用されます)

    <input type="text" name="name" contenteditable="true">

hidden 属性

  • spellcheck 属性 (input および textarea によって提供される新しい属性、文法チェックが完了しました)

tabindex 属性 (タグにフォーカスを取得させます)HTML5 の新しい機能とタグは何ですか? HTML5 JS の新機能を共有する

      <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>

HTML5 の新しい機能とタグは何ですか? HTML5 JS の新機能を共有する

二、新增的语义化标签

2.1 新增元素

  1.  页眉

主要用于页面的头部的信息介绍,也可用于板块头部

  1. 页脚

页面的底部 或者 版块底部

  1. 导航  (包含链接的的一个列表)

     <nav>
        <a href="#">链接1</a>
        <a href="#">链接2</a>
    </nav>
  1.  页面上的一个标题组合

        <hgroup>
                 <h1 id="旅游">旅游</h1>
                 <h2 id="上海">上海</h2>
      </hgroup>
  1. 页面上的板块

用于划分页面上的不同区域,或者划分文章里不同的节

  1. article > 用来在页面中表示一套结构完整且独立的内容部分

可以用来呈现论坛的一个帖子,杂志或报纸中的一篇文章,一篇博客,用户提交的评论内容,可互动的页面模块挂件等

该元素标签可以包含与当前页面或主要内容相关的引用、侧边栏、广告、nav元素组,以及其他类似的有别与主要内容的部分

8.

用于对元素进行组合。一般用于图片或视频

  1.  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>

HTML5 の新しい機能とタグは何ですか? HTML5 JS の新機能を共有する

2.2 讲解标签

  1. 强调独立性

  2. 强调分段,一般存在一个标题的

    <section>
    <h1 id="CAR">CAR</h1>
    </section>

一般用于传统导航,侧边栏导航,页内导航、翻页导航

  1. 非主体结构标签

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>

HTML5 の新しい機能とタグは何ですか? HTML5 JS の新機能を共有する

3.2 formtarget 属性

  • _blank    在新窗口中打开。

  • _self    默认。在相同的框架中打开。

  • _parent    在父框架集中打开。

  • _top    在整个窗口中打开。

3.3 autofocus 获取焦点

    <input type="text" name="">
    <input type="text" name="" autofocus="autofocus">

HTML5 の新しい機能とタグは何ですか? HTML5 JS の新機能を共有する

3.4 required 属性

HTML5中新增的属性可以应用于大多数的输入标签上,在提交时,如果元素中内容为空白,则不允许提交,同时在浏览器中显示信息提示文字。看下面例子:

    <form>
    <input type="text" name="" autofocus="autofocus" required>
    <input type="submit" name="">
    </form>

HTML5 の新しい機能とタグは何ですか? HTML5 JS の新機能を共有する

3.5 placeholder 属性,用于显示文本未输入内容之前,

    <form>
    <input type="text" name="name" placeholder="请输入你的姓名">
    </form>

HTML5 の新しい機能とタグは何ですか? HTML5 JS の新機能を共有する

3.6 autoComplete 属性

    <form autocomplete="on">
    <input type="text" name="name" placeholder="请输入你的姓名" >
    </form>

HTML5 の新しい機能とタグは何ですか? HTML5 JS の新機能を共有する

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>

HTML5 の新しい機能とタグは何ですか? HTML5 JS の新機能を共有する

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>

HTML5 の新しい機能とタグは何ですか? HTML5 JS の新機能を共有する

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>

HTML5 の新しい機能とタグは何ですか? HTML5 JS の新機能を共有する

五、新增 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>

HTML5 の新しい機能とタグは何ですか? HTML5 JS の新機能を共有する

  • 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>

HTML5 の新しい機能とタグは何ですか? HTML5 JS の新機能を共有する

  • remove()  移除

    <p>Hello World!</p>
<script>
    var box = document.querySelector("#box");
    window.onload = function (){
        box.classList.remove("test");
        console.log(box.classList);
    }
</script>

HTML5 の新しい機能とタグは何ですか? HTML5 JS の新機能を共有する

  • toggle()   简单理解:有则删除,没有则添加

  1. 有的时候

    <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>

HTML5 の新しい機能とタグは何ですか? HTML5 JS の新機能を共有する

  1. 没有的时候

    <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>

HTML5 の新しい機能とタグは何ですか? HTML5 JS の新機能を共有する

六、JSON 的新方法

6.1 eval

eval(): 可以解析任何字符串变成JS , 对JSON内容进行解析的话必须在最外面使用(); 例如:

    <script>
    var str = "({name:&#39;Tom&#39;,age:&#39;20&#39;,sex:&#39;man&#39;})";
    var obj = eval(str);
    console.log(obj);
</script>

HTML5 の新しい機能とタグは何ですか? HTML5 JS の新機能を共有する

七、自定义标签属性

语法: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>

HTML5 の新しい機能とタグは何ですか? HTML5 JS の新機能を共有する

分析: 其实很简单,首先在标签中根据自己的需要定义属性,比如小编这里定义了字体的颜色和大小,光定义是不行的,浏览器不认识,所以还需要引用,在js中进行引用,引用方式就是和平常我们用js改变属性值是一样的,谨记要用驼峰命名法。

八、JS加载过程

一般情况

按照惯例,所有script元素都应该放在页面的head元素中。这种做法的目的就是把所有外部文件(CSS文件和JavaScript文件)的引用都放在相同的地方。可是,在文档的head元素中包含所有JavaScript文件,意味着必须等到全部JavaScript代码都被下载、解析和执行完成以后,才能开始呈现页面的内容(浏览器在遇到body标签时才开始呈现内容)。
对于那些需要很多JavaScript代码的页面来说,这无疑会导致浏览器在呈现页面时出现明显的延迟,而延迟期间的浏览器窗口中将是一片空白。为了避免这个问题,现在Web应用程序一般都把全部JavaScript引用放在body元素中页面的内容后面。这样一来,在解析包含的JavaScript代码之前,页面的内容将完全呈现在浏览器中。而用户也会因为浏览器窗口显示空白页面的时间缩短而感到打开页面的速度加快了。

总结一句话:在JavaScript代码时要把该部分放在body的后面

看下面的图解:

HTML5 の新しい機能とタグは何ですか? HTML5 JS の新機能を共有する

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 サイトの他の関連記事を参照してください。

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
HTML対CSS対JavaScript:比較概要HTML対CSS対JavaScript:比較概要Apr 16, 2025 am 12:04 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。HTMLはコンテンツ構造を担当し、CSSはスタイルを担当し、JavaScriptは動的な動作を担当します。 1。HTMLは、セマンティクスを確保するためにタグを使用してWebページの構造とコンテンツを定義します。 2。CSSは、セレクターと属性を介してWebページスタイルを制御して、美しく読みやすくします。 3。JavaScriptは、動的でインタラクティブな関数を実現するために、スクリプトを通じてWebページの動作を制御します。

HTML:それはプログラミング言語か何か他のものですか?HTML:それはプログラミング言語か何か他のものですか?Apr 15, 2025 am 12:13 AM

htmlisnotaprogramminglanguage; itisamarkuplanguage.1)htmlStructuresandformatswebcontentusingtags.2)ItworkswithcsssssssssdjavascriptforInteractivity、強化を促進します。

HTML:Webページの構造の構築HTML:Webページの構造の構築Apr 14, 2025 am 12:14 AM

HTMLは、Webページ構造の構築の基礎です。 1。HTMLは、コンテンツ構造とセマンティクス、および使用などを定義します。タグ。 2. SEO効果を改善するために、などのセマンティックマーカーを提供します。 3.タグを介したユーザーの相互作用を実現するには、フォーム検証に注意してください。 4. JavaScriptと組み合わせて、動的効果を実現するなどの高度な要素を使用します。 5.一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれ、検証ツールが必要です。 6.最適化戦略には、HTTP要求の削減、HTMLの圧縮、セマンティックタグの使用などが含まれます。

テキストからウェブサイトへ:HTMLの力テキストからウェブサイトへ:HTMLの力Apr 13, 2025 am 12:07 AM

HTMLは、Webページを構築するために使用される言語であり、タグと属性を使用してWebページの構造とコンテンツを定義します。 1)htmlは、などのタグを介してドキュメント構造を整理します。 2)ブラウザはHTMLを分析してDOMを構築し、Webページをレンダリングします。 3)マルチメディア関数を強化するなど、HTML5の新機能。 4)一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれます。 5)最適化の提案には、セマンティックタグの使用とファイルサイズの削減が含まれます。

HTML、CSS、およびJavaScriptの理解:初心者向けガイドHTML、CSS、およびJavaScriptの理解:初心者向けガイドApr 12, 2025 am 12:02 AM

webdevelopmentReliesOnhtml、css、andjavascript:1)htmlStructuresContent、2)cssStylesit、および3)Javascriptaddsinteractivity、形成、

HTMLの役割:Webコンテンツの構造HTMLの役割:Webコンテンツの構造Apr 11, 2025 am 12:12 AM

HTMLの役割は、タグと属性を使用してWebページの構造とコンテンツを定義することです。 1。HTMLは、読みやすく理解しやすいようなタグを介してコンテンツを整理します。 2。アクセシビリティとSEOを強化するには、セマンティックタグなどを使用します。 3. HTMLコードの最適化により、Webページの読み込み速度とユーザーエクスペリエンスが向上する可能性があります。

HTMLとコード:用語を詳しく見るHTMLとコード:用語を詳しく見るApr 10, 2025 am 09:28 AM

htmlisaspecifictypeofcodefocuseduructuringwebcontent

HTML、CSS、およびJavaScript:Web開発者に不可欠なツールHTML、CSS、およびJavaScript:Web開発者に不可欠なツールApr 09, 2025 am 12:12 AM

HTML、CSS、およびJavaScriptは、Web開発の3つの柱です。 1。HTMLは、Webページ構造を定義し、などなどのタグを使用します。2。CSSは、色、フォントサイズなどのセレクターと属性を使用してWebページスタイルを制御します。

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

mPDF

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。

AtomエディタMac版ダウンロード

AtomエディタMac版ダウンロード

最も人気のあるオープンソースエディター

EditPlus 中国語クラック版

EditPlus 中国語クラック版

サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません

PhpStorm Mac バージョン

PhpStorm Mac バージョン

最新(2018.2.1)のプロフェッショナル向けPHP統合開発ツール

WebStorm Mac版

WebStorm Mac版

便利なJavaScript開発ツール