「学习笔记」HTML Review

  1. 1. HTML Note
    1. 1.1. HTML响应式设计
    2. 1.2. CSS Combinators
    3. 1.3. CSS Pseudo
      1. 1.3.1. Pseudo-classes
      2. 1.3.2. elements
  2. 2. Javascript
    1. 2.1. 函数

HTML Note

img标签的alt/src属性,代表$\text{alternative}$和$\text{source}$。顺带一提,还有widthheight属性。
下面的图片是找不到的,所以会显示alt后的Alternative
以下代码<img src="/qwq.img" alt="Alternative">将会显示为: Alternative

br标签的意思自然是$\text{breakline}$,pre标签是保留原本文字,比如说以下代码

1
2
3
4
5
6
<p>
q
w
<br/>
q?
</p>


1
2
3
4
5
6
7
<pre>
q
w
<br/>
q
?
</pre>

将会表示为:


q
w


q?

q
w

q ?

pre标签内除$\text{elements}$外的形式将会被保留。















































TagDescription
<b>Defines bold text
<em>Defines emphasized text 
<i>Defines italic text
<small>Defines smaller text
<strong>Defines important text
<sub>Defines subscripted text
<sup>Defines superscripted text
<ins>Defines inserted text
<del>Defines deleted text
<mark>Defines marked/highlighted text

总之,都是首字母就是了,背起来也不复杂。

让我们尝试定义一个可爱的小按钮?
<a style="border: 2px solid white; padding: 2px; border-radius: 4px; text-decoration: none; color: white;" href="#">Button</a>
Button
可惜$\text{stackedit}$貌似不支持自定义$\text{css}$。

a标签中有一个target属性,值为_blank_self_parent_top

$\text{CSS}$的background-image属性也可以用于很多标签,比如说p:
<p style="background-image: url('text.img')">test</p>

接下来是表格属性。
在前文的代码里我们已经见过表格属性了,接下来我们来熟悉它:

1
2
3
4
5
6
7
8
<table>
<tr>
<th>qwq1</th>
</tr>
<tr>
<td>qwq</td>
</tr>
</table>

这是一个简单的表格
但是,当我们加上一些神奇的魔法

1
2
3
4
5
6
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>

$\text{collapse}:$ 坍缩
就是把多根border组合成一根。
剩下的属性就简单介绍了
colspanrowspan,横向合并和纵向合并。
如果要让表格稍微分开点,th, td { padding: 2px; }即可。

ulol在制作表格式区块时很有用。
比如说制作导航栏,我们用ul来实现。至于横向,我们可以用li { float: left; }来控制。纵向则是li { float: inline; }
oltype属性有很多,这里不细细列举了。


  1. Coffee

  2. Tea

  3. Milk


  1. Coffee

  2. Tea

  3. Milk


  1. Coffee

  2. Tea

  3. Milk


  1. Coffee

  2. Tea

  3. Milk

下面是一些看起来没卵用实际上很有用的container
主要用于$\text{CSS}$,$\text{JavaScript}$配置时。
divspan

class属性主要归类用,并且可以如此定义:
<div class="name age"></div>
相比来说,id是类似身份证号的东西,特征是“唯一”。

但是id有个很牛逼的地方,可以进行跳转?!

比如说,我在这篇文档开头加上这么一行代码。

实际上已经加了。
<h1 id="_title">HTML Note</h1>,如果你点击下面的a标签,将会回到顶部。<a href="#_title">回到顶部</a>
回到顶部

iframe标签很有意思了。
<iframe src="https://oi.yuyuko.cc" width="100%"></iframe>
比如说这是我的博客…

加入script标签表示js代码。

HTML响应式设计

首先,$\text{CSS}$的max-width属性可以用于响应式设计,比如:

同时,viewport
<p style="font-size:10vw;">Hello World</p>vw表示viewport height,也表示当前浏览器的高度。

ul中,list-style-type: none;能够去掉ul前面的点。
$\text{CSS}$,display属性。
通常来说,一个标签的display具有两种值:inlineblockinline表示放在同一行里,block则是同一列。

让一个标签消失的办法:
display: none;
visibility: hidden
但是意义不一样,前者是直接忽略,后者则是空出位置不显示。

接下来是关于position属性的应用。
position具有以下值:

  • static
  • relative
  • fixed
  • absolute
  • sticky
    至于每个是干什么的,在这里简单描述以下
  • static: 跟随页面正常浮动。
  • relativestatic基本相同,但是在调整其位置的时候,原有的空白不会被填充(?)。
  • fixed: 顾名思义,固定在某位置不动。
  • absolute: 跟随最近的具有position的元素(?)
  • sticky: 如果离开当前区域,元素则会停留在这。

overflow属性则是在“无法完全预览的内容”中使用。
我们放不下了,于是
div { overflow: scroll; }

CSS Combinators

用来筛选元素的。
最常见的肯定是类选择器 .class
次要的是id选择题 #id

然后就是这里的几个
“, “ div, p { background-color: yellow; }
“ “ div p { background-color: yellow; }
“>” 子选择器,选择 a > b中a的直接子元素,注意其与a b的区别。
“+” 选择器,选择与其相邻的第一个元素。
“~”通用兄弟选择器,选择其兄弟中满足a ~ b,b的元素。
示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
<title>Combinators</title>
</head>

<body>
<div>
<!-- 后裔选择器 -->
<div class="descendant-selector">
<p>selected by "Descendant Selector"</p>
<span>
<p>selected by "Descendant Selector"</p>
</span>
</div>
<p>do not selected by "Descendant Selector"</p>
</div>

<div>
<!-- 子元素选择器 -->
<div class="child-selector">
<p>selected by "Child Selector"</p>
<span><p>do not selected by "Chile Selector"</p></span>
<!-- not child but descendant -->
</div>
</div>

<div>
<!-- 相邻兄弟选择器 -->
<div class="adjacent-sibling-selector">
<p>do not selected by "Adjacent Sibling Selector"</p>
</div>
<p>selected by "Adjacent Sibling Selector"</p>
<p>do not selected by "Adjacent Sibling Selector"</p>
</div>

<div>
<!-- 兄弟选择器 -->
<div class="sibling-selector">
<p>do not selected by "Silbling Selector"</p>
</div>
<p>selected by "Sibling Selector"</p>
<p>selected by "Sibling Selector"</p>
</div>

</body>

</html>
1
2
3
4
.descendant-selector p { background-color: yellow; }
.child-selector > p { background-color: red; }
.adjacent-sibling-selector + p { background-color: blue; }
.sibling-selector ~ p { background-color: green; }

CSS Pseudo

Pseudo-classes

格式: selector:pseudo-class { property: value; }
概括来说,有四种

  • link
  • visited
  • hover
  • active
    如果都要用的话,需要依次写,虽然我也不知道为啥。顺带,这玩意儿不区分大小写。
    使用这种方法可以进行隐藏,比如说
    1
    2
    3
    4
    5
    6
    7
    8
    div p {
    background-color: yellow;
    display: none;
    padding: 20px;
    }
    div:hover p {
    display: block;
    }

还有几个
p:first-child 找到第一个出现的p

elements

格式: selector::pseudo-element { property: value; }
::first-line::first-letter

Javascript

声明变量: var a = 1;
一个语句: alert("qwq???");"qwq???";
这些都是一个语句。
问题来了,JS的坑
特殊数字: NaNInfinity
一个表示不可计算的数字,一个表示最大的数字
1 / 0 -> Infinity
0 / 0 -> NaN
这数字处理怎么这么蛋疼
==会转换数据类型
===不会转换数据类型
所以坚持使用后者
false == 0 true
false === 0 false
还有NaN
与任何数字都不等,包括自己
NaN === NaN
唯一的判断方法是isNaN(NaN);
nullundefined
null0''不同,null是彻彻底底的空。
undefined表示未定义,通常情况下在判断是否传参时候用。
数组由[]定义,或者new Array()
但是为了可读性,主要是用[]
var a = [1, 2, 3, 4, 5, 6,];

js的对象这么建立

1
2
3
4
var a = {
name: "TraceBack",
age: 16
};

由于没用var声明的变量是全局变量,会出很多很蛋疼的问题,于是我们在第一行加上'use strict'
关于字符串,可以用var a = "TraceBack";
转义就用’\‘就好。
字符串中加入${v_name}即可插入字符。用+可以连接字符串,但我猜效率不高?
超出索引范围不会出事,但是会undefined。并且对字符串进行赋值是没有效果的。
toUpperCase()是全部变为大写
toLowerCase()则是全部变为小写
var s = "TraceBack".toUpperCase(); TRACEBACK
反之。
substring(l, r)取字符串的[l, r)区间。substring(l)l到结束
对于数组$\text{Array}$,有着一套类似的处理方法
var s = [1, 2, 3, 4, 5];
s[1] = 2.1 [1, 2.1, 3, 4, 5]
s[6] = 1 [1, 2.1, 3, 4, 5, undefined, 1]
就是这样,访问超界不会出问题,而给超界赋值会强硬给超界那个值
但是给s[1000000000000000000] = 1貌似并没有炸内存,看来有什么处理措施
indexOf()用来查找某个值的下标,看起来效率并不高。
至于slice(l, r),和substring()是类似的,如果不传递任何参数,那就是直接复制一个数组。
这里顺带一提
var a = [1];
var b = a;
b === a true
这里可以看成复制的是引用。
然后有四个函数,push pop处理的是尾部的数据,shift unshift处理的是头部的数据。
reverse()splice()concat()join()。其中concat返回的是一个新的数组,如果数据本身很大的话不建议使用,join返回的是字符串,如
[1, 2, 3, 4].join(' '); 1 2 3 4

访问对象的属性有两种办法
a['property_name']或者a.property_name
这两者略有区别

1
2
3
4
var a {
qwq_qwq: 1,
'qwq-qwq': 2
};

因为qwq-qwq没法作为变量名,所以只能当成字符串处理,也只能用['']来访问了。qwq_qwq则两种访问方式都可以。(字符串访问有点爽.jpg,这就可以玩出很多骚操作了
顺带一提,a.qwq = 3;即可添加属性。判断是否拥有一个属性可以使用in,但是可能是继承来的,所以忽略继承则可以用hasOwnProperty();
循环则有for (;;)for inwhiledo while

当你想用std::map的时候,你发现,索引如果用{}创建的话,索引只能是string类型。所以我选择用ES6Mapvar a = new Map([['TraceBack', '20020507']]);,我也不知道为啥还要多加一个[]a.get('TraceBack') 20020507。用has函数判断是否存在某个键,用get获取某个键的值。
Set则可以用addgetdelete操作。

抛开之前说的循环,有两种循环的方式,for ... ofobject.forEach(function (element, index, array)) {}。为什么不能用for ... in
我们来测试测试。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
> var a = new Map([['a', 1], ['b', 2]]);
> for (var x of a)
console.log(x[0] + ' ' + x[1]);
> a 1
> b 2
> var b = [1, 2, 3, 4, 5];
> for (var x in b)
console.log(x);
> 0
> 1
> 2
> 3
> 4
> b.name = "???"
> for (var x in b)
console.log(x);
> 0
> 1
> 2
> 3
> 4
> name
> for (var x of b)
console.log(x);
> 1
> 2
> 3
> 4
> 5

大概…就是这么骚。for .. in遍历的是属性,而for .. of遍历的是具体的值,forEach就要复杂许多,涉及回调函数。
a.forEach(function (value, key, map) { console.log([value, key, map].slice(0, 2).join(' '))}); 1 a \n 2 b

函数

$\text{function}$?
由于有基础,这里仅仅涉及函数的定义方式。

1
2
3
function function_name (variables) {
return "this is a function";
}

console.log(function_name) "this is a function"。由于函数也是一个对象,所以函数可以这么定义

1
2
3
var function_name = function (variables) {
return "function in javascript is object";
}

其中,function (variables) {}是一个匿名函数。
这里是typeof的用法

1
2
3
4
5
6
7
8
function abs(x) {
if (typeof x !== "number")
throw 'Not a Number';
if (x > 0)
return x;
else
return -x;
}

接下来是arguments的用法。用arguments.length可以获得传入参数个数。

在$\text{ES6}$的标准中引入了...rest参数。
function qwq(a, b, ...c) { console.log(c); }
qwq(1, 2, 3, 4, 5, 6, 7); [3, 4, 5, 6, 7]

这里有个坑

1
2
3
4
5
6
7
8
9
10
11
12
function a() {
return { qwq: 1 };
}
function a() {
return
{ qwq: 1} ;
}
function a() {
return {
qwq: 1
};
}

第三种才是正解~(不会出问题

查找变量的时候从内向外查找,即内部屏蔽外部。
这时候,$\text{js}$的坑又开始了
函数定义会把所有的变量声明提升到函数顶部。
但是提升的仅仅是声明

1
2
3
4
5
6
7
8
9
10
11
12
13
function func() {
console.log(typeof y);
var y = 1;
}
```
`> undefined`
`js`的全局作用域叫做`window`
这时候又会发现,`var`的作用域作用于函数,不作用于块。
如果要在块内引用变量,咋耍啊?
```javascript
var s = 0;
for (let i = 1; i <= 1000; ++i)
s += i;

常量的作用。
const x = 1;
拥有块级作用域,并且不可修改

结构赋值比较简单
let [a, b, c] = [1, 2, 3]
个人觉得这样效率可能会很低?
对于对象的解构赋值,必须对应键。

this到底指向谁?
总之记住指向上一层的对象就行,记住,是上一层。
strict模式下,如果没有对象可以指向,就指向undefined
apply可以控制this的指向,写法如下

1
function_name.apply(object_name, arguments_list);

其中arguments_list打包成array再传入。
call()函数的话就不打包了。

高阶函数,说白了就是函数作为参数。
据说用高阶函数遍历会快许多?不清楚
[1, 2, 3, 4, 5, 6].map(function (x) { return x * x; });
[1, 4, 9, 16, 25, 36]
其实有个装逼点的写法
[1, 2, 3, 4, 5, 6].map(x => x * x);
parseInt()函数可以把字符串转化为int类型。
但是啊但是
['1', '2', '3', '4', '5', '6'].map(parseInt);
为啥是[1, NaN ...]
原因很简单,parseInt()本身需要两个参数,一个可选,一个必须。map传递了三个参数,这就很坑了,因为参数被错误地填写,导致返回值错误。(map传递地是value, index, object)。
可以这么写['1', '2', '3', '4', '5', '6'].map(x => parseInt(x));
就好辣
reduce的意思也很简单,但是调用方式如下
[a, b, c, d].reduce(f) = f(f(f(a, b), c), d);
filter函数顾名思义,true则保留,false则丢弃。

1
2
3
4
let a = [1, 2, 3, 4, 5, 6, 7];
let b = a.filter(function (x) {
return x % 2 !== 0;
});

b [1, 3, 5, 7]
sort就省略了。
但是呢但是,sort没法修改原本的数组,返回的就是原本数组的对象,这点要注意,可能很坑。

函数作为返回值的操作还是有点骚,这玩意儿叫闭包。
function sum(arr) { return arr.reduce((x, y) => x + y); }
如果要求和,一般都是这么写的吧。
但是,如果要惰性求值呢?

1
2
3
4
5
function lazy_sum(arr) {
return function() {
return arr.reduce((x, y) => x + y);
};
}

问题很简单,它只是返回了一个函数,而这个函数被调用的时候才会执行arr.reduce((x, y) => x + y);
比如说,我们来看一个函数。

1
2
3
4
5
6
7
8
function count() {
var arr = [];
for (let i = 1; i <= 3; ++i)
arr.push(function() {
return i * i;
});
return arr;
}

1
2
3
4
5
6
7
8
function count() {
var arr = [];
for (var i = 1; i <= 3; ++i)
arr.push(function() {
return i * i;
});
return arr;
}

结果截然不同,为啥?

先往后走吧
包装对象是个很神奇的东西
typeof new Number('123') object
typeof Number('123') number

$\text{js}$的类貌似不叫类
叫做原型($\text{prototype}$)
我们可以先搞个对象,然后用__proto__将其指向原型。