【网络安全入门篇】之Web基础和HTML，从零基础入门到精通，收藏这一篇就够了！
【网络安全入门篇】之Web基础和HTML（一）
一、什么是HTML
HTML 的全称是超文本标记语言（HyperText Markup Language），它并非编程语言（没有逻辑执行能力），而是一种用于描述网页结构和内容的标记语言。
其核心是通过一系列标签（如<p>表示段落、<img>表示图片、<a>表示链接） 定义网页中的元素 —— 这些元素可以是文本、图像、链接、表格、音频、视频等。通过标签将元素有序组合，就能形成完整的网页结构，让浏览器能 “读懂” 并正确展示内容。
例如：用<h1>标签标记文章标题，用<p>标签包裹正文段落，浏览器会根据标签规则自动区分标题和正文的显示样式。
二、HTML的作用
HTML 是网页开发的 “基础骨架”，其核心作用是搭建网页的基础结构并定义内容的呈现逻辑。简单来说，它决定了网页上 “有什么”（比如标题、图片、按钮等元素）以及 “这些元素按什么顺序排列”（比如先显示标题，再显示正文，最后显示底部链接）。没有 HTML，网页就失去了最基本的内容载体。
三、网站的组成部分
在了解网页组成前，先明确两个基础概念：
-
**网站：**由多个相互关联的网页组成的整体（比如 “百度” 网站包含首页、搜索结果页、新闻页等多个网页），通过链接实现网页间的跳转。
-
网页：浏览器中打开的单个页面，是网站的基本组成单位。
一个完整的网页功能和呈现效果，由三个核心技术共同实现，三者分工明确又协同工作：
| 技术 | 作用定位 | 通俗理解 | 举例说明 |
|---|---|---|---|
| HTML | 网页的 “骨架” | 决定网页有哪些元素 | 用标签定义 “标题、图片、按钮” 等元素 |
| CSS（层叠样式表） | 网页的 “皮囊” | 美化元素样式和排版 | 设置标题颜色为蓝色、图片大小为 200px |
| JavaScript（简称 JS） | 网页的 “动作与逻辑” | 让网页有交互和动态效果 | 点击按钮后弹出提示框、图片轮播切换 |
简单总结：HTML 搭好架子，CSS 让架子变好看，JS 让架子 “动起来”。
四、常用的开发工具
VSCode（Visual Studio Code） 是目前主流的轻量级代码编辑器，因其免费、插件丰富、支持 HTML 等多种语言开发，成为网页开发的首选工具之一。
打开软件工具，创建一个专属的文件夹，用VScode打开文件夹。新建一个.html结尾的文件，使用快捷键!+回车可以快速生成网页框架。
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body>
</body></html>
HTML基础
一、HTML的标题
HTML 标题通过 **<h1>到<h6>标签 ** 定义，从<h1>（一级标题，最大最醒目）到<h6>（六级标题，最小），级别依次降低，用于区分内容的层级关系（如文章的大标题、小标题、子标题）。
将HTML代码写在标签内
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body>
<h1>这是一级标题（通常用于页面主标题）</h1>
<h2>这是二级标题（用于章节标题）</h2>
<h3>这是三级标题（用于小节标题）</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是六级标题（级别最低）</h6></body></html>
二、HTML的段落
HTML 段落通过 **<p>标签 ** 定义，用于包裹连续的文本内容。
<p>标签的特点：
- 自动在段落前后添加空白（换行 + 间距），区分不同段落；
- 标签本身无样式，但可通过 CSS 修改（如行高、颜色等）。
<p>这是第一个段落。段落标签会自动在内容前后添加空白，让文本排版更清晰。
</p><p>这是第二个段落。即使在代码中两行文本紧挨着，浏览器也会按段落规则分隔显示。</p>
三、HTML 链接
<a href="https://www.baidu.com">点击跳转到百度</a>
四、HTML图像
图像通过 **<img>标签 ** 插入（自闭合标签，无需结束符），核心是通过属性指定图片路径和显示样式。
常用属性：
- src**：**必选，指定图片路径（本地图片写相对路径，如
images/logo.png；网络图片写完整网址）； - width**/
height：**可选，设置图片宽度和高度（单位通常为px）； alt**：**可选，图片加载失败时显示的替代文本（提升 accessibility accessibility，即无障碍性）。
<!-- 插入本地图片 --><img src="images/photo.jpg" width="300px" alt="风景照片"><!-- 插入网络图片 --><img src="https://img.example.com/logo.png" height="100px" alt="网站logo">
五、HTML的属性
HTML 元素的属性用于给标签添加附加信息（如样式、功能），格式为属性名="属性值"，写在开始标签内。
例如：<标签名 属性1="值1" 属性2="值2">内容</标签名>。
常用基础属性及说明：
| 属性 | 作用 | 示例 |
|---|---|---|
id | 唯一标识元素（页面内不可重复） | <p id="intro">引言</p> |
class | 为元素定义类别（可重复，用于批量样式） | <span class="highlight">重点</span> |
style | 直接定义元素的行内样式（CSS） | <h1 style="color: red">标题</h1> |
1. HTML 样式（通过style属性）
style属性可直接在标签内定义 CSS 样式，常用样式如下：
-
背景颜色（
background-color）：设置元素背景色
<h1 style="background-color: #ff359b">粉色背景标题</h1><p style="background-color: lightblue">浅蓝色背景段落</p>
-
字体颜色（color）:设置文本颜色
<p style="color: green">绿色文本</p>
2. 字体样式（font-family）
用于指定文本字体（优先使用系统已安装的字体），多个字体用逗号分隔（前面字体不存在时，自动使用后面的备选字体）。
<!-- 指定单个字体 --><h1 style="font-family: 楷体">楷体标题</h1><!-- 带备选字体 --><p style="font-family: 'Microsoft YaHei', SimHei, sans-serif">优先显示微软雅黑，无则显示黑体</p>
常见中文字体对应代码：
- 宋体：
SimSun - 黑体：
SimHei - 微软雅黑：
Microsoft YaHei - 楷体：
KaiTi
3. 字体大小（font**-size****）**
设置文本大小，单位常用px（像素）、em（相对父元素）等。
<p style="font-size: 16px">16像素的文本（适合正文）</p><h3 style="font-size: 24px">24像素的标题</h3>
4. 文本对齐（text-align）
设置文本水平对齐方式，常用值：left（左对齐，默认）、center（居中）、right（右对齐）。
<h1 style="text-align: center">居中对齐的标题</h1><p
style="text-align: right">右对齐的段落</p>
文章来自网上，侵权请联系博主
互动话题：如果你想学习更多网安方面的知识和工具，可以看看以下题外话！
题外话
今天只要你给我的文章点赞，我私藏的网安学习资料一样免费共享给你们，来看看有哪些东西。
网络安全学习资源分享:
下面给大家分享一份2025最新版的网络安全学习路线资料，帮助新人小白更系统、更快速的学习黑客技术！
一、2025最新网络安全学习路线
一个明确的学习路线可以帮助新人了解从哪里开始，按照什么顺序学习，以及需要掌握哪些知识点。
对于从来没有接触过网络安全的同学，我们帮你准备了详细的学习成长路线图&学习规划。可以说是最科学最系统的学习路线，大家跟着这个大的方向学习准没问题。
读者福利 | CSDN大礼包：《网络安全入门&进阶学习资源包》免费分享 （安全链接，放心点击）
我们把学习路线分成L1到L4四个阶段，一步步带你从入门到进阶，从理论到实战。
L1级别:网络安全的基础入门
L1阶段：我们会去了解计算机网络的基础知识，以及网络安全在行业的应用和分析；学习理解安全基础的核心原理，关键技术，以及PHP编程基础；通过证书考试，可以获得NISP/CISP。可就业安全运维工程师、等保测评工程师。
L2级别：网络安全的技术进阶
L2阶段我们会去学习渗透测试：包括情报收集、弱口令与口令爆破以及各大类型漏洞，还有漏洞挖掘和安全检查项目，可参加CISP-PTE证书考试。
L3级别：网络安全的高阶提升
L3阶段：我们会去学习反序列漏洞、RCE漏洞，也会学习到内网渗透实战、靶场实战和技术提取技术，系统学习Python编程和实战。参加CISP-PTE考试。
L4级别：网络安全的项目实战
L4阶段：我们会更加深入进行实战训练，包括代码审计、应急响应、红蓝对抗以及SRC的挖掘技术。并学习CTF夺旗赛的要点和刷题
整个网络安全学习路线L1主要是对计算机网络安全的理论基础的一个学习掌握；而L3 L4更多的是通过项目实战来掌握核心技术，针对以上网安的学习路线我们也整理了对应的学习视频教程，和配套的学习资料。
二、技术文档和经典PDF书籍
书籍和学习文档资料是学习网络安全过程中必不可少的，我自己整理技术文档，包括我参加大型网安行动、CTF和挖SRC漏洞的经验和技术要点，电子书也有200多本，（书籍含电子版PDF）

三、网络安全视频教程
对于很多自学或者没有基础的同学来说，书籍这些纯文字类的学习教材会觉得比较晦涩难以理解，因此，我们提供了丰富的网安视频教程，以动态、形象的方式展示技术概念，帮助你更快、更轻松地掌握核心知识。
网上虽然也有很多的学习资源，但基本上都残缺不全的，这是我自己录的网安视频教程，上面路线图的每一个知识点，我都有配套的视频讲解。
四、网络安全护网行动/CTF比赛
学以致用 ，当你的理论知识积累到一定程度，就需要通过项目实战，在实际操作中检验和巩固你所学到的知识，同时为你找工作和职业发展打下坚实的基础。

五、网络安全工具包、面试题和源码
“工欲善其事必先利其器”我为大家总结出了最受欢迎的几十款款黑客工具。涉及范围主要集中在 信息收集、Android黑客工具、自动化工具、网络钓鱼等，感兴趣的同学不容错过。

面试不仅是技术的较量，更需要充分的准备。
在你已经掌握了技术之后，就需要开始准备面试，我们将提供精心整理的网安面试题库，涵盖当前面试中可能遇到的各种技术问题，让你在面试中游刃有余。
如果你是要找网安方面的工作，它们绝对能帮你大忙。
这些题目都是大家在面试深信服、奇安信、腾讯或者其它大厂面试时经常遇到的，如果大家有好的题目或者好的见解欢迎分享。
参考解析：深信服官网、奇安信官网、Freebuf、csdn等
内容特点：条理清晰，含图像化表示更加易懂。
内容概要：包括 内网、操作系统、协议、渗透测试、安服、漏洞、注入、XSS、CSRF、SSRF、文件上传、文件下载、文件包含、XXE、逻辑漏洞、工具、SQLmap、NMAP、BP、MSF…
**读者福利 |** CSDN大礼包：《网络安全入门&进阶学习资源包》免费分享 （安全链接，放心点击）
更多推荐
25
0- 0
已为社区贡献33条内容
所有评论(0)