HTML5教程(一)- 网页与开发工具

news2024/12/25 1:15:00

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.coloradmin.cn/o/2224045.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Cout输出应用举例

Cout输出应用 在main.cpp里输入程序如下&#xff1a; #include <iostream> //使能cin(),cout(); #include <stdlib.h> //使能exit(); #include <sstream> #include <iomanip> //使能setbase(),setfill(),setw(),setprecision(),setiosflags()和res…

根据用户选择的行和列数据构造数据结构(跨行跨列)

方案一 这段代码的功能是根据用户选择的行和列数据&#xff0c;生成一个适合复制粘贴的字符串表格。代码会先按列的 id 从小到大排序&#xff0c;再根据行列的选择关系将数据按顺序填入表格&#xff0c;每行之间使用换行符分隔&#xff0c;每列之间使用制表符分隔。如果某一行…

【汇编语言】第一个程序(一)—— 一个源程序从写出到执行的过程

文章目录 前言1. 第一步&#xff1a;编写汇编源程序2. 第二步&#xff1a;对源程序进行编译连接3. 第三步&#xff1a;执行可执行文件中的程序结语 前言 &#x1f4cc; 汇编语言是很多相关课程&#xff08;如数据结构、操作系统、微机原理&#xff09;的重要基础。但仅仅从课程…

多元线性回归【正规方程/sklearn】

多元线性回归【正规方程/sklearn】 1. 基本概念1.1 线性回归1.2 一元简单线性回归1.3 最优解1.4 多元线性回归 2. 正规方程求最优解2.1 线性回归的损失函数&#xff08;最小二乘法&#xff09;2.2 推导正规方程2.3 正规方程练习2.4 使用sklearn计算多元线性方程2.5 凸函数 3. 线…

比例数据可视化(Python实现板块层级图绘制)——Instacart Market Basket Analysis

【实验名称】 实验一&#xff1a;绘制板块层级图 【实验目的】 1. 掌握数据文件读取 2. 掌握数据处理的方法 3. 实现板块层级图的绘制 【数据介绍】Instacart Market Basket Analysis 1. 数据说明 数据共有300 0000orders&#xff0c; 20 0000users&#xff0c; …

electron 打包

安装及配置 安装electron包以及electron-builder打包工具 # 安装 electron cnpm install --save-dev electron # 安装打包工具 cnpm install electron-builder -D 参考的package.json文件 其中description和author为必填项目 {"name": "appfile",&qu…

十一、数据库配置

一、Navicat配置 这个软件需要破解 密码是&#xff1a;123456&#xff1b; 新建连接》新建数据库 创建一个表 保存出现名字设置 双击打开 把id设置为自动递增 这里就相当于每一次向数据库添加一个语句&#xff0c;会自动增长id一次 二、数据库的增删改查 1、Vs 建一个控…

C# 创建型设计模式----工厂模式

1 、什么是工厂模式 简单来说就是由一个对象去生成不同的对象&#xff0c;工厂模式是用工厂方法代替new操作的一种模式。工厂方法封装了多个相关联类的new方法&#xff0c;每次实例化这些类的时候不需要new多次&#xff0c;只需要调用工厂类的对应方法即可实例化这些类&#x…

2024年项目管理新风向:敏捷开发与瀑布开发,哪个更优?

一、项目管理的多样格局 2024 年&#xff0c;项目管理领域展现出丰富多样的格局。数字化趋势愈发明显&#xff0c;项目管理软件普及度不断提高&#xff0c;据相关资料显示&#xff0c;随着云计算、大数据等技术的成熟&#xff0c;项目管理软件将更加普及&#xff0c;实现项目信…

单片机_RTOS__架构概念

经典单片机程序 void main() {while(1){函数1&#xff08;&#xff09;&#xff1b;函数2&#xff08;&#xff09;&#xff1b;}} 有无RTOS区别 裸机 RTOS RTOS程序 喂饭&#xff08;&#xff09; {while&#xff08;1&#xff09;{喂一口饭&#xff08;&#xff09;;} } …

容灾与云计算概念

​​​​​​基础知识容灾备份——备份技术系统架构与备份网络方案-CSDN博客 SAN&#xff0c;是storage area network的简称&#xff0c;翻译过来就是存储区域网络。 顾名思义&#xff0c;SAN首先是一个网络&#xff0c;其次它是关于存储的&#xff0c;区域则是指服务器和存储资…

【C语言】控制台学生成绩管理系统

文章目录 C语言编程&#xff1a;学生成绩管理系统一、程序概述二、代码实现三、程序解释 C语言编程&#xff1a;学生成绩管理系统 在这篇文章中&#xff0c;我们将一起探讨如何使用C语言来创建一个简单的学生成绩管理系统。这个系统将允许用户输入学生数量、学号和成绩&#x…

气膜娱乐馆:科技与自然的完美结合—轻空间

在这片拥有独特滨海风光和丰富旅游资源的地方&#xff0c;气膜娱乐馆应运而生&#xff0c;为游客和当地居民打造了一个集运动、娱乐、亲子游乐和科技互动于一体的综合性室内娱乐体验。 灵活空间&#xff0c;舒适体验 气膜结构为娱乐馆提供了广阔的空间灵活性&#xff0c;使其能…

【Markdown速成】半小时入门Markdown教程(后缀.md文件详解)

目录 一.认识Markdown Markdown Typora 二.Typora设置 三.Markdown语法 1.标题 2.正文 2.1分割线 2.2删除线 2.3下划线 2.4斜体 2.5粗体 2.6斜粗体 2.7高亮 2.8字体属性&#xff08;大小及颜色&#xff09; 2.9对齐方式 2.10引用 3.列表 有序列表 无序列表 …

steam新品节!GameViewr远程随时随地手机平板玩主机游戏教程

Steam平台在10月14日迎来了新品节&#xff0c;你可以尝试即将推出的游戏的免费试用版&#xff0c;将他们加入愿望单&#xff0c;像是《迷失之径》《贪婪大地》《疯狂手机大亨》等等。不知道大家是否已经选择好自己心怡的游戏呢&#xff1f;要是你想随时随地体验steam新品节的游…

大一物联网要不要转专业,转不了该怎么办?

有幸在2014年&#xff0c;踩中了物联网的风口&#xff0c;坏消息&#xff0c;牛马的我&#xff0c;一口汤都没喝上。 依稀记得&#xff0c;当时市场部老大&#xff0c;带我去上海参加电子展会&#xff0c;印象最深的&#xff0c;一些物联网云平台&#xff0c;靠着一份精美PPT&a…

Visual studio 下载安装

1&#xff0c;Visual stutdio 网址 下载 Visual Studio Tools - 免费安装 Windows、Mac、Linux 2&#xff0c;下划页面&#xff0c;点击 较早的下载 3&#xff0c;选择对应的版本进行下载

IDEA关联Tomcat——最新版本IDEA 2024

1.链接Tomcat到IDEA上 添加Tomcat到IDEA上有两种方式&#xff1a; 第一种&#xff1a; &#xff08;1&#xff09;首先&#xff0c;来到欢迎界面&#xff0c;找到左侧的Customize选项 &#xff08;2&#xff09;然后找到Build、Execution、Deployment选项 &#xff08;3&am…

LabVIEW中句柄与引用

在LabVIEW中&#xff0c;句柄&#xff08;Handle&#xff09; 是一种用于引用特定资源或对象的标识符。它类似于指针&#xff0c;允许程序在内存中管理和操作复杂的资源&#xff0c;而不需要直接访问资源本身。句柄用于管理动态分配的资源&#xff0c;如队列、文件、网络连接、…

使用query-string库出现错误Module parse failed: Unexpected token

环境 node v12query-string 9.1.0 报错信息 Failed to compile../node_modules/query-string/base.js 350:14 Module parse failed: Unexpected token (350:14) File was processed with these loaders:* ./node_modules/babel-loader/lib/index.js You may need an additio…