首页  思维导图  详情

前端基础

2021-09-14 19:34:29   4  举报





AI智能生成

HTML+CSS基础收集，喜欢的可以支持一下

HTML

HTML5

HTML5 CSS3

CSS

flex布局

作者其他创作

大纲/内容

CSS

方式

外部样式表

内部样式表

内联样式表

以上三个的优先级

语法

选择器

基础选择器

标签选择器

类选择器

.开头

class

可以组合使用

id选择器

#开头

通配符选择器

复合选择器

后代选择器

子元素选择器

并集选择器

伪类选择器

:link

:visited

:hover

:active

:focus

:first-child

:lang

伪元素选择器

:first-line

:first-letter

:before

:after

::selection

结构性伪类选择器

:root()

:not()

:empty()

:target(n)

:first-child(n)

:nth-child(n)

:nth-last-child(n)

:nth-of-type(n)

UI状态元素伪类选择器

E:checked{attribute}

E:enabled{attribute}

E:disabled{attribute}

E::selection{attribute}

目标伪类

E:target{attribute}

字体

font

style weight size family

font-family

font-size

font-weight

font-style

文本

color

text-align

left

center

right

line-height

文本垂直居中

text-decoration

none

line-through

underline

text-shadow: h-shadow v-shadow blur color;

text-indent

首行缩进

white-space

nowrap

背景

background

color image repeat postion

background-image

url()函数

background-color

rgb()

颜色值

background-repeat

no-repeat

repeat-x

repeat-y

repeat

background-size

像素值

百分比

background-position

left

top

right

bottom

center

以上的可以两两组成

background-attachment

fixed

练习

图片铺满效果

背景属性的使用

html和body的高度默认是0

html和body有一个自带样式

超链接

伪类

hover

经过

visited

被点击过

link

默认

active

按住

表格

table

border

border

nth-of-type(odd)

nth-of-type(even)

显示

display

block

inline

inline-block

换行符/空格间隙问题

办法一：解决元素之间的空白符

方法二：为父元素中设置font-size: 0，在子元素上重置正确的font-size

HTML本质上就是XML

none

flex

弹性盒子

direction

控制盒子的位置

ltr

rtl

写在父元素上

flex-diretion

控制盒子的子元素方向

row

row-reserve

column

column-reserve

justify-content

水平对齐

center

flex-start

flex-end

space-between

space-around

align-items

垂直对齐

center

flex-start

flex-end

stretch

flex-wrap

自动换行

nowrap

wrap

align-content

行对齐

center

flex-start

flex-end

space-between

space-around

写在子元素上

align-self

写在子元素上，子元素自定义位置

center

flex-start

flex-end

baseline

stretch

flex

visiblity

hidden

轮廓

outline

与border差不多

none

盒子模型

width和height

border

简写

style

width

color

radius

top、bottom、left、right

前端面试题？ 如何使用border画三角形？

margin

简写

一个值

二个值

三个值

四个值

margin-left margin-start

margin-right margin-end

margin-top

margin-bottom

子元素margin-top失效问题

两个盒子上下边距计算问题

padding

CSS3

box-sizing

border-box

content-box

padding和border会影响盒子的宽高

定位

position

absolute

relative

父相子绝

fixed

sticky

static

left

top

bottom

right

z-index

浮动

float

left

right

clear

left

right

both

浮动对文字的效果

解决浮动引起的父元素塌陷

指定父元素高度

overflow

清除浮动

伪元素:after

溢出

overflow

auto

解决margin子元素异常

清除浮动

列表

list-style-type

none

transform

2D转换

rotate(deg)

transform-origin：原点设置

方位值

center

top

right

bottom

left

也可以两两组合

百分比

50% 50%：表示中心点

像素值

translate(x, y)

scale(x, y)

x和y：指的是倍数

如果只写一个值，影响宽和高

也可以设置中心点

以上三个可以混合使用，使用空格分隔，会依次运行，建议位移写在最前面

练习：使用定位和转换实现元素的水平和垂直居中

transform属性的效果不会影响其它元素的位置，而width和height变化时，会影响其它元素的位置

3D转换

坐标系统

x轴：水平方向，正值向右

y轴：垂直方向，正值向下

z轴：正值为近视，负值为远视

相关属性及方法

位移

translate3d(x,y,z)

translateX()

translateY()

translateZ()

旋转

左手准则

rotate3d(x,y,z,deg)

rotateX()

rotateY()

rotateZ()

透视

perspective

模拟人眼与屏幕之间的距离，比如俗话说的一叶障目不见泰山

3D效果必填

该属性是写在3D显示元素的父元素上

数值px

3D呈现

transfrom-style

控制子元素是否开启三维立体环境

flat：2D显示

preserve-3d：3D显示

写在父元素上

练习：旋转硬币效果

过渡

transition: property duration timing-function delay; 默认值：all 0 ease 0。多个值使用逗号分隔，如 all 0 ease 0, all 0 ease 0, all 0 ease 0

transition-property：属性名称列表，多个值使用空格分隔。 all表示影响所有属性，none表示不对任何属性有效

transition-duration：持续时间，单位s或ms

对齐

水平居中

text-align

center

margin

对块级元素有效

auto

width必须指定

padding

垂直居中

line-height

控制文字比较多

padding

margin

position+transform

translate()

translateX()

translateY()

弹性盒子

动画

定义动画

@keyframes 名称 {}

动画序列

from和to

百分比：可以做更细的操作

0%相当于from

其它%

100%相当于to

使用动画

animation-name：必填

animation-duration：必填

使用steps()实现漂亮的数字倒计时

animation-iteration-count：次数；数值或infinite

animation-direction

alternate：动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。

animation-play-state: paused|running;

animation-delay

练习

正方形运动轨迹

菱形轨迹动画，里面的菱形可以不画

圆形轨迹动画

渐变

background-image

background-color：不支持

元素透明度

opacity

权重

媒体查询

@media：@media 规则在 CSS2 中有介绍，针对不同媒体类型可以定制不同的样式规则。

格式: @media not|only mediatype and (expressions) {     CSS 代码...; }

not: 用来排除掉某些特定的设备的，比如 @media not print（非打印设备）。

精灵登录页面

背景铺满

表单水平和垂直居中

输入框的样式及placeholder的颜色

按钮的样式及轮廓去除

Jquery

Vue

HTML

概述

网页

什么是网页？

什么是网站

什么是B/S系统

B：Browser

S：Server

网页是如何组成的？

HTML

CSS

Javascript

HTML概述

HTML全称：Hyper Text Markup Language(超文本标记语言) HTML是一门用户创建网页文档的标记语言，网页本身是一种文本文件，在文本文件中添加标记符。 浏览器来解析HTML标记的内容（文字的处理，画面排版安排，图片如何显示、音频、视频等等） HTML是用来创建网页的标记语言

HTML特点

1、简易性：超文本标记语言的版本升级采用的超集方式。更加方便灵活 2、可扩展性：超文本标记语言采取的子类元素的方式，为系统扩展带来保证 3、平台无关性：所谓的平台指的是操作系统，比如Windows、Linux、Macos、Android、IOS。只要有浏览器就行了 4、通用性：HTML是网络的通用语言，一种简单、通用的标记语言。

HTML的发展

超文本标记语言(第一版)------1993年6月作为互联网工程小组(IETF)工作草案发布(并非标准) HTML2.0 --1995年11月 HTML3.2 --1997年1月14日，W3C标准 HTML4.0 --1997年12月18日 W3C标准 HTML4.01 --1999年12月24日 W3C的推荐标准 HTML5 ---2014年10月29日，W3C推荐标准

W3C标准

HTML

结构

CSS

表现

Javascript

行为

常用浏览器

HTML基本结构

1、HTML页面包含头部head和主体body 2、HTML标签通常是成对出现的，有开始标签，有结束标签，称为对标签。没有结束标签的为空标签 3、HTML标签都长都有属性，格式：属性名 = "属性值" 属性名 = "属性值"。多个属性用空格间隔 4、HTML标签不区分大小写，建议小写 5、HTML文件后缀名为html或htm

标签关系

父子关系或包含关系

兄弟关系或并列关系

开发工具

NotePad

NotePad++

SublimeText

Hbuilder

VSCode

WebStorm

IDEA

Eclipse

字符编码

什么编码？

常用编码

utf-8

gbk

gb2312

乱码

文件保存的编码

html设置的编码

HTML声明

推荐文档

菜鸟教程

https://www.runoob.com/html/html-tutorial.html

W3CSchool

https://www.w3school.com.cn/h.asp

MDN: https://developer.mozilla.org/zh-CN/

如何学好编程

练，所谓键盘敲烂，月薪过万

常用标签

段落标签

h1~h6

标题标签

换行标签

水平线

文本格式化标签

今天天气好  <big>今天天气好</big>  今天天气好  今天天气好  今天天气好  今天天气好  CO2  孙悟空三打张阔①  <ins>今天天气好</ins>  <del>今天天气好</del>

加粗

strong

斜体

字体大小

big

small

标签速查

https://jquery.cuishifeng.cn/html5.html

练习

https://sports.sina.com.cn/basketball/nba/2021-01-17/doc-ikftssan7299775.shtml

HTML的打开方式

file协议