位小伙伴好,黑客技术离不开代码,做为一个渗透测试工程师,也一定要有一些代码基础。网络安全行业,现在人才缺口大,再加上就业形势又很严峻,介于这些,我们想培养一批优秀的网络安全人才,将对网络安全行业、黑客技术,以及渗透测试技术感兴趣的小白培养成精英。
跟随我们,不管你有多白,都可以逐步进入网络安全行业,并最终在这个行业找到高薪职业。
然后呢,我要说一句,关于“黑客”可能并不是大多数人所了解的那样。关于这些,可以参考:什么是黑客?什么是渗透测试?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.1页面基础元素:<html>
<html>是页面的基础元素,主要用来定义页面的开始和结束部分。元素语法结构如下<html>....</html>(开头标记为<>,结束标记为</html>)先介绍一下完整的HTML文件的基本结构
<html> 文件开始标记
<head> 文件头开始标记
......... 文件头部分的内容
</head> 文件头结束标记
<body> 文件主体开始标记
......... 文件主题部分的内容
</head> 文件主题结束标记
</html> 文件结束标记
在<html>和</html>之间写入想要编辑的页面内容就构成了一个简单的页面
1.1.1 文本显示方向属性:dir
【作用与语法】dir属性用来指定浏览器文本显示的方向,同时也决定浏览器滚条的位置。dir属性的语法结构如下
<html dir="浏览器中文本的方向">......</html>(在元素名称和属性之间要加入空格)
dir属性可以取两个值,ltr(left title right)和rtl(right title left),分别表示从左向右显示和从右向左显示
1.1.2 指定语言属性:lang
【作用与语法】lang属性用来指定文档中所使用的语言。lang属性的语法结构如下
<html lang="指定的语言">包含的内容部分</html>
lang属性的取值可以使用ISO标准中的语言代码。在<html>元素中加入lang属性,使浏览器更好的显示界面,并不会更改页面的文字编码
ISO标准中语言代码的取值及含义语言名称写法语言名称写法英语en法语fr汉语zh德语de日语ja意大利语it
1.2 页面头部元素:<head>
【作用与语法】HTML的头部元素是以<head>为开始标记,以</head>为结束标记。它用于包含当前文档的相关信息,可包含<title>元素、<meta>元素等,分别用来定义页面的标题、编码。使用<head>元素可以将基本信息部分和页面主体内容区分开来。<head>元素的语法结构如下
<head>......</head>
1.3 页面标题元素:<title>
【作用与语法】HTML页面的标题一般是用来说明页面用途的,它显示在浏览器的标题栏中。在HTML文档中,标题信息设置在页面的头部,也就是<head>和</head>之间。<title>元素的语法结构如下。
<title>......</title> (说明:在标记中间的“......”就是标题的内容,它位于HTML文档的头部,即<head>和</head>之间)
1.4 元信息元素:<meta>
【作用与语法】元信息元素<meta>用来定义页面的附加信息,其中包括页面的作者、版权、关键字等相关信息。<meta>元素的语法结构如下。
<meta 属性=“属性值”/>
<meta>元素是一个自封闭的元素,通过其中的属性来添加各种附加信息。<meta>元素在不适用任何属性时,对页面没有影响。
1.4.1 元信息元素名称属性:name
【作用与语法】name属性用来制定文档中附加信息的名称。例如,最常用的值“keywords”用来定义文档中的关键字,方便搜索引擎的搜索。name属性的语法结构如下。
<meta name="信息名称"/>
在<meta>元素中,名称必须对应有相关的值才能生效
1.4.2 元信息元素的值:content
【作用与语法】content属性用来指定文档中附加信息的值,它与name属性成对出现。content属性的语法结构如下
<meta name="信息名称" conten="附加信息的值"/>
<meta>元素中所定义的“keywords”信息是用来为搜索引擎定义关键字的,所以对页面显示效果并不产生影响,故页面显示效果并无太大变化
1.4.3 元信息元素的附加属性:http-equiv
【作用与语法】http-equiv属性和name属性类似,用来指定附加信息的名称。在浏览器加载页面之前,服务器会把http-equiv属性定义的相关信息发送给浏览器,便于在浏览器中正确显示页面。http-equiv属性的语法结构如下
【作用与语法】<meta http-equiv="信息名称",content="附加信息的值">
说明:和name属性相似,http-equiv属性一般要和conten属性成对出现
1.4.4 定义页面的跳转
【作用与语法】在浏览器网页的时候经常会看到一些欢迎信息的页面,并经过一段时间后,这一页面会自动转到其他页面,这就是网页的跳转。使用HTML中的HTTP代码就可以很轻松的实现这一功能。页面跳转的语法结构
<meta http-equiv="refresh" content="跳转时间";url="链接地址">
说明:在该语法中,refresh表示网页的刷新,而在content中则设定刷新的时间和刷新后的地址,时间和链接地址之间用分号相隔。默认情况下,跳转时间是以秒为单位的
1.5 基本设置元素:<base>
在HTML中,基本设置元素<base>使用来定义相对路径的根目录。使用<base>元素,可以方便的定义页面中的超级链接。语法结构如下
<base 属性="属性值"/>
<base>元素在不使用任何属性时,对页面没有影响。<base>元素中可以使用的属性有链接路径属性href和链接窗口属性target
1.5.1 链接路径属性:href
【作用与语法】href属性用来指定文档中相对链接的根目录。文档中的所有链接(包括图片、音频等内容)都按照href属性所指定的根目录显示。href属性的语法结构如下
<base href="指定路径">包含的内容部分</base>
href属性的取值为url值。它可以使用绝对路径,也可以指
向某个文件夹。
avaScript为unicode编码转换为中文
var str = "\u6211\u662Funicode\u7F16\u7801";
关于这样的数据转换为中文问题,常用的以下方法。
1. eval解析或new Function("'+ str +'")()
var str = "\\u6211\\u662Funicode\\u7F16\\u7801";
str = eval("'" + str + "'"); // "我是unicode编码"
2. unescape 解析
方法一:
var str = "\\u6211\\u662Funicode\\u7F16\\u7801";
str = unescape(str.replace(/\u/g, "%u")); // "我是unicode编码"
方法二:
*请认真填写需求信息,我们会在24小时内与您取得联系。