前端基础 个人笔记

Posted 2020-11-03 七岁微凉

1、html:

   hypertext    markup   language

超文本 标记 语言

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

2）font-weight 设置字体粗细

3、Target 目标 :

_self   原窗口（默认）

_blank   新窗口

_top 顶层框架

_parent  父框架

4、tablet特有属性

Cellspacing 单元格间距（单元格之间的间距）

Cellpadding 单元格边距（单元格内文字与边框之间的距离）

5、对齐

 Align（水平）：left center right

左 中 右

Valign（垂直）：top middle bottom

上 中 下

6、td合并

水平  colspan  跨列（合并列）

垂直 rowspan 跨行（合并行）

7、表单

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

4）File  文件域

8、四种按钮：

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

9、 1）multiple 多选   2）placeholder   占位符

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、 1）list-style-type： disc circle square decimal

               实心圆 空心圆 方块 数字

2）list-style-image：

3）List-style-position

16、盒模型：

Content（width/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 透明（取值在0到1之间）

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;

           属性   时间    速度      延迟  

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

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

3）transition-timing-function 速度曲线。

4）transition-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) 函数中定义值n为0-1