在上篇文章中介绍了前端代码，主要就是HTML+JavaScript。当用户请求访问网站中的页面时，如果这是一个动态页面，那么网站会先执行这个动态页面中的代码，然后再将执行结果以前端代码的形式发给客户端。如果用户请求访问的是一个静态页面，网站则直接就把这个页面中的代码发给客户端。

前端代码都是在客户端浏览器上执行的，这是前端代码的重要特征。

所以我们可以修改前端代码，并影响它们的执行效果。当然这里的修改只能是影响当前客户端本地浏览器上的显示效果，而并不能更改服务器端的代码。

当然，能够修改代码还需要具备一个前提条件，就是我们要能够看懂并理解前端代码。所以下面将对HTML语言做一些最基本的介绍。

HTML页面结构

HTML（超文本标记语言）其实并不属于编程语言，因为在HTML中没有选择、循环这类基本的程序结构。HTML是一种标记语言，标记也称为标签，它的主要作用就是用来定义信息在网页中的显示效果。

HTML标签通常都是成对出现的，如<p>和</p>，第一个是开始标签，第二个是结束标签。每一组标签都有相对应的功能，比如<p>和</p>这组标签用于定义段落，<h1>和</h1>这组标签用于定义一级标题等，所以学习HTML，主要就是在学习这些标签的用法。

一个典型的HTML页面的代码结构如下所示：

<!DOCTYPE HTML>    
<html>
<head>                      
  <meta charset="utf-8">
  <title>这是一个HTML网页</title>
</head>                            
<body>
  <h1>这是一级标题</h1>
  <!-- 这是注释 -->
  <p>这是一个段落</p>
</body>
</html>

第一行的<!doctype html>用于告诉浏览器这是一个HTML文档，浏览器的作用就是来解析这些标签，并还原成人类容易理解的方式来显示。

<html>和</html>这组标签用于表明HTML文档的开始和结束。

一个HTML文档整体上可以分为“头部head”和“主体body”两部分，分别由<head>和</head>以及<body>和</body>这两组标签来定义。

头部部分主要用于定义网页标题以及网页语言等属性信息，这些信息不会在页面中显示。网页中显示的都是主体部分的信息，这也是整个网页的核心。

<h1>……</h1>标签用于定义一级标题。

<!-- ……-->标签用于为文档添加注释，注释内容在网页上不会显示。

<p>……</p>标签用于定义段落。

每部分代码之间最好进行缩进，以便于阅读。但HTML对缩进要求并不严格，即使不缩进，代码也可以照常执行。

我们可以将上面这段代码保存成一个后缀为.html的网页文件，并放到Web服务器中，然后在客户端访问的效果如下图所示。

Web安全入门与靶场实战（18）- HTML基础_表单

HTML常用标签

网页中显示的所有格式都需要由相应的HTML标签来实现，下面介绍一些在HTML中经常用到的基本标签。

<br />标签用于换行，比如下面这段代码：

<p>
To break<br />lines<br />in a<br />paragraph,<br />use the br tag.
</p>

显示结果：

Web安全入门与靶场实战（18）- HTML基础_表单_02

<pre>标签用于原样输出指定的信息，比如下面的代码：

<pre>
  床前明月光，
  疑是地上霜。
  举头望明月，
  低头思故乡。
</pre>

显示结果：

Web安全入门与靶场实战（18）- HTML基础_html_03

<img>标签用于在网页中插入图片，这个图片有两个常用属性，src属性用于指定图片位置，alt属性用于指定图片描述信息。<img>是个单标签，不必有配套的结束标签，<img>标签格式如下：

<img src="图片位置" alt="图片描述信息">

下面的代码用于在网页中插入一张图片，图片来自于本地文件/images/1.jpg，需要注意的是，images目录应位于网站主目录之下，而不是在Linux系统的根目录下面。

<p><img src="/images/1.jpg" alt="本地图片"></p>

<img>标签的src属性是必须的，alt属性主要用于给搜索引擎提供信息，通常可以不加。

<a>标签用于设置超链接，HTML被称为超文本标记语言，所谓的超文本就是指包含有超链接的文本。

<a>标签要求成对出现，格式如下：

<a href="url">文字描述</a>

下面的代码用于设置名为“test”的超链接，点击链接可以跳转到网站主目录下的test.html页面。

<a href="/test.html">test</a>

form表单

form表单是我们需要重点掌握的一个知识点，因为表单在Web安全中被用到的太多了。

form表单主要用于接收客户端输入的数据，并发送给服务器，比如我们经常见到的用户登录页面就是典型的form表单。

需要注意的是，表单是一个整体，在表单中还包括很多元素。比如下面的用户登录页面，其中用于输入用户名和密码的两个文本框以及login按钮都属于是表单元素。

Web安全入门与靶场实战（18）- HTML基础_前端_04

form标签只用于创建表单，在表单中还应根据需要添加各种元素。

比如下面是一个典型的表单，代码中的&nbsp用于表示空格。

<form action="UserLogin.php" method="post">
       <p>用户名：<input type="text" name="username"></p>
       <p>密   码：<input type="password" name="password"></p>
       <p><input type="submit" name="submit" value="确定">   <input
type="reset" value="重置"></p>
</form>

显示效果：

Web安全入门与靶场实战（18）- HTML基础_表单_05

下面依次解释表单中的一些主要代码。

首先在<form>标签中有两个非常重要的属性：action和method。

  •   action属性用于指定服务器端用于接收用户数据的页面，action="UserLogin.php"表示在服务器端由UserLogin.php这个页面来接收并处理用户传来的数据。
  •   method属性用于指定HTTP请求方法。在表单中通常都是使用post方法传递数据。

其次，<input>是表单中的一个非常重要的子标签，用于收集用户输入的信息。<input>标签中也有两个非常重要的属性：name和type。

  • name属性用于指定控件名称。对于服务器端用于接收用户数据的页面，就是通过控件名称来区分用户所输入的数据的。
  • type属性用于指定控件类型。比如：
  •   type=”text”，表示生成一个文本框控件。
  •   type=”password”，表示生成一个密码框控件，在密码框中输入的信息会用*代替。
  •   type=”submit”，表示生成一个提交按钮。
  •   type=”reset”，表示生成一个重置按钮。

关于HTML就先介绍这么多，这大概已经可以满足我们接下来的需求了。