(本节内容了解)

前端#

学习目标

了解前端三件套(HTML、CSS、JS)在前端所起的作用
掌握HTML标签的功能，掌握重要标签(a标签，form标签)
了解CSS
了解JS的基础语法

前端负责页面的展示。后端负责提供数据。

启动一个自己的服务器#

启动ServerSocket。监听端口8080端口

输入http://localhost:8080/file?name=1

http://localhost:8080/file?name=1

在淘宝页面输入手机，发生了什么事情#

在淘宝上搜索手机，其实就是淘宝帮我们封装了一次请求。

https://s.taobao.com/search?q=手机

本质上和我们自己通过url来访问没有区别。

输入url，发生了什么#

前端发送了一个请求，给谁？

给淘宝的服务器。

https://s.taobao.com/search?q=手机

大家一定要知道这个流程。

可能面试的时候，会被问到这个问题。

url有几部分构成#

https://s.taobao.com/search?q=手机

https://search.jd.com/Search?keyword=iphone14

https://search.jd.com/Search/test1/user?keyword=iphone14

1.协议部分： http/https

2.域名或者 ip+端口。用来做什么事情的？用来找哪台服务器为我们提供服务。端口是用来确定程序的。

默认端口； http 默认端口80； https 默认端口443

3.服务器内部路径。一直到?前面（确定程序需要做的事情）

4.参数： ?后面的部分。比如想搜索手机，搜索其他的，需要传递参数。

q=手机 ---》键值对数据

如果是有多个参数，使用&来进行分割。 username=zhangsan&password=admin

https://www.taobao.com/

http://localhost:8080/login?username=root&password=root1

1
http://localhost:8080/file?name=1.txt

概述#

前端：又称web前端，网站的前台部分，运行在浏览器，给客户浏览的网页。
后端：管理和处理数据的。前端页面上展示的数据，都是后端给的。

前端：前端怎么布的局，能放几个商品，商品怎么展示。价格的颜色。图片的大小…

后端：这个手机的图片，手机的价格。手机的型号参数…

学习相关#

正规前端培训班：3个月的课程。

1
// 学习前端的目的:
2
// 1, 知道前端是怎么回事
3
// 2, 前端和后端的关系
4
// 3, (学的比较好) 如果给你一份前端代码, 你能改一改
5

6

7
// 学习的方法
8
// 1, 上课能听懂

前端需要学习的东西

1
// HTML,CSS,JavaScript: 写网页的技术
2

3
// HTML：用于搭建基础网页，展示页面的内容
4
// CSS：用于美化页面，布局页面
5
// JavaScript：控制页面的元素，让页面有一些动态的效果

HTML#

HTML基本概念#

1
HTML概念
2
    HTML(hyper text markup language)超文本标记语言
3
    是一个以.html为后缀的文本
4
    是一个文本,也是一个网页;该文本可以用浏览器打开,被浏览器解析
5
    '超文本':包含文本字体,图片,链接,甚至音乐,程序等元素的文本
6
    HTML 是一个使用'标签'来描述网页的文本 (标签在HTML文本中有实际意义)
7

8
//  超文本标记语言:
9
// 1, HTML是一个语言.  最开始是为了描述论文产生的.(用来描述论文格式)
10
// 2, 文本语言  : (.html为后缀的文本) (这个文本里面写的内容可以被浏览器解析)(这个文本可以用一些代码描述图片/视频/音频/文字.....)
11
// 3, 被标记(标签)描述的文本语言. (整一个HTML文件都是由标签描述的)
12

13
<元素>: 标签

快速入门#

HTML文件标准结构

1
<!DOCTYPE html>   // HTML5的声明
2
<html lang="en">
3
 <head>
4
         <meta charset="UTF-8"> // meta描述网页的一些"元信息"
5
         <title>Title</title>  // title : 网页的标题
6
 </head>
7
 <body>
8

9
 </body>
10
</html>
11
---------------------------
12
1, 整个HTML文件都是由标签描述的
13
2, 最外层的标签是一个叫<HTML>标签
14
3, 标签是成对的, 有开始, 有结束
15
4, 整个HTML有分为两部分. <head>部分;  <body>部分
16

17
注意: 对于我们学习来讲<head>部分的内容不是太重要, 我们关注更多的是<body>部分的内容.
18
因为一个网页的主体显示部分都是body控制的

1
1. html文档后缀名 .html
2
2. 标签分为。使用尖括号包括的起来的东西
3
  a. 围堵标签：有开始标签和结束标签。如 <html> 开始标签 </html> 结束标签
4
  b. 自闭合标签：开始标签和结束标签在一起。如 <br> <hr>
5

6
3. 标签可以嵌套：
7
  需要正确嵌套，不能你中有我，我中有你
8
  错误：<a><b></a></b>
9
  正确：<a><b></b></a>
10

11
4. 在开始标签中可以定义属性。属性是由键值对构成，值需要用引号(单双都可)引起来
12
5. html的标签不区分大小写，但是建议使用小写。

1
<!DOCTYPE HTML>
2
<html>
3

4
  <head>
5
    <title>我是title</title>
6
  </head>
7
  <body>
8

9
    <div>亮剑--演员表</div>
10

11
    <hr  width="800px" align="left" noshade="noshade"/>
12

13
    李云龙-李幼斌 <br />
14
    赵刚-何刚
15

16
  </body>
17

18
</html>

注释

1
<!--我是个注释 -->

重要的body标签#

html是一个整体都是由标签描述的文本, 所以我们研究html就是研究html不同语法标签(body部分比较重要)

1
// hr
2
// br
3
// h1-h6
4
// div: 给页面划分区块 (配合CSS体会)
5
// p
6
// img
7
// table -tr  -td : 一套标签
8
// ol -li : 一套标签
9
// ul -li : 一套标签
10
// a
11
// i: 倾斜
12
// b: 加粗
13
// span: 纯文本标签, 没有任何特殊效果
14

15
// input  -> button
16
// textarea
17
// select
18

19
// form

hr标签#

1
<hr>:是一个横线标签,  单标签
2
属性:
3
  size:高度( 厚度,不同于height,不带单位时--默认px)
4
  width:宽度(不带单位时--默认px)
5
  候选值： {value}/ {value}px，代表多少个像素。{value}% 占父元素的百分比
6
  noshade:颜色是否有阴影(纯色)
7
  align:对其方式。
8
  候选值:center left right

br标签#

1
<br>：换行符，单标签
2
在html里，直接回车换行，没有效果。只会变成一个空格
3
多个空格，也是没有效果的。也只会变成一个空格。

一些常见的特殊字符

显示结果	`HTML`代码	描述
空格	` `	空格
>	`>`	大于符号
<	`<`	小于符号
&	`&`

h1-h6标签#

1
<h1><h2><h3><h4><h5><h6>: 标题标签
2

3
属性
4
    align
5
        Left:左对齐内容（默认值）
6
        Center:右对齐内容
7
        Right:居中对齐内容
8

9
注意: 自定义标签
10
    h0, h7, h8: 自定义标签, 自定义标签没有任何特殊效果, 等价于span标签

div标签#

1
<div>: 给页面进行区块划分 会自动换行。

span标签#

1
<span> ：行内进行分块的 纯文本标签, 没有任何特殊效果

div是个大容器。span是个小容器。

p标签#

1
<p>: 段落标签
2

3
注意: 段落一般用来描述大段文字, 很类似div的使用, 只不过段落会自动的在段前/段后加上一部分段落间距

==a标签==#

1
<a>超链接标签
2
<a href="https://www.baidu.com" target="_blank">baidu</a>
3
属性: 不可被css取代
4
    href: 指向一个要打开网页的url
5
    target: 指示新的网页的打开方式
6
        _self: (原页面打开)
7
        _blank: 在新页面打开

1
target
2
_blank:在新窗口打开
3
_self:它使目标文档显示在超链接所在框架或者窗口中
4
同组值:通过单击一个窗口中的不同链接控制另一窗口内容变化 ; 浏览器会找与target值相符的框架或者窗口中的文档，有则在其中显示文档。如果不存在，浏览器打开一个新窗口
5

6
    <a href="https://www.taobao.com" target="_self">taobao_self</a>
7
    <a href="https://www.taobao.com" target="_blank">taobao_blank</a>

1
<!--点击taobao_aaa的时候，会让iframe这个架子里面的内容发生变化-->
2

3
<a href="https://www.taobao.com" target="aaa">taobao_aaa</a>
4
<iframe name="aaa" width="600px" height="600px"></iframe>

img标签#

1
<img> 图片标签 单标签
2

3
<img src="./1.webp" alt="图片加载失败..">
4

5
重要的属性: (css无法取代)
6
  src: 指向一个图片地址 (url)
7
  alt: 当图片加载失败的时候的提示

不能访问的

https://lmg.jj20.com/up/allimg/tp09/210Z614150050M-0-lp.jpg

可以访问的

https://img1.baidu.com/it/u=3573056321,2239143646&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500

路径问题#

1
// Java路径
2
// 相对路径: ./  ../   ../../
3
// 绝对路径: C:\Users\snow\Desktop\Day11_HTML
4

5
// 前端路径
6
// 相对路径:  ./  ../   ../../
7
// 绝对路径:  http://localhost:63342/code/com/cskaoyan/www/html/1.webp
8

9

10
// 路径描述
11
//   1.如果直接写路径，比如 father1/children1/2.jpg。则代表从当前文件目录开始，然后找father1文件夹，再找childre1文件夹，最后找2.jpg
12
//   等价于  ./father1/children1/2.jpg
13
// ./代表当前路径
14
// ../代表当前路径上一级
15
// 可以组合。  ../../代表上一级目录的上一级
16

17
即使我们在前端中写了相对路径, 这个代码被浏览器解析之后, 也要变成url(前端的绝对路径)
18

19
本质: 前端代码是运行在用户的计算机上,后端代码是运行在我们自己的服务器上
20
比如，我再Java中，写了一个new File("相对路径") 。是相对于 working directory找东西
21
在前端。写相对路径，是在html同级开始找。

ol和ul标签#

1
<ol> 有序列表, 成套标签, 和<li>标签构成一套标签
2
<ul> 无序列表, 成套标签, 和<li>标签构成一套标签
3

4
ol属性:
5
  type:规定在列表中使用的标记类型(1,A,a,I,i)。
6
  start:规定有序列表的起始值
7
  reversed:规定列表顺序为降序。(9,8,7...)
8

9
ul属性:
10
  type:
11
    disc:默认值。实心圆。
12
    circle :空心圆。
13
    square :实心方块。

测试
hello
java

测试
hello
java

table标签#

1
<table>表格标签, 成套标签,  tr, td
2
<tr>表格的一行
3
<td>一行中一个单元格
4

5
属性:
6
    table的属性
7
            bgcolor: 背景颜色
8
            border ： 1、2  代表边框的像素
9
            cellpadding:规定单元边沿与其内容之间的空白。
10
            cellspacing:规定单元格之间的空白。
11
    tr的属性:
12
            bgcolor
13
            valign:规定表格行中内容的垂直对齐方式。
14
                    top
15
                    middle
16
                    bottom
17
    td的属性:
18
            colspan:横跨列数
19
            rowspan:横跨行数

input标签: 表单元素#

1
<input>输入框 单标签
2
type属性:
3
  text:默认文本
4
    password:密码
5
    button:按钮
6
    hidden:隐藏输入框
7
    radio:单选框
8
    checkbox:复选框
9

10
  reset:定义重置按钮。
11
  submit:提交

注意:

表单元素, 有一个默认的属性value; 这个默认的value属性的内容和用户输入/选择的内容相同

textarea标签: 表单元素#

1
< textarea > : 多行输入框。会显示一个比较大的输入框
2
属性:
3
  Cols:列(宽) 以字符为单位
4
    Rows:行(高) 以字符为单位
5
    Maxlength:最大
6
    Placeholder:提示
7
    readonly :只读

注意:

表单元素, 有一个默认的属性value; 这个默认的value属性的内容和用户输入/选择的内容相同

select标签: 表单元素#

1
< select >: 下拉选择, 和<option>是成套标签
2

3
    <select>
4
    <option>2011</option>
5
    <option>2011</option>
6
    <option>2011</option>
7
    </select>
8
属性
9
    option:selected(selected="selected"选中状态 默认选中)
10
    select :multiple(multiple ="multiple" 允许多选)
11
    select :size(size ="4"下拉可见数4 显示可见选项条目数)

注意:

表单元素, 有一个默认的属性value; 这个默认的value属性的内容和用户输入/选择的内容相同

==form标签==#

HTML 表单（Form）是用于收集用户输入的一种方式。用户可以在表单中输入数据，然后提交到服务器进行处理。HTML 表单包含表单元素，这些元素可以是文本字段、复选框、单选按钮、提交按钮等

表单元素，都要通过form标签，把这些数据组织起来。

1
<form>表单, 用来在浏览器的网页上, 通过用户输入或者点击, 生成一个url, 让浏览器根据这个url发起请求。
2
  用于采集用户输入的数据的，用于和服务器进行交互。比如登录页面，注册页面。
3
// url分为四部分: 协议,  域名or ip+端口,   服务器内部路径,   参数
4
// eg:   https://s.taobao.com/search?q=1
5

6
form表单产生URL的动作, 可以分为两块内容看待: 参数部分, 非参数部分
7
非参数部分: 由form表单的一个action属性构成
8
参数部分: 由form表单的表单元素构成
9
意味着在form表单中要有input, textarea, select, 他们三个构建参数部分. 而且参数本身是个key-value数据.
10
让表单元素的name属性来充当: key
11
让表单元素的value属性来充当: value
12
属性：
13
  action: 指定提交数据的URL
14
  method：指定提交方式
15
  分类：一共七种，常用的两种，get post
16

17
 https://www.baidu.com/s?wd=java

eg:

1
// https://s.taobao.com/search?q=1
2
<form action="https://s.taobao.com/search" method="get">
3
  <input name="q">
4

5
  <input type="submit">
6
</form>

http请求方式get和post的区别: 背会#

1
get和post的区别:
2
// 1, get请求'一般'把请求参数放到url之后, POST请求'一般'把参数放到请求正文里
3
//      url之后拼接参数最多1kb
4
// 2, get请求不安全,  post请求相对安全一些。
5
// 如果，我直接用get请求来发送用户名和密码。密码会出现在url上面，我们能看到这个密码，不安全。
6
// 3, 语义化区别,  get请求一般用来获取数据,  post请求一般用来提交数据

`CSS`#

`CSS`概念#

CSS, 层叠样式表(英文全称：Cascading Style Sheets)
主要作用：设置HTML页面中的文本内容格式（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等等外观显示样式。
CSS以HTML为基础，提供了丰富的样式功能。
需要和HTML结合使用，无法单独使用。

怎么在HTML中引入`CSS`#

方式一:内联样式#

写在一个html标签的属性位置，写在开始标签上; style
多个css样式以分号分割
<div></div>

示例：

1
<div style="color: #ec4577; font-size: 100px;
2
              width: 200px; height: 200px; background: silver; border-radius: 30px">
3
    div
4
  </div>

方式二: 内部样式#

写在head标签内部的style标签内

示例：

1
<head>
2
    <meta charset="UTF-8">
3
    <title>Title</title>
4
    <style>
5
       div{
6
         width: 100px;
7
         height: 100px;
8
         background: silver;
9
         text-align: center;
10

11
         line-height: 100px;
12

13
         margin: 0 auto;
14
       }
15
    </style>
16
</head>
17
<body>
18
<!--方式二: 写在head标签内部的style标签内-->
19
  <div>
20
    div
21
  </div>

方式三:外部样式#

把css样式写在一个单独的css文件中, 引入到html文件中。
引入方式：
1
方式一
2
<link rel="stylesheet" type="text/css" href="./01_css.css" />
3

4
方式二
5
<style type="text/css">
6
    @import url(./01_css.css);
7
  </style>

示例：

1
<!--    <link rel="stylesheet" type="text/css" href="./01_css.css" />-->
2
  <style type="text/css">
3
    @import url(./01_css.css);
4
  </style>
5
</head>
6
<body>
7

8
<!--方式三: 把css样式写在一个单独的css文件中-->
9
  <div>
10
    div
11
  </div>

`CSS`的选择器#

所谓CSS选择器, 就是通过某些途径, 把CSS样式和对应的html标签关联起来
解释：我们写的css，希望作用于某一个区域，这就是选择器，通过选择器来选择区域

有哪些引入方式需要选择器？

内联样式(直接写在标签上)

内部样式（写在html内，写在style）

外部样式（写在外部，使用import导入）

内联样式，不需要使用选择器。
内部样式、外部样式，都需要使用选择器

标签选择器#

标签选择器, 就是通过HTML的标签名, 把css样式和对应的html标签关联起来
关联：就是写的css样式，作用于这个html块。
使用方式： 标签名{css样式}
举例：div{}, p{}

示例:

1
<style>
2
  /* 作用于所有的 div标签*/
3
  div {
4
    width: 100px;
5
    height: 100px;
6
    background: silver;
7
  }
8

9
  /* 作用于所有的p标签 */
10
  p {
11
    width: 100px;
12
    height: 100px;
13
    background: #fcd826;
14
  }
15
</style>
16

17
<body>
18

19
  <div >div1</div>
20
  <hr>
21
  <div>div2</div>
22
  <hr>
23
  <p>段落1</p>
24

25
</body>

类选择器#

类选择器, 就是通过HTML的标签的类名(class属性指示的类名), 把css样式和对应的html标签关联起来

标签上有一个属性，属性名class,属性值即类名。

<div class="div1">

使用方式：.类名{css样式}
举例：.div1{}, .p1{}

示例:

1
<style>
2
/* 选中类名div1的块。 */
3
.div1{
4
  width: 100px;
5
  height: 100px;
6
  background: silver;
7
}
8
/* 选中类名div2的块。 */
9
.div2{
10
  width: 100px;
11
  height: 100px;
12
  background: #dc1717;
13
}
14
</style>
15
</head>
16
<body>
17

18
  <div class="div1">
19
    div1
20
  </div>
21
  <hr>
22
  <div class="div2">
23
    div2
24
  </div>

id选择器#

id选择器, 就是通过HTML的标签的id名(id属性指示的id名), 把css样式和对应的html标签关联起来

标签上有一个属性，属性名id,属性值即id名。

<div id="div1">

使用方式：#id{css样式}
举例：#div1{}, #div2{}
注意：在一个html页面上, 每个标签的id都应该是唯一的

示例:

1
 <style>
2
      #div1{
3
        width: 100px;
4
        height: 100px;
5
        background: silver;
6
      }
7
      #div2{
8
          width: 100px;
9
          height: 100px;
10
          background: #dc1717;
11
      }
12
    </style>
13
</head>
14
<body>
15

16
  <div id="div1">div1</div>
17
  <hr>
18
  <div id="div2">div2</div>

其它选择器#

1.复合选择器

1
// 复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的。
2
// 标签选择器 类选择器  id选择器
3

4
// 常用的复合选择器包括：后代选择器、子选择器、并集选择器等等。
5

6
//1.后代选择器
7
//  元素1 元素2 {样式声明}  元素1的类型可以是标签选择器，类选择器， id选择器。
8
//  选中的是 元素1中的所有元素2.
9
//  元素1是父级，元素2是子级，最终选择的是元素2。
10
//  元素2可以是儿子，也可以是孙子等，只要是元素1的后代即可。
11

12
//  eg1.  div p {}，选中的就是div中的所有p
13
//  eg2.  div .ppp {} 选中的就是div中的，所有类ppp
14
//  eg3.  .div1 .p2 {} 选中的就是类div1中的，所有类p2
15

16

17
//2.子选择器
18
// 元素1> 元素2{}
19
// 选择元素1里面的所有直接后代（子元素）元素2
20
// eg1. div> p{}： 只会选择div下的直接p。如果是这种就不会选择上。
21
// <div>
22
//     <span><p>content</p></span>
23
// </div>
24

25
//3.并集选择器
26
// 元素1, 元素2
27
// 选择元素1 元素2

2.伪类选择器

伪类选择器是用于定义元素的特定状态。它们不指向实际的类，而是用于访问元素的某种状态，比如当用户与元素互动时（例如，鼠标悬停或点击链接）

1
伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。
2

3
1.选择标签的hover状态 用于在鼠标悬停在元素上时，应用一组样式
4
    a:hover{} 当a标签hover时候，样式
5

6
2.选择第一个元素,选择第n个元素
7
    p:first-child{}
8
    这个选择器匹配所有 <p> 元素，这些元素是其父元素的第一个子元素
9

10
    p:nth-child(2){}
11
    这个选择器用于匹配所有 <p> 元素，这些元素是其父元素的第二个子元素

3.伪元素选择器

伪元素选择器是，用来添加特殊的效果到某些选择元素的指定部分。与伪类选择器不同，伪元素选择器关注的是元素的特定部分，而不是元素的状态。

1
// CSS 伪元素是用来添加一些选择器的特殊效果。
2
想往h1标签前面插入元素
3
  h1:before{
4
    content: url("1.jpg")
5
  }

4.属性选择器

属性选择器，它用于根据元素的属性及属性值来选择元素。属性选择器可以非常精确地定位到具有特定属性或属性值的HTML元素

1
// 选择标签中带有某个属性的
2
[target] {}
3

4
/* 选择所有具有 "target" 属性的 <a> 元素 */
5
a[target] {
6
    color: red;
7
}
8

9
/* 选择所有 target 属性设置为 "_blank" 的 <a> 元素 */
10
a[target="_blank"] {
11
    background-color: yellow;
12
}

css选择器的优先级问题#

1
// 行内 > ID选择器 > 类 > 标签
2
// 标签上的style写  >  #id > .class >
3

4
在先满足上述优先级的前提下, 发现是属于同一个优先级,  css样式优先级要进一步参照"就近原则"(这个就近原则是上下结构的谁在下面)(原因是因为, 浏览器获得一份html代码之后是从上到下解析的)
5

6
!important 可以把某个优先级较低的优先级, 提升到最高

盒子模型#

1
所谓盒子模型: 就是一份html代码被浏览器解析之后显示,  在这个过程中, 每一个html标签, 在页面上实际占据的空间, 都可以看成一个矩形的盒子,  就是所谓的盒子模型
2
// 注意: 每一个盒子模型它的大小都是由四部分构成:  内容,  内边距,  边框,  外边距

从内到外：

内容
内边距（padding）
边框（border）
外边距（margin）

1
// 注意1: 我们在一个html标签上设置的宽高属性, 描述的仅仅只是内容的大小
2
//
3
// 注意2:  一个盒子模型的背景色 =   元素内容 +  内边距

边框写法#

1
// boder。 边框属性
2

3
// 可以写2个 / 3个属性
4

5
border: 1px solid
6
border: 1px solid red
7

8
// 2个参数的： 边框厚度，线的类型
9
// 3个参数的： 边框厚度，线的类型，线的颜色。
10
// 如果不填写颜色，则默认为黑色
11

12
// 或者
13
border-top: 10px  solid  red;
14
border-bottom: 1px  solid  red;
15
border-left: 10px  solid  red;
16
border-right: 2px  solid  red;

内外边距写法#

1
// 一起(上下左右均设置)的写法。
2
// 需要写单位
3
// 一个数字：上下左右的padding 为10
4
padding: 10px;
5

6
// 两个数字: 上下为10，左右为20
7
padding: 10px 20px;
8

9
// 三个数字： 上为10，下为30， 左右为20
10
padding: 10px 20px 30px
11

12
// 四个数字： 顺时针，从上开始  上右下左
13
padding: 10px 20px 30px 40px
14

15
// 上下左右
16
margin: 100px;
17
// 上下   左右
18
margin:  10px  20px;
19
// 上   左右   下
20
margin: 10px  20px  30px;
21
// 上     右  下     左
22
margin: 10px 20px  30px  40px;
23
// 或者
24
margin-top: 50px;
25
margin-right: 40px;
26
margin-left: 30px;
27
margin-bottom: 100px
28

29
// 特殊的 如下这个居中, 表示的是, 一个盒子在另外一个盒子中(父子关系)中居中并且,这个设置居中的盒子(子标签) 必须要具有宽度属性 浏览器会自动计算外边距
30
margin: 0 auto; /* 上下边距为0，左右边距自动调整 */

外边距合并#

是盒子模型中，一个别叫特殊的现象，讲这个是为了防止大家写代码时候，会产生的一些困惑。

1
// 所谓外边距合并:  就是两个盒子模型, 他们的外边距在垂直方向上 "紧相邻", 就会产生一种重叠/合并现象, 就是外边距合并

1
// 垂直方向上 紧相邻
2
// 情况1： 兄弟紧相邻
3
// 情况2：父子紧相邻

1.兄弟紧相邻

1
<style>
2
        .div1 {
3
            width: 300px;
4
            height: 200px;
5
            background-color: #e38c21;
6
            margin-bottom: 50px;
7
        }
8

9
        .div2 {
10
            width: 300px;
11
            height: 200px;
12
            background-color: #2175e3;
13
            margin-top: 50px;
14
        }
15

16
</style>
17

18
<div class="div1">
19
    div1
20
</div>
21

22
<div class="div2">
23
    div2
24
</div>

2.父子紧相邻

1
<style>
2
  .div-father {
3
  width: 300px;
4
  height: 500px;
5
  background-color: #e38c21;
6
  margin-top: 50px;
7

8
  /*这两种方式都可以让外边缘合并取消*/
9
  /*padding-top: 1px;*/
10
  /*border: 1px solid;*/
11
}
12

13
.div-son {
14
  width: 300px;
15
  height: 200px;
16
  background-color: #2175e3;
17
  margin-top: 50px;
18
}
19
</style>
20

21
<div class="div-father">
22
    <div class="div-son">
23

24
    </div>
25
</div>

标签的分类#

块级元素#

一个块级元素, 就要占据一行

块级元素, 可以设置高度/宽度/内边距/外边距

块级元素, 宽度可以继承, 高度不可以继承

比如外部有一个div。内部是一个块级元素，即使不指定内部的的宽度，它也会继承父级元素的宽度

通常使用块级元素来进行大布局（大结构）的搭建

块级元素是指本身属性为display;的元素。

常见的块级元素： div、p、h1、 h2、 h3、 h4、 h5、 h6，ol、ul、li、form、table

块级元素宽度继承示例：

1
<!--css -->
2
.div-father {
3
  width: 400px;
4
  height: 300px;
5
  background-color: #e38c21;
6
}
7

8
.div-son {
9
  background-color: #7e67e3;
10
}
11

12
<div class="div-father">
13
    <div class="div-son">
14
        div-son
15
    </div>
16
</div>

行级元素#

行级元素不独占一行, 和其它行级元素共处一行

行级元素设置宽高没用, 内外边距设置也只有左右方向有效果

行级元素, 宽度不可以继承, 高度不可以继承

行级元素只能容纳文本或者其他行级元素（不要在行级元素中嵌套块级元素）

通常使用行级元素来进行文字、小图标（小结构）的搭建

行级元素是指本身属性为display:inline;的元素

1
常见的行级元素：
2
span 常用行级容器，定义文本内区块;
3
a 锚点;
4
b 加粗;     strong 加粗强调;    i 斜体;    strike 中划线;
5
br 强制换行;   u 下划线;
6
textarea 多行文本输入框;
7
input 输入框;
8
select 下拉列表;
9
img 引入图片

行内块#

本质属于行级元素: 可以与其他行级元素共处一行

可以设置宽高、内外边距

属性为display;的元素

1
常见的行内块元素：
2
input 输入框
3
img 引入图片
4
button
5
select

隐式转换：

可以在行内样式或css样式中改变元素的display将三种元素进行转换

1
display: block；(将元素变为块级元素)
2
display: inline； (将元素变为行级元素)
3
display: inline-block；（将元素变为行级块元素）

浮动#

1
// 标准流:文档流/标准文档流
2
所谓标准流, 就是一份html代码在被浏览器解析显示的时候, 按照html的标签特性(行级or块级or行内块), 从上到下从左到右有序排列在页面上, 就是标准流
3

4
// 浮动在css中设计的初衷: 做文字环绕
5
// 现在都是用浮动做布局
6

7
什么是浮动: 形象的讲, 我们可以使一个html的盒子模型, 脱离标准文档流, "漂浮"起来
8
float属性值:
9
left: 使元素向左浮动。其他元素（如文本或图片）将围绕在浮动元素的右侧。
10
right: 使元素向右浮动。其他元素将围绕在浮动元素的左侧

浮动

1
1：浮动只影响后面的元素
2
2：连续浮动一行显示
3
3：浮动以元素顶部为基准对齐
4
4：浮动可实现模式转换:浮动可以把块元素在一行显示

清除浮动

1
clear: 谁受影响谁清除
2
left:在左侧不允许浮动元素。
3
right:在右侧不允许浮动元素。
4
both:在左右侧不允许浮动元素。

JS#

JS的概念#

JS，全称JavaScript。和Java没关系

JavaScript 是一种轻量级的编程语言

轻量级: js

重量级: Java, C++, C#

JavaScript 是可插入 HTML 页面的编程代码

JavaScript是一种弱类型语言

编程语言的值的变量类型

比如Java就是强类型，所有变量定义都需要明确的类型定义

JS定义变量时，不需要明确类型定义

它的解释器被称为JavaScript引擎，为浏览器的一部分

主要用来向HTML页面添加交互行为

跨平台特性，绝大多数浏览器都支持

学习JS目的：

在HTML页面中，使用JS来完成交互行为

HTML，CSS，JS的关系：

HTML主要负责页面的搭建

比如页面上文字的展示，图片，输入框等元素

CSS主要负责页面的美化

比如文字的大小调整，图片大小，各种样式

JS主要负责页面的交互

比如点击一个按钮后弹框等

怎么在HTML中引入js#

方式一：内部引入#

在html页面中, 用一个script标签包裹,直接写js代码

可以在head标签内部，也可以在body内部，也可以在body后

示例：

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>Title</title>
6
</head>
7
<body>
8

9
    <script>
10
      alert(123)
11
    </script>
12
</body>
13
</html>

方式二：外部引入#

创建js文件，在html页面上引入js文件

在head标签内部，添加script标签

示例：

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>Title</title>
6

7
    <script src="./01_js.js"></script>
8
</head>
9
<body>
10

11
</body>
12
</html>

学习一门新的语言，一般的学习方法：

学会打印。（可以观察数据）
学习变量。看数据怎么处理
逻辑分支语句、循环控制语句。（if else switch while for ）
方法的定义

python。比如我要完成一个功能，循环一个数组，然后用这个数组里面的数据，判断文件是否存在。

定义一个数组。 [0,1,2,3]
遍历这个数组。
```
1
for i in arr:
2
    print(i)
```
从遍历出来的数据，判断文件是否存在。打印

1
import os
2
os.path.exists("test.txt")
3
os.path.isfile("test.txt")

如果你要使用一门你没有用过的语言。不要怕，首先你先想清楚逻辑。具体的实现方式，可以一步一步搜索。

要注意一些没有见过的指令。如果这个指令你不认识，怎么办？搜索。

js的变量#

变量声明#

JavaScript在声明时统一使用无类型（untyped）的”var”关键字

举例：var pi=3.14

var来声明一个变量,这是一个固定的写法，是js的语法

JavaScript并没有避开数据类型，它的数据类型是根据所赋值的类型来确定的

JavaScript 对大小写敏感

命名规范：

只能由英语字母、数字、下划线、美元符号$构成，且不能以数字开头，并且不能是JavaScript保留字

与Java类似，直接写Java中的变量名即可。按照Java的规范来。

studentInfo

变量类型#

String

Number

Boolean

数组

var cars=["Audi","BMW","Volvo"];

对象

var person={firstname:"Bill", lastname:"Gates", id:5566};

js中的方法#

js方法的定义: function 方法名(){// 方法体}

示例：

1
// 无参的方法
2
function f(){
3
  console.log(123)
4
}
5

6
// 有参的方法
7
function f1(para1){
8
    console.log(para1);
9
}
10

11
// 如果只定义方法，不调用，方法不会被执行。
12
f()// 调用上述方法

运算符#

算术运算符#

1
+,-,*,/,%,++,--
2
=, +=, -=, *=, /=, %=
与Java差异点：
对待减法，如果是字符串-数字，会返回NaN。但是如果字符串是 123这类的数字。可以正常的运行
1
var str = "str"
2
var num = 10;
3
console.log(str + num)
4
console.log(str - num) //NaN: not a number
1
var num1 = "10"
2
var num2 = 5
3
console.log(num1 - num2) // 5
4
console.log(num1 * num2) // 50
5
console.log(num1 / num2) // 2

逻辑运算符#

1
 > , <, >=, <=, ? : 三元
2
&& , ||, !
3
==, ===, !=, !==
4

5
var a = "10"
6
var b = 10
7

8
a == b   -->  true
9
a === b  --> false
== : 只判断值是否相等
=== : 不仅仅判断值, 还要判断类型

!= : 只判断值是否不相等
!== : 不仅仅判断值, 还要判断类型

逻辑分支语句#

if

在js中很多东西都可以充当if-else的条件

但是有些东西默认表现为假: 0, 空字符串, null, NaN, false, undefined

1
// switch
2
// while
3

4
break 语句用于跳出循环。
5
continue 用于跳过循环中的一个迭代。

for

一般我们使用普通的fori循环用来遍历数组, 一般我们使用foreach循环遍历对象

1
var obj = {name: "zs", age: 18, address: "hubei"};
2

3
for (var objKey in obj) {
4
  console.log(objKey + "---" + obj[objKey]);
5
}
6

7
var array = [1, 2, "hello", "java", true];
8
for (let i = 0; i < array.length; i++) {
9
  console.log(array[i])
10
}

核心对象/类型#

Number#

toString() 以字符串返回数值

toFixed() 返回字符串值，它包含了指定位数小数的数字(四舍五入)

toPrecision() 返回字符串值，它包含了指定长度的数字

parseInt() 允许空格。只返回首个数字

“1000” 返回的是1000

“100str” 返回的是100

“str1000” 返回的是NaN

” 100str” 返回的是100

1
// toString() 以字符串返回数值
2
var ii = 123
3
console.log(typeof  ii)
4
console.log(typeof ii.toString())
5

6
// toFixed() 返回字符串值，它包含了指定位数小数的数字(四舍五入)：
7
var x = 9.6544;
8
x.toFixed(2);           // 返回 9.65
9

10
// toPrecision() 返回字符串值，它包含了指定长度的数字(四舍五入)：
11
var x = 9.656;
12
x.toPrecision();        // 返回 9.656
13
x.toPrecision(2);       // 返回 9.7
14
// parseInt() 允许空格。只返回首个数字：
15
parseInt("10");         // 返回 10
16
parseFloat()  允许空格。只返回首个数字：
17
parseFloat("10.33"); // 返回 10.33

String#

length 属性返回字符串的长度
indexOf() 返回字符串中指定文本首次出现的索引（位置）
不存在返回-1
1
// 头一个China返回的下标
2
str.indexOf("China");
3

4
// 从28开始，找往后的China的下标
5
str.indexOf("China", 28);
slice() 提取字符串的某个部分并在新字符串中返回被提取的部分

split() 将字符串转换为数组

1
length 属性返回字符串的长度
2
var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
3
var sln = txt.length;
4

5
indexOf()方法返回字符串中指定文本首次出现的索引（位置）：
6
var str = "The full name of China is the People's Republic of China.";
7
var pos = str.indexOf("China");
8
var pos = str.indexOf("China", 28);
9
indexOf() 不存在返回 -1。
10

11
slice() 提取字符串的某个部分,并以新字符串中返回被提取的部分。
12
var str = "Apple, Banana, Mango";
13
var res = str.slice(7,13);//裁剪字符串中位置 7 到位置 13 的片段。包左不包右
14

15
split() 将字符串转换为数组
16
var txt = "a,b,c,d,e";   // 字符串
17
txt.split(",");          // 用逗号分隔
18
txt.split(" ");          // 用空格分隔
19
txt.split("|");          // 用竖线分隔
20
如果分隔符是 ""，被返回的数组将是间隔单个字符的数组：

Array#

toString() 返回数组转换的数组值（逗号分隔）的字符串。

pop() 方法从数组中删除最后一个元素,返回删除的元素

push() 方法（在数组结尾处）向数组添加一个新的元素,返回数组长度

splice()

删除指定位置开始的指定个元素。fruits.splice(2, 2);

方法可用于向数组添加新项, 返回([])。fruits.splice(2, 0, "Lemon", "Kiwi");

sort() 方法以字母顺序对数组进行排序,返回值和原数组是经过排序的数组

reverse() 方法反转数组中的元素。返回值和原数组都变为经过反转数组

1
toString() 返回数组转换的数组值（逗号分隔）的字符串。
2
var fruits = ["Banana", "Orange", "Apple", "Mango"];
3
console.log(fruits.toString()); //Banana,Orange,Apple,Mango
4

5
pop() 方法从数组中删除最后一个元素,返回删除的元素
6
fruits.pop();              // 从 fruits 删除最后一个元素（"Mango"）
7
var x = fruits.pop();      // x 的值是 "Mango"
8

9
push() 方法（在数组结尾处）向数组添加一个新的元素,返回数组长度
10
fruits.push("Kiwi");       //  向 fruits 添加一个新元素
11

12
splice() 方法可用于向数组添加新项, 返回([])
13

14
fruits.splice(2, 0, "Lemon", "Kiwi");
15
// 第一个参数:添加新元素的起始位置。第二个参数:定义应删除多少元素。
16
// 其余参数（“Lemon”，“Kiwi”）定义要添加的新元素。
17

18
sort() 方法以字母顺序对数组进行排序,返回值和原数组是经过排序的数组
19
fruits.sort();            // 对 fruits 中的元素进行排序
20

21
reverse() 方法反转数组中的元素。返回值和原数组都变为经过反转数组
22
fruits. reverse();            // 对 fruits 中的元素进行排序

Math#

1
Math.ceil(x)返回大于等于x的最小整数
2
Math.floor(x)返回小于等于x的最大整数
3
Math.random() 返回 0 ~ 1 之间的随机数
4
Math.round(x) 把一个数四舍五入为最接近的整数
5
Math.max(x,y,z,...,n)  返回最高值
6
Math.min(x,y,z,...,n)  返回最低值

DOM#

DOM的加载顺序#

DOM:文档对象模型（Document Object Model，简称DOM）

DOM的加载顺序: 指的就是浏览器获得了一份html代码之后, 从获得代码到显示的过程

解析HTML结构(从上向下的过程)，一边解析, 一边构建dom树结点/节点

加载外部脚本和样式表文件，异步加载外部的css和js文件

解析并执行脚本代码

构造HTML DOM模型完成。 DOM构建完毕 —> 立即显示页面

加载图片等外部文件

页面加载完毕

浏览器，解析完网页之后，在内存上生成了一棵树（DOM）对今后修改网页有什么好处？

就是浏览器会生成一份内存上的映射。

一份HTML代码，最终在chrome上的内存映射。是一个树状结构的。

我们今后需要修改HTML页面，就只用操作这个内存映射就可以了。

在DOM树中获取结点#

getElementById(): 根据id获取一个结点

getElementsByName(): 根据name属性, 获取所有对应name结点的集合

getElementsByTagName(): 根据标签名, 获取所有对应标签结点的集合

注意：

getElementById() 返回的是一个节点。

getElementsByName(),getElementsByTagName() 返回的是一个集合

添加结点#

appendChild: 给某个结点添加一个孩子(孩子也应该是一个结点。注意类型 )

比如要添加一个li类型的节点，需要使用以下方式: document.createElement("li")

要添加文本类型的节点： document.createTextNode("zs")

1
  <ul id="ul1">
2
    <li>zs</li>
3
    <li>ls</li>
4
    <li>wu</li>
5
    <li>zl</li>
6
  </ul>
7
  <input id="inputstr">
8
  <button onclick="addli()">添加</button>
9

10
  <script>
11

12
    function addli(){
13
      var inputNode = document.getElementById("inputstr")
14
      var inputStr = inputNode.value
15

16

17
      var ulNode = document.getElementById("ul1")
18

19
      // 创建一个文本结点
20
      var textNode = document.createTextNode(inputStr)
21

22
      // 创建一个li类型的结点对象
23
      // document.createElement创建一个指定类型的结点
24
      var liNode = document.createElement("li")
25

26
      liNode.appendChild(textNode)
27

28
      // appendChild 给某个结点添加孩子
29
      // 参数是一个孩子'结点'
30
      ulNode.appendChild(liNode)
31

32
      inputNode.value = ""
33
    }
34
  </script>

删除结点#

removeChild: 给某个结点删除其一个孩子(注意,参数是要删除的孩子 )
注意输入的参数，是一个children类型的

1
 <ul id="ul1"><li>zs</li><li>ls</li><li>wu</li><li>zl</li></ul>
2

3
    下标: <input id="inputstr">
4
    <button onclick="deleteli()">删除</button>
5

6
    <script>
7

8
      function deleteli(){
9
        var index = document.getElementById("inputstr").value
10
        var ulNode = document.getElementById("ul1")
11

12
        // childNodes: 专门用来获得一个结点的所有孩子
13
        var childNodes = ulNode.childNodes;
14

15

16
        // removeChild: 给某个结点删除其一个孩子
17
        //  参数要删除的孩子
18
        ulNode.removeChild(childNodes[index])
19
      }
20
    </script>

修改结点#

replaceChild: 给某个结点替换孩子结点

第一个参数: 新孩子；第二个参数: 旧孩子

1
 <ul id="ul1"><li>zs</li><li>ls</li><li>wu</li><li>zl</li></ul>
2

3
    下标: <input id="inputtag">
4
    替换内容: <input id="inputstr">
5
    <button onclick="changeli()">替换</button>
6

7
    <script>
8

9
      function changeli(){
10
        var inputTag = document.getElementById("inputtag").value
11
        var inputStr = document.getElementById("inputstr").value
12

13
        var ulNode = document.getElementById("ul1")
14

15
        var childNodes = ulNode.childNodes;
16

17
        var changeNode = childNodes[inputTag]
18

19
        // console.log(changeNode)
20

21
        // replaceChild: 给某个结点替换孩子结点
22
        // 第一个参数:  新孩子
23
        // 第二个参数:  旧孩子
24
        changeNode.replaceChild( document.createTextNode(inputStr), changeNode.childNodes[0])
25

26
      }

inner#

innerText: 会按照text全部放入

innerHTML: 会按照html解析。比如一些标签等

1
 divNode.innerText = "<b>hello world</b>"
2
// divNode.innerHTML =  "<b>hello world</b>"

Java 基础语法：前端基础

前端#

启动一个自己的服务器#

在淘宝页面输入手机，发生了什么事情#

输入url，发生了什么#

url有几部分构成#

概述#

学习相关#

HTML#

HTML基本概念#

快速入门#

重要的body标签#

hr标签#

br标签#

h1-h6标签#

div标签#

span标签#

p标签#

==a标签==#

img标签#

路径问题#

ol和ul标签#

table标签#

input标签: 表单元素#

textarea标签: 表单元素#

select标签: 表单元素#

==form标签==#

http请求方式get和post的区别: 背会#

CSS#

CSS概念#

怎么在HTML中引入CSS#

方式一:内联样式#

方式二: 内部样式#

方式三:外部样式#

CSS的选择器#

标签选择器#

类选择器#

id选择器#

其它选择器#

css选择器的优先级问题#

盒子模型#

边框写法#

内外边距写法#

外边距合并#

标签的分类#

块级元素#

行级元素#

行内块#

浮动#

JS#

JS的概念#

怎么在HTML中引入js#

方式一：内部引入#

方式二：外部引入#

js的变量#

变量声明#

变量类型#

js中的方法#

运算符#

算术运算符#

逻辑运算符#

逻辑分支语句#

核心对象/类型#

Number#

String#

Array#

Math#

DOM#

DOM的加载顺序#

在DOM树中获取结点#

添加结点#

删除结点#

修改结点#

inner#

文章分享

文章目录

`CSS`#

`CSS`概念#

怎么在HTML中引入`CSS`#

`CSS`的选择器#