免责声明
学习视频来自 B 站up主泷羽sec，如涉及侵权马上删除文章。
笔记的只是方便各位师傅学习知识，以下代码、网站只涉及学习内容，其他的都与本人无关，切莫逾越法律红线，否则后果自负。
HTML简介
- HTML是用来描述网页的一种语言
- HTML指的是超文本标记语言:
`HyperTextMarkupLanguage - HTML不是一种编程语言，而是一种标记语言，标记语言是一套标记标签(
`markup tag) - HTML使用标记标签来描述网页
- HTML文档包含了HTML标签及文本内容
- HTML文档也叫做web页面
HTML基本结构概述
文档类型声明、HTML根元素、头部和主体部分
文档类型声明(DOCTYPE)
<!DOCTYPE html>这是HTML5的文档类型声明。它必须位于HTML文件的第一行，作用是告知浏览器文档所遵循的HTML版本，以便浏览器能够正确渲染页面。
对于HTML5来说，这个声明简洁明了，统一了HTML文档类型的标准，取代了以往复杂的DTD(文档类型定义)声明
HTML根元素(<html>)
<html>作为HTML文档的根标签，所有其他的HTML元素都被包含在它里面。它有开始标签<html>和结束标签</html>。
这个标签界定了整个HTML文档的范围，浏览器会识别其中的内容为有效的HTML代码
头部部分(<head>)
<HEAD>
<head>此部分包含了关于网页的元数据，这些信息对浏览器的渲染和网页的展示特性有重要作用，但不会直接在网页的可见区域显示。
<title>
<title>用于定义网页的标题，标题内容会显示在浏览器的标题栏或标签页上。
<meta>
<meta>用于提供多种类型的元数据。
字符编码设置>>
<meta charset="UTF-8">确保浏览器能够正确解析和显示网页中的各种字符，支持多种语言的字符集设置页面描述>>
<meta name="descripiton" content="这是一个充满趣味的网页"用于向搜索引擎描述网页内容设置关键词>>
<meta name="keywords" content="网页,趣味,示例"可设置关键词帮助搜索引擎索引网页
<link>
<link>主要用于链接外部资源，最常见的链接css样式表
<link rel="stylesheet" href="style.css">>其中rel="stylesheet"表明这是一个样式表链接，href属性制定了css文件的路径。通过这种方式，可以实现网页内容与样式的分离，方便网页设计和维护
<script>
<script>可用于在HTML文档中嵌入Javascript代码或引用外部的JavaScript文件，脚本可以为网页添加交互功能。
嵌入代码>>
<script>alert('欢迎来我的网页');</script>引用外部文件>>
<script src="script.js"></script>>>这里src属性指定了JavaScript文件的路径。
主体部分<body>
<body>包含了所有在网页中可见的内容
文本、图形、超链接、表格、表单
文本元素
可以使用段落标签<p>来组织文本
<p>
这是一段普通的文本内容
</p>
标题标签<h1>-<h6>可用于创建不同级别的标题，<h1>表示最高级别的标题，重要性依次递减。
图像元素
使用<img>标签来插入图像
<img src="image.jpg" alt="图像描述">
src指定图像的来源路径，alt属性在图像无法正常显示时提供替代文本，对于可访问性和SEO都很重要
超链接元素
通过<a>标签创建超链接
<a href="www.example.com">点击这里</a>
href属性定义了链接的目标URL，标签内的文本是用户看到的可点击的链接内容
表格内容
使用<table>标签创建表格，<tr>表示表格行，<td>表示表格单元格
<table>
<tr>
<td>单</td>
<td>单</td>
<td>单</td>
</tr>
<tr>
<td>元</td>
<td>元</td>
<td>元</td>
</tr>
<tr>
<td>格</td>
<td>格</td>
<td>格</td>
</tr>
</table>
| 单 | 单 | 单 |
|---|---|---|
| 元 | 元 | 元 |
| 格 | 格 | 格 |
<!DOCTYPE html> <!-- 声明文档类型和HTML版本，这里是HTML5 -->
<html lang="en"> <!-- 根元素，表示这是一个HTML文档，lang属性指定页面内容的主要语言为英语 -->
<head> <!-- 包含了文档的元（meta）数据，如字符集定义、页面标题、链接到样式表和脚本等 -->
<meta charset="UTF-8"> <!-- 指定页面编码为UTF-8，这是一种广泛使用的字符编码，支持多语言文本 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 优化移动浏览体验，设置视口宽度等于设备宽度，初始缩放比例为1 -->
<title>这是一个标题</title> <!-- 设置网页的标题，这个标题会显示在浏览器的标签页上 -->
</head>
<body> <!-- 包含了可见的页面内容，如文本、图片、链接、表格、列表等 -->
<!-- 这里可以添加你的网页内容，比如段落、图片、链接等 -->
<div style="background-color: violet;">
<p>这是一</p>
<p>个段落</p>
<p>这也是<u>一个</u>标题</p>
<p>这也是<i>一个</i>标题</p>
<p>这也是<b>一个</b>标题</p>
</div>
<img src="https://pic.imgdb.cn/item/671ef5afd29ded1a8cbb067e.png"
alt="我是图片的替代文本">
<a href="https://www.example.com" target="_blank">访问网站</a>
<p>这<span style="color: aqua;">还是</span>一个<span style="background-color: burlywood;">文本</span>段落</p>
<ol>
<li>第一列</li>
<li>第二列</li>
<li>第三列</li>
</ol>
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
<table border="2">
<thead>
<tr>
<td>头部1</td>
<td>头部2</td>
<td>头部3</td>
</tr>
</thead>
<tbody>
<tr>
<td>111</td>
<td>222</td>
<td>333</td>
</tr>
<tr>
<td>444</td>
<td>555</td>
<td>666</td>
</tr>
<tr>
<td>777</td>
<td>888</td>
<td>999</td>
</tr>
</tbody>
</table>
</body>
</html> <!-- 表示HTML文档的结束 -->
