`

HTML 5 新特性--语义化新标签<footer> &<header>

html5headerfooter 
阅读更多

<header> 标签定义文档的页眉（介绍信息）。
与<head>相同，<header>也旨在提供一些介绍性信息（如标题、副标题或logo），但是这两个标签的作用域不同。虽然<head>标签能够提供关于整个文档的信息，但是<header>仅用于正文或正文中的节。

<footer> 标签
用法：定义文档或节的页脚。
在典型情况下，页脚通常包含文档的作者、版权信息、文档的创作日期、使用条款链接、联系信息等。
可以在一个文档中使用多个 <footer> 元素。 

<!DOCTYPE HTML>
<html>
  <body>
    <header>
      <h1>Welcome to my homepage，i‘m header</h1>
      <p>My name is wjy</p>
    </header>
    <footer>
          <div class="tags">
		<p>Author：wjy</p>
	 </div>
	 <div class="message">
		<a href="">联系我们</a> 
	 </div>
     </footer>
  </body>
</html>
分享到：
| css的定位与文档流
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    如何避免常见的6种HTML5错误用法

    【HTML5错误用法详解与避免策略】 在HTML5中，新引入的语义化标签大大增强了网页的可读性和可访问性。...在编写HTML5代码时，时刻记住，语义化是核心，合理利用新标签和属性，能让网页更加强大、易用且无障碍。

    六种常见的HTML5写法误用

    `&lt;header&gt;`和`&lt;hgroup&gt;`这两个元素在HTML5中也有特定的用途，它们不应该被随意使用或滥用。`&lt;header&gt;`元素用于包含一组介绍性或导航性的辅助内容，而`&lt;hgroup&gt;`则用于将一组标题元素组合在一起，形成一个更复杂的...

    Web前端基础：HTML5语义化标签.pptx

    HTML5 是一种重要的前端技术，它为Web开发者提供了许多新的特性和改进，其中包括语义化标签的引入。这些标签的设计目的是增强网页内容的结构和意义，使得内容在没有CSS样式的情况下也能保持良好的逻辑结构，同时方便...

    HTML5新语义

    &lt;h1&gt;这是HTML5&lt;/h1&gt; &lt;p&gt;header&lt;/p&gt; &lt;/header&gt; ``` - **用途**: 可以用于页面的顶部，包含导航菜单、标题等内容。 #### 三、Footer元素 - **定义**: `&lt;footer&gt;` 元素用来定义文档或页面的底部信息，如版权声明、...

    header 标签使用说明.docx

    - **语义化**：相比于 HTML4.01，HTML5 更加强调语义化，通过使用像 `&lt;header&gt;` 这样的结构化标签来提高网页内容的可读性和易理解性。 #### 七、全局属性 `&lt;header&gt;` 标签支持 HTML 的全局属性，这些属性适用于...

    10分钟自学HTML5

    - **语义化标签**：如`&lt;header&gt;`、`&lt;footer&gt;`、`&lt;article&gt;`等，使页面结构更加清晰，有利于搜索引擎优化。 - **多媒体支持**：通过`&lt;video&gt;`和`&lt;audio&gt;`标签直接在网页中嵌入视频和音频文件，无需第三方插件。 - ...

    Web-前端html+css从入门到精通 123. HTML5新语义化标签（1）.zip

    HTML5引入的新语义化标签，如&lt;header&gt;, &lt;nav&gt;, &lt;article&gt;, &lt;section&gt;, &lt;aside&gt;, &lt;footer&gt;等，旨在改善这一点，让代码更具描述性，更容易被搜索引擎理解和屏幕阅读器解析。 1. `&lt;header&gt;`：这个标签用于定义页面或...

    从零开始构建HTML 5 Web页面

    通过使用 `&lt;header&gt;`、`&lt;nav&gt;`、`&lt;section&gt;`、`&lt;article&gt;`、`&lt;aside&gt;` 和 `&lt;footer&gt;` 等标签，开发者可以构建出更加清晰、结构化的 Web 页面。虽然一些高级功能可能暂时受到浏览器支持的限制，但随着技术的发展，...

    html5 语义化标签.pdf

    随着HTML5的出现，一系列新的语义化标签应运而生，如`&lt;header&gt;`、`&lt;footer&gt;`、`&lt;hgroup&gt;`、`&lt;nav&gt;`和`&lt;aside&gt;`等。 `&lt;header&gt;`元素用于表示网页或section的页眉，可以包含`&lt;h1&gt;`到`&lt;h6&gt;`的标题元素，以及导航、搜索...

    html5标签整理

    #### 二、按字母顺序排列的新标签 在HTML5中，新增了一些标签以适应现代网页的需求，这些标签包括： - `&lt;article&gt;`：用于表示文档、页面或应用中的独立内容块。 - `&lt;aside&gt;`：用于表示与页面主要内容相关的辅助...

    html上下固定中间自适应div+css布局

    在网页设计中，HTML5引入了新的语义化标签，如`&lt;header&gt;`、`&lt;footer&gt;`、`&lt;nav&gt;`和`&lt;section&gt;`，这些标签为网页内容提供了更清晰的结构，增强了网页的可读性和可访问性。本文将详细探讨如何使用这些标签以及CSS来实现...

    管理员网页详细代码（只有HTML）

    HTML5引入了一些新的语义元素，如`&lt;header&gt;`、`&lt;footer&gt;`、`&lt;main&gt;`、`&lt;aside&gt;`等，用于更好地组织页面内容和布局。例如： ```html &lt;body&gt; &lt;header&gt; &lt;!-- 网页头部内容 --&gt; &lt;/header&gt; &lt;main&gt; &lt;!-- 主要内容...

    html标签介绍大全

    HTML5引入了更多语义化的标签，如&lt;header&gt;、&lt;footer&gt;、&lt;article&gt;、&lt;section&gt;、&lt;aside&gt;、&lt;details&gt;、&lt;summary&gt;等，以提高网页内容的可读性和可访问性。 以上就是HTML标签的基本介绍，通过熟练掌握这些标签及其用法，...

    HTML5+CSS3 HTML5结构性标签体系.pdf

    &lt;li&gt;&lt;a href="#"&gt;HTML 5&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;CSS&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;JavaScript&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/nav&gt; &lt;/header&gt; &lt;main&gt; &lt;article&gt; &lt;p&gt;这是一篇讲述 HTML 5 新结构标签的文章。&lt;/p&gt; &lt;/...

    HTML5的革新 结构之美

    &lt;li&gt;HTML 5&lt;/li&gt; &lt;li&gt;CSS&lt;/li&gt; &lt;li&gt;JavaScript&lt;/li&gt; &lt;/ul&gt; &lt;/nav&gt; &lt;/header&gt; &lt;main&gt; &lt;section&gt; &lt;article&gt; &lt;p&gt;这是关于HTML 5新结构标签的文章。&lt;/p&gt; &lt;/article&gt; &lt;article&gt; &lt;p&gt;这仍然是关于HTML 5新结构...

    HTML5教程 常用标签使用说明

    1. **语义化标签**：HTML5中新增了许多语义化的标签，如`&lt;article&gt;`、`&lt;section&gt;`、`&lt;header&gt;`、`&lt;footer&gt;`等，这些标签使得网页结构更加清晰易懂。 2. **多媒体支持**：通过`&lt;video&gt;`和`&lt;audio&gt;`标签可以直接在网页...

    Web-前端html+css从入门到精通 124 HTML5新语义化标签（2）.zip

    HTML5引入了一系列新的语义化标签，如&lt;header&gt;、&lt;nav&gt;、&lt;main&gt;、&lt;article&gt;、&lt;section&gt;、&lt;aside&gt;和&lt;footer&gt;等，它们为网页内容赋予了更明确的意义，帮助搜索引擎更好地理解页面结构，同时提高了屏幕阅读器和辅助技术...

    html5最简单的例子

    &lt;p&gt;HTML5是新一代的HTML标准...&lt;/p&gt; &lt;/article&gt; &lt;/main&gt; &lt;footer&gt; &lt;p&gt;版权所有 &copy; 2022 我的网站&lt;/p&gt; &lt;/footer&gt; &lt;/body&gt; ``` 这里，`&lt;header&gt;`包含网站标题，`&lt;nav&gt;`用于导航菜单，`&lt;main&gt;`是主要内容...

Magicbox
Global site tag (gtag.js) - Google Analytics