基本结构
html文件基本结构如下面示例代码：
整体是嵌套的标签组成，最外层<html>标签，嵌套<head>和<body>
<head>中包含meta信息、css代码、js代码等
<body>描述了所有页面内容
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<title>实现按钮计数器</title>
<link rel="stylesheet" href="styles.css">
<script src="app.js"></script>
</head>
<body>
<p>这是我的页面</p>
<div id="app">
<!-- 按钮和计数显示 -->
<button id="counterButton">Count is: 0</button>
</div>
<div>
<img src="test.jpg" alt="My test image" />
</div>
<script src="index.js"></script>
</body>
</html>
基本概念
<p>My cat is very grumpy</p>以该元素说明基本概念：
- 开始标签（Opening tag）：包含元素的名称（本例为 p），及一对包围名称的尖括号。这表示元素从这里开始或者开始起作用——在本例中即段落由此开始。
- 结束标签（Closing tag）：与开始标签相似，只是其在元素名之前包含了一个正斜杠。这表示元素到这里结束——在本例中即段落在此结束。初学者常常会犯忘记添加结束标签的错误，这可能会产生一些奇怪的结果。
- 内容（Content）：元素的内容，本例中就是所输入的文本本身。
- 元素（Element）：开始标签、结束标签与内容相结合，便是一个完整的元素。
<button id="counterButton">Count is: 0</button>以该元素说明下面概念：
- 属性 （Attribute)：id="counterButton"为属性，id为属性名，"counterButton"为属性值(包含在一对引号中)。有的属性仅包含属性名。
- 全局属性 (Global attribute)：Global attributes are attributes common to all HTML elements; they can be used on all elements, though they may have no effect on some elements.
<img src="test.jpg" alt="My test image" />以该元素说明空元素概念
- 空元素 (Void Elements)：没有内容和类似</img>结束标签的元素称为空元素，它们不需要通过内容产生效果。注意空元素以/结尾
常见全局属性
class ：给标签一个类名（不唯一）
hidden：隐藏一个标签
id：给标签一个id名（唯一）
style：设置标签的样式
title：鼠标移动到标签显示文字
常用元素
以下内容来自chatgpt总结
1. 结构性元素
这些元素用于定义文档的结构，帮助组织页面的内容和布局。
-
文档结构
<html>：定义整个 HTML 文档。<head>：定义文档的元数据，如标题、字符集、链接等。<body>：包含页面的所有可见内容。
-
头部信息
<title>：定义页面的标题（显示在浏览器标签中）。<meta>：提供页面的元数据，如字符集、描述、关键词等。<link>：用于链接外部资源，如 CSS 样式表。<style>：定义页面的内联 CSS 样式。
-
结构容器
<div>：常用的块级容器元素，用于布局和分组内容。<span>：内联容器元素，用于对内容进行分组或样式应用。<header>：定义文档的头部，通常包含导航、标题等。<footer>：定义文档的底部区域，通常包含版权信息或联系方式。<main>：表示页面的主要内容区域。<section>：用于定义文档中的一个独立区域或章节。<article>：表示一篇独立的内容，如博客文章或新闻条目。<nav>：定义页面的导航部分，包含链接。<aside>：表示与主内容略有关系的部分，通常用于侧边栏或广告。
2. 文本内容元素
这些元素用于组织和格式化文本内容。
-
段落和文本
<p>：定义一个段落。<h1>,<h2>,<h3>,<h4>,<h5>,<h6>：定义不同级别的标题。<b>：表示加粗文本（不推荐使用，建议使用<strong>）。<i>：表示斜体文本（不推荐使用，建议使用<em>）。<u>：表示下划线文本。<strong>：表示强调的文本，通常为加粗。<em>：表示强调的文本，通常为斜体。
-
文本修饰
<br>：插入换行符。<hr>：插入水平线（通常用于分隔内容）。<code>：用于表示一段代码。<pre>：表示预格式化的文本，保留空格和换行。<blockquote>：表示引用的文本。
-
列表
<ul>：定义无序列表。<ol>：定义有序列表。<li>：定义列表项。<dl>：定义定义列表。<dt>：定义定义列表中的条目。<dd>：定义定义列表中的描述。
3. 表单元素
这些元素用于创建用户交互的表单。
-
表单容器
<form>：定义一个表单，用于收集用户输入。<input>：定义输入控件，如文本框、复选框、单选框等。<textarea>：定义多行文本输入框。<button>：定义按钮。<select>：定义下拉菜单。<option>：定义下拉菜单中的选项。<label>：为表单控件定义标签。<fieldset>：为表单元素分组。<legend>：为<fieldset>提供标题。<input type="submit">：定义提交按钮。<input type="reset">：定义重置按钮。
4. 链接和媒体元素
这些元素用于处理链接和嵌入多媒体内容。
-
链接
<a>：定义超链接，用于导航到其他页面或资源。<link>：用于链接外部资源，如样式表或图标。<nav>：用于定义导航链接的区域。
-
图片
<img>：用于嵌入图像。<picture>：用于响应式图像，允许为不同屏幕尺寸提供不同的图像。<figcaption>：定义<figure>中图像的说明文本。<figure>：用于嵌入图像、图表、视频或其他媒体内容。
-
视频和音频
<video>：用于嵌入视频。<audio>：用于嵌入音频。<source>：用于指定多种媒体资源，通常与<audio>或<video>元素一起使用。
5. 表格元素
这些元素用于组织表格内容。
-
表格容器
<table>：定义一个表格。<tr>：定义表格中的一行。<th>：定义表头单元格。<td>：定义表格中的数据单元格。<caption>：为表格定义标题。<thead>：定义表格的表头。<tbody>：定义表格的主体部分。<tfoot>：定义表格的表尾部分。
6. 脚本和样式元素
这些元素用于处理页面的样式和行为。
-
样式
<style>：定义内部样式表。
-
脚本
<script>：用于嵌入或引用 JavaScript 脚本。<noscript>：用于定义当浏览器不支持脚本时显示的内容。
7. 元数据元素
这些元素用于指定文档的元数据，控制文档的行为和显示。
-
元数据
<meta>：定义文档的元数据，如字符集、描述、关键词等。<base>：为页面内的所有相对链接设置基准 URL。<title>：定义页面标题。<link>：用于链接外部资源。
8. 语义化元素
这些元素提供了更多文档内容的语义信息，帮助提高网页的可访问性和 SEO 优化。
-
语义化容器
<header>：表示文档或一个部分的头部。<footer>：表示文档或一个部分的底部。<article>：表示独立的内容块，如新闻、博客文章等。<section>：表示文档中的一个区域或章节。<aside>：表示与主内容略有关系的部分（如侧边栏）。<main>：表示文档的主内容区域。
总结
HTML 元素可以按照功能分类为结构性元素、文本内容元素、表单元素、链接和媒体元素、表格元素、脚本和样式元素、元数据元素以及语义化元素。选择适当的元素可以帮助构建更具可访问性、易维护且结构清晰的网页。
