前端入门

一、HTML、CSS基础、JavaScript语法基础。学完基础后，可以仿照电商网站（例如京东、小米）做首页的布局。 二、JavaScript语法进阶。包括：作用域和闭包、this和对象原型等。相信我，JS语法，永远是面试中最重要的部分。 三、jQuery、Ajax等。jQuery没有过时，它仍然是前端基础的一部分。 四、ES6语法。这部分属于JS新增的语法，面试必问。其中，关于promise、async等内容要尤其关注。 五、HTML5和CSS3。要熟悉其中的新特性。 六、canvas。面试时，有的公司不一定会问canvas，靠运气。如果时间不够，这部分的内容可以先不学。但如果你会，绝对属于加分项。 七、移动Web开发、Bootstrap等。要注意移动开发中的适配和兼容性问题。 八、前端框架：Vue.js和React。这两个框架至少要会一个。入门时，建议先学Vue.js，上手相对容易。但无论如何，同时掌握 Vue 和 React 才是合格的前端同学。 九、Node.js。属于加分项，如果时间不够，可以先不学，但至少要知道 node 环境的配置。 十、自动化工具：构建工具 Webpack、构建工具 gulp、CSS 预处理器 Sass 等。注意，Sass 比 Less 用得多，gulp 比 grunt 用得多。 十一、前端综合：HTTP协议、跨域通信、安全问题（CSRF、XSS）

一、项目概述 1.1 项目背景 音乐是一门艺术，是由有组织的乐音来表达人们情感、反映人类现实生活情感的艺术。现代科技的发展使得人们可以利用网络随时随地的享受音乐，然而在当今互联网却很少有一个以音乐为媒介的社交平台。本开发团队想以“音乐+社交”的形式，开发一款集听歌、交友和讨论为一体的网上社区——“Violet”音乐社区。Violet多指紫罗兰，也可形容羞怯的人，本团队旨在通过此平台增强人们对音乐的交流，同时拉近人与人之间的距离。 1.2 技术路线 项目整体采用了B/S架构，并采用前后端分离技术。 前端使用 Vue.js + ElementUI + axios 后端使用 Flask+MySQL 1.3 实现情况 用户、歌曲歌单、圈子帖子、点赞、评论等模块都基本实现了，有小部分功能存在冗余，重复工作量，因为时间受限，没用将我们的设计全部实现。但总体设计中的绝大部分功能都 进行了实现，核心功能、主要业务可以运行。达到了我们立项的基本目标。 1.4 项目文档 Violet音乐社区需求分析说明书： https://www.cnblogs.com/Keadin/p/11791088.html Violet音乐社区设计文档： http://www.cnblogs.com/Keadin/p/11885656.html Violet音乐社区API接口文档： https://www.showdoc

你也许会觉得Web前端开发是一个很简单的工作，但当你深入其中时，一定会发现好像Web前端开发不是那么简单，光网站性能优化、响应式、框架就让你焦头烂额。确实，做前端开发就是先易后难，想成为一个优秀的Web前端开发，没有那么简单。 不过，天下事难则不会，会则不难，你只需要掌握11项技能就可以成为Web前端“大拿” 一、入门必备的技能： 第1项技能：HTML超文本标记语言： 技能要点： HTML文件的结构 HTML文件的编写方法 HTML基本标记 文字与段落标记 框架 使用表单 XHTML页面结构 第2项技能：JavaScript脚本 技能要点： JavaScript基本语法 流程控制 函数 对象与数组 程序调试与错误处理 事件处理 处理文档对象 文档对象模型 window窗口对象 第3项技能：CSS网页样式布局 技能要点： CSS定位与div布局 div 标记与 span 标记 CSS+div美化与布局 CSS与JavaScript的综合应用 CSS与XML的综合运用 CSS与Ajax的综合应用 二、晋级提升必会的技能 第4项技能：HTML5开发技能 技能要点： HTML5语法 新增的input输入类型 新增的form元素 HTML5音频与视频 HTML5多媒体技术 Web存储 WebSQL混合开发 Workers多线程处理 第5项技能：常用Javascript框架 技能要点：

一、HTML入门案例(静夜思) 1.概述 HTML：Hyper Text Markup Language 超文本标记语言 超文本：比普通文本功能强大，能实现不同样式(比如加粗，居中，斜体) 标记语言：使用标签对内容进行描述的语言。 2.使用下列标签完成静夜思案例 12345 <h1></h1> 一级标题<b></b> 加粗<i></i> 斜体</br> 换行<p></p>段落 HTML的主要作用 设计网页的基础，HTML5 3.HBuilder常用快捷键mac版 ctrl + D 删除光标所在的行 command + shift + R 复制当前行到下一行 command + enter 将光标移动到下一行(如果原先光标在上一行的中间，只用enter会将当前行的前后两部分内容分开成两行，而使用这个命令可以直接将光标跳转到下一行而不改变当前行的内容，说得很麻烦，自己试试，很简单) command + shift + enter 在当前行的上一行插入空行 tab 输入标签在按tab会自动生成前后标签和<>，这个很好用 command + 方向键 左右是到当前行的前后，上下是到所有行的首尾 command + / 注释 4.入门案例及基本语法规范 12 strong:也是加粗，但是包含语义，搜索引擎友好em：也是斜体，但是包含语义，搜索引擎友好 5.图片及路径 6

引言 前阵子在 w3ctech 的 走进名企 - 百度前端 FEX 专场 上曾“夸下海口”说听完讲座后七天就可以打造自己的前端性能监控系统，既然说出去了也不能食言。从前一篇文章 前端数据之美 相信大家对前端数据有了一定的了解，下面就针对其中的性能数据及其监控进行详细阐述。 开始行动 本文中的性能主要指 web 页面加载性能，对性能还不了解？不用担心，接下来的“每一天”跟我一起进入前端性能的世界。 Day 1 为什么要监控性能？ “If you cannot measure it, you cannot improve it” ———— William Thomson 这是一个最基本的问题，为什么要关注和监控前端性能？对于公司来说，性能在一定程度上与利益直接相关。国外有很多这方面的调研数据： 性能 收益 Google 延迟 400ms 搜索量下降 0.59% Bing 延迟 2s 收入下降 4.3% Yahoo 延迟 400ms 流量下降 5-9% Mozilla 页面打开减少 2.2s 下载量提升 15.4% Netflix 开启 Gzip 性能提升 13.25% 带宽减少 50% 数据来源：http://www.slideshare.net/bitcurrent/impact-of-web-latency-on-conversion-rates http:/

目录 一、项目概述 1.1 项目背景 1.2 编写目的 1.3 项目文档 1.4 项目源码 1.5 项目成果 二、个人工作总结 1.1 工作概览 1.1.1 作为项目组组长 1.1.2 作为项目组成员 1.2 工作详述 1.2.1 选择前端技术路线 1.2.2 确立前端界面风格 1.2.3 绘制界面原型 1.2.4 编写前端框架代码 1.2.5 实现播放器功能 1.2.6 履行组长职责 三、项目总结 3.1 项目立意 3.2 技术路线 3.2.1 整体技术路线 3.2.2 前端技术路线 3.2.3 后端技术路线 3.3 实现情况 3.4 项目收获 四、课程建议 一、项目概述 1.1 项目背景 音乐是一门艺术，是由有组织的乐音来表达人们情感、反映人类现实生活情感的艺术。现代科技的发展使得人们可以利用网络随时随地的享受音乐，然而在当今互联网却很少有一个以音乐为媒介的社交平台。本开发团队想以“音乐+社交”的形式，开发一款集听歌、交友和讨论为一体的网上社区——“Violet”音乐社区。Violet多指紫罗兰，也可形容羞怯的人，本团队旨在通过此平台增强人们对音乐的交流，同时拉近人与人之间的距离。 1.2 编写目的 此文档为本人作为该项目成员的个人工作总结，用于记录在开发过程中的经验、感悟以及对该课程的意见和建议，望今后的其他项目能以此为鉴。 1.3 项目文档

本篇则主要介绍 CSS 的语法与 CSS 是如何工作的。 CSS语法 1. 基本规则 CSS 规则主要由两部分组成： 选择器(selector) 与 声明(declarations) 。 选择器(selector) 是开发者希望改变样式的 HTML 元素。 声明(declarations) 则是开发者制定的希望 HTML 改变的元素规则，可以是一条或多条。 每条 声明(declarations) 由一个 属性(property) 和一个 值(value) 组成。 属性(property) 是开发者希望设置的 样式属性（style attribute） 。 值(value) 为属性的具体内容。 属性与值之间由 冒号 隔开，声明与声明直接由 分号 隔开。 CSS中的注释以 /* 开始并以 */ 结束。 /* selector {property: value} */ h1 {color:red; font-size:14px;} 上面这行代码的作用是将 h1 元素内的文字颜色定义为红色，同时将字体大小设置为 14 像素。 2. 样式表书写规则 每个HTML元素都有初始的样式，但是也可以经过开发者书写而改变样式规则。 HTML 的元素样式修改有以下的书写规则。 内部样式表（写在 <head> 标签内部） <!DOCTYPE html> <html> <head> <style> h1

HTML的诞生 HTML是怎么来的？ 在1982年的时候，万维网的发明者 Tim Berners-Lee 爵士为了让全世界的物理学家能够方便的进行合作与信息共享，造了 HTML(HyperText Markup Language) 超文本置标语言。 在1991年3月， Tim Berners-Lee 把 HTML 介绍给了给他在 CERN(欧洲核子研究中心) 工作的朋友，当时网页浏览器被其世界各地的成员用来浏览 CERN 庞大的电话薄。 然后在8年之后的1990年，博士发明了世界上第一个浏览器 WorldWideWeb ，也因此推动着互联网高速发展。 在 WorldWideWeb 问世之后的1993年 NCSA 推出了 Mosaic 浏览器并且迅速火了起来，成为第一个世界级应用的浏览器，推动着互联网发展。随后跟着的有当时的两大霸主 Netscape de Netscape 浏览器与 MicroSoft 的 Internet Explorer 浏览器，这两个浏览器在当时掀起了一场互联网浏览器大战。这场战争的结果是以 Internet Explorer 全胜告终。但也因此大大的推动了互联网的发展。 CSS的诞生 CSS是怎么来的？ 就在承载 HTML 的浏览器迅猛发展的90年代， CSS (Cascading Style Sheet) 也应运而生。不同的浏览器结合各自 HTML

首先开篇之前先提个问题： 为什么 Flex box 跟 Grid box 的是以 start 、 end 为排列规则，而不是常规的 top 、 right 、 bottom 跟 left ？ 先不要急着往下翻，大家先思考一下。 这个问题的答案，鱼头会在文章中给出，欢迎大家带着这个问题往下翻阅，如果已经知道答案，也可以看看跟大家所知道的答案是否一致。 CSS的逻辑属性 2017年5月18日，W3C的 CSS工作组(CSS Working Group) 发布了 CSS逻辑属性和值(CSS Logical Properties and Values Level 1) 的首份工作草案(First Public Working Draft)。不同的书写模式(writing mode)中，可以抽取出共性的抽象概念(如开始位置，或行)，这些逻辑抽象概念需要在不同书写模式下映射到左或右、上或下等物理的概念上。一些CSS布局可能依赖这些共性的逻辑概念。该 CSS 模块给出了用于通过逻辑方式(而不是基于物理坐标、书写方向和维映射等)控制布局的逻辑属性和取值(logical properties and values)。这个模块来源于CSS21中关于逻辑属性和值的特性。 对于前端来说，我们一直习惯于使用 top 、 right 、 bottom 、 left 来定义我们的 HTML 元素

队名：观光队 链接 组长博客 作业博客 组员实践情况 王耀鑫 过去两天完成了哪些任务 文字/口头描述 学习 展示GitHub当日代码/文档签入记录 接下来的计划 完成短租车，页面美化 还剩下哪些任务 s 完成短租车，页面美化 遇到了哪些困难 网络请求速度慢 有哪些收获和疑问 1、收获：后台数据库管理 2、疑问：暂无 许培荣 过去两天完成了哪些任务 文字/口头描述 新增服务端短租车确认归还接口。 前端新增输入框前端js校验，加载时等待动画，开放短租车功能模块，加入认证时上传图片功能。 展示GitHub当日代码/文档签入记录 接下来的计划 优化后台，完善前端。 还剩下哪些任务 地图功能模块未连入前端页面。有时间可优化前端页面效果。 燃尽图 遇到了哪些困难 目前数据库中有些冗余，欲求一个不需要太大改动后端代码的修改办法。 有哪些收获和疑问 1、收获：让我对html的使用方法和css的玩法更熟悉了... 2、疑问：对于ajax和js的异步动态加载html不清楚，玩不出高级的东西。 陈湘怡 过去两天完成了哪些任务 文字/口头描述 开始修改UI 展示GitHub当日代码/文档签入记录 还在修改中，故还没上传 接下来的计划 继续修改 还剩下哪些任务 前端页面与后端接口的完善 燃尽图 组内共享 遇到了哪些困难 暂无 有哪些收获和疑问 1、收获：对前端更熟练 2、疑问：暂无 陈超颖