1. 什么是网页
- 网页
- 基于浏览器阅读的应用程序,是数据(文本、图像、视频、声音、链接等)展示的载体
- 常见的是以
.html
或.htm
结尾的文件
- 网站
- 使用 HTML 等制作的用于展示特定内容相关的网页集合。
- 使用 HTML 等制作的用于展示特定内容相关的网页集合。
2. 网页的组成
- 浏览器
- 代替用户向服务器发请求
- 接收并解析数据展示给用户
- 服务器
- 存储数据
- 处理并响应请求
- 协议
- 规范数据在传输过程中的打包方式
- 规范数据在传输过程中的打包方式
3. 开发前的准备
1 浏览器
-
运行环境:浏览器,设置chrome为默认浏览器,作为网页文件的运行环境。
-
主流浏览器:谷歌、火狐、Safari、Edge、百度、猎豹、QQ、360、UC、等
-
搜索引擎:浏览器内核(渲染引擎): 负责读取网页内容,整理讯息,计算网页的显示方式并显示页面
- 目前国内一般浏览器都会采用 Webkit/Blink 内核,如 360、UC、QQ、搜狗等
2 Web标准
-
介绍
- Web 标准是由 W3C (万维网联盟,国际最著名的标准化组织)组织和其他标准化组织制定的一系列标准的集合。
-
作用
-
解决不同浏览器在页面显示或排版上的差异。
-
-
构成
- 主要包括结构(Structure) 、**表现(Presentation)和行为(Behavior)**三个方面。
标准 说明 结构 用于对 网页元素
进行整理和分类(HTML)表现 用于设置网页元素的 颜色、大小等 外观样式
(CSS)行为 网页模型的定义及 交互
的编写(JavaScript)- Web 标准提出的最佳体验方案:
结构、样式、行为相分离
(简单理解: 结构写到 HTML 文件中, 表现写到 CSS 文件中, 行为写到 JavaScript 文件中)。
3 开发工具
-
开发工具:不限,选用个人习惯的即可(HBuilder、WebStorm、
VSCode【推荐】
、EditPlus、PyCharm等)- VScode官网下载地址:https://code.visualstudio.com/
- VScode常用插件:
- Chinese(Simplified):汉化
- Open in Borwser:用浏览器打开
- HTML CSS Support:HTML和CSS的智能代码补全、语法高亮等
-
操作
- 新建文件(Ctrl + N)
- 编写代码保存(Ctrl + S),命名要求以
.html
结尾 - 右击选择
Open In Default Browser
使用 浏览器(推荐 Chrome) 打开
-
快捷键
快捷键 功能描述 Ctrl + +/ Ctrl + - / Ctrl + 鼠标上下滚动 代码界面放大/缩小 Ctrl+F 查找 Ctrl + H 替换 Ctrl+Enter 在光标所在行下方新插入一行 Ctrl+Shift+Enter 在光标所在行上方新插入一行 Shift + Alt + ↑ 将当前行复制并插入到上一行 Shift + Alt + ↓ 将当前行复制并插入到下一行 Alt + 左键点击 可以在指定的位置添加光标 Ctrl + x 删除当前行 Alt + ↑ 将光标所在行上移 Alt + ↓ 将光标所在行下移 Ctrl + Shift + ] 展开代码块 Ctrl + Shift + [ 折叠代码块 Ctrl + ← 或者 Ctrl + → 快速移动光标