【H2O2|全栈】关于HTML(1)认识HTML

news2024/11/6 5:00:51

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】

  

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2114663.html

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

相关文章

顶踩Emlog插件源码

源码介绍 顶踩Emlog插件源码 前些天看到小刀娱乐网的文章页面有了一些变化&#xff0c;那就是增加了一个有价值/无价值的顶踩按钮。 样式也是非常的好看 再加上两个表情包是非常的有趣。 写到了Emlog系统&#xff0c;效果如上图。 如何使用&#xff1a; 需要在echo_log.…

Python 算法交易实验88 QTV200日常推进-关于继续前进的思考

说明 念念不忘,必有回响 最初的时候&#xff0c;完全不了解架构方面的东西。后来决定要搞好这一块的时候&#xff0c;也就是不断的琢磨&#xff0c;到现在4年的时间&#xff0c;改变已经非常大了。现在习以为常的&#xff0c;都是当初梦寐以求的&#xff0c;而且在可见的未来 &…

论文精读-Supervised Raw Video Denoising with a Benchmark Dataset on Dynamic Scenes

论文精读-Supervised Raw Video Denoising with a Benchmark Dataset on Dynamic Scenes 优势 1、构建了一个用于监督原始视频去噪的基准数据集。为了多次捕捉瞬间&#xff0c;我们手动为对象s创建运动。在高ISO模式下捕获每一时刻的噪声帧&#xff0c;并通过对多个噪声帧进行…

龙芯+FreeRTOS+LVGL实战笔记(新)——05部署主按钮

本专栏是笔者另一个专栏《龙芯+RT-Thread+LVGL实战笔记》的姊妹篇,主要的区别在于实时操作系统的不同,章节的安排和任务的推进保持一致,并对源码做了改进和优化,各位可以先到本人主页下去浏览另一专栏的博客列表(目前已撰写36篇,图1所示),再决定是否订阅。此外,也可以…

行空板上YOLO和Mediapipe图片物体检测的测试

Introduction 经过前面三篇教程帖子&#xff08;yolov8n在行空板上的运行&#xff08;中文&#xff09;&#xff0c;yolov10n在行空板上的运行&#xff08;中文&#xff09;&#xff0c;Mediapipe在行空板上的运行&#xff08;中文&#xff09;&#xff09;的介绍&#xff0c;…

Node.js学习记录(一)

目录 一、文件读取 readFile 二、写入文件 writeFile 三、动态路径 __dirname:表示当前文件所处的目录、path.join 四、获取路径文件名 path.basename 五、提取某文件中的css、JS、html 六、http 七、启动创建web服务器 服务器响应 八、将资源请求的 url 地址映射为文…

idea插件开发的第二天-写一个时间查看器

介绍 Demo说明 本文基于maven项目开发,idea版本为2022.3以上,jdk为1.8本文在Tools插件之上进行开发 Tools插件说明 Tools插件是一个Idea插件,此插件提供统一Spi规范,极大的降低了idea插件的开发难度,并提供开发者模块,可以极大的为开发者开发此插件提供便利Tools插件安装需…

Spark的Web界面

http://localhost:4040/jobs/ 在顶部导航栏上&#xff0c;可以点击以下选项来查看不同类型的Spark应用信息&#xff1a; Jobs - 此视图将列出所有已提交的作业&#xff0c;并提供每个作业的详细信息&#xff0c;如作业ID、名称、开始时间、结束时间等。Stages - 此视图可以查…

新160个crackme - 050-daxxor

运行分析 需要破解Name和Serial PE分析 C程序&#xff0c;32位&#xff0c;无壳 静态分析&动态调试 ida找到关键字符串&#xff0c;双击进入函数 通过静态分析发现&#xff1a;1、Name通过计算得到Name12、对Name1第3、5、6分别插入byte_401290、byte_401290、word_401292&…

Weibull概率分布纸(EXCEL VBA实现)

在学习Weibull分布理论的时候&#xff0c;希望有一张Weibull概率纸&#xff0c;用来学习图解法。但是在度娘上没有找到的Weibull概率纸的电子版。在书上看到的Weibull概率纸&#xff0c;只能复印下来使用。于是萌生了自己制作Weibull概率纸的想法&#xff0c;帮助自己更好地学习…

综合案例-数据可视化-折线图

一、json数据格式 1.1 json数据格式的定义与功能 json是一种轻量级的数据交互格式&#xff0c;可以按照json指定的格式去组织和封装数据&#xff0c;json数据格式本质上是一个带有特定格式的字符串。 功能&#xff1a;json就是一种在各个编程语言中流通的数据格式&#xff0…

全倒装COB超微小间距LED显示屏的工艺技术,相比SMD小间距有何优势

全倒装COB&#xff08;Chip On Board&#xff09;超微小间距LED显示屏&#xff0c;在工艺技术上的革新&#xff0c;相较于传统的SMD&#xff08;Surface Mount Device&#xff09;小间距LED显示屏&#xff0c;展现出了多方面的显著优势。 首先&#xff0c;全倒装技术极大地提升…

JAVAEE初阶第七节(下)——物理原理与TCP_IP

系列文章目录 JAVAEE初阶第七节&#xff08;下&#xff09;——物理原理与TCP_IP 文章目录 系列文章目录JAVAEE初阶第七节&#xff08;下&#xff09;——物理原理与TCP_IP 一.网络层重点协议 1. IP协议如何管理地址 1.1 解决IP地址不够用的问题 1.2 网段划分 1.3 特殊的IP…

深度剖析AI情感陪伴类产品及典型应用 Character.ai

前段时间AI圈内C.AI的受够风波可谓是让大家都丈二摸不着头脑&#xff0c;连C.AI这种行业top应用都要找谋生方法了&#xff01;投资人摸不着头脑&#xff0c;用户们更摸不着头脑。在这之前断断续续玩了一下这款产品&#xff0c;这次也是乘着这个风波&#xff0c;除了了解一下为什…

【数据库】MySQL表的Updata(更新)和Delete(删除)操作

目录 1.Update 案例1&#xff1a;将孙悟空同学的数学成绩变更为 80 分 案例2&#xff1a;将曹孟德同学的数学成绩变更为 60 分&#xff0c;语文成绩变更为 70 分 案例3&#xff1a;将总成绩倒数前三的 3 位同学的数学成绩加上 30 分 案例4&#xff1a;将所有同学的语文成绩…

计算机网络与Internet应用

一、计算机网络 1.计算机网络的定义 网络定义&#xff1a;计算机网络是指将地理位置不同的具有独立功能的多台计算机及其外部设备&#xff0c;通过通信线路连接起来&#xff0c;在网络操作系统&#xff0c;网络管理软件及网络通信协议的管理和协调下&#xff0c;实现资源共享…

『功能项目』武器的切换实例【34】

本章项目成果展示 我们打开上一篇33战士的A键连击的项目&#xff0c; 本章要做的事情是按键盘E键切换职业时切换手中的武器 首先在资源商店下载免费的武器模型 创建一个空物体 命名为WeaponPos 将武器预制体拖拽至WeaponPos &#xff08;注意调整空物体位置就可以后续文章会更…

CSP-J 之C++常用英文缩写

文章目录 C常用英文缩写前言常用缩写解析C 基础缩写输入输出相关控制台 命名与类型常用函数在线测评相关 总结 C常用英文缩写 前言 在编程比赛和日常开发中&#xff0c;C是一门广泛使用的编程语言&#xff0c;许多英文缩写贯穿其中。了解这些缩写不仅有助于提高编程效率&…

XGBoost算法-上

简单解释一下xgboost这个模型 xg是一个非常强大&#xff0c;非常受欢迎的机器学习模型&#xff0c;其中最大的特色就是boosting&#xff08;改进、推进&#xff09;&#xff0c;怎么改进呢&#xff1f;就是xgboost这个算法&#xff0c;它会先建立一颗简单的决策树&#xff0c;…

【Python知识宝库】文件操作:读写文件的最佳实践

&#x1f3ac; 鸽芷咕&#xff1a;个人主页 &#x1f525; 个人专栏: 《C干货基地》《粉丝福利》 ⛺️生活的理想&#xff0c;就是为了理想的生活! 文章目录 前言一、文件读取1. 使用open函数2. 逐行读取3. 使用readlines和readline 二、文件写入1. 写入文本2. 追加内容3. 写入…