当前位置： 首页 > news >正文

Web认识 -- 第一课

news 2026/2/10 3:08:36

文章目录

  • 前言
  • 一、HTML是什么？
  • 二、了解Web
    • 1. 基本概念
    • 2.Web标准
    • 3. Web构成
      • 1.前端
        • 1. HTML
        • 2.CSS
        • 3. javaScript
        • 4.常见浏览器介绍
      • 2.Web标签构成
        • 1.结构标准
        • 2.表现标准 -- css
        • 3. 行为标准 -- javaScript
  • 总结

前言

这里是我们进入前端学习的开端,在本次更新之后我会陆续上传html,css,javaScript等相关语言的教程,有感兴趣的小伙伴们点点关注,未来我们一起学习!

一、HTML是什么？

HTML（Hypertext Markup Language）是一种用于创建网页的标记语言。它使用各种标签和属性来描述网页的结构和内容。HTML文件由一系列标签组成，每个标签由一对尖括号包围，例如。标签可以包含文本内容，也可以包含其他标签，形成嵌套结构。

HTML的主要作用是定义网页的结构，包括标题、段落、列表、链接等。它还可以插入图像、音频、视频等多媒体元素。HTML使用CSS（Cascading Style Sheets）来定义网页的样式和布局，可以控制字体、颜色、背景等外观效果。最新的HTML版本是HTML5，它引入了许多新的元素和特性，如视频和音频的内置支持、Canvas绘图等。

通过使用HTML，开发人员可以创建结构清晰、可读性强的网页，使其易于维护和修改。HTML的代码可以使用任何文本编辑器编写，并由Web浏览器解析和显示。

二、了解Web

1. 基本概念

  1. 网页（Web Page）：网页是Web上的基本单位，由HTML、CSS、JavaScript等技术创建。它可以包含文本、图像、链接和其他多媒体元素。

  2. 网站（Website）：网站是包含多个网页的集合，通常具有共同的主题或目的。网站可以包含主页、子页面、导航菜单等元素。

  3. URL（Uniform Resource Locator）：URL是用于唯一标识Web资源的地址。它由协议（如http或https）、域名、路径和查询参数组成。

  4. 浏览器（Web Browser）：浏览器是用于访问和显示Web内容的软件应用程序。常见的浏览器有Chrome、Firefox、Safari等。

  5. 服务器（Server）：服务器是存储和提供Web内容的计算机系统。它接收来自客户端浏览器的请求，并返回相应的网页或数据。

  6. 网络协议（Protocols）：网络协议是规定数据在网络中传输和交换方式的规则。常见的Web协议包括HTTP（HyperText Transfer Protocol）和HTTPS（HTTP Secure）。

  7. 超链接（Hyperlink）：超链接是在网页中提供跳转至其他网页或资源的链接。它可以是文本、图像或其他元素。

  8. 动态网页（Dynamic Web Page）：动态网页是根据用户请求生成的网页，通常使用服务器端脚本语言（如PHP、Python）和数据库来实现。

  9. 静态网页（Static Web Page）：静态网页是预先创建并存储在服务器上的网页，内容在访问时不会改变。

  10. CMS（Content Management System）：内容管理系统是一种用于创建、编辑和管理网站内容的软件，如WordPress、Joomla等。

2.Web标准

Web标准是指在设计和开发网页时遵循的一套规范和约定。这些规范和约定旨在确保网页在不同浏览器和平台上的一致性表现，并提供更好的可访问性、可维护性和可扩展性。

Web标准涵盖了多个方面，包括HTML（超文本标记语言）、CSS（层叠样式表）、JavaScript等技术标准。它们定义了网页的结构、样式和行为的规范，使得网页能够以一种统一的方式呈现给用户。

3. Web构成

1.前端

1. HTML

HTML（英文Hyper Text Markup Language的缩写）中文译为“超文本标记语言”，主要是通过HTML标记对网页中的文本、图片、声音等内容进行描述。
在这里插入图片描述

2.CSS

css通常称为CSS样式或层叠样式表，主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式

3. javaScript

JavaScript是Web页面中的一种脚本语言，通过JavaScript可以将静态页面转变成支持用户交互并响应相应事件的动态页面。在网站建设中，JavaScript用于为页面添加动态效果。

4.常见浏览器介绍

IE、火狐和谷歌是目前互联网上的三大浏览器，其他常用的浏览器还有苹果的Safari浏览器和欧朋浏览器等。对于一般的网站，只要兼容IE浏览器、火狐浏览器和谷歌浏览器，就能满足绝大多数用户的需求。

2.Web标签构成

1.结构标准

结构标准用于对网I页元素进行整理和分类，主要包括两个部分：XML和XHTML。
请添加图片描述

2.表现标准 – css

表现标准用于设置网页元素的版式、颜色、大小等外观样式，主要指的是css.请添加图片描述

3. 行为标准 – javaScript

行为标准是指网页模型的定义及交互的编写，主要包括两个部分：DOM和ECMAScript.
请添加图片描述

总结

本节主要简单介绍了一下关于HTML、CSS、JavaScript的一些基本概念,有感兴趣的朋友,点点关注我们一起学习,博主持续更新中!

相关文章：

Web认识 -- 第一课

文章目录 前言一、HTML是什么？二、了解Web1. 基本概念2.Web标准3. Web构成1.前端1. HTML2.CSS3. javaScript4.常见浏览器介绍 2.Web标签构成1.结构标准2.表现标准 -- css3. 行为标准 -- javaScript 总结 前言 这里是我们进入前端学习的开端,在本次更新之后我会陆续…...

编程日记 2024/10/1 10:15:21

Recaptcha2 图像识别 API 对接说明

Recaptcha2 图像识别 API 对接说明 本文将介绍一种 Recaptcha2 图像识别2 API 对接说明，它可以通过用户输入识别的内容和 Recaptcha2验证码图像，最后返回需要点击的小图像的坐标，完成验证。 接下来介绍下 Recaptcha2 图像识别 API 的对接说…...

编程日记 2024/10/1 10:13:19

6种MySQL高可用方案对比分析

大家好，我是 V 哥，关于 MySQL 高可用方案，在面试中频频出现，有同学在字节面试就遇到过，主要考察你在高可用项目中是如何应用的，V 哥整理了6种方案，供你参考。 MySQL的高可用方案有多种&#xf…...

编程日记 2024/10/1 10:11:16

FastAPI: websocket的用法及举例

1. Websocket 1.1 Websocket介绍 WebSocket 是一种在单个TCP连接上进行全双工通信的协议，允许客户端和服务器之间相互发送数据，而不需要像传统的HTTP请求-响应模型那样频繁建立和断开连接。 全双工通信(Full-Duplex Communication)是一种通信模式&#…...

编程日记 2024/10/1 10:09:14

JavaSE——面向对象2：方法的调用机制、传参机制、方法递归、方法重载、可变参数、作用域

目录 一、成员方法 (一)方法的快速入门 (二)方法的调用机制(重要) (三)方法的定义 (四)注意事项和使用细节 1.访问修饰符(作用是控制方法的使用范围) 2.返回的数据类型 3.方法名 4.形参列表 5.方法体 6.方法调用细节说明 (五)传参机制 1.基本数据类型的传参机制 …...

编程日记 2024/10/1 10:08:14

Vue+Flask

App.vue 首先要安装 npm install axios<template><div><h1>{{ message }}</h1><input v-model"name" placeholder"Enter your name" /><input v-model"age" placeholder"Enter your age" /><…...

编程日记 2024/10/1 10:07:12

深入剖析 Android Lifecycle：构建高效稳定的应用

在 Android 开发中&#xff0c;管理应用组件的生命周期是至关重要的。正确处理生命周期事件可以确保应用的性能、稳定性和用户体验。Android Framework 提供了一系列的机制来管理应用组件的生命周期&#xff0c;而android.arch.lifecycle库则为我们提供了更简洁、更灵活的方式来…...

编程日记 2024/10/1 10:06:12

ElasticSearch分词器、相关性详解与聚合查询实战

目录 1. ES分词器详解 1.1 基本概念 1.2 分词发生时期 1.3 分词器的组成 切词器&#xff1a;Tokenizer 词项过滤器&#xff1a;Token Filter 字符过滤器&#xff1a;Character Filter 1.4 倒排索引的数据结构 2. 相关性详解 2.1 什么是相关性&#xff08;Relevance&am…...

编程日记 2024/10/1 10:05:11

删除二叉树中以x为根节点的子树（包括根结点）

已知二叉树以二叉链表存储&#xff0c;编写算法完成&#xff1a;对于树中每个元素值为x的结点&#xff0c;删除以它为根的子树&#xff0c;并释放相应的空间。 思想&#xff1a; 删除二叉树采用后序遍历。先删除左子树&#xff0c;然后右子树&#xff0c;最后根。 利用层次遍…...

编程日记 2024/10/1 10:03:09

Netty 与 WebSocket之间的关系

WebSocketProtocolHandler 和 Netty 在处理 WebSocket 连接时扮演不同的角色&#xff0c;但它们通常是一起使用的&#xff0c;尤其是在基于 Netty 的项目中。为了更好地理解它们之间的区别&#xff0c;我们首先需要了解 WebSocket 和 Netty 的基本概念。 WebSocket WebSocket…...

编程日记 2024/10/1 9:59:05

通信工程学习：什么是CSMA/CA载波监听多路访问/冲突避免

CSMA/CA&#xff1a;载波监听多路访问/冲突避免 CSMA/CA&#xff08;Carrier Sense Multiple Access/Collision Avoidance&#xff09;&#xff0c;即载波监听多路访问/冲突避免&#xff0c;是一种用于数据传输时避免各站点之间冲突的算法&#xff0c;尤其适用于无线局域网&…...

编程日记 2024/10/1 9:58:04

JAVA并发编程系列(13)Future、FutureTask异步小王子

美团本地生活面试&#xff1a;模拟外卖订单处理&#xff0c;客户支付提交订单后&#xff0c;查询订单详情&#xff0c;后台需要查询店铺备餐进度、以及外卖员目前位置信息后再返回。 时间好快&#xff0c;一转眼不到一个月时间&#xff0c;已经完成分享synchronized、volatile、…...

编程日记 2024/10/1 9:57:03

【python爬虫可以获取到谷歌影像吗？】如何有效下载谷歌影像？

【python爬虫可以获取到谷歌影像吗&#xff1f;】如何有效下载谷歌影像&#xff1f; 【python爬虫可以获取到谷歌影像吗&#xff1f;】如何有效下载谷歌影像&#xff1f; 文章目录 【python爬虫可以获取到谷歌影像吗&#xff1f;】如何有效下载谷歌影像&#xff1f;前言1. 使用…...

编程日记 2024/10/1 9:56:02

Windows 上安装 PostgreSQL

Windows 上安装 PostgreSQL PostgreSQL 是一款功能强大的开源关系数据库管理系统，广泛用于各种应用场景。在 Windows 系统上安装 PostgreSQL 相对简单，但需要遵循一系列步骤。本文将详细介绍在 Windows 上安装 PostgreSQL 的过程，并提供一些关键的配置和优化建议。 一、下…...

编程日记 2024/10/1 9:53:59

Vue 技术进阶 day2 数据监视的原理、其他内置指令、自定义指令、生命周期、组件化、VueComponent构造函数

目录 1.Vue监测数据的原理 1.1 原理 1.1.1 数据劫持 1.1.2 观察者模式(Vue内部的实现) 1.1.3 更新组件 1.1.4 计算属性和侦听器 1.2 后添加属性做响应式&#xff08;Vue.set / vm.$set&#xff09; 1.3 对象和数组的响应式 1.4 数据监视案例 2.指令 2.1 内置指令 2.…...

编程日记 2024/10/1 9:52:58

vue.js 原生js app端实现图片旋转、放大、缩小、拖拽

效果图&#xff1a; 旋转 放大&#xff1a;手机上可以双指放大缩小 拖拽 代码实现&#xff1a; html <div id"home" class"" v-cloak><!-- 上面三个按钮 图片自己解决 --><div class"headImage" v-if"showBtn">&l…...

编程日记 2024/10/1 9:51:57

MyBatis的注入问题

对之前文章的补充&#xff1a;MyBatis中的#{}与${}注入问题----原文链接 前言&#xff1a; MyBatis是一个流行的Java持久层框架&#xff0c;用于将对象与数据库中的数据进行映射。然而&#xff0c;如果不当使用&#xff0c;MyBatis也可能受到诸如SQL注入这类的安全问题的影响。…...

编程日记 2024/10/1 9:47:52

基于springboot的评分评教管理系统

&#x1f449;文末查看项目功能视频演示获取源码sql脚本视频导入教程视频 1 、功能描述 基于springboot的评分评教管理系统1拥有三种角色 管理员&#xff1a;评价管理、学生管理、评分指标管理、课程管理、教师管理、管理员管理等教师&#xff1a;课程管理、学生管理、个人信…...

编程日记 2024/10/1 9:46:51

C嘎嘎入门篇：类和对象（2）

前言&#xff1a; 上一篇小编讲了类和对象&#xff08;1&#xff09;&#xff0c;当然&#xff0c;在看这篇文章之前&#xff0c;读者朋友们一定要掌握好前面的基础内容&#xff0c;因为这篇和前面息息相关&#xff0c;废话不多说&#xff0c;下面小编就加快步伐&#xff0c;开…...

编程日记 2024/10/1 9:45:51

数据库 - Mongo数据库

目录 前言 一、MongoDB的特点 二、Mongo的核心概念 三、MongoDB的优劣势 四、使用场景 五、MongoDB与其他数据库的对比 六、如何安装MongoDB 七、数据库指令操作 &#xff08;一&#xff09;基本数据库操作 &#xff08;1&#xff09;连接 MongoDB &#xff08;2&am…...

编程日记 2024/10/1 9:43:48

java_网络服务相关_gateway_nacos_feign区别联系

1. spring-cloud-starter-gateway 作用&#xff1a;作为微服务架构的网关&#xff0c;统一入口&#xff0c;处理所有外部请求。 核心能力&#xff1a; 路由转发&#xff08;基于路径、服务名等&#xff09;过滤器&#xff08;鉴权、限流、日志、Header 处理&#xff09;支持负…...

编程新知 2025/11/28 2:51:33

python打卡day49

知识点回顾&#xff1a; 通道注意力模块复习空间注意力模块CBAM的定义 作业&#xff1a;尝试对今天的模型检查参数数目&#xff0c;并用tensorboard查看训练过程 import torch import torch.nn as nn# 定义通道注意力 class ChannelAttention(nn.Module):def __init__(self,…...

编程新知 2026/2/7 5:37:17

线程与协程

1. 线程与协程 1.1. “函数调用级别”的切换、上下文切换 1. 函数调用级别的切换 “函数调用级别的切换”是指&#xff1a;像函数调用/返回一样轻量地完成任务切换。 举例说明&#xff1a; 当你在程序中写一个函数调用&#xff1a; funcA() 然后 funcA 执行完后返回&…...

编程新知 2025/10/31 17:25:40

江苏艾立泰跨国资源接力：废料变黄金的绿色供应链革命

在华东塑料包装行业面临限塑令深度调整的背景下&#xff0c;江苏艾立泰以一场跨国资源接力的创新实践&#xff0c;重新定义了绿色供应链的边界。 跨国回收网络&#xff1a;废料变黄金的全球棋局 艾立泰在欧洲、东南亚建立再生塑料回收点&#xff0c;将海外废弃包装箱通过标准…...

编程新知 2026/1/31 13:42:15

【android bluetooth 框架分析 04】【bt-framework 层详解 1】【BluetoothProperties介绍】

1. BluetoothProperties介绍 libsysprop/srcs/android/sysprop/BluetoothProperties.sysprop BluetoothProperties.sysprop 是 Android AOSP 中的一种 系统属性定义文件&#xff08;System Property Definition File&#xff09;&#xff0c;用于声明和管理 Bluetooth 模块相…...

编程新知 2025/11/22 12:02:51

Cloudflare 从 Nginx 到 Pingora：性能、效率与安全的全面升级

在互联网的快速发展中&#xff0c;高性能、高效率和高安全性的网络服务成为了各大互联网基础设施提供商的核心追求。Cloudflare 作为全球领先的互联网安全和基础设施公司&#xff0c;近期做出了一个重大技术决策&#xff1a;弃用长期使用的 Nginx&#xff0c;转而采用其内部开发…...

编程新知 2026/1/29 21:20:51

CMake 从 GitHub 下载第三方库并使用

有时我们希望直接使用 GitHub 上的开源库，而不想手动下载、编译和安装。 可以利用 CMake 提供的 FetchContent 模块来实现自动下载、构建和链接第三方库。 FetchContent 命令官方文档✅ 示例代码 我们将以 fmt 这个流行的格式化库为例，演示如何： 使用 FetchContent 从 GitH…...

编程新知 2026/2/1 3:19:54

算法笔记2

1.字符串拼接最好用StringBuilder&#xff0c;不用String 2.创建List<>类型的数组并创建内存 List arr[] new ArrayList[26]; Arrays.setAll(arr, i -> new ArrayList<>()); 3.去掉首尾空格...

编程新知 2026/1/27 12:17:05

作为测试我们应该关注redis哪些方面

1、功能测试 数据结构操作&#xff1a;验证字符串、列表、哈希、集合和有序的基本操作是否正确 持久化&#xff1a;测试aof和aof持久化机制&#xff0c;确保数据在开启后正确恢复。 事务&#xff1a;检查事务的原子性和回滚机制。 发布订阅&#xff1a;确保消息正确传递。 2、性…...

编程新知 2025/11/1 2:00:51

libfmt: 现代C++的格式化工具库介绍与酷炫功能

libfmt: 现代C的格式化工具库介绍与酷炫功能 libfmt 是一个开源的C格式化库&#xff0c;提供了高效、安全的文本格式化功能&#xff0c;是C20中引入的std::format的基础实现。它比传统的printf和iostream更安全、更灵活、性能更好。 基本介绍 主要特点 类型安全&#xff1a…...

编程新知 2025/9/14 12:09:11