目录
声明：学习视频来自b站up主 泷羽sec，如涉及侵权马上删除文章
声明：本文主要用作技术分享，所有内容仅供参考。任何使用或依赖于本文信息所造成的法律后果均与本人无关。请读者自行判断风险，并遵循相关法律法规。
一、HTML简介
-
HTML是用来描述网页的一种语言
-
HTML指的是超文本标记语言:
`HyperTextMarkupLanguage -
HTML不是一种编程语言，而是一种标记语言，标记语言是一套标记标签(
`markup tag) -
HTML使用标记标签来描述网页
-
HTML文档包含了HTML标签及文本内容
-
HTML文档也叫做web页面
二 、HTML基本结构概述
-
文档类型声明（DOCTYPE）：
- 是HTML5的文档类型声明。
-
它必须位于HTML文件的第一行，告知浏览器文档遵循的HTML版本。
-
对于HTML5，这个声明简洁明了，统一了HTML文档类型的标准，取代了以往复杂的DTD（文档类型定义）声明。
- 是HTML5的文档类型声明。
-
HTML根元素（<html>）：
-
<html> 作为HTML文档的根标签，所有其他的HTML元素都被包含在它里面。
-
它有开始标签<html>和结束标签</html>。
-
这个标签界定了整个HTML文档的范围，浏览器会识别其中的内容为有效的HTML代码。
-
-
头部部分（<head>）：
-
<head> 此部分包含了关于网页的元数据，这些信息对浏览器的渲染和网页的展示特性有重要作用，但不会直接在网页的可见区域显示。
-
头部可以包含以下元素：
-
<title>：定义网页的标题，显示在浏览器的标题栏或标签页上。
-
<meta>：提供多种类型的元数据，例如字符编码设置（<meta charset="UTF-8">）、页面描述、关键词等。
-
<link>：主要用于链接外部资源，最常见的是链接CSS样式表。
-
<script>：可用于在HTML文档中嵌入JavaScript代码或引用外部的JavaScript文件，脚本可以为网页添加交互功能。
-
-
-
主体部分（<body>）：
-
<body> 包含了所有在网页中可见的内容。
-
这部分可以包含文本、图形、超链接、表格、表单等元素。
-
例如：
-
文本元素：使用<p>来组织文本。
-
标题标签：使用<h1>到<h6>来创建不同级别的标题。
-
图像元素：使用<img>来插入图像。
-
超链接元素：通过<a>标签创建超链接。
-
表格内容：使用<table>、<tr>、<td>来创建表格。
-
-
一个简单的HTML文档示例如下：
<!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> <!-- 包含了可见的页面内容，如文本、图片、链接、表格、列表等 --> <!-- 这里可以添加你的网页内容，比如段落、图片、链接等 --> </body> </html> <!-- 表示HTML文档的结束 -->
head内标签
-
<meta>标签：
- 字符编码设置：例如<meta charset="UTF-8">，指定字符编码，UTF-8是一种通用的字符编码方式，可以表示世界上几乎所有的字符。
- 页面描述和关键词设置：例如<meta name="description" content="这是一个关于HTML结构讲解的网页，包含详细的head标签内容">和<meta name="keywords" content="HTML, head标签, 网页结构">，分别用于指定网页的描述和关键词。
- 视口设置（用于移动端网页适配）：例如<meta name="viewport" content="width=device-width, initial-scale=1.0">，控制网页在移动设备上的显示方式。 - <title>标签：
- 定义浏览器标签页和搜索引擎结果中的标题，例如<title>一个简单的网页</title>。
-
<link>标签：
-
样式表链接：例如<link rel="stylesheet" type="text/css" href="styles.css">，用于将外部CSS文件链接到HTML文档。
-
图标链接（favicon）：例如<link rel="shortcut icon" href="favicon.ico">，用于指定网页的图标。
-
-
<script>标签：
- 外部脚本链接：例如<script src="script.js" defer></script>，引入外部JavaScript脚本文件。
- 内联脚本：直接将JavaScript代码写在<script>标签内，例如<script> function showMessage() { alert('欢迎来到这个网页！'); } </script>。
body内标签
文本相关标签
- <p>标签（段落标签）：
- 用于定义一个段落。浏览器会在段落前后自动添加一些空白间距。
- 示例：<p>这是一个段落。它包含了一些文本内容，这些内容会在浏览器中以段落的形式显示。</p>。 - <h1> - <h6>标签（标题标签）：
- 用于定义不同级别的标题，<h1>是最高级别（最重要的标题），<h6>是最低级别。
- 示例：<h1>这是一级标题</h1>，<h2>这是二级标题</h2>。 -
<span>标签：
-
是一个内联标签，用于对文本的一小部分进行样式设置或其他操作。
-
示例：<p>这是一段包含红色文字的段落。</p>。
-
-
<strong>和<em>标签：
-
<strong>标签用于强调文本内容，通常浏览器会以加粗的形式显示。
-
<em>标签用于表示斜体强调，浏览器一般会将其内容显示为斜体。
-
示例：<p>这个词很重要，而这个词是需要特别注意的。</p>。
-
列表标签
- 和
标签（无序列表和有序列表）：
- 标签用于创建无序列表，列表项前面通常是一个实心圆点。
- 标签用于创建有序列表，列表项前面会有数字或字母等顺序标记。
-
示例：
无序列表：
<ul> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> </ul>
有序列表：
<ol> <li>第一个项目</li> <li>第二个项目</li> <li>第三个项目</li> </ol>
链接标签
-
<a>
标签（超链接标签）：
图像标签
-
<img>
标签：
-
用于在网页中插入图像。
-
示例：。src属性指定图像文件的路径，alt属性是图像的替代文本。
-
表格标签
- 标签（表格整体）：
1.用于创建表格结构，它包含了表格的行和列等元素。
2.示例：
<table> <tr> <td>第一行第一列</td> <td>第一行第二列</td> </tr> <tr> <td>第二行第一列</td> <td>第二行第二列</td> </tr> </table>
3.<tr>标签表示表格行（Table Row），<td>标签表示表格列（Table Data）。
表单标签
- 标签（表单整体）：
-
用于创建一个表单，用户可以通过表单输入信息并提交给服务器。
-
示例：
-
<form action="submit.php" method="post"> <label for="username">用户名：</label> <input type="text" id="username" name="username"> <input type="submit" value="提交"> </form>
-
<label>标签用于为表单元素提供说明。
-
<input>标签用于创建各种输入框，如文本输入框、密码输入框、按钮等。