web前端开发HTML5新增内容

发布时间:2024年01月09日

一、新增的主要标签:

1、section标签:

section标签表示页面中的一个内容区块,比如章节、页眉、页脚或页面中的其他部分。它可以与h1、h2、h3、h4、h5、h6元素结合使用,标示文档结构。相当于html4的div。

HTML5的<section>.......</section>相当于HTML4的<div>......</div>

2、?article标签:?

article标签表示页面中的一块与上下文不相关的独立内容,比如博客中的一篇文章或报纸中的一篇文章。

HTML5的<article>...</article>相当于HTML4的<div>......</div>

3、 aside标签:

aside标签表示article元素的内容之外的、与article元素的内容相关的辅助信息。

HTML5的<aside>...</aside>相当于HTML4的<div>......</div>

4、 header标签:

header标签表示页面中一个内容区块或整个页面的标题。

HTML5的<header>...</header>相当于HTML4的<div>......</div>

5、 footer标签:

footer标签表示整个页面或页面中一个内容区块的脚注。一般来说,它会包含创作者的姓名、创作日期以及创作者联系信息。

HTML5的<footer>...</footer>相当于HTML4的<div>......</div>

6、 nav标签:

nav标签表示页面中导航链接的部分。

HTML5的<nav>...</nav>相当于HTML4的<ul>......</ul>

(7) figure标签:

figure标签表示一段独立的流内容,一般表示文档主体流内容中的一个独立单元。使用figcaption元素为figure元素组添加标题。

//HTML 5中的代码示例:
<f igure>
    <f igcaption>PRC</f igcaption>
    <p>...</p>
</f igure>
//HTML 4中的代码示例:
<d1>
    <h1>PRC</h1>
    <p>...</p>
</d1>

8、main标签:

main标签表示网页中的主要内容。主内容区域意指与网页标题或应用程序中本页面主要功能直接相关或进行扩展的内容。

HTML5的<main>...</main>相当于HTML4的<div>......</div>

二、新增的次要标签:

1、 video标签:

video标签用于定义视频,比如电影片段或其他视频流。

//HTML5的
<video src="movie.ogg" controls="controls">...</video>
//相当于HTML4的
<object type="video/ogg" data="movie.ogv"
    <param name="src" value="movie.ogv"
</object>

2、?audio标签:

audio标签用于定义音频,比如音乐或其他音频流。

//HTML 5的
<audio src="someaudio.wav">...</audio>
//相当于HTML 4的
<object type="application/ogg" data="someaudio.wav">
<param name="src" value="someaudio. wav"></object>

3、 embed标签:

embed标签用来插入各种多媒体,格式可以是Midi、Wav、AIFF、AU、MP3等。

//HTML 5的
<embed src="horse.wav" />
//相当于HTML 4的
<object data="flash.swf"type="application/x-shockwave-flash"></obiect>

4、mark标签:

mark标签主要用来在视觉上向用户呈现那些需要突出显示或高亮显示的文字。mark元素的一个比较典型的应用就是在搜索结果中向用户高亮显示搜索关键词。

HTML5的<mark>...</mark>相当于HTML4的<span>......</span>

5、?progress标签:

progress标签表示运行中的进程,可以使用progress元素来显示JavaScript中耗费时间的函数的进程。

//这是HTML 5中的新增功能,故无法用HTML 4代码来实现
<progress>...</progress>

6、?meter标签:
meter标签表示度量衡,仅用于已知最大值和最小值的度量。必须定义度量的范围既可以在元素的文本中,也可以在min/max属性中定义。

//这是HTML 5中的新增功能,故无法用HTML 4代码来实现
<meter>...</meter>

7、?time标签:
time标签用于表示日期或时间,也可以同时表示两者HTML 5中的代码示例:

HTML5的<time>...</time>相当于HTML4的<span>......</span>

8、 canvas标签:
canvas标签表示图形,比如图表和其他图像。这个元素本身没有行为,仅提供一块画布,但把一个绘图API展现给客户端JavaScript,以使脚本能够把想绘制的东西绘制到这块画布上。

//HTML 5中的代码示例:
<canvas id="myCanvas" width="200” height="200"></canvas>
//HTML 4中的代码示例:
<object data="inc/hdr.svg type="image/svg+xml" width="200" height="200"></object>

9、?details标签:
details标签表示用户要求得到并且可以得到的细节信息。它可以与summary元素配合使用。summary元素提供标题或图例。标题是可见的,用户点击标题时,会显示细节信息。summary元素应该是details元素的第一个子元素。

//这是HTML 5中的新增功能
<details>
<summary>HTML5</summary>
...</details>

10、output标签:
output标签表示不同类型的输出,比如脚本的输出

HTML5的<output>...</output>相当于HTML4的<span>......</span>
文章来源:https://blog.csdn.net/qq_64064356/article/details/135466399
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。