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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/459488.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

剖析市面上具有代表性的四款翻译工具!

据我目前了解。市场上有多款具有代表性的翻译软件,它们可以各自针对不同的用户需求和使用场景提供了特色化服务。现在我将推荐剖析其中的我个人觉得比较好用的四款翻译工具,帮助你们能更好地理解其功能,选出最适合的工具来满足多样化的翻译需…

无人机之任务分配算法篇

无人机的任务分配算法是无人机系统中的重要组成部分,它决定了无人机如何高效、合理地执行各种任务。以下是一些常见的无人机任务分配算法: 一、合同网协议(Contract Net Protocol, CNP) 基本概念:CNP算法是一种分布式…

微信小程序25__实现卡片变换

先看效果图 实现代码如下&#xff1a; <view class"page" style"filter:hue-rotate({{rotation}}deg)"><view class"prev" catchtap"toPrev">《《《</view><view class"next" catchtap"toNext&q…

深入理解 SQL 中的 WITH AS 语法

在日常数据库操作中&#xff0c;SQL 语句的复杂性往往会影响到查询的可读性和维护性。为了解决这个问题&#xff0c;Oracle 提供了 WITH AS 语法&#xff0c;这一功能可以极大地简化复杂查询&#xff0c;提升代码的清晰度。本文将详细介绍 WITH AS 的基本用法、优势以及一些实际…

java项目之电影评论网站(springboot)

风定落花生&#xff0c;歌声逐流水&#xff0c;大家好我是风歌&#xff0c;混迹在java圈的辛苦码农。今天要和大家聊的是一款基于springboot的电影评论网站。项目源码以及部署相关请联系风歌&#xff0c;文末附上联系信息 。 项目简介&#xff1a; 电影评论网站的主要使用者管…

Pnetlab免登录方式

Pnetlab免登录方式 文档&#xff1a;https://blog.wamoyu.com/docs/pnetlab/Installation/physicalInstallation 官方&#xff1a;https://pnetlab.com/pages/main Username:Michealzou password:ztr940407 操作系统&#xff1a;Ubuntu 20.4 1.裸机方式安装pnetlab: curl …

听书项目(一)

内容来源 尚硅谷知识星球&#xff0c;精选项目&#xff0c;只记录开发中的优点功能&#xff0c;并不涉及侵权问题&#xff0c;若有侵权联系作者删除。 项目背景 随着智能手机和高速互联网的普及&#xff0c;人们开始寻求更便捷的方式来获取信息和娱乐。有声书的出现使得人们…

部署DNS主从服务器

一。DNS主从服务器作用&#xff1a; DNS作为重要的互联网基础设施服务&#xff0c;保证DNS域名解析服务的正常运转至关重要&#xff0c;只有这样才能提供稳定、快速日不间断的域名查询服务 DNS 域名解析服务中&#xff0c;从服务器可以从主服务器上获取指定的区域数据文件&…

Java面向对象编程进阶(四)

Java面向对象编程进阶&#xff08;四&#xff09; 一、equals()方法的使用二、toString()方法的使用三、复习 一、equals()方法的使用 适用性&#xff1a;任何引用数据都可以使用。 自定义的类在没有重写Object中equals()方法的情况下&#xff0c;调用的就是Object类中声明的…

Docker搭建基于Nextcloud的个人云盘/私有云盘/个人相册/家庭NAS

安装配置Docker 官方安装文档&#xff1a;https://docs.docker.com/engine/install/ Docker常用命令&#xff1a;https://blog.csdn.net/qq_43003203/article/details/139532097?spm1001.2014.3001.5502 Docker镜像仓库配置方法和国内常用镜像仓库地址&#xff1a; 输入&a…

k8s 二进制部署安装(三)

目录 部署Calico Calico 工作原理 部署Calico 部署CoreDNS 负载均衡部署 部署dashboard 部署Calico 安装步骤来到 CNI 网络组件 &#xff0c;在&#xff08;二&#xff09;中我们安装了flannel&#xff0c;现在我们要尝试安装另一网络组件Calico calico 不使用隧道或NAT…

Spring Task—定时任务

Spring Task 是 Spring 提供的一种轻量级定时任务调度功能&#xff0c;内置在 Spring 框架中。与 Quartz 等重量级调度框架相比&#xff0c;Spring Task 使用简便&#xff0c;无需额外依赖&#xff0c;适合在简单的调度任务场景中使用。通过注解配置方式&#xff0c;开发者可以…

docker 安装 PostgreSQL

参考链接 https://hub.docker.com/_/postgres 安装 # 后台运行&#xff0c;镜像名称为 postgres # --name postgres 容器名称为 postgres # POSTGRES_PASSWORD 超级用户的密码&#xff0c;超级用户名默认为&#xff1a;postgres&#xff0c;可以使用 POSTGRES_USER 环境变量设…

Flink(一)

目录 架构处理有界与无界数据部署应用到任意地方运行任意规模应用利用内存性能 流应用流处理应用的基本组件流状态时间 应用场景事件驱动应用事件驱动应用的优势Flink如何支持事件驱动应用&#xff1f; 典型的事件驱动示例 数据分析应用流式分析应用的优势&#xff1f;Flink 如…

【数据结构和算法】三、动态规划原理讲解与实战演练

目录 1、什么是动态规划&#xff1f; 2、动态规划实战演练 2.1 力扣题之爬楼梯问题 &#xff08;1&#xff09;解题思路1: &#xff08;2&#xff09;解题思路2: &#xff08;3&#xff09;动态规划&#xff08;DP&#xff09;&#xff1a;解题思路 &#xff08;4&#x…

中天控股智慧园区项目

— 项目概况 — 项目名称&#xff1a;智慧园区项目 项目地点&#xff1a;云南省 合作单位&#xff1a;中天控股集团有限公司&#xff08;简称“中天控股”&#xff09; 汇匠源与中天控股集团有限公司&#xff08;简称“中天控股”&#xff09;曾在智慧园区项目展开合作&a…

前端自学资料(笔记八股)分享—CSS(4)

更多详情&#xff1a;爱米的前端小笔记&#xff08;csdn~xitujuejin~zhiHu~Baidu~小红shu&#xff09;同步更新&#xff0c;等你来看&#xff01;都是利用下班时间整理的&#xff0c;整理不易&#xff0c;大家多多&#x1f44d;&#x1f49b;➕&#x1f914;哦&#xff01;你们…

MySQL查看某个数据库里面每张表的字符集和字符排序集

字符集&#xff1a; 定义了MySQL中数据在硬盘上的存储方式。例如 utfmb3、utfmb4等。每个不同的字符集都拥有一个默认的字符排序集。 字符排序集&#xff1a; 定义了在数据库中进行字符串比较和排序的方式。 &#xff08;1&#xff09;比较字符串&#xff1a;确定两个字符串是否…

Git相关介绍

基本概念 关注&#xff08;watch&#xff09; 关注项目&#xff0c;当项目更新可以接收到通知 事物卡片&#xff08;Issue&#xff09; 发现代码BUG&#xff0c;但是目前没有成型代码&#xff0c;需要讨论时用 Git工作区域 工作区 添加、编辑、修改文件等动作 暂存区 …

坚持使用kimi搭建小程序2小时(04天/05天)

运用好kimi智能助手里面的存储小程序&#xff0c;{缺乏一个相对稳定的反馈体系&#xff0c;自己所挑选的稳定反馈体系就是编程!} 开源竞争&#xff1a; 当你无法彻底掌握一门技术的时候&#xff0c;就开源这门技术&#xff0c;培养出更多的技术依赖&#xff0c;让更多人完善你…