学Web安全必须知道HTML，做前端开发必须掌握HTML。
JavaScript 学习链接：【网络安全必备 | 前端开发基础】一篇文章速学 JavaScript
HTML是一种超文本标记语言，通过标记标签来描述网页。标签是成对出现的。
网页结构如下：
只有
<body>区域才会在页面中显示。
在每个HTML文件中，为了保证网页版被正确显示，都需要在最前面加上<!DOCTYPE HTML>
为了防止出现中文乱码，也需要在头部进行声明：
<head>
<meta charest = "UTF-8">
</head>
标题
通过<h1>至<h6>标签定义标题，<h1> 定义最大的标题。 <h6> 定义最小的标题。浏览器会自动地在标题的前后添加空行。
段落
通过<p>标签定义段落，浏览器会自动地在段落的前后添加空行。
图像
通过<img src="../a.jpg" alt="ice" width="100" height="60">定义图像
alt 属性用来为图像定义一串预备的可替换的文本，在浏览器无法载入图像时，替换文本属性告知失去的信息。（可省略）
height（高度） 与 width（宽度）属性用于设置图像的高度与宽度。（可省略）
src后既可跟图片路径，也可跟图片链接：
链接
通过<a>标签定义链接
文本链接：<a href="https://www.example.com">链接</a>
图像链接：
<a href="https://www.example.com">
<img src="example.jpg" alt="示例图片">
</a>
下载链接：链接用于下载文件，可以使用 download 属性。
<a href="ice.pdf" download>下载文档</a>
元素内容
标签及标签内的字段合称为元素，字段称为元素内容。
<p>ice</p>，在这里ice即为元素内容。
水平线
通过<hr>标签创建水平线，用于分隔内容。
注释
通过<!--注释-->标签提高代码可读性。
折行
通过<br>进行换行。
属性
HTML元素提供的附加信息称为属性，如上文的链接中的href就是一个属性。
格式化标签
对文本形式有要求时，可使用格式化标签。
头部
<head>中的内容称为头部。可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。
<style> 标签定义了HTML文档的样式文件引用地址
在<style> 元素中也可以直接添加样式来渲染 HTML 文档:
<head>
<style type="text/css">
body {
background-color:yellow;
}
p {
color:blue
}
</style>
</head>
<meta>标签描述了一些基本的元数据，元数据不显示在页面上，但会被浏览器解析。
定义网页作者：
<meta name="author" content="ice">
<link> 标签定义了文档与外部资源之间的关系，通常用于链接到样式表:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<script>标签用于加载脚本文件，如： JavaScript。
参考链接：【网络安全必备 | 前端开发基础】一篇文章速学 JavaScript
<base> 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接:
<head>
<base href="http://www.runoob.com/images/" target="_blank">
</head>
CSS
CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式。
举个例子，这里不做过多叙述：
<p style="color:green;margin-left:60px;">ice</p>
表格
通过 <table> 标签定义表格。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义），表格中可以使用标题行（<th>）定义列的标题。
列表
分为无序列表及有序列表。无序列表使用 <ul> 标签：
<ul>
<li>1</li>
<li>2</li>
</ul>
有序列表始于 <ol> 标签：
<ol>
<li>1</li>
<li>2</li>
</ol>
表单
HTML 表单用于收集用户的输入信息，通常包含各种输入字段、复选框、单选按钮、下拉列表等元素。
通过 <form> 标签来创建表单，标签中可以有action及method
<form action="login.php" method="post">
action 属性定义了表单数据提交的目标 URL，method 属性定义了提交数据的 HTTP 方法
通过<input>标签来输入元素
- 通过
<input type="text">标签来设定文本域（可用于输入评价） - 通过
<input type="password">标签来设定密码 - 通过
<input type="radio">标签定义单选框选项 - 通过
<input type="checkbox">标签定义复选框。 - 通过
<input type="submit">标签定义提交按钮。
举个例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单示例</title>
</head>
<body>
<h2>用户登录</h2>
<form action="login.php" method="post">
<label for="username">用户名:</label>
<input type="text" id="username" name="username" placeholder="请输入用户名" required><br><br>
<label for="password">密码:</label>
<input type="password" id="password" name="password" placeholder="请输入密码" required><br><br>
<label for="gender">性别:</label>
<input type="radio" id="male" name="gender" value="male" checked>
<label for="male">男</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">女</label><br><br>
<label for="agree">同意条款:</label>
<input type="checkbox" id="agree" name="agree" required><br><br>
<input type="submit" value="提交">
</form>
</body>
</html>
框架、颜色、布局
这里不过多叙述。
字符实体
在有些时候我们需要将一些字符进行替换。例如：我们使用<表示比较时，会被误认为标签的一部分，导致代码出错。
举个例子：
读者可进入教程网站进行HTML的深入学习：菜鸟教程 | HTML教程