HTML标签(HTML tags)是用于描述网页文档结构和内容的代码元素。HTML是超文本标记语言,它使用标签来定义文档的各个部分和元素。每个HTML标签通常由尖括号(<>)括起来,包含在开始标签和结束标签之间。开始标签和结束标签一起定义了标签的范围。
以下是一些常用的HTML标签,以及它们的简要说明和示例:
<!DOCTYPE html>
:说明: 文档类型声明,声明文档使用的HTML版本。
示例:
<!DOCTYPEhtml>
<html>
:说明: HTML文档的根元素,包含整个HTML文档。
示例:
<htmllang="en"> <!--文档内容--> </html>
<head>
:<head>
<meta charset="UTF-8">
<title>页面标题</title>
<link rel="stylesheet" href="styles.css">
</head>
说明: 包含文档的元信息,如标题、字符集、样式表等。
示例:
<title>
:说明: 定义网页的标题,显示在浏览器的标题栏或标签页上。
示例:
<title>我的网页</title>
<body>
:<body>
<h1>欢迎来到我的网页</h1>
<p>这是一个示例网页。</p>
</body>
说明: 包含文档的主要内容,如文本、图片、链接等。
示例:
<h1> to <h6>
:说明: 定义标题,
<h1>
最大,<h6>
最小。示例:
<h1>这是一级标题</h1> <h2>这是二级标题</h2>
<p>
:说明: 定义段落。
示例:
<p>这是一个段落。</p>
<a>
:说明: 定义链接。
示例:
<ahref="https://www.example.com">访问示例网站</a>
<img>
:说明: 插入图片。
示例:
<imgsrc="image.jpg?x-oss-process=image/resize,w_700,limit_1/format,webp"alt="图片描述">
<ul>
和<ol>
:<ul>
<li>项目1</li>
<li>项目2</li>
</ul>
<ol>
<li>第一项</li>
<li>第二项</li>
</ol>
说明: 分别定义无序列表和有序列表。
示例:
<li>
:<ul>
<li>项目1</li>
<li>项目2</li>
</ul>
说明: 定义列表项。
示例:
<table>
:<table>
<tr>
<th>表头1</th>
<th>表头2</th>
</tr>
<tr>
<td>数据1</td>
<td>数据2</td>
</tr>
</table>
说明: 定义表格。
示例:
<form>
:<form action="/submit" method="post">
<label for="username">用户名:</label>
<input type="text" id="username" name="username">
<button type="submit">提交</button>
</form>
说明: 定义表单。
示例:
<input>
:说明: 定义输入框。
示例:
<inputtype="text"placeholder="请输入文本">
<div>
和<span>
:说明: 分别定义块级和内联的容器,常用于布局。
示例:
<div>这是一个块级容器</div> <span>这是一个内联容器</span>
<nav>
:<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</nav>
说明: 定义导航链接的容器。
示例:
<section>
:<section>
<h2>文章标题</h2>
<p>文章内容...</p>
</section>
说明: 定义文档中的一个区域或部分。
示例:
<article>
:<article>
<h2>文章标题</h2>
<p>文章内容...</p>
</article>
说明: 定义独立的、完整的内容块,比如一篇文章。
示例:
<aside>
:<aside>
<h3>相关链接</h3>
<ul>
<li><a href="#">链接1</a></li>
<li><a href="#">链接2</a></li>
</ul>
</aside>
说明: 定义与页面内容相关的侧边栏或附属信息。
示例:
<figure>
和<figcaption>
:<figure>
<img src="image.jpg?x-oss-process=image/resize,w_700,limit_1/format,webp" alt="图片描述">
<figcaption>图片说明</figcaption>
</figure>
说明:
<figure>
定义媒体元素,<figcaption>
为<figure>
元素添加标题。示例:
<main>
:<main>
<h1>主要内容</h1>
<p>网页的主要内容...</p>
</main>
说明: 定义文档的主要内容,一个文档应该包含一个
<main>
元素。示例:
<footer>
:说明: 定义文档或区域的页脚。
示例:
<footer> <p>©2023版权所有</p> </footer>
<mark>
:说明: 定义文本中的高亮部分。
示例:
<p>这段文字中的<mark>关键词</mark>需要突出显示。</p>
<progress>
:说明: 定义任务的完成进度。
示例:
<progressvalue="50"max="100"></progress>
<time>
:说明: 定义日期和时间。
示例:
<p>发布时间:<timedatetime="2023-01-01">2023年1月1日</time></p>