2020-10-28 前端学习第一天(王红元html/css)

一、了解学习框架,下载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个空格

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。