温馨提示：千峰网络安全视频到HTML学习的这一块的顺序有点乱，我给大家整理了一下：
注：点击链接可直接跳转观看视频欧！
引言：我的系列博客[网络安全学习篇]上线了，小编也是初次创作博客，经验不足；对千峰网络信息安全开源的视频公开课程的学习整理的笔记整理的也比较粗糙，其实看到目录有300多集的时候，讲道理，有点怂了，所以我就想到了通过写博客（课程笔记）的形式去学习它，虽然写博客会让我多花几倍的时间去学习它，但是当我完成一篇博客所获得的成就感和你们对于我的认同感，让我很满足，能够鼓励我一天天的坚持下去，也希望和我一起学习本期视频的"同道"们也能给一直坚持下去。我们大家一起加油。由于作者本身也是网络信息安全小白，大部分知识点都是初次接触，出现对其理解不深入，不完整，甚至也会出现错误有问题的地方，希望大家谅解、留言提出指正，同时也欢迎大家来找我一起交流学习！！！
往期博客：
第一阶段：
[网络安全学习篇1]：windowsxp、windows2003、windows7、windows2008系统部署（千峰网络安全视频笔记）
[网络安全学习篇24]：漏洞与木马（千峰网络安全视频笔记 p117-p118）
第二阶段：
第三阶段：
[网络安全学习篇34]：python文件对象对文件内容进行读取和写入
[网络安全学习篇36]：python 面向对象编程思想（本篇）
[网络安全学习篇37]：基于面向对象思想的Python爬虫实例
[网络安全学习篇39]：HTML标签基础 常用的标签 表格（本篇）
下期博文：
目录
[HTML]
理论
Hyper Text Markup Language 超文本标记语言
编写网页的语言 ，解释型语言，写出来的代码直接就能运行
编译？
C源代码 - 编译 -》 二进制文件 --》 计算机解释执行
源文件纯文本
放在WEB根目录下
.html/.htm
HTML语言的运行环境时浏览器
标记语言
尖括号包含关键字
标签
标签中有属性，属性有对应的属性值
单标签
双标签
HTML 文档结构
头部 文档控制信息，包括整个页面说明和编码等。
身体 真正显示在网页上的内容
<html>
<head>
</head>
<body>
</body>
</html>常用标签
<title></title> 浏览器标签页标题
<meta charset="utf-8"> 通知浏览器我的编码格式是utf-8
<h1></h1> 标题
<p></p> 段落
<hr /> 水平线
<br /> 换行标签
<span></span> 完成文字的控制（单个）
<div></div> 块级元素（整行）
<a></a> 超链接 从一个页面跳转到另有一个页面
href 跳转地址
绝对路径 [http://ww.baidu.com]
相对路径 [./login.html]
target 默认情况下可以不写，在当前标签页打开；写了，“_blank”，在新的标签页打开。
利用a标签做一个网址导航
<img> 在页面中引入图片资源
src 给的图片的地址
绝对路径
相对路径
注释
<!--
注释内容
-->
特殊字符
空格
< <
> >
& &
表格
<table></table> 定义表格
<tr></tr> 定义行
<td></td> 定义列
colspan=“2” 跨列属性
rawspan="2" 跨行属性
上手
理论是一方面，我们们主要通过自己动手去敲一敲源码实际去测试，才能感受得到。
firstHtml.html
<html>
<head>
<title>我的第一个HTML页面</title>
<meta charset="utf-8">
</head>
<body>
Helo World!
</body>
</html>
h.html
<html>
<head>
<title>标题标签测试</title>
<meta charset="utf-8">
</head>
<body>
Helo World!
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>
</html>
p.html
<html>
<head>
<title>段落标签测试</title>
<meta charset="utf-8">
</head>
<body>
<h1>格言</h1>
<p>事实胜于雄辩</p>
<p>疗效胜于一起</p>
没有对比，
就没有伤害
</body>
</html>
hr_span_div.html
<html>
<head>
<title>段落标签测试</title>
<meta charset="utf-8">
</head>
<body >
<h1>格言</h1>
<hr />
<p>事实胜于雄辩</p>
<p>疗效胜于一起</p>
<hr />
没有<div style="background-color:pink">对比</div>，
<br />
就没有<span style="
color:red;
font-size:30px;
background-color:yellow
">伤害</span>!
</body>
</html>
a.html
<html>
<head>
<title>a 标签</title>
<meta charset="utf-8">
</head>
<body>
<a
href="http://www.baidu.com"
target="_blank"
>
百度首页
</a>
</body>
</html>
利用a标签做一个网址导航
网站的根目录下新建文件夹a
index.html
<html>
<head>
<title>首页</title>
<meta charset="utf-8">
</head>
<body>
欢迎你，
<a href="./login.html" target="_blank">登录</a>
<a href="./logout.html" target="_blank">注销</a>
</body>
</html>login.html
<html>
<head>
<title>首页</title>
<meta charset="utf-8">
</head>
<body>
欢迎你，
<a href="./login.html" target="_blank">登录</a>
<a href="./logout.html" target="_blank">注销</a>
</body>
</html>logout.html
<html>
<head>
<title>注销</title>
<meta charset="utf-8">
</head>
<body>
这是注销页面
</body>
</html>
img.html
网站的根目录下创建文件夹style/images/
导入图片1.jpg
<html>
<head>
<title>image 标签</title>
<meta charset="utf-8">
</head>
<body>
<img src="./style/images/1.jpg">
<!--
这是本地的一张图片
-->
<hr />
<img src="https://t8.baidu.com/it/u=3571592872,3353494284&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1587972504&t=aff4ae94c061bc06a3937da15e0431ad">
<!--
这是互联网的一张图片
-->
</body>
</html>
teshuzifu.html
<html>
<head>
<title>特殊字符</title>
<meta charset="utf-8">
</head>
<body>
<p style="background-color:red">让子弹飞！</p>
<p style="background-color:red">
让子弹 飞一会儿！
</p>
<p style="background-color:red"><html></p>
<p style="background-color:red">&</p>
<p style="background-color:red">"</p>
</body>
</html> 
table.html
<html>
<head>
<title>基本表格</title>
<meta charset="utf-8">
</head>
<body>
<table border="3">
<tr>
<td>(1,1)</td>
<td>(1,2)</td>
<td>(1,3)</td>
</tr>
<tr>
<td>(2,1)</td>
<td>(2,2)</td>
<td>(2,3)</td>
</tr>
<tr>
<td>(3,1)</td>
<td>(3,2)</td>
<td>(3,3)</td>
</tr>
</table>
</body>
</html>
table_clospan.html
<html>
<head>
<title>跨列表格</title>
<meta charset="utf-8">
</head>
<body>
<table border="3">
<tr>
<td colspan="2">学生成绩</td>
</tr>
<tr>
<td>语文</td>
<td>98</td>
</tr>
<tr>
<td>数学</td>
<td>95</td>
</tr>
</table>
</body>
</html>
table_rowspan.html
<html>
<head>
<title>跨行表格</title>
<meta charset="utf-8">
</head>
<body>
<table border="3">
<tr>
<td rowspan="2">韩梅梅</td>
<td>语文</td>
<td>98</td>
</tr>
<tr>
<td>数学</td>
<td>95</td>
</tr>
<tr>
<td rowspan="2">马冬梅</td>
<td>语文</td>
<td>59</td>
</tr>
<tr>
<td>数学</td>
<td>66</td>
</tr>
</table>
</body>
</html>
table_cr.html
<html>
<head>
<title>混合表格</title>
<meta charset="utf-8">
</head>
<body>
<table border="3">
<tr>
<td rowspan="2">阿里巴巴旗下网站</td>
<td>我要买</td>
<td>我要买</td>
<td>我淘宝</td>
</tr>
<tr>
<td colspan="3">你好，欢迎来淘宝</td>
</tr>
</table>
</body>
</html>
参考文献：
