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

【H2O2|全栈】关于HTML（1）认识HTML

news 文章来源：https://blog.csdn.net/ZC13786305863/article/details/141846577 2025/5/14 20:52:06

HTML相关知识

目录

前言

准备工作

WEB前端是什么？

HTML是什么？

如何运行HTML文件？

标签

概念

分类

双标签和单标签

行内标签和块标签

HTML文档结构

预告和回顾

UI设计相关

Markdown | Md文档相关 

项目合作管理相关 

后话

前言

本系列的博客将分享前端HTML的相关知识点。

本篇作为本系列的第一期博客，主要讲解HTML入门的一些知识点。在文章的结尾我会给出本篇已经整理好的Markdown笔记源码，需要的朋友可以自行取用。

HTML我也是刚刚入门的水平，所以写的可能没那么深入，但是对于前端小白而言是足够用了。

主打分享，多多包涵（抱拳）。

准备工作

软件：【参考版本】Visual Studio Code，有关VS Code的下载安装方式可以自行站内搜索。

*使用HBuilderX或者其他的HTML编辑器都是可以的哈* 

浏览器版本：Chrome

系统版本： Win10/11/其他非Windows版本

*我的电脑是Win10的版本，仅供参考*

WEB前端是什么？

前端即网站前台部分，运行在PC端，移动端等浏览器上展现给用户浏览的网页。 

通常来说，前端可以分为前端设计和前端开发两个模块，先由设计人员做出网页的视觉设计，然后提交给开发人员进行代码上的实现。

对于整个全栈项目而言，实质上整个流程里还有后端开发、软件测试以及运行维护等诸多岗位，这里就暂时不展开来说了。

一般来说，WEB前端网页由三个层次结构组成：

  1. 结构层（HTML）
  2. 表现层（CSS）
  3. 行为层（JavaScript）

其实很好理解，HTML就是网页的框架结构，相当于房屋里的钢筋混凝土，提供了一个网页的所有构成元素。

比如下面这段代码（暂时不用知道它的含义），提供了一个最简单的HTML5网页：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>我是一个标题</title>
</head><body><h1>我是网页标题</h1><p>我是第一段内容</p><p>我是第二段内容</p>
</body></html>

在Chrome浏览器中运行，应该是如下的效果：

CSS表现为网页的所有样式，相当于房子的装潢，提供了网页的视觉效果。

在刚才的HTML页面中，如果我想使标题和文字的视觉效果发生改变，就可以使用CSS样式表实现。只需在 <head></head> 标签里面引入这一段样式：

<style>h1 {color: #e12a2a;font-family: '宋体';}p {color: #f68e43;font-family: '楷体';font-size: larger;}
</style>

那么网页的效果就会变成下边这样：

JavaScript表现为网页上的所有动作，相当于房子里的家具，用来实现各种行为和实际的功能。

在刚才的网页中，我们可以在 <head></head> 添加下面这段代码，实现点击第二段文字打开一张指定图片的功能：

<script>function openImage() {window.open("https://profile-avatar.csdnimg.cn/e495e388550d4706b75bf7261bed6d28_zc13786305863.jpg!1", "_blank");}
</script>

注意，第二段文字里面要加上鼠标点击时触发的JS动作：

<p onclick="openImage()">我是第二段内容</p>

然后再次点击第二段文字时，就可以打开指定的图片了：

这个案例我将会放到文章的最后，感兴趣的可以拿去跑跑看。

CSS，JS在这里暂时不去扩展，本文先从最基本的HTML开始。

HTML是什么？

HTML是HyperText Mark Language的缩写，中文全称叫“超文本  标记  语言”。

它是一种用来创建网页的标准的标记语言，html文件运行在浏览器上，默认由浏览器解析。

<!-- 1.标记语言由一套或多套标记标签组成(MarkupTag)，用来描述、编辑网页的2.注意标记语言和编程语言的区别，前者是解释性的，逐行解析
--> 

html文档（文件），在浏览器上展示为Web页面。也可以说，HTML文档就是Web页面。

如何运行HTML文件？

HTML运行的位置，通常来说是浏览器。

常见的浏览器大概有以下这些：

`360 ie 谷歌 搜狗 猎豹 夸克 uc 火狐 safari qq 2345`

推荐使用Chrome浏览器，也就是谷歌浏览器。 当然，也可以使用系统自带的Edge浏览器。

这里涉及到一个概念，叫浏览器的内核。它是一种渲染引擎(页面渲染)、 JS引擎，可以完成页面的逻辑以及操作，并解析和执行js代码。

这里例举几种浏览器的内核：

浏览器

 内核

IETrident内核，也是俗称的IE内核
Chrome(谷歌)  统称为Chromium内核或Chrome内核，以前是Webkit内核，现在是Blink内核
火狐(FireFox) Gecko内核，俗称Firefox内核
safari Webkit内核
Opera最初是自己的Presto内核，后来是Webkit，现在是Blink内核
Edge默认Chromium的Blink内核,可以打开Internet explore模式也就是Trident内核

标签

概念

标签(MarkupTag)，又叫标记标签，在HTML中是用来描述、编辑网页的(HTML Tag)。

任意纯HTML文件，都是由标签和内容两个基本组成部分构成的。

html标签的形式通常有这两类：

<aaa></aaa>
<bbb/>

*第一排是双标签，第二排是单标签，关于标签的分类后面会讲*

标签和内容一起，构成了HTML的基本元素。 

分类

标签的分类标准有很多种，具体来说，有两种标准：

  • 双标签和单标签
  • 行内标签和块标签

注意：这只是两种分类的标准罢了， 并不是说行内标签就一定是双标签或者单标签中的一种，而块标签就是另一种，两种分类并没有严格的对应关系。

双标签和单标签

双标签由开始标签（开放标签）和结束标签（闭合标签）组成，这两种标签就像一对双胞胎一样相互对应。但是，结束标签比开始标签多一个 / 符号。以html标签为例：

<html></html>

在双标签之间是可以填写文本内容的，而标签可以描述这些内容。

比如 <p></p>标签之间的内容，就可以显示为一个段落：

<p>这是一个段落</p>

单标签（自闭合标签）是没有另一半与之对应的，它自己就是一个完整的标签，并不能包裹任何内容。

以常见的<hr />标签为例，表现为一段分割线：

<hr />
行内标签和块标签

行内标签在页面中仅仅占一行，只有到达浏览器可视区域（或者所在盒子）的边界才会自动换行。即使自动换行后，由于没有设置边距，上下两行文字也是挨在一起的。

以普通文本标签为例，使用的文字为《出师表》中的一段，代码和浏览器中展示的效果如下：

<span>先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。
</span>

块标签在页面中独自占用一块区域，包括文本内容和边距等。 

在上一个行内标签的后面，加入一组<p></p>标签，同样也是《出师表》的内容，代码和效果如下：

<p>宫中府中，俱为一体；陟罚臧否，不宜异同。若有作奸犯科及为忠善者，宜付有司论其刑赏，以昭陛下平明之理，不宜偏私，使内外异法也。
</p>

可以看到，两部分文字之间有一定的边距。为了更直观的看到块标签和行内标签的区别，我们可以在浏览器的空白区域右键单击，选择“检查”：

在右侧的检查区域中，鼠标悬浮到指定的文本的位置，比如说第一段，就可以在左侧看到当前文本所占的区域：

可以看到，行内标签所占的位置只有其中元素占的位置。

还是检查区域，鼠标悬浮到第二段文字的位置，可以看到它所占的区域：

不难发现，除了文本本身所占的区域，段落还包括上下的边距。

在此之后添加一个span文本，可以看到新的文本被自动换行了。

对于所有的块元素，本身都是自带换行的。 

HTML文档结构

在了解了标签的相关内容之后，我们便可以知道一个标准的HTML5（HTML的版本）由哪些部分构成了。为了方便解释，为之前章节中的代码加上注释：

<!-- 文档类型：html -->
<!DOCTYPE html><!-- html根标签 -->
<html><!-- 头部 -->
<head><!-- 元数据：编码类型 --><meta charset="UTF-8"><!-- 网页标题 --><title></title>
</head><!-- 主体 -->
<body></body></html>
DOCTYPE

声明文档的类型，可以大写也可以小写。

Doc是Document（文件）的缩写，Type是种类，类型。html代表文件类型为HTML。

<html>

和末尾的</html>作为一对，组成根标签。根标签是标记语言的最高级的标签，网页所有的元素都是它的子元素。其概念源自可扩展标记语言（Extensible Markup Language, XML），感兴趣的读者可以自行了解，后面也可能会单独出一期XML的杂谈笔记。

<head>

和后面的</head>作为一对，组成头部标签。头部标签中的内容是交给浏览器识别的，通常来说，包含元数据、标题、链接、样式、JS行为等子标签。

对于纯HTML文档而言，目前暂时只需要知道其中的两项的一小部分。

<meta>

meta中间的内容是元数据，示例代码中的meta标签中的属性“charset”代表字符集类型。UTF-8是一种常用的字符集类型，目前绝大部分的程序、代码都是使用这个字符集进行编码的。

*注意，错误的编码类型会导致乱码问题，比如使用GBK编码书写的文档内容，直接添加到一个标注了字符集类型为utf-8的网页中，将导致文件内容不可读*

<title>

和后面的</title>作为一对，组成网页标题标签。网页标题显示在浏览器最上边的位置：

<body>

和后面的</body>作为一对，组成主体标签。其中的内容是浏览器窗口中可视化的元素。

预告和回顾

在我的HTML第二期博客中，将会介绍HTML的基本标签的使用，并会加上实际的案例。

本博客是HTML系列的第一篇博客，也是代码编写的第一篇博客。而所有的这些内容，最终都是为我们的全栈项目服务的。

对全栈项目感兴趣的朋友，也可以看看我之前的博客——

UI设计相关

PS第三期icon-default.png?t=O83Ahttp://t.csdnimg.cn/NDKCS

Markdown | Md文档相关 

Markdown（全一期）icon-default.png?t=O83Ahttp://t.csdnimg.cn/pdtLW

项目合作管理相关 

SVN（全一期）icon-default.png?t=O83Ahttp://t.csdnimg.cn/Oz5zA

后话

在全栈领域，博主也只不过是刚刚摸到了它的门槛。关于这篇博客，主要是记录一下自己学习的一些经历，然后把自己领悟到的一些东西总结一下，分享给大家。

文章全篇的操作过程都是笔者亲自操作完成的，一些定义性的文字加入了笔者自己的很多理解在里面，所以仅供参考。如果有说的不对的地方，还请谅解。

【H2O2】

  

相关文章：

【H2O2|全栈】关于HTML（1）认识HTML

HTML相关知识 目录 前言 准备工作 WEB前端是什么&#xff1f; HTML是什么&#xff1f; 如何运行HTML文件&#xff1f; 标签 概念 分类 双标签和单标签 行内标签和块标签 HTML文档结构 预告和回顾 UI设计相关 Markdown | Md文档相关 项目合作管理相关 后话 前…...

编程日记 2024/9/8 20:11:47

Oracle（111） 如何使用RMAN备份数据库？

使用 RMAN&#xff08;Recovery Manager&#xff09;备份 Oracle 数据库是确保数据安全和可恢复性的关键步骤。下面是详细的指导和代码示例&#xff0c;展示如何使用 RMAN 进行数据库备份。 1. 准备工作 在开始备份之前&#xff0c;需要确保以下几点&#xff1a; 已安装并配…...

编程日记 2024/9/8 20:05:40

linux字符设备驱动程序

字符设备驱动程序简介  linux系统中万物皆文件&#xff0c;驱动程序加载后会在/dev目录下生成一 个对应的文件&#xff0c;如/dev/led。应用程序就是先用open打开该文件&#xff0c; 用write控制led的亮灭&#xff0c;用read读取led的亮灭&#xff0c;用完之后用close 关闭该…...

编程日记 2024/9/8 20:01:36

【pyhton】python如何实现将word等文档中的文字转换成语音

✨✨ 欢迎大家来到景天科技苑✨✨ &#x1f388;&#x1f388; 养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; &#x1f3c6; 作者简介&#xff1a;景天科技苑 &#x1f3c6;《头衔》&#xff1a;大厂架构师&#xff0c;华为云开发者社区专家博主&#xff0c;…...

编程日记 2024/9/8 19:58:33

Claude Enterprise推出计划

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…...

编程日记 2024/9/8 19:57:32

【前端】CSS控制style样式失效

在CSS中&#xff0c;可以通过几种方式控制或禁用特定的style样式。 使用all: unset来重置所有可继承的属性&#xff0c;并清除所有的样式&#xff1a; .element {all: unset;} 使用inherit值来使属性获取其父元素的值&#xff1a; .element {color: inherit;font-size: inh…...

编程日记 2024/9/8 19:55:30

How can I load the openai api configuration through js in html?

题意&#xff1a;怎样在HTML中通过JavaScript加载OpenAI API配置 问题背景&#xff1a; I am trying to send a request through js in my html so that openai analyzes it and sends a response, but if in the js I put the following: 我正在尝试通过HTML中的JavaScript发…...

编程日记 2024/9/8 19:54:29

Pipeline流水线通过git拉取Jenkinsfile报错 error: RPC failed； result=22, HTTP code = 404

Pipeline流水线通过git拉取Jenkinsfile报错 error: RPC failed; result22, HTTP code 404 在学习共享库时使用通过git拉取jenkinsfile时&#xff0c;报错在排查gitlab服务状态&#xff0c;网络通讯&#xff0c;防火墙规则以及Jenkins凭据均可以正常使用&#xff0c;最后发现的…...

编程日记 2024/9/8 19:53:28

【与C++的邂逅】--- string容器使用

Welcome to 9ilks Code World (๑•́ ₃ •̀๑) 个人主页: 9ilk (๑•́ ₃ •̀๑) 文章专栏&#xff1a; 与C的邂逅 本篇博客我们将来了解string容器本身以及接口的使用。 string是串&#xff0c;本质是一个字符数组&#xff0c;可以对其进行增删查改。 &am…...

编程日记 2024/9/8 19:51:26

1-18 平滑处理——高斯滤波 opencv树莓派4B 入门系列笔记

目录 一、提前准备 二、代码详解 cv2.GaussianBlur函数用于对图像进行高斯滤波。高斯滤波是一种平滑图像的技术&#xff0c;用于减少噪声和细节。函数的三个参数如下&#xff1a; 三、运行结果 四、完整工程贴出 一、提前准备 1、树莓派4B 及 64位系统 2、提前安装opencv库…...

编程日记 2024/9/8 19:49:23

小爱打工，你躺平！让「微信AI小助理」接管你的文件处理，一个字：爽！

前两天&#xff0c;搞了个微信 AI 小助理-小爱(AI)&#xff0c;爸妈玩的不亦乐乎。 零风险&#xff01;零费用&#xff01;我把AI接入微信群&#xff0c;爸妈玩嗨了&#xff0c;附教程&#xff08;下&#xff09; 最近一直在迭代中&#xff0c;挖掘小爱的无限潜力: 链接丢给…...

编程日记 2024/9/8 19:45:20

管理学习（一）马云《赢在中国》创业演讲整理

目录 一、小公司也需要制度二、不要害怕冒险三、创业者要的不是技术&#xff0c;而是胆识四、不要惧怕和大企业竞争五、理念不一样&#xff0c;老板永远是对的六、要真实地为客户创造价值七、跟风险投资谈判&#xff0c;说到要做到八、风险投资&#xff0c;只能帮你不能救你九、…...

编程日记 2024/9/8 19:44:18

Opencv中的直方图(2)计算图像的直方图函数calcHist()的使用

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 计算一组数组的直方图。 函数 cv::calcHist 计算一个或多个数组的直方图。用于递增直方图bin的元组的元素是从相同位置的相应输入数组中获取的。…...

编程日记 2024/9/8 19:41:16

Buzzer：一款针对eBPF的安全检测与模糊测试工具

关于Buzzer Buzzer是一款功能强大的模糊测试工具链&#xff0c;该工具基于Go语言开发&#xff0c;可以帮助广大研究人员简单高效地开发针对eBPF的模糊测试策略。 功能介绍 下面给出的是当前版本的Buzzer整体架构&#xff1a; 元素解析&#xff1a; 1、ControlUnit&#xff1a…...

编程日记 2024/9/8 19:39:14

若依框架登录鉴权详解（动态路由）

若依框架登录鉴权&#xff1a;1.获取token&#xff08;过期在响应拦截器中实现&#xff09;,2.基于RBAC模型获取用户、角色和权限信息&#xff08;在路由前置守卫&#xff09;&#xff0c;3.根据用户权限动态生成&#xff08;从字符串->组件&#xff0c;根据permission添加动…...

编程日记 2024/9/8 19:35:09

孤儿进程、僵尸进程、守护进程（精灵进程）

目录 一、孤儿进程 二、僵尸进程 三、守护进程&#xff08;精灵进程&#xff09; 一、孤儿进程 定义&#xff1a;孤儿进程是指那些其父进程已经结束&#xff0c;但它们依然在运行的进程 创建一个孤儿进程&#xff1a; #include <stdio.h> #include <stdlib.h> #in…...

编程日记 2024/9/8 19:34:08

Centos9 网卡配置文件

1、Centos stream 9 网络介结 Centos以前版本&#xff0c;NetworkManage以ifcfg格式存储网络配置文件在/etc/sysconfig/networkscripts/目录中。但是&#xff0c;Centos steam 9现已弃用ifcfg格式&#xff0c;默认情况下&#xff0c;NetworkManage不再创建此格式的新配置文件。…...

编程日记 2024/9/8 19:31:03

ios免签H5

1、windows下载mobileconfig文件制作工具&#xff0c;可在csdn搜索iPhone_Mobileconfig_Tool下载安装&#xff1b;IOS 从APP Store 下载Apple Configurator 2 2、用申请的域名SSL证书给mobieconfig文件签名&#xff0c;最好下载Apache证书&#xff0c;里面包含 AE86211.crt…...

编程日记 2024/9/8 19:30:02

RedHat9.x-基本操作

本例以RedHat9.3为例 安装ifconfig命令 # dnf -y install net-tools 安装图形化 # dnf -y groupinstall "Server with GUI" 安装tmux # dnf -y install tmux -- screen已弃用 network-scripts 已弃用...

编程日记 2024/9/8 19:29:01

华为 HCIP-Datacom H12-821 题库 (5)

有需要题库的可以看主页置顶 需要题库的加Q裙 V群仅进行学习交流 1.以下关于堆叠 MAD 检测说法错误的是&#xff1f; A、堆系统互为代理进行 MAD 检测时&#xff0c;两个堆系统可以使用相同的D omain ID B、MAD 检测的方式分为直连检测、代理检测 C、MAD 代理检测要求所有堆叠…...

编程日记 2024/9/8 19:25:58

vue中oninput和@input区别

使用oninput绑定&#xff0c;此方法会导致中文输入法情况下&#xff0c;v-model和value不一致&#xff0c;原因是在中文输入法情况下vue中的v-model会自动return&#xff0c;v-mode绑定的值不变&#xff0c;value绑定的值可变。 :οninput"valuevalue.replace(/\D/g,)&qu…...

编程日记 2024/9/8 19:18:43

分布式锁（Redis的setnx、Redisson）

一、使用Redis的setnx实现分布式锁 1、使用Redis的setnx实现分布式锁出现的问题 &#xff08;1&#xff09; 宕机时的锁释放问题 在分布式系统中&#xff0c;如果一个节点获取了锁&#xff0c;但在执行任务过程中发生故障&#xff0c;没有释放锁&#xff0c;其他节点可能会一…...

编程日记 2024/9/8 19:17:39

从0开始深度学习（4）——线性回归概念

1 线性回归 回归&#xff08;regression&#xff09;指能为一个或多个自变量与因变量之间的关系进行建模。 1.1 线性模型 线性假设是指目标可以表示为特征的加权和&#xff0c;以房价和面积、房龄为例&#xff0c;可以有下面的式子&#xff1a; w称为权重&#xff08;weigh…...

编程日记 2024/9/8 19:16:17

C语言中的预处理指令中的其中一对——#ifdef和#ifndef

目录 开头1.什么是#ifdef和#ifndef?2.#ifdef和#ifndef的实际应用判断ABCD这个宏是否被定义过判断HELLO这个宏是否没被定义过防止头文件重复定义 下一篇博客要说的东西 开头 大家好&#xff0c;我叫这是我58。今天&#xff0c;我们要学一下关于C语言中的预处理指令中的其中一对…...

编程日记 2024/9/8 19:13:41

交换机自动化备份配置（H3C_无人值守）

介绍&#xff1a; 在日常运维过程中&#xff0c;需要定时备份设备的配置&#xff0c;在设备数量过于庞大的情况下&#xff0c;对我们的运维工作会造成极大地不便&#xff0c;通过python自动化能够完美解决人工手动保存设备配置的问题。而且自动化运维在未来也一定是大势所趋&a…...

编程日记 2024/9/8 19:12:31

缓存预热有哪些方案？

一道经典面试题&#xff1a;缓存预热有哪些方案&#xff1f; 在系统业务高峰期到来之前&#xff0c;我们提前将一些热点数据加载到缓存中&#xff0c;进而提高系统的响应速度&#xff0c;这就是所谓的缓存预热。 那么怎么实现缓存预热呢&#xff1f; 一般来说&#xff0c;我…...

编程日记 2024/9/8 19:11:18

「iOS学习」——Masonry学习

iOS学习 前言Masonry的属性Masonry的使用基础APIAuto Boxing修饰语倍数中心点设置边距优先级使用 总结 前言 暑假我们学习了使用CocoaPods引入第三方库&#xff0c;实现使用SVG图片。而Masonry作为一个轻量级的布局架构&#xff0c;在使用中可以节省很多时间。故进行简单学习。…...

编程日记 2024/9/8 19:08:11

828华为云征文｜华为云Flexus云服务器X实例之openEuler系统下部署GitLab服务器

828华为云征文&#xff5c;华为云Flexus云服务器X实例之openEuler系统下部署Gitlab服务器 前言一、Flexus云服务器X实例介绍1.1 Flexus云服务器X实例简介1.2 Flexus云服务器X实例特点1.3 Flexus云服务器X实例使用场景 二、GitLab介绍2.1 GitLab简介2.2 GitLab主要特点 三、本次…...

编程日记 2024/9/8 19:07:07

51单片机的无线病床呼叫系统【proteus仿真+程序+报告+原理图+演示视频】

1、主要功能 该系统由AT89C51/STC89C52单片机LCD1602显示模块温湿度传感器模块矩阵按键时钟模块等模块构成。适用于病床呼叫系统、16床位呼叫等相似项目。 可实现基本功能: 1、LCD1602实时显示北京时间、温湿度信息、呼叫床位等信息&#xff1b; 2、DHT11采集病房温湿度信息&…...

编程日记 2024/9/8 19:06:06

计算机毕业设计 | SpringBoot+vue 游戏商城 steam网站管理系统(附源码)

1&#xff0c;项目背景 国家大力推进信息化建设的大背景下&#xff0c;城市网络基础设施和信息化应用水平得到了极大的提高和提高。特别是在经济发达的沿海地区&#xff0c;商业和服务业也比较发达&#xff0c;公众接受新事物的能力和消费水平也比较高。开展商贸流通产业的信息…...

编程日记 2024/9/8 19:04:44