网络安全最全值得关注的HTML基础，2024年最新一线互联网架构师设计思想解读开源框架

最新推荐文章于 2024-06-18 14:38:23 发布

2401_84297560

最新推荐文章于 2024-06-18 14:38:23 发布

阅读量583

点赞数 16

分类专栏：程序员文章标签：网络安全学习面试

本文链接：https://blog.csdn.net/2401_84297560/article/details/138872521

版权

程序员专栏收录该内容

165 篇文章 0 订阅

订阅专栏

本人从事网路安全工作12年，曾在2个大厂工作过，安全服务、售后服务、售前、攻防比赛、安全讲师、销售经理等职位都做过，对这个行业了解比较全面。

最近遍览了各种网络安全类的文章，内容参差不齐，其中不伐有大佬倾力教学，也有各种不良机构浑水摸鱼，在收到几条私信，发现大家对一套完整的系统的网络安全从学习路线到学习资料，甚至是工具有着不小的需求。

最后，我将这部分内容融会贯通成了一套282G的网络安全资料包，所有类目条理清晰，知识点层层递进，需要的小伙伴可以点击下方小卡片领取哦！下面就开始进入正题，如何从一个萌新一步一步进入网络安全行业。

学习路线图

其中最为瞩目也是最为基础的就是网络安全学习路线图，这里我给大家分享一份打磨了3个月，已经更新到4.0版本的网络安全学习路线图。

相比起繁琐的文字，还是生动的视频教程更加适合零基础的同学们学习，这里也是整理了一份与上述学习路线一一对应的网络安全视频教程。

网络安全工具箱

当然，当你入门之后，仅仅是视频教程已经不能满足你的需求了，你肯定需要学习各种工具的使用以及大量的实战项目，这里也分享一份我自己整理的网络安全入门工具以及使用教程和实战。

项目实战

最后就是项目实战，这里带来的是SRC资料&HW资料，毕竟实战是检验真理的唯一标准嘛~

面试题

归根结底，我们的最终目的都是为了就业，所以这份结合了多位朋友的亲身经验打磨的面试题合集你绝对不能错过！

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化资料的朋友，可以点击这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

<title> ，表示页面的标题，经常显示在浏览器的标签页上。

（7）style

<style> ，是 CSS 的样式。

（8）link

<link> ，表示跳转链接。下面给出几种常见的 link 方式。具体如下：

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
当前页面的favicon

<link rel="stylesheet" href="my-css-file.css">
链接到样式表

<link href="fancy.css" rel="alternate stylesheet" type="text/css" title="Fancy">
可替换的样式表

（9）script

<script> 表示可执行脚本。通常引用的方式如下：

<script type="text/javascript" src="javascript.js"></script>

下面我们来了解它的两个属性：

defer：立即下载，延迟执行，表示脚本可以等到 dom 被完全解析和显示之后再执行，只对外部脚本有效。有 defer 属性的脚本会阻止 DOMContentLoaded 事件，直到脚本被加载并且解析完成。
async：立即下载脚本，且不妨碍其他操作，比如在下载其他资源或者加载其他脚本的时候，只对外部脚本有效。

我们用一张图来展示这两者的区别，具体如下图：

async和defer

大家可以看到， async 支持在遇到 js 文件时，立即下载脚本。而对于 defer 来说，它只能前面的 js

内容先全部加载完，再进行执行操作。

😛四、常用元素

1. 三种常用元素

（1）内联元素

只占据它自己对应标签的边框所包含的空间。
只能容纳文本或其他内联元素。
只能通过修改水平边距、边框或者行高的方式改变尺寸。
常用的内联元素有： <a>、 <span> 、 <br> 、 <i> 、 <em> 、 <strong> 、 <label> 、 <q> 、 <var> 、 <cite> 、 <code> 。

（2）行内块级元素

元素在行内排列，不会独占一行。
支持设置宽高以及垂直边距、边框。
常用的内联元素： <img> 、 <input> 、 <td> 。

（3）块级元素

占据其父元素的整行，总是从新的一行开始。
能容纳其他块元素或者内联元素。
可以控制宽高、行高、边距、边框等改变其尺寸。
常用的块级元素： <div>、 <p> 、 <h1>-<h6> 、 <ol> 、 <ul> 、 <dl> 、 <table> 、 <address> 、 <blockquote> 、 <form> 。

2. 图例

下面我们用一张图来来了解这三种常用该元素的区别。具体如下图：

3种常用元素

😏五、语义化

1. 定义

所谓语义化，即根据内容的结构，选择合适的标签来构建出便于开发者阅读的可维护性更高的代码结构，同时能够让机器更好地解析。如下所示：

<div class="header"></div>
<div class="section">
	<div class="article">
    	<div class="figure">
        	<img>
            <div class="figcaption"></div>
        </div>
    </div>
</div>
<div class="footer"></div>

<header></header>
<section>
	<section>
    	<figure>
        	<img>
            	<figcaption></figcaption>
        </figure>
    </section>
</section>
<footer></footer>

2. 常见语义化标签解析

接下来我们来看一下一些常见的语义化标签，具体如下。

（1）语义化 - 区块类别标签

1）header

header 主要用于展现一些介绍性信息。
通常包含⼀组介绍性或是辅助导航的元素，如标题、 Logo 、搜索框、作者名称等。
不能放在 <footer> 、 <address> 或者另⼀个 <header> 元素内部。

比如：

<header>
	<h1>HTML</h1>
    <P><time pubdate datetime="2021-08-15"></time></P>
</header>

2）nav

在当前⽂档或其他⽂档中提供导航链接，如菜单、⽬录、索引等。
⽤来放置⼀些热⻔的链接，不常⽤的链接通常放到 footer ⾥置于底部。

比如：

<nav>
	<ol>
        <li><a href="#">HTML</a></li>
        <li><a href="#">css</a></li>
        <li><a href="#">js</a></li>
    </ol>
</nav>

3）article

独⽴的⽂档、页面、应⽤、站点。
可独⽴分配的或可复⽤的结构，如论坛帖⼦、新闻⽂章、博客、⽤户提交的评论、交互式组件等。

比如：

<article class="forecast">
    
    <h1>广州的天气预报</h1>
    
    <article class="day-forecast">
        <h2>2021.08.15</h2>
        <p>多云</p>
    </article>
    
    <article class="day-forecast">
        <h2>2021.08.16</h2>
        <p>晴天</p>
    </article>
    
</article>

4）section

按主题将内容分组，通常会有标题。
<section> 通常出现在⽂档的⼤纲中。
不要把 <section> 作为普通容器来使用，比如说用于美化片段样式，此时用 <div> 更合适。
如果元素里边是独立的整块的内容，可以单独发布，则更适合用 <article> 。

比如：

<h1>选择一个苹果</h1>
<section>
    <h2>介绍</h2>
    <p>这个文档将提供一个引导，帮助选择一个正确的苹果</p>
</section>
<section>
    <h2>标准</h2>
    <p>对于选择一个苹果来说，有很多不同的标准，比如尺寸，颜色，甜度等等标准</p>
</section>

5）aside

表示一个和其余页面内容几乎无关的部分，或者说单独拆出来不会影响整体的内容。
通常放在侧边栏，用于展示广告、 tips 、引用内容等等。

比如：

<p>今天天气还不错，我决定去踏青</p>
<aside>
	<h4>野餐</h4>
    <P>准备号各种各样的食物，大概早上9点钟出发去野餐。</P>
</aside>

6）footer

表示最近一个章节的页脚。
通常包含该章节作者、版权数据或者文档链接等信息。
footer 内的元素不属于章节内容，不包含在大纲中。

比如：

<footer>
	<h1>版权号 by monday</h1>
    <P><time pubdate datetime="2021-08-15"></time></P>
</footer>

（2）语义化 - 分组类别标签

1）figure/figcaption

<figure> 包裹被独⽴引⽤的内容：图表、插图、代码等，通常会有个标题；
<figcaption> 与其相关联的图表的说明/标题，通常位于 <figure> 的第⼀个或最后⼀个。

比如：

<figure>
    <img 
 src="https://developer.mozilla.org/static/img/favicon144.png" 
 alt="A robotic monster over the letters MDN.">
    <figcaption>MDN logo</figcaption>
</figure>

2）blockquote

块级引⽤元素。
cite 属性表示该来源的 url 。

比如：

<figure>
    <blockquote cite="https://www.huxley.net/bnw/one.html">
        <p>Words can be X-rays, if you use them properly - they'll go through anything.</p>
    </blockquote>
    <figcaption>-Aldous Huxley, <cite>Brave New World</cite></figcaption>
</figure>

3）dl/dt/dd

用于描述一组键值对。
通常用于元数据、术语定义等场景。

<dl>
	<dt>FireFox</dt>
	<dd>A free, open source, cross-platform.</dd>
</dl>

（3）语义化 - 文本标签

1）cite

<cite> 元素通常用于引用作品标题。
包括论文、文件、书籍、电影等的引用。

2）time

机器可读的时间和日期。
datetime 表示此元素关联的时间日期，若不指定则该元素不会被解析为日期。

3）address

表示某个人或组织的联系信息。

4）mark

在引用中使用，表示需要引起注意。

5）code

表示代码片段。

6）small

表示免责声明、注意事项等等信息。

（4）语义化 - 多媒体元素标签

1）img

src 属性是必须的，嵌⼊图⽚的⽂件路径。
alt 属性包含⼀条对图像的⽂本描述，⾮强制。屏幕阅读器会将这些描述读给需要使⽤阅读器的使⽤者听，让他们知道图像的含义。图像⽆法加载时(⽹络错误、内容被屏蔽或链接过期时)，浏览器会在⻚⾯上显示 alt 属性中的⽂本。
decoding 解码⽅式：异步、同步。
loading 懒加载。

2）picture

元素通过包含零或多个 <source> 元素和⼀个 <img> 元素来为不同的。
显示/设备场景提供相应的图像版本。
media 属性：依据的媒体条件渲染相应的图⽚，类似媒体查询。
type 属性： MIME 类型，根据浏览器⽀持性渲染相应的图⽚。

3）音视频

所谓音视频标签，即 <video></video> 和 <audio></audio> 标签。
src 属性是必须的，嵌⼊视频⽂件路径。
controls 表示是否展示浏览器⾃带的控件，同时可以创建⾃定义控件。
autoplay 是否⾃动播放。
source 元素表示视频的可替代资源(不同格式、清晰度，读取失败或⽆法解码时可以依次尝试)。

比如：

<video controls>
    <source src="/flower.webm" type="video/webm">
    <source src="/flower.mp4" type="video/mp4">
    Sorry, your brower doesn't support embedded videos.


## 写在最后

**在结束之际，我想重申的是，学习并非如攀登险峻高峰，而是如滴水穿石般的持久累积。尤其当我们步入工作岗位之后，持之以恒的学习变得愈发不易，如同在茫茫大海中独自划舟，稍有松懈便可能被巨浪吞噬。然而，对于我们程序员而言，学习是生存之本，是我们在激烈市场竞争中立于不败之地的关键。一旦停止学习，我们便如同逆水行舟，不进则退，终将被时代的洪流所淘汰。因此，不断汲取新知识，不仅是对自己的提升，更是对自己的一份珍贵投资。让我们不断磨砺自己，与时代共同进步，书写属于我们的辉煌篇章。**


需要完整版PDF学习资源私我



**网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

**[需要这份系统化资料的朋友，可以点击这里获取](https://bbs.csdn.net/forums/4f45ff00ff254613a03fab5e56a57acb)**

**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**