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

过期的H2O2

已于 2024-09-03 21:10:43 修改

阅读量490

点赞数 11

分类专栏：【H2O2】HTML 文章标签： html 前端

于 2024-09-03 20:55:40 首次发布

本文链接：https://blog.csdn.net/ZC13786305863/article/details/141846577

版权

【H2O2】HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML相关知识

前言

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

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

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

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

准备工作

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

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

浏览器版本：Chrome

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

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

WEB前端是什么？

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

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

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

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

结构层（HTML）
表现层（CSS）
行为层（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代码。

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

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

<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系列的第一篇博客，也是代码编写的第一篇博客。而所有的这些内容，最终都是为我们的全栈项目服务的。

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

后话

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

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

【H2O2】

过期的H2O2

关注

11
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
【H2O2|全栈】关于HTML（1）认识HTML

本系列的博客将分享前端HTML的相关知识点。本篇作为本系列的第一期博客，主要讲解HTML入门的一些知识点。在文章的结尾我会给出本篇已经整理好的Markdown笔记源码，需要的朋友可以自行取用。HTML我也是刚刚入门的水平，所以写的可能没那么深入，但是对于前端小白而言是足够用了。主打分享，多多包涵（抱拳）。
复制链接

扫一扫

专栏目录