html5多少个元素,html5中hgroup及多个元素的分析

hgroup

综合下来，可以概括为以下那么几句话：hgroup 元素的作用是将标题和子标题进行分组的元素，会把h1-h6中的元素进行分组，比如在一个内容区块的标题和他的子标题算在同一组。例子如下：

footer和address

关于footer和address元素，它们和header元素的用法相似，并没有限制数量，通常加上注释，创作时间，作品信息等等，两个元素可以连用，address可以加在footer元素的里面，作为它的子元素。(div用于将部分内容格式化 可以配合footer元素的用法 div id=“footer” ，a href=“/” (此处加标题) /a，br用于换行，p中间是一个段落)

figure元素与figcaption元素

figure元素是一种元素的组合，带有可选标题，用来表示页面上一块独立的内容，把figure元素去掉不会对网页造成任何影响。figcaption元素用来表示figure元素的标题，一个figure元素里面最多只可以放置一个figcaption元素。

details元素与summary元素

detals元素是一种用于标识该元素内部的子元素可以被展开、收缩显示的元素 details元素具有一个布尔类型的open属性，当该值为true时该元素内部的子元素应该被展开显示，当该属性值为 false时，其内部的子元素应该被收缩起来不现实。该属性的默认值为false，当页面打开时其内部的子元素应该处于收缩状态

summary元素从属于details元素，用鼠标点击 summary元素中的内容文字时， details元素中的其他所有从元素将会展开或者收缩如果

detailssummary元素内没有元素，览器那你会提供认的文字以供点击，例如直接在类似扩展键倒三角形后直接显示“详细信息(details的中文翻译)“。但是目前只有谷歌的 Chrome览器支持，如果用其他浏览器执行，则计算机不会判断它是true or false 而是会直接现实details中的内容。

mark元素

mark元素表示页面中要突出显示或高亮显示的，对前户具有提示作用的一段文字。通常在引用原文时使用mark元素，目的是引起读者的关注，mark元素是对原文内容有补充作用的一个元素，他应该用在一段文作者不认为重要的，但是现在为了与原文作者不相关的其他目的，主要突出显示或者高量显示的文字上面。mark元素主要的目的就引发当前用户的关注度。mark元素了真亮显示外，还有一个作用就是在引用原文时，把作者没有表示出来的内容重点表示出来。(可以借鉴网页引擎搜索出来的内容，如下：

那么网页中的海贼王在网页制作的标题中并没有被作者标注或者高亮显示出来，这里面就是海贼王三个字被标红了，用的就是mark

语法，但是浏览器为了让读者更直观的找到搜索者所想找到的内容，便使关键字加上高亮显示。)

用法如图所示，在网页链接a href后面直接在mark 和 /mark中加入需要高亮显示的文字即可。

progress元素

progress元素代表一个任务的完成进度，这个进度可以是不确定的，表示进度正在进行，但不清楚还有多少工作里没有完成也可以用到某个最大数字(比加100)之间的s数字来表示准确的进度情况(比如百分比

该元素具有两个表示当前任务完成的属性， value属性表乐已经完成了多少工作里，max属性表示总共有多少工作里。工作里的单位是随意的，不指定的在设定属性点时候， value属性和max属性只能指定为有效的点，value属佳必须大于0，且小于或等于max的属性，max的属性必大于0 (progress只是一个框架，内容表示还是得用到 value和max元素)。

显示效果如图所示。

meter元素(含有一下那么六个属性)

1、 value属性:在元素中特地地表示出的实际值，该属性值默认值为0。

2、min属性:指定规定范围时许实用的最小值，默认为0，在设定该属性时所设定的值不能小于0。

3 max属性：指定规定范围时许实用的最大值，如果该属性值小于min的值，那么把min属性的值视为最大值max属性的默认值为1。

4、low属性:规定范围的下限值，必须小于或者等于high的值。

5、high属性:宝范围的上值如果点属性值小于ow属佳的值，那么把low属性的值视为high属性的值，同样如果属佳的值大于max属性的值，那么把max属性的值视hgh的值。(其中low和high属性的作用可以参考 电脑中c盘或者某盘的内存超过一定容量 便会显示红色)

6、 optimum属性:最佳值属性值必须在min属性值与max属性值之间，可以大于high属性值 。

效果图可以参考前面progress元素的效果图，非常的类似。(这个meter元素有一些浏览器不支持)

以上几点便是今天我想和大家分享的学习心得，小白上路，如有不足，请多包涵。