web安全(前端学习)

HTML学习笔记

问题1：网页由哪些部分组成？

文字、图片、音乐、视频、超链接。

问题2：我们看到的网页背后本质是什么？

前端程序员写的代码

问题3：我们通过什么将我们所写的代码转换为网页？

通过浏览器转换(解析和渲染)成用户看到的网页

web标准：

HTML内容，CSS美化，JavaScript行为。

二、 HTML标签学习

2.1、排版标签

1、标题标签

1．标题标签有 --

2．特点：文字加粗、文字变大，h1-h6逐渐减小、独占一行

2、段落标签

1．段落标签

2．特点段落之间存在间隙、独占一行。

3、换行标签

1.代码

2.特点：单标签、让文字强制换行。(用 进行结束换行，长远考虑)

4、水平线标签

1．代码

2．特点：单标签、在页面中显示一条水平线。

2.2、文本格式化标签

1、文本格式化标签的介绍

场景：需要让文字加粗、下划线、倾斜、删除线等效果

代码：加粗b 、strong

		  下划线：u 、ins
		   倾斜：i 、 em
			删除线：s 、del
	语义：突出重要性强化语境

2.3、媒体标签

1、图片标签

1．代码：<img src=” ” alt=” ”>

2．特点：单标签

			Img标签需要展示对应效果，需要借助标签属性进行设置！
		注意：标签的属性写在开始标签内部
			  标签上 可以存在多个属性
		   属性之间以空格隔开
		   标签名与属性之间必须以空格隔开
			属性之间没有顺序之分
	3．图片标签的alt属性
		属性名：alt
		属性值：替换文本
			图片加载失败，显示alt的文本，反之则不显示
	4．图片标签的title属性
		属性名：title
		属性值：提示文本
				当鼠标悬停时，才显示文本
		注意:title属性不仅仅可以用于图片标签，还可以用于其他标签。
	5．图片标签的width和height
		属性名：width和height
		属性值：宽度和高度（数字）
		注意点：
			如果只设置width或height中的一个，另一个没设置会自动等比例缩放				（此时图片不会变形）
			如果同时设置了width和height两个，如设置不当图片可能会变形。

css初学笔记（web安全）

在html中添加css的方法：

1.外部样式表

CSS保存在.css文件中

在html里使用 引用

2.内部样式表

不使用外部CSS文件

将CSS放在html 里

3.内联样式

仅影响一个元素

在html元素的style属性中添加

选择器：

CSS selectors - Learn web development | MDN (mozilla.org)（这个网站可以看到许多不同的选择器

class与id的区别是id是唯一的，而class是可以不同的

---

css里的颜色

1.关键词

2.RGB三原色

eg：rgb(255,0,0)

3.RGBA

rgb(255,0,0,0.5)

4.十六进制

#ff0000

5.HSL

hsl(0,1009,%50)

6.HSLA(色相 饱和度 亮度)

hsl(0,100%,50%,0.5)

---

字体设置：

---

盒子模型：

当两个盒子靠近时，会外边距塌陷，保留最大外边距。

margin是外边距

paddinng是内边距

指定顺序为顺时针，如下图一

当上边距和下边距一样可以用下图二

Position in CSS

Javascript（web安全学习）

浏览器分成两部分组成:渲染引擎和js引擎

JavaScript的三种写法：

1. 行内式JS：

2. 内嵌式JS：

3. 外部JS文件:

输入输出语法

变量：

var variablename；

函数：

var result_1;
//加法
function add() {alert(1);
  var a = getFirstNumber();
  var b = getTwiceNumber();
  var re =Number( a) +Number( b);
  sendResult(re);
}

//减法
function subtract() {
  var a = getFirstNumber();
  var b = getTwiceNumber();
  var re = a - b;
  sendResult(re);
}

//乘法
function ride() {
  var a = getFirstNumber();
  var b = getTwiceNumber();
  var re = a * b;
  sendResult(re);
}

//除法
function devide() {
  var a = getFirstNumber();
  var b = getTwiceNumber();
  var re = a / b;
  sendResult(re);
}

//给p标签传值
function sendResult(result_1) {
  var num = document.getElementById("result")
  num.innerHTML = result_1;
}

//获取第一位数字
function getFirstNumber() {
  var firstNumber = document.getElementById("first").value;
  return firstNumber;
}

//获取第二位数字
function getTwiceNumber() {
  var twiceNumber = document.getElementById("twice").value;
  return twiceNumber;
}

作用域：

局部变量：在函数中通过var声明的变量。

全局变量：在函数外通过var声明的变量。

没有声明就使用的变量，默认为全局变量，不论这个变量在哪被使用。

字符串

嵌套原则是外双内单，外单内双，或者加反斜杠。

while for switch break continue等和c语言相同

正则表达式修饰符在全局搜索中不分大小

DOM树：

id时大小写敏感的对象，dom文档

可以通过id，class，标签获取元素