【html学习笔记26】-语义元素

2023-09-11 本文已影响0人兔小小

什么是语义元素？

语义元素清楚地向浏览器和开发人员描述了它的含义。

非语义元素的示例：<div>和 <span> 不说明其内容。

语义元素的示例：<form>、 <table>和 <article> 明确定义其内容。

HTML 中的语义元素

许多网站包含HTML代码，例如： <div id=“nav”> <div class=“header”> <div id=“footer”>以指示导航、页眉和页脚。

在HTML中，有一些语义元素可用于定义网页的不同部分：

HTML <section>元素

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

根据W3C的HTML文档：section是内容的主题分组，通常带有标题。

下面的例子可以使用元素<section>：

章
介绍
新闻项目
联系信息

一个网页通常可以分成几个部分：介绍，内容和联系信息。

<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>

不用section标题会大一点。

HTML <article>元素

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

下面的例子可以使用元素<article>：

论坛帖子
博客文章
用户评论
产品卡
报纸文章

<article>
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p>
</article>

<article>
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.</p>
</article>

<article>
<h2>Microsoft Edge</h2>
<p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p>
</article>

使用 CSS 设置<文章>元素的样式：

<html>
<head>
<style>
.all-browsers {
  margin: 0;
  padding: 5px;
  background-color: lightgray;
}

.all-browsers > h1, .browser {
  margin: 10px;
  padding: 5px;
}

.browser {
  background: white;
}

.browser > h2, p {
  margin: 4px;
  font-size: 90%;
}
</style>
</head>
<body>

<article class="all-browsers">
  <h1>Most Popular Browsers</h1>
  <article class="browser">
    <h2>Google Chrome</h2>
    <p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p>
  </article>
  <article class="browser">
    <h2>Mozilla Firefox</h2>
    <p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.</p>
  </article>
  <article class="browser">
    <h2>Microsoft Edge</h2>
    <p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p>
  </article>
</article>

</body>
</html>

可以使用<section>嵌套<article>，反过来也是一样的。

HTML <header> 元素

<header>元素表示介绍性内容的容器或一组导航链接。

下面的例子可以使用元素<header>

一个或多个标题元素（<H1> - <H6>）
徽标或图标
作者身份信息

<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>

HTML <footer>元素

<footer>元素定义文档或节的页脚。

下面的例子可以使用元素<footer>

作者身份信息
版权信息
联系信息
网站地图
返回顶部链接
相关文档

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

<footer>
  <p>Author: Hege Refsnes</p>
  <p><a href="mailto:hege@example.com">hege@example.com</a></p>
</footer>

HTML <nav> 元素

<nav>元素定义一组导航链接。

请注意，并非文档的所有链接都应位于元素<nav>内。该<nav>元素仅适用于导航链接的主要块。

浏览器（如残疾用户的屏幕阅读器）可以使用此元素以确定是否省略此内容的初始呈现。

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

HTML <aside>元素

元素<aside>定义了除其内容之外的一些内容放置的地方（如侧边栏）。

<aside>内容应为与周围内容间接相关。

<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>

<aside>
<h4>Epcot Center</h4>
<p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</aside>

image.png

可以使用样式表

···html
<html>
<head>
<style> aside { width: 30%;
padding-left: 15px;
margin-left: 15px;
float: right;
font-style: italic;
background-color: lightgray; } </style>
</head>
<body>

<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>

<aside>
<p>The Epcot center is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</aside>

<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>
<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>

</body>
</html>


![](https://img.haomeiwen.com/i21922576/4126ac3855972efd.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

# HTML <figure> 和 <figcaption> 元素

`<figure>`标记指定自包含的内容，如插图、图表、照片、代码清单等。

`<figcaption>`标记定义元素`<figure>`的标题。`<figcaption>`元素可以作为`<figure>`元素第一个或最后一个子元素。

`<img>`元素定义实际的图像/插图。
```html
<figure>
  <img src="pic_trulli.jpg" alt="Trulli">
  <figcaption>Fig1. - Trulli, Puglia, Italy.</figcaption>
</figure>