专栏首页菜鸟小白的学习分享我们一起学一学渗透测试——黑客应该掌握的HTML基础知识(一)

我们一起学一学渗透测试——黑客应该掌握的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中有许多特殊字符需要处理,例如:“<”、">"这两个符号本身是用来表示标签的开始和结束的,是没有办法通过直接打出来的,必须输入编码表示法:“&lt;”和“&gt;”。

通常情况下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>

显示效果如下:

好了,今天的内容就到这了,我们明天继续学习HTML基础内容,不见不散~

本文分享自微信公众号 - 菜鸟小白的学习分享(cainiao-xiaobai),作者:菜鸟小白的学习分享

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-08-07

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 我们一起学一学渗透测试——黑客应该掌握的HTML基础知识(二)

    将文本设置为标题显示的标签对。设定标题字体大小,n=1(大)~6(小),标题大小一共有6种,也就是从<h1>……</h1>到<h6>……</h6>

    菜鸟小白的学习分享
  • 我们一起学一学渗透测试——黑客应该掌握的Windows基础

    今天我们看看作为一个黑客对于Windows应该掌握哪些基础知识,主要内容包含以下四个方面:

    菜鸟小白的学习分享
  • 我们一起学一学渗透测试——黑客应该掌握的Linux基础

    上一篇我们学习了Windows基础,今天我们来看一看作为一名渗透测试工程师都需要掌握哪些Linux知识。今天的笔记一共分为如下三个部分:

    菜鸟小白的学习分享
  • 我们一起学一学渗透测试——基础概念

    说来也惭愧,菜鸟小白已经干了三年安全产品的测试,但是对于渗透测试都不曾好好了解,一直停留在基础功能测试和自动化测试的摸索上。正好我们组内在组织渗透测试的...

    菜鸟小白的学习分享
  • 我们一起学一学渗透测试——网络基础知识听课笔记

    今天我们就简单看一下网络的一些概念(纯笔记记录),后面学习过程中涉及到网络的交互过程时我们再来详细讲解网络中报文交互的过程。

    菜鸟小白的学习分享
  • 渗透测试入门指南与路线规划(全文版)

    我本非安全大牛,水平有限,所以自然亲民,和许多渗透测试的初学者打得火热。这其中大部分是大学生,还有工作多年,但一直对网络安全热情不减的热血之人。许多同学一直在努...

    用户1631416
  • 【笔记】网络安全技术笔记汇总分享下载

    作为拥有着10年经验的渗透安全测试工程师,一路也是从小白历经磨难成长起来的我,给现在的新手小白一些建议。渗透安全的范围其实要学习的东西很广泛的,比如系统...

    贝塔安全实验室
  • 渗透测试学习路线

    最近在信安群里也有人问过我,我是如何基于kali学习渗透测试的,在这里总结针对于有一些网络基础的路线[1],让新手和小白们不再迷茫,少走弯路,拒绝时间和金钱上的...

    轩辕小子
  • 这可能是最适合萌新入门Web安全的路线规划

    最近在后台经常收到粉丝问,Web安全有没有什么路线。确实,Web安全的范围实在太大,哪些先学,哪些后学,如果没有系统的路线会降低大家效率,对于刚入门的同学们来说...

    贝塔安全实验室
  • 轩辕,网络安全这条路,怎么走?

    不同于Java、C/C++等后端开发岗位有非常明晰的学习路线,网路安全更多是靠自己摸索,要学的东西又杂又多,难成体系。

    轩辕之风
  • 安全之困——入门到进阶之惑解答

    前后有很多人问我,安全该怎么学,今天正好是2021的第一天,我把自己的学习方法和思路共享给大家,愿大家能有所收获。

    陈殷
  • 37 | 个人成长:学习安全,哪些资源我必须要知道?

    安全涉及的知识面非常广,更新速度也很快,前辈们很难有足够的时间和精力来言传身教。这个时候就需要我们具备良好的自学能力,通过持续的学习来掌握新的知识,应对新的变化...

    斑马
  • 黑客笔记 10年经验分享 ,安全渗透技术开放下载

    作为拥有着10年经验的渗透安全测试工程师,一路也是从小白历经磨难成长起来的我,给现在的新手小白一些建议。渗透安全的范围其实要学习的东西很广泛的,比如系统...

    Khan安全团队
  • 福利时刻 | 十年黑客大佬的Web安全渗透技术分享

    作为拥有着10年经验的渗透安全测试工程师,一路也是从小白历经磨难成长起来的我,给现在的新手小白一些建议。渗透安全的范围其实要学习的东西很广泛的,比如系统...

    辞令
  • 我的渗透学习之旅

    最近发现很多小伙伴都在问我想要学习渗透测试,但是不知道怎么开始,也不知道要学习什么?所以在这里我打算分享一下我的渗透学习之路以及给初学者的一些建议。

    信安之路
  • 肝了7天,让你从小白变黑客!

    上一次的《C/C++后端开发路线图》的末尾,预告了网络安全方向的学习路线,让大家久等了,今天终于来了。

    轩辕之风
  • 在网络安全圈,为什么红队渗透测试突然火起来了?

    它采用入侵者的战术、技术、流程,以此来检验蓝队(Blue Team)的威胁检测和应急响应的机制和效率,最终帮助企业真正提高整个安全建设、安全运营、安全管理等能力...

    潇湘信安
  • 还记得当年踏上信安之路的初衷吗

    一年前在信安之路的交流群里做了一个活动:在我们这个信息安全的圈子里,渗透测试仅仅是安全中的一个很小的分支,虽说这个圈子的缺口很大,但是为什么一直补不上这个缺口呢...

    信安之路
  • CTF入门指南(0基础)

    ctf入门指南 如何入门?如何组队? capture the flag 夺旗比赛 类型: Web 密码学 pwn 程序的逻辑分析,漏洞利用windows、lin...

    Angel_Kitty

扫码关注云+社区

领取腾讯云代金券