Introduction to the differences between HTML and XHTML, and HTML4 and HTML5 tags_HTML/Xhtml_Webpage Production

The difference between HTML and XHTML
1. XHTML elements must be nested correctly
2. XHTML elements must be closed, and empty tags must also be closed. Such as

3. XHTML elements must be lowercase

4. XHTML documents must have a root element

5. XHTML attribute names must be lowercase, attribute values ​​must be in quotation marks, and attributes cannot be abbreviated. For example:
6. XHTML uses the id attribute instead of the name attribute.

Note: An extra space should be added before the "/" symbol to make your XHTML compatible with today's browsers

7. Language attribute (lang) The lang attribute applies to almost all XHTML elements. It defines the type of language used for the content inside the element. If you use the lang attribute in an element, you must add additional xml:lang, like this:

Heia Norge!

Three XML document types of XHTML 1.0
XHTML 1.0 specifies three XML document types to correspond to the above three DTDs.

XML/HTML CodeCopy content to clipboard

1. XHTML 1.0 Strict
2. /span>
3. PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
4. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Use in situations where clean markup is needed to avoid clutter in performance. Please use it with Cascading Style Sheets.

XML/HTML CodeCopy content to clipboard

1. XHTML 1.0 Transitional
2. /span>
3. PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
4. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Use when you need to take advantage of the presentational features of HTML and when you need to write XHTML for browsers that do not support cascading style sheets.

XML/HTML CodeCopy content to clipboard

1. XHTML 1.0 Frameset
2. /span>
3. PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
4. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Used in this situation: When you need to use HTML frames to split the browser window into two or more frames.

HTML4 and HTML5

HTML5 is very popular recently. Let’s take a look at some of the differences between HTML5 tags and HTML4 tags:
1. Changes in concepts:

HTML5 focuses on content and structure, but not on performance

Navigation related data

Menu

Title: HTML5 special video tutorial

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

(1), Grammar tag:

a. Ending tags that are not allowed to be written: area, basebr, col, command, Embed, hr, img, input, keygen, link, meta, param, source, Track, wbr
b. Can be omitted Terminator tags: li, dt, dd, p, rt, optgroup, option, Colgroup, thread, tbody, tr, td, th
c. Tags that can be completely omitted: html, head, body, colgroup, tbody

(2), new tag:

Tag defines an article

Tag defines the sidebar of the content section of the page

HTML5 simple example

XML/HTML CodeCopy content to clipboard

1. html>    
2. head>    
3. meta charset=utf-8>    
4. title>PHP100中文网HTML5专题title>    
5. style type="text/css" rel="stylesheet">    
6. header,nav,article,footer {border:solid 1px #666;padding:5px}    
7. header{width:500px}    
8. nav{float:left;width:60px;height:200px}    
9. article{float:left;width:428px;height:200px}    
10. footer{clear:both;width:500px}    
11. style>    
12. script type="text/javascript">    
13. document.createElement('article');    
14. document.createElement('nav');    
15. document.createElement('header');    
16. script>    
17. head>    
18. body>    
19. header>    
20. hgroup>导航相关数据hgroup>    
21. header>    
22. nav>菜单nav>    
23. article>    
24. h1>HTML5专题视频教程h1>    
25. 发布日期:time>09:00time>    
26. time datetime="2013-2-10">春节time>    
27. p>测试相关内容p>    
28. article>    
29. footer>    
30. address>地址address>    
31. footer>    
32. body>    
33. html>