一、网安学习成长路线图
网安所有方向的技术点做的整理,形成各个领域的知识点汇总,它的用处就在于,你可以按照上面的知识点去找对应的学习资源,保证自己学得较为全面。
二、网安视频合集
观看零基础学习视频,看视频学习是最快捷也是最有效果的方式,跟着视频中老师的思路,从基础到深入,还是很容易入门的。
三、精品网安学习书籍
当我学到一定基础,有自己的理解能力的时候,会去阅读一些前辈整理的书籍或者手写的笔记资料,这些笔记详细记载了他们对一些技术点的理解,这些理解是比较独到,可以学到不一样的思路。
四、网络安全源码合集+工具包
光学理论是没用的,要学会跟着一起敲,要动手实操,才能将自己的所学运用到实际当中去,这时候可以搞点实战案例来学习。
五、网络安全面试题
最后就是大家最关心的网络安全面试题板块
网上学习资料一大堆,但如果学到的知识不成体系,遇到问题时只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升。
一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!
- 元素可以拥有属性,属性包含元素的额外信息。
接下来我们来看下以上这几个标签各自的作用。
3. HTML页面结构
(1)DOCTYPE
<DocTYPE HTML>
,常放在 HTML
文档最前面的位置,加上之后就会按照 W3C
的 HTML5
标准来解析渲染页面。
(2)html
<html>
,是网页的根元素,包含整个页面的内容。
(3)head
<head>
,此标签对用户不可见,其中包括像面向搜索引擎的关键字、页面描述、字符编码声明、CSS样式等内容。
(4)body
<body>
,该元素包含能够被用户访问到的内容,包括文本、图像、视频、游戏、音频等等内容。
(5)meta
<meta>
,常设置的内容有: charset/name/http-equiv
。下面给出一些常用的配置信息。
<meta charset="utf-8">定义文档字符编码
<meta name="keywords" content="HTML"> 关键字
<meta name="description" content="HTML基础">页面描述
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">主要用于移动端,定义设备屏幕上用来显示网页的区域
<meta http-equiv="expires" content="31 Dec 2021">http头部
下面给出一个自定义meta的网站,大家可以自行查阅~
https://wiki.whatwg.org/wiki/MetaExtennsions
(6)title
<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
支持在遇到 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. 图例
下面我们用一张图来来了解这三种常用该元素的区别。具体如下图:
😏五、语义化
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
- 在引用中使用,表示需要引起注意。
还有兄弟不知道网络安全面试可以提前刷题吗?费时一周整理的160+网络安全面试题,金九银十,做网络安全面试里的显眼包!
王岚嵚工程师面试题(附答案),只能帮兄弟们到这儿了!如果你能答对70%,找一个安全工作,问题不大。
对于有1-3年工作经验,想要跳槽的朋友来说,也是很好的温习资料!
【完整版领取方式在文末!!】
93道网络安全面试题
内容实在太多,不一一截图了
黑客学习资源推荐
最后给大家分享一份全套的网络安全学习资料,给那些想学习 网络安全的小伙伴们一点帮助!
对于从来没有接触过网络安全的同学,我们帮你准备了详细的学习成长路线图。可以说是最科学最系统的学习路线,大家跟着这个大的方向学习准没问题。
1️⃣零基础入门
① 学习路线
对于从来没有接触过网络安全的同学,我们帮你准备了详细的学习成长路线图。可以说是最科学最系统的学习路线,大家跟着这个大的方向学习准没问题。
② 路线对应学习视频
同时每个成长路线对应的板块都有配套的视频提供:
网上学习资料一大堆,但如果学到的知识不成体系,遇到问题时只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升。
一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!