(HTML5+CSS3+Javascript)基础

1
2
3
4
5
6

原来链接: https://www.cnblogs.com/shuizhidao/p/12250953.html
视频链接: https://www.bilibili.com/video/av5862916?p=4
PDF链接: https://pic.bndstone.com/html5_css3.pdf

http://www.52zxw.com/kecheng_121.html
https://v.qq.com/x/page/e0883myunjn.html [html5+css3视频教程（全227讲]

参考手册

文档说明

1
2
3
4
5
6
7
8
9
10
11

<!DOCTYPE html> 告诉浏览器要处理的为html文档

<html lang="en"> 文档中html部分的开始，属性language，en=English，zh=Chinese

<head> 提供有关文档内容和标注信息

<meta charset="UTF-8"> 定义编码格式

<title> 标题

编辑主体

基本元素

1
2
3
4
5
6
7
8
9
10
11
12
13

<h1> 标题大小

<a href="http://..." target="..."> 超链接，href=链接目标，target="_blank"为新建窗口打开，默认为本地刷新

<b> 粗体

<em> 斜体

<u> 下划线，不推荐使用

<s> 删除线

<br/> 换行

表格元素

1
2
3
4
5
6
7
8
9

<table> 表格

<tr> 行

<td> 列

<th> 表头

colspan 合并列单元格，rowspan合并行单元格，reversed倒序

列表元素

1
2
3
4
5
6
7

<ol> 有序列表

属性：type（设置样式），reversed（降序）

<ul> 无序列表

<li> 表示列表中的项

表单元素

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

<form>

method=用于发送form-data的http方法,

action=当提交表单时向何处发送表单数据

<input> 属性 Type, Name

Type=text时

value=预填充内容,占位

placeholder=显示内容，不填充，不占位

maxlength=最大填充字符数

size=拓宽单行文本框

readonly只读

Type=button时，按钮

Type=submit时，提交表单

button元素比input-button更适用

submit用于提交表单，适用范围比input-button小

input-button通常用于和JS一起使用并作为绑定事件处理

submit用于提交表单时，必须声明form里面的method属性，最好也添加action属性。

Type=range时，数字滑动

min，max=最值

step=步长

value=初值

Type=number时，手动输入数字元素同range

Type=checkbox时，复选框

Type=radio时，复选框，选中后无法取消

name=键值

checked预选中

1
2
3
4
5
6
7

<form>
三选一
<br/>
<input type="radio" name="a" checked>C++
<input type="radio" name="a">Java
<input type="radio" name="a">Python
</form>

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

Type=email

Type=tel

Type=url

Type=date

Type=color

Type=hidden

Type=image

<input type="image" src="图片地址" width="80px">

Type=file上传文件

Multiple 一次允许上传多个文件

Required 只能上传一个文件

<textarea> 多行文本框

rows=行，cols=列

<select> 单选项列表

<option>表单

<datalist> 多选项列表，配合input使用

1
2
3
4
5
6
7
8

<form>
<input type="text" list="datalist1">
<datalist id="datalist1">
<option>C++</option>
<option>Python</option>
<option>Java</option>
</datalist>
</form>

嵌入图片

1
2
3
4
5
6
7

<img src="">

alt=备用显示内容

图片添加超链接

<a>超链接标签

1
2
3

1
2
3
4
5
6
7
8
9

分区响应图

<map> <area>点击后导航到指定URL

属性shape、coords共同起作用

shape

rect矩形，circle圆形，poly多边形,default默认

1
2
3
4

嵌入视频

1
2
3
4

CSS3选择器

1
2
3
4
5
6
7
8
9
10

<head>
<meta charset="UTF-8">
<title>Oh my god</title>
<style type="text/css">
a{
font-size:80px;
color: darkcyan;
}
</style>
</head>

*选择所有元素

a{}根据类型选择元素

.class1{} 根据类选择元素

id1{} 根据id选择元素
[href] 根据属性选择元素

a:hover{} 选择器动作，鼠标经过时的动作

CSS控制边框和背景

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Oh my god</title>
<style type="text/css">
.class1{
border-width: 8px;
border-color: darkcyan;
border-style: groove;
}
</style>
</head>
<body>
<p class="class1">what's your name?</p>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Oh my god</title>
<style type="text/css">
.class1{
border: 5px solid red;
border-top: 10px dashed yellow;
background-color: aliceblue;
background-image: url("picture.png");
}
</style>
</head>
<body>
<p class="class1">what's your name?</p>
</body>
</html>

background-attachment: fixed; 随页面滚动

CSS设置文本样式
对齐 text-align:

文本方向 direction:

文字间距，单词间距，行高 letter-spacing, word-spacing, line-height

首行缩进 text-indent

文本装饰 text-decoration

文本大小写转换 text-transform: (capitalize首字母大写 uppercase全部大写)

字体名称 font-family:

字体大小 font-size:

字体样式 font-style:

指定字母是否以小型大写字母显示 font-variant:

设置字体粗细 font-weight

创建文本阴影 text-shadow (水平偏移竖直偏移模糊度颜色)

CSS使用过渡

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Oh my god</title>
<style type="text/css">
p{
width: 100px;
height: 100px;
background-color: aqua;
}
p:hover{
width: 200px;
height: 200px;
background-color: blue;
transition: 1s;
}
</style>
</head>
<body class="class1">
<p>what's your name?</p>
</body>
</html>

transition-timing-function: (ease, ease-in, ease-out, ease-in-out)过渡时呈曲线变化

CSS使用动画

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Oh my god</title>
<style type="text/css">
p{
width: 100px;
height: 100px;
background-color: aqua;
}
p:hover{
animation-duration: 500ms;
animation-delay: 200ms;
animation-name: what;
/*重复无数次*/
animation-iteration-count: 4;
/*变大之后缩小*/
animation-direction: alternate;
}
@keyframes what {
from{
width: 1000px;
height: 2000px;
background-color: brown;
}
50%{
width: 400px;
height: 400px;
background-color: blueviolet;
}
75%{
width: 500px;
height: 2000px;
background-color: darkgreen;
}
to{
width: 200px;
height: 200px;
background-color: darkcyan;
}
}
</style>
</head>
<body class="class1">
<p>what's your name?</p>
</body>
</html>

CSS使用变换
transform:

transform-origin: 更改旋转锚点

CSS的盒子模型

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Oh my god</title>
<style type="text/css">
.class1{
border: 1px solid black;
background-color: antiquewhite;;
/*内边距*/
padding: 50px 10px;
/*内边距背景填充*/
background-clip: content-box;
/*外边框*/
margin: 100px 500px;
}
</style>
</head>
<body>
<div class="class1">
what's your name?
</div>
</body>
</html>

JavaScript基础
外部文件引入

1
2
3
4
5
6
7
8
9
10
11

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="JS.js">
</script>
</head>
<body>
</body>
</html>

变量

var，const，let

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
let num=123;
num += "100";
document.write("<h1>"+num+"</h1>")
let name=prompt("your name is:", "")
document.write("<h1>"+name+"<h1/>")
</script>
</head>
<body>
</body>
</html>

判断

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
let pwd = prompt("your pwd is ?","");
if(pwd == "123456"){
document.write("密码正确");
}else{
document.write("密码错误");
}
</script>
</head>
<body>
</body>
</html>

循环，跟C/C++一样。

记于心

(HTML5+CSS3+Javascript)基础

Administrator

Leave a Reply Cancel reply