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

Web前端入门

news 2026/2/9 2:48:24

文章目录

  • 前言
  • 1 Web前端概述
    • 1.1 网站和网页
    • 1.2 HTML语言
    • 1.3 网页的形成
    • 1.4 常用浏览器
    • 1.5 浏览器内核（渲染引擎)
    • 1.6 web标准
  • 2 HTML标签
    • 2.1 开发工具
    • 2.2 HTML语法规则
    • 2.3 标签的关系
    • 2.4 HTML注释标签
    • 2.5 结构标签
  • 3 常用标签
    • 3.1 标题标签
    • 3.2 段落标签
    • 3.3 换行标签
    • 3.4 文本格式化标签
    • 3.5 div和span标签

前言

“贾谊上书忧汉室，长沙谪去古今怜”    —刘长卿 《自夏口至鹦鹉洲夕望岳阳寄源中丞》

在这里插入图片描述

1 Web前端概述

1.1 网站和网页

  • 网站：是使用 HTML等制作的用于展示特定内容相关的网页集合。

  • 网页：是网站中的一页，通常是 HTML格式的文件，它要通过浏览器来阅读。

  • 网页构成：通常由图片、链接、文字、声音、视频等元素组成。

1.2 HTML语言

  • HTML：指的是超文本标记语言 (Hyper Text Markup Language) ，它是用来描述网页的一种语言。
  • 超文本：即超越了文本限制，可以加入图片、声音、动画、多媒体等内容
  • 标记语言：语法是由一套标记标签构成的。

注意：HTML 不是一种编程语言，而是一种标记语言 (markup language)。

1.3 网页的形成

  • 前端人员开发代码
  • 浏览器解析显示代码（也称为渲染）
  • 生成最后的 Web 页面

1.4 常用浏览器

浏览器是网页显示、运行的平台。常用的浏览器有 IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等。平时称为五大浏览器。
在这里插入图片描述

1.5 浏览器内核（渲染引擎)

        浏览器内核(渲染引擎)：负责读取网页内容，整理讯息，计算网页的显示方式并显示页面

浏览器内核备注
IETridentIE、360极速浏览器、百度浏览器
firefoxGecko火狐浏览器
SafariWebkit苹果浏览器
chrome/OperaBlinkchrome/opera浏览器

1.6 web标准

Web 标准是由 W3C 组织和其他标准化组织制定的一系列标准的集合。W3C（万维网联盟）是国际最著名的标准化组织。

1. 为什么需要Web标准？

  • 浏览器不同，它们显示页面或者排版就有些许差异
  • 遵循 Web 标准可以让不同的开发人员写出的页面更标准、更统一。

2. web标准的构成

       主要包括 《结构Structure》 、《表现（Presentation）》和《行为（Behavior）》三个方面。

标准说明备注
结构结构主要是即网页的整体框架，即HTML结构类似于身体
表现表现主要是网页的外观样式，即CSS表现类似于外观
行为行为主要是网页的交互，及JavaScript行为类似于行为

在这里插入图片描述

2 HTML标签

2.1 开发工具

web前端的开发工具推荐使用微软公司的VSCode，使用步骤如下：

       1.下载open in browser插件。

       2.新建文件，以.html结尾。

       3.生成页面骨架结构。 输入!按下 Tab/enter键。

       4.保存（Ctrl + S ）,记住每次写完代码必须保存。

       5.空白位置单击鼠标右键，在弹出窗口中点击“Open In Default Browser”。

2.2 HTML语法规则

  • HTML标签：是由尖括号包围的关键词，例如 <html>
  • 双标签：HTML标签通常是成对出现的，例如 <html> 和 </html> ，标签中第一个是开始标签，第二个是结束标签
  • 单标签：有些特殊的标签必须是单个标签（极少情况），例如<br/>

2.3 标签的关系

       双标签关系可以分为两类：包含关系和并列关系

// 1.包含标签
<head>  <title> </title> 
</head>// 2.并列标签
<head> </head>
<body> </body>

2.4 HTML注释标签

       HTML注释标签：<!-- 注释内容 -->

       快捷键：Ctrl + /

2.5 结构标签

       每个网页都会有一个基本的结构标签（也称为骨架标签），页面内容也是在这些基本标签上书写

       1. 标签说明

标签名说明
<html></html>根标签
<head></head>文档的头部
<title></title>文档的标题
<body></body>文档的主体

       2. 代码演示

<!-- 1.文档类型声明标签,告诉浏览器这个页面采取html5版本来显示页面.-->
<!DOCTYPE html>
<!-- 2.用来定义当前文档显示的语言。en定义语言为英语zh-CN定义语言为中文-->
<html lang="en"><head><!-- 3.指定文档编码为UTF-8--><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>页面标题</title>
</head><body>流光飒沓,世事朦胧
</body></html>

       3. 图片演示

在这里插入图片描述

3 常用标签

3.1 标题标签

       标题标签有6个，即<h1>~<h6>,字体依次变小，代码示例如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>页面标题</title>
</head><body><h1>一号标题</h1><h2>二号标题</h2><h3>三号标题</h3><h4>四号标题</h4><h5>五号标题</h5><h6>六号标题</h6>
</body></html>

3.2 段落标签

       在HTML标签中，<p>标签用于定义段落，它可以将整个网页分为若干个段落,代码示例如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>页面标题</title>
</head><body><p>我是一个段落标签</p>
</body></html>

3.3 换行标签

       在HTML中，换行标签是一个但标签，即<br/>

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>页面标题</title>
</head><body>我很想看到渐次泛白的黎明时分的天宇，<br/>想喝热气腾腾的牛奶，<br/>想闻树木的清香，<br/>想翻晨报的版面。<br/>山川寂寥，<br/>街市井然，<br/>居民相安无事。<br/>可惜人无身影，<br/>无记忆，<br/>无心。
</body></html>

3.4 文本格式化标签

       在网页中，有时需要为文字设置粗体、斜体 或下划线等效果，这时就需要用到HTML中的文本格式化标签，使文字以特殊的方式显示。

       1. 文本格式化标签

语义标签说明
加粗<strong></strong>或者<b></b>建议使用<strong></strong>
倾斜<em></em>或者<i></i>建议使用<em></em>
删除线<del></del>或者<s></s>建议使用<del></del>
下划线<ins></ins>或者<u></u>建议使用<ins></ins>

       2. 代码演示

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>页面标题</title>
</head><body><strong>举世皆浊我独清，众人皆醉我独醒</strong><br /><em>举世皆浊我独清，众人皆醉我独醒</em><br /><del>举世皆浊我独清，众人皆醉我独醒</del><br /><ins>举世皆浊我独清，众人皆醉我独醒</ins>
</body></html>

3.5 div和span标签

在HTML中，<div>和<span>是没有语义的，它们就是一个盒子，用来装内容的

特点：大盒子：<div>标签一行只能一个；

           小盒子：<span>标签一行可以多个；

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>页面标题</title>
</head><body><div>从别后，忆相逢，几回魂梦与君同。</div><span>从别后，忆相逢，几回魂梦与君同。</span><span>从别后，忆相逢，几回魂梦与君同。</span>
</body></html>

相关文章：

Web前端入门

文章目录 前言1 Web前端概述1.1 网站和网页1.2 HTML语言1.3 网页的形成1.4 常用浏览器1.5 浏览器内核&#xff08;渲染引擎)1.6 web标准 2 HTML标签2.1 开发工具2.2 HTML语法规则2.3 标签的关系2.4 HTML注释标签2.5 结构标签 3 常用标签3.1 标题标签3.2 段落标签3.3 换行标签3.…...

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

贝塞尔曲线详细讲解，如何用 Canvas 绘制三阶贝塞尔曲线？

比如我们要画一个这样的曲线&#xff0c;我们该怎么画了 两个点Y轴一样高&#xff0c;起点&#xff1a;&#xff08;200,100&#xff09;终点&#xff1a;&#xff08;300&#xff0c;100&#xff09;中间的弧度怎么弄了&#xff1f; <canvas id"c1" width"6…...

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

Ubuntu20.04卸载ros2 foxy版本安装ros1 noetic版本

前言 如果你ubuntu中没有ros&#xff0c;可以试着直接从鱼香ros一键安装包指令处开始。 卸载ros2 sudo apt-get remove ros-*接下来如果你直接使用鱼香ros的一键安装命令&#xff0c;会出错。 设置源 设置源&#xff0c;这里使用的是中科大的。 sudo sh -c . /etc/lsb-r…...

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

PicGo+Gitee搭建Typora图床

PicGoGitee搭建Typora图床 下载PicGo 下载链接&#xff1a;https://picgo.github.io/PicGo-Doc/zh/guide/#%E4%B8%8B%E8%BD%BD%E5%AE%89%E8%A3%85 配置PicGo 插件安装 在PicGo的【插件设置】中搜索gitee-uploader插件并安装 在【图床设置】下配置Gitee repo&#xff1a;用…...

编程日记 2024/10/10 15:11:04

MySQL 脱敏函数使用详解：保护数据隐私的关键手段

全文目录&#xff1a; 前言前言为什么需要数据脱敏&#xff1f;MySQL 中常用的脱敏方法1. 字符串类型数据的脱敏案例&#xff1a;脱敏姓名案例&#xff1a;脱敏邮箱 2. 数字类型数据的脱敏案例&#xff1a;脱敏手机号案例&#xff1a;脱敏身份证号 3. 自定义脱敏函数自定义姓名…...

编程日记 2024/10/10 15:10:03

nginx之virtual host

vhost 是“virtual host”的缩写&#xff0c;中文译为“虚拟主机”。在Web服务器&#xff08;如Nginx、Apache等&#xff09;中&#xff0c;虚拟主机是指在同一台物理服务器上运行多个独立的网站或应用程序的技术。每个虚拟主机都有自己的域名、文档根目录、配置文件等&#xf…...

编程日记 2024/10/10 15:07:58

Windows 下纯手工打造 QT 开发环境

用过 QtCreator 和 VS QT 插件&#xff0c;都觉得不是很理想。所以有了这个想法。 手工打造的 QT 的开发环境&#xff0c;是不需要安装上面两个程序的。 1、下载 vcpkg&#xff0c;编译 QT6 下载地址&#xff1a;https://github.com/microsoft/vcpkg.git 进入到 …...

编程日记 2024/10/10 15:06:57

k8s的安装和部署

配置三台主机&#xff0c;分别禁用各个主机上的swap&#xff0c;并配置解析 systemctl mask swap.target swapoff -a vim /etc/fstab配置这三个主机上的主机以及harbor仓库的主机 所有主机设置docker的资源管理模式为system [rootk8s-master ~]# vim /etc/docker/daemon.json…...

编程日记 2024/10/10 15:05:56

第十八篇：一文说清楚ICMP的底层原理

作为程序员或者网络工程师&#xff0c;有时候无法访问对方主机&#xff1b;导致这个现象的有很多原因&#xff0c;那要排查具体的网络原因&#xff0c;可能会用到ping的指令。而ping的底层实现是互联⽹控制报⽂协议&#xff08;ICMP&#xff09;。 ICMP 全称是 Internet Contr…...

编程日记 2024/10/10 15:02:51

【优选算法】（第三十二篇）

目录 ⼆进制求和&#xff08;easy&#xff09; 题目解析 讲解算法原理 编写代码 字符串相乘&#xff08;medium&#xff09; 题目解析 讲解算法原理 编写代码 ⼆进制求和&#xff08;easy&#xff09; 题目解析 1.题目链接&#xff1a;. - 力扣&#xff08;LeetCode&a…...

编程日记 2024/10/10 15:01:50

线程（四）线程的同步——条件变量

文章目录 线程线程的同步和互斥线程同步--条件变量什么是线程同步示例--条件变量的使用示例--使用两个线程对同一个文件进行读写示例--一个读者一个写者使用条件变量来实现同步 线程 线程的同步和互斥 线程同步–条件变量 是一个宏观概念&#xff0c;在微观上包含线程的相互…...

编程日记 2024/10/10 14:59:45

二维数组的旋转与翻转（C++）（上（这只是简单讲解））

二维数组的旋转与翻转&#xff08;C&#xff09; 引言 在计算机科学中&#xff0c;二维数组是一种常见的数据结构&#xff0c;广泛应用于图像处理、数据挖掘、机器学习等多个领域。二维数组的旋转与翻转是处理二维数据时经常需要用到的操作。本文将详细介绍二维数组的旋转与翻…...

编程日记 2024/10/10 14:56:41

【在Linux世界中追寻伟大的One Piece】System V共享内存

目录 1 -> System V共享内存 1.1 -> 共享内存数据结构 1.2 -> 共享内存函数 1.2.1 -> shmget函数 1.2.2 -> shmot函数 1.2.3 -> shmdt函数 1.2.4 -> shmctl函数 1.3 -> 实例代码 2 -> System V消息队列 3 -> System V信号量 1 -> Sy…...

编程日记 2024/10/10 14:55:40

【大数据】Spark弹性分布式数据集RDD详细说明

文章目录 整体介绍一、定义与特性二、操作与转换三、存储级别与持久化四、依赖关系与容错机制五、优化与性能调优 常见操作支持的数据格式1.文本文件 (Text Files)2. CSV 文件3. JSON 文件4. Parquet 文件5. Sequence Files6.Hadoop文件读取A. 读取HDFS上的文本文件B. 使用Hado…...

编程日记 2024/10/10 14:54:38

人参玉桂膏简介

一、产品基本信息 产品名称&#xff1a;人参玉桂膏 产品类别&#xff1a;植物饮料&#xff08;专为特定体质设计&#xff09; 配料&#xff1a;精选薏苡仁、荷叶、玉米须、赤小豆等纯然植物成分&#xff0c;辅以麦芽糖醇液、低聚果糖调节口感&#xff0c;陈皮、肉桂、人参&…...

编程日记 2024/10/10 14:52:36

消费者Rebalance机制

优质博文&#xff1a;IT-BLOG-CN 一、消费者Rebalance机制 在Apache Kafka中&#xff0c;消费者组 Consumer Group会在以下几种情况下发生重新平衡Rebalance&#xff1a; 【1】消费者加入或离开消费者组&#xff1a; 当一个新的消费者加入消费者组或一个现有的消费者离开消费…...

编程日记 2024/10/10 14:48:29

消息队列介绍

一、ActiveMQ 优点&#xff1a;性能单台&#xff08;6000&#xff09;成熟&#xff0c;已经在很多公司得到应用。各种协议支持好&#xff0c;有多个语言的成熟客户端 缺点&#xff1a;性能较弱&#xff0c;缺乏大规模吞吐的场景的应用&#xff0c;有江河日下之感 二、RabbitMQ…...

编程日记 2024/10/10 14:47:27

告别@Value，Spring Boot 3.3更优雅的配置注入方案

在Spring Boot的早期版本中&#xff0c;我们常使用Value注解来注入配置文件中的属性值。然而&#xff0c;这种方式虽然简单直接&#xff0c;却存在一些局限&#xff0c;比如它只能注入基本类型的值&#xff0c;并且需要显式地在每个需要注入的字段上使用注解。随着Spring Boot的…...

编程日记 2024/10/10 14:46:26

甲虫身体图像分割系统源码＆数据集分享

甲虫身体图像分割系统源码&#xff06;数据集分享 [yolov8-seg-EfficientRepBiPAN&#xff06;yolov8-seg-C2f-FocusedLinearAttention等50全套改进创新点发刊_一键训练教程_Web前端展示] 1.研究背景与意义 项目参考ILSVRC ImageNet Large Scale Visual Recognition Challen…...

编程日记 2024/10/10 14:44:23

Qt - QMenu

QMenu 1、menu转string输出 //GlobalEnum.h #include <QObject> #include <QMetaEnum> class GlobalEnum : public QObject {Q_OBJECT public:EnumTest();enum Enum_Test{ZhangSan 0,WangWu,};Q_ENUM(Enum_Test) };#define EnumToString(e) \ QMetaEnum::fromTy…...

编程日记 2024/10/10 14:40:18

Golang 面试经典题：map 的 key 可以是什么类型？哪些不可以？

Golang 面试经典题&#xff1a;map 的 key 可以是什么类型&#xff1f;哪些不可以&#xff1f; 在 Golang 的面试中&#xff0c;map 类型的使用是一个常见的考点&#xff0c;其中对 key 类型的合法性 是一道常被提及的基础却很容易被忽视的问题。本文将带你深入理解 Golang 中…...

编程新知 2025/12/20 7:42:02

【力扣数据库知识手册笔记】索引

索引 索引的优缺点 优点1. 通过创建唯一性索引&#xff0c;可以保证数据库表中每一行数据的唯一性。2. 可以加快数据的检索速度&#xff08;创建索引的主要原因&#xff09;。3. 可以加速表和表之间的连接&#xff0c;实现数据的参考完整性。4. 可以在查询过程中&#xff0c;…...

编程新知 2026/1/25 4:36:37

PPT|230页| 制造集团企业供应链端到端的数字化解决方案：从需求到结算的全链路业务闭环构建

制造业采购供应链管理是企业运营的核心环节&#xff0c;供应链协同管理在供应链上下游企业之间建立紧密的合作关系&#xff0c;通过信息共享、资源整合、业务协同等方式&#xff0c;实现供应链的全面管理和优化&#xff0c;提高供应链的效率和透明度&#xff0c;降低供应链的成…...

编程新知 2026/1/30 22:07:56

【SpringBoot】100、SpringBoot中使用自定义注解+AOP实现参数自动解密

在实际项目中，用户注册、登录、修改密码等操作，都涉及到参数传输安全问题。所以我们需要在前端对账户、密码等敏感信息加密传输，在后端接收到数据后能自动解密。 1、引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId...

编程新知 2025/11/28 6:00:25

微服务商城-商品微服务

数据表 CREATE TABLE product (id bigint(20) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT 商品id,cateid smallint(6) UNSIGNED NOT NULL DEFAULT 0 COMMENT 类别Id,name varchar(100) NOT NULL DEFAULT COMMENT 商品名称,subtitle varchar(200) NOT NULL DEFAULT COMMENT 商…...

编程新知 2026/1/29 18:30:30

鱼香ros docker配置镜像报错：https://registry-1.docker.io/v2/

使用鱼香ros一件安装docker时的https://registry-1.docker.io/v2/问题 一键安装指令 wget http://fishros.com/install -O fishros && . fishros出现问题&#xff1a;docker pull 失败 网络不同&#xff0c;需要使用镜像源 按照如下步骤操作 sudo vi /etc/docker/dae…...

编程新知 2025/12/31 6:28:08

精益数据分析（97/126）：邮件营销与用户参与度的关键指标优化指南

精益数据分析&#xff08;97/126&#xff09;&#xff1a;邮件营销与用户参与度的关键指标优化指南 在数字化营销时代&#xff0c;邮件列表效度、用户参与度和网站性能等指标往往决定着创业公司的增长成败。今天&#xff0c;我们将深入解析邮件打开率、网站可用性、页面参与时…...

编程新知 2025/12/13 4:04:33

DeepSeek 技术赋能无人农场协同作业：用 AI 重构农田管理 “神经网”

目录 一、引言二、DeepSeek 技术大揭秘2.1 核心架构解析2.2 关键技术剖析 三、智能农业无人农场协同作业现状3.1 发展现状概述3.2 协同作业模式介绍 四、DeepSeek 的 “农场奇妙游”4.1 数据处理与分析4.2 作物生长监测与预测4.3 病虫害防治4.4 农机协同作业调度 五、实际案例大…...

编程新知 2025/9/24 13:35:36

LINUX 69 FTP 客服管理系统 man 5 /etc/vsftpd/vsftpd.conf

FTP 客服管理系统 实现kefu123登录&#xff0c;不允许匿名访问&#xff0c;kefu只能访问/data/kefu目录&#xff0c;不能查看其他目录 创建账号密码 useradd kefu echo 123|passwd -stdin kefu [rootcode caozx26420]# echo 123|passwd --stdin kefu 更改用户 kefu 的密码…...

编程新知 2026/1/25 9:03:19

虚拟电厂发展三大趋势：市场化、技术主导、车网互联

市场化&#xff1a;从政策驱动到多元盈利 政策全面赋能 2025年4月&#xff0c;国家发改委、能源局发布《关于加快推进虚拟电厂发展的指导意见》&#xff0c;首次明确虚拟电厂为“独立市场主体”&#xff0c;提出硬性目标&#xff1a;2027年全国调节能力≥2000万千瓦&#xff0…...

编程新知 2025/12/20 18:09:59