html5页面的基本组成元素,HTML5中的基本元素

一、了解什么是分组元素

用于对页面中的元素进行分组

二、掌握figure、figcaption、hggroup三种分组元素的用法及用途

1、figure元素用于定义独立的流内容，如图像、图表、照片、代码等，一般指一个单独的单元。

figure元素的内容应该与主内容相关，但如果被删除，也不会对文档流产生影响。

2、figcaption元素用于为figure元素组添加标题，一个figure元素内最多允许使用一个figcaption元素，该元素应该放在figure元素的第一个或者最后一个子元素的位置。

3、hgroup元素用于将多个标题(主标题和副标题或者子标题)组成一个标题组，通常它与h1～h6元素组合使用。通常，将hgroup元素放在header元素中。

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

i、如果只有一个标题元素不建议使用hgroup元素。

ii、当出现一个或者一个以上的标题与元素时，推荐使用hgroup元素作为标题元素。

iii、当一个标题包含副标题、section或者article元素时，建议将hgroup元素和标题相关元素存放到header元素容器中。

三、了解什么是页面交互元素

可以进行用户的页面交互功能

四、掌握details元素、progress元素、meter元素的用法及作用

1、details元素用于描述文档或文档某个部分的细节。

summary元素经常与details元素配合使用，作为details元素的第一个子元素，用于为details定义标题。

2、progress元素用于定义一个正在完成的进度条，这个进度可以是不确定的，只是表示进度正在进行，但是不清楚还有多少工作量没有完成。

progress元素常用属胜值有两个：

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

ii.max：总共有多少工作量。

iii.value和max属性的值必须大于0，且value的值要小于或等于max属性的值。

3、meter元素用于表示指定范围内的数值。显示硬盘容量对某个候选者的投票人数占总人数的比例，都可以使meter元素。

time元素

用于定义时间或日期，可以代表24小时中的某一时间。time元素不会在浏览器中呈现任何特殊效果，但是该元素以机器可读的方式对日期和时间进行编码。

time元素常用属性值有两个：

1、datetime：用于定义相应的时间或日期。

2、pubdate：用于定义time元素中的日期/时间是文档(或article元素)的发布日期。

mark元素

mark元素的主要功能是在文本中高亮显示某些字符，以引起用户注意。该元素的用法与em和strong有相似之处，但是使用mark元素在突出显示样式时更随意灵活。

cite元素

可以创建一个引用标记，用于对文档参考文献的引用说明，一旦在文档中使用了该标记，被标记的文档内容将以斜体的样式展示在页面中，以区别于段落中的其他字符。

全局属性

是指在任何元素中都可以使用的属性。

draggable

hidden

spelltcheck

contenteditable

draggable属性

用来定义元素是否可以拖动。

true

false(默认)

当hidden属性取值为true时，元素将会被隐藏，反之则会显示。

spellcheck属性

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

值为true时检测输入框中的值，反之不检测。

contenteditable属性

规定是否可编辑元素的内容，前提是该元素必须可以获得鼠标焦点并且其内容不是只读的。

列表元素

1.ul无序列表

定义：网页中最常用的列表，个个列表项之间没有顺序级别之分。通常是并列的

语法格式：

`列表项1

<1i>列表项2`

2.ol有序列表：

定义：有序列表即为有排列顺序的列表。网页中常见的歌曲排行榜/游戏排行榜等都可以通过有序列表来定义

语法格式：

```css

1. 列表项1

<1i>列表项2

3.dl定义列表：

定义：用于对属于或名词进行解释和描述常用语图文混排

语法格式：

```css

插入图片

名词解释

名词1

名词1解释1

(一个dt可以对应多个dd)

结构元素

1.header元素

定义：是一种具有引导和导航作用的元素

语法格式：

网页主题

2.nav元素：

定义：用于定义导航链接，可以将具有导航性质的链接归纳在一个区：

语法格式：

适用于传统导航条，侧边栏导航条，页内导航，翻页操作

3.article元素：

定义：代表文档、页面应用程序中与上下文不相干的独立部分

语法格式：

第二章第二节

4.aside元素：

定义：用来定义当前页面或者文章的附属信息部分

用法：被包含在article元素内作为主要内容的附属信息

在article元素之外使用，作为页面或站点全局的附属信息部分。常用形式为侧边栏

语法格式：

第二章

文章主要内容

其他相关文章

5.section元素：

定义：用于对网站或应用程序中页面上的内容进行分块

6.footer元素：

定义：用于定义一个页面区域的底部

制作电影影评网的步骤

头部信息通过header元素定义，内部由img标记插入图片。

导航链接由nav元素定义，内部嵌套无序列表ul。

文章内容由article元素定义，内部由details元素进行划分，其中动作电影、科幻电影部分均为插入的图片，由details元素内部的summary元素定义，以实现单击这两个图片时，分别显示details元素内部的其他内容。

页面中的评分进度条效果由meter元素来实现。