渗透测试 | Web安全基础：HTML&CSS&JavaScript

0x01 HTML元素

<p class="editor-note"> this  is  a html element </p>

其中 <p>为开始标签，</p>为结束标签，this is a html element为内容，以上三者所有相结合即为一个元素，class="editor-note"为标签的属性，“”内包含的为属性的值。

一个元素放在其他元素中。就称作嵌套:

    <p> My cat is <strong> angry </strong>.</p>
<p> My cat is <strong> angry </strong>.</p>

不包含任何内容的元素称为空元素，下面给出的代码中有两个属性，但是并没有</img>结束标签，元素里也没有内容，这是因为，图像元素不需要通过内容来产生效果，它的作用是在所在位置嵌入一个图像。

    <img src ="images/firefox-icon.png" alt="测试图片">

下面来看一个完整又简单的 HTML文档：

<!-- <p>我在注释里！</p> -->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>测试页面</title>
    </head>
    <body>
        <img src="/2021-07-19 145450.png" alt="测试图片">
    </body>
</html>

<!DOCTYPE html>声明文档类型。
<html></html>根元素，包含整个页面的内容。
<head></head>头元素，用于进行一些面向搜索引擎的关键词、页面描述、CSS样式表和字符编码声明等。
<meta charset="utf-8">指定使用UTF-8编码
<title></title>页面标题
<body></body>页面呈现内容
<img>包含两个属性：地址属性与替换文字描述，后者用于当图像不能显示时描述该图像

标记文本

标题： <h1>主标题</h1> <h2>顶层标题</h2> <h3>子标题</h3> <h4>次子标题</h4>
段落：<p1> 段落1</p1>
列表：<ul>无序列表</ul> <ol>有序列表</ol>

示例：

<ul> 
    <li>firstly</li>
    <li>secondly</li>

</ul>

<ul>
<li>firstly</li>
<li>secondly</li>

</ul>

引用

行内引用：<q></q>
<p>The quote element — <code><q></code> — is <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">intended
for short quotations that don't require paragraph breaks.</q></p>

<p>The quote element — <code>&lt;q&gt;</code> — is <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">intended
for short quotations that don't require paragraph breaks.</q></p>

块引用：<blockquote></blockquote>

<blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
<p>The <strong>HTML <code><blockquote></code> Element</strong> (or <em>HTML Block
Quotation Element</em>) indicates that the enclosed text is an extended quotation.</p>
</blockquote>

<blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
  <p>The <strong>HTML <code>&lt;blockquote&gt;</code> Element</strong> (or <em>HTML Block
  Quotation Element</em>) indicates that the enclosed text is an extended quotation.</p>
</blockquote>

缩略语： <abbr>

<p> <abbr title="Royal Never Give Up">RNG </abbr> will win the game!</p>

代码
描述代码段 <code>、保留所有空字符 <pre>

标记日期<time>

字体

<em></em>斜体
<srong></strong>粗体

链接

<a href="www.baidu.com"> 百度</a>

<a>为锚元素：通过它的href属性创建通向其他网页、文件、同一页面内的位置、电子邮件或任何其他 URL的超链接。
href代表超文本引用（hypertext reference）

元素类型

块级元素：以一整块的形式在网页中展现，前后的内容都需要另起一行，用于展现结构化的内容如<p>
内联元素：通常出现在块级元素中，并包围一小段文档内容如<em>
空元素：没有结束标签的元素，通常用于在该位置中嵌入一些内容如<img>

布尔属性

没有值的属性或属性值只能和属性名相同的属性，如disabled

    <input type="text" disabled>
    <input type="text">

<input type="text" disabled>
<input type="text">

实体引用：特殊字符编码

<--> <
>--> >
"--> "
'--> apos;
&--> &

<head>头部元素

<title>html文档标题，而<h1>为body的标题

<meta>元素：元数据，描述数据的数据，包含文档的各种属性，如编码类型；同时包含name和content属性

name指定meta元素类型
content指定内容

如：

  <meta name="author" content="Chris Mills">
  <meta name="description" content="The MDN Learning Area aims to provide
  complete beginners to the Web with all they need to know to get
  started with developing web sites and applications.">

在HTML中应用CSS和JavaScript

<link rel="stylesheet" href="my-css-file.css">

CSS使用link元素,位于文档头部：

stylesheet表明这是文档的样式表
href包含样式表文件的路径

<script>一般放在文档尾部</body>标签之前，以确保在加载脚本之前浏览器已经解析了HTML内容：

<script src="my-js-file.js"></script>

统一资源定位符URL与路径Path

URL使用路径查找文件

当前目录
子目录: 子路径名/当前路径
上级目录： ../
相对链接与绝对链接
绝对URL即绝对定义的位置，包含协议、域名、文件目录等
相对URL即表示某一相对位置，其路径随着在不同文件夹的位置而相对变化
尽量使用相对URL，便于服务器查找请求文件，而无需额外进行域名解析

网站架构

<header>页眉
<nav>导航栏
<main>主内容，可包含<article>、<section>、<div>
<aside>侧边栏
<footer>页脚

无语义元素

内联无语义元素 <span>、块级无语义元素<div>
换行 <br> 水平分割线 <hr>

Iframe嵌入

标签<iframe>用于将一个网页嵌入至另一个网页中，使用时包含一下属性：

allowfullscreen 全屏显示该嵌入网页
frameborder 为嵌入的网页绘制边框
src嵌入网页的URL路径
width和height宽与高
sandbox沙盒将嵌入内容与外部环境隔离

CSS

将CSS与Html文档联结，即可使用选择器控制文本样式

p{
    color:green;
}
<p>Put on my eyes.</p>

类名

special作为一个类

.special{
    color:orange;
    font-weight:bold;
}

<ul>
  <li>项目一</li>
  <li class="special">项目二</li>
  <li>项目 <em>三</em></li>
</ul>

还可单独选择某一元素中的类

li.special{

    color:red
}

<ul>
    <li class="special">item1</li>
    <li> item2</li>
</ul>

可选择某一元素内的部分

li em {
  color: rebeccapurple;
}

还可进行定位，如标题<h1>后面紧跟的<p> ：

h1 + p{
    color:yellow;
}

<h1> 春江花月夜 </h1>
<p>春江潮水连海平</p> //This line will be yellow.
<p>海上明月共潮生</p> //Not this line.

根据状态确定样式

a:link {
  color: pink;
}   //正常链接为粉色

a:visited {
  color: green;
}  //点击过的链接为绿色

a:hover {
  text-decoration: none;
} //悬停的链接移除下划线

选择器的优先级

两个选择器，后一个会覆盖前一个
类的优先级比选择器高

函数

.box {
  padding: 10px;
  width: calc(90% - 30px); //计算（块宽度的90% - 30px） 
  background-color: rebeccapurple;
  color: white;
}

规则

当浏览器宽度大于30em时，背景为蓝色，小于为粉色
body {
background-color: pink;
}

@media (min-width: 30em) {
  body {
    background-color: blue;
  }
}

速记属性

padding: 10px 15px 15px 5px;
//相当于
padding-top: 10px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 5px;

background: red url(bg-graphic.png) 10px 10px repeat-x fixed;
//相当于
background-color: red;
background-image: url(bg-graphic.png);
background-position: 10px 10px;
background-repeat: repeat-x;
background-attachment: fixed;

CSS如何工作

浏览器先载入html文件

 <p>
   Let's use:
   <span>Cascading</span>
   <span>Style</span>
   <span>Sheets</span>
 </p>

将html文件转化为一个DOM(标记各个元素的树形结构)

 P
 ├─ "Let's use:" 
 ├─ SPAN
 |  └─ "Cascading"
 ├─ SPAN
 |  └─ "Style"
 └─ SPAN
    └─ "Sheets"

浏览器将 HTML相关的资源拉取，包括图片、音视频、CSS样式等（不包括JavaScript）
浏览器对拉取的CSS进行解析，根据不同的选择器将不同的规则应用至对应的DOM节点，这个步骤被称为渲染树
渲染后进行布局，页面显示

注：当由于版本或 CSS样式书写错误等问题，浏览器无法解析某些 CSS样式，则会跳过这些无法解析的规则，因此不会对网页显示造成影响。

JavaScript

JavaScript是在 HTML与 CSS将网页样式构建完成后才被执行，通常依靠DOM API动态修改 HTML与 CSS来更新用户界面。
使用<script>标签将 JS代码添加在 HTML文档中，<script src="script.js" async></script>，其中async表示异步执行外部脚本，是一个最小化属性，不同脚本之间的调用是相互独立的。选择defer属性时，多个关联脚本会按顺序调用而不会发生错误。

事件

浏览器进行的动作就是一个事件，侦听事件发生的结构被称为事件监听器（Event Listener），响应事件触发而运行的代码称为事件处理器（Event Handler）

guessSubmit.addEventListener('click', checkGuess);

此代码中，事件监听器为addEventListener，包含两个参数，动作click与执行函数checkGuess。注意：此处函数作为监听器的参数时，不加“（）”

渗透测试 | Web安全基础：HTML&CSS&JavaScript