人民邮电出版社《HTML5与CSS3实战指南》学习笔记

HTML5 是最新的 HTML 标准。

HTML5页面结构标签

1. header元素
   header元素是一种具有引导和导航作用的结构元素，通常用来放置整个页面或页面内的一个内容区块的标题，但也可以包含其他的内容，比如在header里面放置logo图片、搜索表单等等。
   注意：一个页面内并没有限制header的出现次数，也就是说我们可以在同一页面内，不同的内容区块上分别加上一个header元素。

2. nav元素
   nav元素表示页面中的导航链接部分。

3. article元素
   article元素代表文档、页面或者应用程序中独立的、完整的、可以独自被外部引用的内容。

4. section元素
   section元素标签用来表现普通的文档内容或应用区块。一个section通常由内容及其标题组成，但section元素标签并非一个普通的容器元素；当一个容器需要被直接定义样式或通过脚本定义行为时，推荐使用div元素而非section。

5. aside元素
   aside元素可用于包含与其他内容不相关的部分。例如侧边栏、二级链表或广告区。

6. footer元素
   footer元素表示页面或者页面中的一块区域的页脚。

HTML5新元素

1. hgroup

hgroup标签用于对标题进行组合，譬如将一个内容区块的标题及其副标题分为一组。
通常，将hgroup元素放在header元素中。

<header>
    <hgroup>
        <h1>主标题</h1>
        <h2>副标题</h2>
    </hgroup>
</header>

1. < hgroup >标签只是对标题进行组合，而对标题的样式没有影响。

2. 在页面头部、文章头部、章节或者分段分块的头部，至少有两个主题标签，才可以使用< hgroup >标签；如果只有一个主题标签，则不需要使用。

2. figure和figcaption元素

< figure >标签规定独立的流内容（图像、图表、照片、代码等等）。
figure标签用来表示网页上一块独立的内容，可用于文章中的插图、照片、代码清单等。
figure元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。

figure有一个子标签：figcaption
< figcation > 标签定义 figure 元素的标题（caption）。
“figcaption” 元素应该被置于 “figure” 元素的第一个或最后一个子元素的位置。

注意：

1. 如果可以将它从文档中删除，并且理解文档内容不受影响，则不必使用figure元素，可以使用其他元素代替。
2. 如果图像或清单形成了文档流，并且移动到文本需要的地方需要重新措辞，那么最好选择其他元素代替。

<article>
    <p>As you can see in <a href="#fig1">Figure 1</a> </p>

    <figure id="fig1">
        <figcaption>Screen Reader support</figcaption>
        <img src="27858.jpg" alt="">
    </figure>
</article>

3. mark

mark元素的主要功能是在文本中高亮显示某些字符，以引起用户注意。
mark 元素“表示文档中的一部分由于可能与用户当前活动有关，已被突出显示”。
不常用。最常见的是在搜索文章时，搜索关键词在搜索结果中突出显示。

<h1>yes, you can use <mark>HTML5</mark> today</h1>

效果：

4. progress和meter

1. progress元素
   progress元素代表一个任务的完成进度。
   这个元素有两个属性来表示当前任务的完成情况，value属性表示已经完成了多少工作量，max属性表示总共有多少

   <p>
       Status:
       <progress min='0' max="100" value="0" >
           <span>0</span>%
       </progress>
       Status:
       <progress min='0' max="50" value="25" >
           <span>50</span>%
       </progress>
   </p>
   

   

2. meter元素
   meter元素标签用来表示范围已知且可度量的等级标量或分数值，如磁盘使用量比例、投票人数比例等。

   它有六个属性：

   • value 属性值显示的是当前值，默认为0
   • min：当前标量的最小值；如不做指定则为0
   • max：当前标量的最大值；如不做指定则为1
   • low：当前标量的低值区
   • high：当前标量的高值区
   • optimum：最佳值；其范围在最小值与最大值区间当中，并且可以处于高值区

   <h1>以磁盘使用为例，展示 meter 元素的用法</h1>
   <p>
       Total current disk usage:(value低于low