ctf-web的知识

Posted on Edited on In Valine:

这是一篇有关ctf中web相关的知识，也是本人在准备2024网安大赛的一个总结

基础部分

HTML

什么是HTML？

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
    <h1>我的第一个标题</h1>
    <p>我的第一个段落。</p>
</body>
</html>

其中<meta charset="utf-8">为文件的编码格式，可以方便浏览器识别做出相应的解码。<h1>是标题，<p>是段落。

html元素

开始标签（如<p>）+元素内容+结束标签（如</p>）具体的标签需要参考HTML 标签列表(字母排序) | 菜鸟教程，除此之外，html元素还可以拥有属性，用来提供附加信息，例如对于<a>标签而言，HTML 链接由 标签定义。链接的地址在 href 属性中指定

1
<a href="http://www.runoob.com">这是一个链接</a>

html属性

“href”是一种html的属性，一般位于<a>标签中，而"http://www.runoob.com"就是属性值，属性值应该始终被包括在引号内。

对于元素的属性而言，大多数元素支持如下4类属性。

属性 描述
class 为html元素定义一个或多个类名（classname）(类名从样式文件引入)
id 定义元素的唯一id（可以用于 CSS 选择器或 JavaScript 操作。）
style 规定元素的行内样式（inline style）
title 描述了元素的额外信息 (作为工具条使用)

其具体作用参考HTML 属性 | 菜鸟教程

head元素

元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript>和<base> 。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<head>
<meta charset="UTF-8">
<title>通知公告</title><META Name="keywords" Content="电子信息与通信学院,电信学院,电信系,通知公告" />

<link rel="stylesheet" href="../style/public.css" />
<link rel="stylesheet" href="../style/master.css" />
<link rel="shortcut icon" href="../images/eic-chs.ico">
<script type="text/javascript" src="../js/bdtxk.min.js"></script>
<script type="text/javascript" src="../js/bdtxk.SuperSlide.js"></script>
<script type="text/javascript" src="../js/index.js"></script>
<!--Announced by Visual SiteBuilder 9-->
<link rel="stylesheet" type="text/css" href="../_sitegray/_sitegray_d.css" />
<script language="javascript" src="../_sitegray/_sitegray.js"></script>
<!-- CustomerNO:7765626265723230747f4757535b574200000001475c -->
<link rel="stylesheet" type="text/css" href="../list.vsb.css" />
<script type="text/javascript" src="/system/resource/js/counter.js"></script>
<script type="text/javascript">_jsq_(1177,'/list.jsp',-1,1600267464)</script>
</head>

以HUST的EIC的通知网页为例（通知公告），head对应的就是上述部分，可以看出，主要有meta、script、link标签

HTML head 元素

标签 描述
<head> 定义了文档的信息
<title> 定义了文档的标题
<base> 定义了页面链接标签的默认链接地址
<link> 定义了一个文档和外部资源之间的关系
<meta> 定义了HTML文档中的元数据
<script> 定义了客户端的脚本文件
style 定义了HTML文档的样式文件

HTML CSS

CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式。它共有三种形式

  • 内联样式- 在HTML元素中使用"style" 属性
  • 内部样式表 -在HTML文档头部 <head>区域使用<style> 元素 来包含CSS
  • 外部引用 - 使用外部 CSS 文件

当特殊的样式需要应用到个别元素时，就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。

1
2
3
4
5
<p style="color:blue;margin-left:20px;">这是一个段落。</p>

<!-- 我们可以使用font-family（字体），color（颜色），和font-size（字体大小）属性来定义字体的样式: -->
<h1 style="font-family:verdana;">一个标题</h1>
<p style="font-family:arial;color:red;font-size:20px;">一个段落。</p>

HTML图片等元素

1
2
<!---URL 指存储图像的位置，alt表示替换文本，当图片无法加载的时候显示文本，其他分别是宽度和高度的设置-->
<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">

  • tr：tr 是 table row 的缩写，表示表格的一行。

  • td：td 是 table data 的缩写，表示表格的数据单元格。

  • th：th 是 table header的缩写，表示表格的表头单元格。

表格
表格

除此之外还有列表属性，最常见的