📅  最后修改于: 2023-12-03 14:41:45.281000             🧑  作者: Mango
HTML 5标签是指在HTML 5规范中定义的新的HTML元素。这些元素不仅为Web开发人员提供了更多的语义化标签,而且还提高了Web文档的可读性、可访问性和可维护性。
HTML 5标签为Web开发人员提供了更多的语义化标签,这些标签可以让开发人员更容易地理解网页的内容和结构,也可以使搜索引擎更准确地了解网页的内容,提高网页的排名。
header
标签代表文档或节的引言或导航部分。在大多数情况下,它包含站点的标题、标志、搜寻框、导航元素等内容。header
标签应该放在body
标签内,但是不应该是section
标签的子元素。在一个文档中可以有多个header。
<header>
<h1>这里是站点标题</h1>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">关于我们</a></li>
</ul>
</nav>
</header>
article
标签代表一个完整的、独立的、可复用的内容块,例如一篇文章、一则新闻、一张图片集、一个博客评论等。article
标签的内容应该是可以独立于文档其他内容被分配的。同时,可以使用多个article
标签嵌套在一起。
<article>
<header>
<h2>这里是文章标题</h2>
<p>作者:xxx</p>
<time datetime="2022-01-01">2022-01-01</time>
</header>
<p>这是文章的正文内容……</p>
<footer>
<p>版权所有,未经允许不得转载。</p>
</footer>
</article>
aside
标签代表一个和文档主要内容相关,但可以被视为独立的部分。通常用于放置侧边栏、广告、相关链接、引用等内容。aside
标签也可以嵌套在article
标签内。
<aside>
<h2>热门文章</h2>
<ul>
<li><a href="#">文章一</a></li>
<li><a href="#">文章二</a></li>
<li><a href="#">文章三</a></li>
</ul>
</aside>
footer
标签代表一个文档、节、文章、应用程序的页脚。通常包含版权信息、联系方式、附加内容、相关链接等。在一个文档中可以有多个footer标签。
<footer>
<p>版权所有,未经允许不得转载。</p>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">关于我们</a></li>
</ul>
</nav>
</footer>
HTML 5标签为Web开发人员提供了更多的多媒体标签。这些标签可以使开发人员更方便地在网页中添加音频、视频等多媒体内容。
audio
标签用于向网页中嵌入音频内容。可以通过src
属性指定音频文件的URL,通过controls
属性显示音频播放控制面板。
<audio src="music.mp3" controls>你的浏览器不支持音频播放功能。</audio>
video
标签用于向网页中嵌入视频内容。可以通过src
属性指定视频文件的URL,通过controls
属性显示视频播放控制面板。
<video src="movie.mp4" controls>你的浏览器不支持视频播放功能。</video>
HTML 5标签为Web开发人员提供了更多的表单元素。这些元素可以使开发人员更方便地创建表单,并提高表单的用户体验。
input
标签是Web表单中最常用的表单元素之一。可以通过type
属性指定不同的输入类型,例如文本框、密码框、单选框、复选框、文件上传等。
<input type="text" name="username" placeholder="请输入用户名">
<input type="password" name="password" placeholder="请输入密码">
<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女
<input type="checkbox" name="hobby" value="reading">阅读
<input type="checkbox" name="hobby" value="traveling">旅行
<input type="file" name="avatar">
select
标签用于创建下拉列表框,可以让用户从多个选项中选择一个。
<select name="city">
<option value="">请选择城市</option>
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="guangzhou">广州</option>
</select>
textarea
标签用于创建多行文本框,可以让用户输入多行文本内容。
<textarea name="message" placeholder="请输入留言"></textarea>
在HTML 5中,新增了很多有用的语义化标签、多媒体标签、表单标签等等,这些标签可以让Web开发人员更方便地创建Web页面,并提高Web页面的可读性、可访问性和可维护性。