华清远见-重庆中心-前端知识点总结

羔羊叹气

已于 2022-12-21 22:23:15 修改

阅读量231

点赞数

文章标签：前端 javascript html

于 2022-12-21 22:17:40 首次发布

本文链接：https://blog.csdn.net/m0_74999433/article/details/128401171

版权

HTML CSS JavaScript DOM jQuery

关键词由CSDN通过智能技术生成

HTML

Hyper Text Markup Language 超文本标记语言

锚点

通过a标签定义锚点和访问锚点，实现当前页面的快速定位

<!--设置锚点-->
<a name="锚点名"></a>
<!--访问锚点-->
<a href="#要访问的锚点名">点击访问</a>

表单和表单元素

表单form

<form action="路径" method="方式"></form>

action：设置提交路径。可以是一个页面，也可以是后台请求映射。
method：设置提交方式。默认值get，提交的数据会暴露在浏览器地址栏中；post，提交的数据不会暴露在浏览器地址栏中。

表单元素

常用表单元素	作用
input	通过修改属性type变化为不同的组件
select	下拉菜单
textarea	文本域

input标签type属性的值	作用
text	文本框
password	密码框
radio	单选按钮
checkbox	复选框
date	日历组件
number	数字组件
hidden	隐藏域
file	上传文件
image	图片提交按钮
submit	提交按钮
reset	重置按钮

表单元素中的属性	作用
name	提交数据时设置提交的参数名
value	设置组件的默认值
checked	设置单选框和复选框的默认选中
placeholder	设置输入框的提示文字
required	设置输入框为必填项
selected	设置下来菜单默认选中
disabled	设置某个组件为不可用状态
readonly	设置某个组件为只读状态
max/min/step	number独有，设置最大值，最小值，步长
rows/cols	textarea独有，设置文本域行数，列数

CSS

Cascading Style Sheets 层叠样式表

将css写到

1.标签的style属性中

style="样式:值;样式:值;"

2.<style>标签

<head>
    <style>
        选择器{
            样式:值;
            样式:值;
        }
    </style>
</head>

3. 创建.css文件，link引入

<link rel="stylesheet" href="css文件路径">

优先级：style属性>style标签>引入css文件

一些样式

样式名	作用	值
background-color	背景色	颜色的单词、十进制RGB、十六进制RGB
border-color	边框颜色	颜色的单词、十进制RGB、十六进制RGB
color	文本颜色	颜色的单词、十进制RGB、十六进制RGB
border-width	边框宽度	像素
font-weight	字体粗细	lighter细，bolder粗
background-image	背景图	url(图片路径)
background-size	背景尺寸	默认加载原图。 100%表示完整显示图片。 cover表示覆盖元素。如body的背景如果设置为cover，随着页面高度变大，背景也会变大，100%则会完整显示图片。
font-size	字体大小	像素。默认16px，最小12px

float:left和display:inline-block的区别

display:inline-block：多个元素最终会位于同一行内，保留改行位置，元素以下线对齐，保留元素间缝隙，后续元素是新的一行。

float:left：多个元素脱离自身的位置向指定方向贴合，不保留该行位置，元素向上线对齐，不保留元素间的缝隙，后续元素会顶替之前元素的位置。

盒子模型

盒子模型样式	作用
padding	内边距。一个参数表示同时设置4个方向；两个参数表示上下左右；三个参数表示上左右下；四个参数表示上右下左
padding-方向	某方向的内边距。方向为left、right、top、bottom
margin	外边距。如果某个值设置为auto，表示自动将所在容器剩余距离除以2
margin-方向	某方向的外边距
box-shadow	通常设置4个值颜色左右位置上下位置模糊程度

一个元素所占位置是外边距+边框+内边距+元素自身大小

定位position

值	作用
relative	相对定位。让某个元素，相对于原本的位置进行定位。定位原点为元素本身的位置。元素不会脱离文档流(后续元素不会顶替其位置)。
fixed	固定定位。让某个元素脱离文档流，默认根据页面的四个边界进行定位。
absolute	绝对定位。让某个元素脱离文档流，根据已定位的父元素进行定位。如果没有已定位的父元素，会根据页面定位。

转换transform

值	作用
rotate(30deg)	顺时针旋转30度
translate(10px,20px)	向右平移10px，向下平移20px
translateX(10px)/translateY(10px)	向右/向下平移10px
rotateX(30deg)/rotateY(30deg)/rotateZ(30)	沿着X/Y/Z轴3D旋转30度
rotate3d(1,1,0,30deg)	沿着X和Y轴3D旋转30度(0表示该轴不变化)
scale(1.5)	放大1.5倍

过渡transition

样式	作用
transition-duration:3s	所需时间
transition-delay:2s	延时生效
transition-timing-function:linear	时间函数
transition:5s 2s ease	2s后执行，所需5s，慢-快-慢

动画animation

定义动画关键帧

@keyframes 动画名{
    0%{
    /*该阶段的样式*/
    样式名:值;
    }
    25%{}
    50%{}
    75%{}
    100%{}
}

给某个元素设置animation样式

animation样式	作用
animation-name:动画名	执行指定动画
animation-duration:3s	动画执行时间
animation-delay:3s	动画延时时间
animation-iteration-count:3	动画执行次数，infinite表示无限
animation-timing-function:linear	动画执行时间函数，linear表示匀速
animation:动画名 5s 2s	简写。只写一个时间表示用时写两个时间表示第一个是用时，第二个是延时

JavaScript

简称JS，一门面向对象、轻量级、弱类型的解释型脚本语言。

JS的组成

ECMAScript
BOM
DOM

ECMAScript

JS中的原始类型	说明
数值型number	整数、小数都称为数值型
字符串string	用单引号或双引号引起来的都是字符串
布尔型boolean	true/false
未定义undefined	当某个变量没有声明或没有值时
空null	某个引用类型变量通过null设置为空

BOM

Browser Object Model

浏览器对象模型

可以通过JS获取浏览器信息和控制浏览器的行为。

DOM

Document Object Model

文档对象模型

每个页面都是一个文档树document tree
页面中的每个标签都是这个树的节点node
根节点是html
document对象是DOM中的核心对象，表示当前页面对象
DOM用于操作(获取设置内容、更改样式等)页面中的节点

标签==元素==节点==DOM对象

jQuery

jQuery是一个轻量级的javascript函数库，封装了很多javascript中的内容。jQuery的本质依然是 javascript(一个.js文件)。

在页面中导入jQuery.js文件，并加入另一个script标签，在该标签中写jQuery代码

<script src="jQuery.js文件路径"></script>
<script>
    //文档就绪函数，表示在页面所有内容加载成功后开始执行
    jQuery(document).ready(function(){
        //jQuery代码
    });
    //简化版文档就绪函数
    $(function(){
        //jQuery代码
    });
</script>