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特殊符号
-   空格
- < 小于号
- > 大于号
- & 和号
- " 引号
- © 版权
- ® 注册
- ¥ 人民币
- € 欧元
- £ 英镑
- ¢ 美分
- § 小节
- × 乘号
- ÷ 除号
- ° 度
- ± 正负号
- µ 微
- ¶ 段落
- · 中点
- • 实心圆点
- … 省略号
- &dagger; 剑号
- &Dagger; 双剑号
- &loz; 菱形
- &spades; 黑桃
- &clubs; 梅花
- &hearts; 红心
- &diams; 方块
- ≈ 近似于
- ≠ 不等于
- ≤ 小于等于
- ≥ 大于等于
- ∑ 求和
- ∏ 求积
- √ 根号
- ∞ 无限大
- ∫ 积分
- &there4; 所以
- &sim; 相似
- &cong; 同于
- ≈ 约等

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)

lehhair's Blog

lehhair's Blog

2023.07.15学习 xss基础01

2023.07.15学习 xss基础01

html

javascript

DOM操作

BOM操作

分享