老司机Studio 第一章

前端开发中的基本概念

• 前端开发者可以做什么

• 后台管理系统

• 移动端SPA

• H5宣传页

• 微信小程序

• node.js（后台、爬虫）

• 其他场景（淘宝店铺装修）

• 从浏览器中输入网址到显示页面中发生了什么

输入网址到显示页面

• html文件结构

  
  
  

  html文件结构

Html是一种标签语言，标签包括标签名，属性，属性值，例如：

hmtl标签1

一般是闭合的但不一定需要闭合的，如：

html标签2

• 前端开发的内容
  HTML - 布局骨架（重点是H5的新特性，即浏览器开放给大家的一些新功能及HTML语义化）
  CSS - 样式皮囊（先了解选择器的使用，再了解各CSS3特性）
  Javascript(JS) - 交互逻辑（难点，ES6）

• 前端开发的基本工具

• Webstorm (功能齐全的IDE)

• Sublime（类似txt编辑器，但是有各种插件，完成简单任务）

• Chrome开发模式（windows下按F12进入， mac为command+option+I， 用于测试页面）

• Filezilla（FTP软件，把网页上传到远端）

• 动手做：仿制百度首页核心部分（CSS的基本概念）

• 行内元素 span a img

• 块元素 div

• 图片标签img 输入框标签input

• 盒模型（content padding border margin)

  
  
  

  盒模型

• box-sizing: border-box（IE默认）

• position: static, relative, absolute, fixed

• CSS属性：边框border、下划线underline、字号font-size、字色color、背景background

• 上传静态网页到服务器

• 作业：仿制百度首页

-阅读资料

• 标签列表： http://www.w3chtml.com/html5/tag/
• css3属性列表： http://www.css88.com/book/css/
• 提问社区： https://segmentfault.com/