手把手教小白入门网络安全：代码基础-HTML的基本语法和结构

位小伙伴好，黑客技术离不开代码，做为一个渗透测试工程师，也一定要有一些代码基础。网络安全行业，现在人才缺口大，再加上就业形势又很严峻，介于这些，我们想培养一批优秀的网络安全人才，将对网络安全行业、黑客技术，以及渗透测试技术感兴趣的小白培养成精英。

跟随我们，不管你有多白，都可以逐步进入网络安全行业，并最终在这个行业找到高薪职业。

然后呢，我要说一句，关于“黑客”可能并不是大多数人所了解的那样。关于这些，可以参考：什么是黑客？什么是渗透测试？2分钟看完这800多字你就懂了

那么，我们就先从代码基础——HTML的基本语方开始。

首先给大家描述三个概念：语言、程序、代码之前的关系。

语言

首先我们就要搞清楚什么是语言？可能说HTML语言不太好理解，那么我们想一想日常生活当中比较常见的我们中国人彼此之间都会交流，是不是叫做汉语呢？所以说汉语就是一门语言。

那么这时候大家脑子里面就可以构思一下啊什么样的东西大致就是语言了。它应该是一种沟通交流的一种方法的一个集合，包括我们如何发音，如何写字，这些字如何拼在一起，能够产生具体的意义，有一定的含义，这些所有所有的集合在一起，形成了一套规则，然后大家都去遵循这套规则，就能够彼此交流，那么这就叫做语言。

我们再举一个例子，比如说英国人或者美国人，他们也有自己的语言，叫做英语，那么我在这里就是换了另一种语言，

代码

了解了语言之后，我们就再来看一看，什么是代码，那代码跟我们日常生活中的这种能够联系起来的又是什么东西呢？

我们还是拿汉语来做比喻哈，我们说汉语就是一种交流沟通的一种规则，它是一门语言。在大家小的时候肯定就会去学这门语言。这门学科在小学的时候就叫语文，对吧。那么我们上语文课的时候，就要学一些最基础的有关语言的东西，比如说汉语拼音生字词，当时要记很多的这种生字生词，那么他是不是可以理解成是我们汉语的一种最基本的那种组成结构？

那么英语呢？我们在学习英语的时候也会去记一些东西啊，就比如英文字母，紧接着就是背各种各样的单词，是不是当我们单词量有了一定的积累之后，我们对这个语言呢就掌握得更深刻了。

那么汉语要背生字词，英语呢要背单词，这些最基本的组成结构。那么在程序语言里面，代码就可以理解成是生字词或者是单词。

程序

最后，我们再来看看什么是程序。它是由很多很多一行一行的代码组成在一起，能够完成一个综合性的或者一个比较大的一个目标的这样的一个代码的集合。

那么我们对照一下自然的这种语言，比如说汉语英语呢它是什么样？好多的文字放在一起，是不是句子？或者说再多一点儿就是一篇文章。一篇文章甚至再大一点儿可能是一本书，

那么汉语能写文章，用英语英文也能写文章，这个文章可大可小，可能几千字能大一点儿的一本书，也可以理解成是文章，那么用生字词组成的这种集合就成了文章了。然后我们再谈程序，它是什么呢？对照一下大家可能就理解了，它就是一个由代码组成的文章。

HTML叫做超文本标记语言

那么回过头来我们看我们要学的HTML语言，它也是一门语言，只不过呀它跟我们理解的汉语和英语有一定的区别。

汉语的主流是中国人之间交流的时候沟通的时候用的语言。那么英语呢应用的比较广泛，是一些英语国家之间彼此交流沟通的时候用的语言。那么HTML语言它也是一种语言，只不过它不是人和人之间去交流的语言，那么它到底是做什么用的呢？我们来看一下HTML的概念。

HTML中文名称叫做超文本标记语言，用HTML编写的超文本文档称为HTML文档。它能够独立于各种操作系统平台，使用HTML语言将所需要表达的信息按某种规则写成HTML文件，通过专用的浏览器来识别，并将这些HTML文件翻译成可以识别的信息，即现在所见到的网页。

那么从中我们能看到什么呢？首先我们知道它的中文名称了。HTML叫做超文本标记语言。

那么再往下我们看他提到了。

在这里浏览器是吧？提到了浏览器，那么这时候我们就知道了HTML语言啊它是一种与浏览器之间进行交流的这么一种语言。就是我们去写一些代码，那么写这些代码的目的是什么呢？目的就是为了和浏览器去交流，只要我们写的这个东西浏览器能看得懂，他就会根据我们写的代码呈现出最终的网页。这就是HTML语言的一个基本概念。

HTML的语法规则

（1）HTML中的各种元素都是通过标记（标签）来表示。

（2）HTML当中的标签分为单标签和双标签。

（3）单标签格式为<名称/>，双标签格式为<名称></名称>。

（4）HTML对大小写不敏感。

然后，我们可以对照一下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，在网络江湖，从小刀客变成大侠。如果感兴趣，请关注我，私信我，可获得更多学习资料。

.注释标记()

语法：

2.文件标记(<html>…</html>)

语法： <html>…</html>

说明：<html>这对标记是HTML文件的标记。<html>处于文件的最前面，表示HTML文件的开始。即浏览器从<html>标记开始解释，直到遇到</html>标记为止。

3.文件头标记(<head>…</head>)

语法： <head>…</head>

说明：

①由head这组标记定义的元素中，并不放置网页的任何内容，是放置关于这份HTML文件的信息。就是说，它并不属于HTML文件的主体，它包含文件的标题、编码方式和URL等。这些信息大部分用于提供索引、辨认或其他应用。

②这对标记在HTML文件中并不是必需的。如果某个HTML文件并不需要提供相关信息，则可省略<head>标记。

4.文件标题标记(<title>…</title>)

语法： <title>文件标题文字</title>

说明：此标记用于设定HTML文件的标题名称，它将显示在浏览器的标题栏中。

注意：<title>标记用于<head>标记中。但如果HTML文件中没有使用<head>标记，则<title>标记仍然起作用。

5.文件主体标记(<body>…</body>)

语法： <body>…</body>

说明：

①由<body>标记所建立的元素是HTML文件的内容主体，也是HTML文件的重点所在。HTML文件中要显示在网页上的所有内容，也都放置在这个元素中。

②<body>具有一些特殊的属性，可以设定背景及字符颜色等。

TML 或超文本标记语言 允许 Web 用户使用元素、标签和属性创建和构造部分、段落和链接。然而，值得注意的是，HTML 不能被视为一种编程语言，因为它不能创建动态功能。

HTML有很多用例，即：

网页开发。开发人员使用 HTML 代码来设计浏览器如何显示网页元素，例如文本、超链接和媒体文件。
互联网导航。由于 HTML 被大量用于嵌入超链接，因此用户可以轻松地在相关页面和网站之间导航和插入链接。
网络文档。HTML 使组织和格式化文档成为可能，类似于 Microsoft Word。
还值得注意的是，HTML 现在被视为官方 Web 标准。万维网联盟 (W3C)维护和开发 HTML 规范，同时提供定期更新。

本文将介绍 HTML 的基础知识，包括它的工作原理、优缺点以及它与 CSS 和 JavaScript 的关系。

什么是 HTML？

HTML（代表超文本标记语言）是构成大多数网页和在线应用程序的计算机语言。超文本是用于引用其他文本片段的文本，而标记语言是告诉 Web 服务器文档的样式和结构的一系列标记。

HTML 是如何工作的

在国内的网站上找了一圈，这应该是介绍历史最细致的，长按保存手机里翻译

html文件

平均每个网站包含几个不同的信息 HTML 页面。例如，主页、关于页面和联系页面都将具有单独的 HTML 文件。

HTML 文档是以 .html 或 .htm 扩展名结尾的文件。Web 浏览器读取 HTML 文件并呈现其内容，以便互联网用户可以查看它。

html元素的三个部分

所有 HTML 页面都有一系列 HTML 元素，由一组标签和属性组成。HTML 元素是网页的构建块。标签告诉 Web 浏览器元素在哪里开始和结束，而属性描述元素的特征。

元素的三个主要部分是：

开始标签 - 用于说明元素开始生效的位置。标签用左尖括号和右尖括号包裹。例如，使用开始标签 <p> 创建一个段落。
内容——这是其他用户看到的输出。
结束标签 - 与开始标签相同，但在元素名称前有一个正斜杠。例如，</p> 结束一个段落。

这三个部分的组合将创建一个 HTML 元素：

<p>这是在HTML中添加段落的方法。</p>

HTML 元素的另一个关键部分是它的属性，它有两个部分——名称和属性值。名称标识用户想要添加的附加信息，并且属性值给出进一步的说明。

例如，添加紫色和 font-family verdana 的样式元素将如下所示：

< p style= "color:purple;font-family:verdana" >这是在HTML中添加段落的方法。< /p >

另一个属性，HTML 类，对于开发和编程来说是最重要的。class 属性添加了可以作用于具有相同类值的不同元素的样式信息。例如，我们将对标题 <h1> 和段落 <p> 使用相同的样式。样式包括背景颜色、文本颜色、边框、边距和填充，在 .important 类下。要在 <h1> 和 <p> 之间实现相同的样式，请在每个开始标记后添加 class=”important”：

<html>
<head>
<style>
.important {
  background-color: blue;
  color: white;
  border: 2px solid black;
  margin: 2px;
  padding: 2px;
}
</style>
</head>
<body>
<h1 class="important">This is a heading</h1>
<p class="important">This is a paragraph.</p>
</body>
</html>

大多数元素都有一个开始标签和一个结束标签，但有些元素不需要结束标签即可工作，例如空元素。这些元素不使用结束标签，因为它们没有内容：

< img src= "/" alt= "图像" >

这个图像标签有两个属性——一个src属性，图像路径，和一个alt属性，描述性文本。但是，它没有内容，也没有结束标签。

最后，每个 HTML 文档都必须以 <!DOCTYPE> 声明开头，以告知 Web 浏览器文档类型。使用 HTML5，doctype HTML public 声明将是：

< !DOCTYPE html >

最常用的 HTML 标签和 HTML 元素

目前，有 142 个 HTML 标签可以用于创建各种元素。尽管现代浏览器不再支持其中一些标签，但学习所有可用的不同元素仍然是有益的。

第二节将讨论最常用的 HTML 标签和两个主要元素——块级元素和内联元素。

块级元素

块级元素占据页面的整个宽度。它总是在文档中开始一个新行。例如，标题元素将位于与段落元素不同的行中。

每个 HTML 页面都使用这三个标签：

<html>标签是定义整个 HTML 文档的根元素。
<head> 标签保存页面标题和字符集等元信息。
<body>标签包含了页面上出现的所有内容。

<html>
  <head>
    <!-- META INFORMATION -->  
  </head>
  <body>
    <!-- PAGE CONTENT -->
  </body>
</html>

其他流行的块级标签包括：

标题标签 - 这些范围从 <h1> 到 <h6>，其中标题 h1 的大小最大，当它们向上移动到 h6 时变得越来越小。
段落标签——全部使用 <p> 标签括起来。
列表标签——有不同的变体。<ol> 标签用于有序列表，<ul> 用于无序列表。然后，使用 <li> 标记将各个列表项括起来。

内联元素

内联元素格式化块级元素的内部内容，例如添加链接和强调的字符串。内联元素最常用于在不破坏内容流的情况下格式化文本。

例如，一个 <strong> 标签会以粗体呈现一个元素，而 <em> 标签会以斜体显示它。超链接也是使用 <a> 标记和 href 属性来指示链接目标的内联元素：

<a href="https://www.icodingdeu.com/" >点我！</a>

HTML 演变——HTML 和 HTML5 有什么区别？

HTML 的第一个版本由 18 个标签组成。从那时起，每个新版本都带有添加到标记中的新标签和属性。迄今为止，该语言最重大的升级是 2014 年引入的 HTML5。
HTML 和 HTML5的主要区别在于HTML5 支持新类型的表单控件。HTML5 还引入了几个语义标签，可以清楚地描述内容，例如 <article>、<header> 和 <footer>。

HTML 的优点和缺点

就像任何其他计算机语言一样，HTML 有其优点和局限性。以下是 HTML 的优缺点：

优点：

初学者友好: HTML 具有干净且一致的标记，以及较浅的学习曲线。
支持领域广：该语言被广泛使用，拥有大量资源和庞大的社区。
无障碍：它是开源的并且完全免费。HTML 在所有 Web 浏览器中本机运行。
灵活的：HTML很容易与PHP和 Node.js等后端语言集成。

就像任何其他计算机语言一样，HTML 有其优点和局限性。以下是 HTML 的优缺点：

缺点：

静止的 该语言主要用于静态网页。对于动态功能，您可能需要使用 JavaScript 或 PHP 等后端语言。
单独的 HTML 页面用户必须为 HTML 创建单独的网页，即使元素相同。
浏览器兼容性 一些浏览器采用新特性的速度很慢。有时较旧的浏览器并不总是呈现较新的标签。

HTML、CSS 和 Javascript 是如何相关的

HTML 用于添加文本元素并创建内容结构。然而，仅仅建立一个专业的和完全响应的网站是不够的。因此，HTML 需要借助层级样式表 (CSS)和JavaScript来创建绝大多数网站内容。

CSS 负责样式，例如背景、颜色、布局、间距和动画。
JavaScript 添加了动态功能，例如滑块、弹出窗口和照片库。这三种语言是前端开发的基础。

结论

HTML 是 Internet 上的主要标记语言。每个 HTML 页面都有一系列创建网页或应用程序内容结构的元素。

HTML 是一种对初学者友好的语言，有很多支持，主要用于静态网站页面。HTML 与用于样式的 CSS 和用于功能的 JavaScript 一起使用效果最好。

我们还向您展示了一些在线教学课程，它们将有助于提高您的 HTML 知识或提供对 HTML 的基本理解。

如果您有任何其他喜欢的资源来学习 HTML，请在评论部分告诉我们。

在线咨询

上一篇：小猿圈入门html5教程之利用canvas实现图片压缩方法
下一篇：HTML DOM 元素对象

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商