Xiaoqiang の HTML5 モバイル開発への道のり (3) - HTML5 と HTML4 の比較-H5 チュートリアル-php.cn

Xiaoqiang の HTML5 モバイル開発への道のり (3) - HTML5 と HTML4 の比較

黄舟

リリース： 2017-01-22 10:29:09

オリジナル

1178 人が閲覧しました

前のセクションでは、HTML5 の新機能、新しいタグの使用、インテリジェントなフォーム設計、マルチメディアオブジェクトの導入、キャンバスの Canvas オブジェクト、拡張グラフィックタグ、HTML5 の地理的アプリケーション、独立したデータストレージ、および新しいネットワーク接続。

HTML 5 は、過去 10 年間で Web 開発標準における最大の進歩です。以前のバージョンとは異なり、HTML 5 は Web コンテンツを表すためだけに使用されるのではなく、HTML 5 プラットフォーム上で Web を成熟したアプリケーションプラットフォームに組み込むこと、およびコンピューターベースのインタラクションを標準化することです。。 (HTML5 には独自のロゴもあります)。HTML5 を学習するには、次の側面の知識を習得する必要があります。

1. HTML の基本的な知識

2. CSS スタイルの知識

以前に HTML 4.0 を学習したことがある多くの友人は、この時点で HTML 4.0 と HTML5 の違いについて混乱しているかもしれません。 .0 は HTML5 の学習に役立ちますか? 実際、HTML5 と HTML4 の最大の違いは、HTML5 ではパフォーマンスではなくコンテンツと構造に注意が払われることです。例:

<body>   
  
<header>  
<hgroup>导航相关数据</hgroup>  
</header>   
  
<nav>菜单</nav>   
  
<article>  
<h1>标题:HTML5专题</h1>  
发布日期:<time>19:00</time>  
<time datetime="2013-2-14">情人节</time>  
<p>测试相关内容</p>  
</article>  
  
<footer>   
<address>CSDN-大碗干拌的博客</address>  
</footer>   
  
</body>

ログイン後にコピー

前の html4 には、上記のようなタグがたくさんあります。代わりに

タグを使用することもできますが、なぜ未使用のタグがたくさんあり、覚えるのが難しくなるのでしょうか?実際にはそうではありません。これらのタグに特定の名前を付けると、それぞれの機能を区別しやすくなり、PC ブラウザーとモバイルブラウザーの両方で適切に表示できるようになります。レイアウト。

もう 1 つの違いは、HTML5 ではより多くの宣言とタグが簡略化され、互換性に関する詳細な規定が設けられ、いくつかの要素が廃止され、次のような要素が追加されたことです。

HTML4 の宣言:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0   
Transitonal//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-t......  
<html xmlns="http://www.w3.org/1999/xhtml">  
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>

ログイン後にコピー

Declaration HTML5 の:

<!DOCTYPE html>  
<meta charset=utf-8/>

ログイン後にコピー

JavaScript または CSS ファイルを導入する場合、HTML4 では次のように記述されます:

<script src="js/juery-1.6.2.js" type="text/javascript"></script>

ログイン後にコピー

HTML5 ではより簡単になります:

<script src="js/juery-1.6.2.js"></script>

ログイン後にコピー

それだけでなく、HTML5 は大文字と小文字が混在しています。

上記からわかるように、HTML5 は以前のブラウザーの開発に基づいてタグを簡素化しています。さらに、HTML5 では、タグは文法的にも分類されます:

(1) 終端文字を許可しないタグ: area、basebr、col、command、embed、hr、img、input、keygen、link、meta、param、source、 Track、wbr

(2) 終了文字タグは省略可能: li、dt、dd、p、rt、optgroup、option、colgroup、thread、tbody、tr、td、th

(3) 完全に省略可能タグ: html、head、body、colgroup、tbody

html4 に基づいて、html5 でも多くの新しいタグが追加されています。新しいタグの一部を以下に示します。

<article>  标记定义一篇文章  
<aside>  标记定义页面内容部分的侧边栏  
<audio>  标记定义音频内容  
<canvas>   标记定义图片  
<command>  标记定义一个命令按钮  
<datalist>  标记定义一个下拉列表  
<details>   标记定义一个元素的详细内容  
<dialog>   标记定义一个对话框(会话框)  
<embed>   标记定义外部的可交互的内容或插件  
<figure>   标记定义一组媒体内容以及它们的标题<footer> 标记定义一个页面或一个区域的底部  
<header>   标记定义一个页面或一个区域的头部  
<hgroup>   标记定义文件中一个区块的相关信息  
<keygen>   标记定义表单里一个生成的键值  
<mark>   标记定义有标记的文本  
<meter>   标记定义 measurementwithin apredefinedrange  
<nav>   标记定义导航链接  
<output>   标记定义一些输出类型  
<progress>   标记定义任务的过程  
<rp>   标记是用在Rubyannotations 告诉那些不支持Ruby元素的浏览器如何去显示  
<rt>   标记定义对rubyannotations的解释  
<ruby>   标记定义 rubyannotations.  
<section>   标记定义一个区域  
<source>   标记定义媒体资源  
<time>   标记定义一个日期/时间  
<video>   标记定义一个视频

ログイン後にコピー

Web ページのヘッドナビゲーションを作成するための以前のコードは次のとおりです。

<div class="header">  
    <div class="navigation">  
        <ul class="nav_list">  
            <li><a href="#" title="Home">Home</li>  
            <li><a href="#" title="About">About</li>  
        </ul>  
    </div><!--导航标签结束-->  
</div><!--头部结束-->

ログイン後にコピー

HTML5 を使用して次のように実装します:

<header>  
    <nav>  
        <ul id="nav-list">  
            <li><a href="#" title="Home">Home</a></li>  
            <li><a href="#" title="About">About</a></li>  
        </ul>  
    </nav>  
</header>

ログイン後にコピー

友人の中には、この方法で書くことに何か利点があるのかと尋ねる人もいるかもしれません。 HTML5 では、ヘッダーの

やナビゲーションの

など、独立したタグが使用されます。これにより、コードが非常にセマンティックになり、理解しやすくなります (上記のような追加のコメントは必要ありません)。検索エンジンの場合、見つけやすくなります。

上記は、Xiaoqiang の HTML5 モバイル開発ロード (3) - HTML5 と HTML4 の比較です。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) に注目してください。