乐呵呵、欢的博客

lehhair's Blog

2023.07.15学习 xss基础01

2023-07-15

2023.07.15学习 xss基础01

html

  • 概述: HTML的全称为超文本标记语言,是一种标记语言。它包括一系列标签,通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字,图形、动画、声音、表格、链接等

  • 特点: html是一个文本文件;其后缀名 html或者xhtml;可以由浏览器直接执行

  • 基础骨架

    <!DOCTYPE html>
    注释:<!DOCTYPE> 声明必须是 HTML 文档的第一行,位于 <html> 标签之前。
    <html lang="en"> 
    <!-- 注释:lang属性规定元素内容的语言。在 HTML 4 中,这个属性是必需的,但是在 HTML5 中,它是可选的。 -->
    <head>
        <meta charset="UTF-8"> <!-- 注释:charset 属性规定 HTML 文档的字符编码。 -->
        <title>Document</title> <!-- 注释:title 元素可定义文档的标题。 -->
    </head>
    <body>
        <h1>My First Heading</h1> <!-- 注释:h1 元素可定义最大的标题。 -->
        <p>My first paragraph.</p> <!-- 注释:p 元素可定义段落。 -->
    </body>
    <!-- 注释: <body> 元素包含文档的所有内容(比如文本、超链接、图像、表格和列表等等。) -->
    </html>
    
    • head部分

      • <title> 标签定义文档的标题,是head部分的必须元素
      • <mate> 标签提供有关页面的元信息,比如作者、日期和时间、网页描述、关键词、页面视图类型和其他元数据
    • body部分

      • <p> 标签定义段落
          <p>这是一个段落。</p>
      
      • <a> 标签定义超链接,用于从一张页面链接到另一张页面。
          <a href="https://www.baidu.com">这是一个链接</a>
      
      • <img> 标签定义图像,用于向网页中嵌入一张图片。
          <img src="https://www.baidu.com/img/bd_logo1.png" alt="百度logo">
      
      • 布局标签

        • <div> 块级标签: 是一个容器标签,div标签定义的是一个区域;加上css样式可以实现布局。

              <div>这是一个div</div>
          
        • <span> 行级标签: 属于文本级标签,只能存放文本,图片,表单元素。

              <span>这是一个span</span>
          
        • 三种列表方式

          • 无序列表
              <ul>
                  <li>列表项</li>
                  <li>列表项</li>
                  <li>列表项</li>
              </ul>
          
          • 有序列表
              <ol>
                  <li>列表项</li>
                  <li>列表项</li>
                  <li>列表项</li>
              </ol>
          
          • 自定义列表
              <dl>
                  <dt>列表项</dt>
                  <dd>列表项</dd>
                  <dd>列表项</dd>
              </dl>
          
        • 表格

              <table>
                  <tr>
                      <th>表头</th>
                      <th>表头</th>
                  </tr>
                  <tr>
                      <td>表格数据</td>
                      <td>表格数据</td>
                  </tr>
                  <tr>
                      <td>表格数据</td>
                      <td>表格数据</td>
                  </tr>
              </table>
          
        • form表单以及里面的小部件

          • form表单: 用于收集用户输入的信息,比如:文本域,密码域,单选框,复选框,下拉列表,提交按钮,重置按钮等等。

                <form action="https://www.baidu.com" method="get">
                    <input type="text" name="username" id="username">
                    <input type="password" name="password" id="password">
                    <input type="submit" value="提交">
                </form>
            
            • 表单提交有两种方式: get和post
              • get: 通过url传递参数,参数会显示在url上,不安全,传输数据量小,不超过2kb。
              • post: 通过请求体传递参数,参数不会显示在url上,安全,传输数据量大,不限制大小。
          • 四种input标签

            • 文本框和密码框

                  <input type="text" name="username" id="username">
                  <input type="password" name="password" id="password">
              
            • 单选按钮

                  <input type="radio" name="sex">男
                  <input type="radio" name="sex">女 
              
            • 复选框

                  <input type="checkbox" name="hobby">篮球
                  <input type="checkbox" name="hobby">足球
                  <input type="checkbox" name="hobby">乒乓球
              
          • 下拉列表

              <select name="city" id="city">
                  <option value="bj">北京</option>
                  <option value="sh">上海</option>
                  <option value="gz">广州</option>
              </select>
          
          • 提交按钮和重置按钮
              <input type="submit" value="提交">
              <input type="reset" value="重置">
          
          • 多行文本域
              <textarea name="content" id="content" cols="30" rows="10"></textarea>
          
          • label标签: 用于绑定表单元素,点击label标签,表单元素会获得焦点。
              <label for="username">用户名</label>
              <input type="text" name="username" id="username">
          
      • html特殊符号

        • &nbsp; 空格
        • &lt; 小于号
        • &gt; 大于号
        • &amp; 和号
        • &quot; 引号
        • &copy; 版权
        • &reg; 注册
        • &yen; 人民币
        • &euro; 欧元
        • &pound; 英镑
        • &cent; 美分
        • &sect; 小节
        • &times; 乘号
        • &divide; 除号
        • &deg;
        • &plusmn; 正负号
        • &micro;
        • &para; 段落
        • &middot; 中点
        • &bull; 实心圆点
        • &hellip; 省略号
        • &dagger; 剑号
        • &Dagger; 双剑号
        • &loz; 菱形
        • &spades; 黑桃
        • &clubs; 梅花
        • &hearts; 红心
        • &diams; 方块
        • &asymp; 近似于
        • &ne; 不等于
        • &le; 小于等于
        • &ge; 大于等于
        • &sum; 求和
        • &prod; 求积
        • &radic; 根号
        • &infin; 无限大
        • &int; 积分
        • &there4; 所以
        • &sim; 相似
        • &cong; 同于
        • &asymp; 约等

javascript

  • 什么是javascript

    • javascript是一种可在浏览器中运行的脚本语言,主要用来实现在浏览器端的动作:用户交互、数据处理等等

    • html中javascript的存在形式

      • 行内式
          <input type="button" value="按钮" onclick="alert('hello world')">
      
      • 内嵌式
          <script>
              alert('hello world')
          </script>
      
      • 外链式
          <script src="./index.js"></script>
      

DOM操作

  • 什么是DOM

    • DOM是一种树形结构,用来表示html文档,DOM提供了一系列的API,用来操作html文档。
  • 通过id获取元素

    var box = document.getElementById('box')
  • 获取内容
    var box = document.getElementById('box')
    console.log(box.innerHTML)
  • 修改内容
    var box = document.getElementById('box')
    box.innerHTML = 'hello world'
  • 创建动态效果 document.write
    document.write('<h1>hello world</h1>')
  • 添加页面交互 onclick
    var btn = document.getElementById('btn')
    btn.onclick = function(){
        alert('hello world')
    }
  • 常用的事件

    • onclick: 鼠标点击事件
    • onmouseover: 鼠标移入事件
    • onmouseout: 鼠标移出事件
    • onfocus: 获得焦点事件
    • onblur: 失去焦点事件
    • onkeydown: 键盘按下事件
    • onkeyup: 键盘抬起事件
    • onkeypress: 键盘按下并抬起事件
    • onload: 页面加载事件
    • onunload: 页面卸载事件
    • onresize: 窗口大小改变事件
    • onscroll: 滚动条滚动事件

BOM操作

  • 什么是BOM

    • BOM是浏览器对象模型,用来操作浏览器的一些行为,比如:浏览器大小、浏览器地址栏、浏览器历史记录等等。
  • 让浏览器弹出警告

    • alert() 弹出警告
    • confirm() 弹出确认框
    • prompt() 弹出输入框
  • 获取Cookie

    var cookie = document.cookie
    console.log(cookie)
  • 获取浏览器信息 - 屏幕信息 window.screen
  console.log(window.screen)

-获取控制页面信息

    console.log(window.location)