一、HTML入门
1.1 HTML&CSS&JavaScript的作用
1.2 HTML概述
HTML（HyperText Markup Language，超文本标记语言）是构建网页的基础，它定义了网页的结构和内容。HTML 使用标记（标签）来告诉浏览器如何展示文本、图像、表格、链接等网页元素。
超文本：超文本是一种文本显示方式，它通过链接（通常称为“超链接”）将文本内容与其他文本或资源（如网页、图片、视频等）连接起来。与传统的线性文本不同，超文本允许用户跳转到其他相关的页面或资源，使得信息呈现方式更具互动性。
标记语言：是一种用于描述文档结构和数据格式的语言，通过在文本中插入特定的标记（标签）来标识和定义内容的结构、属性和功能。标记语言本身不会直接处理内容的显示，而是为内容提供结构化的信息，通常与样式表（如 CSS）和脚本（如 JavaScript）一起使用，以实现对内容的最终呈现和交互效果。
1
| <a href="http://www.xxx.com">show detail</a>
|
href=”网址”就是属性，href是属性名，”网址”是属性值。
1.3 HTML文件基础结构
- 根标签：
- 每个html文件的内容都需要写在跟标签之中，所有的其它标签都要在这个标签之内。
<head> </head>头标签：定义那些不直接展示在页面主体上，但是又很重要的内容。如：
- 字符集
<meta charset="utf-8" />告诉浏览器使用什么字符集对文件进行解码。
乱码的产生：编写文件时使用的编码字符集和浏览器解析时使用的解码字符集不相同。
<body> </body>体标签：定义要展示到页面主体的标签。
<!-- 内容 -->注解标签：标签中间写上注解内容即可。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<!DOCTYPE html> // 这个是一个文档声明，标准html5文件里开头都有这个，一般IDE会帮我们自动生成。
<html>
<head>
<title> 第一个页面 </title> // 这个标签是浏览器上标签页的名字
<meta charset="UTTF-8" />
</head>
<body>
<h1> 这是一级标题 </h1>
</body>
</html>
|
1.4 HTML概念词汇解释
- 标题tag：代码中一个<>叫做一个标签，有些标签成对出现，称之为双标签，有些标签单独出现称之为单标签。
- 属性attribute：一般在开始标签中，用于定义标签的一些特征。对标签特征进行设置的一种方式，属性一般在开始标签中定义。
- 文本text：双标签中间的文件，包含空格换行等结构。
- 元素element：经过浏览器解析后，每一个完整的标签（标签+属性+文本）开源称之为一个元素。
HTML更多的语法细节
- 根标签有且只能有一个
- 无论是双标签还是单标签都需要正确的关闭
- 标签可以嵌套但不能交叉嵌套
1
2
| <big><i>张三</i></big>
<big><i>张三</big></i>
|
- 注释语法为
<!-- -->，注意不能嵌套。
- 属性必须有值，值必须加引号，H5中属性名和值相同时可以省略属性值
1
| <input type="password" />
|
- HTML中不严格区分字符串使用单双引号（特殊需要时，需要单双引号交替使用，如：
"asdf'qew"aaaaa"er'asdf"
- HTML标签不严格区分大小写，但是不能大小写混用
1.5 开发工具VsCode
- 安装VsCode
- 安装插件：
Auto Rename Tag 自动修改标签对插件
HTML CSS Support HTML，CSS支持
Intellij IDEA Keybindings IDEA快捷键支持
Live Server 实时加载功能的小型服务器
open in browser 通过浏览器打开当前文件的插件
Prettier-Code formatter 代码美化格式化插件
Vetur VScode中的Vue工具插件
vscode-icons 文件显示图标插件
Vue 3 snipptes 生成VUE模板插件
Vue language Features（更名：Vue - Official） Vue3语言特征插件
VS Code使用小技巧
创建一个HTML文件之后，在文件中输入一个!，点回车可以快速生成一个模板。
Live Server使用技巧
写好HTML文件后，在vscode的右下角可以看到一个Go Live的按钮，点击之后Vscode就会自动开启一个虚拟的服务，并且把当前文件放到所虚拟的文件上，然后会自动打开浏览器。之后再修改HTML文件，不需要刷新浏览器也可以看到最新的内容。即实时加载功能。当不再需要该服务后，关闭浏览器，回到Vscode，点击右下角的按钮（Go Live变成了Port:5500），点击后就关闭了此虚拟服务（同时按钮变回Go Live）。鼠标右键（或者快捷键），在选项框中选择操作也能达到以上开关虚拟服务的效果。
二、HTML常见标签
2.1 标题标签
标题标签一般用于在页面上定义一些标题性的内容，如新闻标题、文章标题等，有h1到h6六级标题。属于双标签
1
2
3
4
5
6
7
8
| <body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>
|
2.2 段落标签
段落是通过
标签定义的。属于双标签
1
2
| <p>这是一个段落</p>
<p>这是另一个段落</p>
|
2.3 换行标签
文本换行通过<br />来实现，属于单标签
1
| <p>这是<br />一个<br />换行后的段落</p>
|
文本通过<hr />来实现水平线
1
2
3
| <p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>
|
总结
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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>come on</h1>
<h2>come on</h2>
<h3>come on</h3>
<h4>come on</h4>
<h5>come on</h5>
<h6>come on</h6>
<p>这是一个段落</p>
<p>
这是一个段落 <br />
给一个换行
</p>
<p>
这是另一个段落，给一个水平线
<hr />
</p>
</body>
</html>
|
2.4 列表标签
有序列表，分条列项展示数据的标签，属于双标签其每一项前面的符号带有顺序特征。
有序列表标签 ol
无序列表标签 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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ol>
<li>数据类型</li>
<li>变量</li>
<li>流程控制</li>
<li>函数</li>
</ol>
<ul>
<li>java</li>
<li>python</li>
<li>C</li>
<li>PHP</li>
</ul>
<ul>
<li>java
<ol>
<li>数据类型</li>
<li>变量</li>
<li>流程控制</li>
<li>函数</li>
</ol>
</li>
<li>python</li>
<li>C</li>
<li>PHP</li>
</ul>
</body>
</html>
|
2.5 超链接标签
点击后带有链接跳转的标签，也叫做a标签，属于单标签。
href属性用于定义链接
- href中可以使用绝对路径，以
/开头，始终以固定路径作为基准路径作为出发点
- href中也可以使用相对路径，不以
/开头，以当前文件所在路径作为出发点
- 相对路径可以以
./或者../开头。./表示当前资源的所在目录，可以省略不写，../表示当前资源所在目录的上一级目录。
- href中也可以定义完整的URL
target用于定义打开的方式
- _blank在新窗口中打开目标资源
- _self 在当前窗口中打开目标资源
代码
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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href="https://ryanblog.us.kg/" target="_blank">ryan博客</a>
<br />
<a href="./01firstPage.html" target="_blank">01firstPage.html</a>
<br />
<a href="a/test.html" target="_blank">a/test.html</a>
<br />
<a href="/demo01-html/03ol_ul_li.html" target="_blank">/demo01-html/03ol_ul_li.html</a>
</body>
</html>
|
2.6 多媒体标签
img（重点）图片标签（单标签），用于在页面上引入图片
1
2
3
4
5
6
|
<img src="img/logo.png" title="ryan" alt="ryanlogo" />
|
src 的图片路径有URL，相对路径，绝对路径。
图片宽度控制可以用 width属性来配置，以像素px为单位横纵比是锁定的，改变宽度，长度也会改变。
1
2
3
4
5
6
7
8
9
10
11
12
13
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="img/ryan.jpg" width="300px" title="ryan" alt="ryanimg" />
<br />
<img src="img/ryan.jpg" title="ryan" alt="ryanimg" />
</body>
</html>
|
2.7 表格标签（重点）
常规表格
table标签，代表表格thead标签，代表表头，可以省略不写tbody标签，代表表体，可以省略不写tfoot标签，代表表尾，可以省略不写tr标签，代表一行td标签，代表行内一格th标签，自带加粗和居中效果的td
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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h3 style="text-align: center;"> 员工技能竞赛评分表</h3>
<table border="1px" style="margin: 0px auto; width: 300px;">
<tr>
<th>排名</th>
<th>姓名</th>
<th>分数</th>
</tr>
<tr>
<td>1</td>
<td>张三</td>
<td>100</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>99</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>98</td>
</tr>
</table>
</body>
</html>
|
单元格跨行
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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h3 style="text-align: center;"> 员工技能竞赛评分表</h3>
<table border="1px" style="margin: 0px auto; width: 400px;">
<tr>
<th>排名</th>
<th>姓名</th>
<th>分数</th>
<th>备注</th>
</tr>
<tr>
<td>1</td>
<td>张三</td>
<td>100</td>
<td rowspan="6">前三名升职加薪</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>99</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>98</td>
</tr>
<tr>
<td>总人数</td>
<td colspan="2">200</td>
</tr>
<tr>
<td>平均分</td>
<td colspan="2">90</td>
</tr>
<tr>
<td>及格率</td>
<td colspan="2">80%</td>
</tr>
</table>
</body>
</html>
|
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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h3 style="text-align: center;"> 员工技能竞赛评分表</h3>
<table border="1px" style="margin: 0px auto; width: 400px;">
<tr>
<th>排名</th>
<th>姓名</th>
<th>分数</th>
<th>备注</th>
</tr>
<tr>
<td>1</td>
<td>张三</td>
<td>100</td>
<td rowspan="3">前三名升职加薪</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>99</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>98</td>
</tr>
</table>
</body>
</html>
|
2.8 表单标签（重点）
表单标签可以实现让用户在界面上输入各种信息并提交的一种标签，是向服务端发送数据主要的方式之一。
1
2
3
4
5
6
| <form action="http://www.xxx.com" method="get">
用户名 <input type="text" name="username" /> <br />
密 码 <input type="password" name="password" /> <br />
<input type="submit" value="登录" />
<input type="reset" value="重置" />
</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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="08welcome.html" method="get">
<input type="hidden" name="id" value="123" />
<input type="text" name="id" value="456" readonly />
<input type="text" name="id" value="789" disabled />
<br/>
用户名: <input type="text" name="username" /> <br/>
密码: <input type="password" name="userPwd" /> <br/>
性别:
<input type="radio" name="gender" value="1" checked /> 男
<input type="radio" name="gender" value="0" /> 女
<br/>
<input type="checkbox" name="hobby" value="1" /> 篮球
<input type="checkbox" name="hobby" value="2" /> 足球
<input type="checkbox" name="hobby" value="3" /> 健身
<input type="checkbox" name="hobby" value="4" /> 羽毛球
<br/>
个人简介:
<textarea name="intro" style="width: 300px; height: 100px;" ></textarea>
<br/>
籍贯:
<select>
<option value="1">京</option>
<option value="2">津</option>
<option value="3">冀</option>
<option value="0" selected>-请选择-</option>
</select>
<br/>
头像:
<input type="file" name="img" />
<br/>
<input type="submit" value="登录" />
<input type="reset" value="清空" />
</form>
</body>
</html>
|
2.9 布局相关标签
div标签，俗称“块”，主要用于划分页面结构，做页面布局
span标签，俗称“层”，主要用于划分元素范围，配合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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body style="background-color: coral;">
<div style="border: 1px solid red; width: 500px; height: 200px; margin: 10px auto; background-color: antiquewhite; ">123</div>
<div style="border: 1px solid red; width: 500px; height: 200px; margin: 10px auto; background-color: bisque;">456</div>
<div style="border: 1px solid red; width: 500px; height: 200px; margin: 10px auto; background-color: brown;">
<span style="font-size: 30px; color: aqua; font-weight: bold;">哈兰德</span>的伤情引发了外界的关注，曼城跟队记者Sam Lee在社交媒体上晒出哈兰德赛后谢场的视频，哈兰德能够正常走路，他向球迷鼓掌招手，并没有露出痛苦的表情。</div>
<span style="border: 1px solid greenyellow; width: 200px; height: 200px;">555</span>
</body>
</html>
|
2.10 特殊字符
对于有特殊含义的字符，需要通过转义字符来表示
HTML中有用的字符实体
注释：实体名称对大小写敏感！
代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>一级标题</h1>
</body>
</html>
|
三、CSS的使用
css层叠样式表（英文全称：(Cascading Style Sheets)能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，简单来说就是美化页面。
3.1 CSS引入方式
行内式：通过元素开始标签的style属性引入，样式语法为：样式名:样式值;样式名:样式值;...
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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
input{
width: 60px;
height: 40px;
background-color: rgb(133, 208, 21);
color: white;
font-size: 22px;
font-family: '隶书';
border: 2px solid green;
border-radius: 5px;
}
</style>
</head>
<body>
<input type="button" value="按钮" />
<input type="button" value="按钮" />
<input type="button" value="按钮" />
<input type="button" value="按钮" />
</body>
</html>
|
3.2 CSS选择器
元素选择器
id选择器
class选择器
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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.shapeClass {
width: 80px;
height: 40px;
border-radius: 5px;
}
.colorClass {
background-color: rgb(29, 206, 29);
color: white;
border: 3px solid green;
}
.fontClass {
font-size: 20px;
font-family: '隶书';
line-height: 30px;
}
</style>
</head>
<body>
<input id="btn1" class="shapeClass colorClass"type="button" value="按钮" />
<input id="btn2" class="colorClass fontClass"type="button" value="按钮" />
<input id="btn3" type="button" value="按钮" />
<input id="btn4" type="button" value="按钮" />
</body>
</html>
|
3.3 CSS浮动
CSS的Float（浮动）使元素脱离文档流，按照指定的方向（左或右发生移动），直到它的外边缘碰到包含框或另一个浮动框的边框为止。
- 浮动设计的初衷是为了解决文字环绕图片的问题，浮动后一定不会将文字挡住。
- 文档流是文档中可显示对象在排列时所占用的位置/空间，而脱离文档流就是在页面中不占位置了。
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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.outerDiv {
width: 500px;
height: 300px;
border: 1px solid rgb(34, 208, 34);
background-color: rgb(215, 215, 24);
}
.innerDiv {
width: 100px;
height: 100px;
border: 1px solid blue;
}
.d1 {
background-color: greenyellow;
float: left;
}
.d2 {
background-color: rgb(173, 77, 77);
}
.d3 {
background-color: aqua;
}
</style>
</head>
<body>
<div class="outerDiv">
<div class="innerDiv d1">diva</div>
<div class="innerDiv d2">divb</div>
<div class="innerDiv d3">divc</div>
</div>
</body>
</html>
|
3.4 CSS定位
position属性指定了元素的定位类型
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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.innerDiv {
width: 100px;
height: 100px;
border: 1px solid blue;
}
.d1 {
background-color: greenyellow;
position: fixed;
top: 100px;
left: 100px;
}
.d2 {
background-color: rgb(173, 77, 77);
}
.d3 {
background-color: aqua;
}
</style>
</head>
<body>
<div class="innerDiv d1">diva</div>
<div class="innerDiv d2">divb</div>
<div class="innerDiv d3">divc</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>
|
3.5 CSS盒子模型
所有HTML元素可以看作盒子，在CSS中，”box model”这一术语是用来设计和布局时使用的。
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
52
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.innerDiv {
width: 100px;
height: 100px;
border: 1px solid blue;
float: left;
}
.d1 {
background-color: greenyellow;
}
.d2 {
background-color: rgb(173, 77, 77);
}
.d3 {
background-color: aqua;
}
</style>
</head>
<body>
<div class="innerDiv d1">diva</div>
<div class="innerDiv d2">divb</div>
<div class="innerDiv d3">divc</div>
</body>
</html>
|
