搜索
Html5新元素Sep 04, 2024 pm 04:36 PM
htmlhtml5HTML TutorialHTML PropertiesHTML tags

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

Html5新元素

十大 HTML5 新元素

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

1.

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

示例:



<title>Article Element</title>


<article>
<h2 id="EDUCBA">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>

输出:

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

Html5新元素

2.

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

示例:



<title>Figure Element</title>


<p> EDUCBA is a leading global provider of skill based education addressing the needs 500,000+ members across 40+ Countries.
</p>
<figure>
<img  src="/static/imghwm/default1.png" data-src="educba.png" class="lazy" alt="Html5新元素" >
</figure>

输出:

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

Html5新元素

3.

;元素添加图像的描述。

示例:



<title>Figure Caption Element</title>


<p> EDUCBA is a leading global provider of skill based education addressing the needs 500,000+ members across 40+ Countries.
</p>
<figure>
<img  src="/static/imghwm/default1.png" data-src="educba.png" class="lazy" alt="Html5新元素" >
<figcaption>EDUCBA (Corporate Bridge Consultancy Pvt Ltd)</figcaption>
</figure>

输出:

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

Html5新元素

4.

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

示例:



<title>Header Element</title>


<article>
<header>
<h1 id="Header-One">Header One</h1>
<h2 id="Header-Two">Header Two</h2>
<h3 id="Header-Three">Header Three</h3>
</header>
<p>The content of the document goes here...</p>
</article>

输出:

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

Html5新元素

5.

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

示例:



<title>Footer Element</title>


<footer>
<p>Copyright © 2019 www.educba.com</p>
<p>Contact: <a href="mailto:%5Bemail%C2%A0protected%5D">[email protected]</a>
</p></footer>

输出:

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

Html5新元素

6.

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

示例:



<title>Main Element</title>


<header>
<p>Header information>
</p></header>
<main>
<p>Main Information</p>
<article>
<h2 id="EDUCBA">EDUCBA</h2>
<p>EDUCBA is a leading global provider of skill based education...</p>
</article>
</main>
<footer>
<p>Footer Information>
</p></footer>

输出:

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

Html5新元素

7.

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

示例:



<title>Mark Element</title>


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

输出:

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

Html5新元素

8.

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

示例:



<title>Nav Element</title>


<header>
<nav>
<a href="#">HTML</a> |
<a href="#">CSS</a> |
<a href="#">JAVA</a> |
<a href="#">PHP</a> |
<a href="#">PYTHON</a>
</nav>
</header>

输出:

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

Html5新元素

9.

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

示例:



<title>Section Element</title>


<article>
<h2 id="Main-Article"> Main Article </h2>
<p>Content of the main header will be displayed here...</p>
<section>
<h2 id="Section-One">Section One</h2>
<p>Content of the first section will be displayed...</p>
</section>
<section>
<h2 id="Section-Two">Section Two</h2>
<p>Content of the second section will be displayed...</p>
</section>
</article>

输出:

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

Html5新元素

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:



<title>Summary Element</title>


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

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
HTML超文本标记语言--超在那里?(文档分析)HTML超文本标记语言--超在那里?(文档分析)Aug 02, 2022 pm 06:04 PM

本篇文章带大家了解一下HTML(超文本标记语言),介绍一下HTML的本质,HTML文档的结构、HTML文档的基本标签和图像标签、列表、表格标签、媒体元素、表单,希望对大家有所帮助!

html和css算编程语言吗html和css算编程语言吗Sep 21, 2022 pm 04:09 PM

不算。html是一种用来告知浏览器如何组织页面的标记语言,而CSS是一种用来表现HTML或XML等文件样式的样式设计语言;html和css不具备很强的逻辑性和流程控制功能,缺乏灵活性,且html和css不能按照人类的设计对一件工作进行重复的循环,直至得到让人类满意的答案。

web前端笔试题库之HTML篇web前端笔试题库之HTML篇Apr 21, 2022 am 11:56 AM

总结了一些web前端面试(笔试)题分享给大家,本篇文章就先给大家分享HTML部分的笔试题(附答案),大家可以自己做做,看看能答对几个!

HTML5中画布标签是什么HTML5中画布标签是什么May 18, 2022 pm 04:55 PM

HTML5中画布标签是“<canvas>”。canvas标签用于图形的绘制,它只是一个矩形的图形容器,绘制图形必须通过脚本(通常是JavaScript)来完成;开发者可利用多种js方法来在canvas中绘制路径、盒、圆、字符以及添加图像等。

总结HTML中a标签的使用方法及跳转方式总结HTML中a标签的使用方法及跳转方式Aug 05, 2022 am 09:18 AM

本文给大家总结介绍a标签使用方法和跳转方式,希望对大家有所帮助!

html5废弃了哪个列表标签html5废弃了哪个列表标签Jun 01, 2022 pm 06:32 PM

html5废弃了dir列表标签。dir标签被用来定义目录列表,一般和li标签配合使用,在dir标签对中通过li标签来设置列表项,语法“<dir><li>列表项值</li>...</dir>”。HTML5已经不支持dir,可使用ul标签取代。

html中document是什么html中document是什么Jun 17, 2022 pm 04:18 PM

在html中,document是文档对象的意思,代表浏览器窗口的文档;document对象是window对象的子对象,所以可通过“window.document”属性对其进行访问,每个载入浏览器的HTML文档都会成为Document对象。

html5支持boolean值属性吗html5支持boolean值属性吗Apr 22, 2022 pm 04:56 PM

html5支持boolean值属性;boolean值属性指是属性值为true或者false的属性,如input元素中的disabled属性,不使用该属性表示值为flase,不禁用元素,使用该属性可以不设置属性值表示值为true,禁用元素。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前By尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
4 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

螳螂BT

螳螂BT

Mantis是一个易于部署的基于Web的缺陷跟踪工具,用于帮助产品缺陷跟踪。它需要PHP、MySQL和一个Web服务器。请查看我们的演示和托管服务。

PhpStorm Mac 版本

PhpStorm Mac 版本

最新(2018.2.1 )专业的PHP集成开发工具

VSCode Windows 64位 下载

VSCode Windows 64位 下载

微软推出的免费、功能强大的一款IDE编辑器

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

Atom编辑器mac版下载

Atom编辑器mac版下载

最流行的的开源编辑器