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 + →快速移动光标

点赞(0) 打赏

评论列表 共有 0 条评论

暂无评论

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部