HTML5 引入了许多新的标签,为网页开发带来了更多的功能和便利性。以下是一些可能你这些年没来得及学习的 HTML5 标签:
一、结构标签
<header>
:定义文档的页眉,通常包含网站的标志、导航链接等。
- 例如:
<header> <h1>网站标题</h1> <nav> <ul> <li><a href="#">首页</a></li> <li><a href="#">关于我们</a></li> <li><a href="#">联系我们</a></li> </ul> </nav> </header>
<footer>
:定义文档的页脚,通常包含版权信息、联系方式等。
- 例如:
<footer> <p>版权所有 © 2024 [公司名称]</p> </footer>
<nav>
:定义导航链接的部分。
- 例如:
<nav> <ul> <li><a href="#">首页</a></li> <li><a href="#">产品</a></li> <li><a href="#">服务</a></li> </ul> </nav>
<section>
:定义文档中的节,比如章节、页眉、页脚或文档中的其他部分。
- 例如:
<section> <h2>章节标题</h2> <p>章节内容...</p> </section>
<article>
:定义独立的内容,比如博客文章、新闻报道等。
- 例如:
<article> <h1>文章标题</h1> <p>文章内容...</p> </article>
二、多媒体标签
<audio>
:用于在网页中播放音频。
- 例如:
<audio controls> <source src="audio.mp3" type="audio/mpeg"> 你的浏览器不支持音频播放。 </audio>
<video>
:用于在网页中播放视频。
- 例如:
<video controls width="640" height="360"> <source src="video.mp4" type="video/mp4"> 你的浏览器不支持视频播放。 </video>
三、表单标签
<datalist>
:为<input>
元素提供一个预定义的选项列表。
- 例如:
<input list="colors" /> <datalist id="colors"> <option value="Red"> <option value="Green"> <option value="Blue"> </datalist>
<output>
:用于显示计算结果或脚本的输出。
- 例如:
<form oninput="result.value=parseInt(a.value)+parseInt(b.value)"> <input type="number" id="a" value="0"> + <input type="number" id="b" value="0"> = <output name="result"></output> </form>