网络安全-HTML基础
声明
学习视频来自 B 站UP主泷羽sec，如涉及侵权马上删除文章。
笔记的只是方便各位师傅学习知识，以下网站只涉及学习内容，其他的都与本人无关，切莫逾越法律红线，否则后果自负。
✍🏻作者简介：致力于网络安全领域，目前作为一名学习者，很荣幸成为一名分享者，最终目标是成为一名开拓者，很有趣也十分有意义
🤵♂️ 个人主页： @One_Blanks
欢迎评论 💬点赞👍🏻 收藏 📂加关注+
X：NO SYSTEM IS SAFE
HTML简介
-
HTML 是用来描述网页的一种语言
-
HTML 指的是超文本标记语言
-
HTML 不是一种编程语言，而是一种标记语言
-
HTML 使用标记标签来描述网页
-
HTML 文档包含标签与文本内容
-
HTML文档也叫做web页面
HTML基本结构概述
<!DOCTYPE html>声明：位于文档最前端，表明这是 HTML5 文档，让浏览器按 HTML5 标准解析页面。<html>元素：是 HTML 文档的根元素，其他元素都嵌套其中，有开始<html>和结束</html>标签，就像一个容器，包裹着整个网页的内容。<head>元素（包含元数据）<meta>标签：如<meta charset="UTF - 8">指定字符编码，还有用于搜索引擎的其他元信息标签。<title>标签：定义浏览器标签页和搜索引擎结果中的标题。
<body>元素（包含可见内容）：如文本（用<p>等标签）、图像（<img>标签）、链接（<a>标签）等。
这种结构为浏览器解析和显示网页内容提供了清晰的框架
下面是一个简单的HTML基本结构示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF - 8">
<title>一个简单的网页</title>
</head>
<body>
<h1>欢迎来到我的网页</h1>
<p>这是网页的主要内容部分。</p>
</body>
</html>
首先是文档类型声明，然后是<html>根元素。<head>部分包含了字符编码设置和页面标题，<body>部分则包含了一个一级标题<h1>和一个段落<p>
head内标签
<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, initial - scale = 1.0">。这个标签用于控制网页在移动设备上的显示方式。width=device - width表示网页的宽度应该等于设备的屏幕宽度，initial - scale = 1.0表示初始缩放比例为 1.0，即不进行缩放。这样可以确保网页在移动设备上能够自适应屏幕大小
- 示例：
- 字符编码设置：
<title>标签- 示例：
<title>HTML Head标签详解 - 学习网页基础知识</title>。这个标签定义了网页的标题。当网页在浏览器中打开时，标题会显示在浏览器的标签栏上。
- 示例：
<link>标签- 样式表链接：
- 示例：
<link rel="stylesheet" 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 像素的图标文件，它可以帮助用户快速识别网页。
- 示例：
- 样式表链接：
<script>标签（在中部分应用）- 外部脚本链接：
- 示例：
<script src="script.js" defer></script>。这个标签用于引入外部的 JavaScript 脚本文件。src="script.js"指定了脚本文件的路径，defer属性表示脚本会在文档解析完成后延迟执行。JavaScript 可以用于实现网页的交互功能，如菜单的展开和折叠、表单验证等。
- 示例：
- 内联脚本：
- 示例：
<script> function showMessage() { alert('欢迎来到这个网页！'); } </script>。这是一个内联脚本的例子，直接将 JavaScript 代码写在<script>标签内。
- 示例：
- 外部脚本链接：
body内标签
-
文本相关标签
<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>。</p>。
- 作用：
-
列表标签
-
<ul>和<ol>标签（无序列表和有序列表）- 作用：
<ul>标签用于创建无序列表，列表项前面通常是一个实心圆点（可以通过 CSS 样式修改）；<ol>标签用于创建有序列表，列表项前面会有数字或字母等顺序标记。 - 示例：
无序列表：
<ul> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> </ul>有序列表：
- 作用：
<ol>
<li>第一个项目</li>
<li>第二个项目</li>
<li>第三个项目</li>
</ol>
- 链接标签
<a>标签（超链接标签）- 作用：用于创建超链接，可以将用户从当前页面引导到其他页面、同一页面的其他位置或者文件下载链接等。
- 示例：
- 链接其他网站：
<a href="https://www.baidu.com">访问示例网站</a>。当用户点击 “访问示例网站” 这几个字时，浏览器会跳转到https://www.baidu.com这个网址。 - 链接到同一页面内的锚点（假设页面中有一个
<div id="section - 2">的元素）：<a href="#section - 2">跳转到第二部分</a>。用户点击这个链接后，页面会滚动到id为section - 2的元素位置。 - 下载链接（假设要下载一个名为
document.pdf的文件）：<a href="document.pdf" download>下载文档</a>。download属性表示这是一个下载链接，当用户点击 “下载文档” 时，浏览器会下载document.pdf文件。
- 链接其他网站：
- 图像标签
<img>标签- 作用：用于在网页中插入图像。
- 示例：
<img src="image.jpg" alt="风景图">。src属性指定图像文件的路径（可以是相对路径或绝对路径），alt属性是图像的替代文本。当图像无法加载时，浏览器会显示alt文本；同时，对于屏幕阅读器等辅助工具，alt文本可以帮助用户理解图像内容。
- 表格标签
-
<table>标签（表格整体）- 作用：用于创建表格结构，它包含了表格的行和列等元素。
- 示例：
<table> <tr> <td>第一行第一列</td> <td>第一行第二列</td> </tr> <tr> <td>第二行第一列</td> <td>第二行第二列</td> </tr> </table><tr>标签表示表格行（Table Row），<td>标签表示表格列（Table Data）。
- 表单标签
<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>标签用于为表单元素提供说明
=“提交”>
```action属性，指定了表单提交后数据处理的脚本文件（这里是submit.php，实际应用中可以是任何服务器端脚本语言编写的处理程序）
method属性指定了数据提交的方式（这里是post，还有get方式等）
<label>标签用于为表单元素提供说明
<input>标签用于创建各种输入框，如文本输入框、密码输入框、按钮等
原文地址：https://blog.csdn.net/NPSM_/article/details/143722661
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！