Web 前端

工程地址:

https://gitee.com/IvanLiuGB/t-2205-3.git

数据库笔记地址:

https://docs.qq.com/doc/DTHFFUkxSdGNtVU1T

一、前端基础

1.HTML

• 超文本：不仅包括纯文本，还涵盖字体样式和多媒体元素（如图片、音频、视频）。
• 作用：负责构建网页的基本结构和内容，类似于建筑中的毛坯房。
• 学习重点：了解各种标签及其使用方法。

2. 文本相关标签

1. 内容标题 h1-h6

   • 特点：独占一行，字体加粗，自带上下间距。
   • 示例：

     <h1>这是一个一级标题</h1>
     <h2>这是一个二级标题</h2>
     

2. 段落标签 p

   • 特点：独占一行，自带上下间距。
   • 示例：

     <p>这是一个段落。</p>
     <p>这是另一个段落。</p>
     

3. 水平分割线 hr

   • 示例：

     <p>段落1</p>
     <hr>
     <p>段落2</p>
     

4. 换行 br

   • 示例：

     这是一行。<br>这是新的一行。
     

5. 加粗 b

   • 示例：

     <b>加粗文本</b>
     

6. 斜体 i

   • 示例：

     <i>斜体文本</i>
     

7. 下划线 u

   • 示例：

     <u>下划线文本</u>
     

8. 删除线 s

   • 示例：

     <s>删除线文本</s>
     

3. 列表标签

• 无序列表 ul 和 li

  • 示例：

    <ul>
      <li>列表项1</li>
      <li>列表项2</li>
      <li>列表项3</li>
    </ul>
    

• 有序列表 ol 和 li

  • 示例：

    <ol>
      <li>列表项1</li>
      <li>列表项2</li>
      <li>列表项3</li>
    </ol>
    

• 列表嵌套：有序列表和无序列表可以相互嵌套，形成多层次列表。

  • 示例：

    <ul>
      <li>列表项1</li>
      <li>列表项2
        <ul>
          <li>子列表项1</li>
          <li>子列表项2</li>
        </ul>
      </li>
      <li>列表项3</li>
    </ul>
    

4. 图片标签 img

• src：资源路径。
  • 相对路径：相对于当前页面的位置，如 ../images/logo.png。
  • 绝对路径：完整的URL地址，如 https://example.com/images/logo.png。
• alt：当图片无法显示时，作为替代文本出现。
• title：鼠标悬停时显示的图片标题。
• width/height：设置图片的宽度和高度，支持像素和百分比单位，仅设置宽度时高度会自动保持原比例缩放。
• 示例：

  <img src="../images/logo.png" alt="网站Logo" title="网站Logo" width="200" height="100">
  

5. 超链接 a

• href：设置链接的目标地址，与图片标签的 src 属性类似。
• 文本超链接：<a> 标签内的文本成为超链接。
• 图片超链接：<a> 标签内可以包裹 <img> 标签，形成图片超链接。
• 示例

<a href="https://www.example.com">访问示例网站</a>
<a href="https://www.example.com">
  <img src="logo.png" alt="示例Logo">
</a>

6. 表格标签 table

• 相关标签：
  • <table>：定义表格。
  • <caption>：定义表格标题。
  • <tr>：定义表格行。
  • <td>：定义表格单元格。
  • <th>：定义表头单元格。
• 相关属性：
  • border：设置表格边框。
  • rowspan：定义单元格跨多行。
  • colspan：定义单元格跨多列。
• 示例：

<table border="1">
  <caption>示例表格</caption>
  <tr>
    <th>表头1</th>
    <th>表头2</th>
  </tr>
  <tr>
    <td>数据1</td>
    <td>数据2</td>
  </tr>
  <tr>
    <td>数据3</td>
    <td>数据4</td>
  </tr>
</table>

7. 表单 form

• 作用：收集用户的输入数据并提交给服务器处理。

• 学习重点：了解表单中可用的各种控件。

• 相关代码示例

  ：

  html深色版本

  <form action="http://www.tmooc.cn">
    <!-- placeholder: 占位文本；maxlength: 最大字符长度；value: 初始值；readonly: 只读 -->
    用户名：<input type="text" maxlength="5" value="abc" readonly name="username" placeholder="请输入用户名"><br>
    密码：<input type="password" name="password" placeholder="请输入密码"><br>
    <!-- 单选框的 value 属性必须填写；checked: 默认选中 -->
    性别：<input type="radio" checked name="gender" value="m" id="r1">
          <label for="r1">男</label>
          <input type="radio" name="gender" value="w" id="r2">
          <label for="r2">女</label><br>
    <!-- 多选框属性与单选框通用 -->
    兴趣爱好：<input type="checkbox" name="hobby" value="cy">抽烟
             <input type="checkbox" name="hobby" value="hj">喝酒
             <input type="checkbox" name="hobby" checked value="tt">烫头<br>
    生日：<input type="date" name="birthday"><br>
    靓照：<input type="file" name="pic"><br>
    城市：
    <select name="city">
        <option value="bj">北京</option>
        <option value="sh" selected>上海</option>
        <option value="gz">广州</option>
    </select><br>
    <input type="submit" value="注册">
    <!-- 重置按钮 -->
    <input type="reset">
    <!-- 自定义按钮 -->
    <input type="button" value="自定义">
  </form>
  

8. 分区标签

分区标签是一种容器，用于组织具有关联性的多个标签，便于管理和布局。

• 如何对页面进行分区？
  • 一个页面通常分为头部、主体和脚部三个主要区域，每个大区域又可以细分为更小的部分。

常见分区标签：

• div：块级分区标签，独占一行。
• 示例

：

html深色版本

```
<div>
  <h1>标题</h1>
  <p>段落</p>
</div>
```

• span：行内分区标签，与其他行内元素共享同一行。

  • 示例

：

html深色版本

```
<p>这是一段文本，其中<span style="color: red;">这部分是红色的</span>。</p>
```

HTML5 新增分区标签：

• header：头部区域。

  • 示例

：

html深色版本

```
<header>
  <h1>网站标题</h1>
  <nav>
    <ul>
      <li><a href="#">首页</a></li>
      <li><a href="#">关于</a></li>
      <li><a href="#">联系我们</a></li>
    </ul>
  </nav>
</header>
```

• main：主要内容区域。

  • 示例

：

html深色版本

```
<main>
  <article>
    <h2>文章标题</h2>
    <p>文章内容...</p>
  </article>
</main>
```

• footer：底部区域。

  • 示例

：

html深色版本

```
<footer>
  <p>版权所有 © 2023</p>
</footer>
```

• section：独立的章节或区域。

  • 示例

：

html深色版本

​```
<section>
  <h2>章节标题</h2>
  <p>章节内容...</p>
</section>
​```

• nav：导航链接区域。

• 示例 ：

  html深色版本

  <nav>
    <ul>
      <li><a href="#">首页</a></li>
      <li><a href="#">关于</a></li>
      <li><a href="#">联系我们</a></li>
    </ul>
  </nav>
  

希望这些

二、CSS

Cascading Style Sheet层叠样式表: 美化页面 (装修)

1.如何在html页面中添加CSS样式代码

三种引入方式:

内联样式: 在标签的style属性中添加样式代码, 弊端:不能复用

内部样式: 在head标签里面添加style标签, 标签体内写样式代码, 可以复用但是只能在当前页面复用不能多页面复用

外部样式: 在单独的css样式文件中写样式代码, 在html页面中通过link标签引入, 可以实现多页面复用

工作中外部引入方式用的多,因为可以多页面复用而且可以将html代码和CSS样式代码分离开, 学习过程中内部用的多

2.选择器

1. 标签名选择器: 选取页面中所有同名标签

格式: 标签名{样式代码}

2. id选择器: 当需要选择页面中某一个元素时使用

格式: #id{样式代码}

3. 类选择器: 当需要选择页面中多个不相关的元素时,给多个元素添加相同的class,然后通过类选择器进行选择

格式: .class{样式代码}

4. 分组选择器: 将多个选择器合并成一个选择器

格式: h1,#id,.class{样式代码}

5. 属性选择器: 通过元素的属性选择元素

格式: 标签名[属性名='值']{样式代码}

6. 任意元素选择器: 匹配页面中所有的元素

格式: *{样式代码}

7. 子孙后代选择器: 通过元素和元素之间的关系选择

格式: body div p{样式代码}

匹配body里面的div里面的所有p包括后代p

8. 子元素选择器: 通过元素和元素之间的关系选择

格式: body>div>p{样式代码}

匹配body里面的div里面的p子元素 不包含后代p

9. 伪类选择器: 此选择的是元素的状态,包括：未访问,访问过,悬停,点击

格式​a:link/visited/hover/active{样式代码}

3.颜色赋值

三原色: RGB Red Green Blue 红绿蓝 , 每个颜色的取值范围0-255

颜色赋值方式:

颜色单词赋值: red/yellow/pink.....

6位16进制赋值: #ff0000

3位16进制赋值: #f00

3位10进制赋值: rgb(255,0,0)

4位10进制赋值: rgba(255,0,0,0-1) a=alpha代表透明度

4.背景图片

background-image:url("路径"); 设置背景图片

background-size:100px 200px; 设置背景图片尺寸

background-repeat:no-repeat; 设置禁止重复

background-position: 横向 纵向; 设置背景图片位置

5.文本和字体相关的样式

text-align: left/right/center; 水平对其方式

text-decoration:overline上划线/underline下划线/line-through删除线/none去掉文本修饰; 文本修饰

line-height:20px; 设置行高, 单行可以实现垂直居中, 多行控制行间距

text-shadow: 颜色 x偏移值 y偏移值 浓度; 设置阴影

font-weight: bold加粗/normal去掉加粗

font-size:20px; 设置字体大小

font-style:italic; 设置斜体

font-family:xxx,xxx,xxx; 设置字体

font:20px xxx,xxx,xxx; 设置字体大小+字体

1. 刘德华 宽度100 高度30 绿色背景 红色字体 横向和纵向居中 2. 苹果和香蕉 字体大小25px 斜体 3. 冰箱去掉加粗 蓝色阴影 方向是左下 浓度3 4. 洗衣机添加下划线 5. 百度去掉下划线字体加粗 字体大小20px元素的显示方式display

block: 块级元素的默认值, 特点: 独占一行 可以修改元素宽高. 包括: h1-h6, p,div

inline: 行内元素的默认值,特点: 共占一行 不能修改元素宽高, 包括:span,b,i,s,u,a

inline-block: 行内块元素的默认值,特点:共占一行,可以修改元素宽高, 包括:input,img

行内元素如果需要修改宽高,可以将显示方式改成块级或行内块

6.盒子模型

盒子模型由四部分样式组成, 包括: content内容,margin外边距,border边框,padding内边距

通过盒子模型相关样式控制元素的显示效果

content内容:控制元素的显示尺寸

margin外边距:控制元素的显示位置

border边框: 控制元素的边框效果

padding内边距: 控制元素内容的位置

7.盒子模型之content(内容)

控制元素的显示尺寸

相关样式: width和height

赋值方式:

像素

上级元素的百分比

行内元素不能修改元素的宽高,如果有需求必须改,则需要先把显示方式改成块级或行内块元素

8.盒子模型之margin(外边距)

作用:控制元素的显示位置

赋值方式:

margin-left/right/top/bottom:10px; 给某个方向添加外边距

margin:10px; 四个方向添加10

margin:10px 20px; 上下10 左右20

margin:10px 20px 30px 40px; 上右下左顺时针赋值

行内元素上下外边距无效

上下相邻彼此添加外边距取最大值, 左右相邻两者相加

粘连问题: 当元素的上边缘和上级元素的上边缘重叠时, 给元素添加上外边距会出现粘连问题, 给上级元素添加overflow:hidden解决

9.盒子模型之border(边框)

赋值方式:

border:粗细 样式 颜色;

border-left/right/top/bottom:粗细 样式 颜色;

border-radius:10px; 设置圆角 值越大越圆

盒子模型之padding(内边距)

作用: 控制元素内容的位置

赋值方式: 类似外边距

padding-left/right/top/bottom:10px;

padding:10px;

padding:10px 20px;

padding:10px 20px 30px 40px;

给元素添加内边距会影响元素的宽高

10.CSS的三大特性

继承性:指元素可以继承上级元素文本和字体相关的样式, 部分标签自带效果不受继承影响, 比如超链接字体颜色

层叠性: 多个选择器可以选择到同一个元素, 给元素添加不同的样式则样式全部层叠生效,添加相同的样式时由优先级决定哪个生效

优先级: 指选择器的优先级, 作用范围越小优先级越高,

!important> id>class>标签名>继承

11.定位方式

静态定位

静态定位又称为文档流定位

格式: position:static; 默认的定位方式

特点: 元素以左上为基准, 块级元素从上往下排列, 行内元素从左向右依次排列,通过外边距控制元素的位置. 默认无法实现层叠效果

相对定位

格式: position:relative;

特点: 元素不脱离文档流(不管元素显示到什么位置仍然占着原来的位置), 通过left/right/top/bottom让元素相对于初始位置做偏移

绝对定位

格式:position:absolute;

特点:元素脱离文档流(不占原来的位置), 通过left/right/top/bottom让元素相对于窗口(默认)或某一个上级元素做偏移.

固定定位

格式: position:fixed;

特点: 元素脱离文档流,通过left/right/top/bottom让元素相对于窗口做偏移,元素会固定在窗口的某个位置.

浮动定位

格式:float:left/right;

特点: 元素脱离文档流, 从当前所在行向左或向右浮动, 当撞到上级元素或其它浮动元素时停止移动.

浮动元素一行装不下时会自动折行, 折行时有可能被卡主

当元素的所有子元素全部浮动时,自动识别的高度为0 , 后面元素会顶上来,如果元素中包含文本,文本会被挤出去, 最终导致显示异常, 通过给元素添加overflow:hidden 解决此问题

当需要将纵向排列的元素改成横向排列时使用浮动定位

12.溢出设置overflow

visible显示(默认)

hidden隐藏

scrol滚动显示

13.行内元素垂直对齐方式vertical-align

top上对齐

middle中间对齐

bottom下对齐

baseline基线对齐

三、JavaScript

简称JS, 作用:是给页面添加动态效果

语言特点:

属于脚本语言, 不需要编译直接由浏览器解析执行

基于面向对象

弱类型语言

安全性强:JS语言由于是运行在客户端电脑上的语言,所以JS语言只能访问浏览器内部的数据,浏览器以外的数据是禁止访问的.

交互性强: 因为JS语言是嵌入到html页面中,最终执行在客户端电脑里面的,和用户近距离接触,所以交互性更强.

1.如何在html页面中添加JS代码

三种引入方式:

内联: 在标签的事件属性中添加JS代码, 当事件触发时执行

n 事件: 系统给提供的一些特定的时间点

n 点击事件: 当用户点击元素时触发的时间点

内部: 在html页面中的任何位置添加script标签,在标签里面写JS代码

外部: 在单独的JS文件中写JS代码,然后在html页面中通过script标签的src属性引入

变量, 数据类型, 运算符,各种语句,方法,面向对象

2.变量

JS语言属于弱类型语言

Java强类型: int x=10; String s = "abc"; x="xxx";报错

JS弱类型: let x=10; let s = "abc"; x="xxx";正常 不报错

let和var声明变量的区别

let声明变量的作用域和Java语言类似

var声明变量的作用域是全局的

for(int i=0;i<10;i++){
	int j = i+1;
	}
int x = j+i; //报错 j和i超出作用域
n JS:
let
for(let i=0;i<10;i++){
    let j = i+1;
	}
let x = j+i; //不报错但是访问不到j和i(超出了作用域)
n JS:
var
for(var i=0;i<10;i++){
    var j = i+1;
    }
var x = j+i; //不报错而且可以访问到j和i的值

3.数据类型

JS语言中只有对象类型

常见的对象类型包括:

string字符串: 可以通过单引号或双引号修饰

number数值: 相当于Java中所有数值类型的总和

boolean布尔值: true/false

undefined未定义, 当变量只声明不赋值时,变量的类型为未定义

typeof 变量; 获取变量的类型

4.运算符

算术运算符: + * / %

除法会自动根据结果转换成整数或小数

java: int x=5; int y=2; x/y=2

JS: let x=5; let y=2; x/y=2.5 x=6 x/y=3

关系运算符: > < >= <= != ==和===

==: 先统一两个变量的类型再比较值

===:先比较类型, 类型相同之后再比较值

"666"==666 true "666"===666 false

逻辑运算符: && , || , !

赋值运算符: = += -= *= /= %=

三目运算符: 条件?值1:值2

5.各种语句

if else

while / do while

for

switch case

Java: public 返回值类型 方法名(参数列表){方法体}

JS: function 方法名(参数列表){方法体}

声明方法的方式:

function 方法名(参数列表){方法体}

let 方法名 = function(参数列表){方法体}

let 方法名 = new Function("参数1","参数2","方法体");

6.和页面相关的方法

1. 通过选择器找到页面中的元素对象

let 元素对象 = document.querySelector("选择器");

2. 获取或修改元素的文本内容

元素对象.innerText 获取

元素对象.innerText = "xxx"; 修改

3. 获取或修改控件的值

控件对象.value 获取

控件对象.value="xxx"; 修改

7.NaN

Not a Number 不是一个数

isNaN(变量) 判断变量是否是NaN, true代表是NaN,false代表不是NaN

NaN和任何数值进行任何运算结果都是NaN

8.JavaScript代码出错排错步骤:

通过浏览器F12 调出控制台, 看控制台中的错误提示, 然后点击超链接找到对应的代码

9.JavaScript对象分类

内置对象, 包括: string,boolean,number...

DOM,Document Object Model文档对象模型, 包含和页面相关的内容

BOM,Browser Object Mode浏览器对象模型, 包含和浏览器相关的内容

10.BOM浏览器对象模型

window: 此对象中的属性和方法称为全局属性和全局方法, 访问时可以省略掉window.

window中的常见方法:

alert("xxx") 弹出提示框

confirm("xxx")弹出确认框

prompt("xxx") 弹出文本框

isNaN(变量) 判断变量是否是NaN

parseInt() 将字符串或小数转成整数

parseFloat() 将字符串转成整数或小数

let timer = setInterval(方法,时间间隔) 开启定时器

clearInterval(timer) 停止定时器

setTimeout(方法,时间间隔) 开启只执行一次的定时器