这些年没来得及学习的一些 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>


相关文章
|
24天前
|
数据采集 移动开发 前端开发
HTML代码的革命:语义化标签的魅力,让你的网页结构焕然一新!
【8月更文挑战第26天】本文探讨了Web前端开发中的语义化标签概念及其重要性。语义化标签通过使用具有明确含义的HTML标签来构建页面结构,提升了网页的可访问性及搜索引擎优化效果,并增强了代码的可读性和维护性。文章还讨论了实际开发中遇到的问题及未来发展趋势。
29 0
|
9天前
|
前端开发 Windows
【前端web入门第一天】02 HTML图片标签 超链接标签 音频标签 视频标签
本文档详细介绍了HTML中的图片、超链接、音频和视频标签的使用方法。首先讲解了`&lt;img&gt;`标签的基本用法及其属性,包括如何使用相对路径和绝对路径。接着介绍了`&lt;a&gt;`标签,用于创建超链接,并展示了如何设置目标页面打开方式。最后,文档还涵盖了如何在网页中嵌入音频和视频文件,包括简化写法及常用属性。
28 13
|
9天前
|
搜索推荐 SEO
HTML中各种标题标签的正确使用方法及其特点
在HTML中,标题标签(`&lt;h1&gt;`至`&lt;h6&gt;`)用于定义文档的标题结构。`&lt;h1&gt;`表示主标题,每个页面应只有一个;`&lt;h2&gt;`至`&lt;h6&gt;`分别表示不同层级的子标题,可用于细分内容。正确使用这些标签不仅有助于文档的层次分明和可读性提升,还能优化SEO。使用时需注意保持层级结构连续、内容描述清晰。
|
9天前
|
Web App开发 前端开发 JavaScript
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
|
22天前
|
移动开发 数据安全/隐私保护 UED
HTML表单标签详解:如何用HTML标签打造互动网页?
通过合理使用HTML表单标签,可以构建功能丰富、用户友好的互动网页。HTML表单的元素和属性提供了丰富的输入选项和验证功能,使得收集和处理用户输入成为可能。随着HTML5的发展,表单元素的功能性和用户体验将继续得到提升。开发者应充分利用这些工具,为用户打造流畅、互动性强的网页体验。
32 4
HTML中font标签用法
这篇文章详细介绍了HTML中`<font>`标签的用法,包括如何分别设置字体风格(`font-style`)、字体粗细(`font-weight`)、字体大小(`font-size`)和字体类型(`font-family`),并通过实例代码演示了如何综合使用这些属性来定义文本的字体样式。
HTML中font标签用法
|
25天前
|
移动开发 前端开发 开发者
从 HTML4 到 HTML5 的迁移标签
【8月更文挑战第24天】
29 0
|
25天前
|
移动开发 搜索推荐 索引
HTML5 中 article 标签的含义与作用
【8月更文挑战第24天】
340 0
|
28天前
|
前端开发
探索HTML表格的奥秘:学会使用 <table>标签创建精美表格
探索HTML表格的奥秘:学会使用 <table>标签创建精美表格
|
前端开发 数据安全/隐私保护
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第6章表格与表单
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第6章表格与表单
196 0