ホームページ  >  記事  >  ウェブフロントエンド  >  Xiaoqiang の HTML5 モバイル開発への道のり (3) - HTML5 と HTML4 の比較

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

黄舟
黄舟オリジナル
2017-01-22 10:29:091191ブラウズ

前のセクションでは、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 には、上記のようなタグがたくさんあります。代わりに dc6dce4a544fdca2df29d5ac0ea9906b タグを使用することもできますが、なぜ未使用のタグがたくさんあり、覚えるのが難しくなるのでしょうか?実際にはそうではありません。これらのタグに特定の名前を付けると、それぞれの機能を区別しやすくなり、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 は f7d51c8472abeb465e9ddfe86f9357d3 大文字と小文字が混在しています。


上記からわかるように、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 では、ヘッダーの 1aa9e5d373740b65a0cc8f0a02150c53 やナビゲーションの c787b9a589a3ece771e842a6176cf8e9 など、独立したタグが使用されます。これにより、コードが非常にセマンティックになり、理解しやすくなります (上記のような追加のコメントは必要ありません)。検索エンジンの場合、見つけやすくなります。


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

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