这些年没来得及学习的一些 HTML5 标签

简介: 【9月更文挑战第16天】HTML5 引入了许多新标签,增强了网页的功能与便利性。这些标签包括结构标签如 `<header>`(定义页眉)、`<footer>`(定义页脚)、`<nav>`(定义导航链接)、`<section>`(定义文档节)和 `<article>`(定义独立内容),以及多媒体标签 `<audio>` 和 `<video>`,用于播放音频和视频。此外,还有表单相关标签,如 `<datalist&gt。

HTML5 引入了许多新的标签,为网页开发带来了更多的功能和便利性。以下是一些可能你这些年没来得及学习的 HTML5 标签:


一、结构标签


  1. <header>:定义文档的页眉,通常包含网站的标志、导航链接等。
  • 例如:


<header>
     <h1>网站标题</h1>
     <nav>
       <ul>
         <li><a href="#">首页</a></li>
         <li><a href="#">关于我们</a></li>
         <li><a href="#">联系我们</a></li>
       </ul>
     </nav>
   </header>


  1. <footer>:定义文档的页脚,通常包含版权信息、联系方式等。
  • 例如:


<footer>
     <p>版权所有 © 2024 [公司名称]</p>
   </footer>


  1. <nav>:定义导航链接的部分。
  • 例如:


<nav>
     <ul>
       <li><a href="#">首页</a></li>
       <li><a href="#">产品</a></li>
       <li><a href="#">服务</a></li>
     </ul>
   </nav>


  1. <section>:定义文档中的节,比如章节、页眉、页脚或文档中的其他部分。
  • 例如:


<section>
     <h2>章节标题</h2>
     <p>章节内容...</p>
   </section>


  1. <article>:定义独立的内容,比如博客文章、新闻报道等。
  • 例如:


<article>
     <h1>文章标题</h1>
     <p>文章内容...</p>
   </article>


二、多媒体标签


  1. <audio>:用于在网页中播放音频。
  • 例如:


<audio controls>
     <source src="audio.mp3" type="audio/mpeg">
     你的浏览器不支持音频播放。
   </audio>


  1. <video>:用于在网页中播放视频。
  • 例如:


<video controls width="640" height="360">
     <source src="video.mp4" type="video/mp4">
     你的浏览器不支持视频播放。
   </video>


三、表单标签


  1. <datalist>:为<input>元素提供一个预定义的选项列表。
  • 例如:


<input list="colors" />
   <datalist id="colors">
     <option value="Red">
     <option value="Green">
     <option value="Blue">
   </datalist>


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


相关文章
|
移动开发 HTML5
HTML5标签的类型
HTML5标签的类型。
410 5
|
移动开发 搜索推荐 UED
HTML5的新语义化标签
HTML5引入的这些新语义化标签,通过明确标识内容的结构和意义,使得网页结构更加清晰,易于理解和维护。使用这些标签不仅提升了网页的可读性和可访问性,还增强了搜索引擎和辅助技术对网页内容的解析能力。在实际开发中,合理使用这些语义化标签,能够显著提升网页的质量和用户体验。
652 49
|
存储 移动开发 前端开发
高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容
本文深入探讨了高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容,旨在提升开发效率、网站性能和用户体验。
459 5
|
移动开发 编解码 UED
除了 `<audio>` 和 `<video>` 标签,HTML5 还支持哪些多媒体格式?
【10月更文挑战第19天】HTML5对多种多媒体格式的支持,为网页开发者提供了丰富的选择,能够更好地满足不同类型多媒体内容在网页中的展示和交互需求,提升了网页的用户体验和多媒体应用的多样性。
|
前端开发
【HTML】img标签和超链接标签
【HTML】img标签和超链接标签
373 2
|
移动开发 前端开发 JavaScript
【HTML】HTML页面和常见标签
【HTML】HTML页面和常见标签
242 1
|
前端开发
前端基础(二)_HTML常用标签(块级标签、行级标签、行块级标签)
本文详细介绍了HTML中的常用标签,包括块级标签(如`h1`至`h6`、`p`、`div`等)、行级标签(如`span`、`b`、`strong`、`i`、`em`、`sub`、`sup`、`del`、`a`等),以及行块级标签(如`img`)。文章解释了这些标签的用途、特点和基本用法,并通过示例代码展示了如何在HTML文档中使用它们。
1525 1
|
存储 移动开发 前端开发
|
Web App开发 数据采集 移动开发
HTML5新增的属性和标签
HTML5新增的属性和标签
592 0