我们一起学一学渗透测试——黑客应该掌握的HTML基础知识（一）

最新推荐文章于 2021-06-10 00:21:48 发布

菜鸟小白的学习分享

最新推荐文章于 2021-06-10 00:21:48 发布

阅读量202

点赞数

文章标签： html css 编程语言 javascript python

本文链接：https://blog.csdn.net/qq_25535969/article/details/116272553

版权

点击上方「蓝字」关注我们

各位新老朋友们：

大家好，我是菜鸟小白。欢迎大家关注“菜鸟小白的学习分享”公众号，菜鸟小白作为一名软件测试工程师，会定期给大家分享一些测试基础知识、测试环境的搭建和python学习分享，另外还有给大家推荐一些好用的工具和网站。当然，如果大家有什么需求，或者有什么想要和大家一起分享的，可以私信菜鸟小白哦~

想要快速查看历史文章的小伙伴，可以关注公众号，在菜单栏中的【历史文章】查看；想要查看分类文章的，可以在菜单栏中的【python学习】、【测试专题】和【工具推荐】专栏进行查看。

本公众号倾注了菜鸟小白大量时间心血，如果你觉得有所收获，还请多多转发宣传，让我有不竭的动力坚持下去。

小伙伴们，好几天不见了，这一周菜鸟小白工作很忙，所以没有每天更新学习内容，但是菜鸟小白的学习是没有停下来的，只是没有时间来整理学习笔记了。现在就将菜鸟小白这两天学习的HTML基础和大家分享，其中还会拿一些标签进行举例，显示效果。

HTML概述

HTML语言是一种标签语言，它不需要编译，可以直接由浏览器执行。在标准网页设计中HTML负责填充网页的内容，HTML编写的超文本文档（文件）称之为HTML文档（网页），它包含了一些html元素，使用html或者htm为文件名后缀，能独立于各种操作系统平台，如Unix、Windows等

HTML文档结构

标准的html文档是由标签和要显示在网页上的内容组成。HTML用于描述功能的符号成为“标签”，如<html>、<body>、<table>等。HTML标签规定HTML文档的逻辑结构，并且控制文档的显示格式，然后由浏览器来负责解释并显示页面。通过使用标签可以区分文本文件的各个组成部分，对页面上的文字、表格、图片等多媒体数据所出现的未知、形式、顺序及网页间的超链接关系进行设定。

HTML标签

标签都是封装在一对尖括号“<……>”之中。标签只改变网页的显示方式，本身不会显示在窗口中。HTML文档中最先出现的标签是<html>标签。<html>标签是文档标识符，它是成对出现的，首标签<html>和尾标签</html>分别位于文档的最前面和最后面，明确地表示文档是以超文本标识语言（HTML）编写的。该标签不带任何属性

<html>……</html>之间有如下标签：

头部标签<head>……</head>

head是英文“头”的意思。习惯上用户把HTML文档分为文档头和文档主体两部分。文档主体部分就是在web浏览器窗口的用户区内看到的内容，而文档头部分用来规定该文档的标题（出现在web浏览器窗口的标题栏中）和文档的一些属性。<head>标签对的作用就是控制文档的头部信息。中间可以使用<title>……</title>、<script>……</script>标签对，在此标签中间可以HTML文档的标签是可以嵌套的，即在一对标签中可以嵌入另外一对子标签，用来规定母标签所含范围的属性或其中某一部分内容，嵌套在<head>……</head>标签对中使用的主要有<title>标签

<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
菜鸟小白的学习分享
</head>
</html>

保存为HTML文件后显示如下：

标题标签<title>……</title>

<title>标签是成对出现的，用以规定HTML文档的标题。在<title>……</title>之间的内容将显示在web浏览器窗口的标题栏中。另外，<title>……</title>标签对只能放在<head>……</head>标签对之间，而且其内部不能包含其它标签。

<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
<title>菜鸟小白的学习分享</title>
</head>
</html>

修改后显示如下：

主体标签<body>……</body>

<body>标签也是成对出现的。在<body>……</body>之间的内容将显示在web浏览器窗口的用户区内，它是HTML文档的主体部分。可以把HTML文档的主体区域简单地理解成标题以外的所有部分，该部分可以包含<table>、<font>、<img>、<div>等标签。结束标签</body>指明主体区域的结尾，在<body>中可以规定整个文档的一些基本属性：

“bgcolor”：指定html文档的背景色
“text”：指定html文档中文字的颜色
“link”：指定html文档中待连接超链接对象的颜色
“alink”：指定html文档中连接中超链接对象的颜色
“vlink”：指定html文档中已连接超链接对象的颜色
“background”：指定html文档的背景文件

我们验证了前两个属性

<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
<title>菜鸟小白的学习分享</title>
</head>


<body bgcolor="11ffff" text="000000">
  测试内容


</body>
</html>

显示效果如下：

特殊字符

在html中有许多特殊字符需要处理，例如：“<”、">"这两个符号本身是用来表示标签的开始和结束的，是没有办法通过直接打出来的，必须输入编码表示法：“<”和“>”。

通常情况下html会自动截取多余的空格。不管你加多少个空格，都被看做一个空格。如果要显示多个空格，可以使用&nsp;表示空格

我们看看实现代码

<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
<title>菜鸟小白的学习分享</title>
</head>


<body bgcolor="11ffff" text="000000">
  &lt;测试内容&gt;  空格在中间&nbsp;看到了吧


</body>
</html>

显示效果：

格式标签

在浏览器中控制文本对象的显示，包括段落、换行、水平线等标签，下面介绍几个常用的html格式标签。所有的格式标签全部都是在嵌套在<body>……</body>标签对之间的

段落标签<p>

全称paragraph。<p>……</p>标签对用于创建一个段落，支持align属性来设置对齐方式，语法如下：

<p align=“属性”>段落内容</p>
align：设定水平对齐方式，常见设置：
- 置左：align=“left”
- 置中：align=“center”
- 置右：align=“right”

我们验证一个居中的对齐方式吧

<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
<title>菜鸟小白的学习分享</title>
</head>


<body bgcolor="11ffff" text="000000">
  <p align="center">&lt;测试内容&gt;  空格在中间&nbsp;看到了吧</p>


</body>
</html>

显示效果：

换行标签<br>

在不另起一段的情况下将当前文本强制换行，<br>标签属于单独出现的标签，禁止出现结束标签。

<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
<title>菜鸟小白的学习分享</title>
</head>


<body bgcolor="11ffff" text="000000">
  <p align="center">&lt;测试内容&gt;</br>  空格在中间&nbsp;看到了吧</p>


</body>
</html>

显示效果：

预格式化标签<pre>

可以完整保留设计者在源文件中所定义的格式，包含各种空格，缩进，以及其他特殊字符，全部都原封不动的展示在浏览器页面上。

<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
<title>菜鸟小白的学习分享</title>
</head>


<body bgcolor="11ffff" text="000000">
  <p align="center">&lt;测试内容&gt;</br>  空格在中间&nbsp;看到了吧</p>
<pre>
我是菜鸟小白
你们的好朋友


  让我们一起学习吧！！！
</pre>


</body>
</html>

显示效果：

列表标签

主要分为无序列表、排序列表、目录列表、菜单列表和描述性列表五中类型

无序列表<ul><li>……</li></ul>
排序列表<ol><li>……</li></ol>
目录列表
菜单列表
描述性列表<dl><dt>列表头<dd>列表内容

我们就验证一个无序列表和一个描述性列表吧

无序列表：

<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
<title>菜鸟小白的学习分享</title>
</head>


<body bgcolor="11ffff" text="000000">
<ul>
<li>我是菜鸟小白</li>
<li>你们的好朋友</li>


<li>  让我们一起学习吧！！！</li>
</ul>


</body>
</html>

效果如下：

描述性列表：

<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
<title>菜鸟小白的学习分享</title>
</head>


<body bgcolor="11ffff" text="000000">
<dl>
<dt>菜鸟小白测试表头</dt>
<dd>我是菜鸟小白</dd>
<dd>你们的好朋友</dd>
<dd>  让我们一起学习吧！！！</dd>
<dt>菜鸟小白测试表头2</dt>
<dd>我是菜鸟小白</dd>
<dd>你们的好朋友</dd>
<dd>  让我们一起学习吧！！！</dd>
</dl>


</body>
</html>

显示效果如下：