设计HTML5文档_html5ul设计文档怎么写-CSDN博客

本文链接：https://blog.csdn.net/lyh030105/article/details/134625405

HTML5入门

一、HTML5基础

1、HTML5语法

1.1内容类型

HTML5的文件扩展符与内容类型保持不变，扩展名仍未".html"或".htm"，内容类型仍为"text/html"。

1.2文档声明类型

HTML文档声明类型，也称为DOCTYPE声明，是一种指示web浏览器如何处理和渲染文档的指令。在HTML文档的开头，通常会看到一个DOCTYPE声明，它定义了文档的类型和版本。

DOCTYPE声明有以下作用：

确保浏览器能够正确地以标准模式呈现页面。
帮助浏览器正确地解析和渲染HTML元素和属性。
帮助开发者避免在某些浏览器中出现的兼容性问题。

HTML5的DOCTYPE声明如下：

<!DOCTYPE html>

这个简洁的声明是HTML5规范的一部分，支持所有现代浏览器。在撰写HTML文档时，确保在文件开头包含这个DOCTYPE声明，以便确保浏览器能够按照标准模式正确地渲染页面。

1.3字符编码

HTML字符编码是指在HTML文档中使用特定的字符集来表示文本。在HTML中，常用的字符编码有：

UTF-8：Unicode Transformation Format - 8bit，是一种广泛应用的字符编码方式，它支持世界上大多数的语言字符。UTF-8具有向后兼容性，即旧的ASCII文档在UTF-8下仍然是有效的。在HTML中，通常通过在<head>部分添加<meta>标签来声明使用UTF-8编码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>我的页面标题</title>
</head>
<body>
    <p>这里是页面内容。</p>
</body>
</html>

GBK：Chinese Internal Code Specification，是中文编码的一种方式，主要用于中文字符。但在处理外国人名、地名和一些特殊字符时，GBK可能会出现问题。

如果您的网站只面向中文用户，并且不使用特殊字符，可以使用GBK编码。但在大多数情况下，建议使用UTF-8编码，因为它可以支持世界上几乎所有的语言字符。

1.4版本兼容性

HTML版本兼容性是指网页在不同版本的HTML规范下的显示效果。随着HTML规范的发展和更新，一些HTML元素和属性可能会被弃用或取代。为了保证网页在各个版本的HTML规范下的兼容性，开发者需要注意以下几点：

使用HTML5 DOCTYPE声明：在HTML文档的开头，包含HTML5的DOCTYPE声明，以确保浏览器按照标准模式渲染页面。

<!DOCTYPE html>

避免使用已废弃或过时的HTML元素和属性：在编写HTML代码时，需要确保使用了最新版本的HTML规范，避免使用已废弃或过时的HTML元素和属性。例如，尽量避免使用<font>、<center>等元素，而是使用CSS来实现相应的样式。
使用特性检测而不是浏览器检测：在编写JavaScript代码时，避免使用浏览器检测（通过判断浏览器的userAgent）来应用不同的特性。取而代之的是，应该使用特性检测，即检测浏览器是否支持特定的HTML元素、属性或API。
使用polyfill和浏览器前缀：对于一些尚在草案阶段或在部分浏览器中尚未实现的特性，可以使用polyfill库来提供兼容性支持。此外，在需要使用某些浏览器专属特性时，可以通过添加浏览器前缀（如-webkit-、-moz-、-ms-等）来确保兼容性。
遵循HTML语义和结构：在编写HTML代码时，应该遵循HTML的语义和结构，以便在不同的浏览器和设备上实现最佳的兼容性。例如，使用<header>、<nav>、<article>等语义元素来构建页面结构。
测试页面在不同浏览器和设备上的显示效果：在发布页面前，确保在不同浏览器和设备上进行充分的测试，以发现和解决可能出现的兼容性问题。

通过遵循以上原则，可以确保您的网页在各个版本的HTML规范下都具有良好的兼容性。

2、HTML5元素

2.1新增的结构元素

HTML5引入了一些新的结构元素，以帮助开发者更清晰地组织和构建网页内容。这些新元素包括：

<header>：定义页面的头部信息，通常包含页眉、logo、导航等。
<nav>：定义导航链接，用于包含主导航、子导航等内容。
<article>：定义一篇独立的文章，可以是博客文章、新闻报道等。
<section>：定义页面的一个区块，通常包含一个内容区域，如章节、标签页等。
<aside>：定义页面的侧边栏内容，如广告、相关链接等。
<footer>：定义页面的底部信息，通常包含页脚、版权信息等。
<figure>：定义一组媒体内容（如图像、图表、视频等）及其标题。
<figcaption>：定义<figure>元素的标题。
<mark>：定义需要突出显示的文本。
<progress>：定义进度条。
<meter>：定义度量衡，如温度、百分比等。
<time>：定义日期和时间。
<dialog>：定义对话框或窗口。

这些新元素可以帮助开发者更清晰地组织文档结构，提高代码的可读性和可维护性，同时也有利于搜索引擎更好地理解网页内容。

2.2HTML5新增功能元素

HTML5除了新增了一些结构元素，还引入了一些功能元素，以提供更丰富的网页交互体验。这些新功能元素包括：

<canvas>：定义画布，用于绘制图形、图标和其他视觉元素。
<svg>：定义可缩放矢量图形，用于创建分辨率独立的矢量图形。
<audio>：定义音频内容，如音乐或声音特效。
<video>：定义视频内容。
<source>：定义多媒体资源，如<audio>和<video>元素的来源。
<embed>：定义嵌入的内容，如插件、第三方应用等。
<iframe>：定义内嵌的文档，如嵌套的网页或应用程序。
<form>：定义表单，用于收集用户输入。HTML5对表单元素进行了许多改进，如新增<input type="email">、<input type="url">等类型，以及验证和表单控件。
<datalist>：定义选项列表，为<input>元素提供建议值的来源。
<output>：定义计算结果，通常与<form>元素配合使用。
<meter>：定义度量衡，如温度、百分比等。
<progress>：定义进度条。
<details>：定义额外的细节信息，用户可以通过单击展开或折叠。
<summary>：定义<details>元素的标题。
<command>：定义命令按钮，如单选按钮、复选框等。
<menu>：定义上下文菜单，如右键菜单。

这些新功能元素扩展了HTML在交互和媒体方面的能力，使得开发者可以创建更具互动性和吸引力的网页。

2.3HTML5废除的元素

在HTML5规范中，一些元素被认为过时或冗余，而被废弃。废弃的元素如下：

basefont：定义基本字体颜色、大小和样式。由于样式可以通过CSS更好地控制，这个元素被废弃。
big：定义重要文本。这个元素被废弃，因为HTML5建议使用<strong>或<em>元素来表示重要性。
center：定义居中文本。由于样式可以通过CSS更好地控制，这个元素被废弃。
font：定义字体、颜色和尺寸。由于样式可以通过CSS更好地控制，这个元素被废弃。
frame、frameset和noframes：用于框架集（frame set）的元素。随着Ajax、JavaScript和CSS技术的发展，框架集逐渐被淘汰，这些元素也被废弃。
acronym：定义首字母缩写词。这个元素被废弃，因为HTML5建议使用<abbr>元素，并使用title属性来提供全称。
applet：定义Java applet。由于Java applet存在安全问题，并在现代网页中逐渐被淘汰，这个元素被废弃。
dir：定义目录列表。这个元素被废弃，因为HTML5建议使用<ul>、<li>等元素创建列表。

需要注意的是，废弃的元素可能会在未来的HTML版本中被完全移除，因此不建议在HTML5文档中使用这些元素。应使用CSS和替换元素来实现相应的功能。

3、HTML5对象属性

3.1表单属性

HTML5对表单元素进行了许多改进，增加了许多新的属性和功能。以下是一些主要的表单属性：

autocomplete：设置表单元素的自动完成功能。可取值为on（默认）或off，用于启用或禁用自动完成功能。
autofocus：设置表单元素在页面加载时自动获得焦点。可取值为autofocus，用于指定元素自动获得焦点。
form：指定表单元素所属的表单。其值必须是一个表单ID，用于将元素与特定的表单关联。
required：指示表单元素是否为必填项。可取值为required，表示该元素为必填项。
pattern：指定一个正则表达式，用于验证表单元素的值。当用户提交表单时，浏览器将根据此正则表达式进行验证。
maxlength和minlength：设置表单元素最大和最小长度（以字符为单位）。
max和min：设置表单元素的最大值和最小值。适用于诸如数字、日期和时间等元素。
step：设置表单元素的递增或递减步长。适用于诸如数字、日期和时间等元素。
placeholder：设置表单元素的占位符文本。在用户输入值之前，占位符文本将显示在表单元素中。
multiple：允许用户选择多个值。适用于诸如电子邮件、电话号码和多选按钮等元素。
dirname：指定文件输入元素的目录。适用于文件输入（<input type="file">）元素。
disabled：禁用表单元素。可取值为disabled，表示元素被禁用。

这些属性为表单元素提供了更丰富的验证和功能，有助于创建更具交互性和用户友好的表单。在实际应用中，可以结合CSS和JavaScript来实现更高级的表单验证和功能。

3.2链接属性

HTML5中的链接属性主要涉及链接类型和target属性。以下是一些主要的链接属性：

href：定义链接的目标URL。这是链接元素的核心属性，其值可以是绝对URL或相对URL。
target：指定链接打开的位置。可取值为：
- _self（默认）：在当前窗口或标签中打开链接。
- _blank：在新窗口或标签中打开链接。
- _parent：在父窗口或标签中打开链接。
- _top：在整个窗口中打开链接，并替换当前页面。
如果需要更多关于target属性的信息，请查阅HTML 5.2 规范。
rel：定义链接关系。可取值为：
- alternate：表示链接指向页面的替代版本（如打印版、翻译版等）。
- author：表示链接指向该网页作者的页面。
- bookmark：表示链接指向该网页的书签。
- help：表示链接指向与页面内容相关的帮助信息。
- license：表示链接指向该网页的版权信息。
- next：表示链接指向一系列文档中的下一个文档。
- prev：表示链接指向一系列文档中的上一个文档。
- nofollow：表示链接不应被计算在搜索引擎排名中。
- noopener：表示在新窗口或标签中打开链接时，不应继承打开它的窗口或标签的Window对象。
- noreferrer：表示在新窗口或标签中打开链接时，不应发送Referer头部信息。
其他可能的值包括tag、icon、pingback等。如需更完整的列表，请查阅MDN Web Docs。

这些链接属性提供了更高级的链接控制和语义信息，有助于搜索引擎更好地理解和排名网页，以及提高网页的可访问性和用户体验。

3.3其他属性

除了前面提到的结构元素、功能元素和链接属性外，HTML5还引入了一些其他属性，以提供更丰富的网页功能和改进的可访问性。以下是一些主要的HTML5属性：

accesskey：定义访问键，允许用户使用键盘快捷键来聚焦元素。
autocapitalize：控制元素是否自动大写。可取值为on（默认）、off和none。
hidden：指示元素是否可见。可取值为hidden，表示元素不可见。
id：定义元素的唯一ID，用于标识元素。
lang：定义元素内容的语言。有助于提高页面的可访问性，以及帮助搜索引擎更好地理解页面内容。
spellcheck：指示浏览器是否对元素内容进行拼写检查。可取值为true（默认）或false。
style：定义元素的内联样式。
tabindex：定义元素的Tab键导航顺序。可使用正整数、零或负整数。
title：定义元素相关的建议信息。屏幕阅读器会读取这些信息，有助于提高页面的可访问性。
translate：指示浏览器是否翻译元素内容。可取值为yes（默认）或no。

在实际应用中，结合CSS和JavaScript，可以充分利用这些属性创建更具交互性、可访问性和兼容性的网页。

3.4废除的属性

随着HTML5规范的发展，一些属性被认为过时或冗余，而被废弃。废弃的属性如下：

align：定义元素对齐方式。由于CSS能够更好地控制对齐方式，这个属性被废弃。
frameborder：定义框架集边框。随着框架集逐渐被淘汰，这个属性被废弃。
marginheight和marginwidth：定义元素margin的高度和宽度。由于CSS能够更好地控制 margin，这两个属性被废弃。
nohref：指示链接不作为链接。由于这个功能可以通过将链接的href属性设置为javascript:void(0);来实现，所以这个属性被废弃。
profile：定义链接的目标URL。由于这个功能可以通过将链接的rel属性设置为external nofollow来实现，所以这个属性被废弃。
rev：定义链接的关系。由于这个功能可以通过将链接的rel属性设置为nofollow external来实现，所以这个属性被废弃。
rules：定义表格的边框规则。由于CSS能够更好地控制边框规则，这个属性被废弃。
scheme：定义URL的方案。由于这个功能可以通过将链接的href属性设置为完整的URL（包括方案）来实现，所以这个属性被废弃。

需要注意的是，废弃的属性可能在未来的HTML版本中被完全移除，因此不建议在HTML5文档中使用这些属性。应使用CSS和替换属性来实现相应的功能。

4、HTML5全局属性

4.1contentEditable属性

contentEditable是全局属性之一，用于指示HTML元素是否可编辑。它的值可以是true或false。当contentEditable属性为true时，用户可以编辑元素内容，否则元素内容不可编辑。

例如，以下代码创建了一个可编辑的<div>元素：

<div contentEditable="true">欢迎编辑此内容！</div>

当用户点击这个<div>元素时，它们可以使用输入法、富文本编辑器或纯文本格式进行编辑。

注意，使用contentEditable属性并不会将元素转变为表单元素（如<input>或<textarea>）。当用户完成编辑并离开元素时，您需要自己处理值的保存和更新。可以通过JavaScript来捕获元素的blur或keydown事件，以实现这一目的。

contentEditable属性在大多数浏览器中都支持，但它不是一个标准的HTML属性。如果您需要更强大的编辑功能，可以考虑使用JavaScript库，如ContentTools或Quill.js。这些库提供了更丰富的编辑功能，如格式化、列表和表格等。

4.2designMode属性

designMode属性存在于文档的document.designMode中，用于指定整个文档是否可编辑。当designMode属性设置为on时，整个文档变为可编辑状态，用户可以使用输入法、富文本编辑器或纯文本格式进行编辑。当designMode属性设置为off（默认值）时，文档处于不可编辑状态。

designMode主要用于内容编辑应用程序，如所见即所得（WYSIWYG）编辑器。它可以使你更快速、更方便地编辑整个文档的内容。但在实际应用中，不推荐直接使用designMode属性，因为它可能会导致一些意想不到的问题，如与某些浏览器或插件的兼容性问题。

要使特定元素可编辑，建议使用contentEditable属性，而不是designMode属性。contentEditable属性可以在不影响整个文档的情况下，使特定元素变得可编辑。

4.3hidden属性

hidden属性是全局属性之一，用于指示元素是否可见。当hidden属性存在且值为true时，元素不可见。当hidden属性不存在或值为false时，元素可见。

<div hidden>这是一个隐藏的段落。</div>

在大多数浏览器中，隐藏的元素不会被显示，并且不会占用页面空间。但是，隐藏的元素仍然存在，可以通过JavaScript进行访问和操作。当您希望元素在页面加载时不可见，但在以后需要使其可见时，使用hidden属性会很有用。

需要注意的是，使用hidden属性和CSS的display: none之间的区别：

hidden属性是HTML属性，适用于所有浏览器。当hidden属性为true时，元素在页面上不可见，但它仍然占用空间。
display: none是CSS属性，适用于支持CSS的浏览器。当元素display属性值为none时，元素在页面上不可见，且不占用空间。

根据您的需求和浏览器兼容性要求，可以选择使用hidden属性或display: none来隐藏元素。

4.4spellcheck属性

spellcheck属性用于指示浏览器是否对元素内容进行拼写检查。当spellcheck属性存在且值为true时，浏览器会对元素内容进行拼写检查，并在出现拼写错误时显示波浪线。当spellcheck属性不存在或值为false时，浏览器不会对元素内容进行拼写检查。

例如：

<p spellcheck="true">这是一个需要进行拼写检查的段落。</p>
<p>这是一个不进行拼写检查的段落。</p>

在大多数浏览器中，拼写检查功能仅适用于文本输入元素，如<input>和<textarea>。但是，spellcheck属性可以应用于任何元素，以便在需要时启用拼写检查。

需要注意的是，spellcheck属性并不保证拼写检查结果一定会显示，因为这取决于浏览器的实现和设置。有些浏览器可能需要手动启用拼写检查功能，而有些浏览器可能根本不支持拼写检查。为了确保拼写检查功能在各个浏览器中保持一致的表现，可以考虑使用JavaScript库，如jQuery SpellChecker插件。

4.5tabindex属性

tabindex属性用于指定元素在Tab键导航顺序中的位置。tabindex的值可以是任何整数，默认值为0。当tabindex值为负数时，元素不会被包含在Tab键导航顺序中。

例如：

<button tabindex="1">按钮1</button>
<button tabindex="2">按钮2</button>
<button tabindex="-1">按钮3（不在Tab键导航顺序中）</button>

在上述示例中，按Tab键遍历按钮时，顺序将为“按钮1”、“按钮2”和“按钮3”。这是因为“按钮3”的tabindex值为-1，被排除在Tab键导航顺序之外。

您可以使用tabindex属性来控制Tab键导航顺序，从而使页面更容易导航。这对于键盘用户来说尤为重要，因为他们通常依靠Tab键在网页间导航。请注意，尽管大多数浏览器都支持tabindex属性，但它不是一个标准的HTML属性。建议在需要使用时谨慎使用，并根据需要进行跨浏览器测试。

二、认识HTML5文档结构

HTML5文档结构是指使用HTML5编写的网页的层次结构。一个典型的HTML5文档结构包括以下几个部分：

<!DOCTYPE html>：声明文档类型为HTML5。
<html>：根元素，包含整个HTML页面的内容。
<head>：包含页面的元数据，如字符编码、标题、CSS样式和JavaScript代码等。
<title>：定义网页标题，显示在浏览器的标签页上。
<body>：包含页面的主体内容，如文本、图片、链接、表单等。

这是一个简单的HTML5文档结构示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的简单页面</title>
</head>
<body>
    <h1>欢迎来到我的页面</h1>
    <p>这是一个简单的HTML5页面示例。</p>
</body>
</html>

在这个示例中，我们定义了一个HTML5文档，包括<!DOCTYPE html>声明、带有中文语言设置的<html>元素、包含字符编码和视口元数据的<head>部分、标题<title>以及包含页面内容的<body>。在实际应用中，您可以根据需要添加更多的元素和结构。

三、HTML5元素分类

1、结构性元素

结构性元素主要负责Web的上下文结构的定义，确保HTML文档的完整性，这类元素包括以下几个。

section:用于表达书的一部分或一章，或者一章内的一节。在Web页面应用中，该元素也可
以用于区域的章节表述。
header:页面主体上的头部，注意区别于head元素。这里可以给初学者提供一个判断的小技巧：head元素中的内容往往是不可见的，而header元素往往在一对body元素中。
footer:页面的底部(页脚)。通常，人们会在这里标出网站的一些相关信息，例如关于我们、法律申明、邮件信息、管理入口等。
nav:是专门用于菜单导航、链接导航的元素，是navigator的缩写。
article:用于表示一篇文章的主体内容，一般为文字集中显示的区域。

2、级块性元素

级块性元素主要完成Web页面区域的划分，确保内容的有效分隔，这类元素包括以下几个。

aside:用以表达注记、贴士、侧栏、摘要、插入的引用等作为补充主体的内容。从一个简单页面显示上看，就是侧边栏，可以在左边，也可以在右边。从一个页面的局部看，就是摘要。
figure:是对多个元素进行组合并展示的元素，通常与figcaption联合使用。
code:表示一段代码块。
dialog:用于表达人与人之间的对话。该元素还包括dt和dd这两个组合元素，它们常常同te 时使用。dt用于表示说话者，而dd则用来表示说话者说的内容。

3、行内语义性元素

行内语义性元素主要完成Web页面具体内容的引用和表述，是丰富内容展示的基础，这类元素包括以下几个。

meter：表示特定范围内的数值，可用于工资、数量、百分比等。
time：表示时间值。
progress:用来表示进度条，可通过对其max、min、step等属性进行控制，完成对进度的表示和监视。
video:视频元素，用于支持和实现视频(含视频流)文件的直接播放，支持缓冲预载和多种视频媒体格式，如MPEG-4、OggV和WebM等。
audio：音频元素，用于支持和实现音频(音频流)文件的直接播放，支持缓冲预载和多种音频媒体格式。

4、交互性元素

交互性元素主要用于功能性的内容表达，会有一定的内容和数据的关联，是各种事件的基础，这类元素包括以下几个。

details:用来表示一段具体的内容，但是内容默认可能不显示，通过某种手段(如点击)与
legend交互才会显示出来。
datagrid:用来控制客户端数据与显示，可以由动态脚本即时更新。
menu:主要用于交互菜单(这是一个曾被废弃现在又被重新启用的元素)。
command:用来处理命令按钮。

四、构建主体内容

1、标识文章

如果你想使用HTML5标识一篇文章，可以使用以下基本结构：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文章标题</title>
</head>
<body>
    <article>
        <h1>文章标题</h1>
        <p>文章正文。</p>
        <p>更多内容……</p>
    </article>
</body>
</html>

这是一个简单的HTML5文档结构，包含了<!DOCTYPE html>声明，<html>和<head>元素，以及<body>元素。在<body>元素中，我们使用了一个<article>元素来包含文章的内容。在<article>元素中，我们使用了一个<h1>元素作为文章标题，以及两个<p>元素作为文章正文。

你可以根据需要修改这个基本结构，添加更多的元素和属性。例如，可以使用<header>和<footer>元素来包含文章头部和底部的信息，使用<img>元素来插入图片，使用<ul>和<li>元素来创建列表等。

2、给内容分段

在HTML5中，可以使用<div>元素来对内容进行分段。<div>元素是一个通用容器，可以用来包含任何类型的内容。以下是一个使用<div>元素对内容进行分段的示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>内容分段示例</title>
</head>
<body>
    <div>
        <h2>第一部分</h2>
        <p>这是第一部分的内容。</p>
    </div>
    <div>
        <h2>第二部分</h2>
        <p>这是第二部分的内容。</p>
    </div>
    <div>
        <h2>第三部分</h2>
        <p>这是第三部分的内容。</p>
    </div>
</body>
</html>

在这个示例中，我们使用了三个<div>元素来对内容进行分段。每个<div>元素包含一个<h2>元素作为标题和一个<p>元素作为正文。通过这种方式，我们可以清晰地对内容进行分段。

3、设计导航信息

在HTML5中，可以使用<nav>元素来设计导航信息。<nav>元素用于定义导航链接，通常用于包含导航栏、菜单或目录等。以下是一个简单的使用<nav>元素设计导航信息的示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>导航信息示例</title>
</head>
<body>
    <nav>
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">关于我们</a></li>
            <li><a href="#">服务与支持</a></li>
            <li><a href="#">联系我们</a></li>
        </ul>
    </nav>
</body>
</html>

在这个示例中，我们使用了一个<nav>元素，在里面包含了一个无序列表（<ul>）。列表中的每个列表项（<li>）都包含一个链接（<a>），指向不同的页面。你可以根据需要修改这个导航栏，添加或删除链接。

在实际应用中，你可能还需要为导航栏添加一些样式，以便更好地展示在不同设备和屏幕尺寸上。可以使用CSS来为导航栏添加样式。

4、设计辅助信息

在HTML5中，可以使用<aside>元素来设计辅助信息。<aside>元素用于定义article以外的内容，通常用于包含侧边栏、相关文章、广告、导航栏等。以下是一个简单的使用<aside>元素设计辅助信息的示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>辅助信息示例</title>
</head>
<body>
    <article>
        <h1>文章标题</h1>
        <p>文章正文。</p>
    </article>
    <aside>
        <h2>相关文章</h2>
        <ul>
            <li><a href="#">文章1</a></li>
            <li><a href="#">文章2</a></li>
            <li><a href="#">文章3</a></li>
        </ul>
    </aside>
</body>
</html>

在这个示例中，我们使用了一个<article>元素来包含文章正文，并使用了一个<aside>元素来包含相关文章的列表。在实际应用中，你可以根据需要修改这个辅助信息部分，添加或删除相关内容。

同样，你可能还需要为辅助信息部分添加一些样式，以便更好地展示在不同设备和屏幕尺寸上。可以使用CSS来为辅助信息部分添加样式。

5、设计微格式

微格式（Microformat）是一种允许在HTML文件中嵌入语义信息的方法，以便于让机器更好地理解和处理网页内容。微格式可以通过添加特定的class属性和属性值来实现。以下是一个简单的使用微格式设计事件和联系人信息的示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>微格式示例</title>
</head>
<body>
    <div class="event">
        <h1 class="p-name">圣诞晚会</h1>
        <p class="p-summary">一年一度的圣诞晚会即将来临，快来加入我们，共度欢乐时光！</p>
        <time class="dt-start" datetime="2023-12-25">2023年12月25日</time>
        <time class="dt-end" datetime="2023-12-25T20:00">2023年12月25日 晚上8点</time>
        <p class="location">
            <span class="p-locality">上海</span>
            <span class="p-street-address">南京西路18号</span>
        </p>
    </div>

    <div class="contact-info">
        <h1 class="p-name">联系方式</h1>
        <div class="p-contact">
            <div class="p-country-name">中国</div>
            <div class="p-region">上海市</div>
            <div class="p-locality">徐汇区</div>
            <div class="p-street-address">南京西路18号</div>
            <div class="p-postal-code">200020</div>
            <div class="p-tel">+86 21 62180000</div>
            <div class="p-email"><EMAIL></div>
        </div>
    </div>
</body>
</html>

在这个示例中，我们使用了class属性为元素添加了微格式。event类表示一个事件，p-name、p-summary、dt-start、dt-end和location类分别用于表示事件的名称、摘要、开始时间、结束时间和地点。类似地，contact-info类表示联系人信息，p-contact类表示联系人地址，里面的子元素分别用于表示国家、地区、城市、街道地址、邮政编码、电话和电子邮件。

微格式可以方便机器（如搜索引擎、语音助手等）更好地理解和处理网页内容，提高用户体验。但是，并不是所有的浏览器和设备都支持微格式，因此最好结合CSS和JavaScript来实现更广泛的兼容性。

6、添加发布日期

在HTML5中，可以使用<time>元素来添加发布日期。<time>元素用于定义日期或时间，它具有一些内置的属性，如datetime，可以用来指定日期或时间的值。以下是一个简单的使用<time>元素添加发布日期的示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>发布日期示例</title>
</head>
<body>
    <article>
        <h1>文章标题</h1>
        <p>文章正文。</p>
        <time datetime="2023-03-19T10:30:00+08:00">2023年3月19日 上午10点30分</time>
    </article>
</body>
</html>

在这个示例中，我们使用了一个<time>元素，并将其datetime属性设置为2023-03-19T10:30:00+08:00，表示发布时间为2023年3月19日上午10点30分（UTC+8时区）。发布日期将以机器可读的方式嵌入到页面中，允许搜索引擎和其他应用程序更容易地识别和提取日期信息。

你可以根据需要修改这个发布日期，将其替换为你自己的发布时间。还可以使用CSS来为发布日期添加样式，以便更好地展示在不同设备和屏幕尺寸上。

五、添加语义模块

1、添加标题块

在HTML5中，可以使用<header>元素来添加标题块。<header>元素通常用于定义页面的标题，但也可以用于定义任何内容的标题。以下是一个简单的使用<header>元素添加标题块的示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标题块示例</title>
</head>
<body>
    <header>
        <h1>页面标题</h1>
    </header>
    <main>
        <article>
            <header>
                <h2>文章标题</h2>
            </header>
            <p>文章正文。</p>
        </article>
    </main>
</body>
</html>

在这个示例中，我们使用了两个<header>元素，一个用于定义页面标题，另一个用于定义文章标题。<header>元素可以包含任何元素，但通常包含一个标题元素（如<h1>到<h6>）。

你可以根据需要修改这些标题块，为其添加或删除内容。还可以使用CSS来为标题块添加样式，以便更好地展示在不同设备和屏幕尺寸上。

2、给标题分组

<hgroup>元素是HTML5中的新元素，用于对网页或文章中的一组标题进行分组。通常，这些标题代表了同一个主题或想法，例如一篇文章或一个章节的不同子标题。以下是一个简单的使用<hgroup>元素的示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hgroup元素示例</title>
</head>
<body>
    <hgroup>
        <h1>文章标题</h1>
        <h2>文章子标题1</h2>
        <h3>文章子标题1.1</h3>
    </hgroup>
    <hgroup>
        <h1>另一篇文章标题</h1>
        <h2>另一篇文章子标题1</h2>
        <h3>另一篇文章子标题1.1</h3>
    </hgroup>
</body>
</html>

在这个示例中，我们使用了两个<hgroup>元素，每个元素都包含了一个主标题（<h1>）和两个子标题（<h2>和<h3>）。通过使用<hgroup>元素，我们可以将这组标题作为一个整体进行渲染和样式设置，这对于语义和可访问性非常有用。

需要注意的是，从HTML5.2开始，<hgroup>元素已被废弃，原因是它的功能可以通过其他方式（例如将标题元素包裹在一个容器元素中）来实现。尽管它可能会继续在某些浏览器中工作，但不建议在新的项目中使用<hgroup>元素。

3、添加脚注块

在HTML5中，可以使用<footer>元素来添加脚注块。<footer>元素用于定义页面的页脚，通常包含版权信息、联系方式、免责声明等。以下是一个简单的使用<footer>元素添加脚注块的示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>脚注块示例</title>
</head>
<body>
    <article>
        <h1>文章标题</h1>
        <p>文章正文。</p>
        <footer>
            <p>本文版权归原作者所有，转载请注明出处。</p>
        </footer>
    </article>
    <footer>
        <p>联系我们：<a href="mailto:***">***</a></p>
        <p>免责声明：本文仅供学习交流使用，不得用于任何商业目的。</p>
    </footer>
</body>
</html>

在这个示例中，我们使用了两个<footer>元素，一个位于<article>内，用于添加文章脚注；另一个位于页面底部，用于添加整个页面的脚注。<footer>元素可以包含任何元素，但通常包含版权信息、联系方式和免责声明等。

你可以根据需要修改这些脚注块，为其添加或删除内容。还可以使用CSS来为脚注块添加样式，以便更好地展示在不同设备和屏幕尺寸上。

4、添加联系信息

在HTML5中，可以使用<address>元素添加联系信息。<address>元素用于定义联系人或组织的联系信息，例如地址、电话、电子邮件等。以下是一个简单的使用<address>元素添加联系信息的示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>联系信息示例</title>
</head>
<body>
    <address>
        <p>公司名称：XXX有限公司</p>
        <p>地址：中国上海市徐汇区南京西路**号</p>
        <p>电话：+86 21 62180000</p>
        <p>传真：+86 21 62180001</p>
        <p>电子邮件：<a href="mailto:***">***</a></p>
        <p>网址：<a href="***">***</a></p>
    </address>
</body>
</html>

在这个示例中，我们使用了一个<address>元素，包含了公司的名称、地址、电话、传真、电子邮件和网址等信息。<address>元素通常包含在一对<p>标签中，以便于排版和样式设置。可以使用CSS来为联系信息添加样式，以便更好地展示在不同设备和屏幕尺寸上。

六、案例实战：使用HTML5设计博客主页

1、设计大纲

以下是一个使用HTML5设计博客主页的设计大纲：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客主页 - 我的博客标题</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>我的博客标题</h1>
        <nav>
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">关于我</a></li>
                <li><a href="#">联系</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section id="blog-posts">
            <article>
                <h2>文章标题1</h2>
                <p>发布日期：2023-03-19</p>
                <p>文章摘要：这是一个文章的摘要，简要介绍了文章的内容。</p>
                <a href="#" class="read-more">阅读更多</a>
            </article>
            <!-- 更多文章 -->
        </section>
        <aside>
            <h2>最新评论</h2>
            <ul>
                <li>用户名1：评论内容1</li>
                <li>用户名2：评论内容2</li>
                <!-- 更多评论 -->
            </ul>
        </aside>
        <aside>
            <h2>分类</h2>
            <ul>
                <li><a href="#">分类1</a></li>
                <li><a href="#">分类2</a></li>
                <!-- 更多分类 -->
            </ul>
        </aside>
        <aside>
            <h2>归档</h2>
            <ul>
                <li><a href="#">2023年</a></li>
                <li><a href="#">2022年</a></li>
                <!-- 更多归档 -->
            </ul>
        </aside>
    </main>
    <footer>
        <p>版权所有，保留一切权利。</p>
    </footer>
    <script src="scripts.js"></script>
</body>
</html>

这个设计大纲包含了头部导航、文章列表、边栏（包含最新评论、分类和归档）以及页脚。根据需要，你可以调整这个大纲，添加或删除相应的部分。使用CSS和JavaScript，你可以进一步设计博客主页的样式和交互效果。

2、设计样式

关于上述设计大纲的设计样式如下
对应的CSS样式

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

header {
    background-color: #333;
    color: white;
    padding: 10px;
}

header h1 {
    margin: 0;
    display: inline-block;
}

header nav {
    float: right;
}

header nav ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

header nav ul li {
    display: inline-block;
    margin-left: 10px;
}

a {
    color: #fff;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

main {
    padding: 20px;
}

#blog-posts article {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #ccc;
}

#blog-posts article h2 {
    margin-top: 0;
}

#blog-posts .read-more {
    font-size: 0.8em;
    text-decoration: none;
    background-color: #333;
    color: white;
    padding: 5px 10px;
    display: inline-block;
    border-radius: 3px;
}

#blog-posts .read-more:hover {
    background-color: #555;
}

aside {
    width: 25%;
    float: right;
    padding: 20px;
}