前端

JavaScript基础知识

一、JavaScript简介

JavaScript起源：在1995年时，由Netscape公司的 Brendan Eich，在网景导航者浏览器上首次设计实现而成。Netscape在最初将其脚本语言命名为LiveScript，因为Netscape与Sun合作，网景公司管理层希望它外观看起来像Java，因此取名为 JavaScript。

1、JavaScript介绍

  • JavaScript是最流行且使用最广泛的客户端脚本语言。
  • 客户端脚本是指在Web浏览器中运行的脚本。
  • JavaScript用于向网站添加交互性和其他动态功能。
  • JavaScript是一种面向对象的语言，并且在语法上与Java编程语言也有一些相似之处。但是JavaScript与Java没有任何关系。

2、JavaScript特性

  • 脚本语言：JavaScript是一种解释型的脚本语言。不同于C、C++、Java等语言先编译后执行，JavaScript不会产生编译出来的字节码文件，而是在程序的运行过程中对源文件逐行进行解释。
  • 基于对象：JavaScript是一种基于对象的脚本语言，它不仅可以创建对象，也能使用现有的对象。但是面向对象的三大特性：封装、继承、多态中，JavaScript能够实现封装，可以模拟继承，不支持多态，所以它不是一门面向对象的编程语言。
  • 弱类型：JavaScript中也有明确的数据类型，但是声明一个变量后它可以接收任何类型的数据，并且会在程序执行过程中根据上下文自动转换类型。
  • 事件驱动：JavaScript是一种采用事件驱动的脚本语言，它不需要经过Web服务器就可以对用户的输入做出响应。
  • 跨平台性：JavaScript脚本语言不依赖于操作系统，仅需要浏览器的支持。因此一个JavaScript脚本在编写后可以带到任意机器上使用，前提是机器上的浏览器支持JavaScript脚本语言。目前JavaScript已被大多数的浏览器所支持。

二、JavaScript基本语法

1、JavaScript代码嵌入方式

  • HTML文档内

①JavaScript代码要写在script标签内

②script标签可以写在文档内的任意位置

③为了能够方便查询或操作HTML标签（元素），script标签可以写在body标签后面

  • 引入外部JavaScript文档

在script标签内通过src属性指定外部xxx.js文件的路径即可。但是要注意以下两点：

①引用外部JavaScript文件的script标签里面不能写JavaScript代码

②先引入，再使用。script标签不能写成单标签

2、声明和使用变量

①JavaScript数据类型

  • 基本数据类型
    • 数值型：JavaScript不区分整数、小数
    • 字符串：JavaScript不区分字符、字符串；单引号、双引号意思一样
    • 布尔型：true、false
      • 在JavaScript中，其他类型和布尔类型的自动转换。
      • true：非零的数值，非空字符串，非空对象
      • false：零，空字符串，null，undefined
      • “false”放在if判断中会被当作【真】处理
  • 引用类型
    • 所有new出来的对象
    • 用[]声明的数组
    • 用{}声明的对象

②变量

  • 关键字：var
  • 数据类型：JavaScript变量可以接收任意类型的数据
  • 标识符：严格区分大小写
  • 变量使用规则
    • 如果使用了一个没有声明的变量，那么会在运行时报错Uncaught ReferenceError: b is not defined
    • 如果声明一个变量没有初始化，那么这个变量的值就是undefined

3、函数

①内置函数

内置函数：系统已经声明好了可以直接使用的函数。

1
2
3
4
5
6
7
8
9
10
11
12
//①弹出警告框
alert("警告框内容");
//②弹出确认框
//用户点击“确定”返回true，点击“取消”返回false
var result = confirm("老板，你真的不加个钟吗？");
if(result){
    console.log("老板点了确定，表示要加钟");
}else{
    console.log("老板点了取消，表示不加钟");
}
//③在控制台打印日志
console.log("日志内容");

②声明函数

两种写法：

写法1：

1
2
3
function sum(a,b){
    return a + b;
}

写法2：

1
2
3
var total = function(){
    return a + b;
}

写法2可以这样解读：声明一个函数，相当于创建了一个“函数对象”，将这个对象的引用赋值给变量total，最后加的分号不是给函数声明加的，而是给整体的赋值语句加的分号。

③函数调用

JavaScript中函数本身就是一种对象，函数名就是这个“对象”的“引用”。而调用函数的格式是：函数引用()。

1
2
3
4
5
6
7
8
9
10
11
12
13
function sum(a, b) {
    return a+b;
}

var result = sum(2, 3);
console.log("result="+result);

var total = function() {
    return a+b;
}

var totalResult = total(3,6);
console.log("totalResult="+totalResult);

4、对象

JavaScript中没有“类”的概念，对于系统内置的对象可以直接创建使用。

①使用new关键字创建对象

1
2
3
4
5
6
7
8
9
10
// 创建对象
var obj01 = new Object();

// 给对象设置属性和属性值
obj01.stuName = "tom";
obj01.stuAge = 20;
obj01.stuSubject = "java";

// 在控制台输出对象
console.log(obj01);

②使用{}创建对象

1
2
3
4
5
6
7
8
9
// 创建对象
var obj02 = {
    "soldierName":"john",
    "soldierAge":35,
    "soldierWeapon":"gun"
};

// 在控制台输出对象
console.log(obj02);

③给对象设置函数属性

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
//第一种：
// 创建对象
var obj01 = new Object();

// 给对象设置属性和属性值
obj01.stuName = "tom";
obj01.stuAge = 20;
obj01.stuSubject = "java";

obj01.study = function() {
    console.log(this.stuName + " is studying");
};

// 在控制台输出对象
console.log(obj01);
// 调用函数
obj01.study();

//第二种：
// 创建对象
var obj02 = {
"soldierName":"john",
"soldierAge":35,
"soldierWeapon":"gun",
"soldierShoot":function(){
console.log(this.soldierName + " is using " + this.soldierWeapon);
}
};

// 在控制台输出对象
console.log(obj02);
// 调用函数
obj02.soldierShoot();

④this关键字

this关键字只有两种情况：

  • 在函数外面：this关键字指向window对象（代表当前浏览器窗口）
  • 在函数里面：this关键字指向调用函数的对象
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// 直接打印this
console.log(this);

// 函数中的this
// 1.声明函数
function getName() {
console.log(this.name);
}

// 2.创建对象
var obj01 = {
"name":"tom",
"getName":getName
};
var obj02 = {
"name":"jerry",
"getName":getName
};

// 3.调用函数
obj01.getName();
obj02.getName();

5、数组

①使用new关键字创建数组

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
// 1.创建数组对象
var arr01 = new Array();

// 2.压入数据
arr01.push("apple");
arr01.push("orange");
arr01.push("banana");
arr01.push("grape");

// 3.遍历数组
for (var i = 0; i < arr01.length; i++) {
console.log(arr01[i]);
}

// 4.数组元素反序
arr01.reverse();
for (var i = 0; i < arr01.length; i++) {
console.log(arr01[i]);
}

// 5.数组元素拼接成字符串
var arrStr = arr01.join(",");
console.log(arrStr);

// 6.字符串拆分成数组
var arr02 = arrStr.split(",");
for (var i = 0; i < arr02.length; i++) {
console.log(arr02[i]);
}

// 7.弹出数组中最后一个元素
var ele = arr01.pop();
console.log(ele);

②使用[]创建数组

1
2
3
// 8.使用[]创建数组
var arr03 = ["cat","dog","tiger"];
console.log(arr03);

6、JavaScript关键字

关键词

描述

var

声明一个变量，可以选择将其初始化为一个值

let

声明一个块{}作用域局部变量，可以选择将其初始化为一个值

const

声明一个只读的命名常量

break

终止当前循环，switch或标签语句，并将程序控制权转移到终止语句之后的语句

continue

在当前循环或标记循环的当前迭代中终止语句的执行，并在下一次迭代中继续执行循环

if…else

如果指定条件为真，则执行一条语句。如果条件为假，则可以执行另一条语句

switch

计算表达式，使表达式的值与case子句匹配，并执行与该case相关的语句

throw

引发用户定义的异常

try…catch

标记要尝试的语句块，并指定响应（如果发生异常）

while

创建一个循环，只要指定条件的值为真，该循环便执行指定的语句。在执行语句之前先判断条件

do…while

创建一个执行指定语句的循环，直到测试条件的值为假。执行该语句后评估条件，导致指定的语句至少执行一次

for

创建一个循环，该循环由三个可选表达式组成，用括号括起来并用分号隔开，后跟在循环中执行的语句

for…in

以任意顺序遍历对象的可枚举属性。对于每个不同的属性，可以执行语句

for…of

遍历可迭代对象（包括数组，类似数组的对象，迭代器和生成器），调用自定义迭代挂钩，并针对每个不同属性的值执行要执行的语句

三、JSON

1、JSON格式的用途

在开发中凡是涉及到跨平台数据传输，JSON格式一定是首选。

2、JSON格式的说明

  • JSON数据两端要么是{}，要么是[]
  • {}定义JSON对象
  • []定义JSON数组
  • JSON对象的格式如下：{key:value,key:value,...,key:value}
  • JSON数组的格式如下：[value,value,...,value]
    • key的类型固定是字符串
    • value的类型可以是：①基本数据类型；②引用类型（JSON对象或JSON数组）
    • 正因为JSON格式中value部分还可以继续使用JSON对象或JSON数组，所以JSON格式是可以“多层嵌套”的，所以JSON格式不论多么复杂的数据类型都可以表达。
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
{
"stuId":556,
"stuName":"carl",
"school":{
"schoolId":339,
"schoolName":"atguigu"
},
"subjectList":[
{
"subjectName":"java",
"subjectScore":50
},
{
"subjectName":"PHP",
"subjectScore":35
},
{
"subjectName":"python",
"subjectScore":24
}
],
"teacherMap":{
"aaa":{
"teacherName":"zhangsan",
"teacherAge":20
},
"bbb":{
"teacherName":"zhangsanfeng",
"teacherAge":108
},
"ccc":{
"teacherName":"zhangwuji",
"teacherAge":25
}
}
}

3、JSON对象和JSON字符串互转

①JSON对象转JSON字符串

1
2
3
4
5
var jsonObj = {"stuName":"tom","stuAge":20};
var jsonStr = JSON.stringify(jsonObj);

console.log(typeof jsonObj); // object
console.log(typeof jsonStr); // string

②JSON字符串转JSON对象

1
2
jsonObj = JSON.parse(jsonStr);
console.log(jsonObj); // {stuName: "tom", stuAge: 20}
小说阅读

推荐书籍：《偷影子的人》

写这篇文章的缘由：
其实在写这篇文章之前，我也偶尔会读一些书，如上个月读的路遥的《人生》、东野圭吾的《嫌疑人X的献身》，心里也有所悸动，但从未想过写一篇文章描述书籍。直到昨天给朋友推荐一本书时，她说期待我的书评，可我深知我自己，我是那种看完书籍、电视剧、电影后情绪激动高昂，内心一片汪洋大海奔腾汹涌，但依旧不会流眼泪，甚至会面色平静的对朋友说“我们去吃饭吧”的那种人。我喜欢一年四季，喜欢春夏秋冬，喜欢用心去感受这个世界，但作为一名理科生却让我始终难以表达出我的真实感受。那可怎么办呢，毕竟推荐一本书，终归是需要一些理由的，所以我只能尽可能的描述书中的故事，摘要书中语句。

《偷影子的人》是以第一视角展开，描述了一个小男孩从小到大的生活经历，因为拥有特殊的能力（能偷取别人的影子和影子对话，所以知道别人的心事和听见人们心中不愿意说出口的秘密）而去给身边人带去温情疗愈和生命中的光芒。如帮助朋友伊凡解开了童年的枷锁建立自己真实的人生，帮助吕克去实现儿时想当医生的梦想。书中还描述了母亲对我的温情的爱，让人真真切切的感受到了家的温情。最后就是小男孩的爱情经历，有用风筝画出我想你的初恋克蕾儿，也有美好勇敢成熟的苏菲。整本书读完后，给人的感觉是清新纯真的、真实、温情的。额加分项书中拥有一个好结局（虽然我并非不能容忍悲剧，但美好才更令人向往）。

摘要：

①“你跟伊丽莎白的事，说不定没有全盘皆输哦。一段美丽的邂逅，有时是时间的问题，两个人得在对的时间遇到对方。”

②她凝视着我，漾出一朵微笑，并且在纸上写下：“你偷走了我的影子，不论你在哪里，我都会一直想着你。”

③八月里，仅仅遇到一个克蕾儿，每个早晨就再也不一样，每个当下也不再同于以往，而孤独便能拭去。

④几天前，我还不需要她，我的人生虽然一成不变，但至少可以过日子。现在，一没有克蕾儿的消息，一切都崩溃了。要等着别人的指令才能感受到幸福，这感觉实在讨厌极了。

⑤生命中某些珍贵的片刻，其实都来自于一些微不足道的小事。

⑥我喜欢看着围绕妈妈嘴角与眼周的细纹，我知道她很讨厌它们，但这些细纹却让我觉得心安，我从她脸上读到我们相依为命的痕迹。

⑦我只是你生活里的一个影子，你却在我的生命里占有重要地位。如果我只是个单纯的过客，为何要让我闯入你的生活？我千百次想过要离开你，但仅凭一己之力我做不到。

⑧大城市让人抓狂，它榨干你的灵魂，又像吐口香糖般把它吐出来。

⑨人们常常把一些小事抛在脑后，一些生命的片刻烙印在时光尘埃里，我们可以试着忽略，但这些微不足道的小事却一点一滴形成一条链子，将你牢牢与过去连在一起。

⑩在城市的天空里，她用纸老鹰画出大大的S和无数个完美的8。克蕾儿向来擅长在空中写诗，当我终于看懂她写的句子时，我读出：“我想你。”一个会用风筝向你写出“我想你”的女孩啊，真让人永远都忘不了她。

前端

CSS基础知识

一、CSS介绍

CSS概念：CSS代表级联样式表（Cascading Style Sheets）。CSS是一种标准样式表语言，用于描述网页的表示形式（即布局和格式）。万维网联盟（W3C）于1996年引入了CSS，CSS旨在将表示和内容分开。现在，web设计人员可以将网页的格式设置信息移动到单独的样式表中，从而大大简化HTML标记并提高可维护性。

使用CSS的优点：

  • 可以将样式和布局与文档的内容分开；
  • CSS节省大量时间，CSS提供了很多灵活性来设置元素的样式属性。您可以编写一次CSS，然后相同的代码可以应用于HTML元素组，也可以在多个HTML页面中重复使用。
  • 易于维护,CSS提供了一种简便的方法来更新文档的格式，并在多个文档之间保持一致性。因为可以使用一个或多个样式表轻松控制整个网页的内容。
  • 页面加载速度更快，CSS使多个页面可以共享格式信息，从而降低了文档结构内容的复杂性和重复性。它显着减小了文件传输大小，从而加快了页面的加载速度。
  • 多种设备兼容性，CSS还允许针对多种类型的设备或媒体优化网页。使用CSS，可以针对不同的呈现设备（如台式机、手机等）以不同的查看样式呈现同一HTML文档。

二、在HTML文档中包含CSS

CSS可以作为单独的文档附加，也可以嵌入HTML文档本身。在HTML文档中包括CSS的三种方法：

  • 内联样式-使用styleHTML开始标记中的属性；
  • 嵌入式样式-使用<style>文档头部的元素；
  • 外部样式表-使用<link>元素，指向外部CSS文件。

**注意：**内联样式的优先级最高，而外部样式表的优先级最低。这意味着，如果在嵌入式样式表和外部样式表中都为元素指定样式，则嵌入式样式表中冲突的样式规则将覆盖外部样式表。

①内联样式

1
<p style="color:green; font-size:22px;">This is a paragraph.</p>

②嵌入式样式

嵌入或内部样式表仅影响嵌入它们的文档。

嵌入式样式表在<head>HTML文档的部分中使用<style>元素定义。您可以<style>在HTML文档中定义任意数量的元素，但是它们必须出现在<head>和</head>标记之间。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="en">
<head>
    <title>My HTML Document</title>
    <style>
        body { background-color: YellowGreen; }
        p { color: #fff; }
    </style>
</head>
<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph of text.</p>
</body>
</html>

③外部样式表

外部样式表将所有样式规则保存在一个单独的文档中。您可以通过两种方式附加外部样式表-链接和导入。

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html lang="en">
<head>
    <title>My HTML Document</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph of text.</p></body>
</html>

@import可以在文档的标题内，也可以使用@import规则在另一个样式表中导入样式表

1
2
3
4
5
6
7
<style>
    @import url("css/style.css");
    p {
        color: blue;
        font-size: 16px;
    }
 </style>
1
2
3
4
@import url("css/layout.css");
@import url("css/color.css");body {
    color: blue;
    font-size: 14px;}

注意： 所有@import规则都必须在样式表的开头出现。样式表中定义的任何样式规则本身都会覆盖导入的样式表中的冲突规则。但是，由于性能问题，不建议在另一个样式表中导入样式表。

三、CSS语法

①CSS属性可以组织成CSS规则。CSS规则将一组CSS属性组合在一起，并将所有属性应用于CSS规则匹配的HTML元素上。

②CSS样式表由一组规则组成，这些规则由Web浏览器解释，然后应用于文档中的相应元素，如段落、标题等。

③CSS规则有两个主要部分，一个选择器和一个或多个声明：

  • 选择器指定CSS规则适用于HTML页面中的哪个元素。
  • 块内的声明决定了元素在网页上的格式。每个声明都包含一个属性和一个值，这些值和值之间用冒号（:）分隔并以分号（;）结尾，并且声明组用花括号括起来{}。
  • **注意：**CSS声明始终以分号;结尾，并且声明组始终被大括号{}包围。

④用CSS编写注释，CSS注释以/*开头，以*/结尾。

⑤CSS属性名称和许多属性值都不区分大小写，但是CSS选择器区分大小写。因此为了安全起见，应该假定CSS规则的所有组件都区分大小写。

四、CSS选择器

CSS选择器是一种用于匹配HTML文档中元素的模式。关联的样式规则将应用于与选择器模式匹配的元素。

①通用选择器

通用选择器（用* 星号表示）与页面上的每个单个元素匹配。*选择器内的样式规则将应用于文档中的每个元素。此选择器通常用于从元素中删除默认的边距和填充，以进行快速测试。

1
2
3
4
* {
    margin: 0;
    padding: 0;
  }

②元素类型选择器

元素类型选择器将文档树中元素的每个示例与相应的元素类型名称进行匹配。

1
2
3
p {
    color: blue;
  }

③ID选择器

ID选择器用于为单个或唯一元素定义样式规则。ID选择器的定义是一个井号（#），后跟ID值。

1
2
3
#error {
    color: red;
}

④class类选择器

类选择器可用于选择具有class属性的任何HTML元素。具有该类的所有元素将根据定义的规则进行格式化。用一个句号（.）紧随其后的类值定义类选择器。

1
2
3
.blue {
    color: blue;
      }

⑤后代选择器

当需要选择一个元素是另一个元素的后代时，可以使用这些选择器。例如，如果您只想定位无序列表中包含的那些定位点，而不要定位所有定位点元素。

1
2
3
4
5
6
ul.menu li a {
    text-decoration: none;
    }
h1 em {
    color: green;
    }

⑥子选择器

子选择器只能用于选择作为某些元素的直接子元素的那些元素。子选择器由两个或多个选择器组成，两个选择器之间用大于号（即>）隔开。

1
2
3
4
5
6
ul > li {
    list-style: square;
    }
ul > li ol {
    list-style: none;
    }

⑦相邻兄弟选择器

相邻的同级选择器可用于选择同级元素。该选择器的语法类似于：E1 + E2，其中E2是选择器的目标。

1
2
3
4
h1 + p {
    color: blue;
    font-size: 18px;
    }

只有每个<h1>标题之后的段落才具有关联的样式规则。

⑧通用兄弟选择器

1
2
3
4
div ∼ p {
    color: blue;
    font-size: 18px;
    }

div ~ p {}选择div下面所有兄弟p元素。

⑨分组选择器

样式表中的多个选择器通常共享相同的样式规则声明。可以将它们分组为一个逗号分隔的列表，以最大程度地减少样式表中的代码。

1
2
3
4
h1, h2, h3 {font-weight: normal;}
h1 {font-size: 36px;}
h2 {font-size: 28px;}
h3 {font-size: 22px;}

注意： 还有其他选择器，例如属性选择器、伪类、伪元素等等。

五、CSS盒子模型

  • 当我们使用width和height属性设置元素的宽度和高度时，实际上，我们只设置了内容区域的宽度和高度。而不是元素的实际高度和实际宽度。
  • 总宽度 = 宽度+左填充+右填充+左边框+右边框+左边距+右边距
  • 总高度 = 高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

**参考资料：**文章内容都摘自于网上教程，教程链接：https://www.cainiaojc.com/css/css-tutorial.html

前端

HTML基础知识

一、HTML简介

①名词解释

HTML 是 Hyper Text Markup Language的缩写。意思是 超文本标记语言。

1、超文本

HTML文件本质上是文本文件，而普通的文本文件只能显示字符。但是HTML技术则通过HTML标签把其他网页、图片、音频、视频等各种多媒体资源引入到当前网页中，让网页有了非常丰富的呈现方式，这就是超文本的含义——–本身是文本，但是呈现出来的最终效果超越了文本。

2、标记语言

说HTML是一种标记语言是因为它不是向Java这样的 编程语言，因为它是由一系列 标签组成的，没有常量、变量、流程控制、异常处理、IO等等这些功能。HTML很简单，每个标签都有它固定的含义和确定的页面显示效果。

标签是通过一组尖括号 + 标签名的方式来定义的：

1
<p>HTML is a very popular fore-end tenchnology.</p>

这个例子中使用了一个p标签来定义一个段落，<p> 叫 开始标签，</p>叫结束标签。开始标签和结束标签一起构成了一个完整的标签。开始标签和结束标签之间的部分叫文本标签体，也简称标签体。

有的时候标签里还带有属性：

1
<a href="http://www.xxx.com">show detail</a>

href=”http://www.xxx.com"就是属性，href是属性名，http://www.xxx.com是属性值。

还有一种标签是单标签：

1
<input type="text" name="username" />

②HTML文件结构

  • 文档类型声明

HTML文件中第一行的内容，用来告诉浏览器当前HTML文档的基本信息，其中最重要的就是当前HTML文档遵循的语法标准。这里我们只需要知道HTML有4和5这两个大的版本，HTML4版本的文档类型声明是：

1
2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

HTML5版本的文档类型声明是：

1
<!DOCTYPE html>

现在主流的技术选型都是使用HTML5，之前的版本基本不用了。

历史上HTML的各个版本：

HTML

1991

HTML+

1993

HTML2.0

1995

HTML3.2

1997

HTML4.01

1999

XHTML1.0

2000

HTML5.0

2012

XHTML5

2013

  • 根标签

html标签是整个文档的根标签，所有其他标签都必须放在html标签里面。上面的文档类型不能当做普通标签看待。

  • 头部

head标签用于定义文档的头部，其他头部元素都放在head标签里。头部元素包括title标签、script标签、style标签、link标签、meta标签等等。

  • 主体

body标签定义网页的主体内容，在浏览器窗口内显示的内容都定义到body标签内。

  • 注释

HTML注释的写法是：

注释的内容不会显示到浏览器窗口内，是开发人员用来对代码内容进行解释说明的。

③HTML语法规则

  • 根标签有且只能有一个；
  • 无论是双标签还是单标签都必须正确关闭；
  • 标签可以嵌套但不能交叉嵌套；
  • 注释不能嵌套；
  • 属性必须有值，值必须加引号，单引号或双引号均可；
  • 标签名不区分大小写但建议使用小写。

二、HTML常用标签

①使用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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h2>这是二级标题</h2>
    <p>HTML is a very popular fore-end tenchnology.</p>
    <a href="http://www.baidu.com">跳转百度</a>
    <div>下面开始换行了</div>
    <br/>
    <ul>
        <li>apple</li>
        <li>banana</li>
        <li>grape</li>
    </ul>
    <img src="/img/img01.png">
    <div style="border: 1px solid black;width: 100px;height: 100px;">This is a div block</div>
    <div style="border: 1px solid black;width: 100px;height: 100px;">This is a div block</div>
    <span style="border: 1px solid black;width: 100px;height: 100px;">This is a span block</span>
    <span style="border: 1px solid black;width: 100px;height: 100px;">This is a span block</span>
</body>
</html>

页面效果：

标签说明：

标签名称

功能

备注

h1~h6

1级标题~6级标题

标题标签前后有换行

p

段落

段落标签前后有换行

a

超链接

点击后跳转到 href 属性指定的页面

ul / li

无序列表

type属性有disc（默认）、circle、square

ol

有序列表

start表示从xx开始，type 显示的类型：A、a、I、i、1（默认）

sup、sub

上标、下标

img

图片

src属性用来指定图片文件的路径

div

定义一个前后有换行的块

【块】并不是为了显示文章内容，而是为了方便结合CSS对页面进行布局。块有两种，div是前后有换行的块，span是前后没有换行的块。

span

定义一个前后无换行的块

备注：

  • a标签的target属性（共四个）

_self ：在本窗口打开；**_blank**：在一个新窗口打开；**_parent**：在父窗口打开；**_top**：在顶层窗口打开

  • 路径

相对路径：相对路径都是以 当前位置 为基准进行编写的。

1
<a href="../../aaa/z.html">TO z.html</a>

绝对路径：绝对路径要求必须是以正斜线开头。这个正斜线表示服务器根目录。

1
<a href="/d/e/z.html">TO z.html</a>
  • HTML实体

在HTML文件中，<、>等等这样的符号已经被赋予了特定含义，不会作为符号本身显示到页面上，此时如果我们想使用符号本身就是使用HTML实体来转义。

②使用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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        table,th,td {
            border-collapse: collapse;
            border: 1px solid black;
            padding: 5px;
        }
    </style>
</head>
<body>
<!-- 使用table标签定义表格 -->
<table>
    <!-- 使用tr标签定义表格的行 -->
    <tr>
        <!-- 使用th标签定义表头，表头有字体加粗效果 -->
        <th>姓名</th>
        <th>属性</th>
        <th>级别</th>
        <th>忍村</th>
    </tr>
    <tr>
        <!-- 使用td标签定义单元格 -->
        <td>漩涡鸣人</td>
        <td>风</td>
        <td>下忍</td>
        <td>木叶</td>
    </tr>
    <tr>
        <td>宇智波佐助</td>
        <td rowspan="2">雷&火</td>
        <td colspan="2">下忍</td>
    </tr>
    <tr>
        <td>我爱罗</td>
        <td>影</td>
        <td>砂隐村</td>
    </tr>
</table>
</body>
</html>

页面效果：

标签说明：

标签名称

功能

备注

table

表格

有如下属性：border：表格边框的粗细；width：表格的宽度；cellspacing：单元格间距；cellpadding：单元格填充

tr

行

td

列

rowspan：行合并；colspan：列合并

th

表头列

③使用HTML表单收集数据

1、什么是表单：表单（Form）是用于收集、提交和处理用户输入数据的结构化界面，常见于网页、应用程序和文档中。在项目开发过程中，凡是需要用户填写的信息都需要用到表单。

2、form标签

在html中我们使用form标签来定义一个表单。而对于form标签来说有两个最重要的属性：action和method。

1
2
3
<form action="/page/sample04.html" method="post">

</form>
  • action属性

用户在表单里填写的信息需要发送到服务器端，对于java项目来说就是交给java代码来处理。那么在页面上我们就必须正确填写服务器端的能够接收表单数据的地址。

这个地址要写在form标签的action属性中。但是现在暂时我们还没有服务器端环境，所以先借用一个html页面来当作服务器端地址使用。

  • method属性

在form标签中method属性用来定义提交表单的请求方式。method属性只有两个可选值：get或post，一般使用post即可。

  • 请求方式

浏览器和服务器之间在相互通信时有大量的数据需要传输。但不论是浏览器还是服务器都有很多不同厂商提供的不同产品。

常见的浏览器：chrome、Firefox、safari、Opera、Edge

常见的java服务器：Tomcat、Weblogic、WebSphere、Glassfish、Jetty

这么多不同厂商各自开发的应用程序怎么能保证它们彼此之间传输的【数据】能够被对方正确理解呢，很简单，我们给这些数据设定【格式】，发送端按照格式发送数据，接收端按照格式解析数据，这样就能够实现数据的【跨平台传输】了。

而这里定义的【数据格式】就是应用程序之间的【通信协议】。我们现在使用的【HTTP协议】的底层就是TCP/IP协议。

HTTP1.1中共定义了八种请求方式：GET、POST、PUT、DELETE、HEAD、CONNECT、OPTIONS、TRACE

在html标签中，点击超链接是GET方式的请求，提交一个表单可以通过form标签的method属性指定GET或POST请求，其他请求方式无法通过HTML标签实现。

3、name和value

在用户使用一个软件系统时，需要一次性提交很多数据是非常正常的现象。我们肯定不能要求用户一个数据一个数据的提交，而肯定是所有数据填好后一起提交。那么服务器是怎么从众多数据中识别出来收货人、所在地区、详细地址、手机号码…

很简单，给每个数据都起一个名字，发送数据时用名字携带对应的数据，接收数据时通过名字获取对应的数据。

在各个具体的表单标签中，我们通过name属性来给数据起名字，通过value属性来保存要发送给服务器的值。

名字和值之间的关系既有可能是一个名字对应一个值，也有可能是一个名字对应多个值。所以在服务器端使用Map类型来接收请求参数，具体的类型是：Map<String,String[]>。name属性就是Map的键，value属性就是Map的值。

代码示例：

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="/page/sample04.html" method="post">

    个性签名：<input type="text" name="signal" /> <br/><br/>

    密码：<input type="password" name="secret" /> <br/><br/>

    你最喜欢的季节是：
    <input type="radio" name="season" value="spring" />春天
    <input type="radio" name="season" value="summer" checked="checked" />夏天
    <input type="radio" name="season" value="autumn" />秋天
    <input type="radio" name="season" value="winter" />冬天
    <br/><br/>

    你最喜欢的动物是：
    <input type="radio" name="animal" value="tiger" />路虎
    <input type="radio" name="animal" value="horse" checked="checked"/>宝马
    <input type="radio" name="animal" value="cheetah" />捷豹
    <br/><br/>

    你最喜欢的球队是：
    <input type="checkbox" name="team" value="Brazil">巴西
    <input type="checkbox" name="team" value="GerMan" checked="checked">德国
    <input type="checkbox" name="team" value="France">法国
    <input type="checkbox" name="team" value="China" checked="checked">中国
    <input type="checkbox" name="team" value="Italian">意大利
    <br/><br/>

    你喜欢的运动是：
    <select name="interesting">
        <option value="swimming">游泳</option>
        <option value="running">跑步</option>
        <option value="shooting" selected="selected">射击</option>
        <option value="skating">溜冰</option>
    </select>
    <br/><br/>

    <button type="button">普通按钮</button>
    <button type="reset">重置按钮</button>
    <button type="submit">提交按钮</button>
    <br/><br/>

    表单隐藏域：<input type="hidden" name="userId" value="2333">
    <br/><br/>

    自我介绍：<textarea name="desc"></textarea>

</form>

</body>
</html>

页面效果：

标签说明：

  • 单行文本框
1
个性签名：<input type="text" name="signal"/>
  • 密码框
1
密码：<input type="password" name="secret"/>
  • 单选框
1
2
3
4
5
你最喜欢的季节是：
<input type="radio" name="season" value="spring" />春天
<input type="radio" name="season" value="summer" checked="checked" />夏天
<input type="radio" name="season" value="autumn" />秋天
<input type="radio" name="season" value="winter" />冬天

说明：

name属性相同的radio为一组，组内互斥；

当用户选择了一个radio并提交表单，这个radio的name属性和value属性组成一个键值对发送给服务器；

设置checked="checked"属性设置默认被选中的radio

  • 多选框
1
2
3
4
5
6
你最喜欢的球队是：
<input type="checkbox" name="team" value="Brazil"/>巴西
<input type="checkbox" name="team" value="German" checked="checked"/>德国
<input type="checkbox" name="team" value="France"/>法国
<input type="checkbox" name="team" value="China" checked="checked"/>中国
<input type="checkbox" name="team" value="Italian"/>意大利
  • 下拉列表
1
2
3
4
5
6
7
你喜欢的运动是：
<select name="interesting">
    <option value="swimming">游泳</option>
    <option value="running">跑步</option>
    <option value="shooting" selected="selected">射击</option>
    <option value="skating">溜冰</option>
</select>

说明：

下拉列表用到了两种标签，其中select标签用来定义下拉列表，而option标签设置列表项；

name属性在select标签中设置；value属性在option标签中设置；

option标签的标签体是显示出来给用户看的，提交到服务器的是value属性的值；

通过在option标签中设置selected="selected"属性实现默认选中的效果。

  • 按钮
1
2
3
<button type="button">普通按钮</button>
<button type="reset">重置按钮</button>
<button type="submit">提交按钮</button>

说明：

普通按钮点击后无效果，需要通过JavaScript绑定单击响应函数；

重置按钮点击后将表单内的所有表单项都恢复为默认值；

提交按钮点击后提交表单。

  • 表单隐藏域
1
<input type="hidden" name="userId" value="2233"/>

说明：通过表单隐藏域设置的表单项不会显示到页面上，用户看不到。但是提交表单时会一起被提交。用来设置一些需要和表单一起提交但是不希望用户看到的数据，例如：用户ID等。

  • 多行文本框
1
自我介绍：<textarea name="desc"></textarea>

说明：textarea没有value属性，如果要设置默认值需要写在开始和结束标签之间。