HTML页面的布局与交互-优快云博客

本文链接：https://blog.youkuaiyun.com/Wjunnn/article/details/143018004

HTML5页面的布局与交互

结构元素
页面交互元素

今天的笔记部分是页面的布局与交互。

结构元素

HTML5 可以使用结构元素构建网页布局，使Web设计和开发变得更加容易，并且对数据挖掘服务更加友好。HTML5 提供了各种切割和划分页面的手段，允许用户创建的切割组件能有逻辑地组织站点页面布局，划分信息更加有逻辑，并给信息加上标签，使其变得容易使用和理解。
在HTML5 中，为了使文档的结构更加清晰明确，使用了文档结构元素构建网页布局。
而HTML5中主要的文档结构元素有以下几种。
HTML5结构元素构建网页布局
主要文档元素如下表：

元素	描述
header	用于设置页面的页眉
nav	用于构建导航
main	呈现`<body>`或应用的主体部分，在一个文档中不能出现一个以上的`<main>`标签。目前IE浏览器不支持`<main>`，其经常被`<div>`代替。
article	表示文档、页面、应用程序或网站中一体化内容
aside	表示与网页内容相关、有别于主要内容的部分
section	用于对网站或应用程序中页面中内容进行分块
footer	用于设置页面的页脚

代码应用如下：

    <header>头部</header>
    <nav>导航</nav>
    <main>
        主体
        <article>文章</article>
        <section>分块内容1</section>
        <section>分块内容2</section>
        <section>分块内容3</section>
        <aside>侧边栏</aside>
    </main>
    <footer>页脚</footer>

页面交互元素

对于网站应用来说，在用户体验方面表现最为突出的就是客户端与服务器端的交互。

`<details>`和`<summary>`

<details> 元素用于描述文档或文档某个部分的细节。<summary> 元素经常与 <details>元素配合使用，作为<details>元素的第一个子元素，用于为<details> 定义标题。标题是可见的，当用户单击标题时，会显示或隐藏 <details>中的其他内容。
举个例子
代码如下：

<body>
    <details>
        <summary>今天吃了什么</summary>
            <ul>
                <li>奶茶</li>
                <li>炸鸡</li>
                <li>酸菜鱼</li>
            </ul>
        
    </details>
</body>

`<progress>`

<progress> 元素用于表示一个任务的完成进度。这个进度的全程可以是不确定的，只是表示进度正在进行，但是不清楚还有多少工作量没有完成。
<progress> 元素的常用属性值有两个，具体如下。

<value>：已经完成的工作量。
<max>：总共有多少工作量。

其中， <value>和<max> 属性的值必须大于0，且<value>的值要小于或等于 <max> 属性的值。

`<meter>`

<meter>元素用于表示指定范围内的数值。例如，显示硬盘容量或者某个候选人的投票人數占投票总人数的比例等，都可以使用 <meter>元素完成.
<meter>元素的常用属性如下表：

属性	描述
high	规定度量的上限值。如果该属性值小于`<low>`属性的值，那么把`<low>`属性的值视为`<high>`属性的值；同样如果该属性的值大于`<max>`属性的值，那么把`<max>`属性视为`<high>` 的值
low	规定度量的下限值，必须小于或者等于`<high>`的值
max	定义最大值。如果定义时该属性小于`<min>`,那么把`<min>` 属性的值视为最大值。默认值是1
min	定义最小值，默认值为0
optimum	定义什么样的度量是最佳的值。如果该值高于`<high>`属性，则意味着值越高越好。如果该值低于`<low>`属性的值，则意味着值越低越好。该属性值必须在`<min>`与`<max>`之间
value	定义度量的当前值，该属性为必须项

举个例子
代码如下：

<body>
    <h2>学习进度条</h2>
    <p>
        HTML5：<meter value="50" min="0" max="100" low="60" high="80" title="50%" optimum="100">50</meter><br>
        CSS3:：<meter value="80" min="0" max="100" low="60" high="80" title="80%" optimum="100">80</meter><br>
        JavaScript:：<meter value="65" min="0" max="100" low="60" high="80" title="65%" optimum="100">65</meter><br>
    </p>
</body>

说明：
要想改变 <meter> 中的颜色，需要用到6个值：<min>、<max>、<low>、<high>、<value> 和<optimum>。其中前4个值会把整个进度划分成3个区间，如图下图所示。最佳值 <optimum>和 <value>的不同决定了显示的颜色的不同。
说明1

当 <value> 和<optimum> 值在一个区间时， <meter>呈现绿色，如图所示；
当<value>和 <optimum>值错开一个区间时， <meter> 呈现黄色，如图所示；
当<value>和<optimum> 值错开两个区间时， <meter> 呈现红色，如图所示。

总体思路是，<min>、<max>决定了 <meter> 的边界，<low> 和<high>决定了报警区的界限。
没选用 <optimum> 时，<value> 低于<low> 或高于 <high>都会报警黄色；选用<optimum>时，<optimum>在<low> 或<high>的某一侧，代表鼓励越低越好或越高越好；<value>超出另一侧的报警区，就会报警为红色。