✨✨HTML5 的标签类型丰富多样,每种类型都有其独特的功能和用途,以下是一些常见的 HTML5 标签类型介绍:
🦋结构标签
🪭<html>
:它是 HTML 文档的根标签,所有其他标签都包含在这个标签内,就像一个大容器,把整个网页的内容都包裹起来。🪭<head>
:这个标签里包含的是关于网页的元信息,比如网页的标题、引入的外部样式表、脚本等,这些信息不会直接显示在网页页面上,但对网页的显示和功能起着重要的作用。🪭<body>
:网页中实际显示的内容都放在<body>
标签里,比如文字、图片、按钮等所有能被用户看到的元素都在这个标签内部。🪭<header>
:通常用来表示网页或页面中某个区域的头部部分,比如网站的 logo、导航栏等内容可以放在<header>
标签里。🪭<footer>
:与<header>
相对,用于表示网页或页面中某个区域的底部部分,一般包含版权信息、联系方式等内容。
🦋文本标签
🪭<h1>
-<h6>
:这是标题标签,<h1>
是最大的标题,<h6>
是最小的标题。它们用于突出显示网页中的不同级别标题,使内容结构更清晰,便于用户快速了解网页的主要内容。🪭<p>
:段落标签,用于定义文本段落。只要是一段连续的文本,就可以把它放在<p>
标签里,浏览器会自动在段落之间添加一些间距,使文本看起来更有条理。🪭<span>
:它是一个行内标签,主要用于在不改变文本结构的情况下,对部分文本进行样式设置或添加脚本行为。比如你想给一段文字中的某个词设置特殊颜色,就可以把这个词放在<span>
标签里,然后对<span>
标签设置样式。🪭<em>
:用于强调文本,通常会以斜体的形式显示。比如你想突出某个重要的词语或句子,就可以把它放在<em>
标签里。🪭<strong>
:也是用于强调文本,但它的强调程度比<em>
更强,一般会以粗体的形式显示。
🦋多媒体标签
🪭<img>
:用于在网页中插入图片。通过设置src
属性来指定图片的路径,alt
属性来提供图片的描述信息,当图片无法显示时,就会显示alt
属性中的文字。🪭<audio>
:用于在网页中嵌入音频文件,支持多种音频格式。可以通过src
属性指定音频文件的路径,还可以设置controls
属性来显示音频播放控制按钮,让用户能够播放、暂停、调节音量等。🪭<video>
:用来在网页中播放视频,同样支持多种视频格式。通过src
属性指定视频文件的路径,controls
属性来显示视频播放控制栏,还可以设置width
和height
属性来指定视频的宽度和高度。
🦋表单标签
🪭<form>
:表单标签,用于创建用户输入信息的表单。它可以包含各种表单元素,如文本输入框、下拉菜单、单选按钮、复选框等,用户在表单中输入的信息可以提交到服务器进行处理。🪭<input>
:这是最常用的表单元素之一,它可以根据不同的type
属性值创建不同类型的输入框,比如type="text"
创建文本输入框,type="password"
创建密码输入框,type="checkbox"
创建复选框,type="radio"
创建单选按钮等。🪭<select>
:用于创建下拉菜单,用户可以从下拉列表中选择一个选项。在<select>
标签内部,通过<option>
标签来定义下拉菜单中的每个选项。🪭<textarea>
:用于创建多行文本输入框,用户可以在其中输入大量的文本内容,比如留言、评论等。
🦋布局标签
🪭<div>
:这是一个非常常用的布局标签,它就像一个容器,可以把网页中的不同部分划分成不同的区域,然后通过 CSS 样式来对这些区域进行布局和样式设置。🪭<ul>
和<li>
:<ul>
是无序列表标签,<li>
是列表项标签,它们通常一起使用来创建无序列表,比如项目符号列表。每个<li>
标签代表列表中的一个项目。🪭<ol>
和<li>
:<ol>
是有序列表标签,和<ul>
类似,但它创建的是有序列表,比如数字编号列表。<li>
同样用于定义列表中的每个项目。