文末有福利
前端开发,入门简单,有一台可以运行多款浏览器的电脑,能联网查询资料即可。深入的部分,需要更多的理论知识、肯钻研的精神。 前端开发,需要入门了解的屈指可数,主要就是如下几个大方面:
背景知识
软件安装
文本编辑器
- 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元素
![5c03ae89405c00e018ea80a1efd3853e.png](https://img-blog.csdnimg.cn/img_convert/5c03ae89405c00e018ea80a1efd3853e.png)
当然,也有例外,不是这种格式的
# Empty elements, or (void elements.) 复制代码
html元素嵌套
My cat is very grumpy.
复制代码
块元素和行内元素
块元素,独占一行;行内元素,按先后顺序,排列 这些与css的display不同,不影响元素能包含哪些元素,能被哪些元素包含
![a71157bfd14917e9366b40f93ff673c9.png](https://img-blog.csdnimg.cn/img_convert/a71157bfd14917e9366b40f93ff673c9.png)
元素属性
![8657758b953f81e3389af06dbb86090b.png](https://img-blog.csdnimg.cn/img_convert/8657758b953f81e3389af06dbb86090b.png)
其中,也存在一种特殊的属性:Boolean attributes
# 等效于复制代码
另外,也会存在一些特殊的写法。推荐都是key="value"形式
favorite website复制代码
html文档结构
不管多少连续的空白,浏览器都会解析会一个空格
# 定义解析格式 # 文档的root #定义源数据地方 My test page # 文档的可见内容部分
This is my page
复制代码
元数据等请移步参考
html特殊字符
,",' and &, 这是html自身使用的,如果用户需要展示,那么需要转义
![2169bee9ab5c12d6553a5477070bc4a9.png](https://img-blog.csdnimg.cn/img_convert/2169bee9ab5c12d6553a5477070bc4a9.png)
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 object
iframe
html table
样式指定
Data 1 Data 2 Calcutta Orange Robots Jazz 复制代码
更好的样式指定
col 一次指定即可
![192f4e6e159f9a203b17f5a621e8dd7b.png](https://img-blog.csdnimg.cn/img_convert/192f4e6e159f9a203b17f5a621e8dd7b.png)
# 定义在colgroup中,与th个数对应 Data 1 Data 2 Calcutta Orange Robots Jazz 复制代码
全部设置
复制代码
如果你现在也想学习前端开发技术,在学习前端的过程当中有遇见任何关于学习方法,学习路线,学习效率等方面的问题,你都可以申请加入我的Q群:前114中6649后671,里面有许多前端学习资料 大厂面试真题免费获取,希望能够对你们有所帮助。
![9d4a48ac94a24796d46d4912df37b5d0.png](https://img-blog.csdnimg.cn/img_convert/9d4a48ac94a24796d46d4912df37b5d0.png)
![85d1c8ccf647ab6b70061f8650151d0d.png](https://img-blog.csdnimg.cn/img_convert/85d1c8ccf647ab6b70061f8650151d0d.png)