极其敷衍的前端入门(version:两天速成)

本文最后更新于:6 天前

Hyper Text Markup Language -----HTML

曾经网页需要flash实现一些功能,但是html5已经完全可以做到了

W3C标准包括

  • 结构化标准语言——HTML、XML
  • 表现标准语言——CSS
  • 行为标准——DOM、ECMAScript

1.HTML

1…1网页基本信息

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!-- DOCTYPE:告诉浏览器,我们使用的规范-->
<!DOCTYPE html>
<html lang="en">
<!-- head tag代表网页头部-->
<head>
<!-- meta是描述性标签,描述网站的一些信息-->
<!-- meta一般用来做SEO-->
<meta charset="UTF-8">
<title>Chen</title>
</head>
<!-- body tag代表网页主体-->
<body>
Hello, World!
</body>
</html>

1.2行内元素和块元素

块元素:无论内容多少,该元素独占一行,如p、h1~h6

行内元素:通俗点说不会换行…,如a、strong、em

1.3基本标签

  • p:段落

  • br:换行

  • h1~h6:六级标题

  • strong:粗体

  • em:斜体

  • &nbsp:空格

    这应该算特殊符号,不算tag

  • img:图像标签

    src、alt、title、width、height属性

  • a:链接标签

    href target

1.4列表

  • 有序列表ol

  • 无序列表ul

    有序列表和无序列表的表项均用li标签

  • 自定义列表dl

    dt标签确定题目,dd标签确定表项

1.5表格

1.6视频元素与音频元素

1.7iframe内联框架

好神奇!

1.8表单

重点

2.CSS

2.1选择器

选择页面上的某一个后者某一类元素

2.1.1基本选择器

当一个标签的样式同时被标签选择器、类选择器、id选择器生效时,优先级为:id选择器>类选择器>标签选择器。

标签选择器会选中页面的所有标签

1
2
3
4
5
6
7
8
9
10
<style>
h1{
color: #a3ffad;
background-color: aqua;
border-radius: 25px;
}
p{
font-size: 25px;
}
</style>

这样会改变所有的h1与p标签

类选择器则会改变目标类的元素

1
2
3
4
5
<style>
.tag{
color: red;
}
</style>

tag是一个标签所属的类,可以自定义设置。

1
2
3
4
5
<body>
<p class="tag">
Chen
</p>
</body>

id选择器则会对全局唯一的目标id产生效果

1
2
3
4
5
6
7
8
9
10
11
12
13
<style>
#tag{
color: red;
}
</style>

<!-- ... -->

<body>
<p id="tag">
Chen
</p>
</body>

2.1.2层次选择器

  • 后代选择器
  • 子选择器
  • 相邻兄弟选择器
  • 通用选择器

以上均顾名思义…

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/*后代选择器,对body的所有p标签生效*/
body p{
background: red;
}
/*子选择器,对body下的直接的p标签生效*/
body > p{
background: red;
}

/*相邻兄弟选择器,选择class为active的p标签的相邻的右兄弟p标签*/
.active + p{
background: brown;
}

/*通用选择器,选择class为active的p标签及其所有的右兄弟p标签*/
.active ~ p{
background: green;
}

2.1.3结构伪类选择器

1
2
3
4
5
6
7
8
/*ul的第一个子元素*/
ul li:first-child{
background: green;
}
/*ul的最后一个子元素*/
ul li:last-child{
background: antiquewhite;
}

2.1.4属性选择器

结合了id与class属性。

标签[属性]

标签[属性=值]

其中,=可以替换为

  • *= 通配符
  • ^= 开头
  • $= 结尾

2.2网页元素美化

CSS字体样式

  • span标签

  • 文本样式

    font-family、font-size、font-weight

列表样式

背景

渐变

2.3盒子模型

image-20220212094021085

  • margin
  • border
  • padding

2.4浮动

2.5定位

2.6层级

z-index

3.JavaScript

外部导入

1
<script src="xx.js"></script>

3.1运算符

  • 逻辑运算

  • 比较运算

    =

    == 等于:类型不一样,值一样为true

    === 绝对等于:类型一样,值一样为true

    例:

    1 == “1” true

    1 === “1” false

    这是JS的缺陷,坚持不要使用==

3.2严格检查模式

在代码的开头加入单独的一行

1
'use strict'

就进入严格检查模式,以防止JS的随意出现的问题。

3.3变量定义

默认所有的全局变量,都被绑定在全局对象window上

1
2
3
var x = 'xxx';
alert(x);
alert(window.x);

实际上,即使是alert也是绑定在window上的

1
2
3
var x = 'xxx';
window.alert(x);
window.alert(window.x);

var定义会有一些局部作用域冲突问题,所以建议使用let定义局部作用域的变量。

3.4数据类型

字符串

  • 字符串使用单引号或者双引号
  • 也可以使用`(波浪线对应的点)构造多行字符串
  • 模板字符串

数组

1
var arr = [1, 2, 3, 4, 5, 6];

可以给arr.length赋值,数组大小会发生变化。赋值过小则会丢失元素

  • slice():截取arr的一部分,返回新数组,切片操作。

  • push(), pop()

  • unshift(), shift(),与push pop相反,对头部元素操作。

对象

js的对象类似json的格式…好离谱。

使用不存在的对象属性不会报错,只会出现undefined。

可以使用delete obj.attribute删除对象属性

也可以直接添加属性,类似python

Map与Set:ES6新特性

3.5函数

如果没有执行return,函数执行完也会返回结果,结果是undefined

不过js里有两种定义方式

1
2
3
4
5
6
7
8
9
10
11
12
13
function myAbs(x){
if(x >= 0)
return x;
else
return -x;
}

var myAbs = function(x){
if(x >= 0)
return x;
else
return -x;
}

函数调用时参数的数量是任意的…甚至可以不传

麻了

  • 可以通过typeof对传入参数的类型进行检查
  • 可以通过arguments遍历传入的所有参数。auguments是一个数组
  • 也可以通过增加*…rest*参数,函数体内可以通过rest数组遍历所有未定义的参数。

3.6apply

js中可以控制this的指向。

3.7内部对象

Date

JSON

Ajax

3.8操作BOM对象

BOM:浏览器对象模型

window screen document等

3.9操作DOM对象

DOM:文档对象模型

1
2
document.getElementById
document.createElement

3.10jQuery

jQuery是一个库,里面存在大量的javascript函数

$(selector).action;

jQuery好舒服!

selector

css有的,jQuery都有。

action

各种事件,没啥好说的

一般的js代码都要求在网页元素加载完成后执行。将js代码写到下面的大括号内即可。

1
2
3
4
5
6
7
8
9
$(document).ready(function (){

})

//简略写法

$(function (){

});

本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!