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

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

今天我们继续看看html的学习笔记。

文本标签

标题标签<hn>

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

<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
<title>菜鸟小白的学习分享</title>
</head>
<body bgcolor="11ffff" text="000000">
<h1>我是菜鸟小白</h1>
<h2>你们的好朋友</h2>
<h3>  让我们一起学习吧!!!</h3>
</body>
</html>

显示效果如下:

字体修饰标签

对文字的格式做相应的变化,如粗体、斜体、底线、上标、下标等。常用的字体修饰标签有以下几种。

  • <b>……</b>:指定文字为粗体字
  • <i>……</i>:指定文字为斜体字
  • <u>……</u>:指定文字为带有下划线
  • <tt>……</tt>:指定文字为打字机效果
  • <sup>……</sup>:指定文字为上标
  • <sub>……</sub>:指定文字为小标
  • <em>……</em>:对某段文字进行强调,通常用斜体字显示出来
  • <strong>……</strong>:对文本进行强调,通常用粗体字显示出来

我们看下加粗前后对比,其它效果类似方式

<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
<title>菜鸟小白的学习分享</title>
</head>
<body bgcolor="11ffff" text="000000">
<b>我是菜鸟小白呀</b>
我是菜鸟小白呀
</body>
</html>

显示效果如下:

字体标签<font>

设置文档的字体,改变其属性,对文本进行不同的设置,包含字体、大小、颜色等

  • size
  • face
  • color

我们看看大小的对比区别

<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
<title>菜鸟小白的学习分享</title>
</head>
<body bgcolor="11ffff" text="000000">
我是菜鸟小白
<font size="20px">我是菜鸟小白呀</font>
</body>
</html>

显示效果如下:

超链接标签

超链接的定义

在不同文档、同一个文档的不同段落之前相互跳转。html链接包含两部分:锚标和目标点。锚标就是链接的源点,当鼠标被移动到锚标处时会变成小手状。此时,用户通过点击鼠标就可以到达链接的目标点。目标点可以是一张图片、一个网络稳定、一个多媒体文件等。

属性href(hypertext reference)

用于设定链接地址,其链接地址必须是URL地址,必须给出具体的路径。其中URL地址可以为下面内容:

  • 网站:可以设置ip地址或者是网站的网址。
<a href="http://www.baidu.com">百度地址</a>

点击页面的百度地址可直接跳转到百度页面

  • 网页:链接到本机的网页。
<a href="cainiao-跳转后页面.html">跳转</a>

跳转前页面

点击跳转后直接跳转到新的本机页面

  • 可执行文件:当文件扩展名不是html、asp等时,会将链接到的文件下载到本地计算机或直接执行。如果是文本文件(如word格式),则在浏览器中打开文件并进行编辑。
<a href="index.txt">txt文件,打开进行编辑</a>
<a href="index.wav">播放声音</a>
  • 网页上的书签:通常使用在网页的长度超过屏幕时,可以使用书签直接跳转到该书签指向的具体内容,节省移动滚动条的时间。

属性target

  • 属性值分别为_blank、_self、_parent、_top。
    • target=_blank:在新的浏览器窗口中打开连接的文档,同时保持当前窗口不变
    • target=_self:将链接的文档载入链接所在的同一框架或窗口,默认设置为_self
    • target=_parent:将链接的文档载入该链接所在框架的父框架或父窗口。如果包含链接的框架不是嵌套框架,则所链接的文档载入整个浏览器窗口。
    • target=_top:将链接的文档载入整个浏览器窗口,从而删除所有框架

我们以“_blank”为例,可以按照如下方式编写:

<!--在新的窗口中打开百度首页-->
<a href="http://www.baidu.com" target=_blank>百度地址</a>

属性title

浏览器会以浮动提示的方式显示解释信息

<a href="http://www.baidu.com" target=_blank title="百度欢迎你">百度地址</a>

实际效果展示:

属性name

利用name属性作为锚定位,可以实现文档内部的定位。这个需要我们在两个<a>标签中,一个写明name,作为一个锚点;另外一个写明herf,用于指向锚点。如下面的示例,点击“百度地址”会跳转到“这是测试跳转处”(当页面超过一页长度时,测试效果更明显)

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

<body bgcolor="11ffff" text="000000">
<a name=ceshi>这是测试跳转</a>
<a href="#ceshi" title="百度欢迎你">百度地址</a>

</body>
</html>

图像标签

图片标签<img 属性=“属性值”>

  • 属性src:来定义图片的URL(统一资源定位符)地址,是图片必不可少的属性。用法形如:<img src="url">
<img src="https://mmbiz.qpic.cn/sz_mmbiz_png/l8AWk3KYjz4lGzzlHNpH7gCkT3kPLd0OSvgQJIp5RotD7VwV0zmYdXMACNBoOWE12FXnYZOkbv0VmnxkWibic5eQ/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1">
  • 属性height和width:规定图片的大小。属性值都是数字,表示图像宽度和高度所占的像素点数。默认是浏览器窗口将自动调整图像显示尺寸
<img heigh="500px" width="500px" src="https://mmbiz.qpic.cn/sz_mmbiz_png/l8AWk3KYjz4lGzzlHNpH7gCkT3kPLd0OSvgQJIp5RotD7VwV0zmYdXMACNBoOWE12FXnYZOkbv0VmnxkWibic5eQ/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1">
  • 属性align:设置图片对齐方式,垂直对齐(居上、居中和居下)和水平对齐(居左、居中和居右)。
<img align="right" heigh="500px" width="500px" src="https://mmbiz.qpic.cn/sz_mmbiz_png/l8AWk3KYjz4lGzzlHNpH7gCkT3kPLd0OSvgQJIp5RotD7VwV0zmYdXMACNBoOWE12FXnYZOkbv0VmnxkWibic5eQ/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1">
  • 属性border:默认图片是没有边框的,可以利用border属性添加边框。
<img border="20px" align="rows" heigh="500px" width="500px" src="https://mmbiz.qpic.cn/sz_mmbiz_png/l8AWk3KYjz4lGzzlHNpH7gCkT3kPLd0OSvgQJIp5RotD7VwV0zmYdXMACNBoOWE12FXnYZOkbv0VmnxkWibic5eQ/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1">

表格标签

表<table>

创建一个表格,有属性width(宽度)、height(高度)、border(边框)、bordercolor(边框颜色)、cellspacing、cellpadding

行<tr>

创建表格中的每一行,有属性align、valign、bgcolor

列<td>

创建表格的中每一列,有属性

表头<th>

设置表头

我们现在建造一个表

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

<body bgcolor="11ffff" text="000000">

<table border>
<th>测试表头</th>

<tr>
<td>这是第一行第一列</td>
<td>这是第一行第二列</td>
<td>这是第一行第三列</td>
</tr>
<tr>
<td>这是第二行第一列</td>
<td>这是第二行第二列</td>
<td>这是第二行第三列</td>
</tr>

</table>

</body>
</html>

显示如下:

框架标签

框架<frame>

一个浏览器文档窗口一般只能显示一个网页文件,但是使用框架标签就可以将一个浏览器文档窗口分割成多个子窗口,每个子窗口中都可以显示一个独立的网页文件。

框架集<frameset>

多个框架组成了一个框架集(Frameset),定义了各个框架如何排列的。有属性rows和cols,两个属性至少选择一个,否则浏览器只显示第一个定义的框架。

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

<frameset cols="25%,50%,25%">
<frame src="https://www.baidu.com"></frame>
<frame src="https://www.qq.com"></frame>
<frame src="https://www.sina.com"></frame>
</frameset>

</html>

最终我们将三个页面在同一个web窗口展示出来了

表单标签

表单标签<form>

主要用于采集和提交用户输入的信息,使网页具有交互功能。有属性:

  • action(处理提交数据的页面)
  • method(提交方式(get、post、request))
  • target()

用户输入区域标签<input type="">

这个标签必须放在<form>……</form>标签之间。有属性type,具体参数值有:

  • text(单行文本输入框)
  • textarea(多行输入框)
  • password(密码输入框)
  • radio(单选框)
  • checkbox(复选框)
  • select(下拉框)
  • submit(提交)
  • reset(重置)
  • image(图片提交)
  • file(上传文件)
<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
<title>菜鸟小白的学习分享</title>
</head>

<body>
<p>用户名<input type="text"></input></p>
<p>多行输入框<textarea></textarea></p>
<p>密  码<input type="password"></input></p>
<p>单选框<input type="radio"></input></p>
<p>复选框<input type="checkbox"></input></p>
<p>下拉框<input type="select"></input></p>
<p>提交<input type="submit"></input></p>
<p>重置<input type="reset"></input></p>
<p>图片提交<input type="image"></input></p>
<p>文件提交<input type="file"></input></p>

</body>
</html>

实现效果:

好了,今天的内容就分享完了,如有什么意见和建议可以私信菜鸟小白哦,我们下期再会~

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

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

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

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

我来说两句

0 条评论
登录 后参与评论

相关文章

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

    HTML语言是一种标签语言,它不需要编译,可以直接由浏览器执行。在标准网页设计中HTML负责填充网页的内容,HTML编写的超文本文档(文件)称之为HTML文档...

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

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

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

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

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

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

    用户1631416
  • 我们一起学一学渗透测试——网络基础知识听课笔记

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

    菜鸟小白的学习分享
  • 渗透测试学习路线

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

    轩辕小子
  • 【笔记】网络安全技术笔记汇总分享下载

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

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

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

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

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

    陈殷
  • 这可能是最适合萌新入门Web安全的路线规划

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

    贝塔安全实验室
  • 37 | 个人成长:学习安全,哪些资源我必须要知道?

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

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

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

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

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

    辞令
  • 肝了7天,让你从小白变黑客!

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

    轩辕之风
  • 还记得当年踏上信安之路的初衷吗

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

    信安之路
  • 我的渗透学习之旅

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

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

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

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

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

    潇湘信安
  • 新手入门渗透测试学习的感悟

    无论是读书,还是练习,你都需要总结,读书的总结会帮你提炼出书本上的知识点;练习的总结会帮你在以后的道路上不断的去复习,少走弯路。概括起来最好有两种方法:一是绘制...

    技术分享达人

扫码关注云+社区

领取腾讯云代金券