[TOC]
## 前言
也許你已經認為你是一名稱職的前端工程師,可以根據設計圖完成頁面,并且可以用js完成下簡單的頁面交互和數據傳遞,偶爾還可以自豪的改下jq插件的功能或者樣式。但是如果僅僅是這樣,還遠遠不夠。
### 一 前端基礎
#### html
>1. 你的頁面中是否只有div,span,label,input,a,ul,li.button.select這些,有那么多的h5標簽你是否嘗試了解并且真的去使用,局限于div去布局是遠遠不夠的。
新增的
>2. 新增的h5的屬性你是否清楚,如果你的部分局限于checked,selected,id,class,onclick,那也還差的很遠,嘗試著了解下for,pattern,placehoder,autofocus,autocomplete,dbclick,ondrap,contediable等
>3. 新增的媒體標簽,video,audio你是否使用過,表現如何,頁面中如果需要該如何使用,如何控制,如何做兼容;新增的canvas畫布標簽基礎的教程看過沒,如果實現簡單的畫布制作與修改,完成畫布級別的動畫
>4. 你的dom結構是否精簡,語義化(語義化是重點),重點區域是否做了批注,便于維護。
>5. 代碼格式規范,包括合理嵌套,標準的h5模板,屬性以及標簽的規則等。
#### css
>1. 引入方式是采用外鏈,經過壓縮和md5命名,有基本的瀏覽器兼容代碼
>1. 樣式考慮到了繼承和默認值,并非所有的樣式全部指定樣式實現
>1. 選擇器部分,基于基本的10類選擇器有了基本的了解,做出了合適的選擇與使用,提高了選擇效率,避免了兼容問題。
>1. 代碼簡化,屬性復寫,公共樣式抽離。
>1. 模塊化,組件化的樣式抽離,合理的布局與常用的布局、居中、文本處理方式等
>1. 樣式名稱命名,語義化,便于二次使用,不會造成樣式上污染,區分了業務和公共部分
>1. less,sass,postcss等預處理器的使用
>1. css3中新增屬性的使用,包括背景多背景,背景裁剪,盒陰影,盒子陰影,動畫,變形,漸變,旋轉
>1. css3中,grid以及flex的布局或者盒模型的了解以及使用
#### javascript
>1. 引入方式是采用外鏈,js語法規范,經過壓縮和md5命名
>1. 你所熟練使用的jq的版本,jq涉及到語法,jq的核心思想,jq與js的區別
>1. js的語法構成,基本數據類型,基本的內置對象以及常用的內置對象方法
>1. js基本語句,數學運算,邏輯運算
>1. js類與函數的集成,閉包,模塊規范與模塊編寫
>1. js的插件的核心與實現機制
>1. js基于對象程序設計,原型鏈的實現
>1. 瀏覽器對象的常用方法
>1. jdom的基本語法以及綁定事件的原理
### 二 其他角度
#### 2.1 瀏覽器調試工具:(以下所列僅供參考,希望能給你一些有益的啟示)
firebug,developer tools,web Inspector 等,用途如下:
* 查看頁面dom渲染情況,層級結構
* 查看樣式的渲染以及繼承情況,改變調整樣式,并且可以自行改變元素的狀態。
* 查看盒模型,分析排版。
* 查看資源文件以及依賴。
* 查看http的加載,網絡性能,瀏覽器端的性能優化。
* 腳本的調試以及開發。
* 網絡存儲,頁面路由,頁面傳參,網絡通訊等。
* gpu渲染與優化。
#### 2.2.開發工具:
sublime\hb\ws\atom\eclipse\notepad++\editplus
#### 2.3 切頁面:
ps,axure 的基礎知識
#### 2.4 編程知識:
數據結構,mvc,mvvm,面對對象或者切面的編程,js設計模式,js編程模式
#### 2.5 web通訊技術:
http狀態碼,tcp/ip協議,計算機基礎
#### 2.6 版本管理
git,svn------github,gitlab等
#### 2.7 前端規范:
h5,css3,es6,web標準,代碼驗證
#### 2.8 前端構建:
gulp,grunt,fis,webpack
#### 2.9 web優化:
減少請求,壓縮,性能優化,代碼優化,格式優化
#### 2.10 web兼容:
多系統,多瀏覽器,多分辨率,多設備,多網絡情況
#### 2.11 nodejs方向
服務器,路由,底層操作,
#### 2.12 軟技能
溝通,團隊合作,知識管理與分享,交互設計,可訪問性設計,可用性設計,需求分析,產品迭代
- 前端入門
- 前端入職須知
- 前端自我定位
- pc與手機頁面差別
- 前端書單
- 前端種子計劃
- 前端技術棧
- ps
- ps入門階段
- html
- html入門
- html代碼規范
- meta
- table
- iframe
- a標簽詳解
- image
- html代碼審查工具
- h5專題
- h5入門
- h5新增屬性
- canvas畫布教程
- audio/video
- Geolocation
- Websockets
- Web storage
- Communication
- Web Workers
- requestAnimationFrame
- css
- css入門必學
- css代碼規范
- 項目字體規范
- css基本位置布局
- css常見樣式命名規則
- css代碼優化建議
- css常用樣式名
- css選擇器攻略
- css盒子模型的理解
- css屬性繼承與默認值
- css代碼審查工具
- css中常見的知識盲區
- css3新特性淺談
- css新特性了解
- border-radius
- background
- transform
- animation
- white-space
- css常用技術
- 文本兩端對齊
- css之浮動解決方案
- css優化建議
- 文本超出省略
- img-sprites
- rem布局教程
- 水平居中&垂直居中
- 固寬&變寬布局
- 寬高固定比例的盒模型
- 樣式預處理語言
- less教程
- sass教程
- postcss教程
- js
- javascript入門
- js代碼規范
- js基礎拓展
- js代碼審查工具
- js性能優化
- js基本語句
- 基本運算
- 基本語句語法
- js對象
- es6入門
- obj
- Array
- Date
- String
- Boolean
- Number
- Json
- RegExp
- Math
- function
- jquery入門
- jq核心思想
- jq基本語法
- jq插件庫匯總
- js常用技術
- break&continue區別
- js對日期轉換
- js控制運動-move.js
- 原生js-cookie語法
- ajax請求后回調
- 表單數據序列化
- zepto
- zepto入門
- 百度touchjs
- js編程
- 插件庫
- 功能性插件
- pdfjs
- wdatepicker
- qrcoder
- barcode插件
- photoviewer
- hammer.js
- echarts
- 交互組件
- layerjs
- java
- java入門
- java基本語句
- springMVC
- javaweb
- vm模板引擎
- freemarker
- maven教程
- mySql教程
- flex教程
- flex入門
- git教程
- git入門
- git分支
- git-tag管理
- git注意事項
- git-torise入門
- ide-git插件使用
- web
- web兼容
- web兼容思想
- pc端兼容適配文檔
- pc端兼容bug匯總
- ie兼容bug匯總
- 手機兼容bug匯總
- web安全
- jeecms
- web存儲
- app/h5組件
- 安卓教程
- ios教程
- 前端教程
- rubikx的教程
- 其他
- artTemplate
- tmod使用
- 跨域問題
- markdown教程
- 常用工具
- postman-api調試
- web常識
- 瀏覽器ua統計
- ui框架
- easyui
- bootstrap
- 入門推薦
- weui
- sui-pc
- sui-mobile
- layerUi