一、了解学习框架,下载Xmind思维导图制作软件
二、r学习语言
1.React Native(html网页内容结构+css网页视觉体验+js网页交互处理)iOS Android
2.weex->Vuejs->iOS Android
3.Flutter(野心最大的语言)->iOS Android Web PC段
4.javaScript->TypeScript->Dart、Java、Python
5.Linux->Linus->Git
三、文件设置
1.文件显示详情
2.显示文件的扩展名
3.显示隐藏文件和文件夹
四、结构和样式分离
1.HTML+CSS+JS->浏览器解析
2.elements元素
五、常用英文单词
profile概述
console控制台
sources来源
network网络
performance性能
memory记忆
application应用
security安全
audits审计
Plugin->为原有的软件扩展功能
Extension 插件
六、浏览器内核概况
HTML+CSS+JS->内核(渲染内核)+JS引擎(V8)->适配Chrome/IE/360
->Trident(三叉戟):IE、360、搜狗、百度、UC
->Gecko(壁虎)Mozilla Firefox火狐
->Presto(急板乐曲)->Blink(眨眼)开源、Opera
->Webkit:Safari、360、搜狗、移动端(Android、iOS)
app->webview(webkit)->直接打开网站
需要关注的浏览器Google Chrome、Mozilla Firefox(火狐)、Opera(欧朋)、Safari、IE(最独特8.0版本之后正常)
w3c
内容概要
1.网页基本元素
文档声明、html元素(根元素、只有一个)lang属性(W3C标准)
2.h元素/p元素/a元素/img元素/strong元素/div/span
3.br/hr/code
4.URL/SEO优化
七、记事本开发网站 第一条程序
<!doctype html>
<html>
<head>
京东(JD)</title>
元数据metadate
<body>
Hello World
标题<p>Hello HTML CSS JavaScript
专业前端开发工具
WebStorm、 Sublime Text、 Visual Studio Code、 Atom、 HBuilder、 IntelliJ、 IDEA、Dreamweaver
智能提示、高亮识别、语法检测、集成环境、开发效率高提示
段落
</body>
</html>
专业前端开发工具
WebStorm、 Sublime Text、 Visual Studio Code、 Atom、 HBuilder、 IntelliJ、 IDEA、Dreamweaver
智能提示、高亮识别、语法检测、集成环境、开发效率高提示
八、VSCode
安装插件:右侧图标最后一项,Extension,查找需要的插件(联网)
Chinese工具中文支持
Open in browser将html页面在浏览器中打开
Atom个人比较喜欢的主题
Vxcode-icons文件图标的样式
工具配置:Auto Save自动保存
Font Size修改代码字体大小
Word Wrap代码自动换行
Render Whitespace空格的渲染方式(个人推荐)
Tab Size代码缩进2或4个空格