一.列表元素

1.ul元素

无序列表是网页中最常用的列表，其各个列表项之间模有顺序级别之分，通常是并列的。定于无序列表的基本语法为：

<ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>

li标记嵌套在ul标记中，每对ul中至少包含一对li。

<!--more-->

2.ol元素

有序列表即为有序列表，其各个列表像按照一定顺序排序，定义有序列表的基本语法为：

<ol>
        <li></li>
        <li></li>
        <li></li> 
</ol>

li标记嵌套在ol标记中，每对ol中至少包含一对li。

在HTML中该元素还拥有start属性和reversed属性，其中start属性可以更改列表编号得起始值，reversed属性表示是否对列表进行反向排序，默认值为true。

<ol start="2" >

从上可以看出，列表编号的起始值更改为2.

3.dl元素

定于列表常用于对术语或名词进行解释和描述，与有序和无序列表不同，定义列表的列表项前莫有任何项目符号。其基本语法为：

 <dl>
        <dt>
            <dd></dd>
            <dd></dd>
        </dt>
    </dl>

dl标记用于指定定义列表，dt和dd并列嵌套在dl标记中，其中，dt标记用于指定术语名词。dd标记用于对名词进行解释和描述。一对dt可以对应多个dd。

4.列表的嵌套使用

在使用列表时，列表项中也有可能包含若干个子列表项，要想在列表项中定义子列表项就需要对列表进行嵌套。

   <ul>
        <li>
            <ol>
                <li></li>
            </ol>
        </li>
    </ul>

二.结构元素

1.header元素

HTML5中的header元素是一种具有引导和导航作用的结构元素，该元素可以包含所有通常放在页面头部的内容。header元素通常放置整个页面的标题等。

 <header>
        <h1>...</h1>
    </header>

注意：

header元素并非head元素。在HTML页面中，并不限制header元素的个数，一个页面中可以有多个header元素。

2.nav元素

nav元素用于定义导航链接，该元素可以将具有导航性质的链接归纳在一个区域，是页面元素的寓意更加明确。其中的导航元素乐意链接到站点的其他页面，或者页面的其他部分。

    <nav>
        <ul>
            <li><a href=""></a></li>
        </ul>
    </nav>

在上面这段代码中，通过在nav元素内部嵌套无序列表ul来搭建导航结构。通常，一个HTML页面中可以包含多个nav元素，作为页面整体或不同部分的导航。具体来说，nav元素可以用于以下几种场合。

传统导航条：目前主流网站上都有不同层级的导航条，其作用是跳转到网站的其他主页面。

侧边栏导航：目前主流博客网站及电商网站都有侧边栏导航，目的是将当前文章或当前商品页面跳转到其他文章或其他商品页面。

页内导航：它的作用是在本页面几个主要的组成部分之间进行跳转。

翻页操作：翻页操作切换的是网页的内容部分，可以通过单击“上一页”或“下一页”切换，也可以通过单击实际的页数跳转到某一页。

除了以上几点以外，nav元素也可以用于其他重要的、基本的导航链接组中。

3.article元素

article元素代表文档，页面或者应用程序中与上下文不相关的独立部分，该元素通常被用于定义一篇文章等，article元素通常使用多个section元素进行划分页面，可以出现多次。

    <article>
        <section>
            ..
        </section>
    </article>

4.aside元素

aside元素用来定义当前页面或者文章的附属信息部分，它可以包含与当前页面或主要内容相关的部分等。

aside元素的用法主要分为两种：

1.被包含在article元素内作为主要内容的附属信息。

2.在article元素之外使用，作为页面或站点全局的附属信息部分。最常用的使用方式是侧边栏，其中的友情内容可以是友情链接等。

     <article>
        <section>
            ..
        </section>
    </article>

5.section元素

section元素用于对网站或应用程序中页面上的内容进行分块，一个section元素通常由内容跟标题组成。在使用section元素时，需要主要：

1.section 元素用于对网站或应用程序中页面容器，那是div的特性。section元素并非一个普通的容器元素，当一个容器需要被直接定义样式或通过脚本定义行为时，推荐用div。

2.如果article元素、aside元素或nav元素更符合使用条件，那么不要使用section元素。

3.没有标题的内容区块不要使用 section 元素定义。

    <article>
        <header>
            <h2></h2>
        </header>
    </article>

6.footer元素

footer元素用于定义一个页面或者区域的底部，它可以包含所有通常放在页面底部的内容。与header元素相同，一个页面可以包含多个footer元素。同时也可以在article元素和section元素中添加footer元素。

<article>
    <footer>
        <h1></h1>
    </footer>  
 </article>

三.分组元素

1.figure元素和figcaption元素

figure元素用于定义独立的流内容，一般指一个单独的单元。figure元素的内容应该与主内容相关，但如果被删除也不受影响。fig caption元素用于为figure元素组添加标题，一个figure元素内最多允许一个fig caption元素，该元素放在figure元素的第一个或最后一个元素的位置。

<figure>
        <figcaption>
            <p>..</p>
        </figcaption>
    </figure>

2.hgroup元素

hgroup元素用于定义将多个标题组成一个标题组。通常它与h1~h6元素组合使用。通常，将hgroup元素放在header元素中。

在使用hgroup元素是要注意以下几点：

1.如果只有一个标题元素时不建议使用hgroup元素。

2.当出现一个或者一个以上标题与元素时，建议使用hgroup元素作为标题元素。

<header>
        <hgroup>
            <h1></h1>
        </hgroup>
    </header>

四.页面交互元素

1.details元素和summary元素

details元素用于描述文档或文档某个部分的描述。summary元素经常与details元素配合使用，作为details元素的第一个子元素，用于为details定义标题。

<details>
        <summary>
            <ul>
                <li></li>
                <li></li>
            </ul>
        </summary>
    </details>

2.progress元素

progress元素用于表示一个任务的完成进度。这个进度可以是不确定的，只是表示进度正在进行，但是不清楚还有多少莫有完成。

progress元素的常用属性值有两个

1.value：已经完成的工作量。

2.max5： 总共有多少工作量。

3.meter元素

meter元素用于表示指定范围内的数值。meter元素有多个属性值：

属性	说明
high	定义度量的值位于哪个点被界定为高的值
low	定义度量的值位于哪个点被界定为低的值
max	定义最大值，默认为1
min	定义最小值，默认为0
optimum	定义什么样的度量值是最佳度量值，如果该值高于high属性，则意味着值越高越好。如果该值低于low属性的值，则意味着越低越好
value	定义度量得值

五.文本层次语义元素

1.time元素

time元素用于定义时间或日期，time元素有两个属性：

1.datetime :用于定义相应的时间或日期。

2.pubdate：用于定义time元素的日期、时间是发布日期。

2.mark元素

mark元素的主要功能是在文本中高亮显示某些字符，易引起用户关注，该元素的用法和em和strong有相似之处，但mark更加灵活。

3.cite元素

cite元素可以创建一个引用标记，用于对文档参考文献的引用说明，一旦使用会以斜体展示出来。

六.全局属性

1.draggable属性

drag gable属性用来定义元素是否可以拖动，该属性有两个值：true和false，默认为false，当值为true时表示元素可以拖动。

2.hidden属性

该元素有两个属性值：true和false。当hidden属性取值为true时，元素会被隐藏，反之会显示。

3.spellcheck属性

spellcheck属性主要针对于input元素和textarea文本输入框，对用户输入的文本内容进行拼写和语法检测。

他有两个属性值：true和false，当值为true是会检测输入框中的值，反之不检测。

4.contenteditable属性

contenteditable属性规定是否可编辑元素的内容，但是前提是该元素必须可以获取鼠标焦点并且其内容不是只读的。给属性也有两个值：true表示可以编辑，false表示不可编辑。