前端基础 个人笔记

Posted 七岁微凉

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端基础 个人笔记相关的知识,希望对你有一定的参考价值。

1html:

   hypertext    markup   language

超文本 标记 语言

2、1font-size   设置字体尺寸

2)font-weight 设置字体粗细

3Target 目标 :

_self   原窗口(默认)

_blank   新窗口

_top 顶层框架

_parent  父框架

4tablet特有属性

Cellspacing 单元格间距(单元格之间的间距)

Cellpadding 单元格边距(单元格内文字与边框之间的距离)

5、对齐

 Align(水平):left center right

左 中 右

Valign(垂直):top middle bottom

上 中 下

6td合并

水平  colspan  跨列(合并列)

垂直 rowspan 跨行(合并行)

7、表单

1)input 输入  2select 选择  3textarea 多行文本输入框

4)File  文件域

8、四种按钮:

1Submit 提交 2Reset 重置 3button 普通按钮 4image 图像按钮

9 1multiple 多选   2placeholder   占位符

10、CSS

Cascading style sheets

层叠 样式 表

11

1):link 点击前

2):visited 点击前

3):hover 放上去(鼠标滑过)

4):active 按下去(点击瞬间)

12、  text-decoration:(文本装饰)

a) Overling 上划线

b) underline 下划线

c) line-through 删除线

d) none 去掉超链接下划线

13、text-indent 文本缩进 (像素、百分比、em、负值)

14

1)background-color 背景颜色

2)Background-image 背景图片

3)Background-repeat 背景是否重复

A)Repeat 重复(默认)

B)No-repeat 不重复

C)Repeat-x 水平方向重复

D)Repeadt-y 垂直方向重复

4)background-position :背景图片位置

A)right top 水平  垂直

5)background-attachment: 背景滚动模式

15、 1list-style-type disc circle square decimal

               实心圆 空心圆 方块 数字

2)list-style-image

3)List-style-position

16、盒模型:

Contentwidth/height+padding+border+margin  盒子实际大小

内容 内边距 边框   外边距

17、border-style:solid dashed dotted none

实线 虚线 点线 无

18、display(显示):

a)block (行内转块)

b)Inline-block (行内块) 兼容到IE8

c)Inline (块转行内)

d)None (不占位隐藏)

Visibility(可见性):hidden (占位隐藏)

19、position(方位、状态):

1)static 静态

2)Relative 相对定位(相对自己原来位置定位)

3)Absolute 绝对定位

4)Fixed 固定定位 不兼容IE6(相对于浏览器窗口)

Z-index(遮罩层):值越大越靠前,可使用负值

20、h5新增主体结构元素:

A)article 文章

B)Section 区块(通常由内容及标题)

C)Nav 导航

D)Aside 侧栏

E)Time 时间(行内元素)

21、新增的非主体结构元素

A)header 头部

B)Main 主体(唯一)

C)Footer 页脚

D)Address 文档或文章的作者信息(默认倾斜、块元素)

 

22、audio音频:

A)autoplay 自动播放

B)Controls 控件

C)Loop 循环

D)Preload 预载(是否在页面加载后载入)

23、video 视频:

A) autoplay 自动播放

B)Controls 控件

C) Loop 循环

D)Preload 预载(是否在页面加载后载入)

E)width /height /

24、embed 多媒体

25、智能表单

A)email 邮箱

B)URL 路径

C)Date 日期

D)Time 时间

E)Month 月

F)Week 周

G)Number 数字(手机调出)

H)Range   滑动条表单

I)Search 搜索

J)Color 颜色

26、新增表单属性

a) Required 内容不能为空,必填

b) Placeholder 提示信息,存在默认值

c) Autofocus 自动聚焦(默认为on,)

d) Pattern 正则 (不做表单验证设置novalidate=true”)

27、css新增属性

A) 盒子阴影:box-shadow  

blur 模糊值  inset内阴影

B) 文字阴影:text-shadow

C) 文字溢出:text-overflow

Clip: 裁剪(默认值)

Ellipsis 省略号

          White-space(空格):nowrap(强制不换行)

     Overflow(溢出):  hidden(溢出隐藏)

     Text-overflow(文字溢出):ellipsis

28、边框圆角:border-radius

单独一个角(左上):Border-top-left-radius

29、盒模型模式:box-sizing

Content-box 内容框 宽高是内容大小

Border-box 边界框 宽高是实际大小

30、背景渐变:

A)linear-gradient: 线性渐变

线性  变化率

B)Radial-gradient:放射性渐变

放射

C)Repeating-linear-gradient:重复渐变

重复

 

31、background-size

a) Auto 背景图像真实大小

b) Cover 遮盖(等比缩放到完全覆盖容器)

c) Contain 包含

32、Opacity 透明(取值在01之间)

32、伪类选择器:

a) First-child  第一个选择器

b) Last-child  最后一个子元素

c) Nth-child(n) 指定序号的子元素

d) Nth-child(even) 索引是偶数的元素

e) Nth-chold(odd) 奇数

f) :checked 选中状态

g) ::selection 被选中是的状态

h) :disabled 不可用状态

i) :enabled  可用

33弹性盒

A)viewport 视口(设置网页代码适应设备宽度)

B)Diaplay(显示) box

Flex弯曲(新版本弹性盒)

C)box-orient(方向)horizontal 水平(默)

 Vertical  纵向

D)box-ordinal(依次)-group()

E)box-pack()start(开始) center(居中) end(结束)

 

34、C3动画

a) Transform 变形

1)Transform:  rotxate|scale|skew|translate

旋转  缩放 扭曲 位移

2)translate(x,y)         2D 转换。

translate3d(x,y,z)     3D 转换。

translateX(x)         X 轴的值。

translateY(y)        Y 轴的值。

translateZ(z)        Z 轴的值。

  transform-origin: left  top

              起源

b)transition 过渡   

transition: width   2s      linear    0.5s;

           属性   时间    速度      延迟  

1transition-property           需过渡 CSS 属性,默认all

2transition-duration           需要多少秒或毫秒。

3transition-timing-function 速度曲线。

4transition-delay            过渡何时开始。

c)transition-timing-function 速度曲线

1)linear     匀速

2)ease     ----

3)ease-in    以慢速开始

4)ease-out  以慢速结束

5)ease-in-out 慢速开始和结束

6)cubic-bezier(n,n,n,n) 函数中定义值n0-1

 

以上是关于前端基础 个人笔记的主要内容,如果未能解决你的问题,请参考以下文章

2021年 Web 前端入门学习路线,(附:前端基础学习笔记)

Typescript学习笔记基础类型

火热报名中!优设WEB前端开发零基础训练营(8月班)

前端基础入门级笔记02:表格列表表单学习,附练习+源码

慕课网-前端JavaScrpt基础面试技巧-学习笔记

入门响应式Web?看懂这篇文章就够了!——Web前端系列学习笔记