魏贺礼

HTML5全部元素详解：一个都不能少

The root element

元素是 HTML 文档的根元素。建议为元素指定 lang 属性，便于屏幕阅读器识别。

Document metadata

元素表示文档元数据的集合，是元素的第一个子元素。



    
        
        Document

</h2> </div> <div> <title> 元素代表文档的名字或标题。 </div> <div> <pre><code class="language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name> <title>这是文档的标题

元素为文档中的所有链接指定基地址。如果URL中含有协议名或"//"则会忽略指定的基地址。

元素为文档指定外部样式表。

元素提供文档的元信息，如文档编码、文档作者、文档描述等。

Sections

浏览器窗口中显示的所有内容都在元素中，是元素的第二个子元素。



    
        
        
    
    
        浏览器窗口中显示的所有内容都在这里

代表独立的、完整的一篇”文章“，如一个贴子、一篇文章、一条回复。可以包含

、



    
        
        
    
    
        
        
            
                The Very First Rule of Life
                3 days ago
            
            If there's a microphone anywhere near you, assume it's hot and sending whatever you're saying to the world. Seriously.
            ...
            
                Comments
                
                
                    
                        Posted by: George Washington
                        15 minutes ago
                    
                    Yeah! Especially when talking about your lobbyist friends!
                
                
                
                    
                        Posted by: George Hammond
                        5 minutes ago
                    
                    Hey, you have the same first name as me.

代表页面或某一部分的一节或一个部分，每个

一般都有一个主题思想，但未必一定要有元素。



    
        
        
    
    
        
            
                Apples
                Tasty, delicious fruit!
            
            The apple is the pomaceous fruit of the apple tree.
            
            
                Red Delicious
                These bright red apples are the most common found in many supermarkets.
            
            
                Granny Smith
                These juicy, green apples make a great filling for apple pies.

任何具有导航性质的链接组都可以用



    
        
        
    
    
        
            
                Navigation
                
                    Index of all articles
                    Things sheeple need to wake up for today
                    Sheeple we have managed to wake
                
            
        
        
            
                Demos in Exampland
                Written by A. N. Other.
            
            
                
                    Public demonstrations
                    Demolitions
                    ...more...
                
            
            
                
                    Public demonstrations
                    ...more...
                
                
                    Demolitions
                    ...more...
                  
                ...more...



    
        
        
    
    
        ...
        He later joined a large company, continuing on the same work.
        I love my job. People ask me what I do for fun ...
        
        
        
          People ask me what I do for fun when I'm not at work. But I'm paid to do my hobby, so I never know what to answer. 
        

        Of course his work — or should that be hobby? — isn't his only passion. He also enjoys other pleasures.
        ...

to

~

元素表示某一部分的标题。

元素表示文档的头部，或

的头部，或

示例代码可参考上面几部分。

与

相对，用法亦相同。

代表联系信息，不仅仅是”地址“。



    
        
        
    
    
        
            
                For more details, contact
                John Smith.
            
            © copyright 2038 Example Corp.

Grouping content

元素代表一个段落。

元素代表一条水平分隔线。

 元素用于定义预格式化的文本，被包围在  元素中的文本通常会保留空格和换行符，常用来表示程序的源代码。



    
        
        
    
    
                    hello world
            echo "hello world";
            print("hello world")

元素用于定义引用块。



    
        
        
    
    
        
        
            Hello World

元素表示有序列表。

元素表示无序列表。

元素表示有序列表

的一项。

元素、: 元素表示自定义列表。



    
        
        
    
    
        
            PHP
            这是一个神奇的语言 ... ...
            Java
            以服务器语言来说，与PHP ... ...

元素表示独立的流内容（图像、图表、照片、代码等等），

元素给

元素添加标题。



    
        
        
    
    
        
            Ubuntu诞生那一年

这是一个神奇的块标签，无任何语义。尽量使用 HTML5 新语义标签代替部分

元素。

元素代表文档的主要内容。

元素中的内容对于文档来说应当是唯一的。它不应包含在文档中重复出现的内容，比如侧栏、导航栏、版权信息、站点标志或搜索表单。

在一个文档中，不能出现一个以上的

元素。

元素不能是以下元素的后代：

、



    
        
        
    
    
        
            编程语言
            Java、C#、Python、PHP、JavaScript

            
                Java
                Hello Sun
            

            
                C#
                Hello Microsoft
            

            
                PHP
                Hello Zend
            
            ...

Text-level semantics

元素用于定义超链接。

HTML5全部元素详解：一个都不能少

The root element

Document metadata

</h2> </div> <div> <title> 元素代表文档的名字或标题。 </div> <div> <pre><code class="language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name> <title>这是文档的标题

Sections

浏览器窗口中显示的所有内容都在这里

The Very First Rule of Life

Comments

Apples

Red Delicious

Granny Smith

Demos in Exampland

Public demonstrations

Demolitions

to

~

元素表示某一部分的标题。

H1

H2

H3

H4

H5

H6

Grouping content

hello world

编程语言

Java

C#

PHP

Text-level semantics

The data element

和

Edits

Embedded content

HTML5全部元素详解：一个都不能少

The root element

Document metadata

</h2> </div> <div> <title> 元素代表文档的名字或标题。 </div> <div> <pre><code class="language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name> <title>这是文档的标题

</h2> </div> <div> <link> 是引入外部样式文件，而 <style> 元素则是在文档中写样式。 </div> <div> <pre><code class="language-html"><!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title></title> <style> #div { width: 100px; height: 100px; }

Sections

浏览器窗口中显示的所有内容都在这里

Comments

Red Delicious

Granny Smith

Public demonstrations

Demolitions

to

~

元素表示某一部分的标题。

H1

H2

H3

H4

H5

H6

Grouping content

hello world

编程语言

Java

C#

PHP

Text-level semantics

The data element

和

Edits

Embedded content