HTML5教程（一）- 网页与开发工具

1. 什么是网页

• 网页
  • 基于浏览器阅读的应用程序，是数据（文本、图像、视频、声音、链接等）展示的载体
  • 常见的是以 .html 或 .htm 结尾的文件
• 网站
  • 使用 HTML 等制作的用于展示特定内容相关的网页集合。
    

2. 网页的组成

1. 浏览器
   • 代替用户向服务器发请求
   • 接收并解析数据展示给用户
2. 服务器
   • 存储数据
   • 处理并响应请求
3. 协议
   • 规范数据在传输过程中的打包方式
     

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的智能代码补全、语法高亮等

• 操作

  1. 新建文件（Ctrl + N）
  2. 编写代码保存（Ctrl + S），命名要求以 .html 结尾
  3. 右击选择 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 + →	快速移动光标