HTML 元素与标签
HTML（HyperText Markup Language）是一种用于创建网页的标准标记语言。在HTML中，"元素"和"标签"是构建网页的基本组成部分，它们一起定义了网页的结构和内容。HTML标签是用来定义HTML元素的开始和结束的，而HTML元素是由标签及其包含的内容组成的。
参考文档：
1、HTML 元素
HTML元素指的是从开始标签到结束标签的所有内容。它们是HTML文档的构建块，用于创建和组织网页内容。HTML元素可以包含文本、图片、链接、表格等多种类型的数据。元素可能包括一个开始标签和一个结束标签，也可能只有一个标签（在自闭合元素的情况下）。
1） <!DOCTYPE> 声明
用于定义文档类型，告诉浏览器此文档使用哪个HTML版本。
<!DOCTYPE html>
2） <html>
根元素，包含整个HTML文档。
<html lang="en"> </html>
3） <head>
包含文档的元数据，如标题、字符集声明和链接到样式表。
<head> <title>页面标题</title> <meta charset="UTF-8"> </head>
4）<title>
定义文档的标题，显示在浏览器的标题栏或页面的标签页上。
<title>这是文档的标题</title>
5）<body>
包含文档的所有可见内容，如文本、图片、链接和其他多媒体元素。
<body> <h1>这是一个主标题</h1> <p>这是一个段落。</p> </body>
6） <header>
定义一个区域或页面的头部，通常包含标题和导航链接。
<header> <h1>网站标题</h1> <nav> <ul> <li><a href="#">首页</a></li> <li><a href="#">关于</a></li> </ul> </nav> </header>
7） <footer>
定义页面或区域的页脚部分，通常包含版权信息、联系信息等。
<footer> <p>版权所有 © 2024</p> </footer>
8） <nav>
定义导航链接的部分，用于页面内或页面间的导航。
<nav> <ul> <li><a href="#">首页</a></li> <li><a href="#">新闻</a></li> </ul> </nav>
9）<section>
定义文档中的一个独立部分，通常与标题一起使用。
<section> <h2>章节标题</h2> <p>这是该章节的一些内容。</p> </section>
10. <article>
定义可以独立于内容其余部分的完整自包含内容，例如博客帖子或新闻文章。
<article> <h2>文章标题</h2> <p>文章内容...</p> </article>
11. <aside>
定义与周围内容稍微分离的内容，如侧边栏或广告栏。
<aside> <p>这是一些附加信息。</p> </aside>
12. <figure> 和 <figcaption>
<figure> 定义独立的流内容（如图表、图像、代码示例等），<figcaption> 提供该内容的标题。
<figure> <img src="image.jpg" alt="描述性文本"> <figcaption>图像标题</figcaption> </figure>
2、HTML 标签
HTML标签是HTML元素的一部分，用于从逻辑上开始或结束一个元素。标签通常成对出现，包括一个开始标签和一个对应的结束标签，结束标签的名称前会有一个斜线（/）作为区分。有些HTML标签是自闭合的，意味着它们不需要结束标签，如图像标签（<img />）和换行标签（<br />）。
|
标签 |
说明 |
|
|
声明文档类型和HTML版本。 |
|
|
标识一个HTML文档的根元素。 |
|
|
包含了文档的元数据。 |
|
|
指定文档的标题。 |
|
|
包含了可见的页面内容。 |
|
|
定义标题，从
|
|
|
定义段落。 |
|
|
插入一个换行符。 |
|
|
在页面上绘制一条水平线。 |
|
|
定义粗体文本。 |
|
|
定义斜体文本。 |
|
|
定义下划线文本。 |
|
|
定义重要文本。 |
|
|
定义强调文本。 |
|
|
定义被标记或高亮的文本。 |
|
|
定义小号文本。 |
|
|
定义下标文本。 |
|
|
定义上标文本。 |
|
|
定义超链接。 |
|
|
在页面中嵌入图像。 |
|
|
定义无序列表。 |
|
|
定义有序列表。 |
|
|
定义列表项。 |
|
|
定义表格。 |
|
|
定义表格的表头单元格。 |
|
|
定义表格的行。 |
|
|
定义表格单元。 |
|
|
定义HTML表单。 |
|
|
定义输入控件。 |
|
|
定义多行文本输入控件。 |
|
|
定义按钮。 |
|
|
定义下拉列表。 |
|
|
定义下拉列表中的选项。 |
|
|
定义文章。 |
|
|
定义文档中的一个区域（或节）。 |
|
|
定义介绍性内容或导航链接的容器。 |
|
|
定义注脚或文档的页脚。 |
|
|
定义导航链接的部分。 |
|
|
定义侧边栏内容。 |
使用示例：
<!DOCTYPE html> 使用示例： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTML标签使用示例</title> </head> <body> <header> <h1>欢迎来到我的网页</h1> <nav> <a href="#content">主要内容</a> | <a href="#contact-form">联系表单</a> </nav> </header> <section id="content"> <article> <h2>HTML基础</h2> <p>HTML是构建网页的基石。<strong>标签</strong>是它的核心组成部分。<mark>本文</mark>介绍了一些最常用的HTML标签。</p> </article> <aside> <h3>注意</h3> <p>记得检查HTML5的新特性和标签。</p> </aside> <ul> <li>文本标签</li> <li>列表</li> <li>表格</li> <li>表单</li> </ul> <ol> <li>先介绍基础</li> <li>然后是进阶</li> </ol> <table> <tr> <th>标签</th> <th>描述</th> </tr> <tr> <td><p></td> <td>段落标签</td> </tr> <tr> <td><a></td> <td>链接标签</td> </tr> </table> </section> <section id="images"> <h2>图片</h2> <img src="example.jpg" alt="示例图片"> </section> <footer> <section id="contact-form"> <h2>联系我们</h2> <form> <label for="name">姓名:</label> <input type="text" id="name" name="name"><br> <label for="email">电子邮件:</label> <input type="email" id="email" name="email"><br> <input type="submit" value="提交"> </form> </section> <p>© 2024 HTML标签示例</p> </footer> </body> </html>
参考文档：
