学python前端需要哪些基础知识_前端程序员必须掌握哪些基础知识？

前端程序员必须掌握哪些基础知识？

HTML

* 超文本标记语言

* 是有一个个标签组成，如果我们要创建一个HTML文档，第一行必须先声明我们要创建的是一个h5页面

*

* html页面值雨荨有一个外层标签，html;所有的标签都要包裹在HTML标签以内 ；..

* html标签不分(标签名)大小写；

* xml要严格区分大小写；

* 下边有两个字标签，一个

页面的各种信息 页面要显示的内容

*

中页面的标题

* 页面的配置，不包国任何内容，单标签

* Google可以不写

* 用于搜索引擎优化

* 跟搜索引擎有关

*

* div 没有特殊样式，表示一个快； span 无特殊样式，一个文字区域,块元素和行元素

* h1-h6标题标签，默认加错

* 原则上一个页面只有一个H1;

* ol>li 有序列表； type 1 数字; a小写字母； A 大写字母； I 大写罗马数字； i小写罗马数字排序

* ul>li； 无序列表

* 自定义列表；dl dt dd

*

* a标签，作用：锚点和超链接

* target="";跳转目标：——self当前页面跳转 _blank当前页面不动，打开新的标签; iframe的name值：在iframe中跳转；

* 语义化标签：header:头部； nav:页面中的导航栏；section:区块，语义化的div； main:页面主要区域；artical:主要内容； aside:侧边栏；footer:页面底部； 效果上跟div一样

* p标签，文字段落；

css样式

* 第一个地方可以写在style属性，任何一个标签都有style属性

* 写在head标签中的style标签内

* 写在一个外部的css文件中，页面中可以用link标签引入；

* 复用性高写在css文件，复用性不高写在head中的style标签中；一般不用style属性

#### 选择器

* 1、id选择器，以#开头，允许两个id一样

* 2、class选择器，以.开头，匹配class相同的标签

* 一个标签可以有多个class值，用空格分隔；

* 3、元素选择器，直接用标签名来命名，匹配标签名相同的标签

* 4、*通配符，匹配所有的标签

#### 选择器的优先级

* 范围越小优先级越高

* 内联样式(标签的style属性)优先级最高>id选择器>class>元素>*

#### 常用样式

* 常用单位：

* 大小：px固定大小，表示像素

* 百分比 % 参照父元素的大小

* vh百分比，参照屏幕的高度，vw参照屏幕的宽度

* em 参照的是父元素的font-size,1em=父元素的font-size;

* rem参照的是HTML的font-size

* 角度

* deg**********

* 常用样式

* 宽度

* 高度

* background 背景色，背景图，平铺，背景定位等等

* background-positon: 背景定位********* background-position: left top;

* margin外边距

* padding内边距

* border边框线，大小 样式 颜色

* 样式：solid 实线 dashed虚线(线段) dotted虚线(点) inset(凹陷感觉) outset(凸起感觉)

* border-left...

* 内边距和边框线会会改变元素的实际宽度和高度****

* 实际高度= height+上边内边距+上线边框线

* box-sizing: border-box;内边距和边框线都在宽度和高度以内绘制

* display: block,inline,inline-block，none(隐藏模型),flex将元素转换成弹性模型；**********

* flex-direction: row-reverse/column-reverse

* 子元素flex-grow；1 2 。。弹性比例扩展

* display:none ; 隐藏元素并且脱离文档流；*****

* 就是不占用任何位置

* 不脱离文档流：visibility:hidden;******

浮动

* float: 浮动 脱离文档流、left:左浮动，right: 有浮动

一旦设置了浮动，该元素自动变成inline-block;*****

* clear 清除浮动，在浮动的统计元素中设置，

* left 清除左浮动， right: 清除有浮动 both: 清除左右浮动

* 清除浮动后，浮动的元素回到了文档流，但是仍然保持并排；

#### transform 元素转换

* 3d转换，transform-style: preserve-3d;

* 父元素设置镜头的 距离： perspective: 800-1200px

* rotateX 沿着x轴旋转； rotateY: 沿着y轴。 rotateZ:。。

* translateX: 沿着x轴平移。。。

* rotate 沿着z轴旋转(2d)

#### 定位 position

* reletive 相对定位 特点：不脱离标准流，参照无定位的位置

* static 静态****

* absolute 绝对定位：脱离标准流，参照上一个非static定位的父元素

* fixed 固定定位： 参照屏幕的位置，随着滚动条滚动

* 覆盖规则：

* 1、非static覆盖static定位

* 2、后写的定位覆盖先写的

* 3、有z-index覆盖 wu z-index

* z-index大的覆盖 z-index小的

### 动画样式

* css3中的动画是一个相对位置的移动，所以一定要定位： relative或者absolute;*********

* 1、定义动画

* @keyframes 动画名{ 过度效果}

@-webkit-keyframes wy{

0% {left：0}

100% {left: 600px}

}

@-o-keyframes wy {

}

* 2、执行动画

* 用的是animation；

* -webkit-animation: wy 1s

* 在选择器中animation:

* 动画名 过度时间 速度曲线(ease默认) 延迟时间(默认是0) 播放次数(默认是1) 偶数次是否逆序 停留位置

* 速度曲线：ease 低速-快-特别慢

* ease-in 特别慢- 快

* ease-out 特别快- 越来越慢

* ease-in-out 特别慢- 快- 减速

* linear: 匀速

* 播放次数

-webkit-animation: wy 3s linear 1s 4

* infinite无限次

* 偶数次，是否逆序

* normal不逆序 alternate逆序

前端工程师需要掌握哪些知识？

1、能熟练使用HTML、CSS、Javascript，主要工作还是搭建静态页面；

2、学习Bootstrap、jQuery之类，以及AJAX技术；

3、学习进阶框架Angular、Vue、React等。

前端Web框架

熟悉掌握HTML、服务器端脚本语言、CSS和JavaScript之后，学习Web框架可以加快Web开发速度，节约时间。PHP程序员可选的框架包括CakePHP、CodeIgniter、Zend等，Python程序员喜欢使用Django和 webpy，Ruby程序员常用RoR。

随着Web 越来越规范和标准的统一，Web组件化技术不断革新，移动端开发不断升华，以下是一些常见开源前端框架：

Bootstrap

主流框架之一，Bootstrap 是基于 HTML、CSS、JavaScript的，它简洁灵活，使得 Web 开发更加快捷。

html5-boilerplate

该框架可以快速构建健壮，且适应力强的web app或网站。

Meteor

Meteor是新一代的开发即时web应用的开源框架，它能在较短时间内完成开发。

Semantic UI

基于自然语言有效原则的UI组件框架

Foundation

优秀的响应式前端框架

Materialize

基于材料设计的现代化响应式前端框架。可提供默认的样式，自定义组件。此外，Materialize还改进动画和过渡，为开发人员提供流畅的体验。

Pure

几乎可以在每一个web项目中使用的一组小的和响应式的CSS模块。

Vue

Vue.js 是用于构建交互式的 Web 界面的库。它提供了 MVVM 数据绑定和一个可组合的组件系统，具有简单、灵活的 API。

Skeleton

Skeleton 是一个小的 JS 和 CSS 文件的集合,可快速开发漂亮的网站,适合各种屏幕设备包括手机。Skeleton 基于 960 grid 开发。它是一个 UI 框架。

Amaze UI

国内首个开源HTML5跨屏前端框架产品系列，中文排版支持更优、本土化组件丰富。该产品系列中有专门针对移动端的HTML5混合应用开发框架Amaze UI Touch以及针对跨屏HTML5网页开发的Amaze UI Web。其中，Amaze UI Touch可以帮助开发者通过丰富的组件，快速构建出与原生APP相媲美的专属移动端的HTML5应用。

UIkit

一个轻量级的和模块化的前端框架,用于快速开发和功能强大的web接口。

Yui

Yahoo! UI Library (YUI) 是一个开放源代码的 JavaScript 函数库，为了能建立一个高互动的网页，它采用了AJAX, DHTML 和 DOM 等程式码技术。它也包含了许多 CSS 资源。使用授权为 BSD许可证。

kissy

一款跨终端、模块化、高性能、使用简单的 JavaScript 框架。

MUI

最接近原生App体验的前端框架的框架。

Arale

一个开放、简单、易用的前端基础类库。

JX

JX 是模块化的非侵入式Web前端框架，特别适合构建和组织大规模、工业级的Web App。

GMU

GMU是基于zepto的mobile UI组件库，提供webapp、pad端简单易用的UI组件! Web App。

ZUI

开源HTML5前端框架

Clouda Touch.js

Touch.js是移动设备上的手势识别与事件库,也是在百度内部广泛使用的开发。

推荐教程：《PHP》《JS教程》