一、结构元素
<header>、
<footer>、
<nav>、
<section>、
<article>、<main>、<aside>语义化标签：这些HTML5新增语义化标签可以用来定义页面的不同部分，使布局更有结构和可读性
元素****描述header定义页面或节的页眉部分，通常包含网站的标题、导航栏和标志等nav定义导航栏，包含页面的主要导航链接section定义文档中的独立部分，对内容进行分块，如文章、评论等article定义一个独立的、完整的文章或内容块aside定义页面的侧边栏内容，通常用于放置与主内容相关但不是主要内容的信息main定义页面的主要内容区域，用于包含主要的页面内容footer定义页面或节的页脚部分，通常包含版权信息、联系方式和其他相关链接figure 和 figcaption
<figure>
定义媒体内容的容器，例如图片、图表等；
<figcaption>
定义媒体内容的标题
<header>头部</header>
<nav>导航</nav>
<main>
主体
<article>文章</article>
<section>分块内容1</section>
<section>分块内容2</section>
<section>分块内容3</section>
<aside>侧边栏</aside>
</main>
<footer>页脚</footer>
使用这些语义化标签可以使HTML代码更加清晰和有逻辑性，同时也有助于提升页面的可访问性和SEO优化。除了以上列举的标签，HTML5还有其他一些标签可以用来语义化地组织页面结构和内容，开发者可以根据具体需求选择适合的标签来使用
练习
设计如下一个页面
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<header><h1 align="center">广东云浮中医药职业学院</h1><p align="center">欢迎来到：<ins>计算机学院</ins></p></header>
<hr>
<nav>
<ul>
<a href="#"><li>首页</li></a>
<a href="#"><li>关于我们</li></a>
<a href="#"><li>学生风采</li></a>
<a href="#"><li>联系方式</li></a>
</ul>
</nav>
<hr>
<main>
<article><h3>最新文章</h3></article>
<section><h4>文章标题</h4></section>
<section>这里是文章的内容简介。<br>可以使用<br>标签进行换行。</section>
<section>
<img src="./云中医校徽.jpg" alt="" width="200" height="200">
</section>
<section>想了解广东云浮中医药职业学院：<a href="./9文本.html">点击这里</a></section>
<aside>
<h4>侧边栏</h4>侧边栏内容，如快速连接、广告等。<br>
<table border="1">
<tr>
<th>专业</th>
<th>链接</th>
</tr>
<tr>
<td>计算机应用技术</td>
<td>
<a href="./9文本.html">专业A详情</a>
</td>
</tr>
<tr>
<td>数字媒体技术</td>
<td>
<a href="./9文本.html">专业B详情</a>
</td>
</tr>
</table>
<br>
<b>联系我们</b><br>
<form action="">
姓名： <input type="text"><br>
邮箱： <input type="text"><br>
<input type="submit">
</form>
</aside>
</main>
<hr>
<footer>版权所有©2024广东云浮中医药职业学院计算机学院</footer>
</body>
</html>
其中 “ 点击这里 ”、“ 专业A详情 ” 和 “ 专业B详情 ”需要创建另一个页面，运用超链接跳转到其中
二、页面交互元素
1. details 和 summary 元素
<details>
和
<summary>
是HTML5中添加的用于创建可折叠内容的元素。
<details>
元素用于包裹可折叠内容，它是一个容器元素。当页面加载时，
<details>
中的内容默认是折叠起来的，只显示一个
<summary>
元素作为摘要或标题。
<summary>
元素用于定义
<details>
元素的摘要或标题。点击
<summary>
元素时，它可以展开或折叠
<details>
中的内容。通常，
<summary>
元素会显示一个可点击的箭头或加号图标，以指示当前折叠状态
示例代码：
<details>
<summary>点击展开</summary>
<p>这里是折叠内容</p>
</details>
折叠效果：
展开效果：
在浏览器中渲染时，默认情况下会显示一个可点击的箭头图标和摘要文本"点击展开"。当用户点击
<summary>
元素时，
<details>
中的内容将展开或折叠
2. progress 元素
<progress>元素是HTML5中用于表示进度条的元素
<progress>
元素通常用于展示任务的完成进度或文件上传进度等。它具有以下特征：
<progress>元素必须有一个value属性，表示当前的进度值<progress>元素还可以有一个max属性，表示进度的最大值。如果未设置max属性，默认为1- value和max属性的值必须大于0，且value的值要小于或等于max 属性的值
示例代码：
<h3>进度</h3>
<progress value="50" max="100"></progress>
运行结果：
3. meter 元素
<meter>元素是HTML5中用于表示度量或测量标量值的元素
例如，显示硬盘容量或者某个候选人的投票人数占投票总人数的比例等，都可以使用 meter 元素完成。
<meter>
元素具有以下属性：
属性****描述high表示高阈值的属性。它必须是一个非负的浮点数值，并且大于等于
low
属性的值。该属性用于标识值的高阈值。例如，
high="80"
表示高阈值为80
low
表示低阈值的属性。它必须是一个非负的浮点数值，并且小于等于
max
属性的值。该属性用于标识值的低阈值。例如，
low="30"
表示低阈值为30max表示最大值的属性。它必须是一个非负的、有意义的浮点数值。如果未指定
max
属性，默认为1。例如，
max="100"
表示最大值为100min表示最小值的属性。它必须是一个非负的、有意义的浮点数值。如果未指定
min
属性，默认为0。例如，
min="0"
表示最小值为0optimum表示最佳值的属性。它必须是一个非负的浮点数值，并且大于
low
属性的值，小于等于
high
属性的值。该属性可以用来标识值的最佳范围。例如，
optimum="60"
表示最佳值为60value表示当前值的属性。它必须是一个非负的、有意义的浮点数值。例如，
value="75"
表示当前值为75
示例代码：
<h3>HTML认证课程进度列表</h3>
<p>
《HTML5》课程：
<meter value="50" min="0" max="100" low="60" high="80" title="50%" optimum="100">50</meter><br>
《CSS》课程：
<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>
运行结果：
说明:要想改变 meter中的颜色,需要用到 6个值: min、 max、 low、 high、 value 和 optimum。其中前4个值会把整个进度划分成3个区间。最佳值 optimum和 value的不同决定了显示的颜色的不同。当 value 和 optimum 值在一个区间时, meter呈现绿色;当 value 和 optimum 值错开一个区间时, meter 呈现黄色;当 value 和 optimum值错开两个区间时, meter呈现红色。总体思路是, min、 max决定了 meter的边界, low 和 high决定了报警区的界限。没选用 optimum时, value 低于 low 或高于 high都会报警为黄色; 选用 optimum 时, optimum在 low 或 high的某一侧，代表鼓励越低越好或越高越好； value 超出另一侧的报警区，就会报警为红色。
版权归原作者 努力小贼 所有， 如有侵权，请联系我们删除。