Table of Contents
1、标签 ：<标签>
2、元素：<p>.......</p>
3、<!DOCTYPE> 声明：
（1）HTML5 ：<!DOCTYPE html>(不用区分大小写)
（2）HTML 4.01：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
（3）XHTML 1.0：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4、在头部（<head>之间</head>）将字符声明为 UTF-8 或 GBK：<meta charset="UTF-8">
5、水平线：<hr>
6、注释：<!--这是一段注释-->
7、HTML 标题：<h1> - <h6>
8、定义一个段落：<p>
9、插入单个折行（换行）：<br>
10、粗体 or 斜体：<b>与 <i>
11、定义水平线：<hr>
12、属性
（1）全局属性：所有 HTML 元素都可以使用的属性。
id：为元素指定唯一的标识符。
<div id="header">This is the header</div>
class：为元素指定一个或多个类名，用于 CSS 或 JavaScript 选择。
<p class="text highlight">This is a highlighted text.</p>
style：用于直接在元素上应用 CSS 样式。
<p style="color: blue; font-size: 14px;">This is a styled paragraph.</p>
title：为元素提供额外的提示信息，通常在鼠标悬停时显示。
<abbr title="HyperText Markup Language">HTML</abbr>
data-\：用于存储自定义数据，通常通过 JavaScript 访问。
<div data-user-id="12345">User Info</div>
（2）特定元素的属性:某些属性仅适用于特定的 HTML 元素。
`href`（用于 `<a>` 和 `<link>` 元素）：指定链接的目标 URL。
<a href="https://www.example.com">Visit Example</a>
`src`（用于 `<img>`, `<script>`, `<iframe>` 等元素）：指定外部资源的 URL。
<img src="image.jpg" alt="An example image">
`alt`（用于 `<img>` 元素）：为图像提供替代文本，当图像无法显示时显示。
<img src="image.jpg" alt="An example image">
`type`（用于 `<input>` 和 `<button>` 元素）：指定输入控件的类型。
<input type="text" placeholder="Enter your name">
`value`（用于 `<input>`, `<button>`, `<option>` 等元素）：指定元素的初始值。
<input type="text" value="Default Value">
disabled（用于表单元素）：禁用元素，使其不可交互。
<input type="text" disabled>
`checked`（用于 `<input type="checkbox">` 和 `<input type="radio">`）：指定复选框或单选按钮是否被选中。
<input type="checkbox" checked>
`placeholder`（用于 `<input>` 和 `<textarea>` 元素）：在输入框中显示提示文本。
<input type="text" placeholder="Enter your email">
`target`（用于 `<a>` 和 `<form>` 元素）：指定链接或表单提交的目标窗口或框架。
<a href="https://www.example.com" target="_blank">Open in new tab</a>
（3）布尔属性:布尔属性是指不需要值的属性，它们的存在即表示 true，不存在则表示 false。
disabled：禁用元素。
<input type="text" disabled>
readonly：使输入框只读。
<input type="text" readonly>
required：指定输入字段为必填项。
<input type="text" required>
`autoplay`（用于 `<audio>` 和 `<video>` 元素）：自动播放媒体。
<video src="video.mp4" autoplay></video>
（4）自定义属性
HTML5 引入了 data-\ 属性，允许开发者自定义属性来存储额外的数据。
data-\：用于存储自定义数据，通常通过 JavaScript 访问。
<div data-user-id="12345" data-role="admin">User Info</div>
（5）事件处理属性
HTML 元素可以通过事件处理属性来响应特定的事件，如点击、鼠标悬停等。
onclick：当用户点击元素时触发。
<button onclick="alert('Button clicked!')">Click Me</button>
onmouseover：当用户将鼠标悬停在元素上时触发。
<div onmouseover="this.style.backgroundColor='yellow'">Hover over me</div>
onchange：当元素的值发生变化时触发。
<input type="text" onchange="alert('Value changed!')">
13、链接：<a href="URL">链接文本</a>
14、head 元素：
<head> 定义了文档的信息
<title> 定义了文档的标题
<base> 定义了页面链接标签的默认链接地址
<link> 定义了一个文档和外部资源之间的关系
<meta> 定义了HTML文档中的元数据，描述HTML文档的描述，关键词，作者，字符集等
<script> 定义了客户端的脚本文件
<style> 定义了HTML文档的样式文件
15、CSS
（1）内联样式- 在HTML元素中使用"style" 属性
<p style="color:blue;margin-left:20px;">这是一个段落。</p>
（2）内部样式表 -在"<head>" 部分通过" <style>"标签定义内部样式表:
<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>
（3）外部引用 - 使用外部 CSS 文件
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
16、表格： <table>标签定义
tr:表格的一行
td:表格的数据单元格
th:表格的表头单元格
```
"<table>
<thead>
<tr>
<th>列标题1</th>
<th>列标题2</th>
<th>列标题3</th>
</tr>
</thead>
<tbody>
<tr>
<td>行1，列1</td>
<td>行1，列2</td>
<td>行1，列3</td>
</tr>
<tr>
<td>行2，列1</td>
<td>行2，列2</td>
<td>行2，列3</td>
</tr>
</tbody>
</table>"
```
17、列表：
（1）无序列表
"<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>"
（2）有序列表
"<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>"
18、定义了文档的区域：'<div>'
19、创建表单：'<form>'
为表单元素添加标签：'<label>'
创建文本输入框、密码框、单选按钮、复选框等：'<input>'。`type` 属性定义了输入框的类型，`id` 属性用于关联<label>元素，`name` 属性用于标识表单字段。
20、定义客户端脚本：'<script> '
<script> document.write("Hello World!"); </script>
