HTML5中引入了很多新的标记元素和属性，本文介绍其结构元素、分组元素、页面交互元素和文本层次语义元素。并设计案例及编程。
爱校码
致力于少儿编程与软件工程的信息分享
一、列表标记元素
为了使网页更易读，经常将网页信息以列表额形式呈现。HTML提供了3种常用的列表标记元素，分别为ul标记元素（无序列表）、ol标记元素（有序列表）和dl标记元素（定义列表）。
1.1 无序列表标记元素<ul>
无序列表是网页中最常用的列表，之所以称为“无序列表”，是因为其各个列表项之间没有顺序级别之分，通常是并列的。定义无序列表的基本语法格式如下：
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
......
</ul>
清单1：
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>无序列表</title>
</head>
<body>
<ul>
<li>东</li>
<li>西</li>
<li>南</li>
<li>北</li>
<li>中</li>
</ul>
</body>
</html>
HTML5不再支持<ul> type 属性，可用css样式代替：
<ul style="list-style-type:disc|circle|square|none">
针对 list-style-type样式属性，其属性值如下：
值 描述
disc 默认值，实心圆。
cirle 空心圆。
square 实心方块。
none 去除列表前的点。
1.2 有序列表标记元素<ol>
有序列表即为有排列顺序的列表，其各个列表项按照一定的顺序排列，定义有序列表的基本语法格式如下：
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
......
</ol>
清单2：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>有序列表</title>
</head>
<body>
<ol>
<li>c语言</li>
<li>java语言</li>
<li>javascript脚本语言</li>
<li>python语言</li>
</ol>
</body>
</html>
1.3 术语描述标记元素<dl>
定义列表常用于对术语或名词进行解释和描述，与无序和有序列表不同，定义列表的列表项前没有任何项目符号。其基本语法如下：
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
......
<dt>名词2</dt>
<dd>名词2解释1</dd>
<dd>名词2解释2</dd>
......
</dl>
清单3：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>术语描述</title>
</head>
<body>
<dl>
<!--定义术语名词 -->
<dt>人工智能</dt>
<!--解释和描述名词 -->
<dd>英文全拼为<strong>Artificial Intelligence</strong>,英文缩写为<b>AI</b>。它是<ins>研究</ins>、<ins>开发</ins>用于<ins>模拟</ins>、<ins>延伸</ins>和扩展人的<ins>智能</ins>的理论、方法、技术及应用系统的一门新的技术科学。</dd>
<br/>
<dd>人工智能是<em>计算机科学</em>的一个分支，它企图了解智能的实质，并生产出一种新的能以<em>人类智能</em>相似的方式做出反应的智能机器，该领域的研究包括机器人、语言识别、图像识别、自然语言处理和<em>专家系统</em></dd>
</dl>
</body>
</html>
1.4 操作列表标记元素的一点代码
1.4.1 如何烘焙你自己的 DOM
文档对象模型的优点在于它为我们提供了一种一致的方式，跨越所有浏览器访问HTML的结构和内容来自代码。如果遵循创建DOM的方法，每个DOM在顶部，然后是一棵树，每个树都有分支和叶节点，即HTML标记中的元素标记。让我们取一些标记并为其创建一个DOM。这里有一个简单实施的方法：
1.首先在顶部创建文档节点对象document
document始终位于顶部。document是树的一个特殊部分，可以在JavaScript中使用它来访问整个DOM。document也类似于倒置树的根。
2.接下来，获取HTML页面的顶级标记元素，这里是<HTML>元素，将其称为当前标记元素，并将其添加为文档对象的子元素。
这是树枝。
3.对于嵌套在当前元素中的每个元素，将该元素添加为DOM中当前元素的子元素。
这些就像树枝。
4.对于添加的每个元素，重复操作，直到元素用完为止。
它们就像树的叶子（因为它们里面没有元素，只有文本）。
DOM包括页面内容和元素。（绘制DOM时，并不总是显示所有文本内容，但标记元素就在那里）。
1.4.2 HTML与JavaScript之间互动
HTML和JavaScript肯定来自不同的星球。证据呢？HTML的DNA由声明性标记组成，允许您描述组成页面的一组嵌套元素。另一方面，JavaScript是由纯算法遗传材料制成，用于描述计算。它们相距太远，甚至无法沟通吗？当然不是，因为它们有一些共同点：DOM。通过DOM，JavaScript可以与页面通信，反之亦然。
有一个方法可以实现这一点，允许JavaScript访问任何元素，它被称为getElementById。让我们看看它是如何工作的。
1. 让我们从DOM开始
这里是一个简单的DOM；它有几个HTML段落p，每个段落都有一个标识为绿色、红色或蓝色星球的id。每个段落也有一些文本。当然也有一个<head>元素，但为了使事情更简单，省略了细节。
2. 使用JavaScript让事情变得更有趣
我们想像将绿色星球的文本从“一切都很好”更改为“红色警报”。接下来，我们需要一个id为greenplanet的标记元素。这里有一些代码可以做到这一点：
请记住，文档(document)代表浏览器中的整个页面，并包含完整的DOM，因此我们可以要求它执行类似于查找具有特定id的元素的操作。
在这里，我们要求document通过查找与给定元素标记属性id匹配的值来获取标记元素对象。getElementById（“greenplanet”）返回与“greenplanet”对应的段落p元素。
然后，JavaScript代码可以用它做各种有趣的事情。
3. 一旦getElementById给了你一个元素，你就可以用它做点什么了
我们通常将元素分配给一个变量，以便在整个代码中引用元素，让我们这样做，然后更改文本：
var planet = document.getElementById("greenplanet"); // 将元素分配给名为planet的变量
// 对getElementById的调用，它查找“greenplanet”元素并返回它
// 在代码中，现在可以使用变量planet来表示元素。
planet.innerHTML = "红色警报：将被流星击中！"; // 可以使用变量planet引用表示的元素的innerHTML属性来更改元素的内容。
// 将id属性为greenplanet的元素的内容更改为新文本，导致DOM（和您的页面）更新为新文本。
// 对DOM的任何更改都会反映在浏览器对页面的呈现中，因此将看到段落更改以包含新内容！
清单4：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>行星</title>
<script>
// 创建一个名为init的函数并放置现有代码在函数中。
// 请注意，您的代码介于开始 { 和结束 } 之间。
function init() {
var planet = document.getElementById("greenplanet");
planet.innerHTML = "红色警报：将被流星击中！";
}
// 在这里，我们设置了窗口对象的onload属性的值，设置为函数名。
// 这表示当页面完全加载时，执行init函数中的代码。
window.onload = init;
</script>
</head>
<body>
<h1>绿色行星</h1>
<p id="greenplanet">一切都很好</p>
<h1>红色行星</h1>
<p id="redplanet">无需报告</p>
<h1>蓝色行星</h1>
<p id="blueplanet">所有系统正常</p>
</body>
</html>
1.4.3 操作列表标记<ul>元素的JavaScript代码
1. DOM结构
在HTML标记中放置一个空列表，确切地说是一个空的<ul>标记元素。将新项目添加到无序列表。为此，我们将创建一个新的<li>元素将保存歌曲名称。然后我们会获取新的<li>元素并将其添加到DOM中的<ul>。
2. 创建新元素
您已经了解了如何通过DOM访问现有元素。但您也可以使用DOM创建新元素。假设我们想创建一个<li>元素，我们是这样做的：
var li = document.createElement("li");
使用document.createElement以创建新元素，将要创建的元素类型作为字符串"li"传递给createElement，返回对新元素的引用。这里我们将新元素赋值给变量li。createElement创建一个全新的元素。注意，它还没有插入DOM中。现在它只是一个需要在DOM中放置的自由浮动元素。
现在我们有了一个新的<li>元素，其中没有任何内容。我们已经知道一种将文本放入元素的方法：
li.innerHTML = "阿拉伯风";
3. 向DOM添加元素
要向DOM添加新元素，您必须知道要将其放在哪里。好吧，我们确实知道该放在哪里：我们将把<li>元素放在<ul>元素中。因此，要添加<li>元素，我们需要使它成为<ul>元素的子元素。为此，首先需要在树中找到<ul>元素（它的属性id的值为“playlist”），然后要添加<li>，告诉<ul>元给自己添加一个新的子元素。
var ul = document.getElementById("playlist");
ul.appendChild(li);
使用getElementById获取对id=“playlist”的<ul>元素的引用。要求<ul>元素将添加<li>元素作为子元素添加。完成后，DOM将<li>作为<ul>的子级，浏览器更新显示以反映新的<li>。每次调用appendChild时，新的<li>元素都会添加到<ul>元素中，位于已经存在的任何其他<li>元素之后。
清单 5：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>添加新元素</title>
<script>
function handle(songName){
var li = document.createElement("li");
li.innerHTML = songName;
var ul = document.getElementById("playlist");
ul.appendChild(li);
}
function init() {
handle("阿拉伯风");
handle("小白船");
handle("南泥湾");
}
window.onload = init;
</script>
</head>
<body>
<ul id="playlist"></ul>
</body>
</html>
二、表格标记元素
要用HTML标记表示表格数据，有一个<table>标记元素来实现这个目标。
2.1. 创建表格的标记元素
四个标记元素用于创建单个表格：<table>、<tr>、<th>和<td>
- 1.
<table>: 当您想要一个表格时，从<table>标记开始整个表格创建过程，其为起始标记，对应的结束标记为</table>。 - 2.
<tr>: 每个<tr>元素指定一个表行。行中的所有表数据都嵌套在<tr>元素中。对应的结束标记为</tr>。 - 3.
<th>: 每个<th>元素在表的标题中包含一个单元格，它必须位于表行内。对应的结束标记为</th>。 - 4.
<td>: 每个<td>元素在表中包含一个数据单元格。它必须位于表行内。对应的结束标记为</td>。
更复杂的 HTML 表格也可能包含 caption, col, colgroup, thead, tfoot, tbody 等标记元素。参阅 HTML参考手册
2.2. 创建表格案例
清单 6：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>前五城市海拔高度</title>
</head>
<body>
<table border="1">
<caption>前五城市海拔高度</caption>
<tr>
<th>排序</th>
<th>城市</th>
<th>最高点</th>
<th>海拔高度/米</th>
</tr>
<tr>
<td>1</td>
<td>拉萨</td>
<td>念青唐古拉山</td>
<td>7162.6</td>
</tr>
<tr>
<td>2</td>
<td>乌鲁木齐</td>
<td>天山博格达峰顶</td>
<td>5445.0</td>
</tr>
<tr>
<td>3</td>
<td>成都</td>
<td>西岭镇大雪塘苗基岭</td>
<td>5364.0</td>
</tr>
<tr>
<td>4</td>
<td>西宁</td>
<td>日月山脉</td>
<td>4877.0</td>
</tr>
<tr>
<td>5</td>
<td>昆明</td>
<td>拱王山马鬃岭</td>
<td>4247.7</td>
</tr>
</table>
</body>
</html>
2.3. 操作表格的代码
清单 7：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>前五城市海拔高度</title>
<script>
function handleTh(tr, cols) {
for(var j = 0; j < 4; j++){
var th = document.createElement("th");
th.innerHTML = cols[j];
tr.appendChild(th);
}
return tr;
}
function handleTd(tr, cols) {
for(var j = 0; j < 4; j++){
var td = document.createElement("td");
td.innerHTML = cols[j];
tr.appendChild(td);
}
return tr;
}
function init() {
var tab = document.getElementById("tab");
var caption = document.createElement("caption");
caption.innerHTML = "前五城市海拔高度";
tab.appendChild(caption);
for(var i=0; i < 6; i++){
if(i == 0){
var tr = document.createElement("tr");
var columns = new Array("排序","城市","最高点","海拔高度/米");
tr = handleTh(tr,columns);
tab.appendChild(tr);
continue;
}else if(i == 1){
var tr = document.createElement("tr");
var columns = new Array("1","拉萨","念青唐古拉山","7162.6");
tr = handleTd(tr,columns);
tab.appendChild(tr);
continue;
}else if(i == 2){
var tr = document.createElement("tr");
var columns = new Array("2","乌鲁木齐","天山博格达峰顶","5445.0");
tr = handleTd(tr,columns);
tab.appendChild(tr);
continue;
}else if(i == 3){
var tr = document.createElement("tr");
var columns = new Array("3","成都","西岭镇大雪塘苗基岭","5364.0");
tr = handleTd(tr,columns);
tab.appendChild(tr);
continue;
}else if(i == 4){
var tr = document.createElement("tr");
var columns = new Array("4","西宁","日月山脉","4877.0");
tr = handleTd(tr,columns);
tab.appendChild(tr);
continue;
}else if(i == 5){
var tr = document.createElement("tr");
var columns = new Array("5","昆明","拱王山马鬃岭","4247.7");
tr = handleTd(tr,columns);
tab.appendChild(tr);
continue;
}
}
}
window.onload = init;
</script>
</head>
<body>
<table id="tab" border="1"></table>
</body>
</html>
三、块级标记元素
HTML中的标记元素，从其特点来划分，可以分为块级标记元素（block）、行内标记元素（inline）与行内块级标记元素（inline-block）三类。
3.1 块级元素
块级元素（block）占据其父元素（容器）的整个水平空间，垂直空间等于其内容高度，因此创建了一个“块”。遇到块级标记元素都会换行，意味着浏览器会在块级元素前后另起一个新行。块级标记元素通常是其他标记元素的容器。例如<div>就是一个典型的块级标记元素，它主要承担其它标记元素容器的角色。
清单 8：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>一个div例子</title>
<!-- 这里是为id属性为“footer”的标记定义的样式，后续将详细介绍CSS。-->
<style>
#footer {
font-size: 50%;
text-align: center;
line-height: normal;
margin-top: 30px;
}
</style>
</head>
<body>
<!-- 在版权信息周围放置<div>标记，并给它一个名为“footer”的id属性。 -->
<div id="footer">
<p>
© 2022, 爱校码 版权所有<br>
本网站上出现的所有信息均为注册商标所有。
</p>
</div>
</body>
</html>
其他的块级标记元素还有p、h1~h6、ul、ol、dt、dd以及后续将要介绍的HTML5的新增标记元素header、nav、article、section、footer等。参阅 HTML参考手册
3.2 行内元素
块元素始终显示为前后都有换行符，而行内元素（inline）(有时也称为内联元素)在页面中的文本流中显示为“行内”。始终记住：块元素可以独立存在，而内联元素与文本流一起使用。
块与内联的关系：块元素通常用作网页的主要构建块，而内联元素通常标记小部分内容。设计页面时，通常从较大的块（块元素）开始，然后在细化页面时添加内联元素。
有一个典型的行内标记元素，称为<span></span>，它提供了一种创建内联字符和元素分组的方法，即在同一个元素中逻辑分隔内联内容的方法。
清单 9：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>一个span例子</title>
<style>
.music {
font-style: italic;
}
.composer {
font-weight: bold;
}
</style>
</head>
<body>
<ul>
<!-- 只需添加一个开始标记<span>以及class属性和一个值“music”,接下来，在music标题后添加结束标记。</span> -->
<!-- 对作曲家也这样做。将其嵌套在<span>元素中，只不过这次将<span>放入“composer”类中。 -->
<li><span class="music">《1812序曲》</span>, <span class="composer">柴可夫斯基</span></li>
<li><span class="music">《幻想即兴曲》</span>, <span class="composer">萧邦</span></li>
<li><span class="music">《维也纳森林故事》</span>, <span class="composer">小约翰·施特劳斯</span></li>
<li><span class="music">《E调前奏曲》</span>, <span class="composer">巴哈/巴赫</span></li>
<li><span class="music">《幽默曲/滑稽曲》</span>, <span class="composer">德沃夏克</span></li>
</ul>
</body>
</html>
其它常见的行内元素有<a>、<em>、<strong>等。参阅 HTML参考手册
3.3 行内块元素
有时候既希望元素具有宽度高度特性，又具有同行特性，这个时候可以使用行内块元素（inline-block）。实际上它是一个混合产物，将元素显示为行内块状元素，会与其它的行内元素或行内块元素排列在同一行。
常见的行内块元素有<img/>和 <input/>。使其既有block的宽度高度特性，又有inline的同行特性，在同一行内有不同高度内容的元素时，通常要设置对齐方式。
清单 10：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>一个img的例子</title>
<style>
body {
background: #dedede;
padding: 5% 5%;
margin: 0;
}
div.pic {
font-size: 0;
}
div.pic img {
height: 235px;
display: block;
float: left;
}
.pic img {
height: 235px;
float: left;
display: block;
}
</style>
</head>
<body>
<div class="pic">
<img src="img/photo1.png">
<img src="img/photo2.png">
<img src="img/photo3.png">
</div>
</body>
</html>
3.4 <div>标记元素使用案例
清单 11：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>一个div的例子</title>
<style>
body {
background-color: #b5a789;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: small;
margin: 0px;
}
#header {
background-color: #675c47;
margin: 10px;
height: 108px;
background-image: url(img/hrobot.jpg);
background-repeat: repeat;
}
#main {
font-size: 105%;
padding: 15px;
margin: 0px 50px 10px 10px;
}
#sidebar {
font-size: 105%;
padding: 15px;
margin: 0px 50px 10px 10px;
width: 420px;
float: right;
}
#footer {
background-color: #675c47;
color: #efe5d0;
text-align: center;
padding: 15px;
margin: 10px;
font-size: 90%;
clear: right;
}
h1 {
font-size: 120%;
color: #954b4b;
}
</style>
</head>
<body>
<div id="header">
</div>
<div id="sidebar">
<img src="img/robot.jpg" width="400"/>
</div>
<div id="main">
<h1>全球最先进类人机器人亮相！</h1>
<p>
近日，阿联酋迪拜的未来博物馆迎来了一位新员工，虽然刚上岗，但它却几乎不需要培训就能熟练地开始工作——这就是类人机器人“阿美卡”。
</p>
<p>
“阿美卡”由英国“工程艺术”公司研发，它的最大特点就是能做出接近人类的面部表情，展现更丰富的肢体动作，与人类沟通起来更流畅。此次迪拜未来博物馆让“阿美卡”担任首届迪拜未来论坛接待员。
</p>
<p>
迪拜未来基金会副执行董事马吉德·阿尔曼苏里表示，“阿美卡”除了能极度还原人类的动作和表情外，还能利用人工智能程序针对各种情况做出不同反应。
</p>
<p>
阿尔曼苏里介绍称，“阿美卡”是世界上最先进的类人机器人，特别是它使用了人工智能技术，让它的动作、表情更加逼真，甚至能看到“阿美卡”会直视你，它的面部能像人类那样做出各种表情。
</p>
<p>
据介绍，大家现在看到的“阿美卡”并非它的最终形态，未来可能有更多先进技术应用在它身上。没准几个月不见，“阿美卡”就会让你产生“士别三日”的感觉。未来博物馆一直在与合作伙伴合作引进最新的技术，因此“阿美卡”肯定会进一步升级，还有几种新的技术将在未来几个月引进到博物馆。
</p>
</div>
<div id="footer">
<p>© 爱校码 版权所有</p>
</div>
</body>
</html>
四、结构标记元素
HTML5中的所有的元素都是有结构性的，且这些元素的作用与块元素非常相似。这里主要介绍<header>标记元素、<nav>标记元素、<article>标记元素、<section>标记元素、<footer>标记元素的用法。
4.1 <header>标记元素
HTML5中的header元素是一种具有引导和导航作用的结构元素，该元素可以包含所有通常放在页面头部的内容。位于页面顶部或页面部分顶部的内容。其基本语法格式如下：
<header>
<h1>网页主题</h1>
...
</header>
清单 12：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>header标记元素</title>
</head>
<body>
<header>
<h1>秋天来了</h1>
<h3>高天大地，你站在地平线上，正好清赏秋天。</h3>
</header>
</body>
</html>
4.2 <nav>标记元素
HTML5中的nav元素用于定义导航链接，包含用于页面中导航链接的内容。该元素可以将具有导航性质的链接归纳在一个区域中，使页面元素的语义更加明确。其语法如下：
<nav>
<ul>
<li><a href="#">导航链接1</li>
<li><a href="#">导航链接2</li>
<li><a href="#">导航链接3</li>
<li><a href="#">导航链接4</li>
</ul>
</nav>
4.3 <article>标记元素与<section>标记元素
HTML5中的article元素表示页面中的自包含组成的独立部分，如博客文章、用户论坛文章或报纸文章等。而HTML5中的section元素用于对页面上的内容进行分块，对内容的主题分组，通常带有页眉和页脚。一个section元素通常由内容和标题组成。在使用section元素时，需要注意事项如下：
- 不要将section元素用作设置样式的页面容器，那是div的特性。section元素并非一个普通的容器元素，当一个容器需要被直接定义样式或通过脚本定义行为时，推荐使用div。
- 如果article元素更符合使用条件，那么不要使用section元素。
- 没有标题的内容区块不要使用section元素定义。
article元素通常使用多个section元素进行划分。
清单 13：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>article元素与section元素使用</title>
</head>
<body>
<article>
<header>
<h1>第一章</h1>
<hr>
</header>
<section>
<div id="section1">
<header>
<h2>第一节</h2>
</header>
<p>第一节内容</p>
<footer>
<small>第一节小结</small>
</footer>
</div>
</section>
<script>
var section = document.getElementById("section1");
section.style.color = "red";
</script>
<section>
<header>
<h2>第二节</h2>
</header>
<p>第二节内容</p>
<footer>
<small>第二节小结</small>
<hr>
</footer>
</section>
<section>
<header>
<h2>第三节</h2>
</header>
<p>第三节内容</p>
<footer>
<small>第三节小结</small>
<hr>
</footer>
</section>
</article>
</body>
</html>
4.4 <aside>标记元素
aside元素用来定义当前页面或者文章的附属信息部分，它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条等其他类似的有别于主要内容的部分。
aside元素的用法主要分为两种：
- 被包含在article元素内作为主要内容的附属信息。
- 在article元素之外使用，作为页面或站点全局的附属信息部分。
清单 14：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>aside元素</title>
</head>
<body>
<article>
<header><h1>我的博客</h1></header>
<section>
<header><h2>缠论</h2></header>
<p>中国人的交易理论</p>
</section>
<aside>
<header><h3>波浪</h3></header>
<p>外国人的交易理论</p>
</aside>
</article>
<aside>
<header><h4>量价</h4></header>
<p>底层交易逻辑</p>
</aside>
</body>
</html>
4.5 <footer>标记元素
footer元素用于定义一个页面或者区域的底部，它可以包含所有通常放在页面底部的内容。在HTML5出现之前，一般使用<div id=“footer”></div>标记来定义页面底部，而通过HTML5的footer元素可以轻松实现。代码片段如下：
<article>
<p>文章内容</p>
<footer>
<span>文章分页链接</span>
</footer>
</article>
<footer>
页面底部
</footer>
4.5 结构标记元素综合案例
清单 15：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>一个html5元素的例子</title>
<style>
body {
background-color: #b5a789;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: small;
margin: 0px;
}
header {
background-color: #675c47;
margin: 10px;
height: 108px;
background-image: url(img/hrobot.jpg);
background-repeat: repeat;
}
#main {
font-size: 105%;
padding: 15px;
margin: 0px 50px 10px 10px;
}
aside {
font-size: 105%;
padding: 15px;
margin: 0px 50px 10px 10px;
width: 420px;
float: right;
}
footer {
background-color: #675c47;
color: #efe5d0;
text-align: center;
padding: 15px;
margin: 10px;
font-size: 90%;
}
h1 {
font-size: 120%;
color: #954b4b;
}
</style>
</head>
<body>
<header>
</header>
<section>
<aside>
<img src="img/robot.jpg" width="400" />
</aside>
<div id="main">
<h1>全球最先进类人机器人亮相！</h1>
<p>
近日，阿联酋迪拜的未来博物馆迎来了一位新员工，虽然刚上岗，但它却几乎不需要培训就能熟练地开始工作——这就是类人机器人“阿美卡”。
</p>
<p>
“阿美卡”由英国“工程艺术”公司研发，它的最大特点就是能做出接近人类的面部表情，展现更丰富的肢体动作，与人类沟通起来更流畅。此次迪拜未来博物馆让“阿美卡”担任首届迪拜未来论坛接待员。
</p>
<p>
迪拜未来基金会副执行董事马吉德·阿尔曼苏里表示，“阿美卡”除了能极度还原人类的动作和表情外，还能利用人工智能程序针对各种情况做出不同反应。
</p>
<p>
阿尔曼苏里介绍称，“阿美卡”是世界上最先进的类人机器人，特别是它使用了人工智能技术，让它的动作、表情更加逼真，甚至能看到“阿美卡”会直视你，它的面部能像人类那样做出各种表情。
</p>
<p>
据介绍，大家现在看到的“阿美卡”并非它的最终形态，未来可能有更多先进技术应用在它身上。没准几个月不见，“阿美卡”就会让你产生“士别三日”的感觉。未来博物馆一直在与合作伙伴合作引进最新的技术，因此“阿美卡”肯定会进一步升级，还有几种新的技术将在未来几个月引进到博物馆。
</p>
</div>
</section>
<footer>
<p>© 爱校码 版权所有</p>
</footer>
</body>
</html>
本清单15案例与清单11的效果完全相同。
五、分组标记元素
分组元素用于对页面中的内容进行分组。HTML5中涉及3个与分组有关的元素，分别是figure元素、figcaption元素和hgroup元素。
5.1 <figure>标记元素和<figcaption>标记元素
figure元素用于定义独立的流内容（图像、图表、照片、代码等等），一般指一个单独的单元。figure元素的内容应该与主内容相关，但如果被删除，也不会对文档流产生影响。figcaption元素用于为figure元素组添加标题，一个figure元素内最多允许使用一个figcaption元素，该元素应该放在figure元素的第一个或者最后一个子元素的位置。
清单 16：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>figure和figcaption元素的使用</title>
</head>
<body>
<p>
近日，阿联酋迪拜的未来博物馆迎来了一位新员工，虽然刚上岗，但它却几乎不需要培训就能熟练地开始工作。
</p>
<figure>
<figcaption>阿美卡</figcaption>
<p>全球最先进类人机器人亮相！</p>
<img src="img/robot.jpg" alt="">
</figure>
</body>
</html>
5.2 <hgroup>标记元素
hgroup元素用于将多个标题（主标题和副标题或者子标题）组成一个标题组，通常它与h1~h6元素组合使用。通常，将hgroup元素放在header元素中。
在使用hgroup元素时要注意以下几点：
- 如果只有一个标题元素不建议使用
hgroup元素。 - 当出现一个或者一个以上的标题与元素时，推荐使用
hgroup元素作为标题元素。 - 当一个标题包含副标题、
section或者article元素时，建议将hgroup元素和标题相关元素存放到header元素容器中。
清单 17：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hgroup元素的使用</title>
</head>
<body>
<header>
<hgroup>
<h1>全球最先进类人机器人亮相！</h1>
<h2>类人机器人“阿美卡”</h2>
</hgroup>
</header>
<article>
<p>
“阿美卡”是世界上最先进的类人机器人，特别是它使用了人工智能技术，让它的动作、表情更加逼真，甚至能看到“阿美卡”会直视你，它的面部能像人类那样做出各种表情。
</p>
</article>
</body>
</html>
六、页面交互标记元素
HTML5是一些独立特性的集合。它不仅增加了许多web页面属性，而且本身也是一个应用程序。对于应用程序而言，表现最为突出的就是交互操作。HTML5为操作新增了对应的交互体验元素。
6.1 <details>标记元素和<summary>标记元素
details元素用于描述文档或文档某个部分的细节。summary元素经常与details 元素配合使用，作为details 元素的第一个子元素，用于为details定义标题。标题是可见的，当用户点击标题时，会显示或隐藏details中的其他内容。
清单 18：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>details元素和summary元素的使用</title>
</head>
<body>
<details>
<summary>显示列表</summary>
<ul>
<li>东</li>
<li>西</li>
<li>南</li>
<li>北</li>
<li>中</li>
</ul>
</details>
</body>
</html>
6.2 <progress>标记元素
progress元素用于表示一个任务的完成进度。这个进度可以是不确定的，只是表示进度正在进行，但是不清楚还有多少工作量没有完成。
progress元素的常用属性值有两个：
- value：已经完成的工作量。
- max：总共有多少工作量。
清单 19：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>progress元素的使用</title>
</head>
<body>
<h1>我的作业完成情况</h1>
<p>
<progress value="50" max="100"></progress>
</p>
</body>
</html>
6.3 <meter>标记元素
meter 元素定义度量衡。仅用于已知最大和最小值的度量。meter元素有多个常用的属性，如下所示：
属性 说明
high 定义度量的值位于哪个点被界定为高的值。
low 定义度量的值位于哪个点被界定为低的值。
max 定义最大值，默认值是 1。
min 定义最小值，默认值是 0。
optimum 定义什么样的度量值是最佳的值。如果该值高于high属性，则意味着值越高越好。
如果该值低于low属性的值，则意味着值越低越好。
value 定义度量的值。
清单 20：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>meter元素的使用</title>
</head>
<body>
<header>
<h1>学生成绩列表</h1>
</header>
<section>
<p>
张宏：<meter value="65" min="0" max="100" low="60" high="80" optimum="100" title="65分">65</meter><br/>
王明：<meter value="80" min="0" max="100" low="60" high="80" optimum="100" title="80分">80</meter><br/>
李四：<meter value="75" min="0" max="100" low="60" high="80" optimum="100" title="75分">75</meter><br/>
</p>
</section>
</body>
</html>
七、文本层次语义标记元素
为了使HTML页面中的文本内容更加形象生动，需要使用一些特殊的元素来突出文本之间的层次关系，这样的元素被称为层次语义元素。
7.1 <time>标记元素
time元素用于定义时间或日期，可以代表24小时中的某一时间。time元素不会在浏览器中呈现任何特殊效果，但是该元素能以机器可读的方式对日期和时间进行编码，这样，用户能够将生日提醒或其他事件添加到日程表中，搜索引擎也能够生成更智能的搜索结果。
time元素有两个属性：
- datetime：用于定义相应的时间或日期。取值为具体时间（例如：15:00）或具体日期（例如2022-10-28），不定义该属性时，由元素的内容给定日期 / 时间。
- pubdate：用于定义time元素中的日期/时间是文档（或article元素）的发布日期。取值一般为“pubdate”。
清单 21：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>time元素的使用</title>
</head>
<body>
<p>我们上午<time>9:50</time>开始上课</p>
<p>这学期的<time datetime="2022-10-27"><strong>24小时核酸监控</strong></time>正式启动</p>
<time datetime="2022-10-28" pubdate="pubdate">该消息发布于2022年10月28日</time>
</body>
</html>
7.2 <mark>标记元素
mark元素的主要功能是在文本中高亮显示某些字符，以引起用户注意。该元素的用法与em和strong有相似之处，但是使用mark元素在突出显示样式时更随意灵活。
清单 22：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>mark元素的使用</title>
</head>
<body>
<p>
据介绍，大家现在看到的<mark>“阿美卡”</mark>并非它的最终形态，未来可能有更多先进技术应用在它身上。没准几个月不见，<mark>“阿美卡”</mark>就会让你产生<mark>“士别三日”</mark>的感觉。
</p>
</body>
</html>
7.2 <cite>标记元素
cite元素可以创建一个引用标记，用于对文档参考文献的引用说明，一旦在文档中使用了该标记，被标记的文档内容将以斜体的样式展示在页面中，以区别于段落中的其他字符。
清单 23：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>cite元素的使用</title>
</head>
<body>
<p>也许愈是美丽就愈是脆弱，就像盛夏的泡沫。</p>
<cite>--明晓溪《泡沫之夏》 </cite>
</body>
</html>
八、标记的全局属性
全局属性是指在任何时候都可以使用的属性。在HTML5中常用的全局属性有draggable、hidden、spellcheck和contenteditable。
8.1 draggable属性
draggable属性用来定义元素是否可以拖动，该属性有两个值：true和false，默认为false，当值为true时表示元素选中之后可以进行拖动操作，否则不能拖动。
清单 24：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>draggable属性的使用</title>
</head>
<body>
<h3>元素拖动属性</h3>
<article draggable="true">世界上最先进的类人机器人</article>
<img src="img/robot.jpg" draggable="true"/>
</body>
</html>
8.2 hidden属性
在HTML5中，大多数元素都支持hidden属性，该属性有两个属性值：true和false。当hidden属性取值为true时，元素将会被隐藏，反之则会显示。元素中的内容是通过浏览器创建的，页面装载后允许使用JavaScript脚本将该属性取消，取消后该元素变为可见状态，同时元素中的内容也及时显示出来。
清单 25：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hidden属性的使用</title>
<script>
function dome(){
var me = document.getElementById("me");
var ar = me.hidden;
if (ar== true){
me.hidden = false;
}else{
me.hidden = true;
}
}
</script>
</head>
<body>
<article>
<p id="me"><mark>“阿美卡”</mark></p>
</article>
<section>
<button onclick="dome()">点我</button>
</section>
</body>
</html>
8.3 spellcheck属性
spellcheck属性主要针对于<input>标记元素和<textarea>标记元素文本输入框，对用户输入的文本内容进行拼写和语法检查。spellcheck属性有两个值：true（默认值）和false，值为true时检测输入框中的值，反之不检测。
清单 26：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>spellcheck属性的使用</title>
</head>
<body>
<section>
<h3>输入框语法检测</h3>
<p>spellcheck属性值为true <br/>
<textarea spellcheck="true">hello world</textarea>
</p>
<p>spellcheck属性值为false <br/>
<textarea spellcheck="false">hello world</textarea>
</p>
</section>
</body>
</html>
8.4 contenteditable属性
contenteditable属性规定是否可编辑元素的内容，但是前提是该元素必须可以获得鼠标焦点并且其内容不是只读的。该属性有两个值，如果为true表示可编辑，为false表示不可编辑。
清单 27：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>contenteditable属性的使用</title>
</head>
<body>
<section>
<h3>可编辑列表</h3>
<ul contenteditable="true">
<li>东</li>
<li>西</li>
<li>南</li>
<li>北</li>
<li>中</li>
</ul>
</section>
</body>
</html>
九、带有导航功能的页面设计
清单 28：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>一个nav元素的例子</title>
<style>
body {
background-color: #b5a789;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: small;
margin: 0px;
}
header {
background-color: #675c47;
margin: 10px;
height: 108px;
background-image: url(img/hrobot.jpg);
background-repeat: repeat;
}
/* 我们为＜nav＞元素添加了一个新规则，并将用于设置背景颜色和边距的属性移动到该规则中，因此＜nav>元素中的所有内容都将使用这些属性进行样式设置 */
nav {
background-color: #efe5d0;
margin: 10px 10px 0px 10px;
}
/* 我们还添加了一个属性，将＜ul＞元素的边距设置为0，这样它就很适合＜nav＞元素（默认情况下，＜ul＞元素有一个边距，如果我们不将其设置为0的话，它会导致＜ul＞偏移一点）。 */
nav ul {
margin: 0px;
list-style-type: none;
padding: 5px 0px 5px 0px;
}
/* 对于所有这些规则，我们在它们前面添加了选择器“nav”，因此这些规则只影响<nav>元素中出现的<ul>元素。 */
nav ul li {
display: inline;
padding: 5px 10px 5px 10px;
}
/* 注意，我们使用两个选择器将“nav”添加到该规则中的两个规则中！ */
nav ul li a:link, nav ul li a:visited {
text-decoration: none;
color: #954b4b;
border-bottom: none;
font-weight: bold;
}
nav ul li.selected, nav ul li:hover{
background-color: #c8b99c;
}
#main {
font-size: 105%;
padding: 15px;
margin: 0px 50px 10px 10px;
}
aside {
font-size: 105%;
padding: 15px;
margin: 0px 50px 10px 10px;
width: 420px;
float: right;
}
footer {
background-color: #675c47;
color: #efe5d0;
text-align: center;
padding: 15px;
margin: 10px;
font-size: 90%;
}
h1 {
font-size: 120%;
color: #954b4b;
}
</style>
</head>
<body>
<header>
</header>
<!-- 这里是＜nav＞开始标记，我们将整个导航列表封装在＜nav>标记元素中 -->
<nav>
<ul>
<li><a href="index.html">主页</a></li>
<li class="selected"><a href="robot.html">阿美卡</a></li>
<li><a href="#">发明</a></li>
<li><a href="#">食谱</a></li>
<li><a href="#">位置</a></li>
</ul>
</nav>
<section>
<aside>
<img src="img/robot.jpg" width="400" />
</aside>
<div id="main">
<h1>全球最先进类人机器人亮相！</h1>
<p>
近日，阿联酋迪拜的未来博物馆迎来了一位新员工，虽然刚上岗，但它却几乎不需要培训就能熟练地开始工作——这就是类人机器人“阿美卡”。
</p>
<p>
“阿美卡”由英国“工程艺术”公司研发，它的最大特点就是能做出接近人类的面部表情，展现更丰富的肢体动作，与人类沟通起来更流畅。此次迪拜未来博物馆让“阿美卡”担任首届迪拜未来论坛接待员。
</p>
<p>
迪拜未来基金会副执行董事马吉德·阿尔曼苏里表示，“阿美卡”除了能极度还原人类的动作和表情外，还能利用人工智能程序针对各种情况做出不同反应。
</p>
<p>
阿尔曼苏里介绍称，“阿美卡”是世界上最先进的类人机器人，特别是它使用了人工智能技术，让它的动作、表情更加逼真，甚至能看到“阿美卡”会直视你，它的面部能像人类那样做出各种表情。
</p>
<p>
据介绍，大家现在看到的“阿美卡”并非它的最终形态，未来可能有更多先进技术应用在它身上。没准几个月不见，“阿美卡”就会让你产生“士别三日”的感觉。未来博物馆一直在与合作伙伴合作引进最新的技术，因此“阿美卡”肯定会进一步升级，还有几种新的技术将在未来几个月引进到博物馆。
</p>
</div>
</section>
<footer>
<p>© 爱校码 版权所有</p>
</footer>
</body>
</html>
博文最后更新时间：