Home > Article > Web Front-end > An example of the difference between HTML5 tags and HTML4 tags

An example of the difference between HTML5 tags and HTML4 tags

PHP中文网Original: 2017-03-25 14:36:431723browse

1. Concept changes:
HTML5 focuses on content and structure, but not on performance
1aa9e5d373740b65a0cc8f0a02150c53
d8eccd9ed644b68a6460a2bb84548c82Navigation related data56fbe8412068aebd21bb90ff6e0b48f0
c787b9a589a3ece771e842a6176cf8e9Menu44f9630a3d507ae7532760da37622b0f
23c3de37f2f9ebcb477c4a90aac6fffd
4a249f0d628e2318394fd9b75b4636b1Title: HTML5 Special Video Tutorial473f0a7621bec819994bb5020d29372a
2. Declarations and tags:
HTML5 has simplified more declarations and tags, and also made detailed provisions on compatibility, abolished some elements, and added some elements.
HTML5 tag syntax introduction and new tags
3. Grammar tags:
(1) Tags that are not allowed to write end characters: area, basebr, col, command, Embed, hr, img, input, keygen, link, meta, param, source, Track, wbr
(2) The end character tag 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
4. New tags:
23c3de37f2f9ebcb477c4a90aac6fffd Markup defines an article
15221ee8cba27fc1d7a26c47a001eb9b Markup defines the sidebar of the page content section
b97864c2e0ef2353a16c4d64c7734e92 Markup defines audio content
5ba626b379994d53f7acf72a64f9b697 Markup defines an image
e2b9f03cad787b9644e1f51fd23b7dac Markup Define a command button
fc86e7b705049fc9d4fccc89a2e80ee3 tag defines a drop-down list
a5e9d42b316b6d06c62de0deffc36939 tag defines the details of an element
a38fd2622755924ad24c0fc5f0b4d412 tag defines a dialog box (conversation box)
< ;embed> tag defines external interactive content or plug-ins
24203f2f45e6606542ba09fd2181843a tag defines a set of media content and their headers c37f8231a37e88427e62669260f0074d tag defines the bottom of a page or area
1aa9e5d373740b65a0cc8f0a02150c53 Mark defines the header of a page or a region
d8eccd9ed644b68a6460a2bb84548c82 Related information of a block in the mark definition file
aa983b9eb8086376f1f6481364a02e5a A generated key value in the mark definition form
f920514e6447cf1d171079d1371f007f Marker definition text with marker
49c6123c49c6be380cb91db06cd3bfa9 Marker definition measurementwithin apredefinedrange
c787b9a589a3ece771e842a6176cf8e9 Marker definition navigation link
be6d67dae90cc1ad6469079e163d0939 Marker definition some output types
6ecb87e5318a36c03c59e25d55f43372 Marker definition task The process of
515718f19dfe6612658be14be18aa0ec tag is used in Rubyannotations to tell browsers that do not support Ruby elements how to display
7240f116d85a7ee375466871bc33670a tag definitions for rubyannotations
ec41f2147470148e85ad0337a362103e tags define rubyannotations.
2f8332c8dcfd5c7dec030a070bf652c3 tag defines a region
e02da388656c3265154666b7c71a8ddc tag defines a media resource
46dd80ba616c57a652514755c74c4211 tag defines a date/time
39000f942b2545a5315c57fa3276f220 tag defines a video
5.HTML5 simple example

<!DOCTYPE html> 
<head> 
<meta charset=utf-8> 
<title>PHP100中文网HTML5专题</title> 
<style type="text/css" rel="stylesheet"> 
header,nav,article,footer {border:solid 1px #666;padding:5px} 
header{width:500px} 
nav{float:left;width:60px;height:200px} 
article{float:left;width:428px;height:200px} 
footer{clear:both;width:500px} 
</style> 
<script type="text/javascript"> 
document.createElement(&#39;article&#39;); 
document.createElement(&#39;nav&#39;); 
document.createElement(&#39;header&#39;); 
</script> 
</head> 
<body> 
<header> 
<hgroup>导航相关数据</hgroup> 
</header> 
<nav>菜单</nav> 
<article> 
<h1>HTML5专题视频教程</h1> 
发布日期:<time>09:00</time> 
<time datetime="2013-2-10">春节</time> 
<p>测试相关内容</p> 
</article> 
<footer> 
<address>地址</address> 
</footer> 
</body> 
</html>

Definition and regulations of each tag in HTML5: header

Detailed explanation of how to use HTML5 tags

Comprehensive list of HTML5 tags

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：HTML5 text shadow effect text-shadow usage example_html5 tutorial skillsNext article：HTML5 text shadow effect text-shadow usage example_html5 tutorial skills

See more

An example of the difference between HTML5 tags and HTML4 tags

Related articles