1.什么是Web开发
Web开发其实就是Web应用开发。
在 PC(Personal Computer,个人计算机)刚兴起的年代,软件主要使用 C/S 架构(Client/Server,客户端/服务器)即应用运行在桌面上,而数据库这样的软件运行在服务器端。
随着互联网的兴起,B/S 架构模式 (Browser/Server, 浏览器/服务器)开始流行,这种架构模式就是Web应用开发。
因为Web应用程序的更新和升级相较于传统的 C/S 架构更加的迅速,(C/S 架构需要每个客户端升级应用软件。 B/S 架构下,客户端只需要浏览器,浏览器请求服务器,获取Web页面,并把Web页面展示给用户即可。无需用户自己升级应用)
2.Web开发能做什么?
1.门户网站(商城网站,多媒体网站,公司官网等)
2.后台管理系统
3.手机APP
4.桌面应用(电脑的应用程序)
5.服务器语言 nodejs
6.游戏 白鹭+TS
7.小程序开发 + 小游戏
3.Web开发工程师的职责
1.掌握基本的前端开发技术
2.前端主流框架、SEO
3.了解项目在不同浏览器上的兼容情况, 解决浏览器的兼容问题
4.提高用户体验, 优化网站性能
5.学会运用各种工具进行辅助开发
4.认识浏览器
1.谷歌浏览器(chrome) Blink(webkit内核的分支)
2.IE浏览器 Trident内核
3.火狐浏览器(firefox) Gecko内核
4.safari浏览器 WebKit内核
5.欧朋浏览器(Opera) presto内核(已废弃) 目前用webkit内核
6.edge浏览器(IE浏览器在windows10后的版本) edgeHTML内核
(浏览器内核由两个部分组成:
渲染引擎: 渲染页面
js引擎: 解析脚本)
- 由于不同的浏览器对于 HTML+CSS+JS 的理解不同, 所以不同的浏览器对于前端代码的表现不一样
- 特别是现在移动设备和微浏览器的市场占有率变大, 标准更加复杂
- 所以HTML需要一个统一的标准(w3c万维网联盟)
5.前端常用开发工具
- submit text3 轻量级的文本编辑器 官方地址
- VScode 最流行的免费开源现代化轻量级的代码编辑器, 可以通过安装各种插件支持几乎所有主流的开发语言和框架 官方地址
- Hbuilder 一款支持HTML5的web开发工具 官方地址
- webStorm 被称为最强大的HTML5编辑器, 对电脑的配置要求较高而且需要付费 官方地址
- Atom 是 github 专门为程序员推出的一个跨平台文本编辑器。支持CSS,HTML,JavaScript等网页编程语言 官方地址
我个人目前在使用vscode
快捷键有:
- 在本地文件中打开文件目录 shift + alt + r
- 修改编辑器主题色 [ctrl + k + t]
- 打开/关闭侧边栏 [ctrl + b]
- 选中相同的内容 [ctrl + d]
- 自动换行/不自动换行 [alt + z]
- 保存文件 [ctrl + s]
- 撤销 [ctrl + z]
- 关闭窗口 [ctrl + w]
- 依次打开最后关闭的窗口 [ctrl + shift + f]
- 在光标当前行的下面插入一行 [ctrl + Enter]
- 在光标当前行的上一行插入一行 [ctrl + shift + Enter]
- 按住鼠标中键, 拖动鼠标, 可以选中一列
- 拖动文件, 直到区域变亮,可以实现分屏
- 注释 [ctrl + /]
问号那个斜杆 [ ctrl + ? ]
6.HTML基础标签与作用
-
html 定义HTML文档
-
head 定义关于文档的信息
-
body 定义文档的主体
-
title 定义文档的标题
-
meta 定义关于HTML文档的元信息
-
link 定义文档与外部资源的关系
-
style 定义文档的样式信息
-
script 定义客户端脚本
-
h1 + h6 定义标题 ,h1最大,h6最小
-
p 定义段落
-
span 标签被用来组合文档中的行内元素
-
pre 定义预格式化的文本
-
br 换行符
-
hr 在HTML页面中创建一条水平线
-
i、em i标签显示斜体文本效果,em把文本定义为强调的内容
-
b、strong b是定义粗体字 strong是把文本定义为语气更强的强调的内容
-
s、del s标签标记删除线文本,del标签定义文档中已被删除的文本
-
u、ins u标签定义下划线文本,ins标签定义已经被插入文档中的文本并需要与del标签一起使用
-
img 向网页中嵌入一幅图像
-
div 可定义文档中的分区或节
-
a 定义超链接,用于从一张页面链接到另一张页面
-
iframe 会创建包含另外一个文档的内联框架(即行内框架)
标签建议优先使用语义化标签!!!