WEB前端_web background-position:10px20px-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_51140686/article/details/129583114

HTML

作用：负责搭建页面结构以及准备页面内容（类似于盖房子，毛坯房）

HyperTextMarkupLanguage：超文本标记语言

超文本：指不仅仅是纯文本，还包括字体效果以及多媒体相关（音频，视频，图片）的内容

学习HTML主要学习的就是有哪些标签，以及标签的使用方法

统一终极版idea开发工具的版本为2021.1.3 ，下载地址如下：

文本相关标签

内容标题h1-h6：显示特点：字体加粗，自带上下间距，独占一行

段落标签p：显示特点：自带上下间距独占一行

水平分割线hr

换行br: HTML中回车键起不到换行的作用，只能识别一个空格，通过br标签实现换行功能

加粗b，斜体i，下划线u，删除线s

无序列表： ul和li

有序列表: ol和li

列表嵌套: 有序和无序可以任意无限嵌套

图片标签img

src: 资源路径

相对路径: 访问站内资源使用

图片在页面的上级目录: ../../图片名

绝对路径: 访问站外资源使用, 称为图片盗链, 有找不到图片的风险

title: 当鼠标在图片上停止时显示的内容

alt: 当图片不能正常显示时显示的文本

width/height: 设置宽高, 两种赋值方式: 1. 像素 2.百分比 ,如果只设置宽度高度会自动等比例缩放

超链接a

href: 设置资源路径,类似图片标签中的src属性

a标签包裹文本为文本超链接, 包裹图片为图片超链接

页面内部跳转: 在目的地元素里面添加id属性然后超链接中的href="#id" 就可以跳转到目的地元素的位置

表格table

相关标签: table表格标签 tr表示行 td 表格数据表示列, th表头,caption表格标题

相关属性: border边框 , colspan跨列 rowspan跨行

表单form

作用: 获取用户输入的内容并提交给服务器

学习form表单主要学习的就是有哪些控件,控件指:文本框,密码框,单选,多选,下拉选等

<form action="http://www.tmooc.cn">
    <!--name属性是所有控件必须添加的,否则不提交该参数
    placeholder占位文本
    maxlength最大字符长度
    value设置控件的值
    readonly只读-->
    用户名:<input type="text" name="username" value="tom"
               placeholder="请输入用户名" maxlength="5" readonly><br>
    密码:<input type="password" name="password"
              placeholder="请输入密码"><br>
    <!--单选框必须设置value属性, 如果不设置则提交on
    checked设置默认选中-->
    性别:<input type="radio" id="r1" name="gender" value="m">
    <label for="r1">男</label>
    <input type="radio" id="r2" name="gender" checked value="w">
    <label for="r2">女</label><br>
    <!--多选框和单选框的属性类似-->
    兴趣爱好:<input type="checkbox" name="hobby" value="cy">抽烟
    <input type="checkbox" name="hobby" checked value="hj">喝酒
    <input type="checkbox" name="hobby" value="tt">烫头<br>
    <!--日期选择器-->
    生日:<input type="date" name="birthday"><br>
    <!--文件选择器-->
    靓照:<input type="file" name="pic"><br>
    <!--下拉选    value设置提交的值 如果不设置则提交标签体的内容
    selected设置默认选中  -->
    所在地:
    <select name="city">
        <option value="bj">北京</option>
        <option value="sh">上海</option>
        <option selected>广州</option>
    </select><br>
    <input type="submit" value="注册">
    <!--重置按钮-->
    <input type="reset">
    <!--自定义按钮-->
    <input type="button" value="按钮">
    <hr>
    <button type="submit">注册</button>
    <button type="reset">重置</button>
    <button type="button">按钮</button>
</form>

分区标签

作用: 将多个有相关性的标签添加到一个分区标签里面, 可以进行统一管理, 分区标签类似于一个容器.

常见分区标签div和span

div: 块级分区标签, 独占一行

span: 行内分区标签, 共占一行

如何对页面进行分区?

一个页面首先划分几个大的区域, 在每个大的区域里面还要嵌套n多小的区域

HTML5版本新增的几个分区标签, 作用和div一样独占一行, 目的是为了提高代码的可读性

header 头标签

footer 脚标签

main 主体标签

nav 导航标签

section 区域标签

CSS层叠样式表

什么是CSS

作用: 负责美化页面 (相当于装修)

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

三种引入方式:

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

<h1 style="color: red">内联样式1</h1>
<h1 style="color: red">内联样式2</h1>

内部: 在head标签里面添加style标签, 标签体内通过选择器找到元素后添加样式代码, 可以当前页面复用,但不能多页面复用

外部: 在单独的css样式文件中写样式代码, 通过link标签在HTML页面中引入, 可以多页面复用. 工作中外部样式使用的更多,因为可以多页面复用而且可以将html和css代码分离开便于维护

引入方式的优先级: 就近原则(后执行的覆盖先执行的)

CSS选择器

作用: 用来找到页面中的标签

标签名选择器: 匹配页面中所有同名标签

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

id选择器: 匹配页面中某一个元素

格式: #id{样式代码}

类选择器: 当需要选择多个不相关的元素时,通过class属性将多个元素划分为同一类

格式: .class{样式代码}

分组选择器: 将多个选择器划分为一组(可以理解为多个选择器合并成一个选择器)

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

属性选择器: 通过元素的属性名和值选择元素

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

任意元素选择器: 匹配页面中所有标签

格式:*{样式代码}

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

格式: body div div p{样式代码} 匹配body里面的div里面的div里面的所有p(包含后代)

子元素选择器: 通过元素和元素之间的关系匹配元素

格式: body>div>div>p{样式代码} 匹配body里面的div里面的div里面的所有子元素p(不包含后代)

伪类选择器: 伪类选择器选择的是元素的状态,包括: 未访问状态/访问过状态/悬停状态/激活状态

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

颜色赋值

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

几种颜色赋值方式:

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

6位16进制赋值: #ff0000 ff=255

3位16进制赋值: #f00 将每一位重复

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

4位10进制赋值: rgba(255,0,0,0-1) a=alpha 设置透明度值越小越透明

背景图片

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

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

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

background-position: 10px 20px; 设置背景图片位置 x偏移值 y偏移值

background-position: 10% 20%; 设置背景图片位置横向百分比纵向百分比

文本和字体相关

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

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

text-decoration:overline上划线/underline下划线/line-through删除线/none去掉下划线

text-shadow:颜色 x偏移值 y偏移值浓度(值越小越清晰) ; 设置阴影

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

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

font-style: italic; 设置斜体

font-family: xxxx; 设置字体

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

元素的显示方式display

block: 块级元素, 元素独占一行并且可以修改元素的宽高, 包括: h1-h6,p,div

inline: 行内元素, 元素共占一行并且不能修改元素宽高, 包括: span,b,i,s,u,a

inline-block: 行内块元素, 元素共占一行可以修改元素宽高, 包括: input,img

none: 隐藏元素

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

盒子模型

盒子模型=外边距margin+边框border+内边距padding+内容content

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

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

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

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

盒子模型之内容Content

包括width和height两个样式,用来设置元素的宽高

两种赋值方式:

像素

上级元素的百分比

盒子模型之外边距margin

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

赋值方式:

/*单独某个方向添加外边距*/
margin-left: 50px;
margin-top: 50px;
margin-bottom: 30px;
margin-right: 100px;
/*四个方向添加外边距*/
margin: 50px;
/*上下和左右赋值*/
margin: 50px 100px;
/*上下0 左右自动(居中)*/
margin: 0 auto;
/*上右下左 顺时针赋值*/
margin: 10px 20px 30px 40px;

行内元素上下外边距无效

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

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

盒子模型边框border

赋值方式:

border:粗细样式颜色; 四个方向添加边框

border-top/left/right/bottom:粗细样式颜色; 单独某一个方向添加边框

border-radius:20px; 设置圆角 , 值越大越圆超过宽高的一半的时候为正圆

盒子模型之内边距

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

赋值方式: 和外边距类似

/*单独某个方向添加内边距*/
padding-left: 50px;
padding-top: 50px;
padding-bottom: 30px;
padding-right: 100px;
/*四个方向添加内边距*/
padding: 50px;
/*上下和左右赋值*/
padding: 50px 100px;
/*上右下左 顺时针赋值*/
padding: 10px 20px 30px 40px;

默认情况下给元素添加内边距会影响元素的宽高, 给元素添加以下样式后则不再影响宽高

box-sizing:border-box;

CSS三大特性

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

层叠性: 一个元素可以层叠很多不同的样式, 多个选择器有可能选择到同一个元素,如果作用的样式不同则全部层叠生效, 如果作用的样式相同则由优先级决定哪个生效

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

!important> id>class>标签名>继承(属于间接选中) ,

元素的定位方式

静态定位

相对定位

绝对定位

固定定位

浮动定位

静态定位

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

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

特点: 元素以左上为基准, 块级元素从上往下排列, 行内元素从左向右排列 ,默认情况下无法实现元素层叠效果

如何控制元素位置: 通过外边距控制

相对定位

格式: position:relative;

特点: 元素不脱离文档流,仍然占着原来的位置,后面的元素不会顶上去, 只移动当前元素其它元素不受影响.

如何控制元素位置: 通过left/right/top/bottom让元素相对于初始位置做偏移

绝对定位

格式:position:absolute;

特点: 元素脱离文档流, 不占原来的位置,后面的元素会顶上来

如何控制元素位置: 通过left/right/top/bottom让元素相对于窗口(默认)或某一个上级元素做位置偏移, 需要相对于某个上级元素的话必须给上级元素设置为相对定位

固定定位

格式:position:fixed;

特点: 元素脱离文档流, 元素内容固定在窗口的某个位置

如何控制元素位置: 通过left/right/top/bottom相对于窗口做位置偏移

浮动定位

格式: float:left/right;

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

应用场景: 当需要将纵向排列的元素改成横向排列时使用

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

溢出设置overflow

visible显示(默认)

hidden隐藏, 可以解决粘连问题,高度识别为0导致的显示异常

scroll滚动显示

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

baseline 基线对齐

top 上对齐

middle 中间对齐

bottom下对齐

显示层级z-index

当元素为非静态定位(static)时元素出现层叠的情况, 通过z-index可以设置元素的显示层级,值越大显示会越靠前, 切记!只能给非静态定位的元素设置z-index

JavaScript

作用: 给页面添加动态效果

语言特点:

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

属于弱类型语言

基于面向对象的语言

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

交互性强: JS语言是运行在客户端的语言和用户直接接触,而像Java语言是运行在服务器的语言需要通过网络进行交互, 所以JS语言的交互性要更强一些

JavaScript语言和Java没什么关系, 为了蹭热度才叫JavaScript 之前叫做LiveScript

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

变量

JavaScript语言属于弱类型语言

Java: String name="张三"; int age=18; name=30;报错

JavaScript: let name="张三"; let age=18; name=30;正常执行

JavaScript语言中通过let或var关键字声明变量

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

var声明的变量, 作用域相当于Java中的全局变量,可以在页面的任何位置访问

举例:

Java:
for(int i=0;i<10;i++){
    int j=i+1;
}
int x = i+j;   //报错  i和j超出了作用域
JavaScript:  let
for(let i=0;i<10;i++){
    let j=i+1;
}
let x = i+j;    //不报错  但是访问不到i和j 因为超出了作用域
JavaScript:  var
for(var i=0;i<10;i++){
    var j=i+1;
}
var x = i+j;  //i和j 正常访问 在作用域范围内

数据类型

JavaScript语言只有对象类型

常见的对象类型:

string字符串: 可以用单引号或双引号修饰 "abc" 等效 'abc'

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

boolean布尔值: true和false

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

获取变量类型的方法: typeof 变量;

运算符

算术运算符:+ - * / %

JavaScript语言中的除法会自动根据结果转成整数或小数

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

JS : let x=5; let y=2; let z=x/y; 2.5

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

==: 先统一等号两边的类型再比较值 "666"==666 true

===: 先比较类型,类型一致后再比较值 "666"===666 false

逻辑运算符: && || ! 只支持短路与和短路或

赋值运算符: = += -= *= /= %= 和Java一样

三目运算符: 条件?值1:值2 和Java一样

各种语句

if else

for 新循环区别: for(Person p : perseons) for(let p of persons)

while

switch case

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

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

事件: 是系统给提供的一系列特定时间点

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

内部: 在html页面中的任意位置添加script标签(推荐写在body结束标签的位置), 在标签体内写JS代码

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

方法

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

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

三种定义方法的格式:

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

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

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

和页面相关的方法

通过选择器查询页面中的元素对象

let 变量 = document.querySelector("选择器");

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

div.innerText = "xxx" ; 修改

div.innerText 获取

获取或修改控件的值 , (控件:指form表单里面的文本框,密码框,单选,多选等)

input.value = "xxx"; 修改

input.value 获取

NaN

Not a Number: 不是一个数

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

JavaScript对象分类

内置对象: string,number,boolean等

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

DOM: 文档对象模型,包含和页面相关内容

BOM

Browser Object Model 浏览器对象模型

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

window中常见的方法:

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

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

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

alert("xxx"); 弹出提示框

confirm("xxx"); 弹出确认框

prompt("xxx"); 弹出文本框

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

clearInterval(timer); 停止定时器

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

window中常见的属性

location位置

location.href 获取或修改浏览器的请求地址

location.reload(); 刷新页面

history历史

history.length 得到历史页面数量

history.back() 返回上一页面

history.forward() 前往下一页面

DOM文档对象模型

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

通过选择器查询页面中的元素对象

let 变量 = document.querySelector("选择器");

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

div.innerText = "xxx" ; 修改

div.innerText 获取

获取或修改控件的值 , (控件:指form表单里面的文本框,密码框,单选,多选等)

input.value = "xxx"; 修改

input.value 获取

创建元素对象

let 元素对象 = document.createElement("标签名");

把元素对象添加到页面

父元素.append(元素对象)

前端MVC设计模式

MVC设计模式就是将实现一个前端业务功能的所有代码划分为三部分

Model: 模型, 指数据模型, 对应的代码是和数据相关的代码

View: 视图, 指页面相关, 对应的是页面中标签相关的代码

Controller: 控制器, 把Model中的数据展示到View中的过程代码

前端MVC设计模式中Controller部分将数据展示到页面中, 这个过程需要频繁的进行DOM相关操作(查找元素/创建元素等) 浪费资源, 前端MVVM设计模式可以解决此问题

前端M,V,VM设计模型

MVVM设计模式就是将实现一个前端业务功能的所有代码划分为三部分

Model: 模型, 指数据模型, 对应的代码是和数据相关的代码

View: 视图, 指页面相关, 对应的是页面中标签相关的代码

ViewModel:视图模型,负责将页面中可能发生改变的元素和某一个变量在内存中进行绑定, 并且会不断的监听变量值的改变, 当需要修改页面时只需要改动绑定好的变量的值, 负责监听的视图模型会在内存中找到和变量对应的页面元素并对其进行改变, 这样的话就不用每次都通过DOM操作遍历查找元素了, 从而提高了执行效率