HTML5教程

HTML_13——网络架构

本文主要是介绍HTML_13——网络架构，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

1. 前言

每个HTML元素其实都是一个方框的形式呈现,在HTML5之前大多是以div元素划分区块，这些显得会比较乱，所以在HTML5中规定了更加清晰地网络架构，增强了语义性

2. div元素

<div> 标签定义 HTML 文档中的分隔（division）或部分（section）。
<div> 标签常用于组合块级元素，以便通过样式表来对这些元素进行格式化。

2.1 实例

<!DOCTYPE html>
<html>
    <body>

        <h1>NEWS WEBSITE</h1>
         <p>some text. some text. some text...</p>
         ...
       
        <div class="news">
         <h2>News headline 1</h2>
         <p>some text. some text. some text...</p>
         ...
        </div>
       
        <div class="news">
         <h2>News headline 2</h2>
         <p>some text. some text. some text...</p>
         ...
        </div>
       
        ...
       </body>
</html>

image-20210820024316689

3. 新语义元素

3.1 HTML5 常用语义元素

许多网站包含了指示导航、页眉以及页脚的 HTML 代码，例如这些：

<div id="nav"> <div class="header"> <div id="footer">。

HTML5 提供了定义页面不同部分的新语义元素：

<article>
<aside>
<details>
<figcaption>
<figure>
<footer>
<header>
<main>
<mark>
<nav>
<section>
<summary>
<time>

HTML5 语义元素

标签 描述
<article> 定义文章。
<aside> 定义页面内容以外的内容。
<details> 定义用户能够查看或隐藏的额外细节。
<figcaption> 定义 <figure> 元素的标题。
<figure> 规定自包含内容，比如图示、图表、照片、代码清单等。
<footer> 定义文档或节的页脚。
<header> 规定文档或节的页眉。
<main> 规定文档的主内容。
<mark> 定义重要的或强调的文本。
<nav> 定义导航链接。
<section> 定义文档中的节。
<summary> 定义 <details> 元素的可见标题。
<time> 定义日期/时间。
... ...

3.2 <header> 元素

3.2.1 定义

<header> 元素为文档或节规定页眉。

<header> 元素应该被用作介绍性内容的容器。

一个文档中可以有多个 <header> 元素。

3.2.2 实例

下例为一篇文章定义了页眉：

<!DOCTYPE html>
<html>
<body>

<article>
<header>
<h1>What Does WWF Do?</h1>
<p>WWF's mission:</p>
</header>
<p>WWF's mission is to stop the degradation of our planet's natural environment, and build a future in which humans live in harmony with nature.</p>
</article>

</body>
</html>

image-20210820024721054

3.3 HTML5 <nav> 元素

3.3.1 定义

<nav> 元素定义导航链接集合。

<nav> 元素旨在定义大型的导航链接块。不过，并非文档中所有链接都应该位于 <nav> 元素中！

3.3.2 实例

<!DOCTYPE html>
<html>
<body>

<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>

</body>
</html>

image-20210820145826342

3.4 <section> 元素

3.4.1定义

<section> 元素定义文档中的节。

根据 W3C 的 HTML 文献：“节（section）是有主题的内容组，通常具有标题”。

可以将网站首页划分为简介、内容、联系信息等节。

3.4.2实例

<!DOCTYPE html>
<html>
<body>

<section>
<h1>WWF</h1>
<p>
The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.
</p>
</section>

<section>
<h1>WWF's Panda symbol</h1>
<p>
The Panda has become the symbol of WWF. The well-known panda logo of WWF originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same year of the establishment of WWF.
</p>
</section>

</body>
</html>

image-20210820024519599

3.5 <article> 元素

3.5.1 定义

<article> 元素规定独立的自包含内容。

文档有其自身的意义，并且可以独立于网站其他内容进行阅读。

<article> 元素的应用场景：

  • 论坛
  • 博客
  • 新闻

3.5.2 实例

<!DOCTYPE html>
<html>
<body>

<article>
  <h1>What Does WWF Do?</h1>
  <p>WWF's mission is to stop the degradation of our planet's natural environment, and build a future in which humans live in harmony with nature.</p>
</article>

</body>
</html>

image-20210820024608378

3.6 <aside> 元素

3.6.1 定义

<aside> 元素页面主内容之外的某些内容（比如侧栏）。

aside 内容应该与周围内容相关。

3.6.2 实例

<!DOCTYPE html>
<html>
<body>

<p>My family and I visited The Epcot center this summer.</p>

<aside>
<h4>Epcot Center</h4>
<p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>

</body>
</html>

image-20210820150854407

3.7 <figure>和 <figcaption>元素

3.7.1 定义

在书籍和报纸中，与图片搭配的标题很常见。

标题（caption）的作用是为图片添加可见的解释。

通过 HTML5，图片和标题能够被组合在 *<figure>* 元素中：

3.7.2 实例

<!DOCTYPE html>
<html>
<body>

<p>The Pulpit Rock is a massive cliff 604 metres (1982 feet) above Lysefjorden, opposite the Kjerag plateau, in Forsand, Ryfylke, Norway. The top of the cliff is approximately 25 by 25 metres (82 by 82 feet) square and almost flat, and is a famous tourist attraction in Norway.</p>

<figure>
  <img src="https://img11.51tietu.net/pic/2016-071418/20160714181543xyu10ukncwf221991.jpg" alt="The Pulpit Rock" width="304" height="228">
  <figcaption>image_1.</figcaption>
</figure>

</body>
</html>

image-20210820150439273

3.8.1 定义

<footer> 元素为文档或节规定页脚。

<footer> 元素应该提供有关其包含元素的信息。

页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等。

您可以在一个文档中使用多个

元素。

3.8.2 实例

<!DOCTYPE html>
<html>
<body>

<footer>
  <p>Posted by: Hege Refsnes</p>
  <p>Contact information: <a href="mailto:someone@example.com">
  someone@example.com</a>.</p>
</footer>

</body>
</html>

image-20210820024749300

3.9 拓展

map元素和area元素

4. 参考

HTML5 语义元素

这篇关于HTML_13——网络架构的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航