HTML入门:简单了解 HTML 和浏览器

你好,我是云桃桃。今天来简单了解一下 HTML 以及浏览器。

HTML 是什么?

HTML(全称:Hypertext Markup Language)是一种标记语言,用于创建和呈现网页的结构和内容。

它由一系列标签(或称为元素)组成,每个标签描述了网页中的一个特定部分或内容。

HTML 主要包括标题、段落、链接、图像、表格等。通过使用不同的 HTML 标签和属性,开发者可以定义页面的各种元素和其在页面上的布局和样式。

HTML 文件的后缀名,我们最常用的是以.html来结尾。其他的还有.mhtml,.htm。

那开发好代码了,我们如何展示给用户呢?这时候就需要用浏览器了。

浏览器是什么?

浏览器是一种用于显示 HTML 网页的工具。它可以是独立的软件,比如,下图的。

图片

从左到右,从上倒下依次是Opera(不常用),火狐,由 Microsoft 开发的internet explorer(现在win10升级为Microsoft edge了),苹果开发的Mac OS 和 iOS 操作系统的Safari,由 Google 谷歌开发的跨平台浏览器 Google Chrome(常用,推荐)。

也可以内置在其他软件中。比如,微信和 QQ 也内置了浏览器功能。

图片

可以这么说,浏览器和 HTML 网页之间的关系就像是,翻译员和外语文章之间的关系。

HTML 网页是一种外语编码文章,它通过解析 HTML 网页中的标记语言,将其转换为可视化的网页,并在用户的设备上显示出来。

所以,我们打开手机端或者电脑端浏览器的一刻起,我们基本就进入了 HTML 的世界。 HTML 是构建网页的基础,它的用途广泛而重要。

比如,你可以看到各种各样的网站,从新闻门户到电子商务平台tao.b,jd,从社交媒体到在线学习平台,无处不在的都有 Web 前端的身影。

HTML 简单案例以及运行

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>一起学习前端,一起成长!</title>
  </head>
  <body>
    <h1>这是一个大标题</h1>
    <p>这是一个段落</p>
  </body>
</html>

可以在 vscode 里面先建立一个文件,后缀是.html,然后,预览可看到 html 网页文件效果。预览呢,有以下 2 种方式。

1、在当前页面工作区右击选择“open in brower”即可在默认浏览器打开页面。

2、还可以在本地双击打开运行。

效果如下。

图片

好了,本节完。

排版:云桃桃 | 图片设计:云桃桃   

图片

作者介绍:

云桃桃,在写作的程序媛。终身学习者,陪你一起编程,一起写作❤️

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

小程序API能力集成指南——画布API汇总(五)

CanvasContext canvas 组件的绘图上下文。 方法如下&#xff08;4&#xff09;&#xff1a; setLineWidth CanvasContext.setLineWidth CanvasContext.setLineWidth(number lineWidth) 功能描述 设置线条的宽度 参数 number lineWidth 线条的宽度&#xff0c;单位 px…

论文研读_多目标部署优化:无人机在能源高效无线覆盖中的应用(ImMOGWO)精简版

此篇文章为Multi-objective Deployment Optimization of UAVs for Energy-Efficient Wireless Coverage的论文学习笔记&#xff0c;只供学习使用&#xff0c;不作商业用途&#xff0c;侵权删除。并且本人学术功底有限如果有思路不正确的地方欢迎批评指正! 创新点 RD算法 混合…

热红外图像直方图修正显示

热红外图像的直方图修正是一种用于增强图像对比度和可视化细节的技术。下面是一个使用Python和OpenCV库实现直方图均衡化的示例代码&#xff1a; import cv2 import numpy as np# 读取热红外图像 image cv2.imread(thermal_image.png, cv2.IMREAD_GRAYSCALE)# 对图像进行直方…

.NetCore6.0实现ActionFilter过滤器记录接口请求日志

文章目录 目的实现案例&#xff1a;一.首先我们新建一个WebApi项目二.配置 appsettings.json 文件&#xff0c;配置日志存放路径三.创建 Model 文件夹&#xff0c;创建AppConfig类和ErrorLog类1.在AppConfig类中编写一个GetConfigInfo方法获取配置文件中的值2.在ErrorLog类中&a…

JAVA虚拟机实战篇之内存调优[1](内存泄露和溢出概念、常见场景、解决思路)

文章目录 内存泄漏&#xff08;memory leak&#xff09;内存溢出&#xff08;Out of Memory&#xff09;&#xff1a; 内存泄漏的常见场景场景一&#xff1a;未删除用户数据场景二&#xff1a;分布式任务调度 解决内存溢出解决内存溢出思路发现问题 – Top命令发现问题 – Visu…

云计算OpenStack KVM迁移

动态迁移 static migration 静态迁移 cold migration 冷迁移 offline migration 离线迁移 live migration 动态迁移 hot migration 热迁移 online migration 在线迁移 衡量 整体迁移时间 服务器停机时间 性能影响(迁移后和其它客户机) 特点 负载均衡 解除硬件依赖…

算法刷题day22:双指针

目录 引言概念一、牛的学术圈I二、最长连续不重复序列三、数组元素的目标和四、判断子序列五、日志统计六、统计子矩阵 引言 关于这个双指针算法&#xff0c;主要是用来处理枚举子区间的事&#xff0c;时间复杂度从 O ( N 2 ) O(N^2) O(N2) 降为 O ( N ) O(N) O(N) &#xf…

three.js如何实现简易3D机房?(四)点击事件+呼吸灯效果

接上一篇&#xff1a; three.js如何实现简易3D机房&#xff1f;&#xff08;三&#xff09;显示信息弹框/标签&#xff1a;http://t.csdnimg.cn/5W2wA 目录 八、点击事件 1.实现效果 2.获取相交点 3.呼吸灯效果 4.添加点击事件 5.问题解决 八、点击事件 1.实现效果 2.…

postman登录鉴权之接口测试

一.背景 在做接口测试的时候&#xff0c;有些接口向后台请求数据的时候&#xff0c;是需要用户在登录情况下才有数据返回。 以电商平台为例&#xff0c;用户的个人中心&#xff0c;用户的订单列表&#xff0c;用户的支付信息等等&#xff0c;所有用户维度的数据都是需要登录态…

网络原理TCP_IP

文章目录 应用层自定义协议 传输层udp协议TCP协议1.确认应答2.超时重传3.连接管理建立连接, 三次握手断开连接, 四次挥手tcp的状态 4.滑动窗口5.流量控制6.拥塞控制7.延时应答8.携带应答9.面向字节流10.异常情况 网络层IP协议地址管理路由选择 数据链路层以太网 应用层 自定义…

okHttp MediaType MIME格式详解

一、介绍 我们在做数据上传时&#xff0c;经常会用到Okhttp的开源库&#xff0c;okhttp开源库也遵循html提交的MIME数据格式。 所以我们经常会看到applicaiton/json这样的格式在传。 但是如果涉及到其他文件等就需要详细的数据格式&#xff0c;否则服务端无法解析 二、okHt…

【信息系统项目管理师】--【信息技术发展】--【新一代信息技术及应用】--【虚拟现实】

文章目录 第二章 信息技术发展2.2 新一代信息技术及应用2.2.6 虚拟现实1.技术基础2.关键技术3.应用和发展 第二章 信息技术发展 信息技术是在信息科学的基本原理和方法下&#xff0c;获取信息、处理信息、传输信息和使用信息的应用技术总称。从信息技术的发展过程来看&#xff…

3.5 力扣 交错字符串

97. 交错字符串 给定三个字符串 s1、s2、s3&#xff0c;请你帮忙验证 s3 是否是由 s1 和 s2 交错 组成的。 两个字符串 s 和 t 交错 的定义与过程如下&#xff0c;其中每个字符串都会被分割成若干 非空 子字符串&#xff1a; s s1 s2 ... snt t1 t2 ... tm|n - m| &…

PDF处理控件aspose.PDF功能演示:将 PDF 转换为 Word 文档

在 Web 应用程序中处理文档时&#xff0c;将 PDF 文件无缝转换为 Word 文档的能力是一项宝贵的资产。此任务不仅常见&#xff0c;而且对于文档转换器和编辑器、从编辑和协作到内容提取的各种应用程序来说也是必不可少的。在这篇博文中&#xff0c;我们将探讨如何使用 JavaScrip…

【vue3之组合式API】

组合式API 一、setup1.写法2.如何访问3.语法糖4.同步返回对象 二、reactive()和ref()1.reactive()2.ref() 三、computed四、watch函数1侦听单个数据2.侦听多个数据3. immediate4. deep5.精确侦听对象的某个属性 五、生命周期函数六、组件通信1.父传子2. 子传父 七、模版引用1. …

数字创新的风口:创业者如何在Web3时代抢占先机

随着区块链技术的不断发展&#xff0c;Web3正成为数字创新的新风口&#xff0c;为创业者们带来了前所未有的机遇和挑战。本文将从另一个角度探讨Web3对创业者的影响&#xff0c;并提出创业者在Web3时代抢占先机的策略和方法。 1. Web3重新定义了商业模式 Web3不仅仅是一种技术…

Java设计模式:建造者模式之经典与流式的三种实现(四)

本文将深入探讨Java中建造者模式的两种实现方式&#xff1a;经典建造者与流式建造者。建造者模式是一种创建型设计模式&#xff0c;它允许你构建复杂对象的步骤分解&#xff0c;使得对象的创建过程更加清晰和灵活。我们将通过示例代码详细解释这两种实现方式&#xff0c;并分析…

重塑Android通信新格局:探秘Android 8.0之后的Binder架构革新

重塑Android通信新格局:探秘Android 8.0 之后的Binder架构革新 1. 引言 Android作为全球主流移动操作系统,在移动设备领域扮演着举足轻重的角色。其开放性、灵活性和广泛的应用生态系统使得无数用户和开发者受益。作为一个基于Linux内核的操作系统,Android的核心架构设计至…

Spring Webflux 详解

目录 0、组件对比 1、WebFlux 1、引入 2、Reactor Core 1、HttpHandler、HttpServer 3、DispatcherHandler 1、请求处理流程 4、注解开发 1、目标方法传参 2.返回值写法 5、文件上传 6、错误处理 7、RequestContext 8、自定义Flux配置 9、Filter WebFlux&am…

Elasticsearch模拟网络丢包

背景 Elasticsearch一旦遇到网络抖动就可能节点&#xff08;单个或者多个&#xff09;掉出集群。从而集群出现red/yellow状态&#xff0c;理论情况下ES会自愈&#xff0c;但某些情况下可能非预期&#xff0c;此时就需要我们模拟各种case了&#xff0c;比如网络丢包。 操作 1…