Html5新元素-html教程-PHP中文网

十大 HTML5 新元素

10. <summary>

Conclusion

首页

web前端

html教程

Html5新元素

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 04, 2024 pm 04:36 PM

html html5 HTML Tutorial HTML Properties HTML tags

HTML5是HTML 4.01版本的全新升级，具有许多新特性、高级功能特性、更好的页面浏览量以及许多其他改进，以满足不断增长的技术需求。 HTML5 最常用和最需要的元素是

、

、、

Html5新元素

十大 HTML5 新元素

HTML5 提供了新元素来增强文档的布局。

1.

;元素指定页面的一部分，其中包括文档、部分或网站中的单独结构，建议广泛分发或使用。这可以是群组帖子、期刊或日报报告、在线时事通讯的提交、客户发送的评论或任何其他不含物质的对象。

示例：

<!DOCTYPE html>
<html>
<head>
<title>Article Element</title>
</head>
<body>
<article>
<h2>EDUCBA</h2>
<p>EDUCBA (Corporate Bridge Consultancy Pvt Ltd) is a leading global provider of skill based education addressing the needs 500,000+ members across 40+ Countries. </p>
</article>
</body>
</html>

登录后复制

输出：

将上述代码保存在扩展名为 .html 的文件中。
在浏览器中运行html文件，您将得到下图所示的输出。

Html5新元素

2.

;元素表示单个内容，例如分类、地图、图像、代码文章等

示例：

<!DOCTYPE html>
<html>
<head>
<title>Figure Element</title>
</head>
<body>
<p> EDUCBA is a leading global provider of skill based education addressing the needs 500,000+ members across 40+ Countries.
</p>
<figure>
<img src="educba.png"/>
</figure>
</body>
</html>

登录后复制

输出：

上面的代码将产生如下图所示的输出，

Html5新元素

3.

;元素添加图像的描述。

示例：

<!DOCTYPE html>
<html>
<head>
<title>Figure Caption Element</title>
</head>
<body>
<p> EDUCBA is a leading global provider of skill based education addressing the needs 500,000+ members across 40+ Countries.
</p>
<figure>
<img src="educba.png"/>
<figcaption>EDUCBA (Corporate Bridge Consultancy Pvt Ltd)</figcaption>
</figure>
</body>
</html>

登录后复制

输出：

上面的代码显示的结果如下图所示，

Html5新元素

4.

;元素指定文档或页面上的部分的标题。您可以在单个文档中定义多个标题。

示例：

<!DOCTYPE html>
<html>
<head>
<title>Header Element</title>
</head>
<body>
<article>
<header>
<h1>Header One</h1>
<h2>Header Two</h2>
<h3>Header Three</h3>
</header>
<p>The content of the document goes here...</p>
</article>
</body>
</html>

登录后复制

输出：

上面的代码显示的结果如下图所示，

Html5新元素

5.

元素指定作者信息、版权信息、联系方式、相关文档链接、站点地图等信息。

示例：

<!DOCTYPE html>
<html>
<head>
<title>Footer Element</title>
</head>
<body>
<footer>
<p>Copyright © 2019 www.educba.com</p>
<p>Contact: <a href="mailto:[email&#160;protected]">[email protected]</a>
</footer>
</body>
</html>

登录后复制

输出：

上面的代码显示的结果如下图所示，

Html5新元素

6.

;元素用于显示文档的主要信息，即重要信息。

示例：

<!DOCTYPE html>
<html>
<head>
<title>Main Element</title>
</head>
<body>
<header>
<p>Header information</>
</header>
<main>
<p>Main Information</p>
<article>
<h2>EDUCBA</h2>
<p>EDUCBA is a leading global provider of skill based education...</p>
</article>
</main>
<footer>
<p>Footer Information</>
</footer>
</body>
</html>

登录后复制

输出：

上面的代码将产生如下图所示的输出，

Html5新元素

7.

;元素用背景颜色突出显示或标记文本，以吸引用户到文档上的特定文本。

示例：

<!DOCTYPE html>
<html>
<head>
<title>Mark Element</title>
</head>
<body>
<article>
<p><mark>EDUCBA</mark> is a leading global provider of skill based education addressing the needs 500,000+ members across 40+ Countries. </p>
</article>
</body>
</html>

登录后复制

输出：

上面的代码显示的结果如下图所示，

Html5新元素

8.

;元素用于指定页面上的导航链接。这些链接提供到文档中其他页面的连接。

示例：

<!DOCTYPE html>
<html>
<head>
<title>Nav Element</title>
</head>
<body>
<header>
<nav>
<a href="#">HTML</a> |
<a href="#">CSS</a> |
<a href="#">JAVA</a> |
<a href="#">PHP</a> |
<a href="#">PYTHON</a>
</nav>
</header>
</body>
</html>

登录后复制

输出：

上面的代码将产生如下图所示的输出，

Html5新元素

9.

;元素定义文档的独立部分或特定区域。

示例：

<!DOCTYPE html>
<html>
<head>
<title>Section Element</title>
</head>
<body>
<article>
<h2> Main Article </h2>
<p>Content of the main header will be displayed here...</p>
<section>
<h2>Section One</h2>
<p>Content of the first section will be displayed...</p>
</section>
<section>
<h2>Section Two</h2>
<p>Content of the second section will be displayed...</p>
</section>
</article>
</body>
</html>

登录后复制

输出：

上面的代码显示的结果如下图所示，

10.

The

tag is a subpart of the

tag which provides the text that can be displayed or hidden when the user clicks the heading.

Example:

<!DOCTYPE html>
<html>
<head>
<title>Summary Element</title>
</head>
<body>
<details>
<summary>
EDUCBA - Corporate Bridge Consultancy Pvt Ltd
</summary>
<p>It is a leading global provider of skill based education addressing the needs 500,000+ members across 40+ Countries.</p>
</details>
</body>
</html>

登录后复制

Output:

When you run the above code, it will display the result as shown below,

Html5新元素

As shown in the image, click on the heading, and it will display the hidden text shown below the image,

Html5新元素

Conclusion

So far, we have seen how new HTML5 elements are useful for various website creation tasks. These new elements read the document in a more accurate & standard way and develop more complex and efficient web apps. The new HTML5 elements give some additional extra features to generate interactive websites.

以上是Html5新元素的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn