位小伙伴好,黑客技术离不开代码,做为一个渗透测试工程师,也一定要有一些代码基础。网络安全行业,现在人才缺口大,再加上就业形势又很严峻,介于这些,我们想培养一批优秀的网络安全人才,将对网络安全行业、黑客技术,以及渗透测试技术感兴趣的小白培养成精英。
跟随我们,不管你有多白,都可以逐步进入网络安全行业,并最终在这个行业找到高薪职业。
然后呢,我要说一句,关于“黑客”可能并不是大多数人所了解的那样。关于这些,可以参考:什么是黑客?什么是渗透测试?2分钟看完这800多字你就懂了
那么,我们就先从代码基础——HTML的基本语方开始。
首先给大家描述三个概念:语言、程序、代码之前的关系。
首先我们就要搞清楚什么是语言?可能说HTML语言不太好理解,那么我们想一想日常生活当中比较常见的我们中国人彼此之间都会交流,是不是叫做汉语呢?所以说汉语就是一门语言。
那么这时候大家脑子里面就可以构思一下啊什么样的东西大致就是语言了。它应该是一种沟通交流的一种方法的一个集合,包括我们如何发音,如何写字,这些字如何拼在一起,能够产生具体的意义,有一定的含义,这些所有所有的集合在一起,形成了一套规则,然后大家都去遵循这套规则,就能够彼此交流,那么这就叫做语言。
我们再举一个例子,比如说英国人或者美国人,他们也有自己的语言,叫做英语,那么我在这里就是换了另一种语言,
了解了语言之后,我们就再来看一看,什么是代码,那代码跟我们日常生活中的这种能够联系起来的又是什么东西呢?
我们还是拿汉语来做比喻哈,我们说汉语就是一种交流沟通的一种规则,它是一门语言。在大家小的时候肯定就会去学这门语言。这门学科在小学的时候就叫语文,对吧。那么我们上语文课的时候,就要学一些最基础的有关语言的东西,比如说汉语拼音生字词,当时要记很多的这种生字生词,那么他是不是可以理解成是我们汉语的一种最基本的那种组成结构?
那么英语呢?我们在学习英语的时候也会去记一些东西啊,就比如英文字母,紧接着就是背各种各样的单词,是不是当我们单词量有了一定的积累之后,我们对这个语言呢就掌握得更深刻了。
那么汉语要背生字词,英语呢要背单词,这些最基本的组成结构。那么在程序语言里面,代码就可以理解成是生字词或者是单词。
最后,我们再来看看什么是程序。它是由很多很多一行一行的代码组成在一起,能够完成一个综合性的或者一个比较大的一个目标的这样的一个代码的集合。
那么我们对照一下自然的这种语言,比如说汉语英语呢它是什么样?好多的文字放在一起,是不是句子?或者说再多一点儿就是一篇文章。一篇文章甚至再大一点儿可能是一本书,
那么汉语能写文章,用英语英文也能写文章,这个文章可大可小,可能几千字能大一点儿的一本书,也可以理解成是文章,那么用生字词组成的这种集合就成了文章了。然后我们再谈程序,它是什么呢?对照一下大家可能就理解了,它就是一个由代码组成的文章。
那么回过头来我们看我们要学的HTML语言,它也是一门语言,只不过呀它跟我们理解的汉语和英语有一定的区别。
汉语的主流是中国人之间交流的时候沟通的时候用的语言。那么英语呢应用的比较广泛,是一些英语国家之间彼此交流沟通的时候用的语言。那么HTML语言它也是一种语言,只不过它不是人和人之间去交流的语言,那么它到底是做什么用的呢?我们来看一下HTML的概念。
HTML中文名称叫做超文本标记语言,用HTML编写的超文本文档称为HTML文档。它能够独立于各种操作系统平台,使用HTML语言将所需要表达的信息按某种规则写成HTML文件,通过专用的浏览器来识别,并将这些HTML文件翻译成可以识别的信息,即现在所见到的网页。
那么从中我们能看到什么呢?首先我们知道它的中文名称了。HTML叫做超文本标记语言。
那么再往下我们看他提到了。
在这里浏览器是吧?提到了浏览器,那么这时候我们就知道了HTML语言啊它是一种与浏览器之间进行交流的这么一种语言。就是我们去写一些代码,那么写这些代码的目的是什么呢?目的就是为了和浏览器去交流,只要我们写的这个东西浏览器能看得懂,他就会根据我们写的代码呈现出最终的网页。这就是HTML语言的一个基本概念。
(1)HTML中的各种元素都是通过标记(标签)来表示。
(2)HTML当中的标签分为单标签和双标签。
(3)单标签格式为<名称/>,双标签格式为<名称></名称>。
(4)HTML对大小写不敏感。
然后,我们可以对照一下HTML的基本结构
(1)<html></html>
(2)<body></body>
(3)<head></head>
(4)<title></title>
首先,我们打开一个记事本。
单击窗口图片,在列表中找到记事本
然后在记事本中输入<html></html>,这表示告诉浏览器,这是一个标准的HTML网页。
在记事本中输入<html></html>
那么为什么是两个呢?前面1个,后面1个,这就有点类似于我们标点符号里边的括号,前面有一个开始,左半边括号后面有一个结束。右半边括号在这里也是前面的HTML表示网页从这儿开始,那么后边这个-html表示网页呢至此结束。
那我们网页这才刚开始就结束了呢,别着急,我们来看我在这里敲了几次回车把它分开了。那么表示什么意思呀?表示中间呀是有很多内容的,就是在网页开始到网页结束的中间是会有其他的东西的。
分开html开始和结束标签
我们接着往下看,第二个标签呢叫做<body></body>,里面的单词呢表示的是身体,那么它呢表示的就是网页的主体,这个网页的主体也属于基本结构,那么它在哪儿呢?注意啊网页的主体也属于网页,那么它呀要放在<html></html>的中间。
将<body></body>标签插入到<body></body>中
下面,我们开始将第3个标签<head></head>写入记事本,它代表头部。他表示头是吧?我们可以想象一下,这个脑袋注意它和身体之间到底应该是个什么样的关系呢?就我们想象有一个人站在那儿,脑袋应该是在上面,身子应该是在下边哈。所以注意我们这个<head>标签呀要放在<body></body>标签的上方。注意!它们之间没有包含关系!是一上一下的。
在<body></body>标签的上方插入<head></head>
最后一个叫做<title></title>这个单词的意思呢叫做标题。那么这个标题你应该放在哪?告诉大家,它属于网页的头部,在头部的里边。
好了,整理一下格式
插入<title></title>标签
我们来看4个基本结构的组成标签,我们都已经写到了这个文档里面了。
大家需要注意的是,我写的这种结构啊这个包含的关系非常重要。最外边是html表示网页开始,到网页结束,中间呢有头、身子,还有标题,那么头和身子是一上一下的关系,那么标题呢属于头部里边儿。要记住这个格式!
那么到现在为止呀我们这个网页的基本结构就算是真正写完了,我们把它保存一下。现在这个文档里边啊我们写的是网页的程序,虽然很简单,但它也是一个完整的网页了。
那么既然是一个网页,那我们如何能打开它看这个网页呢?注意这个HTML写出来的这个程序啊需要放在HTML文件里边,
那么我们怎么做呢?直接把这个记事本改后缀,他现在是个.txt文档,我们把这个文件的后面的txt扩展名改成html。
将.txt格式改成.html格式
双击“网页.html”,就会打开一个网页。
用代码创建的第1个初始网页
果然是用浏览器打开的一个网页,但是里边呢还没有东西是吧?空白的。
那么我们就来看一下,重新用记事本的方式把它打开。
我现在要想在里边简单的写点文字,哎我看看我这个网页是否能够正常显示。
那么在哪儿能够写文字呢?跟大家说一下,
在我们这个基本结构里啊有两个地方是可以写内容的,一个就是<body></body>主体,另外一个呢就是<title></title>标题,这两个地方中是可以写文字内容的。
右键单击这个html文件,选择打开方式→打开其他应用,然后找到记事本,用记事本打开。
用记事本打开html文件
然后在<title></title>中间写上“我的第一个网页”,<body></body>中间写上“这里是主体文字”
标签中间插入文字,让网页中有内容
好了,写完之后我们再保存。关闭这个窗口,重新打开看一下效果。那么大家看这会儿在网页里面显示出来了。首先呢在网页主体里边显示出了“这里是主体文字”,并且在页面的上方的标签呢显示的是“我的一个网页”。
用代码创建的第1个网页
那么我们今天的讲解你看懂了么?
带你学代码、学编程、学语言、学网络安全、学黑客技术、学渗透技术,逐步成为网络高手,拿到年薪30W+的offer,在网络江湖,从小刀客变成大侠。如果感兴趣,请关注我,私信我,可获得更多学习资料。
一、基本线条:
1、<HR>
2、align线条位置(可选left、right、center);width线条长度;color颜色;size厚度
<HRalign=center width=300 color=#987cb9SIZE=1>
二、特效(效果并不是孤立的,可相互组合)
1、两头渐变透明:
<HR style="FILTER:alpha(opacity=100,finishopacity=0,style=2)" width="80%"color=#987cb9 SIZE=10>
2、纺锤形:
<HR style="FILTER:alpha(opacity=100,finishopacity=0,style=1)" width="80%"color=#987cb9 SIZE=3>
3、右边渐变透明:
<HR style="FILTER:alpha(opacity=0,finishopacity=100,style=1)" width="80%"color=#987cb9 SIZE=3>
4、左边渐变透明:
<HR style="border:1 dashed #987cb9" width="80%"color=#987cb9 SIZE=1>
5、虚线:
<HR style="border:3 double #987cb9" width="80%"color=#987cb9 SIZE=3>
6、双线:
<HR style="FILTER:progid:DXImageTransform.Microsoft.Shadow(color:#987cb9,direction:145,strength:15)"width="80%" color=#987cb9 SIZE=1>
7、立体效果:
<HR style="FILTER:progid:DXImageTransform.Microsoft.Glow(color=#987cb9,strength=10)"width="80%" color=#987cb9 SIZE=1>
8、钢针效果:
<table border="1px" cellpadding="0" cellspacing="0"style="height:265px;border-left-style:solid;border-bottom-style:none;border-right-style:none;border-top-style:none">
9.垂直分割线
<table border="1px" cellpadding="0" cellspacing="0"style="height:265px;border-left-style:solid;border-bottom-style:none;border-right-style:none;border-top-style:none">
HTML代码:
<hr style="border: 1px dotted #FF0000; padding-left: 4px; padding-right: 4px; padding-top: 1px; padding-bottom: 1px">
[Ctrl+A 全部选择提示:你可先修改部分代码,再按运行]
你太美。
虽然第一个html代码写的非常随意,就四个字:鸡你太美。但是用浏览器打开之后确实是能看到是以网页的形式所展现的。这个现象就有点奇怪了,为什么?讲道理,只要是一种语言,必定有自己的语法格式,得按它的套路去写才能认为代码写的是对的,然后才能去正常的运行。
但是这里就四个字:鸡你太美,它就能把这个东西给显示出来,这是为什么?其实很简单。
·可以看一下,按一下F12,把浏览器的开发者工具给打开。
·然后选中elements标签页,如果是中文版,这里就应该是元素。
·这里有4行文本,这4行文本里面有没有一个比较熟悉的东西?鸡你太美这四个字是不是HTML代码里面写的东西?如果把这个东西改了,鸡你太美baby。
·然后就不再打开HTML文件了,直接按刷新。这里变成了鸡你太美baby,这里是不是也变成了鸡你太美baby。
·再比如加点东西,保存刷新,有没有发现什么规律?这里写什么,这一段就是什么,但其他地方是没变的。
所以有理由相信这份代码的完全体应该是什么?应该就是这个。所以先来把它复刻一下,尖括号。要注意,尖括号得是英文输入法下的尖括号。html,有个had,后面又有一个head,只不过head前面加了一个斜杠。至于这些东西到底是什么意思,等一下再说。
先把代码搞完,鸡左边有个body,后面有个body,下面又有一个斜杠。html好保存,然后刷新,效果和之前的阉割版是一样的。
然后来看一下这些尖括号到底是什么意思,其实还是挺简单的。首先在html里面,像这种用尖括号括起来的东西称之为元素。在国内有的人喜欢把它称为标签,其实都是一个意思,就是元素的意思。所以在这里有几种元素,很明显是三种,一种是html,一种是head,还有一种是body。
这个时候有的小白可能会问了,为什么有的前面是加了个斜杠的?其实是这样子的,在html里面有些元素是有包裹区间的,就比如body元素,body元素里面的数据或者叫内容是从哪到哪?很明显这个是开头,这个是结尾,然后掐头去尾,内容就在这,懂了吧?开头结尾。
所以head元素的数据在哪?就在这,什么都没有。head元素的数据在哪?很明显就是这个。知道元素的概念之后,接下来再看一下这几种元素都是什么意思。
·首先html元素是告诉浏览器,接下来是html代码。
·然后head还有body是什么意思?其实可以把HTML代码想象成是一个人,一个人有自己的头,还有身体,而且人家的脑袋里面此时此刻在想什么是看不出来的。所以head元素里面的内容一般都是去写一些对于页面的一些设置,或者在这个区域里面所看不到的一些东西。
就比如里面可以再加个元素,比如说叫title,title我相信大家应该都知道,就是标题的意思,这个也是一样的,起止。然后中间这里写什么?选项卡的这里名字就是什么?就比如坤坤牛逼,保存,然后刷新,是不是变成了坤坤牛逼?当然,想把这个东西放到别的地方也行,比如说放到body里面,然后保存,一刷新,你看也是坤坤牛逼,对吧?但是一般来说按照规范,一般是放到这种head元素里面去,这是head元素。
·然后接下来是body,body就是人的身体,人家长得什么样子,身材好不好,到底前凸不凸,后翘不翘,一眼就能看得出来,多看一眼都会爆炸的那种。所以在body元素里面,一般都是写一些在这个区域里面能看到的东西,就比如说一些文字或者说一些图片等等,所以这个才是html代码最基本的结构。
·然后回过头来再看一下最初的问题,什么?就是一开始代码不是这个样子的吗?没有,那些head、html、body却依然能在浏览器上正确的显示出来。其实很简单,就是因为虽然就写了这个东西,但是浏览器会读取代码文件里面所写的内容,写了什么就能读到什么。
如果代码不够规范,浏览器就会自动的帮你把这些元素给补齐,补齐完之后才是真正的HTML代码。有了正确的代码之后,浏览器才会根据这份代码来进行渲染,也就是现在所看到的样子。
所以代码千万条,规范第一条,因为永远都不会想知道浏览器到底会对不规范的代码进行什么样的修改,把它改成什么样子。所以html代码的最基本的格式就是html、head、body。修改后的结果:鸡你太美。
*请认真填写需求信息,我们会在24小时内与您取得联系。