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

若相惜♚不离

已于 2022-12-21 21:49:48 修改

阅读量208

点赞数

文章标签： css html5 前端

于 2022-12-21 20:52:50 首次发布

本文链接：https://blog.csdn.net/qq_60258987/article/details/128397018

版权

HTML介绍

HTML: Hyper Text Markup Language 超文本标记语言，用来做网页. 负责网页的框架结构布局.

标签的类型

块级元素：占页面中的一整行。block

行内元素：占一行中的一部分。inline

常用标签

标签名	作用
h1~h6	块级元素。标题。文字加粗，1最大，6最小，通常使用h1~h3
p	块级元素。段落
span	行内元素
pre	块级元素。预处理标签
i	行内元素。倾斜
u	行内元素。下划线
b	行内元素。加粗
sub	行内元素，文字下标
sub	行内元素，文字下标
img	单标签，行内元素
ul	无序列表
ol	有序列表
table	表格
hr	水平线
br	换行
a	a标签
iframe	浮动标签
marquee	marquee标签

表单和表单元素

表单form

双标签，用于接收用户输入的数据

<form action="表单提交的最终目的路径" method="表单提交方式">

</form>

form表单有两个重要的属性

action：设置提交路径

可以是一个页面，也可以是一个后天请求映射

method：设置提交方式

默认值为get，表示使用get方式提交，提交的信息会暴露在浏览器地址栏中

设置为post方式，提交的数据不会暴露在浏览器的地址栏中

表单元素

定义在表单form标签中的标签

常用表单元素	作用
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 层叠样式表

用于控制HTML中标签样式的语言。可以精确到像素，美化修饰HTML标签。

css语法

样式名：样式值；

color:red;

font-size:20px;

选择器

用于选择页面中元素（标签）的工具

id选择器

1.给标签添加id属性，对其命名

2.在style标签中通过#id名获取

通常用于选择某一个元素

<html>
    <head>
        <style>
            #test{
                
            }
        </style>
    </head>
    <body>
        <div id="test">
            
        </div>
    </body>
</html>

class选择器

1.给标签添加class属性，对其命名

2.在style标签中通过.class名获取

通常用于选择一组元素

<html>
    <head>
        <style>
            .test{
                
            }
        </style>
    </head>
    <body>
        <div class="test"></div>
        <div class="test"></div>
        <div class="test"></div>
    </body>
</html>

元素/html/标签选择器

直接通过标签名获取。

通常用于选择一组元素。

层次选择器

通过空格或>获取某个元素的子元素。

"元素A 元素B" 表示获取元素A下的所有元素B

""元素A > 元素B" 表示获取元素A下的第一层元素B

群组选择器

通过,同时选择多个元素

CSS优先级

style属性==>style标签==>引入css文件。

如果某个元素同时拥有id、class以及style属性时。

优先级从高到低

style属性==>id选择器==>类选择器==>元素选择器

常用样式

尺寸

只能对块级元素设置尺寸。

如果要对行内元素设置尺寸，需要将其改为块级元素

样式名	作用	值
width	设置块级元素的宽度	px/百分比/vw
height	设置块级元素的高度	px/百分比/v

设置为像素时，元素不会根据浏览器的窗口大小变化而变化，是固定值。

设置为百分比或vh/vw时，元素会根据浏览器的窗口大小变化二变化，都是百分比。

如果元素需要根据实际窗口变化，宽度建议使用百分比，高度建议使用vh。

背景background

样式名	作用	值
background-color	背景色	颜色的单词、十进制RGB、十六进制RGB
background-image	背景图片	url(图片路径)
background-repeat	背景重复	默认重复 no-repeat不重复 repeat-x表示x轴重复 repea-表示y轴重复
background-size	背景尺寸	默认加载原图。 100%表示完整显示图片。 cover表示覆盖元素。如body的背景如果设置为cover，随着页面高度变大，背景也会变大，100%则会完整显示图片。
background-position	背景位置	可以同时设置x轴和y轴的距离。如10px 20px表示向右移动10px，向下移动20px 也可以通过background-position-x或-y只移动具体轴通过使用right left top bottom center设置指定方向
background	背景属性简写	可以同时设置图片路径、是否重复和图片位置，无关顺序。如 background:url(图片地址) no-repeat right top 表示图片不重复位于容器右上角
background	渐变函数	linear-gradient(to left, #7a28c1, #a17fe0, #59C173)

边框bordet

边框会"套"在元素外层，元素原本大小不变，但所占区域会变为原本大小+边框宽度

样式	作用	值
border-style	边框线型	solid单线，double双线，dotted点线，dashed虚线
border-width	边框宽度	像素
border-color	边框颜色	颜色的三种写法
border	同时设置边框线型、宽度和颜色	1px solid red
border-方向-样式	某个方向的style或width或color。方向可以是left、right、top、bottom	border-bottom-color:red
border-方向	同时设置指定方向边框线型、宽度和颜色	border-right:1px solid red;
border-上下-左右-radius	设置某个方向为圆角
border-radius	同时设置四个角为圆角。如果正方形，值设置为边长的一半变为圆形
outline	轮廓。input文本框获得焦点时，会自动显示一个轮廓，通过将该属性设置为none去除轮廓
border-collapse	合并相邻边框。通常用于表格设置边框时，将其值改为collapse，表示合并相邻td边框。	collapse

字体font

样式名	作用	值
font-size	字体大小	像素。默认16px，最小12px
font-family	字体字型	默认微软雅黑
font-weight	字体粗细	lighter细，bolder粗

文本text

样式	作用	值
color	文本颜色	颜色的三种写法
text-align	文本对齐方式	默认left，right右对齐，center居中
line-height	行高	像素。如果希望文字“垂直居中”，设置行高为所在容器的高度。
letter-spacing	字符间距	像素。
text-indent	首行缩进	像素。如果缩进2个字，默认设置为32px
text-shandow	文本阴影	颜色水平位置垂直位置模糊程度。如gray 4px 4px 3px 表示向右下角移动4px，模糊3px
text-decoration	文本修饰	under-line下划线，over-line上划线，line-through删除线。通常将a标签设置该样式为none表示去掉默认的下划线
word-break	英文换行方式	默认以单词为单位换行，不会拆分单词。break-all表示以字母为单位换行，会拆分单词。

列表list

样式名	作用	值
list-style-type	列表符号	通常用none去掉。
list-style-image	使用图片替换列表符号	url(图片路径)
list-style-position	列表符号位置	默认outside表示符号和文本分离。inside表示符号和文本绑定。

显示方式display

值
block	将元素设置为块级元素，能设置尺寸，独占一行
inline	将元素设置为行内元素，不能设置尺寸，占一行中的一部分，尺寸由内容决定
inline-block	将元素设置为行内块，能设置尺寸，占一行中的一部分
none	不显示，不保留自身位置，后续元素会顶替其位置

浮动float

让某个元素脱离原本的位置，朝某个方向对齐。

值	作用
left	向左浮动
right	向右浮动
none	清除浮动

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

相同点：都能让多个独占一行的块级元素位于同

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

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

盒子模型、

页面中的所有块级元素，都是一个盒子，每个盒子由元素自身、内边距padding、边框border、外边距margin组成。

内边距padding：边框与元素自身之间的距离

外边距margin：元素A的边框与元素B的边框之间的距离

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

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

溢出overflow

当子元素超出父元素的范围时，称为溢出。通过overflow控制溢出部分的表现

默认显示溢出部分，溢出部分不会影响后续元素。

值	作用
hidden	溢出部分隐藏
scroll	使用滚动条
visiable	默认。显示

盒子模型阴影box-shadow

与text-shadow一样，通常设置4个值，颜色左右位置上下位置模糊程度

box-shadow:gray 4px 5px 6px //灰色阴影向右4px 向下5px 模糊6px

定位position

将元素以像素为单位调整位置

值	作用
relative	相对定位
fixed	固定定位
absolute	绝对定位

层叠样式z-index

某个一定位的元素，可以通过z-index控制其层叠顺序。

z-index是一个数字，数字越大，距离视线越近

过渡transtition

设置某个转换效果完成所需的时间等

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

动画animation

1.定义动画的关键帧

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

2.给某个元素设置animation样式

#xxx{
    /*指定动画名*/
    animation-name:动画名;
	/*动画执行时间*/
    animation-duration:3s;
	/*延时*/
    animation-delay:3s;
    /*动画执行次数 infinite无限*/
    animation-iteration-count:4;
    /*动画时间函数 linear匀速  ease-in ease-out ease-in-out*/
    animation-timing-function:linear;
    
    /*简写 只写一个时间表示用时 写两个时间表示第一个是用时，第二个是延时*/
    animation:动画名 5s 2s infinite linear;
}

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

滤镜filter

滤镜函数	作用
grayscale(100%)	灰度
blur(4px)	模糊
brightness(150%)	亮度
contrast(150%)	对比度
hue-rotate(45deg)	色调旋转
invert(100%)	颜色反转
opacity(50%)	不透明度
saturate(2)	饱和度
sepia(80%)	灰褐色(做旧)

可以同时给某个元素设置多个滤镜

filter:滤镜函数1 滤镜函数2 ...;

JavaScript

JavaScript通常简称为js，由网景（NetScape）公司推出。

是一门面向对象、轻量级、弱类型的解释型脚本语言

弱类型：没有数据类型的限制，变量甚至可以不用定义就能使用

解释型：无需编译，通过解释器解释运行，浏览器就是一个js解释器

script脚本：按指令顺序执行。

JS的作用

HTML用于定义页面中的内容

CSS用来控制HTML元素的外观和样式

JS用来操作HTML元素

HTML+CSS+JS组成前端的基本三要素。

可以再页面中控制任意元素
可以再页面中动态嵌入元素
可以操作浏览器
可以与用户进行数据交互

JS中的输出语句

1.弹警告框

alert(字符串或变量)；

2.控制台输出

console.log(字符串或变量)；

3.打印在新页面中

document.write(字符串或变量)；

JS的组成

1.ECMAScript

简称为ES，是JS的标准，也是JS的核心语法。

包含了数据类型、定义变量、流程控制语句等语法内容。

2.BOM

浏览器对象模型

3.DOM

文档对象模型

ECMAScript核心语法

数据类型

原始类型

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

引用类型

如对象、数组、函数等都是引用类型

定义变量

var/let 变量名；

var name;

var sex;

let age;

变量的初始化

var name;

name="Tom";

//可以不用var定义，但不建议

sex="男"；//这样也可以正常输出，但是不建议

JS中的运算和条件语句与Java中的基本一致，这里就不描述了。

JS中的本地对象

数组Array

JS中的数组类似于Java中的ArrayList，

可以保存不同类型的数据，数组大小可变。

定义数组

var 数组名=new Array();

var 数组名=[ ];

日期Data

创建Data对象

var now =new Data();

常用方法

// 获取当前日期时间
var now = new Date();
// 年
document.write(now.getFullYear()+"<br>");
// 0-11表示1-12月
document.write(now.getMonth()+"<br>");
// 日期
document.write(now.getDate()+"<br>");
// 一周中的第几天 0-6表示周天到周六
document.write(now.getDay()+"<br>");
document.write(now.getHours()+"<br>");
document.write(now.getMinutes()+"<br>");
document.write(now.getSeconds()+"<br>");
// 获取从1970/1/1起经过的毫秒数
document.write(now.getTime()+"<br>");
//以上方法都有对应的set方法用于设置指定值
// 获取日期时间字符串
document.write(now.toString()+"<br>");
// 获取日期部分字符串
document.write(now.toDateString()+"<br>");
// 获取时间部分字符串
document.write(now.toTimeString()+"<br>");
// 以当前环境输出日期时间字符串
document.write(now.toLocaleString()+"<br>");
作业
接收3个人的4门成绩，输出每个人的平均分
输出1-100以内的质数
输入年月日的中文形式，如2022/12/12输出二零零二年十二月十二日
字符串
在js中字符串其实是一个字符数组，字符串对象有属性length
常用方法
// 以当前环境输出日期字符串
document.write(now.toLocaleDateString()+"<br>");
// 以当前环境输出时间字符串
document.write(now.toLocaleTimeString()+"<br>");