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


相关文章
|
5天前
|
移动开发 HTML5
HTML5标签的类型
HTML5标签的类型。
30 5
|
19天前
|
数据可视化 前端开发
Twaver-HTML5基础学习(39)鹰眼可视化视图组件(OverView)
本文介绍了如何在Twaver-HTML5中使用鹰眼(Overview)可视化视图组件,它作为Network的缩略图,允许用户通过缩略图导航Network,支持单击、双击和框选操作来控制Network视图。
31 5
Twaver-HTML5基础学习(39)鹰眼可视化视图组件(OverView)
|
19天前
Twaver-HTML5基础学习(35)Network中ToolTip显示Chart(视图未成功出现)
本文尝试在Twaver-HTML5的Network组件的ToolTip中显示echarts饼图,但未成功,可能与版本有关。
31 4
Twaver-HTML5基础学习(35)Network中ToolTip显示Chart(视图未成功出现)
|
19天前
|
前端开发
Twaver-HTML5基础学习(34)Link显示流动效果
本文介绍了如何在Twaver-HTML5中为Link添加流动效果,通过设置流动颜色、模式等来实现动态视觉效果。
32 3
Twaver-HTML5基础学习(34)Link显示流动效果
|
19天前
|
数据可视化 前端开发 容器
Twaver-HTML5基础学习(41)列表可视化视图组件(List)
本文介绍了如何在Twaver-HTML5中使用列表可视化视图组件(List),展示了如何创建列表、设置列表属性(如行高、间隔颜色等)、实现数据绑定和排序,以及如何通过React代码示例进行操作。
17 2
Twaver-HTML5基础学习(41)列表可视化视图组件(List)
|
19天前
Twaver-HTML5基础学习(38)劈分面板SplitPane
本文介绍了如何在Twaver-HTML5中使用SplitPane组件来创建可分割的面板,通过动态调整分割条来改变面板的大小,支持水平和垂直分割。
29 2
Twaver-HTML5基础学习(38)劈分面板SplitPane
|
19天前
Twaver-HTML5基础学习(36)是否显示滚动条
本文探讨了在Twaver-HTML5中设置是否显示滚动条的方法,包括横向和纵向滚动条的控制,但遇到了设置不生效的问题,可能与软件版本有关。
26 2
Twaver-HTML5基础学习(36)是否显示滚动条
|
19天前
Twaver-HTML5基础学习(32)Network样式andTree样式
本文介绍了如何在Twaver-HTML5中自定义Network和Tree组件的样式,包括标签、提示、颜色、告警等。
31 2
Twaver-HTML5基础学习(32)Network样式andTree样式
|
19天前
|
JavaScript
Twaver-HTML5基础学习(31)Tree基本使用
本文介绍了如何在Twaver-HTML5中使用Tree组件,包括设置勾选模式、引导线、自定义图标、监听事件和控制复选框显示等。
32 2
Twaver-HTML5基础学习(31)Tree基本使用
|
19天前
Twaver-HTML5基础学习(30)监听事件_network绘制监听_network视图操作监听_鼠标事件的监听
本文介绍了如何在Twaver-HTML5中监听网络视图操作事件,包括视图绘制、鼠标事件以及获取鼠标下的网元等。
28 1
Twaver-HTML5基础学习(30)监听事件_network绘制监听_network视图操作监听_鼠标事件的监听