html容器标签

容器标签 (Container tags)

HTML provides a set of container tags. Those tags can contain an unspecified set of other tags.

HTML提供了一组容器标记。 这些标签可以包含一组未指定的其他标签。

We have:

我们有：

  • article

    article

  • section

    section

  • div

    div

and it can be confusing to understand the difference between them.

理解它们之间的差异可能会造成混淆。

Let’s see when to use each one of them.

让我们看看何时使用它们中的每一个。

article (article)

The article tag identifies a thing that can be independent from other things in a page.

商品标签标识，可以是独立于页面其他东西的事情 。

For example a list of blog posts in the homepage.

例如，主页中的博客文章列表。

Or a list of links.

或链接列表。 

<div>
	<article>
		<h2>A blog post</h2>
		<a ...>Read more</a>
	</article>
	<article>
		<h2>Another blog post</h2>
		<a ...>Read more</a>
	</article>
</div>

We’re not limited to lists: an article can be the main element in a page.

我们不仅限于列表：文章可以是页面中的主要元素。 

<article>
	<h2>A blog post</h2>
	<p>Here is the content...</p>
</article>

Inside an article tag we should have a title (h1-h6) and

内部article标签，我们应该有一个标题( h1 - h6 )和

section (section)

Represents a section of a document. Each section has a heading tag (h1-h6), then the section body.

代表文档的一部分。 每个节都有一个标题标签( h1 - h6 )，然后是节正文 。

Example:

例： 

<section>
	<h2>A section of the page</h2>
	<p>...</p>
	<img ... />
</section>

It’s useful to break a long article into different sections.

将较长的文章分成不同的部分很有用。

Shouldn’t be used as a generic container element. div is made for this.

不应用作通用容器元素。 div是为此而设计的。

div (div)

div is the generic container element:

div是通用容器元素： 

<div>
	...
</div>

You often add a class or id attribute to this element, to allow it to be styled using CSS.

您经常向该元素添加class或id属性，以允许使用CSS设置其样式。

We use div in any place where we need a container but the existing tags are not suited.

我们在需要容器的任何地方使用div ，但现有标签不合适。

与页面相关的标签 (Tags related to page)

This tag is used to create the markup that defines the page navigation. Into this we typically add an ul or ol list:

此标记用于创建定义页面导航的标记。 通常，向其中添加一个ul或ol列表： 

<nav>
	<ol>
		<li><a href="/">Home</a></li>
		<li><a href="/blog">Blog</a></li>
	</ol>
</nav>

aside (aside)

The aside tag is used to add a piece of content that is related to the main content.

aside标签用于添加与主要内容相关的内容。

A box where to add a quote, for example. Or a sidebar.

例如，在其中添加引号的框。 或侧边栏。

Example:

例： 

<div>
  <p>some text..</p>
  <aside>
    <p>A quote..</p>
  </aside>
  <p>other text...</p>
</div>

Using aside is a signal that the things it contains are not part of the regular flow of the section it lives into.

使用aside表示它包含的内容不是它所在的部分的常规流程的一部分。

The header tag represents a part of the page that is the introduction. It can for example contain one or more heading tag (h1-h6), the tagline for the article, an image.

header标记表示页面的一部分，即简介。 例如，它可以包含一个或多个标题标签( h1 - h6 )，商品的标语，图像。 

<article>
  <header>
	  <h1>Article title</h1>
  </header>
  ...
</article>

main (main)

The main tag represents the main part of a page:

main标签代表页面的主要部分： 

<body>
  ....
  <main>
    <p>....</p>
  </main>
</body>

The footer tag is used to determine the footer of an article, or the footer of the page:

footer标记用于确定文章的页脚或页面的页脚： 

<article>
 ....
	<footer>
    <p>Footer notes..</p>
  </footer>
</article>

翻译自: https://flaviocopes.com/html-container-tags/

html容器标签

# python # css # html # java
Logo
向您推荐>>Eolink开发者社区

权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区

更多推荐

ELK实现containerd的容器日志采集展示【基于logging的全栈监测】

企业级ELK Stack构建介绍

avatar 云原生

深入理解 Mocha 测试框架：从零实现一个 Mocha

前言什么是自动化测试自动化测试在很多团队中都是Devops环节中很难执行起来的一个环节，主要原因在于测试代码的编写工作很难抽象，99%的场景都需要和业务强绑定，而且写测试代码的编写工作量往往比编写实际业务代码的工作量更多。在一些很多业务场景中投入产出比很低，适合写自动化测试的应该是那些中长期业务以及一些诸如组件一样的基础库。自动化测试是个比较大的概念，其中分类也比较多，比如单元测试，端对端测试，集

avatar 云原生

(20200916 Solved)docker-compose up创建容器自动退出

问题描述如题，创建容器后自动退出了。并且docker start container无效解决方案原因是缺失了控制终端的配置，需要在docker-compose.yml中增加tty:true ，有时候这样也不行，需要再增加一个command:/bin/bash，命令不一定是这个，需要是一个不会退出的命令，然后用-d后台启动容器。Referencesdocker-compose启动容器后自动退出...

avatar 云原生