Home >Web Front-end >H5 Tutorial >Xiaoqiang's road to HTML5 mobile development (3) - Comparison between HTML5 and HTML4

Xiaoqiang's road to HTML5 mobile development (3) - Comparison between HTML5 and HTML4

黄舟Original: 2017-01-22 10:29:091240browse

In the previous section, we introduced the new features of HTML5, the use of new tags, intelligent form design, the introduction of multimedia objects, Canvas objects for your canvas, extended graphic tags, geographical applications in HTML5, independent data storage, and new network connections.

HTML 5 is the biggest leap forward in web development standards in the past decade. Unlike previous versions, HTML 5 is not just used to represent Web content. Its new mission is to bring the Web into a mature application platform. On the HTML 5 platform, video, audio, images, animations, and computer-based Interactions are standardized. (HTML5 also has its own logo). Learning Html5 requires mastering the following aspects of knowledge.

1. HTML basic knowledge

2. CSS style knowledge

3. JavaScript knowledge

Many friends who have learned HTML 4.0 before may now understand I feel very confused. What is the difference between HTML 4.0 and HTML5? How will learning HTML4.0 help learning HTML5? In fact, the biggest difference between HTML5 and HTML4 is that HTML5 pays more attention to content and structure rather than performance. For example:

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

Like the above many tags in html5, we can use the dc6dce4a544fdca2df29d5ac0ea9906b tag instead in the previous html4, so why are there so many unused tags? This actually increases the difficulty of memory. ? In fact, this is not the case. There are many benefits to doing this. These tags with specific names make it easier to distinguish their respective functions. For example, they can be recognized on both PC browsers and mobile browsers and displayed in a good layout.

Another difference is that HTML5 has simplified more declarations and tags, also made detailed provisions on compatibility, abolished some elements, and added Some elements, such as the following declaration:

HTML4 declaration:

<!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"/>

HTML5 declaration:

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

When introducing JavaScript or CSS files, in HTML4 The writing method is as follows:

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

It becomes simpler in HTML5:

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

Not only that, HTML5 accepts some looser syntax, such as ae55229155ae708652405bb263ea55c1 3f1c4e4b6b16bbbd69b2ee476dc4f83a mixed case.

It can be seen from the above that HTML5 simplifies tags based on the development of previous browsers. In addition, tags are also classified grammatically in HTML5:

(1) Tags that do not allow terminal characters: area, basebr, col, command, embed, hr, img, input, keygen, link, meta, param, source, Track, wbr

(2) Labels with terminators can be omitted: li, dt, dd, p, rt, optgroup, option, colgroup, thread, tbody, tr, td, th

(3) Tags that can be completely omitted: html, head, body, colgroup, tbody

On the basis of html4, html5 also adds many new tags. Here are some of the new tags:

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

The code used to create the head navigation of the web page is as follows:

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

Use HTML5 to implement it as follows:

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

Some friends may ask, are there any advantages to writing this way? In HTML5, use independent tags to represent specific functions, such as 1aa9e5d373740b65a0cc8f0a02150c53 for headers and c787b9a589a3ece771e842a6176cf8e9 for navigation. This way the code becomes very semantic and easy to understand (no need to add additional comments like above), agree. For search engines, it's easier to find.

The above is Xiaoqiang’s HTML5 mobile development road (3) - the comparison between HTML5 and HTML4. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Xiaoqiang’s road to HTML5 mobile development (2) – new features of HTML5Next article：Xiaoqiang’s road to HTML5 mobile development (2) – new features of HTML5

See more

Xiaoqiang's road to HTML5 mobile development (3) - Comparison between HTML5 and HTML4

Related articles