设计HTML5文档

最新推荐文章于 2024-07-17 16:29:37 发布
最新推荐文章于 2024-07-17 16:29:37 发布
阅读量324 收藏
点赞数 10
分类专栏： 前端设计 文章标签： html5 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：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中，常用的字符编码有：

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

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

1.4版本兼容性

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

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

  1. 避免使用已废弃或过时的HTML元素和属性：在编写HTML代码时，需要确保使用了最新版本的HTML规范，避免使用已废弃或过时的HTML元素和属性。例如，尽量避免使用<font>、<center>等元素，而是使用CSS来实现相应的样式。

  2. 使用特性检测而不是浏览器检测：在编写JavaScript代码时，避免使用浏览器检测（通过判断浏览器的userAgent）来应用不同的特性。取而代之的是，应该使用特性检测，即检测浏览器是否支持特定的HTML元素、属性或API。

  3. 使用polyfill和浏览器前缀：对于一些尚在草案阶段或在部分浏览器中尚未实现的特性，可以使用polyfill库来提供兼容性支持。此外，在需要使用某些浏览器专属特性时，可以通过添加浏览器前缀（如-webkit-、-moz-、-ms-等）来确保兼容性。

  4. 遵循HTML语义和结构：在编写HTML代码时，应该遵循HTML的语义和结构，以便在不同的浏览器和设备上实现最佳的兼容性。例如，使用<header>、<nav>、<article>等语义元素来构建页面结构。

  5. 测试页面在不同浏览器和设备上的显示效果：在发布页面前，确保在不同浏览器和设备上进行充分的测试，以发现和解决可能出现的兼容性问题。

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

2、HTML5元素

2.1新增的结构元素

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

  1. <header>：定义页面的头部信息，通常包含页眉、logo、导航等。

  2. <nav>：定义导航链接，用于包含主导航、子导航等内容。

  3. <article>：定义一篇独立的文章，可以是博客文章、新闻报道等。

  4. <section>：定义页面的一个区块，通常包含一个内容区域，如章节、标签页等。

  5. <aside>：定义页面的侧边栏内容，如广告、相关链接等。

  6. <footer>：定义页面的底部信息，通常包含页脚、版权信息等。

  7. <figure>：定义一组媒体内容（如图像、图表、视频等）及其标题。

  8. <figcaption>：定义<figure>元素的标题。

  9. <mark>：定义需要突出显示的文本。

  10. <progress>：定义进度条。

  11. <meter>：定义度量衡，如温度、百分比等。

  12. <time>：定义日期和时间。

  13. <dialog>：定义对话框或窗口。

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

2.2HTML5新增功能元素

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

  1. <canvas>：定义画布，用于绘制图形、图标和其他视觉元素。

  2. <svg>：定义可缩放矢量图形，用于创建分辨率独立的矢量图形。

  3. <audio>：定义音频内容，如音乐或声音特效。

  4. <video>：定义视频内容。

  5. <source>：定义多媒体资源，如<audio>和<video>元素的来源。

  6. <embed>：定义嵌入的内容，如插件、第三方应用等。

  7. <iframe>：定义内嵌的文档，如嵌套的网页或应用程序。

  8. <form>：定义表单，用于收集用户输入。HTML5对表单元素进行了许多改进，如新增<input type="email">、<input type="url">等类型，以及验证和表单控件。

  9. <datalist>：定义选项列表，为<input>元素提供建议值的来源。

  10. <output>：定义计算结果，通常与<form>元素配合使用。

  11. <meter>：定义度量衡，如温度、百分比等。

  12. <progress>：定义进度条。

  13. <details>：定义额外的细节信息，用户可以通过单击展开或折叠。

  14. <summary>：定义<details>元素的标题。

  15. <command>：定义命令按钮，如单选按钮、复选框等。

  16. <menu>：定义上下文菜单，如右键菜单。

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

2.3HTML5废除的元素

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

  1. basefont：定义基本字体颜色、大小和样式。由于样式可以通过CSS更好地控制，这个元素被废弃。

  2. big：定义重要文本。这个元素被废弃，因为HTML5建议使用<strong>或<em>元素来表示重要性。

  3. center：定义居中文本。由于样式可以通过CSS更好地控制，这个元素被废弃。

  4. font：定义字体、颜色和尺寸。由于样式可以通过CSS更好地控制，这个元素被废弃。

  5. frame、frameset和noframes：用于框架集（frame set）的元素。随着Ajax、JavaScript和CSS技术的发展，框架集逐渐被淘汰，这些元素也被废弃。

  6. acronym：定义首字母缩写词。这个元素被废弃，因为HTML5建议使用<abbr>元素，并使用title属性来提供全称。

  7. applet：定义Java applet。由于Java applet存在安全问题，并在现代网页中逐渐被淘汰，这个元素被废弃。

  8. dir：定义目录列表。这个元素被废弃，因为HTML5建议使用<ul>、<li>等元素创建列表。

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

3、HTML5对象属性

3.1表单属性

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

  1. autocomplete：设置表单元素的自动完成功能。可取值为on（默认）或off，用于启用或禁用自动完成功能。

  2. autofocus：设置表单元素在页面加载时自动获得焦点。可取值为autofocus，用于指定元素自动获得焦点。

  3. form：指定表单元素所属的表单。其值必须是一个表单ID，用于将元素与特定的表单关联。

  4. required：指示表单元素是否为必填项。可取值为required，表示该元素为必填项。

  5. pattern：指定一个正则表达式，用于验证表单元素的值。当用户提交表单时，浏览器将根据此正则表达式进行验证。

  6. maxlength和minlength：设置表单元素最大和最小长度（以字符为单位）。

  7. max和min：设置表单元素的最大值和最小值。适用于诸如数字、日期和时间等元素。

  8. step：设置表单元素的递增或递减步长。适用于诸如数字、日期和时间等元素。

  9. placeholder：设置表单元素的占位符文本。在用户输入值之前，占位符文本将显示在表单元素中。

  10. multiple：允许用户选择多个值。适用于诸如电子邮件、电话号码和多选按钮等元素。

  11. dirname：指定文件输入元素的目录。适用于文件输入（<input type="file">）元素。

  12. disabled：禁用表单元素。可取值为disabled，表示元素被禁用。

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

3.2链接属性

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

  1. href：定义链接的目标URL。这是链接元素的核心属性，其值可以是绝对URL或相对URL。

  2. target：指定链接打开的位置。可取值为：

    • _self（默认）：在当前窗口或标签中打开链接。
    • _blank：在新窗口或标签中打开链接。
    • _parent：在父窗口或标签中打开链接。
    • _top：在整个窗口中打开链接，并替换当前页面。

    如果需要更多关于target属性的信息，请查阅HTML 5.2 规范。

  3. rel：定义链接关系。可取值为：

    • alternate：表示链接指向页面的替代版本（如打印版、翻译版等）。
    • author：表示链接指向该网页作者的页面。
    • bookmark：表示链接指向该网页的书签。
    • help：表示链接指向与页面内容相关的帮助信息。
    • license：表示链接指向该网页的版权信息。
    • next：表示链接指向一系列文档中的下一个文档。
    • prev：表示链接指向一系列文档中的上一个文档。
    • nofollow：表示链接不应被计算在搜索引擎排名中。
    • noopener：表示在新窗口或标签中打开链接时，不应继承打开它的窗口或标签的Window对象。
    • noreferrer：表示在新窗口或标签中打开链接时，不应发送Referer头部信息。

    其他可能的值包括tag、icon、pingback等。如需更完整的列表，请查阅MDN Web Docs。

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

3.3其他属性

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

  1. accesskey：定义访问键，允许用户使用键盘快捷键来聚焦元素。

  2. autocapitalize：控制元素是否自动大写。可取值为on（默认）、off和none。

  3. hidden：指示元素是否可见。可取值为hidden，表示元素不可见。

  4. id：定义元素的唯一ID，用于标识元素。

  5. lang：定义元素内容的语言。有助于提高页面的可访问性，以及帮助搜索引擎更好地理解页面内容。

  6. spellcheck：指示浏览器是否对元素内容进行拼写检查。可取值为true（默认）或false。

  7. style：定义元素的内联样式。

  8. tabindex：定义元素的Tab键导航顺序。可使用正整数、零或负整数。

  9. title：定义元素相关的建议信息。屏幕阅读器会读取这些信息，有助于提高页面的可访问性。

  10. translate：指示浏览器是否翻译元素内容。可取值为yes（默认）或no。

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

3.4废除的属性

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

  1. align：定义元素对齐方式。由于CSS能够更好地控制对齐方式，这个属性被废弃。

  2. frameborder：定义框架集边框。随着框架集逐渐被淘汰，这个属性被废弃。

  3. marginheight和marginwidth：定义元素margin的高度和宽度。由于CSS能够更好地控制 margin，这两个属性被废弃。

  4. nohref：指示链接不作为链接。由于这个功能可以通过将链接的href属性设置为javascript:void(0);来实现，所以这个属性被废弃。

  5. profile：定义链接的目标URL。由于这个功能可以通过将链接的rel属性设置为external nofollow来实现，所以这个属性被废弃。

  6. rev：定义链接的关系。由于这个功能可以通过将链接的rel属性设置为nofollow external来实现，所以这个属性被废弃。

  7. rules：定义表格的边框规则。由于CSS能够更好地控制边框规则，这个属性被废弃。

  8. 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文档结构包括以下几个部分：

  1. <!DOCTYPE html>：声明文档类型为HTML5。
  2. <html>：根元素，包含整个HTML页面的内容。
  3. <head>：包含页面的元数据，如字符编码、标题、CSS样式和JavaScript代码等。
  4. <title>：定义网页标题，显示在浏览器的标签页上。
  5. <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;
}

关注

不被定义的~wolf
关注
  • 10
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
html5毕业设计程序,网页毕业设计制作流程
weixin_34593328的博客
06-08 4490
一，确定主题二，做好结构规划(板块)三，收集素材，(文字、图片、视频，声音等素材)四，安装好Dreamweaver，软件对网页进行设计制作。本设计使用Dreamweaver cs5软件建立的网站、Photoshop图片处理、flash动画设计辅助完成(利用所学知识对网页进行设计)制作过程1、在自已电脑中新建一个文件夹(自定义命名)，做为站点如下图，文件夹根目录下再建一个名为一个为images的文件...
HTML5设计注册/登录界面
m0_62101200的博客
06-25 2万+
因为我们注册或者登录时是需要提交信息给后台的，所以需要用到表单form标签 span标签是一个基本的文本标签 如果需要登录是要点登录进行页面跳转的，所以我们需要使用a标签进行网址跳转 input标签也就是需要用户进行自行输入信息，并且可以通过type属性进行指定输入文本框的类型，比如我们输入密码时需要进行屏蔽，因而可以设置password属性，在输入密码期间可以不显示具体文本，达到隐私隐藏效果 设置按钮需要用到button标签，其实也可以用input标签，然后设置属性为button，也可以达到同样的
设计HTML5文本
码说芯语的博客
08-13 718
一文读懂HTML5文本！
HTML5网页列表与段落设计
FOR.GET
09-16 2015
1 网页文字列表设计 1.1 建立无序列表<ul>   无序列表相当于markdown语法的-、*、+表示的项目符号，没有顺序，没有顺序，只把符号作为分项标识。无序列表使用标记<ul>，其中每一个列表项用<li>。在无序列表结构中，用<ul></ul>表示这一个列表的开始和结束，<li>表示一个列表的开始。在一个无序列表中可以包含多个列表项，<li>标记可以省略结束标记。 <!DOCTYPE html> <
HTML5基础
wkk的博客
12-23 1197
HTML是HyperText Markup Language(超文本标记语言)的缩写，用于创建网页的标准标记语言。HTML使用标记标签来描述网页，由浏览器来解析，即使用HTML来建立Web站点，通过Web浏览器读取HTML文档，并以网页的形式显示出来。HTML5是HTML最新的修订版本。任何一个网页都是由一行行的HTML代码编写而成。HTML5除了本身的标记外，广义上还包含CSS3 与 JavaScript。HTML5的特点头部只需要写、、
一个简单的网页设计HTML5作业
热门推荐
好好读书
06-26 9万+
简单的html设计作业，初次学习，希望指正！
HTML5网页设计
WeiQi_wq的博客
03-12 2568
第一章：HTML5基础 一、HTML5基础 定义：www.world wide web 万维网 互联网：将全局所有电脑组成一个网络，进行数据交互。 组成：url 统一资源定位器（网址、域名、IP地址） http：超文本传输协议 html：hyper text language 超文本标记语言 流程：A某将自己开发的HTML文件发布到自己部署的服务器中，B某通过自己的客户端电脑，使用http协议，输入A某服务器的url地址，最终找到相应的电脑，请求到对应的HTML文件，返回到B某的电脑中，在浏览
HTML5——设计一个表单
万里顾一程的博客
11-02 3914
HTML5——设计一个表单 post和get提交 get方式提交：提交后可以在url中看到我们填写的信息（账号，密码等），会不安全，但是高效，不能传输大文件 post方式提交：不能看到我们填写的信息，比较安全，也可以传输大文件 要素 文本框 单选框和多选框 按钮 文本域和文件域 搜索滑框和简单验证 初级验证 <!DOCTYPE html> <html lang="en"> <head> <meta c
HTML5网页设计 （一）
qq_55492940的博客
04-27 7173
初始HTML5 记事本简单实现HTML5页面
html5页面设计报告书,网站设计报告模板.docx
weixin_33101399的博客
06-05 3874
网站设计报告模板网站设计报告模板篇一：《网页设计》课程报告模板 　　《网页设计》课程报告 　　学 号: 专 业: 姓 名: 题 目: 设 计 时 间: 　　电子信息与计算机工程系 　　XX年11月 　　目 录 　　一、设计目的 .............................................................................
关于HTML5的课程设计
01-09
在这个"关于HTML5的课程设计"中，我们可以看到学生或教师利用HTML5技术来构建一个静态网站，旨在展示其对这一关键技术的理解和应用能力。 首先，"课程设计项目文档.docx"可能包含了项目的详细概述，包括项目目标、...
卡通人物设计html5网站模板
04-08
【标题】：“卡通人物设计html5网站模板” 在网页设计领域，HTML5作为一种现代的标记语言，已经成为构建交互式和动态网站的首选工具。"卡通人物设计html5网站模板"是一个专门为展示卡通人物设计而定制的网站框架。...
HTML5课程设计
01-03
HTML5课程设计是一个涵盖网页开发基础到高级应用的实践项目，旨在帮助学习者掌握现代Web开发的核心技术。在这个课程设计中，学生将深入理解HTML5、CSS和JSP（JavaServer Pages）等关键技术，通过实际操作提升自己的...
AXIOM 测试版硬件_HTML_代码_设计_文档_相关文件_下载
07-05
此存储库包含与 AXIOM Beta 硬件相关的所有信息和文件。...它被设计成模块化的，例如可互换的传感器前端等，并支持以 4K 分辨率录制。 相机结构介绍。 更多详情、使用方法，请下载后阅读README.md文件
基于Javascript的HTML5 FLV Player设计源码
05-31
HTML5 FLV Player项目源码，共63个文件，采用Javascript、TypeScript、HTML和CSS等语言开发，涉及多种文件类型如JavaScript源代码、Markdown文档、JSON配置文件、TypeScript源代码、Babel配置文件、ESLint忽略文件、...
Ajax是什么？如何在HTML5中使用Ajax？
m0_70066267的博客
07-16 1974
Ajax，全称Asynchronous Javascript And XML（异步JavaScript和XML），是一种创建交互式网页应用的网页开发技术。它允许网页在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页内容。这种技术极大地提升了用户体验，减少了数据传输量，并节省了网络带宽。Ajax并非一种新的编程语言，而是一种基于现有标准的技术，主要依赖于JavaScript和XMLHttpRequest对象来实现。：这是Ajax技术的核心，用于与服务器进行异步通信。
html5——CSS列表样式属性
jiuyuexixi的博客
07-16 232
html5——CSS列表样式属性
【Web前端技术 01】 探索HTML5的奥秘：为初学者打造网页的基石
Wc&Yd博客
07-16 900
探索HTML5奥秘，本文带初学者迈入网页设计大门。详解HTML5文档结构、语义化标签、新增API，助您构建现代网页，激发学习兴趣，开启开发之旅。
HTML5应用的安全防护策略与实践
最新发布
@云安全小杜
07-17 410
随着HTML5及其相关技术（如CSS3和JavaScript）的普及，Web应用变得越来越强大和复杂，同时也成为黑客攻击的目标。本文将探讨HTML5应用面临的常见安全威胁，以及如何通过最佳实践和代码示例来增强应用的安全性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

不被定义的~wolf

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值