recherche

Maison >interface Web >Tutoriel H5 >Le chemin de Xiaoqiang vers le développement mobile HTML5 (3) - Comparaison entre HTML5 et HTML4

Le chemin de Xiaoqiang vers le développement mobile HTML5 (3) - Comparaison entre HTML5 et HTML4

黄舟
黄舟original
2017-01-22 10:29:091252parcourir

Dans la section précédente, nous avons présenté les nouvelles fonctionnalités de HTML5, l'utilisation de nouvelles balises, la conception de formulaires intelligents, l'introduction d'objets multimédia, des objets Canvas pour votre canevas, des balises graphiques étendues, des applications géographiques en HTML5, un stockage de données indépendant. , et de nouvelles connexions réseau.

HTML 5 constitue le plus grand progrès en matière de normes de développement Web au cours de la dernière décennie. Contrairement aux versions précédentes, HTML 5 n'est pas seulement utilisé pour représenter le contenu Web. Sa nouvelle mission est de faire du Web une plate-forme d'application mature. Sur la plate-forme HTML 5, la vidéo, l'audio, les images, les animations et les interactions informatiques sont standardisés. . (HTML5 possède également son propre logo). L'apprentissage du HTML5 nécessite de maîtriser les aspects de connaissances suivants.

1. Connaissance de base du HTML

2. Connaissance des styles CSS

3 Connaissance de JavaScript

De nombreux amis qui ont déjà appris le HTML 4.0 peuvent. Maintenant, je comprends que je me sens très confus. Quelle est la différence entre HTML 4.0 et HTML5 ? Comment l'apprentissage de HTML4.0 aidera-t-il à apprendre le HTML5 ? En fait, la plus grande différence entre HTML5 et HTML4 est que HTML5 accorde plus d'attention au contenu et à la structure qu'aux performances ? . Par exemple : 

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

Comme beaucoup de balises dans HTML5 ci-dessus, nous pouvons utiliser des balises dc6dce4a544fdca2df29d5ac0ea9906b à la place dans le HTML4 précédent, alors pourquoi y a-t-il autant de balises inutilisées ? Est-il difficile de se souvenir ? En fait, ce n'est pas le cas. Cela présente de nombreux avantages. Ces balises avec des noms spécifiques permettent de distinguer plus facilement leurs fonctions respectives. Par exemple, elles peuvent être reconnues aussi bien sur les navigateurs PC que sur les navigateurs mobiles et affichées dans un bon. mise en page.


Une autre différence est que HTML5 a simplifié davantage de déclarations et de balises, a également pris des dispositions détaillées sur la compatibilité, supprimé certains éléments et ajouté certains éléments, comme la déclaration suivante :

Déclaration 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"/>

Déclaration HTML5 : 

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

lors de l'introduction de fichiers JavaScript ou CSS A cette époque, l'écriture en HTML4 était la suivante : 

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

est devenu encore plus simple en HTML5 : 

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

De plus, HTML5 accepte une syntaxe plus souple, telle que ae55229155ae708652405bb263ea55c1 3f1c4e4b6b16bbbd69b2ee476dc4f83aUtiliser une casse mixte.


Comme le montre ce qui précède, HTML5 simplifie les balises en fonction du développement des navigateurs précédents. De plus, les balises sont également classées grammaticalement en HTML5 :

(1) Balises qui n'autorisent pas les caractères de terminal : area, basebr, col, command, embed, hr, img, input, keygen, link, meta, param, source, Track, wbr

(2) Les balises avec des terminateurs peuvent être omises : li, dt, dd, p, rt, optgroup, option, colgroup, thread, tbody, tr, td, th

(3) Balises qui peuvent être complètement omises : html, head, body, colgroup, tbody

Sur la base de html4, html5 ajoute également de nombreuses nouvelles balises : 

<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>   标记定义一个视频

Le code utilisé pour créer la navigation principale de la page Web est le suivant : 

<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><!--头部结束-->

L'implémentation en utilisant HTML5 est la suivante : 

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

Certains amis peuvent demander, comme ceci. Y a-t-il des avantages à écrire ? En HTML5, utilisez des balises indépendantes pour représenter des fonctions spécifiques, telles que 1aa9e5d373740b65a0cc8f0a02150c53 pour les en-têtes et c787b9a589a3ece771e842a6176cf8e9 de cette façon, le code devient très sémantique et facile à comprendre (pas besoin d'ajouter des commentaires supplémentaires comme ci-dessus), d'accord. . Pour les moteurs de recherche, c'est plus facile à trouver.

Ce qui précède est la route de développement mobile HTML5 de Xiaoqiang (3) - la comparaison entre HTML5 et HTML4. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Le chemin de Xiaoqiang vers le développement mobile HTML5 (2) – nouvelles fonctionnalités de HTML5Article suivant：Le chemin de Xiaoqiang vers le développement mobile HTML5 (2) – nouvelles fonctionnalités de HTML5

Articles Liés

Voir plus