# 学习视频笔记均来自B站UP主" 泷羽sec",如涉及侵权马上删除文章
仅用于学习参考，不要越过法律红线
1.HTML简介
HTML 是用来描述网页的一种语言
HTML 指的是超文本标记语言
HTML 不是一种编程语言，而是一种标记语言
HTML 使用标记标签来描述网页
HTML 文档包含标签与文本内容
HTML文档也叫做web页面
2.HTML基本结构概述
（1）.<!DOCTYPE htm>声明：位于文档最前端，表明这是HTML5文档，让浏览器按HTML标准解析页面
（2）<heml>.元素：是 HTML 文档的根元素，其他元素都嵌套其中， 有开始<heml>和结束</html>标签，就像一个容器，包裹整个页面的内容
（3）<head>元素（包含元数据）
<meta>标签：如<meta charset="UTF - 8">指定字符编码，还有用于搜索引擎的其他元信息标签。
<title>标签：定义浏览器标签页和搜索引擎结果中的标题。
4.<body>元素（包含可见内容）：如文本（用<p>等标签）,图像（<img>标签），链接（<a>标签）等
这种结构为浏览器解析和显示网页内容提供了清晰的框架
下面为一个简单的HTML基本结构示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF - 8">
<title>一个简单的网页</title>
</head>
<body>
<h1>欢迎来到我的网页</h1>
<p>这是网页的主要内容部分。</p>
</body>
</html>首先是文档类型声明，然后是<heml>根元素。<head>部分包含了字符 编码设置和页面标题，<body>部分则包含了一个一级标题<h1>和一个段落<p>
3.HEAD内标签
(1)<meta>标签
字符编码设置：
示例：<meta charset="UTF - 8">。这是<meta>标签的一个非常重要的用法。UTF - 8 是一种通用的字符 编码方式，几乎可以表示世界上所有的字符。当浏览器 读取这个标签时，它就知道应该如何正确地解析网页中 的文字内容。如果没有正确设置字符编码，可能会导致 文字显示乱码。
页面描述与关键词设置：
示例：<meta name="description" content="这是 一个关于HTML结构讲解的网页，包含详细的head标签内容">。name="description"属性表示这是一个页面描 述标签，content属性则是具体的描述内容。
<meta name="keywords"content="HTML,head标签, 网页结构">。name="keywords"属性用于指定网页的关键词
视口设置（用于移动端网页适配）：
示例：<meta name="viewport"content="width=device - width, inital - scale = 1.0">。这个标签用于控制网页在移动设备上 的显示方式。width=device - width表示网页的宽度 应该等于设备的屏幕宽度，initial - scale = 1.0 表示初始缩放比例为 1.0，即不进行缩放。这样可以确 保网页在移动设备上能够自适应屏幕大小
(2)<title>标签
示例：<title>HTML Head标签详解 - 学习网页基础知识。</title>这个标签定义了网页的标题。当网页在浏览器 中打开时，标题会显示在浏览器的标签栏上。
(3)<link>标签
样式表链接：
示例：<link rel="styleshlesheet" type="text/css"href="styles.css">。这个标签用于将外部 CSS（层 叠样式表）文件链接到 HTML 文档。
rel="stylesheet"表示这是一个样式表链接，
type="text/css"指定了链接文件的类型是 CSS，
href="styles.css"则是样式表文件的路径。通过这种方式，可以将网页的内容和样式分离，方便维护和更 新。
图标链接（favicon）：
示例：<link rel="shortcut icon"href="favicon.ico">。这个标签用于指定网页的图标（favicon）。
rel="shortcut icon"表示这是一个 快捷方式图标链接，
href="favicon.ico"是图标的文件路径。当网页在浏览器中被收藏或者在浏览器标签栏显示时，这个图标就会出现。
一般来说，favicon.ico 是一个 16x16 或 32x32 像素的图标文件，它可以帮助用户快速识别网页。
（4）<script>标签（在中部分应用）
外部脚本链接：
示例：<scriot src="script.js" defer></script>。这个标签用于引入外部的 JavaScript 脚本文件。src="script.js"指定了脚本文件的路径， defer属性表示脚本会在文档解析完成后延迟执行。 JavaScript 可以用于实现网页的交互功能，如菜单的展 开和折叠、表单验证等。
内联脚本：
示例：<script>function showMessage() {alert('欢迎来到这个网页');}</script>。这是一 个内联脚本的例子，直接将 JavaScript 代码写在<script>标签内。
4.BODY内标签
（1）文本相关标签
<p>标签 （段落标签）
作用：用于定义一个段落，浏览器会在段落前后自动添加一些空白间距，使文本排本更加清晰
示例：<p>这是一个段落。它包含了一些文本内容，这些内 容会在浏览器中以段落的形式显示。</p>多个<p>标签可以用来划分不同的段落，每个段落会独占一行，并且上下段落之间会有一定的间距。
<h1> - <h6>标签（标题标签）
作用：用于定义不同级别的标题，<h1>是最高级别的(最重要的标题），<h6>是最低级别。标题标签通常 会以较大的字体和较粗的样式显示，用于突出网页内容的层次结构。
示例：<h1>这是一级标题</h1>,<h2>这是二级标题</h2>。<h1>可能是文章的标题，<h2>可以是文章各个章节的标题，<h3>则可能是章节下小节的标题，以此类推
<span>
作用：是一个内联标签，用于对文本的一小部分进行样 式设置或其他操作。它本身不会对文本的显示产生像段 落或标题那样明显的视觉变化。
示例：<p>这是一段包含<span style="color: red;">红色文字</span>的段落。</p>。<span>标签用于将其 中的文字颜色设置为红色。
<strong>和<em>标签
作用：<strong>标签用于强调文本内容，通常浏览器 会以加粗的形式显示；<em>标签用于表示斜体强调， 浏览器一般会将其内容显示为斜体。
示例:<p>这个词很<strong>重要</strong>，而这个词是<em>需要特别注意的</em>
（2）列表标签
<ul>和<ol>标签（无序列表和有序列表）
作用：<ul>标签用于创建无序列表，列表项前面通常是一个 实心圆点（可以通过 CSS 样式修改);<ol>标签用于创建 有序列表，列表项前面会有数字或字母等顺序标记。
示例：
无序列表：
<ul> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> </ul>有序列表：
<ol> <li>第一个项目</li> <li>第二个项目</li> <li>第三个项目</li> </ol>
（3）链接标签
<a>标签（超链接标签）
作用：用于创建超链接，可以将用户从当前页面引导到其他 页面、同一页面的其他位置或者文件下载链接等。
（4）图像标签
<img>标签
作用：用于在网页中插入图像。
示例：<img srv="image.jpg" alt="风景图”>。src属性 指定图像文件的路径（可以是相对路径或绝对路径），alt 属性是图像的替代文本。当图像无法加载时，浏览器会显示 alt文本；同时，对于屏幕阅读器等辅助工具，alt文本可以 帮助用户理解图像内容。
（5）表格标签
<table>标签（表格整体）
作用：用于创建表格结构，它包含了表格的行和列等元素。
示例：
<table> <tr> <td>第一行第一列</td> <td>第一行第二列</td> </tr> <tr> <td>第二行第一列</td> <td>第二行第二列</td> </tr> </table><tr>标签表示表格行（Table Row），<td>标签表示表格列(Table Data)
（6）表单标签
<form>标签（表单整体）
作用：用于创建一个表单，用户可以通过表单输入信息并提 交给服务器。
示例：
<form action="submit.php" method="post"> <label for="username">用户名：</label> <input type="text" id="username" name="username"> <input type="submit" value="提交"> </form>action属性，指定了表单提交后数据处理的脚本文件（这里是 submit.php，实际应用中可以是任何服务器端脚本语言编写的处理程 序）
method属性指定了数据提交的方式（这里是post，还有get方式等）
<label>标签用于为表单元元素提供说明
<input>标签用于创建各种输入框，如文本输入框、密码输入框，按 钮等
标签：hyml,网页,HTML,示例,标签,黑客,用于,超文本,浏览器 From： https://blog.csdn.net/m0_73699202/article/details/144028560