文末有福利
前端开发，入门简单，有一台可以运行多款浏览器的电脑，能联网查询资料即可。深入的部分，需要更多的理论知识、肯钻研的精神。 前端开发，需要入门了解的屈指可数，主要就是如下几个大方面：
背景知识
软件安装
文本编辑器
- vscode(推荐使用，功能强大)
- Sublime Text
- NodePad++
浏览器
Firefox,Chrome , Opera, Safari, Internet Explorer and Microsoft Edge
版本控制
Git GitHub
构建工具
- Webpack
- Gulp
Web standards
Web standards ，主要定义浏览器端，功能接口标准的，标准的具体实现，由不同的浏览器厂商完成。
当下使用的web技术
主流浏览器
Firefox, Chrome , Opera, Safari, Internet Explorer and Microsoft Edge
协议
协议，主要用于通信。前后端不是独立的，彼此通过协议，互换信息，web系统才能运行正常
- http
- https
- socket
HTML, CSS, and JavaScript
开发工具
- 各浏览的DevTool,便于调试
- Linters插件
- Minify工具
- CDN等
- 测试工具
- js库和前端框架(站点构建的更快、更高效)
服务端语言
Python, NodeJS, Deno, Go, Rust 面临的挑战
浏览器兼容
Web standards，各实现厂商不同，支持力度不同，浏览器兼容问题自然存在
响应式设计
厂商的不同，展示场景的不同，意味着不能全篇一律敲定，需要动态变化展示内容
性能
天下站点，只有快，才能留住用户
易用性
站点的访问人群不同，要具备普适性， 都能轻松使用。
国际化
国际语言众多，需要尽可能的多支持
安全性
用户隐私数据保护
HTML
html基础概念
html元素
当然，也有例外，不是这种格式的
# Empty elements， or (void elements.) 复制代码html元素嵌套
My cat is very grumpy.
复制代码
块元素和行内元素
块元素，独占一行；行内元素，按先后顺序，排列 这些与css的display不同，不影响元素能包含哪些元素，能被哪些元素包含
元素属性
其中，也存在一种特殊的属性：Boolean attributes
# 等效于复制代码另外，也会存在一些特殊的写法。推荐都是key="value"形式
favorite website复制代码html文档结构
不管多少连续的空白，浏览器都会解析会一个空格
# 定义解析格式 # 文档的root #定义源数据地方 My test page # 文档的可见内容部分 This is my page
复制代码
元数据等请移步参考
html特殊字符
,",' and &, 这是html自身使用的，如果用户需要展示，那么需要转义
html注释
复制代码html 多媒体
image
- 普通的图片
alt描述图片
# 推荐添加alt,而不是text子元素节点添加复制代码caption添加标题
![]()
A T-Rex on display in the Manchester University Museum.
复制代码
- 响应式图片
根据展示设备尺寸的不同，加载不同的图片
复制代码设备尺寸相同，但是分辨率不同
复制代码利用picture，不同设选择加载不同的图片
复制代码picture+svg
复制代码audio
单一url 浏览器厂商，针对音频的支持格式不是不同的，譬如： MP3, MP4 and WebM
浏览器适配问题
Your browser doesn't support HTML5 audio. Here is a link to the audio instead.
复制代码
video
单一url 浏览器厂商，针对视频的支持格式不是不同的
浏览器适配问题
svg
image引用svg
复制代码html引用svg
复制代码iframe等中引用svg
canvas
canvas与svg不同，canvas基于像素,svg基于矢量图
#html复制代码嵌入元素
iframe, embed and objectiframe
html table
样式指定
Data 1 Data 2 Calcutta Orange Robots Jazz 复制代码
更好的样式指定
col 一次指定即可
# 定义在colgroup中，与th个数对应 Data 1 Data 2 Calcutta Orange Robots Jazz 复制代码
全部设置
复制代码如果你现在也想学习前端开发技术，在学习前端的过程当中有遇见任何关于学习方法，学习路线，学习效率等方面的问题，你都可以申请加入我的Q群:前114中6649后671，里面有许多前端学习资料 大厂面试真题免费获取，希望能够对你们有所帮助。
